/* ===== MAIN: reset.css ===== */ /* ============================================ TECH-STC.RU - BASE RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } /* ===== MAIN: variables.css ===== */ /* ============================================ TECH-STC.RU - CSS VARIABLES ============================================ */ :root { --primary: #0056b3; --primary-1: #64a4de; --primary-2: #388fde; --primary-3: #0062bd; --primary-4: #235b8e; --accent: #0088cc; --secondary: #6c757d; --white: #fff; --gray: #f8f9fa; --dark: #212529; --border: #e9ecef; /*--background: #f7fafc;*/ --background: #f8fafd; --source-url: "https://tech-stc.ru/"; --source-name: "ТТК-СТАНДАРТ"; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --success: #1a7d39; --success-light: #4caf50; --success-dark: #145a2c; --danger: #c62828; --danger-light: #ef5350; --danger-dark: #9a1c1c; /* Colors - Technical Palette */ --color-bg: #ffffff; --color-bg-secondary: #f5f7fa; --color-bg-tertiary: #e8ecf1; --color-border: #d1d5db; --color-border-light: #e5e7eb; --color-text: #202122; /*#1f2937;*/ --color-text-secondary: #6b7280; --color-text-muted: #9ca3af; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-light: #dbeafe; --color-success: #059669; --color-warning: #d97706; --color-error: #dc2626; /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px - MOBILE PADDING */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ /* Container */ --container-max: 1600px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --content-narrow-max: 800px; /* или 720px, 760px, 65ch */ --content-wide-max: 1320px; /* для обычных страниц */ } /* ===== MAIN: critical.css ===== */ /* TECH-STC.RU - CRITICAL CSS (Above-the-fold only) */ :root{--color-bg:#ffffff;--color-bg-secondary:#f5f7fa;--color-border:#d1d5db;--color-text:#202122;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-success:#059669;--color-warning:#d97706;--color-error:#dc2626;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:0.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--container-max:1330px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,"Courier New",monospace;--transition-fast:150ms ease} *,*::before,*::after{box-sizing:border-box} html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{margin:0;font-family:var(--font-sans);font-size:0.9375rem;line-height:1.6;color:var(--color-text);background-color:var(--color-bg)} h1,h2,h3,h4,h5,h6,p{margin:0} h1{font-size:1.75rem;font-weight:600;line-height:1.2;margin-bottom:var(--space-lg);color:var(--color-text)} h2{font-size:1.375rem;font-weight:600;line-height:1.3;margin-bottom:var(--space-md);color:var(--color-text)} h3{font-size:1.125rem;font-weight:600;line-height:1.4;margin-bottom:var(--space-sm);color:var(--color-text)} p{font-size:1rem;line-height:1.6;margin-bottom:var(--space-lg);color:var(--color-text)} a{color:var(--color-accent);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)} a:hover{color:var(--color-accent-hover);border-bottom-color:var(--color-accent)} .container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md);box-sizing:border-box} @media(min-width:768px){.container{padding:0 var(--space-xl)}} @media(min-width:1200px){.container{padding:0 var(--space-2xl)}} .section{padding:var(--space-2xl)0;background-color:var(--color-bg)} .d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} /* ===== MAIN: layout.css ===== */ /* ============================================ TECH-STC.RU - LAYOUT ============================================ */ /* ===== SECTIONS ===== */ .section { padding: var(--space-2xl) 0; background-color: var(--color-bg); } /* ===== CONTAINERS ===== */ /* Standard container */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); box-sizing: border-box; } @media (min-width: 768px) { .container { padding: 0 var(--space-xl); } } @media (min-width: 1200px) { .container { padding: 0 var(--space-2xl); } } /* Full-width container */ .container-fluid { width: 100%; margin: 0 auto; padding: 0 var(--space-md); box-sizing: border-box; } @media (min-width: 768px) { .container-fluid { padding: 0 var(--space-xl); } } @media (min-width: 1200px) { .container-fluid { padding: 0 var(--space-2xl); } } /* Narrow container */ .container--narrow { max-width: 800px; margin: 0 auto; width: 100%; padding: var(--space-2xl); } @media (max-width: 768px) { .container--narrow { padding: 0 var(--space-xl); } } /* ===== MAIN: utilities.css ===== */ /* ============================================ TECH-STC.RU - UTILITIES ============================================ */ /* ===== DISPLAY UTILITIES ===== */ .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } @media (min-width: 576px) { .d-none-sm { display: none !important; } .d-block-sm { display: block !important; } .d-flex-sm { display: flex !important; } } @media (min-width: 768px) { .d-none-md { display: none !important; } .d-block-md { display: block !important; } .d-flex-md { display: flex !important; } } @media (min-width: 992px) { .d-none-lg { display: none !important; } .d-block-lg { display: block !important; } .d-flex-lg { display: flex !important; } } /* ===== SPACING UTILITIES ===== */ /* Margin All */ .m-0 { margin: 0; } .m-1 { margin: var(--space-xs); } .m-2 { margin: var(--space-sm); } .m-3 { margin: var(--space-md); } .m-4 { margin: var(--space-lg); } .m-5 { margin: var(--space-xl); } .m-6 { margin: var(--space-2xl); } .m-auto { margin: auto; } /* Margin Top */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-xs); } .mt-2 { margin-top: var(--space-sm); } .mt-3 { margin-top: var(--space-md); } .mt-4 { margin-top: var(--space-lg); } .mt-5 { margin-top: var(--space-xl); } .mt-6 { margin-top: var(--space-2xl); } .mt-7 { margin-top: var(--space-3xl); } .mt-auto { margin-top: auto; } /* Margin Bottom */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-xs); } .mb-2 { margin-bottom: var(--space-sm); } .mb-3 { margin-bottom: var(--space-md); } .mb-4 { margin-bottom: var(--space-lg); } .mb-5 { margin-bottom: var(--space-xl); } .mb-6 { margin-bottom: var(--space-2xl); } .mb-auto { margin-bottom: auto; } /* Margin Left */ .ml-0 { margin-left: 0; } .ml-1 { margin-left: var(--space-xs); } .ml-2 { margin-left: var(--space-sm); } .ml-3 { margin-left: var(--space-md); } .ml-4 { margin-left: var(--space-lg); } .ml-5 { margin-left: var(--space-xl); } .ml-6 { margin-left: var(--space-2xl); } .ml-auto { margin-left: auto; } /* Margin Right */ .mr-0 { margin-right: 0; } .mr-1 { margin-right: var(--space-xs); } .mr-2 { margin-right: var(--space-sm); } .mr-3 { margin-right: var(--space-md); } .mr-4 { margin-right: var(--space-lg); } .mr-5 { margin-right: var(--space-xl); } .mr-6 { margin-right: var(--space-2xl); } .mr-auto { margin-right: auto; } /* Margin X (Left & Right) */ .mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: var(--space-xs); margin-right: var(--space-xs); } .mx-2 { margin-left: var(--space-sm); margin-right: var(--space-sm); } .mx-3 { margin-left: var(--space-md); margin-right: var(--space-md); } .mx-4 { margin-left: var(--space-lg); margin-right: var(--space-lg); } .mx-5 { margin-left: var(--space-xl); margin-right: var(--space-xl); } .mx-6 { margin-left: var(--space-2xl); margin-right: var(--space-2xl); } .mx-auto { margin-left: auto; margin-right: auto; } /* Margin Y (Top & Bottom) */ .my-0 { margin-top: 0; margin-bottom: 0; } .my-1 { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .my-2 { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } .my-3 { margin-top: var(--space-md); margin-bottom: var(--space-md); } .my-4 { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .my-5 { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .my-6 { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } .my-auto { margin-top: auto; margin-bottom: auto; } /* Padding All */ .p-0 { padding: 0; } .p-1 { padding: var(--space-xs); } .p-2 { padding: var(--space-sm); } .p-3 { padding: var(--space-md); } .p-4 { padding: var(--space-lg); } .p-5 { padding: var(--space-xl); } .p-6 { padding: var(--space-2xl); } /* Padding Top */ .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--space-xs); } .pt-2 { padding-top: var(--space-sm); } .pt-3 { padding-top: var(--space-md); } .pt-4 { padding-top: var(--space-lg); } .pt-5 { padding-top: var(--space-xl); } .pt-6 { padding-top: var(--space-2xl); } /* Padding Bottom */ .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--space-xs); } .pb-2 { padding-bottom: var(--space-sm); } .pb-3 { padding-bottom: var(--space-md); } .pb-4 { padding-bottom: var(--space-lg); } .pb-5 { padding-bottom: var(--space-xl); } .pb-6 { padding-bottom: var(--space-2xl); } /* Padding Left */ .pl-0 { padding-left: 0; } .pl-1 { padding-left: var(--space-xs); } .pl-2 { padding-left: var(--space-sm); } .pl-3 { padding-left: var(--space-md); } .pl-4 { padding-left: var(--space-lg); } .pl-5 { padding-left: var(--space-xl); } .pl-6 { padding-left: var(--space-2xl); } /* Padding Right */ .pr-0 { padding-right: 0; } .pr-1 { padding-right: var(--space-xs); } .pr-2 { padding-right: var(--space-sm); } .pr-3 { padding-right: var(--space-md); } .pr-4 { padding-right: var(--space-lg); } .pr-5 { padding-right: var(--space-xl); } .pr-6 { padding-right: var(--space-2xl); } /* Padding X (Left & Right) */ .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: var(--space-xs); padding-right: var(--space-xs); } .px-2 { padding-left: var(--space-sm); padding-right: var(--space-sm); } .px-3 { padding-left: var(--space-md); padding-right: var(--space-md); } .px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); } .px-5 { padding-left: var(--space-xl); padding-right: var(--space-xl); } .px-6 { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } /* Padding Y (Top & Bottom) */ .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); } .py-4 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .py-5 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-6 { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } /* ===== ACCESSIBILITY & CUSTOM HELPERS ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .bg-light-gray { background-color: var(--color-bg-secondary); padding: 4rem 0; } .bg-light { background-color: var(--color-bg-secondary); } .title-primary { color: var(--primary); } .list--unstyled { list-style: none; margin: 0; padding: 0; } /* ===== MAIN: typography.css ===== */ /* ============================================ TECH-STC.RU - TYPOGRAPHY SYSTEM Инженерная типографика: чётко, читаемо, иерархично ============================================ */ /* ----------------------------------------------------------------- 1. БАЗОВЫЕ НАСТРОЙКИ ТИПОГРАФИКИ ----------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p { margin: 0; } body { line-height: 1.5; color: #333333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ----------------------------------------------------------------- 2. ЗАГОЛОВКИ ----------------------------------------------------------------- */ h1, .text-h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.5rem; color: #333333; } h2, .text-h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin-bottom: 1rem; color: #333333; } h3, .text-h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.75rem; color: #333333; } h4, .text-h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; color: #333333; } /* Мобильная адаптация заголовков */ @media (max-width: 767px) { h1, .text-h1 { font-size: 1.5rem; } h2, .text-h2 { font-size: 1.25rem; } h3, .text-h3 { font-size: 1.125rem; } } /* ----------------------------------------------------------------- 3. ТЕКСТ ----------------------------------------------------------------- */ p { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; color: #333333; width: 100%; max-width: 100%; } /* Десктопная версия - ограничение ширины */ @media (min-width: 768px) { p { max-width: 680px; width: 100%; } } /* Для очень больших экранов */ @media (min-width: 1200px) { p { max-width: 920px; } } .lead { font-size: 1.125rem; line-height: 1.5; color: #666666; margin-bottom: 2rem; width: 100%; } @media (min-width: 768px) { .lead { font-size: 1.25rem; width: 80%; max-width: 65ch; } } small { font-size: 0.875rem; line-height: 1.5; } .text-muted { font-size: 0.75rem; line-height: 1.4; color: #999999; } /* ----------------------------------------------------------------- 4. ТЕХНИЧЕСКИЙ ТЕКСТ ----------------------------------------------------------------- */ .text-mono, code, pre { font-family: 'Courier New', Courier, monospace; font-size: 0.875em; background: #f5f5f5; border-radius: 0; } code { padding: 0.2em 0.4em; } pre { padding: 1rem; overflow-x: auto; line-height: 1.4; } /* ----------------------------------------------------------------- 5. ЦВЕТОВЫЕ УТИЛИТЫ ----------------------------------------------------------------- */ .text-primary { color: #0066cc !important; } .text-secondary { color: #666666 !important; } .text-accent { color: #ff6600 !important; } .text-muted { color: #999999 !important; } .text-success { color: #28a745 !important; } .text-danger { color: #dc3545 !important; } .text-warning { color: #ffc107 !important; } .text-white { color: #ffffff !important; } /* ----------------------------------------------------------------- 6. ВЫРАВНИВАНИЕ ----------------------------------------------------------------- */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } /* ----------------------------------------------------------------- 7. СПИСКИ ----------------------------------------------------------------- */ ul, ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } li { margin-bottom: 0.5rem; line-height: 1.6; } .list-inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 1rem; } .list-inline li { margin-bottom: 0; } /* ----------------------------------------------------------------- 8. ССЫЛКИ ----------------------------------------------------------------- */ /* Более современный стандарт */ a { color: #0066cc; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } a:hover { border-bottom-color: #0066cc; } /* ----------------------------------------------------------------- 9. АДАПТИВНОСТЬ И ДОСТУПНОСТЬ ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { a { transition: none; } } @media (max-width: 480px) { body { font-size: 16px; } } /* ===== MAIN: grid.css ===== */ /* ============================================ TECH-STC.RU - GRID SYSTEM (mobile-first) ============================================ */ .row, .grid { display: flex; flex-wrap: wrap; width: 100%; margin: 0; } /* Gap Modifiers */ .grid__gap-md, .row--gap-md { margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); width: calc(100% + var(--space-md) * 2); } .grid__gap-lg, .row--gap-lg { margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1); width: calc(100% + var(--space-lg) * 2); } /* Column Base — Mobile First (100% by default) */ .row > *, .grid > * { flex: 0 0 100%; max-width: 100%; padding: 0; box-sizing: border-box; } @media (min-width: 768px) { .row > *, .grid > * { padding: 0 var(--space-md); } } /* Gap Padding Adjustments */ .grid__gap-md > *, .row--gap-md > * { padding: 0 var(--space-md); margin-bottom: var(--space-lg); } .grid__gap-lg > *, .row--gap-lg > * { padding: 0 var(--space-lg); margin-bottom: var(--space-xl); } /* All column classes default to 100% on mobile */ [class^="col-"], [class*=" col-"] { flex: 0 0 100%; max-width: 100%; } /* Static columns ONLY apply from SM breakpoint upward */ @media (min-width: 576px) { .col-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .col-10p { flex: 0 0 10%; max-width: 10%; } .col-20p { flex: 0 0 20%; max-width: 20%; } .col-25p { flex: 0 0 25%; max-width: 25%; } .col-30p { flex: 0 0 30%; max-width: 30%; } .col-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-40p { flex: 0 0 40%; max-width: 40%; } .col-50p { flex: 0 0 50%; max-width: 50%; } .col-60p { flex: 0 0 60%; max-width: 60%; } .col-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-70p { flex: 0 0 70%; max-width: 70%; } .col-75p { flex: 0 0 75%; max-width: 75%; } .col-80p { flex: 0 0 80%; max-width: 80%; } .col-90p { flex: 0 0 90%; max-width: 90%; } } /* SM-only responsive columns */ @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .col-sm-10p { flex: 0 0 10%; max-width: 10%; } .col-sm-20p { flex: 0 0 20%; max-width: 20%; } .col-sm-25p { flex: 0 0 25%; max-width: 25%; } .col-sm-30p { flex: 0 0 30%; max-width: 30%; } .col-sm-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-sm-40p { flex: 0 0 40%; max-width: 40%; } .col-sm-50p { flex: 0 0 50%; max-width: 50%; } .col-sm-60p { flex: 0 0 60%; max-width: 60%; } .col-sm-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-sm-70p { flex: 0 0 70%; max-width: 70%; } .col-sm-75p { flex: 0 0 75%; max-width: 75%; } .col-sm-80p { flex: 0 0 80%; max-width: 80%; } .col-sm-90p { flex: 0 0 90%; max-width: 90%; } } /* MD breakpoint */ @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .col-md-10p { flex: 0 0 10%; max-width: 10%; } .col-md-20p { flex: 0 0 20%; max-width: 20%; } .col-md-25p { flex: 0 0 25%; max-width: 25%; } .col-md-30p { flex: 0 0 30%; max-width: 30%; } .col-md-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-40p { flex: 0 0 40%; max-width: 40%; } .col-md-50p { flex: 0 0 50%; max-width: 50%; } .col-md-60p { flex: 0 0 60%; max-width: 60%; } .col-md-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-70p { flex: 0 0 70%; max-width: 70%; } .col-md-75p { flex: 0 0 75%; max-width: 75%; } .col-md-80p { flex: 0 0 80%; max-width: 80%; } .col-md-90p { flex: 0 0 90%; max-width: 90%; } } /* LG breakpoint */ @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .col-lg-10p { flex: 0 0 10%; max-width: 10%; } .col-lg-20p { flex: 0 0 20%; max-width: 20%; } .col-lg-25p { flex: 0 0 25%; max-width: 25%; } .col-lg-30p { flex: 0 0 30%; max-width: 30%; } .col-lg-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-40p { flex: 0 0 40%; max-width: 40%; } .col-lg-50p { flex: 0 0 50%; max-width: 50%; } .col-lg-60p { flex: 0 0 60%; max-width: 60%; } .col-lg-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-lg-70p { flex: 0 0 70%; max-width: 70%; } .col-lg-75p { flex: 0 0 75%; max-width: 75%; } .col-lg-80p { flex: 0 0 80%; max-width: 80%; } .col-lg-90p { flex: 0 0 90%; max-width: 90%; } } /* Auto width */ .col-auto { flex: 1 1 0; max-width: 100%; } /* No Gutters */ .row--no-gutters, .grid--no-gutters { margin: 0; width: 100%; } .row--no-gutters > *, .grid--no-gutters > * { padding: 0 !important; margin-bottom: 0 !important; } /* ===== MAIN: components.css ===== */ /* ============================================ TECH-STC.RU - COMPONENTS Общие компоненты: цитаты, ссылки ============================================ */ blockquote { position: relative; margin: 0 0 var(--space-lg) 0; padding: var(--space-xl) var(--space-2xl); background-color: var(--color-bg-secondary); color: var(--color-text); font-size: 1.1rem; font-weight: 500; line-height: 1.6; border-radius: 0; } blockquote::before { content: "❝"; position: absolute; top: -0.5rem; left: -0.5rem; font-size: 3rem; color: var(--color-text-muted); font-family: serif; } blockquote::after { content: "❞"; position: absolute; bottom: -0.5rem; right: -0.5rem; font-size: 3rem; color: var(--color-text-muted); font-family: serif; } blockquote p { font-weight: 400; } blockquote small { color: var(--color-text-secondary); } @media (max-width: 768px) { blockquote { padding: var(--space-md); } blockquote::before, blockquote::after { font-size: 2rem; } } .link { font-size: 1.1rem; font-weight: 500; } /* ===== SHELL: shell-variables.css ===== */ /* ============================================ SHELL - CSS VARIABLES (изолированные) ============================================ */ :root { /* Colors */ --shell-color-bg: #ffffff; --shell-color-bg-secondary: #f5f7fa; --shell-color-bg-tertiary: #e8ecf1; --shell-color-border: #d1d5db; --shell-color-border-light: #e5e7eb; --shell-color-text: #202122; --shell-color-text-secondary: #6b7280; --shell-color-text-muted: #9ca3af; --shell-color-accent: #2563eb; --shell-color-accent-hover: #1d4ed8; --shell-color-accent-light: #dbeafe; --shell-color-success: #059669; --shell-color-warning: #d97706; --shell-color-error: #dc2626; --shell-primary: #0056b3; /* Spacing */ --shell-space-xs: 0.25rem; --shell-space-sm: 0.5rem; --shell-space-md: 0.75rem; --shell-space-lg: 1rem; --shell-space-xl: 1.5rem; --shell-space-2xl: 2rem; --shell-space-3xl: 3rem; /* Container */ --shell-container-max: 1330px; /* Typography */ --shell-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --shell-font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; /* Transitions */ --shell-transition-fast: 150ms ease; --shell-transition-base: 200ms ease; } .disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; user-select: none; } /* ===== SHELL: shell-icons.css ===== */ @font-face { font-family: "bootstrap-icons"; src: url("/assets/fonts/bootstrap-icons.woff2") format("woff2"), url("/assets/fonts/bootstrap-icons.woff") format("woff"); } .bi { font-family: "bootstrap-icons"; font-style: normal; font-weight: normal; } /* ===== SHELL: shell-grid.css ===== */ /* ============================================ SHELL - GRID SYSTEM (изолированный) Mobile-first, классы с префиксом shell- ============================================ */ /* CONTAINERS */ .shell-container { width: 100%; max-width: var(--shell-container-max, 1330px); margin: 0 auto; padding: 0 var(--shell-space-md, 0.75rem); box-sizing: border-box; } @media (min-width: 768px) { .shell-container { padding: 0 var(--shell-space-xl, 1.5rem); } } @media (min-width: 1200px) { .shell-container { padding: 0 var(--shell-space-2xl, 2rem); } } .shell-container-fluid { width: 100%; margin: 0 auto; padding: 0 var(--shell-space-md, 0.75rem); box-sizing: border-box; } @media (min-width: 768px) { .shell-container-fluid { padding: 0 var(--shell-space-xl, 1.5rem); } } @media (min-width: 1200px) { .shell-container-fluid { padding: 0 var(--shell-space-2xl, 2rem); } } .shell-container-narrow { max-width: 800px; margin: 0 auto; width: 100%; padding: var(--shell-space-2xl, 2rem); } @media (max-width: 768px) { .shell-container-narrow { padding: 0 var(--shell-space-xl, 1.5rem); } } /* ROW & GRID */ .shell-row, .shell-grid { display: flex; flex-wrap: wrap; width: 100%; margin: 0; } /* Gaps */ /* .shell-row--gap-md, .shell-grid--gap-md { margin-left: calc(var(--shell-space-md, 0.75rem) * -1); margin-right: calc(var(--shell-space-md, 0.75rem) * -1); width: calc(100% + var(--shell-space-md, 0.75rem) * 2); } */ .shell-row--gap-lg, .shell-grid--gap-lg { margin-left: calc(var(--shell-space-lg, 1rem) * -1); margin-right: calc(var(--shell-space-lg, 1rem) * -1); width: calc(100% + var(--shell-space-lg, 1rem) * 2); } .shell-row--gap-md > *, .shell-grid--gap-md > * { padding: 0 var(--shell-space-md, 0.75rem); margin-bottom: var(--shell-space-lg, 1rem); } .shell-row--gap-lg > *, .shell-grid--gap-lg > * { padding: 0 var(--shell-space-lg, 1rem); margin-bottom: var(--shell-space-xl, 1.5rem); } .shell-row--no-gutters, .shell-grid--no-gutters { margin: 0; width: 100%; } .shell-row--no-gutters > *, .shell-grid--no-gutters > * { padding: 0 !important; margin-bottom: 0 !important; } /* COLUMNS — Mobile First (100% по умолчанию) */ [class*="shell-col-"] { flex: 0 0 100%; max-width: 100%; } /* Static columns (от 576px) */ @media (min-width: 576px) { .shell-col-1 { flex: 0 0 8.333%; max-width: 8.333%; } .shell-col-2 { flex: 0 0 16.666%; max-width: 16.666%; } .shell-col-3 { flex: 0 0 25%; max-width: 25%; } .shell-col-4 { flex: 0 0 33.333%; max-width: 33.333%; } .shell-col-5 { flex: 0 0 41.666%; max-width: 41.666%; } .shell-col-6 { flex: 0 0 50%; max-width: 50%; } .shell-col-7 { flex: 0 0 58.333%; max-width: 58.333%; } .shell-col-8 { flex: 0 0 66.666%; max-width: 66.666%; } .shell-col-9 { flex: 0 0 75%; max-width: 75%; } .shell-col-10 { flex: 0 0 83.333%; max-width: 83.333%; } .shell-col-11 { flex: 0 0 91.666%; max-width: 91.666%; } .shell-col-12 { flex: 0 0 100%; max-width: 100%; } } /* Responsive columns */ @media (min-width: 576px) { .shell-col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; } .shell-col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; } .shell-col-sm-3 { flex: 0 0 25%; max-width: 25%; } .shell-col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; } .shell-col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; } .shell-col-sm-6 { flex: 0 0 50%; max-width: 50%; } .shell-col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; } .shell-col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; } .shell-col-sm-9 { flex: 0 0 75%; max-width: 75%; } .shell-col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; } .shell-col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; } .shell-col-sm-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .shell-col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; } .shell-col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .shell-col-md-3 { flex: 0 0 25%; max-width: 25%; } .shell-col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .shell-col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .shell-col-md-6 { flex: 0 0 50%; max-width: 50%; } .shell-col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; } .shell-col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .shell-col-md-9 { flex: 0 0 75%; max-width: 75%; } .shell-col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; } .shell-col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; } .shell-col-md-12 { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 992px) { .shell-col-lg-1 { flex: 0 0 8.333%; max-width: 8.333%; } .shell-col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; } .shell-col-lg-3 { flex: 0 0 25%; max-width: 25%; } .shell-col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .shell-col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; } .shell-col-lg-6 { flex: 0 0 50%; max-width: 50%; } .shell-col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } .shell-col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; } .shell-col-lg-9 { flex: 0 0 75%; max-width: 75%; } .shell-col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; } .shell-col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; } .shell-col-lg-12 { flex: 0 0 100%; max-width: 100%; } } .shell-col-auto { flex: 1 1 0; max-width: 100%; } /* ===== SHELL: shell-header.css ===== */ /* ============================================ SHELL - HEADER (изолированный) ============================================ */ .shell-header { background-color: var(--shell-color-bg, #ffffff); border-bottom: 1px solid var(--shell-color-border-light, #e5e7eb); font-family: var(--shell-font-sans); margin-bottom: 1rem; } .shell-header__inner { padding: var(--shell-space-sm, 0.5rem) 0; } .shell-header__nav { display: flex; align-items: center; justify-content: space-between; width: 100%; } .shell-logo { display: flex; align-items: center; gap: var(--shell-space-xs, 0.25rem); text-decoration: none; flex-shrink: 0; border-bottom: 0px solid transparent!important; } .shell-logo__img { width: 24px; height: 24px; margin-right: 0.2rem; } .shell-logo__text { font-size: 1.25rem; font-weight: 600; color: var(--shell-color-text, #202122); white-space: nowrap; } .shell-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.5rem; color: var(--shell-color-text, #202122); background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .shell-nav { display: flex; align-items: center; gap: var(--shell-space-lg, 1rem); list-style: none; margin: 0; padding: 0; flex: 1; justify-content:baseline; height: 44px; margin-left: 1rem; } .shell-nav li { list-style: none; margin: 0; } .shell-nav li a { color: var(--shell-color-text-secondary, #6b7280); font-size: 0.95rem; font-weight: 450; text-decoration: none; padding: var(--shell-space-xs, 0.25rem) 0; border-bottom: 1px solid transparent; white-space: nowrap; transition: color var(--shell-transition-fast, 150ms ease); line-height: 1.8; } .shell-nav__link:hover { color: var(--shell-color-accent, #2563eb); } .shell-nav__link--active { color: var(--shell-color-text, #202122); border-bottom-color: var(--shell-color-accent, #2563eb); } @media (min-width: 1201px) { .shell-nav { display: flex; } } @media (max-width: 1200px) { .shell-nav { display: none; } } .shell-mobile-menu { position: fixed; top: 0; left: -100%; width: 85%; max-width: 320px; height: 100vh; background-color: var(--shell-color-accent); transition: left 0.3s ease-in-out; z-index: 1000; overflow-y: auto; padding: var(--shell-space-lg, 1rem); box-sizing: border-box; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); } .shell-mobile-menu.active { left: 0; } .shell-mobile-menu__header { display: flex; justify-content: flex-end; margin-bottom: var(--shell-space-lg, 1rem); } .shell-mobile-menu__close { font-size: 2rem; line-height: 1; color: #ffffff; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .shell-mobile-menu__list { list-style: none; margin: 0; padding: 0; } .shell-mobile-menu__list li { margin-bottom: var(--shell-space-sm, 0.5rem); } .shell-mobile-menu__list li a { display: block; padding: var(--shell-space-sm, 0.5rem) 0; color: #ffffff; font-size: 1rem; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: opacity var(--shell-transition-fast, 150ms ease); } .shell-mobile-menu__link:hover { opacity: 0.8; } .shell-mobile-menu__link--active { font-weight: 600; opacity: 1; } @media (max-width: 768px) { .shell-logo__text { font-size: 1rem; } .shell-logo__img { width: 28px; height: 28px; } } .language-switch { font-size: 12px; } .lang-link { color: #333; text-decoration: none; padding: 0px 4px; } .lang-link.active { font-weight: bold; color: #0066cc; } .lang-separator { color: #999; margin: 0 4px; } /* ===== SHELL: shell-footer.css ===== */ /* ============================================ SHELL - FOOTER (изолированный) ============================================ */ .shell-footer { font-family: var(--shell-font-sans); margin-top: 2rem; background-color: var(--shell-color-bg-secondary, #f8f9fa); border-top: 1px solid var(--shell-color-border, #d1d5db); } .shell-footer .shell-container { padding-top: var(--shell-space-2xl, 2rem); padding-bottom: var(--shell-space-2xl, 2rem); } .shell-footer__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--shell-space-xl, 1.5rem); } /* Адаптив */ @media (min-width: 768px) { .shell-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); /* Первая колонка в 2 раза шире */ } } @media (min-width: 992px) { .shell-footer__grid { grid-template-columns: 2.2fr repeat(4, 1fr); /* Ещё чуть шире на больших экранах */ } } .shell-footer__col { margin-bottom: var(--shell-space-lg, 1rem); } /* Первая колонка (логотип + описание) — делаем её визуально важнее */ .shell-footer__col:first-child { grid-column: span 1; } @media (min-width: 768px) { .shell-footer__col:first-child { grid-column: span 2; /* Первая колонка занимает 2 ячейки */ } } /* Остальные стили остаются прежними */ .shell-footer__logo { font-size: 1.5rem; font-weight: 700; color: var(--shell-color-text, #202122); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 var(--shell-space-sm, 0.5rem) 0; } .shell-footer__description { display: flex; flex-direction: column; font-size: 0.875rem; color: var(--shell-color-text-secondary, #6b7280); margin: var(--shell-space-lg, 1rem) 0; } .shell-footer__description-line { line-height: 1.5; } .shell-footer__social { display: flex; gap: var(--shell-space-md, 0.75rem); } .shell-footer__social-link { color: var(--shell-color-accent, #2563eb); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: opacity var(--shell-transition-fast, 150ms ease); } .shell-footer__social-link:hover { opacity: 0.7; } .shell-footer__title { font-size: 0.9375rem; font-weight: 600; color: var(--shell-color-text, #202122); margin: 0 0 var(--shell-space-md, 0.75rem) 0; } .shell-footer__list { list-style: none; padding: 0; margin: 0; } .shell-footer__list li { margin-bottom: var(--shell-space-xs, 0.25rem); } .shell-footer__list li:last-child { margin-bottom: 0; } .shell-footer__list a { color: var(--shell-color-text-secondary, #6b7280); text-decoration: none; font-size: 0.875rem; transition: color var(--shell-transition-fast, 150ms ease); display: inline-block; padding: var(--shell-space-xs, 0.25rem) 0; } .shell-footer__list a:hover { color: var(--shell-color-accent, #2563eb); } .shell-footer__address { font-style: normal; line-height: 1.6; color: var(--shell-color-text-secondary, #6b7280); font-size: 0.875rem; } .shell-footer__address a { color: var(--shell-color-accent, #2563eb); text-decoration: none; } .shell-footer__bottom { margin-top: var(--shell-space-lg, 1rem); padding-top: var(--shell-space-lg, 1rem); border-top: 1px solid var(--shell-color-border-light, #e5e7eb); display: flex; flex-direction: column; gap: var(--shell-space-sm, 0.5rem); } @media (min-width: 768px) { .shell-footer__bottom { flex-direction: row; justify-content: space-between; } } .shell-footer__copyright { color: var(--shell-color-text-muted, #9ca3af); font-size: 0.8125rem; line-height: 1.5; } .shell-footer__owner { color: var(--shell-color-text-muted, #9ca3af); font-size: 0.75rem; line-height: 1.5; } /* ===== SHELL: shell-breadcrumb.css ===== */ /* ============================================ SHELL - BREADCRUMB (изолированный) ============================================ */ .shell-breadcrumb-wrapper { margin: 1rem 0; } .shell-breadcrumb { display: flex; flex-wrap: wrap; padding: 0 16px; margin: 0; list-style: none; } .shell-breadcrumb__item { display: flex; align-items: center; font-size: 0.8125rem; color: var(--shell-color-text-muted, #9ca3af); } .shell-breadcrumb__item:not(:first-child)::before { display: inline-block; margin: 0 var(--shell-space-xs, 0.25rem); color: var(--shell-color-border, #d1d5db); content: "/"; font-weight: 300; } .shell-breadcrumb__item a { color: var(--shell-color-text-secondary, #6b7280); text-decoration: none; transition: color var(--shell-transition-fast, 150ms ease); } .shell-breadcrumb__item a:hover { color: var(--shell-color-accent, #2563eb); } .shell-breadcrumb__item--active { color: var(--shell-color-text, #202122); font-weight: 500; } /* ===== SHELL: shell.css ===== */ /* ============================================ SHELL - MAIN CSS (сборка оболочки) ============================================ */ /* ===== MAIN: accordion.css ===== */ /* ============================================ TECH-STC.RU - ACCORDION SYSTEM Для FAQ, документации и технических спецификаций ============================================ */ /* ----------------------------------------------------------------- БАЗОВЫЙ АККОРДЕОН ----------------------------------------------------------------- */ .accordion { border-top: 1px solid var(--color-border); width: 100%; } .accordion__item { border-bottom: 1px solid var(--color-border); } /* ----------------------------------------------------------------- ЗАГОЛОВОК (кликабельная область) ----------------------------------------------------------------- */ .accordion__summary { padding: var(--space-lg) 0; cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--color-text); list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color var(--transition-fast); user-select: none; outline: none; position: relative; } .accordion__summary:hover { color: var(--color-accent); } .accordion__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .accordion__summary:active { opacity: 0.8; } .accordion__summary::-webkit-details-marker { display: none; } /* ----------------------------------------------------------------- ИНДИКАТОР (плюс/минус) ----------------------------------------------------------------- */ .accordion__summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); transition: transform var(--transition-fast); line-height: 1; margin-left: var(--space-md); } .accordion__item[open] .accordion__summary::after { content: "−"; } /* ----------------------------------------------------------------- КОНТЕНТ АККОРДЕОНА ----------------------------------------------------------------- */ .accordion__content { padding: 0 0 var(--space-lg) 0; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.7; } .accordion__content > :last-child { margin-bottom: 0; } /* ----------------------------------------------------------------- ВАРИАНТ 2: С ИКОНКОЙ ВМЕСТО ПЛЮСА ----------------------------------------------------------------- */ .accordion--icon .accordion__summary::after { content: ""; width: 1.25rem; height: 1.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M4 8h8M8 4v8'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .accordion--icon .accordion__item[open] .accordion__summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------- ВАРИАНТ 3: КОМПАКТНЫЙ (для плотных интерфейсов) ----------------------------------------------------------------- */ .accordion--compact .accordion__summary { padding: var(--space-md) 0; font-size: 0.875rem; } .accordion--compact .accordion__content { padding: 0 0 var(--space-md) 0; font-size: 0.875rem; } /* ----------------------------------------------------------------- ВАРИАНТ 4: БЕЗ ГРАНИЦ (для вложенных аккордеонов) ----------------------------------------------------------------- */ .accordion--borderless { border-top: none; } .accordion--borderless .accordion__item { border-bottom: none; } .accordion--borderless .accordion__summary { padding: var(--space-sm) 0; } /* ----------------------------------------------------------------- ВАРИАНТ 5: С ФОНОМ (для выделенных секций) ----------------------------------------------------------------- */ .accordion--filled .accordion__item { background: var(--color-bg-secondary); margin-bottom: var(--space-sm); border-bottom: none; border-radius: 0; } .accordion--filled .accordion__summary { padding: var(--space-md) var(--space-lg); } .accordion--filled .accordion__content { padding: 0 var(--space-lg) var(--space-lg); } /* ----------------------------------------------------------------- ВЛОЖЕННЫЕ АККОРДЕОНЫ ----------------------------------------------------------------- */ .accordion .accordion { border-top: none; margin-top: var(--space-sm); margin-left: var(--space-xl); } .accordion .accordion .accordion__summary { font-size: 0.875rem; padding: var(--space-sm) 0; } /* ----------------------------------------------------------------- ТЕХНИЧЕСКИЙ АККОРДЕОН (для документации) ----------------------------------------------------------------- */ .accordion--technical .accordion__summary { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } .accordion--technical .accordion__content { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; background: var(--color-bg-tertiary); padding: var(--space-md); border-radius: 0; } /* ----------------------------------------------------------------- АНИМАЦИЯ (плавное открытие) ----------------------------------------------------------------- */ .accordion__content { animation: accordion-fade 0.3s ease; } @keyframes accordion-fade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { .accordion__summary { padding: var(--space-md) 0; font-size: 0.875rem; } .accordion__content { font-size: 0.875rem; } .accordion .accordion { margin-left: var(--space-lg); } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Базовый аккордеон: <details class="accordion__item"> <summary class="accordion__summary">Заголовок</summary> <div class="accordion__content">Контент</div> </details> С иконкой: <div class="accordion accordion--icon"> <details class="accordion__item">...</details> </div> Вложенный: <details class="accordion__item"> <summary class="accordion__summary">Раздел 1</summary> <div class="accordion__content"> <div class="accordion accordion--borderless"> <details class="accordion__item">...</details> </div> </div> </details> */ /* ===== MAIN: alert.css ===== */ /* ============================================ TECH-STC.RU - ALERT COMPONENT Система уведомлений для технического интерфейса ============================================ */ .alert { padding: var(--space-md) var(--space-lg); border-left: 4px solid transparent; background-color: var(--color-bg-secondary); display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); border-radius: 0; margin-bottom: var(--space-lg); } .alert:last-child { margin-bottom: 0; } /* Иконка в алерте */ .alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: currentColor; } /* Контент алерта */ .alert__content { flex: 1; } /* Заголовок алерта */ .alert__title { font-weight: 600; margin-bottom: var(--space-xs); } /* Типы алертов (используем CSS-переменные) */ .alert--info { background-color: color-mix(in srgb, var(--color-accent) 5%, white); border-left-color: var(--color-accent); color: var(--color-accent-hover); } .alert--success { background-color: color-mix(in srgb, var(--color-success) 5%, white); border-left-color: var(--color-success); color: var(--color-success); } .alert--warning { background-color: color-mix(in srgb, var(--color-warning) 5%, white); border-left-color: var(--color-warning); color: var(--color-warning); } .alert--error { background-color: color-mix(in srgb, var(--color-error) 5%, white); border-left-color: var(--color-error); color: var(--color-error); } /* Алерт с возможностью закрытия */ .alert--dismissible { padding-right: var(--space-2xl); position: relative; } .alert__close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; cursor: pointer; color: currentColor; opacity: 0.6; padding: 0; width: 1.25rem; height: 1.25rem; } .alert__close:hover { opacity: 1; } /* ===== MAIN: badge.css ===== */ /* ============================================ TECH-STC.RU - BADGE SYSTEM Счетчики, статусы, метки ============================================ */ /* ----------------------------------------------------------------- БАЗОВЫЙ БЕЙДЖ ----------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--space-sm); background-color: var(--color-accent); color: #ffffff; font-size: 0.75rem; font-weight: 600; line-height: 1; border-radius: 0; font-family: var(--font-mono); white-space: nowrap; vertical-align: middle; } /* ----------------------------------------------------------------- РАЗМЕРЫ ----------------------------------------------------------------- */ .badge--xs { min-width: 1.25rem; height: 1.25rem; font-size: 0.625rem; padding: 0 var(--space-xs); } .badge--sm { min-width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; } .badge--md { min-width: 2rem; height: 2rem; font-size: 0.75rem; padding: 0 var(--space-md); } .badge--lg { min-width: 2.5rem; height: 2.5rem; font-size: 0.875rem; padding: 0 var(--space-lg); } /* ----------------------------------------------------------------- ЦВЕТА ----------------------------------------------------------------- */ .badge--primary { background-color: var(--primary); color: #ffffff; } .badge--secondary { background-color: var(--color-bg-tertiary); color: var(--color-text); } .badge--accent { background-color: var(--color-accent); color: #ffffff; } .badge--success { background-color: var(--color-success); color: #ffffff; } .badge--warning { background-color: var(--color-warning); color: #ffffff; } .badge--danger { background-color: var(--color-error); color: #ffffff; } .badge--neutral { background-color: var(--color-text-muted); color: #ffffff; } /* ----------------------------------------------------------------- ВАРИАНТЫ ----------------------------------------------------------------- */ /* Контурный бейдж */ .badge--outline { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .badge--outline.badge--primary { border-color: var(--primary); color: var(--primary); } .badge--outline.badge--accent { border-color: var(--color-accent); color: var(--color-accent); } /* Круглый бейдж (для аватарок, счетчиков) */ .badge--circle { border-radius: 9999px; aspect-ratio: 1 / 1; padding: 0; } /* ----------------------------------------------------------------- ПОЗИЦИОНИРОВАНИЕ (для прикрепления к элементам) ----------------------------------------------------------------- */ .badge--top-right { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); } .badge--top-left { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); } /* ----------------------------------------------------------------- ИСПОЛЬЗОВАНИЕ В НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__link .badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; } .nav-vertical__link--active .badge { background-color: var(--color-accent); color: #ffffff; } /* ----------------------------------------------------------------- ПРИМЕРЫ ----------------------------------------------------------------- */ /* <span class="badge">42</span> <span class="badge badge--success badge--sm">Готово</span> <span class="badge badge--warning badge--outline">Черновик</span> В навигации: <a href="#" class="nav-vertical__link"> <span>Сообщения</span> <span class="badge badge--circle">3</span> </a> */ /* ===== MAIN: banner.css ===== */ /* ============================================ TECH-STC.RU - BANNER COMPONENT Информационные баннеры в топе страниц Изолировано через #top-banners ============================================ */ #top-banners { margin: 0; } /* ----------------------------------------------------------------- Ряд баннеров (сетка) ----------------------------------------------------------------- */ #top-banners .banners-row { display: flex; flex-direction: row; gap: var(--space-xl); margin: 0; padding: 0; width: 100%; } #top-banners .banner-col { flex: 1; min-width: 0; width: auto; } /* ----------------------------------------------------------------- Карточка баннера — базовый стиль ----------------------------------------------------------------- */ #top-banners .banner-card { display: flex; flex-direction: column; height: 170px; padding: var(--space-xl); box-sizing: border-box; background-color: var(--color-bg-secondary); border-left: 4px solid var(--banner-accent, var(--primary)); border-radius: 0; text-decoration: none; color: inherit; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); position: relative; overflow: hidden; outline: none; } /* Техническая полоска (инженерный стиль) */ #top-banners .banner-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--banner-accent, var(--primary)) 15%, transparent) 20%, color-mix(in srgb, var(--banner-accent, var(--primary)) 30%, transparent) 50%, color-mix(in srgb, var(--banner-accent, var(--primary)) 15%, transparent) 80%, transparent 100% ); pointer-events: none; } /* ----------------------------------------------------------------- Состояния ----------------------------------------------------------------- */ #top-banners .banner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-3) 20%, transparent); } #top-banners .banner-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* ----------------------------------------------------------------- Стрелка-индикатор ----------------------------------------------------------------- */ #top-banners .banner-card::after { content: '→'; position: absolute; bottom: var(--space-xl); right: var(--space-xl); font-size: 2rem; font-weight: 300; color: var(--banner-accent, var(--primary)); opacity: 0.7; transition: opacity var(--transition-fast), transform var(--transition-fast); line-height: 1; pointer-events: none; } #top-banners .banner-card:hover::after { opacity: 1; transform: translateX(4px); } /* ----------------------------------------------------------------- Контент баннера ----------------------------------------------------------------- */ #top-banners .card__body { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; padding: 0; margin: 0; background: none; border: none; } #top-banners .banner-title { font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-sm) 0; color: var(--color-text-secondary); font-family: inherit; letter-spacing: -0.03em; text-align: left; padding: 0; } #top-banners .banner-lead { font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0 0 var(--space-lg) 0; color: var(--color-text-muted); max-width: 30ch; text-align: left; padding: 0; background: none; } /* ----------------------------------------------------------------- Адаптивность ----------------------------------------------------------------- */ @media (max-width: 991px) { #top-banners .banners-row { flex-direction: column; gap: var(--space-lg); } #top-banners .banner-card { height: 160px; padding: var(--space-lg); } #top-banners .banner-title { font-size: 1.2rem; } #top-banners .banner-lead { font-size: 0.9375rem; margin-bottom: var(--space-md); } #top-banners .banner-card::after { bottom: var(--space-lg); right: var(--space-lg); font-size: 1.5rem; } } @media (max-width: 480px) { #top-banners .banner-card { height: auto; min-height: 140px; } } /* ===== MAIN: bootstrap-icons.css ===== */ /*! * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/) * Copyright 2019-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE) */ @font-face { font-display: block; font-family: "bootstrap-icons"; src: url("/assets/fonts/bootstrap-icons.woff2") format("woff2"), url("/assets/fonts/bootstrap-icons.woff") format("woff"); } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bi-123::before { content: "\f67f"; } .bi-alarm-fill::before { content: "\f101"; } .bi-alarm::before { content: "\f102"; } .bi-align-bottom::before { content: "\f103"; } .bi-align-center::before { content: "\f104"; } .bi-align-end::before { content: "\f105"; } .bi-align-middle::before { content: "\f106"; } .bi-align-start::before { content: "\f107"; } .bi-align-top::before { content: "\f108"; } .bi-alt::before { content: "\f109"; } .bi-app-indicator::before { content: "\f10a"; } .bi-app::before { content: "\f10b"; } .bi-archive-fill::before { content: "\f10c"; } .bi-archive::before { content: "\f10d"; } .bi-arrow-90deg-down::before { content: "\f10e"; } .bi-arrow-90deg-left::before { content: "\f10f"; } .bi-arrow-90deg-right::before { content: "\f110"; } .bi-arrow-90deg-up::before { content: "\f111"; } .bi-arrow-bar-down::before { content: "\f112"; } .bi-arrow-bar-left::before { content: "\f113"; } .bi-arrow-bar-right::before { content: "\f114"; } .bi-arrow-bar-up::before { content: "\f115"; } .bi-arrow-clockwise::before { content: "\f116"; } .bi-arrow-counterclockwise::before { content: "\f117"; } .bi-arrow-down-circle-fill::before { content: "\f118"; } .bi-arrow-down-circle::before { content: "\f119"; } .bi-arrow-down-left-circle-fill::before { content: "\f11a"; } .bi-arrow-down-left-circle::before { content: "\f11b"; } .bi-arrow-down-left-square-fill::before { content: "\f11c"; } .bi-arrow-down-left-square::before { content: "\f11d"; } .bi-arrow-down-left::before { content: "\f11e"; } .bi-arrow-down-right-circle-fill::before { content: "\f11f"; } .bi-arrow-down-right-circle::before { content: "\f120"; } .bi-arrow-down-right-square-fill::before { content: "\f121"; } .bi-arrow-down-right-square::before { content: "\f122"; } .bi-arrow-down-right::before { content: "\f123"; } .bi-arrow-down-short::before { content: "\f124"; } .bi-arrow-down-square-fill::before { content: "\f125"; } .bi-arrow-down-square::before { content: "\f126"; } .bi-arrow-down-up::before { content: "\f127"; } .bi-arrow-down::before { content: "\f128"; } .bi-arrow-left-circle-fill::before { content: "\f129"; } .bi-arrow-left-circle::before { content: "\f12a"; } .bi-arrow-left-right::before { content: "\f12b"; } .bi-arrow-left-short::before { content: "\f12c"; } .bi-arrow-left-square-fill::before { content: "\f12d"; } .bi-arrow-left-square::before { content: "\f12e"; } .bi-arrow-left::before { content: "\f12f"; } .bi-arrow-repeat::before { content: "\f130"; } .bi-arrow-return-left::before { content: "\f131"; } .bi-arrow-return-right::before { content: "\f132"; } .bi-arrow-right-circle-fill::before { content: "\f133"; } .bi-arrow-right-circle::before { content: "\f134"; } .bi-arrow-right-short::before { content: "\f135"; } .bi-arrow-right-square-fill::before { content: "\f136"; } .bi-arrow-right-square::before { content: "\f137"; } .bi-arrow-right::before { content: "\f138"; } .bi-arrow-up-circle-fill::before { content: "\f139"; } .bi-arrow-up-circle::before { content: "\f13a"; } .bi-arrow-up-left-circle-fill::before { content: "\f13b"; } .bi-arrow-up-left-circle::before { content: "\f13c"; } .bi-arrow-up-left-square-fill::before { content: "\f13d"; } .bi-arrow-up-left-square::before { content: "\f13e"; } .bi-arrow-up-left::before { content: "\f13f"; } .bi-arrow-up-right-circle-fill::before { content: "\f140"; } .bi-arrow-up-right-circle::before { content: "\f141"; } .bi-arrow-up-right-square-fill::before { content: "\f142"; } .bi-arrow-up-right-square::before { content: "\f143"; } .bi-arrow-up-right::before { content: "\f144"; } .bi-arrow-up-short::before { content: "\f145"; } .bi-arrow-up-square-fill::before { content: "\f146"; } .bi-arrow-up-square::before { content: "\f147"; } .bi-arrow-up::before { content: "\f148"; } .bi-arrows-angle-contract::before { content: "\f149"; } .bi-arrows-angle-expand::before { content: "\f14a"; } .bi-arrows-collapse::before { content: "\f14b"; } .bi-arrows-expand::before { content: "\f14c"; } .bi-arrows-fullscreen::before { content: "\f14d"; } .bi-arrows-move::before { content: "\f14e"; } .bi-aspect-ratio-fill::before { content: "\f14f"; } .bi-aspect-ratio::before { content: "\f150"; } .bi-asterisk::before { content: "\f151"; } .bi-at::before { content: "\f152"; } .bi-award-fill::before { content: "\f153"; } .bi-award::before { content: "\f154"; } .bi-back::before { content: "\f155"; } .bi-backspace-fill::before { content: "\f156"; } .bi-backspace-reverse-fill::before { content: "\f157"; } .bi-backspace-reverse::before { content: "\f158"; } .bi-backspace::before { content: "\f159"; } .bi-badge-3d-fill::before { content: "\f15a"; } .bi-badge-3d::before { content: "\f15b"; } .bi-badge-4k-fill::before { content: "\f15c"; } .bi-badge-4k::before { content: "\f15d"; } .bi-badge-8k-fill::before { content: "\f15e"; } .bi-badge-8k::before { content: "\f15f"; } .bi-badge-ad-fill::before { content: "\f160"; } .bi-badge-ad::before { content: "\f161"; } .bi-badge-ar-fill::before { content: "\f162"; } .bi-badge-ar::before { content: "\f163"; } .bi-badge-cc-fill::before { content: "\f164"; } .bi-badge-cc::before { content: "\f165"; } .bi-badge-hd-fill::before { content: "\f166"; } .bi-badge-hd::before { content: "\f167"; } .bi-badge-tm-fill::before { content: "\f168"; } .bi-badge-tm::before { content: "\f169"; } .bi-badge-vo-fill::before { content: "\f16a"; } .bi-badge-vo::before { content: "\f16b"; } .bi-badge-vr-fill::before { content: "\f16c"; } .bi-badge-vr::before { content: "\f16d"; } .bi-badge-wc-fill::before { content: "\f16e"; } .bi-badge-wc::before { content: "\f16f"; } .bi-bag-check-fill::before { content: "\f170"; } .bi-bag-check::before { content: "\f171"; } .bi-bag-dash-fill::before { content: "\f172"; } .bi-bag-dash::before { content: "\f173"; } .bi-bag-fill::before { content: "\f174"; } .bi-bag-plus-fill::before { content: "\f175"; } .bi-bag-plus::before { content: "\f176"; } .bi-bag-x-fill::before { content: "\f177"; } .bi-bag-x::before { content: "\f178"; } .bi-bag::before { content: "\f179"; } .bi-bar-chart-fill::before { content: "\f17a"; } .bi-bar-chart-line-fill::before { content: "\f17b"; } .bi-bar-chart-line::before { content: "\f17c"; } .bi-bar-chart-steps::before { content: "\f17d"; } .bi-bar-chart::before { content: "\f17e"; } .bi-basket-fill::before { content: "\f17f"; } .bi-basket::before { content: "\f180"; } .bi-basket2-fill::before { content: "\f181"; } .bi-basket2::before { content: "\f182"; } .bi-basket3-fill::before { content: "\f183"; } .bi-basket3::before { content: "\f184"; } .bi-battery-charging::before { content: "\f185"; } .bi-battery-full::before { content: "\f186"; } .bi-battery-half::before { content: "\f187"; } .bi-battery::before { content: "\f188"; } .bi-bell-fill::before { content: "\f189"; } .bi-bell::before { content: "\f18a"; } .bi-bezier::before { content: "\f18b"; } .bi-bezier2::before { content: "\f18c"; } .bi-bicycle::before { content: "\f18d"; } .bi-binoculars-fill::before { content: "\f18e"; } .bi-binoculars::before { content: "\f18f"; } .bi-blockquote-left::before { content: "\f190"; } .bi-blockquote-right::before { content: "\f191"; } .bi-book-fill::before { content: "\f192"; } .bi-book-half::before { content: "\f193"; } .bi-book::before { content: "\f194"; } .bi-bookmark-check-fill::before { content: "\f195"; } .bi-bookmark-check::before { content: "\f196"; } .bi-bookmark-dash-fill::before { content: "\f197"; } .bi-bookmark-dash::before { content: "\f198"; } .bi-bookmark-fill::before { content: "\f199"; } .bi-bookmark-heart-fill::before { content: "\f19a"; } .bi-bookmark-heart::before { content: "\f19b"; } .bi-bookmark-plus-fill::before { content: "\f19c"; } .bi-bookmark-plus::before { content: "\f19d"; } .bi-bookmark-star-fill::before { content: "\f19e"; } .bi-bookmark-star::before { content: "\f19f"; } .bi-bookmark-x-fill::before { content: "\f1a0"; } .bi-bookmark-x::before { content: "\f1a1"; } .bi-bookmark::before { content: "\f1a2"; } .bi-bookmarks-fill::before { content: "\f1a3"; } .bi-bookmarks::before { content: "\f1a4"; } .bi-bookshelf::before { content: "\f1a5"; } .bi-bootstrap-fill::before { content: "\f1a6"; } .bi-bootstrap-reboot::before { content: "\f1a7"; } .bi-bootstrap::before { content: "\f1a8"; } .bi-border-all::before { content: "\f1a9"; } .bi-border-bottom::before { content: "\f1aa"; } .bi-border-center::before { content: "\f1ab"; } .bi-border-inner::before { content: "\f1ac"; } .bi-border-left::before { content: "\f1ad"; } .bi-border-middle::before { content: "\f1ae"; } .bi-border-outer::before { content: "\f1af"; } .bi-border-right::before { content: "\f1b0"; } .bi-border-style::before { content: "\f1b1"; } .bi-border-top::before { content: "\f1b2"; } .bi-border-width::before { content: "\f1b3"; } .bi-border::before { content: "\f1b4"; } .bi-bounding-box-circles::before { content: "\f1b5"; } .bi-bounding-box::before { content: "\f1b6"; } .bi-box-arrow-down-left::before { content: "\f1b7"; } .bi-box-arrow-down-right::before { content: "\f1b8"; } .bi-box-arrow-down::before { content: "\f1b9"; } .bi-box-arrow-in-down-left::before { content: "\f1ba"; } .bi-box-arrow-in-down-right::before { content: "\f1bb"; } .bi-box-arrow-in-down::before { content: "\f1bc"; } .bi-box-arrow-in-left::before { content: "\f1bd"; } .bi-box-arrow-in-right::before { content: "\f1be"; } .bi-box-arrow-in-up-left::before { content: "\f1bf"; } .bi-box-arrow-in-up-right::before { content: "\f1c0"; } .bi-box-arrow-in-up::before { content: "\f1c1"; } .bi-box-arrow-left::before { content: "\f1c2"; } .bi-box-arrow-right::before { content: "\f1c3"; } .bi-box-arrow-up-left::before { content: "\f1c4"; } .bi-box-arrow-up-right::before { content: "\f1c5"; } .bi-box-arrow-up::before { content: "\f1c6"; } .bi-box-seam::before { content: "\f1c7"; } .bi-box::before { content: "\f1c8"; } .bi-braces::before { content: "\f1c9"; } .bi-bricks::before { content: "\f1ca"; } .bi-briefcase-fill::before { content: "\f1cb"; } .bi-briefcase::before { content: "\f1cc"; } .bi-brightness-alt-high-fill::before { content: "\f1cd"; } .bi-brightness-alt-high::before { content: "\f1ce"; } .bi-brightness-alt-low-fill::before { content: "\f1cf"; } .bi-brightness-alt-low::before { content: "\f1d0"; } .bi-brightness-high-fill::before { content: "\f1d1"; } .bi-brightness-high::before { content: "\f1d2"; } .bi-brightness-low-fill::before { content: "\f1d3"; } .bi-brightness-low::before { content: "\f1d4"; } .bi-broadcast-pin::before { content: "\f1d5"; } .bi-broadcast::before { content: "\f1d6"; } .bi-brush-fill::before { content: "\f1d7"; } .bi-brush::before { content: "\f1d8"; } .bi-bucket-fill::before { content: "\f1d9"; } .bi-bucket::before { content: "\f1da"; } .bi-bug-fill::before { content: "\f1db"; } .bi-bug::before { content: "\f1dc"; } .bi-building::before { content: "\f1dd"; } .bi-bullseye::before { content: "\f1de"; } .bi-calculator-fill::before { content: "\f1df"; } .bi-calculator::before { content: "\f1e0"; } .bi-calendar-check-fill::before { content: "\f1e1"; } .bi-calendar-check::before { content: "\f1e2"; } .bi-calendar-date-fill::before { content: "\f1e3"; } .bi-calendar-date::before { content: "\f1e4"; } .bi-calendar-day-fill::before { content: "\f1e5"; } .bi-calendar-day::before { content: "\f1e6"; } .bi-calendar-event-fill::before { content: "\f1e7"; } .bi-calendar-event::before { content: "\f1e8"; } .bi-calendar-fill::before { content: "\f1e9"; } .bi-calendar-minus-fill::before { content: "\f1ea"; } .bi-calendar-minus::before { content: "\f1eb"; } .bi-calendar-month-fill::before { content: "\f1ec"; } .bi-calendar-month::before { content: "\f1ed"; } .bi-calendar-plus-fill::before { content: "\f1ee"; } .bi-calendar-plus::before { content: "\f1ef"; } .bi-calendar-range-fill::before { content: "\f1f0"; } .bi-calendar-range::before { content: "\f1f1"; } .bi-calendar-week-fill::before { content: "\f1f2"; } .bi-calendar-week::before { content: "\f1f3"; } .bi-calendar-x-fill::before { content: "\f1f4"; } .bi-calendar-x::before { content: "\f1f5"; } .bi-calendar::before { content: "\f1f6"; } .bi-calendar2-check-fill::before { content: "\f1f7"; } .bi-calendar2-check::before { content: "\f1f8"; } .bi-calendar2-date-fill::before { content: "\f1f9"; } .bi-calendar2-date::before { content: "\f1fa"; } .bi-calendar2-day-fill::before { content: "\f1fb"; } .bi-calendar2-day::before { content: "\f1fc"; } .bi-calendar2-event-fill::before { content: "\f1fd"; } .bi-calendar2-event::before { content: "\f1fe"; } .bi-calendar2-fill::before { content: "\f1ff"; } .bi-calendar2-minus-fill::before { content: "\f200"; } .bi-calendar2-minus::before { content: "\f201"; } .bi-calendar2-month-fill::before { content: "\f202"; } .bi-calendar2-month::before { content: "\f203"; } .bi-calendar2-plus-fill::before { content: "\f204"; } .bi-calendar2-plus::before { content: "\f205"; } .bi-calendar2-range-fill::before { content: "\f206"; } .bi-calendar2-range::before { content: "\f207"; } .bi-calendar2-week-fill::before { content: "\f208"; } .bi-calendar2-week::before { content: "\f209"; } .bi-calendar2-x-fill::before { content: "\f20a"; } .bi-calendar2-x::before { content: "\f20b"; } .bi-calendar2::before { content: "\f20c"; } .bi-calendar3-event-fill::before { content: "\f20d"; } .bi-calendar3-event::before { content: "\f20e"; } .bi-calendar3-fill::before { content: "\f20f"; } .bi-calendar3-range-fill::before { content: "\f210"; } .bi-calendar3-range::before { content: "\f211"; } .bi-calendar3-week-fill::before { content: "\f212"; } .bi-calendar3-week::before { content: "\f213"; } .bi-calendar3::before { content: "\f214"; } .bi-calendar4-event::before { content: "\f215"; } .bi-calendar4-range::before { content: "\f216"; } .bi-calendar4-week::before { content: "\f217"; } .bi-calendar4::before { content: "\f218"; } .bi-camera-fill::before { content: "\f219"; } .bi-camera-reels-fill::before { content: "\f21a"; } .bi-camera-reels::before { content: "\f21b"; } .bi-camera-video-fill::before { content: "\f21c"; } .bi-camera-video-off-fill::before { content: "\f21d"; } .bi-camera-video-off::before { content: "\f21e"; } .bi-camera-video::before { content: "\f21f"; } .bi-camera::before { content: "\f220"; } .bi-camera2::before { content: "\f221"; } .bi-capslock-fill::before { content: "\f222"; } .bi-capslock::before { content: "\f223"; } .bi-card-checklist::before { content: "\f224"; } .bi-card-heading::before { content: "\f225"; } .bi-card-image::before { content: "\f226"; } .bi-card-list::before { content: "\f227"; } .bi-card-text::before { content: "\f228"; } .bi-caret-down-fill::before { content: "\f229"; } .bi-caret-down-square-fill::before { content: "\f22a"; } .bi-caret-down-square::before { content: "\f22b"; } .bi-caret-down::before { content: "\f22c"; } .bi-caret-left-fill::before { content: "\f22d"; } .bi-caret-left-square-fill::before { content: "\f22e"; } .bi-caret-left-square::before { content: "\f22f"; } .bi-caret-left::before { content: "\f230"; } .bi-caret-right-fill::before { content: "\f231"; } .bi-caret-right-square-fill::before { content: "\f232"; } .bi-caret-right-square::before { content: "\f233"; } .bi-caret-right::before { content: "\f234"; } .bi-caret-up-fill::before { content: "\f235"; } .bi-caret-up-square-fill::before { content: "\f236"; } .bi-caret-up-square::before { content: "\f237"; } .bi-caret-up::before { content: "\f238"; } .bi-cart-check-fill::before { content: "\f239"; } .bi-cart-check::before { content: "\f23a"; } .bi-cart-dash-fill::before { content: "\f23b"; } .bi-cart-dash::before { content: "\f23c"; } .bi-cart-fill::before { content: "\f23d"; } .bi-cart-plus-fill::before { content: "\f23e"; } .bi-cart-plus::before { content: "\f23f"; } .bi-cart-x-fill::before { content: "\f240"; } .bi-cart-x::before { content: "\f241"; } .bi-cart::before { content: "\f242"; } .bi-cart2::before { content: "\f243"; } .bi-cart3::before { content: "\f244"; } .bi-cart4::before { content: "\f245"; } .bi-cash-stack::before { content: "\f246"; } .bi-cash::before { content: "\f247"; } .bi-cast::before { content: "\f248"; } .bi-chat-dots-fill::before { content: "\f249"; } .bi-chat-dots::before { content: "\f24a"; } .bi-chat-fill::before { content: "\f24b"; } .bi-chat-left-dots-fill::before { content: "\f24c"; } .bi-chat-left-dots::before { content: "\f24d"; } .bi-chat-left-fill::before { content: "\f24e"; } .bi-chat-left-quote-fill::before { content: "\f24f"; } .bi-chat-left-quote::before { content: "\f250"; } .bi-chat-left-text-fill::before { content: "\f251"; } .bi-chat-left-text::before { content: "\f252"; } .bi-chat-left::before { content: "\f253"; } .bi-chat-quote-fill::before { content: "\f254"; } .bi-chat-quote::before { content: "\f255"; } .bi-chat-right-dots-fill::before { content: "\f256"; } .bi-chat-right-dots::before { content: "\f257"; } .bi-chat-right-fill::before { content: "\f258"; } .bi-chat-right-quote-fill::before { content: "\f259"; } .bi-chat-right-quote::before { content: "\f25a"; } .bi-chat-right-text-fill::before { content: "\f25b"; } .bi-chat-right-text::before { content: "\f25c"; } .bi-chat-right::before { content: "\f25d"; } .bi-chat-square-dots-fill::before { content: "\f25e"; } .bi-chat-square-dots::before { content: "\f25f"; } .bi-chat-square-fill::before { content: "\f260"; } .bi-chat-square-quote-fill::before { content: "\f261"; } .bi-chat-square-quote::before { content: "\f262"; } .bi-chat-square-text-fill::before { content: "\f263"; } .bi-chat-square-text::before { content: "\f264"; } .bi-chat-square::before { content: "\f265"; } .bi-chat-text-fill::before { content: "\f266"; } .bi-chat-text::before { content: "\f267"; } .bi-chat::before { content: "\f268"; } .bi-check-all::before { content: "\f269"; } .bi-check-circle-fill::before { content: "\f26a"; } .bi-check-circle::before { content: "\f26b"; } .bi-check-square-fill::before { content: "\f26c"; } .bi-check-square::before { content: "\f26d"; } .bi-check::before { content: "\f26e"; } .bi-check2-all::before { content: "\f26f"; } .bi-check2-circle::before { content: "\f270"; } .bi-check2-square::before { content: "\f271"; } .bi-check2::before { content: "\f272"; } .bi-chevron-bar-contract::before { content: "\f273"; } .bi-chevron-bar-down::before { content: "\f274"; } .bi-chevron-bar-expand::before { content: "\f275"; } .bi-chevron-bar-left::before { content: "\f276"; } .bi-chevron-bar-right::before { content: "\f277"; } .bi-chevron-bar-up::before { content: "\f278"; } .bi-chevron-compact-down::before { content: "\f279"; } .bi-chevron-compact-left::before { content: "\f27a"; } .bi-chevron-compact-right::before { content: "\f27b"; } .bi-chevron-compact-up::before { content: "\f27c"; } .bi-chevron-contract::before { content: "\f27d"; } .bi-chevron-double-down::before { content: "\f27e"; } .bi-chevron-double-left::before { content: "\f27f"; } .bi-chevron-double-right::before { content: "\f280"; } .bi-chevron-double-up::before { content: "\f281"; } .bi-chevron-down::before { content: "\f282"; } .bi-chevron-expand::before { content: "\f283"; } .bi-chevron-left::before { content: "\f284"; } .bi-chevron-right::before { content: "\f285"; } .bi-chevron-up::before { content: "\f286"; } .bi-circle-fill::before { content: "\f287"; } .bi-circle-half::before { content: "\f288"; } .bi-circle-square::before { content: "\f289"; } .bi-circle::before { content: "\f28a"; } .bi-clipboard-check::before { content: "\f28b"; } .bi-clipboard-data::before { content: "\f28c"; } .bi-clipboard-minus::before { content: "\f28d"; } .bi-clipboard-plus::before { content: "\f28e"; } .bi-clipboard-x::before { content: "\f28f"; } .bi-clipboard::before { content: "\f290"; } .bi-clock-fill::before { content: "\f291"; } .bi-clock-history::before { content: "\f292"; } .bi-clock::before { content: "\f293"; } .bi-cloud-arrow-down-fill::before { content: "\f294"; } .bi-cloud-arrow-down::before { content: "\f295"; } .bi-cloud-arrow-up-fill::before { content: "\f296"; } .bi-cloud-arrow-up::before { content: "\f297"; } .bi-cloud-check-fill::before { content: "\f298"; } .bi-cloud-check::before { content: "\f299"; } .bi-cloud-download-fill::before { content: "\f29a"; } .bi-cloud-download::before { content: "\f29b"; } .bi-cloud-drizzle-fill::before { content: "\f29c"; } .bi-cloud-drizzle::before { content: "\f29d"; } .bi-cloud-fill::before { content: "\f29e"; } .bi-cloud-fog-fill::before { content: "\f29f"; } .bi-cloud-fog::before { content: "\f2a0"; } .bi-cloud-fog2-fill::before { content: "\f2a1"; } .bi-cloud-fog2::before { content: "\f2a2"; } .bi-cloud-hail-fill::before { content: "\f2a3"; } .bi-cloud-hail::before { content: "\f2a4"; } .bi-cloud-haze-fill::before { content: "\f2a6"; } .bi-cloud-haze::before { content: "\f2a7"; } .bi-cloud-haze2-fill::before { content: "\f2a8"; } .bi-cloud-lightning-fill::before { content: "\f2a9"; } .bi-cloud-lightning-rain-fill::before { content: "\f2aa"; } .bi-cloud-lightning-rain::before { content: "\f2ab"; } .bi-cloud-lightning::before { content: "\f2ac"; } .bi-cloud-minus-fill::before { content: "\f2ad"; } .bi-cloud-minus::before { content: "\f2ae"; } .bi-cloud-moon-fill::before { content: "\f2af"; } .bi-cloud-moon::before { content: "\f2b0"; } .bi-cloud-plus-fill::before { content: "\f2b1"; } .bi-cloud-plus::before { content: "\f2b2"; } .bi-cloud-rain-fill::before { content: "\f2b3"; } .bi-cloud-rain-heavy-fill::before { content: "\f2b4"; } .bi-cloud-rain-heavy::before { content: "\f2b5"; } .bi-cloud-rain::before { content: "\f2b6"; } .bi-cloud-slash-fill::before { content: "\f2b7"; } .bi-cloud-slash::before { content: "\f2b8"; } .bi-cloud-sleet-fill::before { content: "\f2b9"; } .bi-cloud-sleet::before { content: "\f2ba"; } .bi-cloud-snow-fill::before { content: "\f2bb"; } .bi-cloud-snow::before { content: "\f2bc"; } .bi-cloud-sun-fill::before { content: "\f2bd"; } .bi-cloud-sun::before { content: "\f2be"; } .bi-cloud-upload-fill::before { content: "\f2bf"; } .bi-cloud-upload::before { content: "\f2c0"; } .bi-cloud::before { content: "\f2c1"; } .bi-clouds-fill::before { content: "\f2c2"; } .bi-clouds::before { content: "\f2c3"; } .bi-cloudy-fill::before { content: "\f2c4"; } .bi-cloudy::before { content: "\f2c5"; } .bi-code-slash::before { content: "\f2c6"; } .bi-code-square::before { content: "\f2c7"; } .bi-code::before { content: "\f2c8"; } .bi-collection-fill::before { content: "\f2c9"; } .bi-collection-play-fill::before { content: "\f2ca"; } .bi-collection-play::before { content: "\f2cb"; } .bi-collection::before { content: "\f2cc"; } .bi-columns-gap::before { content: "\f2cd"; } .bi-columns::before { content: "\f2ce"; } .bi-command::before { content: "\f2cf"; } .bi-compass-fill::before { content: "\f2d0"; } .bi-compass::before { content: "\f2d1"; } .bi-cone-striped::before { content: "\f2d2"; } .bi-cone::before { content: "\f2d3"; } .bi-controller::before { content: "\f2d4"; } .bi-cpu-fill::before { content: "\f2d5"; } .bi-cpu::before { content: "\f2d6"; } .bi-credit-card-2-back-fill::before { content: "\f2d7"; } .bi-credit-card-2-back::before { content: "\f2d8"; } .bi-credit-card-2-front-fill::before { content: "\f2d9"; } .bi-credit-card-2-front::before { content: "\f2da"; } .bi-credit-card-fill::before { content: "\f2db"; } .bi-credit-card::before { content: "\f2dc"; } .bi-crop::before { content: "\f2dd"; } .bi-cup-fill::before { content: "\f2de"; } .bi-cup-straw::before { content: "\f2df"; } .bi-cup::before { content: "\f2e0"; } .bi-cursor-fill::before { content: "\f2e1"; } .bi-cursor-text::before { content: "\f2e2"; } .bi-cursor::before { content: "\f2e3"; } .bi-dash-circle-dotted::before { content: "\f2e4"; } .bi-dash-circle-fill::before { content: "\f2e5"; } .bi-dash-circle::before { content: "\f2e6"; } .bi-dash-square-dotted::before { content: "\f2e7"; } .bi-dash-square-fill::before { content: "\f2e8"; } .bi-dash-square::before { content: "\f2e9"; } .bi-dash::before { content: "\f2ea"; } .bi-diagram-2-fill::before { content: "\f2eb"; } .bi-diagram-2::before { content: "\f2ec"; } .bi-diagram-3-fill::before { content: "\f2ed"; } .bi-diagram-3::before { content: "\f2ee"; } .bi-diamond-fill::before { content: "\f2ef"; } .bi-diamond-half::before { content: "\f2f0"; } .bi-diamond::before { content: "\f2f1"; } .bi-dice-1-fill::before { content: "\f2f2"; } .bi-dice-1::before { content: "\f2f3"; } .bi-dice-2-fill::before { content: "\f2f4"; } .bi-dice-2::before { content: "\f2f5"; } .bi-dice-3-fill::before { content: "\f2f6"; } .bi-dice-3::before { content: "\f2f7"; } .bi-dice-4-fill::before { content: "\f2f8"; } .bi-dice-4::before { content: "\f2f9"; } .bi-dice-5-fill::before { content: "\f2fa"; } .bi-dice-5::before { content: "\f2fb"; } .bi-dice-6-fill::before { content: "\f2fc"; } .bi-dice-6::before { content: "\f2fd"; } .bi-disc-fill::before { content: "\f2fe"; } .bi-disc::before { content: "\f2ff"; } .bi-discord::before { content: "\f300"; } .bi-display-fill::before { content: "\f301"; } .bi-display::before { content: "\f302"; } .bi-distribute-horizontal::before { content: "\f303"; } .bi-distribute-vertical::before { content: "\f304"; } .bi-door-closed-fill::before { content: "\f305"; } .bi-door-closed::before { content: "\f306"; } .bi-door-open-fill::before { content: "\f307"; } .bi-door-open::before { content: "\f308"; } .bi-dot::before { content: "\f309"; } .bi-download::before { content: "\f30a"; } .bi-droplet-fill::before { content: "\f30b"; } .bi-droplet-half::before { content: "\f30c"; } .bi-droplet::before { content: "\f30d"; } .bi-earbuds::before { content: "\f30e"; } .bi-easel-fill::before { content: "\f30f"; } .bi-easel::before { content: "\f310"; } .bi-egg-fill::before { content: "\f311"; } .bi-egg-fried::before { content: "\f312"; } .bi-egg::before { content: "\f313"; } .bi-eject-fill::before { content: "\f314"; } .bi-eject::before { content: "\f315"; } .bi-emoji-angry-fill::before { content: "\f316"; } .bi-emoji-angry::before { content: "\f317"; } .bi-emoji-dizzy-fill::before { content: "\f318"; } .bi-emoji-dizzy::before { content: "\f319"; } .bi-emoji-expressionless-fill::before { content: "\f31a"; } .bi-emoji-expressionless::before { content: "\f31b"; } .bi-emoji-frown-fill::before { content: "\f31c"; } .bi-emoji-frown::before { content: "\f31d"; } .bi-emoji-heart-eyes-fill::before { content: "\f31e"; } .bi-emoji-heart-eyes::before { content: "\f31f"; } .bi-emoji-laughing-fill::before { content: "\f320"; } .bi-emoji-laughing::before { content: "\f321"; } .bi-emoji-neutral-fill::before { content: "\f322"; } .bi-emoji-neutral::before { content: "\f323"; } .bi-emoji-smile-fill::before { content: "\f324"; } .bi-emoji-smile-upside-down-fill::before { content: "\f325"; } .bi-emoji-smile-upside-down::before { content: "\f326"; } .bi-emoji-smile::before { content: "\f327"; } .bi-emoji-sunglasses-fill::before { content: "\f328"; } .bi-emoji-sunglasses::before { content: "\f329"; } .bi-emoji-wink-fill::before { content: "\f32a"; } .bi-emoji-wink::before { content: "\f32b"; } .bi-envelope-fill::before { content: "\f32c"; } .bi-envelope-open-fill::before { content: "\f32d"; } .bi-envelope-open::before { content: "\f32e"; } .bi-envelope::before { content: "\f32f"; } .bi-eraser-fill::before { content: "\f330"; } .bi-eraser::before { content: "\f331"; } .bi-exclamation-circle-fill::before { content: "\f332"; } .bi-exclamation-circle::before { content: "\f333"; } .bi-exclamation-diamond-fill::before { content: "\f334"; } .bi-exclamation-diamond::before { content: "\f335"; } .bi-exclamation-octagon-fill::before { content: "\f336"; } .bi-exclamation-octagon::before { content: "\f337"; } .bi-exclamation-square-fill::before { content: "\f338"; } .bi-exclamation-square::before { content: "\f339"; } .bi-exclamation-triangle-fill::before { content: "\f33a"; } .bi-exclamation-triangle::before { content: "\f33b"; } .bi-exclamation::before { content: "\f33c"; } .bi-exclude::before { content: "\f33d"; } .bi-eye-fill::before { content: "\f33e"; } .bi-eye-slash-fill::before { content: "\f33f"; } .bi-eye-slash::before { content: "\f340"; } .bi-eye::before { content: "\f341"; } .bi-eyedropper::before { content: "\f342"; } .bi-eyeglasses::before { content: "\f343"; } .bi-facebook::before { content: "\f344"; } .bi-file-arrow-down-fill::before { content: "\f345"; } .bi-file-arrow-down::before { content: "\f346"; } .bi-file-arrow-up-fill::before { content: "\f347"; } .bi-file-arrow-up::before { content: "\f348"; } .bi-file-bar-graph-fill::before { content: "\f349"; } .bi-file-bar-graph::before { content: "\f34a"; } .bi-file-binary-fill::before { content: "\f34b"; } .bi-file-binary::before { content: "\f34c"; } .bi-file-break-fill::before { content: "\f34d"; } .bi-file-break::before { content: "\f34e"; } .bi-file-check-fill::before { content: "\f34f"; } .bi-file-check::before { content: "\f350"; } .bi-file-code-fill::before { content: "\f351"; } .bi-file-code::before { content: "\f352"; } .bi-file-diff-fill::before { content: "\f353"; } .bi-file-diff::before { content: "\f354"; } .bi-file-earmark-arrow-down-fill::before { content: "\f355"; } .bi-file-earmark-arrow-down::before { content: "\f356"; } .bi-file-earmark-arrow-up-fill::before { content: "\f357"; } .bi-file-earmark-arrow-up::before { content: "\f358"; } .bi-file-earmark-bar-graph-fill::before { content: "\f359"; } .bi-file-earmark-bar-graph::before { content: "\f35a"; } .bi-file-earmark-binary-fill::before { content: "\f35b"; } .bi-file-earmark-binary::before { content: "\f35c"; } .bi-file-earmark-break-fill::before { content: "\f35d"; } .bi-file-earmark-break::before { content: "\f35e"; } .bi-file-earmark-check-fill::before { content: "\f35f"; } .bi-file-earmark-check::before { content: "\f360"; } .bi-file-earmark-code-fill::before { content: "\f361"; } .bi-file-earmark-code::before { content: "\f362"; } .bi-file-earmark-diff-fill::before { content: "\f363"; } .bi-file-earmark-diff::before { content: "\f364"; } .bi-file-earmark-easel-fill::before { content: "\f365"; } .bi-file-earmark-easel::before { content: "\f366"; } .bi-file-earmark-excel-fill::before { content: "\f367"; } .bi-file-earmark-excel::before { content: "\f368"; } .bi-file-earmark-fill::before { content: "\f369"; } .bi-file-earmark-font-fill::before { content: "\f36a"; } .bi-file-earmark-font::before { content: "\f36b"; } .bi-file-earmark-image-fill::before { content: "\f36c"; } .bi-file-earmark-image::before { content: "\f36d"; } .bi-file-earmark-lock-fill::before { content: "\f36e"; } .bi-file-earmark-lock::before { content: "\f36f"; } .bi-file-earmark-lock2-fill::before { content: "\f370"; } .bi-file-earmark-lock2::before { content: "\f371"; } .bi-file-earmark-medical-fill::before { content: "\f372"; } .bi-file-earmark-medical::before { content: "\f373"; } .bi-file-earmark-minus-fill::before { content: "\f374"; } .bi-file-earmark-minus::before { content: "\f375"; } .bi-file-earmark-music-fill::before { content: "\f376"; } .bi-file-earmark-music::before { content: "\f377"; } .bi-file-earmark-person-fill::before { content: "\f378"; } .bi-file-earmark-person::before { content: "\f379"; } .bi-file-earmark-play-fill::before { content: "\f37a"; } .bi-file-earmark-play::before { content: "\f37b"; } .bi-file-earmark-plus-fill::before { content: "\f37c"; } .bi-file-earmark-plus::before { content: "\f37d"; } .bi-file-earmark-post-fill::before { content: "\f37e"; } .bi-file-earmark-post::before { content: "\f37f"; } .bi-file-earmark-ppt-fill::before { content: "\f380"; } .bi-file-earmark-ppt::before { content: "\f381"; } .bi-file-earmark-richtext-fill::before { content: "\f382"; } .bi-file-earmark-richtext::before { content: "\f383"; } .bi-file-earmark-ruled-fill::before { content: "\f384"; } .bi-file-earmark-ruled::before { content: "\f385"; } .bi-file-earmark-slides-fill::before { content: "\f386"; } .bi-file-earmark-slides::before { content: "\f387"; } .bi-file-earmark-spreadsheet-fill::before { content: "\f388"; } .bi-file-earmark-spreadsheet::before { content: "\f389"; } .bi-file-earmark-text-fill::before { content: "\f38a"; } .bi-file-earmark-text::before { content: "\f38b"; } .bi-file-earmark-word-fill::before { content: "\f38c"; } .bi-file-earmark-word::before { content: "\f38d"; } .bi-file-earmark-x-fill::before { content: "\f38e"; } .bi-file-earmark-x::before { content: "\f38f"; } .bi-file-earmark-zip-fill::before { content: "\f390"; } .bi-file-earmark-zip::before { content: "\f391"; } .bi-file-earmark::before { content: "\f392"; } .bi-file-easel-fill::before { content: "\f393"; } .bi-file-easel::before { content: "\f394"; } .bi-file-excel-fill::before { content: "\f395"; } .bi-file-excel::before { content: "\f396"; } .bi-file-fill::before { content: "\f397"; } .bi-file-font-fill::before { content: "\f398"; } .bi-file-font::before { content: "\f399"; } .bi-file-image-fill::before { content: "\f39a"; } .bi-file-image::before { content: "\f39b"; } .bi-file-lock-fill::before { content: "\f39c"; } .bi-file-lock::before { content: "\f39d"; } .bi-file-lock2-fill::before { content: "\f39e"; } .bi-file-lock2::before { content: "\f39f"; } .bi-file-medical-fill::before { content: "\f3a0"; } .bi-file-medical::before { content: "\f3a1"; } .bi-file-minus-fill::before { content: "\f3a2"; } .bi-file-minus::before { content: "\f3a3"; } .bi-file-music-fill::before { content: "\f3a4"; } .bi-file-music::before { content: "\f3a5"; } .bi-file-person-fill::before { content: "\f3a6"; } .bi-file-person::before { content: "\f3a7"; } .bi-file-play-fill::before { content: "\f3a8"; } .bi-file-play::before { content: "\f3a9"; } .bi-file-plus-fill::before { content: "\f3aa"; } .bi-file-plus::before { content: "\f3ab"; } .bi-file-post-fill::before { content: "\f3ac"; } .bi-file-post::before { content: "\f3ad"; } .bi-file-ppt-fill::before { content: "\f3ae"; } .bi-file-ppt::before { content: "\f3af"; } .bi-file-richtext-fill::before { content: "\f3b0"; } .bi-file-richtext::before { content: "\f3b1"; } .bi-file-ruled-fill::before { content: "\f3b2"; } .bi-file-ruled::before { content: "\f3b3"; } .bi-file-slides-fill::before { content: "\f3b4"; } .bi-file-slides::before { content: "\f3b5"; } .bi-file-spreadsheet-fill::before { content: "\f3b6"; } .bi-file-spreadsheet::before { content: "\f3b7"; } .bi-file-text-fill::before { content: "\f3b8"; } .bi-file-text::before { content: "\f3b9"; } .bi-file-word-fill::before { content: "\f3ba"; } .bi-file-word::before { content: "\f3bb"; } .bi-file-x-fill::before { content: "\f3bc"; } .bi-file-x::before { content: "\f3bd"; } .bi-file-zip-fill::before { content: "\f3be"; } .bi-file-zip::before { content: "\f3bf"; } .bi-file::before { content: "\f3c0"; } .bi-files-alt::before { content: "\f3c1"; } .bi-files::before { content: "\f3c2"; } .bi-film::before { content: "\f3c3"; } .bi-filter-circle-fill::before { content: "\f3c4"; } .bi-filter-circle::before { content: "\f3c5"; } .bi-filter-left::before { content: "\f3c6"; } .bi-filter-right::before { content: "\f3c7"; } .bi-filter-square-fill::before { content: "\f3c8"; } .bi-filter-square::before { content: "\f3c9"; } .bi-filter::before { content: "\f3ca"; } .bi-flag-fill::before { content: "\f3cb"; } .bi-flag::before { content: "\f3cc"; } .bi-flower1::before { content: "\f3cd"; } .bi-flower2::before { content: "\f3ce"; } .bi-flower3::before { content: "\f3cf"; } .bi-folder-check::before { content: "\f3d0"; } .bi-folder-fill::before { content: "\f3d1"; } .bi-folder-minus::before { content: "\f3d2"; } .bi-folder-plus::before { content: "\f3d3"; } .bi-folder-symlink-fill::before { content: "\f3d4"; } .bi-folder-symlink::before { content: "\f3d5"; } .bi-folder-x::before { content: "\f3d6"; } .bi-folder::before { content: "\f3d7"; } .bi-folder2-open::before { content: "\f3d8"; } .bi-folder2::before { content: "\f3d9"; } .bi-fonts::before { content: "\f3da"; } .bi-forward-fill::before { content: "\f3db"; } .bi-forward::before { content: "\f3dc"; } .bi-front::before { content: "\f3dd"; } .bi-fullscreen-exit::before { content: "\f3de"; } .bi-fullscreen::before { content: "\f3df"; } .bi-funnel-fill::before { content: "\f3e0"; } .bi-funnel::before { content: "\f3e1"; } .bi-gear-fill::before { content: "\f3e2"; } .bi-gear-wide-connected::before { content: "\f3e3"; } .bi-gear-wide::before { content: "\f3e4"; } .bi-gear::before { content: "\f3e5"; } .bi-gem::before { content: "\f3e6"; } .bi-geo-alt-fill::before { content: "\f3e7"; } .bi-geo-alt::before { content: "\f3e8"; } .bi-geo-fill::before { content: "\f3e9"; } .bi-geo::before { content: "\f3ea"; } .bi-gift-fill::before { content: "\f3eb"; } .bi-gift::before { content: "\f3ec"; } .bi-github::before { content: "\f3ed"; } .bi-globe::before { content: "\f3ee"; } .bi-globe2::before { content: "\f3ef"; } .bi-google::before { content: "\f3f0"; } .bi-graph-down::before { content: "\f3f1"; } .bi-graph-up::before { content: "\f3f2"; } .bi-grid-1x2-fill::before { content: "\f3f3"; } .bi-grid-1x2::before { content: "\f3f4"; } .bi-grid-3x2-gap-fill::before { content: "\f3f5"; } .bi-grid-3x2-gap::before { content: "\f3f6"; } .bi-grid-3x2::before { content: "\f3f7"; } .bi-grid-3x3-gap-fill::before { content: "\f3f8"; } .bi-grid-3x3-gap::before { content: "\f3f9"; } .bi-grid-3x3::before { content: "\f3fa"; } .bi-grid-fill::before { content: "\f3fb"; } .bi-grid::before { content: "\f3fc"; } .bi-grip-horizontal::before { content: "\f3fd"; } .bi-grip-vertical::before { content: "\f3fe"; } .bi-hammer::before { content: "\f3ff"; } .bi-hand-index-fill::before { content: "\f400"; } .bi-hand-index-thumb-fill::before { content: "\f401"; } .bi-hand-index-thumb::before { content: "\f402"; } .bi-hand-index::before { content: "\f403"; } .bi-hand-thumbs-down-fill::before { content: "\f404"; } .bi-hand-thumbs-down::before { content: "\f405"; } .bi-hand-thumbs-up-fill::before { content: "\f406"; } .bi-hand-thumbs-up::before { content: "\f407"; } .bi-handbag-fill::before { content: "\f408"; } .bi-handbag::before { content: "\f409"; } .bi-hash::before { content: "\f40a"; } .bi-hdd-fill::before { content: "\f40b"; } .bi-hdd-network-fill::before { content: "\f40c"; } .bi-hdd-network::before { content: "\f40d"; } .bi-hdd-rack-fill::before { content: "\f40e"; } .bi-hdd-rack::before { content: "\f40f"; } .bi-hdd-stack-fill::before { content: "\f410"; } .bi-hdd-stack::before { content: "\f411"; } .bi-hdd::before { content: "\f412"; } .bi-headphones::before { content: "\f413"; } .bi-headset::before { content: "\f414"; } .bi-heart-fill::before { content: "\f415"; } .bi-heart-half::before { content: "\f416"; } .bi-heart::before { content: "\f417"; } .bi-heptagon-fill::before { content: "\f418"; } .bi-heptagon-half::before { content: "\f419"; } .bi-heptagon::before { content: "\f41a"; } .bi-hexagon-fill::before { content: "\f41b"; } .bi-hexagon-half::before { content: "\f41c"; } .bi-hexagon::before { content: "\f41d"; } .bi-hourglass-bottom::before { content: "\f41e"; } .bi-hourglass-split::before { content: "\f41f"; } .bi-hourglass-top::before { content: "\f420"; } .bi-hourglass::before { content: "\f421"; } .bi-house-door-fill::before { content: "\f422"; } .bi-house-door::before { content: "\f423"; } .bi-house-fill::before { content: "\f424"; } .bi-house::before { content: "\f425"; } .bi-hr::before { content: "\f426"; } .bi-hurricane::before { content: "\f427"; } .bi-image-alt::before { content: "\f428"; } .bi-image-fill::before { content: "\f429"; } .bi-image::before { content: "\f42a"; } .bi-images::before { content: "\f42b"; } .bi-inbox-fill::before { content: "\f42c"; } .bi-inbox::before { content: "\f42d"; } .bi-inboxes-fill::before { content: "\f42e"; } .bi-inboxes::before { content: "\f42f"; } .bi-info-circle-fill::before { content: "\f430"; } .bi-info-circle::before { content: "\f431"; } .bi-info-square-fill::before { content: "\f432"; } .bi-info-square::before { content: "\f433"; } .bi-info::before { content: "\f434"; } .bi-input-cursor-text::before { content: "\f435"; } .bi-input-cursor::before { content: "\f436"; } .bi-instagram::before { content: "\f437"; } .bi-intersect::before { content: "\f438"; } .bi-journal-album::before { content: "\f439"; } .bi-journal-arrow-down::before { content: "\f43a"; } .bi-journal-arrow-up::before { content: "\f43b"; } .bi-journal-bookmark-fill::before { content: "\f43c"; } .bi-journal-bookmark::before { content: "\f43d"; } .bi-journal-check::before { content: "\f43e"; } .bi-journal-code::before { content: "\f43f"; } .bi-journal-medical::before { content: "\f440"; } .bi-journal-minus::before { content: "\f441"; } .bi-journal-plus::before { content: "\f442"; } .bi-journal-richtext::before { content: "\f443"; } .bi-journal-text::before { content: "\f444"; } .bi-journal-x::before { content: "\f445"; } .bi-journal::before { content: "\f446"; } .bi-journals::before { content: "\f447"; } .bi-joystick::before { content: "\f448"; } .bi-justify-left::before { content: "\f449"; } .bi-justify-right::before { content: "\f44a"; } .bi-justify::before { content: "\f44b"; } .bi-kanban-fill::before { content: "\f44c"; } .bi-kanban::before { content: "\f44d"; } .bi-key-fill::before { content: "\f44e"; } .bi-key::before { content: "\f44f"; } .bi-keyboard-fill::before { content: "\f450"; } .bi-keyboard::before { content: "\f451"; } .bi-ladder::before { content: "\f452"; } .bi-lamp-fill::before { content: "\f453"; } .bi-lamp::before { content: "\f454"; } .bi-laptop-fill::before { content: "\f455"; } .bi-laptop::before { content: "\f456"; } .bi-layer-backward::before { content: "\f457"; } .bi-layer-forward::before { content: "\f458"; } .bi-layers-fill::before { content: "\f459"; } .bi-layers-half::before { content: "\f45a"; } .bi-layers::before { content: "\f45b"; } .bi-layout-sidebar-inset-reverse::before { content: "\f45c"; } .bi-layout-sidebar-inset::before { content: "\f45d"; } .bi-layout-sidebar-reverse::before { content: "\f45e"; } .bi-layout-sidebar::before { content: "\f45f"; } .bi-layout-split::before { content: "\f460"; } .bi-layout-text-sidebar-reverse::before { content: "\f461"; } .bi-layout-text-sidebar::before { content: "\f462"; } .bi-layout-text-window-reverse::before { content: "\f463"; } .bi-layout-text-window::before { content: "\f464"; } .bi-layout-three-columns::before { content: "\f465"; } .bi-layout-wtf::before { content: "\f466"; } .bi-life-preserver::before { content: "\f467"; } .bi-lightbulb-fill::before { content: "\f468"; } .bi-lightbulb-off-fill::before { content: "\f469"; } .bi-lightbulb-off::before { content: "\f46a"; } .bi-lightbulb::before { content: "\f46b"; } .bi-lightning-charge-fill::before { content: "\f46c"; } .bi-lightning-charge::before { content: "\f46d"; } .bi-lightning-fill::before { content: "\f46e"; } .bi-lightning::before { content: "\f46f"; } .bi-link-45deg::before { content: "\f470"; } .bi-link::before { content: "\f471"; } .bi-linkedin::before { content: "\f472"; } .bi-list-check::before { content: "\f473"; } .bi-list-nested::before { content: "\f474"; } .bi-list-ol::before { content: "\f475"; } .bi-list-stars::before { content: "\f476"; } .bi-list-task::before { content: "\f477"; } .bi-list-ul::before { content: "\f478"; } .bi-list::before { content: "\f479"; } .bi-lock-fill::before { content: "\f47a"; } .bi-lock::before { content: "\f47b"; } .bi-mailbox::before { content: "\f47c"; } .bi-mailbox2::before { content: "\f47d"; } .bi-map-fill::before { content: "\f47e"; } .bi-map::before { content: "\f47f"; } .bi-markdown-fill::before { content: "\f480"; } .bi-markdown::before { content: "\f481"; } .bi-mask::before { content: "\f482"; } .bi-megaphone-fill::before { content: "\f483"; } .bi-megaphone::before { content: "\f484"; } .bi-menu-app-fill::before { content: "\f485"; } .bi-menu-app::before { content: "\f486"; } .bi-menu-button-fill::before { content: "\f487"; } .bi-menu-button-wide-fill::before { content: "\f488"; } .bi-menu-button-wide::before { content: "\f489"; } .bi-menu-button::before { content: "\f48a"; } .bi-menu-down::before { content: "\f48b"; } .bi-menu-up::before { content: "\f48c"; } .bi-mic-fill::before { content: "\f48d"; } .bi-mic-mute-fill::before { content: "\f48e"; } .bi-mic-mute::before { content: "\f48f"; } .bi-mic::before { content: "\f490"; } .bi-minecart-loaded::before { content: "\f491"; } .bi-minecart::before { content: "\f492"; } .bi-moisture::before { content: "\f493"; } .bi-moon-fill::before { content: "\f494"; } .bi-moon-stars-fill::before { content: "\f495"; } .bi-moon-stars::before { content: "\f496"; } .bi-moon::before { content: "\f497"; } .bi-mouse-fill::before { content: "\f498"; } .bi-mouse::before { content: "\f499"; } .bi-mouse2-fill::before { content: "\f49a"; } .bi-mouse2::before { content: "\f49b"; } .bi-mouse3-fill::before { content: "\f49c"; } .bi-mouse3::before { content: "\f49d"; } .bi-music-note-beamed::before { content: "\f49e"; } .bi-music-note-list::before { content: "\f49f"; } .bi-music-note::before { content: "\f4a0"; } .bi-music-player-fill::before { content: "\f4a1"; } .bi-music-player::before { content: "\f4a2"; } .bi-newspaper::before { content: "\f4a3"; } .bi-node-minus-fill::before { content: "\f4a4"; } .bi-node-minus::before { content: "\f4a5"; } .bi-node-plus-fill::before { content: "\f4a6"; } .bi-node-plus::before { content: "\f4a7"; } .bi-nut-fill::before { content: "\f4a8"; } .bi-nut::before { content: "\f4a9"; } .bi-octagon-fill::before { content: "\f4aa"; } .bi-octagon-half::before { content: "\f4ab"; } .bi-octagon::before { content: "\f4ac"; } .bi-option::before { content: "\f4ad"; } .bi-outlet::before { content: "\f4ae"; } .bi-paint-bucket::before { content: "\f4af"; } .bi-palette-fill::before { content: "\f4b0"; } .bi-palette::before { content: "\f4b1"; } .bi-palette2::before { content: "\f4b2"; } .bi-paperclip::before { content: "\f4b3"; } .bi-paragraph::before { content: "\f4b4"; } .bi-patch-check-fill::before { content: "\f4b5"; } .bi-patch-check::before { content: "\f4b6"; } .bi-patch-exclamation-fill::before { content: "\f4b7"; } .bi-patch-exclamation::before { content: "\f4b8"; } .bi-patch-minus-fill::before { content: "\f4b9"; } .bi-patch-minus::before { content: "\f4ba"; } .bi-patch-plus-fill::before { content: "\f4bb"; } .bi-patch-plus::before { content: "\f4bc"; } .bi-patch-question-fill::before { content: "\f4bd"; } .bi-patch-question::before { content: "\f4be"; } .bi-pause-btn-fill::before { content: "\f4bf"; } .bi-pause-btn::before { content: "\f4c0"; } .bi-pause-circle-fill::before { content: "\f4c1"; } .bi-pause-circle::before { content: "\f4c2"; } .bi-pause-fill::before { content: "\f4c3"; } .bi-pause::before { content: "\f4c4"; } .bi-peace-fill::before { content: "\f4c5"; } .bi-peace::before { content: "\f4c6"; } .bi-pen-fill::before { content: "\f4c7"; } .bi-pen::before { content: "\f4c8"; } .bi-pencil-fill::before { content: "\f4c9"; } .bi-pencil-square::before { content: "\f4ca"; } .bi-pencil::before { content: "\f4cb"; } .bi-pentagon-fill::before { content: "\f4cc"; } .bi-pentagon-half::before { content: "\f4cd"; } .bi-pentagon::before { content: "\f4ce"; } .bi-people-fill::before { content: "\f4cf"; } .bi-people::before { content: "\f4d0"; } .bi-percent::before { content: "\f4d1"; } .bi-person-badge-fill::before { content: "\f4d2"; } .bi-person-badge::before { content: "\f4d3"; } .bi-person-bounding-box::before { content: "\f4d4"; } .bi-person-check-fill::before { content: "\f4d5"; } .bi-person-check::before { content: "\f4d6"; } .bi-person-circle::before { content: "\f4d7"; } .bi-person-dash-fill::before { content: "\f4d8"; } .bi-person-dash::before { content: "\f4d9"; } .bi-person-fill::before { content: "\f4da"; } .bi-person-lines-fill::before { content: "\f4db"; } .bi-person-plus-fill::before { content: "\f4dc"; } .bi-person-plus::before { content: "\f4dd"; } .bi-person-square::before { content: "\f4de"; } .bi-person-x-fill::before { content: "\f4df"; } .bi-person-x::before { content: "\f4e0"; } .bi-person::before { content: "\f4e1"; } .bi-phone-fill::before { content: "\f4e2"; } .bi-phone-landscape-fill::before { content: "\f4e3"; } .bi-phone-landscape::before { content: "\f4e4"; } .bi-phone-vibrate-fill::before { content: "\f4e5"; } .bi-phone-vibrate::before { content: "\f4e6"; } .bi-phone::before { content: "\f4e7"; } .bi-pie-chart-fill::before { content: "\f4e8"; } .bi-pie-chart::before { content: "\f4e9"; } .bi-pin-angle-fill::before { content: "\f4ea"; } .bi-pin-angle::before { content: "\f4eb"; } .bi-pin-fill::before { content: "\f4ec"; } .bi-pin::before { content: "\f4ed"; } .bi-pip-fill::before { content: "\f4ee"; } .bi-pip::before { content: "\f4ef"; } .bi-play-btn-fill::before { content: "\f4f0"; } .bi-play-btn::before { content: "\f4f1"; } .bi-play-circle-fill::before { content: "\f4f2"; } .bi-play-circle::before { content: "\f4f3"; } .bi-play-fill::before { content: "\f4f4"; } .bi-play::before { content: "\f4f5"; } .bi-plug-fill::before { content: "\f4f6"; } .bi-plug::before { content: "\f4f7"; } .bi-plus-circle-dotted::before { content: "\f4f8"; } .bi-plus-circle-fill::before { content: "\f4f9"; } .bi-plus-circle::before { content: "\f4fa"; } .bi-plus-square-dotted::before { content: "\f4fb"; } .bi-plus-square-fill::before { content: "\f4fc"; } .bi-plus-square::before { content: "\f4fd"; } .bi-plus::before { content: "\f4fe"; } .bi-power::before { content: "\f4ff"; } .bi-printer-fill::before { content: "\f500"; } .bi-printer::before { content: "\f501"; } .bi-puzzle-fill::before { content: "\f502"; } .bi-puzzle::before { content: "\f503"; } .bi-question-circle-fill::before { content: "\f504"; } .bi-question-circle::before { content: "\f505"; } .bi-question-diamond-fill::before { content: "\f506"; } .bi-question-diamond::before { content: "\f507"; } .bi-question-octagon-fill::before { content: "\f508"; } .bi-question-octagon::before { content: "\f509"; } .bi-question-square-fill::before { content: "\f50a"; } .bi-question-square::before { content: "\f50b"; } .bi-question::before { content: "\f50c"; } .bi-rainbow::before { content: "\f50d"; } .bi-receipt-cutoff::before { content: "\f50e"; } .bi-receipt::before { content: "\f50f"; } .bi-reception-0::before { content: "\f510"; } .bi-reception-1::before { content: "\f511"; } .bi-reception-2::before { content: "\f512"; } .bi-reception-3::before { content: "\f513"; } .bi-reception-4::before { content: "\f514"; } .bi-record-btn-fill::before { content: "\f515"; } .bi-record-btn::before { content: "\f516"; } .bi-record-circle-fill::before { content: "\f517"; } .bi-record-circle::before { content: "\f518"; } .bi-record-fill::before { content: "\f519"; } .bi-record::before { content: "\f51a"; } .bi-record2-fill::before { content: "\f51b"; } .bi-record2::before { content: "\f51c"; } .bi-reply-all-fill::before { content: "\f51d"; } .bi-reply-all::before { content: "\f51e"; } .bi-reply-fill::before { content: "\f51f"; } .bi-reply::before { content: "\f520"; } .bi-rss-fill::before { content: "\f521"; } .bi-rss::before { content: "\f522"; } .bi-rulers::before { content: "\f523"; } .bi-save-fill::before { content: "\f524"; } .bi-save::before { content: "\f525"; } .bi-save2-fill::before { content: "\f526"; } .bi-save2::before { content: "\f527"; } .bi-scissors::before { content: "\f528"; } .bi-screwdriver::before { content: "\f529"; } .bi-search::before { content: "\f52a"; } .bi-segmented-nav::before { content: "\f52b"; } .bi-server::before { content: "\f52c"; } .bi-share-fill::before { content: "\f52d"; } .bi-share::before { content: "\f52e"; } .bi-shield-check::before { content: "\f52f"; } .bi-shield-exclamation::before { content: "\f530"; } .bi-shield-fill-check::before { content: "\f531"; } .bi-shield-fill-exclamation::before { content: "\f532"; } .bi-shield-fill-minus::before { content: "\f533"; } .bi-shield-fill-plus::before { content: "\f534"; } .bi-shield-fill-x::before { content: "\f535"; } .bi-shield-fill::before { content: "\f536"; } .bi-shield-lock-fill::before { content: "\f537"; } .bi-shield-lock::before { content: "\f538"; } .bi-shield-minus::before { content: "\f539"; } .bi-shield-plus::before { content: "\f53a"; } .bi-shield-shaded::before { content: "\f53b"; } .bi-shield-slash-fill::before { content: "\f53c"; } .bi-shield-slash::before { content: "\f53d"; } .bi-shield-x::before { content: "\f53e"; } .bi-shield::before { content: "\f53f"; } .bi-shift-fill::before { content: "\f540"; } .bi-shift::before { content: "\f541"; } .bi-shop-window::before { content: "\f542"; } .bi-shop::before { content: "\f543"; } .bi-shuffle::before { content: "\f544"; } .bi-signpost-2-fill::before { content: "\f545"; } .bi-signpost-2::before { content: "\f546"; } .bi-signpost-fill::before { content: "\f547"; } .bi-signpost-split-fill::before { content: "\f548"; } .bi-signpost-split::before { content: "\f549"; } .bi-signpost::before { content: "\f54a"; } .bi-sim-fill::before { content: "\f54b"; } .bi-sim::before { content: "\f54c"; } .bi-skip-backward-btn-fill::before { content: "\f54d"; } .bi-skip-backward-btn::before { content: "\f54e"; } .bi-skip-backward-circle-fill::before { content: "\f54f"; } .bi-skip-backward-circle::before { content: "\f550"; } .bi-skip-backward-fill::before { content: "\f551"; } .bi-skip-backward::before { content: "\f552"; } .bi-skip-end-btn-fill::before { content: "\f553"; } .bi-skip-end-btn::before { content: "\f554"; } .bi-skip-end-circle-fill::before { content: "\f555"; } .bi-skip-end-circle::before { content: "\f556"; } .bi-skip-end-fill::before { content: "\f557"; } .bi-skip-end::before { content: "\f558"; } .bi-skip-forward-btn-fill::before { content: "\f559"; } .bi-skip-forward-btn::before { content: "\f55a"; } .bi-skip-forward-circle-fill::before { content: "\f55b"; } .bi-skip-forward-circle::before { content: "\f55c"; } .bi-skip-forward-fill::before { content: "\f55d"; } .bi-skip-forward::before { content: "\f55e"; } .bi-skip-start-btn-fill::before { content: "\f55f"; } .bi-skip-start-btn::before { content: "\f560"; } .bi-skip-start-circle-fill::before { content: "\f561"; } .bi-skip-start-circle::before { content: "\f562"; } .bi-skip-start-fill::before { content: "\f563"; } .bi-skip-start::before { content: "\f564"; } .bi-slack::before { content: "\f565"; } .bi-slash-circle-fill::before { content: "\f566"; } .bi-slash-circle::before { content: "\f567"; } .bi-slash-square-fill::before { content: "\f568"; } .bi-slash-square::before { content: "\f569"; } .bi-slash::before { content: "\f56a"; } .bi-sliders::before { content: "\f56b"; } .bi-smartwatch::before { content: "\f56c"; } .bi-snow::before { content: "\f56d"; } .bi-snow2::before { content: "\f56e"; } .bi-snow3::before { content: "\f56f"; } .bi-sort-alpha-down-alt::before { content: "\f570"; } .bi-sort-alpha-down::before { content: "\f571"; } .bi-sort-alpha-up-alt::before { content: "\f572"; } .bi-sort-alpha-up::before { content: "\f573"; } .bi-sort-down-alt::before { content: "\f574"; } .bi-sort-down::before { content: "\f575"; } .bi-sort-numeric-down-alt::before { content: "\f576"; } .bi-sort-numeric-down::before { content: "\f577"; } .bi-sort-numeric-up-alt::before { content: "\f578"; } .bi-sort-numeric-up::before { content: "\f579"; } .bi-sort-up-alt::before { content: "\f57a"; } .bi-sort-up::before { content: "\f57b"; } .bi-soundwave::before { content: "\f57c"; } .bi-speaker-fill::before { content: "\f57d"; } .bi-speaker::before { content: "\f57e"; } .bi-speedometer::before { content: "\f57f"; } .bi-speedometer2::before { content: "\f580"; } .bi-spellcheck::before { content: "\f581"; } .bi-square-fill::before { content: "\f582"; } .bi-square-half::before { content: "\f583"; } .bi-square::before { content: "\f584"; } .bi-stack::before { content: "\f585"; } .bi-star-fill::before { content: "\f586"; } .bi-star-half::before { content: "\f587"; } .bi-star::before { content: "\f588"; } .bi-stars::before { content: "\f589"; } .bi-stickies-fill::before { content: "\f58a"; } .bi-stickies::before { content: "\f58b"; } .bi-sticky-fill::before { content: "\f58c"; } .bi-sticky::before { content: "\f58d"; } .bi-stop-btn-fill::before { content: "\f58e"; } .bi-stop-btn::before { content: "\f58f"; } .bi-stop-circle-fill::before { content: "\f590"; } .bi-stop-circle::before { content: "\f591"; } .bi-stop-fill::before { content: "\f592"; } .bi-stop::before { content: "\f593"; } .bi-stoplights-fill::before { content: "\f594"; } .bi-stoplights::before { content: "\f595"; } .bi-stopwatch-fill::before { content: "\f596"; } .bi-stopwatch::before { content: "\f597"; } .bi-subtract::before { content: "\f598"; } .bi-suit-club-fill::before { content: "\f599"; } .bi-suit-club::before { content: "\f59a"; } .bi-suit-diamond-fill::before { content: "\f59b"; } .bi-suit-diamond::before { content: "\f59c"; } .bi-suit-heart-fill::before { content: "\f59d"; } .bi-suit-heart::before { content: "\f59e"; } .bi-suit-spade-fill::before { content: "\f59f"; } .bi-suit-spade::before { content: "\f5a0"; } .bi-sun-fill::before { content: "\f5a1"; } .bi-sun::before { content: "\f5a2"; } .bi-sunglasses::before { content: "\f5a3"; } .bi-sunrise-fill::before { content: "\f5a4"; } .bi-sunrise::before { content: "\f5a5"; } .bi-sunset-fill::before { content: "\f5a6"; } .bi-sunset::before { content: "\f5a7"; } .bi-symmetry-horizontal::before { content: "\f5a8"; } .bi-symmetry-vertical::before { content: "\f5a9"; } .bi-table::before { content: "\f5aa"; } .bi-tablet-fill::before { content: "\f5ab"; } .bi-tablet-landscape-fill::before { content: "\f5ac"; } .bi-tablet-landscape::before { content: "\f5ad"; } .bi-tablet::before { content: "\f5ae"; } .bi-tag-fill::before { content: "\f5af"; } .bi-tag::before { content: "\f5b0"; } .bi-tags-fill::before { content: "\f5b1"; } .bi-tags::before { content: "\f5b2"; } .bi-telegram::before { content: "\f5b3"; } .bi-telephone-fill::before { content: "\f5b4"; } .bi-telephone-forward-fill::before { content: "\f5b5"; } .bi-telephone-forward::before { content: "\f5b6"; } .bi-telephone-inbound-fill::before { content: "\f5b7"; } .bi-telephone-inbound::before { content: "\f5b8"; } .bi-telephone-minus-fill::before { content: "\f5b9"; } .bi-telephone-minus::before { content: "\f5ba"; } .bi-telephone-outbound-fill::before { content: "\f5bb"; } .bi-telephone-outbound::before { content: "\f5bc"; } .bi-telephone-plus-fill::before { content: "\f5bd"; } .bi-telephone-plus::before { content: "\f5be"; } .bi-telephone-x-fill::before { content: "\f5bf"; } .bi-telephone-x::before { content: "\f5c0"; } .bi-telephone::before { content: "\f5c1"; } .bi-terminal-fill::before { content: "\f5c2"; } .bi-terminal::before { content: "\f5c3"; } .bi-text-center::before { content: "\f5c4"; } .bi-text-indent-left::before { content: "\f5c5"; } .bi-text-indent-right::before { content: "\f5c6"; } .bi-text-left::before { content: "\f5c7"; } .bi-text-paragraph::before { content: "\f5c8"; } .bi-text-right::before { content: "\f5c9"; } .bi-textarea-resize::before { content: "\f5ca"; } .bi-textarea-t::before { content: "\f5cb"; } .bi-textarea::before { content: "\f5cc"; } .bi-thermometer-half::before { content: "\f5cd"; } .bi-thermometer-high::before { content: "\f5ce"; } .bi-thermometer-low::before { content: "\f5cf"; } .bi-thermometer-snow::before { content: "\f5d0"; } .bi-thermometer-sun::before { content: "\f5d1"; } .bi-thermometer::before { content: "\f5d2"; } .bi-three-dots-vertical::before { content: "\f5d3"; } .bi-three-dots::before { content: "\f5d4"; } .bi-toggle-off::before { content: "\f5d5"; } .bi-toggle-on::before { content: "\f5d6"; } .bi-toggle2-off::before { content: "\f5d7"; } .bi-toggle2-on::before { content: "\f5d8"; } .bi-toggles::before { content: "\f5d9"; } .bi-toggles2::before { content: "\f5da"; } .bi-tools::before { content: "\f5db"; } .bi-tornado::before { content: "\f5dc"; } .bi-trash-fill::before { content: "\f5dd"; } .bi-trash::before { content: "\f5de"; } .bi-trash2-fill::before { content: "\f5df"; } .bi-trash2::before { content: "\f5e0"; } .bi-tree-fill::before { content: "\f5e1"; } .bi-tree::before { content: "\f5e2"; } .bi-triangle-fill::before { content: "\f5e3"; } .bi-triangle-half::before { content: "\f5e4"; } .bi-triangle::before { content: "\f5e5"; } .bi-trophy-fill::before { content: "\f5e6"; } .bi-trophy::before { content: "\f5e7"; } .bi-tropical-storm::before { content: "\f5e8"; } .bi-truck-flatbed::before { content: "\f5e9"; } .bi-truck::before { content: "\f5ea"; } .bi-tsunami::before { content: "\f5eb"; } .bi-tv-fill::before { content: "\f5ec"; } .bi-tv::before { content: "\f5ed"; } .bi-twitch::before { content: "\f5ee"; } .bi-twitter::before { content: "\f5ef"; } .bi-type-bold::before { content: "\f5f0"; } .bi-type-h1::before { content: "\f5f1"; } .bi-type-h2::before { content: "\f5f2"; } .bi-type-h3::before { content: "\f5f3"; } .bi-type-italic::before { content: "\f5f4"; } .bi-type-strikethrough::before { content: "\f5f5"; } .bi-type-underline::before { content: "\f5f6"; } .bi-type::before { content: "\f5f7"; } .bi-ui-checks-grid::before { content: "\f5f8"; } .bi-ui-checks::before { content: "\f5f9"; } .bi-ui-radios-grid::before { content: "\f5fa"; } .bi-ui-radios::before { content: "\f5fb"; } .bi-umbrella-fill::before { content: "\f5fc"; } .bi-umbrella::before { content: "\f5fd"; } .bi-union::before { content: "\f5fe"; } .bi-unlock-fill::before { content: "\f5ff"; } .bi-unlock::before { content: "\f600"; } .bi-upc-scan::before { content: "\f601"; } .bi-upc::before { content: "\f602"; } .bi-upload::before { content: "\f603"; } .bi-vector-pen::before { content: "\f604"; } .bi-view-list::before { content: "\f605"; } .bi-view-stacked::before { content: "\f606"; } .bi-vinyl-fill::before { content: "\f607"; } .bi-vinyl::before { content: "\f608"; } .bi-voicemail::before { content: "\f609"; } .bi-volume-down-fill::before { content: "\f60a"; } .bi-volume-down::before { content: "\f60b"; } .bi-volume-mute-fill::before { content: "\f60c"; } .bi-volume-mute::before { content: "\f60d"; } .bi-volume-off-fill::before { content: "\f60e"; } .bi-volume-off::before { content: "\f60f"; } .bi-volume-up-fill::before { content: "\f610"; } .bi-volume-up::before { content: "\f611"; } .bi-vr::before { content: "\f612"; } .bi-wallet-fill::before { content: "\f613"; } .bi-wallet::before { content: "\f614"; } .bi-wallet2::before { content: "\f615"; } .bi-watch::before { content: "\f616"; } .bi-water::before { content: "\f617"; } .bi-whatsapp::before { content: "\f618"; } .bi-wifi-1::before { content: "\f619"; } .bi-wifi-2::before { content: "\f61a"; } .bi-wifi-off::before { content: "\f61b"; } .bi-wifi::before { content: "\f61c"; } .bi-wind::before { content: "\f61d"; } .bi-window-dock::before { content: "\f61e"; } .bi-window-sidebar::before { content: "\f61f"; } .bi-window::before { content: "\f620"; } .bi-wrench::before { content: "\f621"; } .bi-x-circle-fill::before { content: "\f622"; } .bi-x-circle::before { content: "\f623"; } .bi-x-diamond-fill::before { content: "\f624"; } .bi-x-diamond::before { content: "\f625"; } .bi-x-octagon-fill::before { content: "\f626"; } .bi-x-octagon::before { content: "\f627"; } .bi-x-square-fill::before { content: "\f628"; } .bi-x-square::before { content: "\f629"; } .bi-x::before { content: "\f62a"; } .bi-youtube::before { content: "\f62b"; } .bi-zoom-in::before { content: "\f62c"; } .bi-zoom-out::before { content: "\f62d"; } .bi-bank::before { content: "\f62e"; } .bi-bank2::before { content: "\f62f"; } .bi-bell-slash-fill::before { content: "\f630"; } .bi-bell-slash::before { content: "\f631"; } .bi-cash-coin::before { content: "\f632"; } .bi-check-lg::before { content: "\f633"; } .bi-coin::before { content: "\f634"; } .bi-currency-bitcoin::before { content: "\f635"; } .bi-currency-dollar::before { content: "\f636"; } .bi-currency-euro::before { content: "\f637"; } .bi-currency-exchange::before { content: "\f638"; } .bi-currency-pound::before { content: "\f639"; } .bi-currency-yen::before { content: "\f63a"; } .bi-dash-lg::before { content: "\f63b"; } .bi-exclamation-lg::before { content: "\f63c"; } .bi-file-earmark-pdf-fill::before { content: "\f63d"; } .bi-file-earmark-pdf::before { content: "\f63e"; } .bi-file-pdf-fill::before { content: "\f63f"; } .bi-file-pdf::before { content: "\f640"; } .bi-gender-ambiguous::before { content: "\f641"; } .bi-gender-female::before { content: "\f642"; } .bi-gender-male::before { content: "\f643"; } .bi-gender-trans::before { content: "\f644"; } .bi-headset-vr::before { content: "\f645"; } .bi-info-lg::before { content: "\f646"; } .bi-mastodon::before { content: "\f647"; } .bi-messenger::before { content: "\f648"; } .bi-piggy-bank-fill::before { content: "\f649"; } .bi-piggy-bank::before { content: "\f64a"; } .bi-pin-map-fill::before { content: "\f64b"; } .bi-pin-map::before { content: "\f64c"; } .bi-plus-lg::before { content: "\f64d"; } .bi-question-lg::before { content: "\f64e"; } .bi-recycle::before { content: "\f64f"; } .bi-reddit::before { content: "\f650"; } .bi-safe-fill::before { content: "\f651"; } .bi-safe2-fill::before { content: "\f652"; } .bi-safe2::before { content: "\f653"; } .bi-sd-card-fill::before { content: "\f654"; } .bi-sd-card::before { content: "\f655"; } .bi-skype::before { content: "\f656"; } .bi-slash-lg::before { content: "\f657"; } .bi-translate::before { content: "\f658"; } .bi-x-lg::before { content: "\f659"; } .bi-safe::before { content: "\f65a"; } .bi-apple::before { content: "\f65b"; } .bi-microsoft::before { content: "\f65d"; } .bi-windows::before { content: "\f65e"; } .bi-behance::before { content: "\f65c"; } .bi-dribbble::before { content: "\f65f"; } .bi-line::before { content: "\f660"; } .bi-medium::before { content: "\f661"; } .bi-paypal::before { content: "\f662"; } .bi-pinterest::before { content: "\f663"; } .bi-signal::before { content: "\f664"; } .bi-snapchat::before { content: "\f665"; } .bi-spotify::before { content: "\f666"; } .bi-stack-overflow::before { content: "\f667"; } .bi-strava::before { content: "\f668"; } .bi-wordpress::before { content: "\f669"; } .bi-vimeo::before { content: "\f66a"; } .bi-activity::before { content: "\f66b"; } .bi-easel2-fill::before { content: "\f66c"; } .bi-easel2::before { content: "\f66d"; } .bi-easel3-fill::before { content: "\f66e"; } .bi-easel3::before { content: "\f66f"; } .bi-fan::before { content: "\f670"; } .bi-fingerprint::before { content: "\f671"; } .bi-graph-down-arrow::before { content: "\f672"; } .bi-graph-up-arrow::before { content: "\f673"; } .bi-hypnotize::before { content: "\f674"; } .bi-magic::before { content: "\f675"; } .bi-person-rolodex::before { content: "\f676"; } .bi-person-video::before { content: "\f677"; } .bi-person-video2::before { content: "\f678"; } .bi-person-video3::before { content: "\f679"; } .bi-person-workspace::before { content: "\f67a"; } .bi-radioactive::before { content: "\f67b"; } .bi-webcam-fill::before { content: "\f67c"; } .bi-webcam::before { content: "\f67d"; } .bi-yin-yang::before { content: "\f67e"; } .bi-bandaid-fill::before { content: "\f680"; } .bi-bandaid::before { content: "\f681"; } .bi-bluetooth::before { content: "\f682"; } .bi-body-text::before { content: "\f683"; } .bi-boombox::before { content: "\f684"; } .bi-boxes::before { content: "\f685"; } .bi-dpad-fill::before { content: "\f686"; } .bi-dpad::before { content: "\f687"; } .bi-ear-fill::before { content: "\f688"; } .bi-ear::before { content: "\f689"; } .bi-envelope-check-fill::before { content: "\f68b"; } .bi-envelope-check::before { content: "\f68c"; } .bi-envelope-dash-fill::before { content: "\f68e"; } .bi-envelope-dash::before { content: "\f68f"; } .bi-envelope-exclamation-fill::before { content: "\f691"; } .bi-envelope-exclamation::before { content: "\f692"; } .bi-envelope-plus-fill::before { content: "\f693"; } .bi-envelope-plus::before { content: "\f694"; } .bi-envelope-slash-fill::before { content: "\f696"; } .bi-envelope-slash::before { content: "\f697"; } .bi-envelope-x-fill::before { content: "\f699"; } .bi-envelope-x::before { content: "\f69a"; } .bi-explicit-fill::before { content: "\f69b"; } .bi-explicit::before { content: "\f69c"; } .bi-git::before { content: "\f69d"; } .bi-infinity::before { content: "\f69e"; } .bi-list-columns-reverse::before { content: "\f69f"; } .bi-list-columns::before { content: "\f6a0"; } .bi-meta::before { content: "\f6a1"; } .bi-nintendo-switch::before { content: "\f6a4"; } .bi-pc-display-horizontal::before { content: "\f6a5"; } .bi-pc-display::before { content: "\f6a6"; } .bi-pc-horizontal::before { content: "\f6a7"; } .bi-pc::before { content: "\f6a8"; } .bi-playstation::before { content: "\f6a9"; } .bi-plus-slash-minus::before { content: "\f6aa"; } .bi-projector-fill::before { content: "\f6ab"; } .bi-projector::before { content: "\f6ac"; } .bi-qr-code-scan::before { content: "\f6ad"; } .bi-qr-code::before { content: "\f6ae"; } .bi-quora::before { content: "\f6af"; } .bi-quote::before { content: "\f6b0"; } .bi-robot::before { content: "\f6b1"; } .bi-send-check-fill::before { content: "\f6b2"; } .bi-send-check::before { content: "\f6b3"; } .bi-send-dash-fill::before { content: "\f6b4"; } .bi-send-dash::before { content: "\f6b5"; } .bi-send-exclamation-fill::before { content: "\f6b7"; } .bi-send-exclamation::before { content: "\f6b8"; } .bi-send-fill::before { content: "\f6b9"; } .bi-send-plus-fill::before { content: "\f6ba"; } .bi-send-plus::before { content: "\f6bb"; } .bi-send-slash-fill::before { content: "\f6bc"; } .bi-send-slash::before { content: "\f6bd"; } .bi-send-x-fill::before { content: "\f6be"; } .bi-send-x::before { content: "\f6bf"; } .bi-send::before { content: "\f6c0"; } .bi-steam::before { content: "\f6c1"; } .bi-terminal-dash::before { content: "\f6c3"; } .bi-terminal-plus::before { content: "\f6c4"; } .bi-terminal-split::before { content: "\f6c5"; } .bi-ticket-detailed-fill::before { content: "\f6c6"; } .bi-ticket-detailed::before { content: "\f6c7"; } .bi-ticket-fill::before { content: "\f6c8"; } .bi-ticket-perforated-fill::before { content: "\f6c9"; } .bi-ticket-perforated::before { content: "\f6ca"; } .bi-ticket::before { content: "\f6cb"; } .bi-tiktok::before { content: "\f6cc"; } .bi-window-dash::before { content: "\f6cd"; } .bi-window-desktop::before { content: "\f6ce"; } .bi-window-fullscreen::before { content: "\f6cf"; } .bi-window-plus::before { content: "\f6d0"; } .bi-window-split::before { content: "\f6d1"; } .bi-window-stack::before { content: "\f6d2"; } .bi-window-x::before { content: "\f6d3"; } .bi-xbox::before { content: "\f6d4"; } .bi-ethernet::before { content: "\f6d5"; } .bi-hdmi-fill::before { content: "\f6d6"; } .bi-hdmi::before { content: "\f6d7"; } .bi-usb-c-fill::before { content: "\f6d8"; } .bi-usb-c::before { content: "\f6d9"; } .bi-usb-fill::before { content: "\f6da"; } .bi-usb-plug-fill::before { content: "\f6db"; } .bi-usb-plug::before { content: "\f6dc"; } .bi-usb-symbol::before { content: "\f6dd"; } .bi-usb::before { content: "\f6de"; } .bi-boombox-fill::before { content: "\f6df"; } .bi-displayport::before { content: "\f6e1"; } .bi-gpu-card::before { content: "\f6e2"; } .bi-memory::before { content: "\f6e3"; } .bi-modem-fill::before { content: "\f6e4"; } .bi-modem::before { content: "\f6e5"; } .bi-motherboard-fill::before { content: "\f6e6"; } .bi-motherboard::before { content: "\f6e7"; } .bi-optical-audio-fill::before { content: "\f6e8"; } .bi-optical-audio::before { content: "\f6e9"; } .bi-pci-card::before { content: "\f6ea"; } .bi-router-fill::before { content: "\f6eb"; } .bi-router::before { content: "\f6ec"; } .bi-thunderbolt-fill::before { content: "\f6ef"; } .bi-thunderbolt::before { content: "\f6f0"; } .bi-usb-drive-fill::before { content: "\f6f1"; } .bi-usb-drive::before { content: "\f6f2"; } .bi-usb-micro-fill::before { content: "\f6f3"; } .bi-usb-micro::before { content: "\f6f4"; } .bi-usb-mini-fill::before { content: "\f6f5"; } .bi-usb-mini::before { content: "\f6f6"; } .bi-cloud-haze2::before { content: "\f6f7"; } .bi-device-hdd-fill::before { content: "\f6f8"; } .bi-device-hdd::before { content: "\f6f9"; } .bi-device-ssd-fill::before { content: "\f6fa"; } .bi-device-ssd::before { content: "\f6fb"; } .bi-displayport-fill::before { content: "\f6fc"; } .bi-mortarboard-fill::before { content: "\f6fd"; } .bi-mortarboard::before { content: "\f6fe"; } .bi-terminal-x::before { content: "\f6ff"; } .bi-arrow-through-heart-fill::before { content: "\f700"; } .bi-arrow-through-heart::before { content: "\f701"; } .bi-badge-sd-fill::before { content: "\f702"; } .bi-badge-sd::before { content: "\f703"; } .bi-bag-heart-fill::before { content: "\f704"; } .bi-bag-heart::before { content: "\f705"; } .bi-balloon-fill::before { content: "\f706"; } .bi-balloon-heart-fill::before { content: "\f707"; } .bi-balloon-heart::before { content: "\f708"; } .bi-balloon::before { content: "\f709"; } .bi-box2-fill::before { content: "\f70a"; } .bi-box2-heart-fill::before { content: "\f70b"; } .bi-box2-heart::before { content: "\f70c"; } .bi-box2::before { content: "\f70d"; } .bi-braces-asterisk::before { content: "\f70e"; } .bi-calendar-heart-fill::before { content: "\f70f"; } .bi-calendar-heart::before { content: "\f710"; } .bi-calendar2-heart-fill::before { content: "\f711"; } .bi-calendar2-heart::before { content: "\f712"; } .bi-chat-heart-fill::before { content: "\f713"; } .bi-chat-heart::before { content: "\f714"; } .bi-chat-left-heart-fill::before { content: "\f715"; } .bi-chat-left-heart::before { content: "\f716"; } .bi-chat-right-heart-fill::before { content: "\f717"; } .bi-chat-right-heart::before { content: "\f718"; } .bi-chat-square-heart-fill::before { content: "\f719"; } .bi-chat-square-heart::before { content: "\f71a"; } .bi-clipboard-check-fill::before { content: "\f71b"; } .bi-clipboard-data-fill::before { content: "\f71c"; } .bi-clipboard-fill::before { content: "\f71d"; } .bi-clipboard-heart-fill::before { content: "\f71e"; } .bi-clipboard-heart::before { content: "\f71f"; } .bi-clipboard-minus-fill::before { content: "\f720"; } .bi-clipboard-plus-fill::before { content: "\f721"; } .bi-clipboard-pulse::before { content: "\f722"; } .bi-clipboard-x-fill::before { content: "\f723"; } .bi-clipboard2-check-fill::before { content: "\f724"; } .bi-clipboard2-check::before { content: "\f725"; } .bi-clipboard2-data-fill::before { content: "\f726"; } .bi-clipboard2-data::before { content: "\f727"; } .bi-clipboard2-fill::before { content: "\f728"; } .bi-clipboard2-heart-fill::before { content: "\f729"; } .bi-clipboard2-heart::before { content: "\f72a"; } .bi-clipboard2-minus-fill::before { content: "\f72b"; } .bi-clipboard2-minus::before { content: "\f72c"; } .bi-clipboard2-plus-fill::before { content: "\f72d"; } .bi-clipboard2-plus::before { content: "\f72e"; } .bi-clipboard2-pulse-fill::before { content: "\f72f"; } .bi-clipboard2-pulse::before { content: "\f730"; } .bi-clipboard2-x-fill::before { content: "\f731"; } .bi-clipboard2-x::before { content: "\f732"; } .bi-clipboard2::before { content: "\f733"; } .bi-emoji-kiss-fill::before { content: "\f734"; } .bi-emoji-kiss::before { content: "\f735"; } .bi-envelope-heart-fill::before { content: "\f736"; } .bi-envelope-heart::before { content: "\f737"; } .bi-envelope-open-heart-fill::before { content: "\f738"; } .bi-envelope-open-heart::before { content: "\f739"; } .bi-envelope-paper-fill::before { content: "\f73a"; } .bi-envelope-paper-heart-fill::before { content: "\f73b"; } .bi-envelope-paper-heart::before { content: "\f73c"; } .bi-envelope-paper::before { content: "\f73d"; } .bi-filetype-aac::before { content: "\f73e"; } .bi-filetype-ai::before { content: "\f73f"; } .bi-filetype-bmp::before { content: "\f740"; } .bi-filetype-cs::before { content: "\f741"; } .bi-filetype-css::before { content: "\f742"; } .bi-filetype-csv::before { content: "\f743"; } .bi-filetype-doc::before { content: "\f744"; } .bi-filetype-docx::before { content: "\f745"; } .bi-filetype-exe::before { content: "\f746"; } .bi-filetype-gif::before { content: "\f747"; } .bi-filetype-heic::before { content: "\f748"; } .bi-filetype-html::before { content: "\f749"; } .bi-filetype-java::before { content: "\f74a"; } .bi-filetype-jpg::before { content: "\f74b"; } .bi-filetype-js::before { content: "\f74c"; } .bi-filetype-jsx::before { content: "\f74d"; } .bi-filetype-key::before { content: "\f74e"; } .bi-filetype-m4p::before { content: "\f74f"; } .bi-filetype-md::before { content: "\f750"; } .bi-filetype-mdx::before { content: "\f751"; } .bi-filetype-mov::before { content: "\f752"; } .bi-filetype-mp3::before { content: "\f753"; } .bi-filetype-mp4::before { content: "\f754"; } .bi-filetype-otf::before { content: "\f755"; } .bi-filetype-pdf::before { content: "\f756"; } .bi-filetype-php::before { content: "\f757"; } .bi-filetype-png::before { content: "\f758"; } .bi-filetype-ppt::before { content: "\f75a"; } .bi-filetype-psd::before { content: "\f75b"; } .bi-filetype-py::before { content: "\f75c"; } .bi-filetype-raw::before { content: "\f75d"; } .bi-filetype-rb::before { content: "\f75e"; } .bi-filetype-sass::before { content: "\f75f"; } .bi-filetype-scss::before { content: "\f760"; } .bi-filetype-sh::before { content: "\f761"; } .bi-filetype-svg::before { content: "\f762"; } .bi-filetype-tiff::before { content: "\f763"; } .bi-filetype-tsx::before { content: "\f764"; } .bi-filetype-ttf::before { content: "\f765"; } .bi-filetype-txt::before { content: "\f766"; } .bi-filetype-wav::before { content: "\f767"; } .bi-filetype-woff::before { content: "\f768"; } .bi-filetype-xls::before { content: "\f76a"; } .bi-filetype-xml::before { content: "\f76b"; } .bi-filetype-yml::before { content: "\f76c"; } .bi-heart-arrow::before { content: "\f76d"; } .bi-heart-pulse-fill::before { content: "\f76e"; } .bi-heart-pulse::before { content: "\f76f"; } .bi-heartbreak-fill::before { content: "\f770"; } .bi-heartbreak::before { content: "\f771"; } .bi-hearts::before { content: "\f772"; } .bi-hospital-fill::before { content: "\f773"; } .bi-hospital::before { content: "\f774"; } .bi-house-heart-fill::before { content: "\f775"; } .bi-house-heart::before { content: "\f776"; } .bi-incognito::before { content: "\f777"; } .bi-magnet-fill::before { content: "\f778"; } .bi-magnet::before { content: "\f779"; } .bi-person-heart::before { content: "\f77a"; } .bi-person-hearts::before { content: "\f77b"; } .bi-phone-flip::before { content: "\f77c"; } .bi-plugin::before { content: "\f77d"; } .bi-postage-fill::before { content: "\f77e"; } .bi-postage-heart-fill::before { content: "\f77f"; } .bi-postage-heart::before { content: "\f780"; } .bi-postage::before { content: "\f781"; } .bi-postcard-fill::before { content: "\f782"; } .bi-postcard-heart-fill::before { content: "\f783"; } .bi-postcard-heart::before { content: "\f784"; } .bi-postcard::before { content: "\f785"; } .bi-search-heart-fill::before { content: "\f786"; } .bi-search-heart::before { content: "\f787"; } .bi-sliders2-vertical::before { content: "\f788"; } .bi-sliders2::before { content: "\f789"; } .bi-trash3-fill::before { content: "\f78a"; } .bi-trash3::before { content: "\f78b"; } .bi-valentine::before { content: "\f78c"; } .bi-valentine2::before { content: "\f78d"; } .bi-wrench-adjustable-circle-fill::before { content: "\f78e"; } .bi-wrench-adjustable-circle::before { content: "\f78f"; } .bi-wrench-adjustable::before { content: "\f790"; } .bi-filetype-json::before { content: "\f791"; } .bi-filetype-pptx::before { content: "\f792"; } .bi-filetype-xlsx::before { content: "\f793"; } .bi-1-circle-fill::before { content: "\f796"; } .bi-1-circle::before { content: "\f797"; } .bi-1-square-fill::before { content: "\f798"; } .bi-1-square::before { content: "\f799"; } .bi-2-circle-fill::before { content: "\f79c"; } .bi-2-circle::before { content: "\f79d"; } .bi-2-square-fill::before { content: "\f79e"; } .bi-2-square::before { content: "\f79f"; } .bi-3-circle-fill::before { content: "\f7a2"; } .bi-3-circle::before { content: "\f7a3"; } .bi-3-square-fill::before { content: "\f7a4"; } .bi-3-square::before { content: "\f7a5"; } .bi-4-circle-fill::before { content: "\f7a8"; } .bi-4-circle::before { content: "\f7a9"; } .bi-4-square-fill::before { content: "\f7aa"; } .bi-4-square::before { content: "\f7ab"; } .bi-5-circle-fill::before { content: "\f7ae"; } .bi-5-circle::before { content: "\f7af"; } .bi-5-square-fill::before { content: "\f7b0"; } .bi-5-square::before { content: "\f7b1"; } .bi-6-circle-fill::before { content: "\f7b4"; } .bi-6-circle::before { content: "\f7b5"; } .bi-6-square-fill::before { content: "\f7b6"; } .bi-6-square::before { content: "\f7b7"; } .bi-7-circle-fill::before { content: "\f7ba"; } .bi-7-circle::before { content: "\f7bb"; } .bi-7-square-fill::before { content: "\f7bc"; } .bi-7-square::before { content: "\f7bd"; } .bi-8-circle-fill::before { content: "\f7c0"; } .bi-8-circle::before { content: "\f7c1"; } .bi-8-square-fill::before { content: "\f7c2"; } .bi-8-square::before { content: "\f7c3"; } .bi-9-circle-fill::before { content: "\f7c6"; } .bi-9-circle::before { content: "\f7c7"; } .bi-9-square-fill::before { content: "\f7c8"; } .bi-9-square::before { content: "\f7c9"; } .bi-airplane-engines-fill::before { content: "\f7ca"; } .bi-airplane-engines::before { content: "\f7cb"; } .bi-airplane-fill::before { content: "\f7cc"; } .bi-airplane::before { content: "\f7cd"; } .bi-alexa::before { content: "\f7ce"; } .bi-alipay::before { content: "\f7cf"; } .bi-android::before { content: "\f7d0"; } .bi-android2::before { content: "\f7d1"; } .bi-box-fill::before { content: "\f7d2"; } .bi-box-seam-fill::before { content: "\f7d3"; } .bi-browser-chrome::before { content: "\f7d4"; } .bi-browser-edge::before { content: "\f7d5"; } .bi-browser-firefox::before { content: "\f7d6"; } .bi-browser-safari::before { content: "\f7d7"; } .bi-c-circle-fill::before { content: "\f7da"; } .bi-c-circle::before { content: "\f7db"; } .bi-c-square-fill::before { content: "\f7dc"; } .bi-c-square::before { content: "\f7dd"; } .bi-capsule-pill::before { content: "\f7de"; } .bi-capsule::before { content: "\f7df"; } .bi-car-front-fill::before { content: "\f7e0"; } .bi-car-front::before { content: "\f7e1"; } .bi-cassette-fill::before { content: "\f7e2"; } .bi-cassette::before { content: "\f7e3"; } .bi-cc-circle-fill::before { content: "\f7e6"; } .bi-cc-circle::before { content: "\f7e7"; } .bi-cc-square-fill::before { content: "\f7e8"; } .bi-cc-square::before { content: "\f7e9"; } .bi-cup-hot-fill::before { content: "\f7ea"; } .bi-cup-hot::before { content: "\f7eb"; } .bi-currency-rupee::before { content: "\f7ec"; } .bi-dropbox::before { content: "\f7ed"; } .bi-escape::before { content: "\f7ee"; } .bi-fast-forward-btn-fill::before { content: "\f7ef"; } .bi-fast-forward-btn::before { content: "\f7f0"; } .bi-fast-forward-circle-fill::before { content: "\f7f1"; } .bi-fast-forward-circle::before { content: "\f7f2"; } .bi-fast-forward-fill::before { content: "\f7f3"; } .bi-fast-forward::before { content: "\f7f4"; } .bi-filetype-sql::before { content: "\f7f5"; } .bi-fire::before { content: "\f7f6"; } .bi-google-play::before { content: "\f7f7"; } .bi-h-circle-fill::before { content: "\f7fa"; } .bi-h-circle::before { content: "\f7fb"; } .bi-h-square-fill::before { content: "\f7fc"; } .bi-h-square::before { content: "\f7fd"; } .bi-indent::before { content: "\f7fe"; } .bi-lungs-fill::before { content: "\f7ff"; } .bi-lungs::before { content: "\f800"; } .bi-microsoft-teams::before { content: "\f801"; } .bi-p-circle-fill::before { content: "\f804"; } .bi-p-circle::before { content: "\f805"; } .bi-p-square-fill::before { content: "\f806"; } .bi-p-square::before { content: "\f807"; } .bi-pass-fill::before { content: "\f808"; } .bi-pass::before { content: "\f809"; } .bi-prescription::before { content: "\f80a"; } .bi-prescription2::before { content: "\f80b"; } .bi-r-circle-fill::before { content: "\f80e"; } .bi-r-circle::before { content: "\f80f"; } .bi-r-square-fill::before { content: "\f810"; } .bi-r-square::before { content: "\f811"; } .bi-repeat-1::before { content: "\f812"; } .bi-repeat::before { content: "\f813"; } .bi-rewind-btn-fill::before { content: "\f814"; } .bi-rewind-btn::before { content: "\f815"; } .bi-rewind-circle-fill::before { content: "\f816"; } .bi-rewind-circle::before { content: "\f817"; } .bi-rewind-fill::before { content: "\f818"; } .bi-rewind::before { content: "\f819"; } .bi-train-freight-front-fill::before { content: "\f81a"; } .bi-train-freight-front::before { content: "\f81b"; } .bi-train-front-fill::before { content: "\f81c"; } .bi-train-front::before { content: "\f81d"; } .bi-train-lightrail-front-fill::before { content: "\f81e"; } .bi-train-lightrail-front::before { content: "\f81f"; } .bi-truck-front-fill::before { content: "\f820"; } .bi-truck-front::before { content: "\f821"; } .bi-ubuntu::before { content: "\f822"; } .bi-unindent::before { content: "\f823"; } .bi-unity::before { content: "\f824"; } .bi-universal-access-circle::before { content: "\f825"; } .bi-universal-access::before { content: "\f826"; } .bi-virus::before { content: "\f827"; } .bi-virus2::before { content: "\f828"; } .bi-wechat::before { content: "\f829"; } .bi-yelp::before { content: "\f82a"; } .bi-sign-stop-fill::before { content: "\f82b"; } .bi-sign-stop-lights-fill::before { content: "\f82c"; } .bi-sign-stop-lights::before { content: "\f82d"; } .bi-sign-stop::before { content: "\f82e"; } .bi-sign-turn-left-fill::before { content: "\f82f"; } .bi-sign-turn-left::before { content: "\f830"; } .bi-sign-turn-right-fill::before { content: "\f831"; } .bi-sign-turn-right::before { content: "\f832"; } .bi-sign-turn-slight-left-fill::before { content: "\f833"; } .bi-sign-turn-slight-left::before { content: "\f834"; } .bi-sign-turn-slight-right-fill::before { content: "\f835"; } .bi-sign-turn-slight-right::before { content: "\f836"; } .bi-sign-yield-fill::before { content: "\f837"; } .bi-sign-yield::before { content: "\f838"; } .bi-ev-station-fill::before { content: "\f839"; } .bi-ev-station::before { content: "\f83a"; } .bi-fuel-pump-diesel-fill::before { content: "\f83b"; } .bi-fuel-pump-diesel::before { content: "\f83c"; } .bi-fuel-pump-fill::before { content: "\f83d"; } .bi-fuel-pump::before { content: "\f83e"; } .bi-0-circle-fill::before { content: "\f83f"; } .bi-0-circle::before { content: "\f840"; } .bi-0-square-fill::before { content: "\f841"; } .bi-0-square::before { content: "\f842"; } .bi-rocket-fill::before { content: "\f843"; } .bi-rocket-takeoff-fill::before { content: "\f844"; } .bi-rocket-takeoff::before { content: "\f845"; } .bi-rocket::before { content: "\f846"; } .bi-stripe::before { content: "\f847"; } .bi-subscript::before { content: "\f848"; } .bi-superscript::before { content: "\f849"; } .bi-trello::before { content: "\f84a"; } .bi-envelope-at-fill::before { content: "\f84b"; } .bi-envelope-at::before { content: "\f84c"; } .bi-regex::before { content: "\f84d"; } .bi-text-wrap::before { content: "\f84e"; } .bi-sign-dead-end-fill::before { content: "\f84f"; } .bi-sign-dead-end::before { content: "\f850"; } .bi-sign-do-not-enter-fill::before { content: "\f851"; } .bi-sign-do-not-enter::before { content: "\f852"; } .bi-sign-intersection-fill::before { content: "\f853"; } .bi-sign-intersection-side-fill::before { content: "\f854"; } .bi-sign-intersection-side::before { content: "\f855"; } .bi-sign-intersection-t-fill::before { content: "\f856"; } .bi-sign-intersection-t::before { content: "\f857"; } .bi-sign-intersection-y-fill::before { content: "\f858"; } .bi-sign-intersection-y::before { content: "\f859"; } .bi-sign-intersection::before { content: "\f85a"; } .bi-sign-merge-left-fill::before { content: "\f85b"; } .bi-sign-merge-left::before { content: "\f85c"; } .bi-sign-merge-right-fill::before { content: "\f85d"; } .bi-sign-merge-right::before { content: "\f85e"; } .bi-sign-no-left-turn-fill::before { content: "\f85f"; } .bi-sign-no-left-turn::before { content: "\f860"; } .bi-sign-no-parking-fill::before { content: "\f861"; } .bi-sign-no-parking::before { content: "\f862"; } .bi-sign-no-right-turn-fill::before { content: "\f863"; } .bi-sign-no-right-turn::before { content: "\f864"; } .bi-sign-railroad-fill::before { content: "\f865"; } .bi-sign-railroad::before { content: "\f866"; } .bi-building-add::before { content: "\f867"; } .bi-building-check::before { content: "\f868"; } .bi-building-dash::before { content: "\f869"; } .bi-building-down::before { content: "\f86a"; } .bi-building-exclamation::before { content: "\f86b"; } .bi-building-fill-add::before { content: "\f86c"; } .bi-building-fill-check::before { content: "\f86d"; } .bi-building-fill-dash::before { content: "\f86e"; } .bi-building-fill-down::before { content: "\f86f"; } .bi-building-fill-exclamation::before { content: "\f870"; } .bi-building-fill-gear::before { content: "\f871"; } .bi-building-fill-lock::before { content: "\f872"; } .bi-building-fill-slash::before { content: "\f873"; } .bi-building-fill-up::before { content: "\f874"; } .bi-building-fill-x::before { content: "\f875"; } .bi-building-fill::before { content: "\f876"; } .bi-building-gear::before { content: "\f877"; } .bi-building-lock::before { content: "\f878"; } .bi-building-slash::before { content: "\f879"; } .bi-building-up::before { content: "\f87a"; } .bi-building-x::before { content: "\f87b"; } .bi-buildings-fill::before { content: "\f87c"; } .bi-buildings::before { content: "\f87d"; } .bi-bus-front-fill::before { content: "\f87e"; } .bi-bus-front::before { content: "\f87f"; } .bi-ev-front-fill::before { content: "\f880"; } .bi-ev-front::before { content: "\f881"; } .bi-globe-americas::before { content: "\f882"; } .bi-globe-asia-australia::before { content: "\f883"; } .bi-globe-central-south-asia::before { content: "\f884"; } .bi-globe-europe-africa::before { content: "\f885"; } .bi-house-add-fill::before { content: "\f886"; } .bi-house-add::before { content: "\f887"; } .bi-house-check-fill::before { content: "\f888"; } .bi-house-check::before { content: "\f889"; } .bi-house-dash-fill::before { content: "\f88a"; } .bi-house-dash::before { content: "\f88b"; } .bi-house-down-fill::before { content: "\f88c"; } .bi-house-down::before { content: "\f88d"; } .bi-house-exclamation-fill::before { content: "\f88e"; } .bi-house-exclamation::before { content: "\f88f"; } .bi-house-gear-fill::before { content: "\f890"; } .bi-house-gear::before { content: "\f891"; } .bi-house-lock-fill::before { content: "\f892"; } .bi-house-lock::before { content: "\f893"; } .bi-house-slash-fill::before { content: "\f894"; } .bi-house-slash::before { content: "\f895"; } .bi-house-up-fill::before { content: "\f896"; } .bi-house-up::before { content: "\f897"; } .bi-house-x-fill::before { content: "\f898"; } .bi-house-x::before { content: "\f899"; } .bi-person-add::before { content: "\f89a"; } .bi-person-down::before { content: "\f89b"; } .bi-person-exclamation::before { content: "\f89c"; } .bi-person-fill-add::before { content: "\f89d"; } .bi-person-fill-check::before { content: "\f89e"; } .bi-person-fill-dash::before { content: "\f89f"; } .bi-person-fill-down::before { content: "\f8a0"; } .bi-person-fill-exclamation::before { content: "\f8a1"; } .bi-person-fill-gear::before { content: "\f8a2"; } .bi-person-fill-lock::before { content: "\f8a3"; } .bi-person-fill-slash::before { content: "\f8a4"; } .bi-person-fill-up::before { content: "\f8a5"; } .bi-person-fill-x::before { content: "\f8a6"; } .bi-person-gear::before { content: "\f8a7"; } .bi-person-lock::before { content: "\f8a8"; } .bi-person-slash::before { content: "\f8a9"; } .bi-person-up::before { content: "\f8aa"; } .bi-scooter::before { content: "\f8ab"; } .bi-taxi-front-fill::before { content: "\f8ac"; } .bi-taxi-front::before { content: "\f8ad"; } .bi-amd::before { content: "\f8ae"; } .bi-database-add::before { content: "\f8af"; } .bi-database-check::before { content: "\f8b0"; } .bi-database-dash::before { content: "\f8b1"; } .bi-database-down::before { content: "\f8b2"; } .bi-database-exclamation::before { content: "\f8b3"; } .bi-database-fill-add::before { content: "\f8b4"; } .bi-database-fill-check::before { content: "\f8b5"; } .bi-database-fill-dash::before { content: "\f8b6"; } .bi-database-fill-down::before { content: "\f8b7"; } .bi-database-fill-exclamation::before { content: "\f8b8"; } .bi-database-fill-gear::before { content: "\f8b9"; } .bi-database-fill-lock::before { content: "\f8ba"; } .bi-database-fill-slash::before { content: "\f8bb"; } .bi-database-fill-up::before { content: "\f8bc"; } .bi-database-fill-x::before { content: "\f8bd"; } .bi-database-fill::before { content: "\f8be"; } .bi-database-gear::before { content: "\f8bf"; } .bi-database-lock::before { content: "\f8c0"; } .bi-database-slash::before { content: "\f8c1"; } .bi-database-up::before { content: "\f8c2"; } .bi-database-x::before { content: "\f8c3"; } .bi-database::before { content: "\f8c4"; } .bi-houses-fill::before { content: "\f8c5"; } .bi-houses::before { content: "\f8c6"; } .bi-nvidia::before { content: "\f8c7"; } .bi-person-vcard-fill::before { content: "\f8c8"; } .bi-person-vcard::before { content: "\f8c9"; } .bi-sina-weibo::before { content: "\f8ca"; } .bi-tencent-qq::before { content: "\f8cb"; } .bi-wikipedia::before { content: "\f8cc"; } .bi-alphabet-uppercase::before { content: "\f2a5"; } .bi-alphabet::before { content: "\f68a"; } .bi-amazon::before { content: "\f68d"; } .bi-arrows-collapse-vertical::before { content: "\f690"; } .bi-arrows-expand-vertical::before { content: "\f695"; } .bi-arrows-vertical::before { content: "\f698"; } .bi-arrows::before { content: "\f6a2"; } .bi-ban-fill::before { content: "\f6a3"; } .bi-ban::before { content: "\f6b6"; } .bi-bing::before { content: "\f6c2"; } .bi-cake::before { content: "\f6e0"; } .bi-cake2::before { content: "\f6ed"; } .bi-cookie::before { content: "\f6ee"; } .bi-copy::before { content: "\f759"; } .bi-crosshair::before { content: "\f769"; } .bi-crosshair2::before { content: "\f794"; } .bi-emoji-astonished-fill::before { content: "\f795"; } .bi-emoji-astonished::before { content: "\f79a"; } .bi-emoji-grimace-fill::before { content: "\f79b"; } .bi-emoji-grimace::before { content: "\f7a0"; } .bi-emoji-grin-fill::before { content: "\f7a1"; } .bi-emoji-grin::before { content: "\f7a6"; } .bi-emoji-surprise-fill::before { content: "\f7a7"; } .bi-emoji-surprise::before { content: "\f7ac"; } .bi-emoji-tear-fill::before { content: "\f7ad"; } .bi-emoji-tear::before { content: "\f7b2"; } .bi-envelope-arrow-down-fill::before { content: "\f7b3"; } .bi-envelope-arrow-down::before { content: "\f7b8"; } .bi-envelope-arrow-up-fill::before { content: "\f7b9"; } .bi-envelope-arrow-up::before { content: "\f7be"; } .bi-feather::before { content: "\f7bf"; } .bi-feather2::before { content: "\f7c4"; } .bi-floppy-fill::before { content: "\f7c5"; } .bi-floppy::before { content: "\f7d8"; } .bi-floppy2-fill::before { content: "\f7d9"; } .bi-floppy2::before { content: "\f7e4"; } .bi-gitlab::before { content: "\f7e5"; } .bi-highlighter::before { content: "\f7f8"; } .bi-marker-tip::before { content: "\f802"; } .bi-nvme-fill::before { content: "\f803"; } .bi-nvme::before { content: "\f80c"; } .bi-opencollective::before { content: "\f80d"; } .bi-pci-card-network::before { content: "\f8cd"; } .bi-pci-card-sound::before { content: "\f8ce"; } .bi-radar::before { content: "\f8cf"; } .bi-send-arrow-down-fill::before { content: "\f8d0"; } .bi-send-arrow-down::before { content: "\f8d1"; } .bi-send-arrow-up-fill::before { content: "\f8d2"; } .bi-send-arrow-up::before { content: "\f8d3"; } .bi-sim-slash-fill::before { content: "\f8d4"; } .bi-sim-slash::before { content: "\f8d5"; } .bi-sourceforge::before { content: "\f8d6"; } .bi-substack::before { content: "\f8d7"; } .bi-threads-fill::before { content: "\f8d8"; } .bi-threads::before { content: "\f8d9"; } .bi-transparency::before { content: "\f8da"; } .bi-twitter-x::before { content: "\f8db"; } .bi-type-h4::before { content: "\f8dc"; } .bi-type-h5::before { content: "\f8dd"; } .bi-type-h6::before { content: "\f8de"; } .bi-backpack-fill::before { content: "\f8df"; } .bi-backpack::before { content: "\f8e0"; } .bi-backpack2-fill::before { content: "\f8e1"; } .bi-backpack2::before { content: "\f8e2"; } .bi-backpack3-fill::before { content: "\f8e3"; } .bi-backpack3::before { content: "\f8e4"; } .bi-backpack4-fill::before { content: "\f8e5"; } .bi-backpack4::before { content: "\f8e6"; } .bi-brilliance::before { content: "\f8e7"; } .bi-cake-fill::before { content: "\f8e8"; } .bi-cake2-fill::before { content: "\f8e9"; } .bi-duffle-fill::before { content: "\f8ea"; } .bi-duffle::before { content: "\f8eb"; } .bi-exposure::before { content: "\f8ec"; } .bi-gender-neuter::before { content: "\f8ed"; } .bi-highlights::before { content: "\f8ee"; } .bi-luggage-fill::before { content: "\f8ef"; } .bi-luggage::before { content: "\f8f0"; } .bi-mailbox-flag::before { content: "\f8f1"; } .bi-mailbox2-flag::before { content: "\f8f2"; } .bi-noise-reduction::before { content: "\f8f3"; } .bi-passport-fill::before { content: "\f8f4"; } .bi-passport::before { content: "\f8f5"; } .bi-person-arms-up::before { content: "\f8f6"; } .bi-person-raised-hand::before { content: "\f8f7"; } .bi-person-standing-dress::before { content: "\f8f8"; } .bi-person-standing::before { content: "\f8f9"; } .bi-person-walking::before { content: "\f8fa"; } .bi-person-wheelchair::before { content: "\f8fb"; } .bi-shadows::before { content: "\f8fc"; } .bi-suitcase-fill::before { content: "\f8fd"; } .bi-suitcase-lg-fill::before { content: "\f8fe"; } .bi-suitcase-lg::before { content: "\f8ff"; } .bi-suitcase::before { content: "\f900"; } .bi-suitcase2-fill::before { content: "\f901"; } .bi-suitcase2::before { content: "\f902"; } .bi-vignette::before { content: "\f903"; } .bi-bluesky::before { content: "\f7f9"; } .bi-tux::before { content: "\f904"; } .bi-beaker-fill::before { content: "\f905"; } .bi-beaker::before { content: "\f906"; } .bi-flask-fill::before { content: "\f907"; } .bi-flask-florence-fill::before { content: "\f908"; } .bi-flask-florence::before { content: "\f909"; } .bi-flask::before { content: "\f90a"; } .bi-leaf-fill::before { content: "\f90b"; } .bi-leaf::before { content: "\f90c"; } .bi-measuring-cup-fill::before { content: "\f90d"; } .bi-measuring-cup::before { content: "\f90e"; } .bi-unlock2-fill::before { content: "\f90f"; } .bi-unlock2::before { content: "\f910"; } .bi-battery-low::before { content: "\f911"; } .bi-anthropic::before { content: "\f912"; } .bi-apple-music::before { content: "\f913"; } .bi-claude::before { content: "\f914"; } .bi-openai::before { content: "\f915"; } .bi-perplexity::before { content: "\f916"; } .bi-css::before { content: "\f917"; } .bi-javascript::before { content: "\f918"; } .bi-typescript::before { content: "\f919"; } .bi-fork-knife::before { content: "\f91a"; } .bi-globe-americas-fill::before { content: "\f91b"; } .bi-globe-asia-australia-fill::before { content: "\f91c"; } .bi-globe-central-south-asia-fill::before { content: "\f91d"; } .bi-globe-europe-africa-fill::before { content: "\f91e"; } /* ===== MAIN: bundle.min.css ===== */ /* ===== reset.css ===== */ /* ============================================ TECH-STC.RU - BASE RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); background-color: var(--color-bg); } /* ===== variables.css ===== */ /* ============================================ TECH-STC.RU - CSS VARIABLES ============================================ */ :root { --primary: #0056b3; --primary-1: #64a4de; --primary-2: #388fde; --primary-3: #0062bd; --primary-4: #235b8e; --accent: #0088cc; --secondary: #6c757d; --white: #fff; --gray: #f8f9fa; --dark: #212529; --border: #e9ecef; /*--background: #f7fafc;*/ --background: #f8fafd; --source-url: "https://tech-stc.ru/"; --source-name: "ТТК-СТАНДАРТ"; --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --success: #1a7d39; --success-light: #4caf50; --success-dark: #145a2c; --danger: #c62828; --danger-light: #ef5350; --danger-dark: #9a1c1c; /* Colors - Technical Palette */ --color-bg: #ffffff; --color-bg-secondary: #f5f7fa; --color-bg-tertiary: #e8ecf1; --color-border: #d1d5db; --color-border-light: #e5e7eb; --color-text: #202122; /*#1f2937;*/ --color-text-secondary: #6b7280; --color-text-muted: #9ca3af; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-light: #dbeafe; --color-success: #059669; --color-warning: #d97706; --color-error: #dc2626; /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 0.75rem; /* 12px - MOBILE PADDING */ --space-lg: 1rem; /* 16px */ --space-xl: 1.5rem; /* 24px */ --space-2xl: 2rem; /* 32px */ --space-3xl: 3rem; /* 48px */ /* Container */ --container-max: 1600px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --content-narrow-max: 800px; /* или 720px, 760px, 65ch */ --content-wide-max: 1320px; /* для обычных страниц */ } /* ===== critical.css ===== */ /* TECH-STC.RU - CRITICAL CSS (Above-the-fold only) */ :root{--color-bg:#ffffff;--color-bg-secondary:#f5f7fa;--color-border:#d1d5db;--color-text:#202122;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-success:#059669;--color-warning:#d97706;--color-error:#dc2626;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:0.75rem;--space-lg:1rem;--space-xl:1.5rem;--space-2xl:2rem;--container-max:1330px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,"Courier New",monospace;--transition-fast:150ms ease} *,*::before,*::after{box-sizing:border-box} html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{margin:0;font-family:var(--font-sans);font-size:0.9375rem;line-height:1.6;color:var(--color-text);background-color:var(--color-bg)} h1,h2,h3,h4,h5,h6,p{margin:0} h1{font-size:1.75rem;font-weight:600;line-height:1.2;margin-bottom:var(--space-lg);color:var(--color-text)} h2{font-size:1.375rem;font-weight:600;line-height:1.3;margin-bottom:var(--space-md);color:var(--color-text)} h3{font-size:1.125rem;font-weight:600;line-height:1.4;margin-bottom:var(--space-sm);color:var(--color-text)} p{font-size:1rem;line-height:1.6;margin-bottom:var(--space-lg);color:var(--color-text)} a{color:var(--color-accent);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)} a:hover{color:var(--color-accent-hover);border-bottom-color:var(--color-accent)} .container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-md);box-sizing:border-box} @media(min-width:768px){.container{padding:0 var(--space-xl)}} @media(min-width:1200px){.container{padding:0 var(--space-2xl)}} .section{padding:var(--space-2xl)0;background-color:var(--color-bg)} .d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} /* ===== layout.css ===== */ /* ============================================ TECH-STC.RU - LAYOUT ============================================ */ /* ===== SECTIONS ===== */ .section { padding: var(--space-2xl) 0; background-color: var(--color-bg); } /* ===== CONTAINERS ===== */ /* Standard container */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); box-sizing: border-box; } @media (min-width: 768px) { .container { padding: 0 var(--space-xl); } } @media (min-width: 1200px) { .container { padding: 0 var(--space-2xl); } } /* Full-width container */ .container-fluid { width: 100%; margin: 0 auto; padding: 0 var(--space-md); box-sizing: border-box; } @media (min-width: 768px) { .container-fluid { padding: 0 var(--space-xl); } } @media (min-width: 1200px) { .container-fluid { padding: 0 var(--space-2xl); } } /* Narrow container */ .container--narrow { max-width: 800px; margin: 0 auto; width: 100%; padding: var(--space-2xl); } @media (max-width: 768px) { .container--narrow { padding: 0 var(--space-xl); } } /* ===== utilities.css ===== */ /* ============================================ TECH-STC.RU - UTILITIES ============================================ */ /* ===== DISPLAY UTILITIES ===== */ .d-none { display: none !important; } .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline { display: inline !important; } .d-inline-block { display: inline-block !important; } @media (min-width: 576px) { .d-none-sm { display: none !important; } .d-block-sm { display: block !important; } .d-flex-sm { display: flex !important; } } @media (min-width: 768px) { .d-none-md { display: none !important; } .d-block-md { display: block !important; } .d-flex-md { display: flex !important; } } @media (min-width: 992px) { .d-none-lg { display: none !important; } .d-block-lg { display: block !important; } .d-flex-lg { display: flex !important; } } /* ===== SPACING UTILITIES ===== */ /* Margin All */ .m-0 { margin: 0; } .m-1 { margin: var(--space-xs); } .m-2 { margin: var(--space-sm); } .m-3 { margin: var(--space-md); } .m-4 { margin: var(--space-lg); } .m-5 { margin: var(--space-xl); } .m-6 { margin: var(--space-2xl); } .m-auto { margin: auto; } /* Margin Top */ .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-xs); } .mt-2 { margin-top: var(--space-sm); } .mt-3 { margin-top: var(--space-md); } .mt-4 { margin-top: var(--space-lg); } .mt-5 { margin-top: var(--space-xl); } .mt-6 { margin-top: var(--space-2xl); } .mt-7 { margin-top: var(--space-3xl); } .mt-auto { margin-top: auto; } /* Margin Bottom */ .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-xs); } .mb-2 { margin-bottom: var(--space-sm); } .mb-3 { margin-bottom: var(--space-md); } .mb-4 { margin-bottom: var(--space-lg); } .mb-5 { margin-bottom: var(--space-xl); } .mb-6 { margin-bottom: var(--space-2xl); } .mb-auto { margin-bottom: auto; } /* Margin Left */ .ml-0 { margin-left: 0; } .ml-1 { margin-left: var(--space-xs); } .ml-2 { margin-left: var(--space-sm); } .ml-3 { margin-left: var(--space-md); } .ml-4 { margin-left: var(--space-lg); } .ml-5 { margin-left: var(--space-xl); } .ml-6 { margin-left: var(--space-2xl); } .ml-auto { margin-left: auto; } /* Margin Right */ .mr-0 { margin-right: 0; } .mr-1 { margin-right: var(--space-xs); } .mr-2 { margin-right: var(--space-sm); } .mr-3 { margin-right: var(--space-md); } .mr-4 { margin-right: var(--space-lg); } .mr-5 { margin-right: var(--space-xl); } .mr-6 { margin-right: var(--space-2xl); } .mr-auto { margin-right: auto; } /* Margin X (Left & Right) */ .mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: var(--space-xs); margin-right: var(--space-xs); } .mx-2 { margin-left: var(--space-sm); margin-right: var(--space-sm); } .mx-3 { margin-left: var(--space-md); margin-right: var(--space-md); } .mx-4 { margin-left: var(--space-lg); margin-right: var(--space-lg); } .mx-5 { margin-left: var(--space-xl); margin-right: var(--space-xl); } .mx-6 { margin-left: var(--space-2xl); margin-right: var(--space-2xl); } .mx-auto { margin-left: auto; margin-right: auto; } /* Margin Y (Top & Bottom) */ .my-0 { margin-top: 0; margin-bottom: 0; } .my-1 { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .my-2 { margin-top: var(--space-sm); margin-bottom: var(--space-sm); } .my-3 { margin-top: var(--space-md); margin-bottom: var(--space-md); } .my-4 { margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .my-5 { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .my-6 { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } .my-auto { margin-top: auto; margin-bottom: auto; } /* Padding All */ .p-0 { padding: 0; } .p-1 { padding: var(--space-xs); } .p-2 { padding: var(--space-sm); } .p-3 { padding: var(--space-md); } .p-4 { padding: var(--space-lg); } .p-5 { padding: var(--space-xl); } .p-6 { padding: var(--space-2xl); } /* Padding Top */ .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--space-xs); } .pt-2 { padding-top: var(--space-sm); } .pt-3 { padding-top: var(--space-md); } .pt-4 { padding-top: var(--space-lg); } .pt-5 { padding-top: var(--space-xl); } .pt-6 { padding-top: var(--space-2xl); } /* Padding Bottom */ .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--space-xs); } .pb-2 { padding-bottom: var(--space-sm); } .pb-3 { padding-bottom: var(--space-md); } .pb-4 { padding-bottom: var(--space-lg); } .pb-5 { padding-bottom: var(--space-xl); } .pb-6 { padding-bottom: var(--space-2xl); } /* Padding Left */ .pl-0 { padding-left: 0; } .pl-1 { padding-left: var(--space-xs); } .pl-2 { padding-left: var(--space-sm); } .pl-3 { padding-left: var(--space-md); } .pl-4 { padding-left: var(--space-lg); } .pl-5 { padding-left: var(--space-xl); } .pl-6 { padding-left: var(--space-2xl); } /* Padding Right */ .pr-0 { padding-right: 0; } .pr-1 { padding-right: var(--space-xs); } .pr-2 { padding-right: var(--space-sm); } .pr-3 { padding-right: var(--space-md); } .pr-4 { padding-right: var(--space-lg); } .pr-5 { padding-right: var(--space-xl); } .pr-6 { padding-right: var(--space-2xl); } /* Padding X (Left & Right) */ .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: var(--space-xs); padding-right: var(--space-xs); } .px-2 { padding-left: var(--space-sm); padding-right: var(--space-sm); } .px-3 { padding-left: var(--space-md); padding-right: var(--space-md); } .px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); } .px-5 { padding-left: var(--space-xl); padding-right: var(--space-xl); } .px-6 { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } /* Padding Y (Top & Bottom) */ .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .py-2 { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); } .py-4 { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .py-5 { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-6 { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } /* ===== ACCESSIBILITY & CUSTOM HELPERS ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .bg-light-gray { background-color: var(--color-bg-secondary); padding: 4rem 0; } .bg-light { background-color: var(--color-bg-secondary); } .title-primary { color: var(--primary); } .list--unstyled { list-style: none; margin: 0; padding: 0; } /* ===== typography.css ===== */ /* ============================================ TECH-STC.RU - TYPOGRAPHY SYSTEM Инженерная типографика: чётко, читаемо, иерархично ============================================ */ /* ----------------------------------------------------------------- 1. БАЗОВЫЕ НАСТРОЙКИ ТИПОГРАФИКИ ----------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p { margin: 0; } body { line-height: 1.5; color: #333333; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ----------------------------------------------------------------- 2. ЗАГОЛОВКИ ----------------------------------------------------------------- */ h1, .text-h1 { font-size: 1.75rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.5rem; color: #333333; } h2, .text-h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin-bottom: 1rem; color: #333333; } h3, .text-h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.75rem; color: #333333; } h4, .text-h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; color: #333333; } /* Мобильная адаптация заголовков */ @media (max-width: 767px) { h1, .text-h1 { font-size: 1.5rem; } h2, .text-h2 { font-size: 1.25rem; } h3, .text-h3 { font-size: 1.125rem; } } /* ----------------------------------------------------------------- 3. ТЕКСТ ----------------------------------------------------------------- */ p { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; color: #333333; width: 100%; max-width: 100%; } /* Десктопная версия - ограничение ширины */ @media (min-width: 768px) { p { max-width: 680px; width: 100%; } } /* Для очень больших экранов */ @media (min-width: 1200px) { p { max-width: 920px; } } .lead { font-size: 1.125rem; line-height: 1.5; color: #666666; margin-bottom: 2rem; width: 100%; } @media (min-width: 768px) { .lead { font-size: 1.25rem; width: 80%; max-width: 65ch; } } small { font-size: 0.875rem; line-height: 1.5; } .text-muted { font-size: 0.75rem; line-height: 1.4; color: #999999; } /* ----------------------------------------------------------------- 4. ТЕХНИЧЕСКИЙ ТЕКСТ ----------------------------------------------------------------- */ .text-mono, code, pre { font-family: 'Courier New', Courier, monospace; font-size: 0.875em; background: #f5f5f5; border-radius: 0; } code { padding: 0.2em 0.4em; } pre { padding: 1rem; overflow-x: auto; line-height: 1.4; } /* ----------------------------------------------------------------- 5. ЦВЕТОВЫЕ УТИЛИТЫ ----------------------------------------------------------------- */ .text-primary { color: #0066cc !important; } .text-secondary { color: #666666 !important; } .text-accent { color: #ff6600 !important; } .text-muted { color: #999999 !important; } .text-success { color: #28a745 !important; } .text-danger { color: #dc3545 !important; } .text-warning { color: #ffc107 !important; } .text-white { color: #ffffff !important; } /* ----------------------------------------------------------------- 6. ВЫРАВНИВАНИЕ ----------------------------------------------------------------- */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } /* ----------------------------------------------------------------- 7. СПИСКИ ----------------------------------------------------------------- */ ul, ol { margin-bottom: 1.5rem; padding-left: 1.5rem; } li { margin-bottom: 0.5rem; line-height: 1.6; } .list-inline { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 1rem; } .list-inline li { margin-bottom: 0; } /* ----------------------------------------------------------------- 8. ССЫЛКИ ----------------------------------------------------------------- */ /* Более современный стандарт */ a { color: #0066cc; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; } a:hover { border-bottom-color: #0066cc; } /* ----------------------------------------------------------------- 9. АДАПТИВНОСТЬ И ДОСТУПНОСТЬ ----------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { a { transition: none; } } @media (max-width: 480px) { body { font-size: 16px; } } /* ===== grid.css ===== */ /* ============================================ TECH-STC.RU - GRID SYSTEM (mobile-first) ============================================ */ .row, .grid { display: flex; flex-wrap: wrap; width: 100%; margin: 0; } /* Gap Modifiers */ .grid__gap-md, .row--gap-md { margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); width: calc(100% + var(--space-md) * 2); } .grid__gap-lg, .row--gap-lg { margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1); width: calc(100% + var(--space-lg) * 2); } /* Column Base — Mobile First (100% by default) */ .row > *, .grid > * { flex: 0 0 100%; max-width: 100%; padding: 0; box-sizing: border-box; } @media (min-width: 768px) { .row > *, .grid > * { padding: 0 var(--space-md); } } /* Gap Padding Adjustments */ .grid__gap-md > *, .row--gap-md > * { padding: 0 var(--space-md); margin-bottom: var(--space-lg); } .grid__gap-lg > *, .row--gap-lg > * { padding: 0 var(--space-lg); margin-bottom: var(--space-xl); } /* All column classes default to 100% on mobile */ [class^="col-"], [class*=" col-"] { flex: 0 0 100%; max-width: 100%; } /* Static columns ONLY apply from SM breakpoint upward */ @media (min-width: 576px) { .col-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-12 { flex: 0 0 100%; max-width: 100%; } .col-10p { flex: 0 0 10%; max-width: 10%; } .col-20p { flex: 0 0 20%; max-width: 20%; } .col-25p { flex: 0 0 25%; max-width: 25%; } .col-30p { flex: 0 0 30%; max-width: 30%; } .col-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-40p { flex: 0 0 40%; max-width: 40%; } .col-50p { flex: 0 0 50%; max-width: 50%; } .col-60p { flex: 0 0 60%; max-width: 60%; } .col-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-70p { flex: 0 0 70%; max-width: 70%; } .col-75p { flex: 0 0 75%; max-width: 75%; } .col-80p { flex: 0 0 80%; max-width: 80%; } .col-90p { flex: 0 0 90%; max-width: 90%; } } /* SM-only responsive columns */ @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-sm-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-sm-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-sm-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .col-sm-10p { flex: 0 0 10%; max-width: 10%; } .col-sm-20p { flex: 0 0 20%; max-width: 20%; } .col-sm-25p { flex: 0 0 25%; max-width: 25%; } .col-sm-30p { flex: 0 0 30%; max-width: 30%; } .col-sm-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-sm-40p { flex: 0 0 40%; max-width: 40%; } .col-sm-50p { flex: 0 0 50%; max-width: 50%; } .col-sm-60p { flex: 0 0 60%; max-width: 60%; } .col-sm-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-sm-70p { flex: 0 0 70%; max-width: 70%; } .col-sm-75p { flex: 0 0 75%; max-width: 75%; } .col-sm-80p { flex: 0 0 80%; max-width: 80%; } .col-sm-90p { flex: 0 0 90%; max-width: 90%; } } /* MD breakpoint */ @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .col-md-10p { flex: 0 0 10%; max-width: 10%; } .col-md-20p { flex: 0 0 20%; max-width: 20%; } .col-md-25p { flex: 0 0 25%; max-width: 25%; } .col-md-30p { flex: 0 0 30%; max-width: 30%; } .col-md-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-40p { flex: 0 0 40%; max-width: 40%; } .col-md-50p { flex: 0 0 50%; max-width: 50%; } .col-md-60p { flex: 0 0 60%; max-width: 60%; } .col-md-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-md-70p { flex: 0 0 70%; max-width: 70%; } .col-md-75p { flex: 0 0 75%; max-width: 75%; } .col-md-80p { flex: 0 0 80%; max-width: 80%; } .col-md-90p { flex: 0 0 90%; max-width: 90%; } } /* LG breakpoint */ @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.333%; max-width: 8.333%; } .col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; } .col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .col-lg-10p { flex: 0 0 10%; max-width: 10%; } .col-lg-20p { flex: 0 0 20%; max-width: 20%; } .col-lg-25p { flex: 0 0 25%; max-width: 25%; } .col-lg-30p { flex: 0 0 30%; max-width: 30%; } .col-lg-33p { flex: 0 0 33.333%; max-width: 33.333%; } .col-lg-40p { flex: 0 0 40%; max-width: 40%; } .col-lg-50p { flex: 0 0 50%; max-width: 50%; } .col-lg-60p { flex: 0 0 60%; max-width: 60%; } .col-lg-66p { flex: 0 0 66.666%; max-width: 66.666%; } .col-lg-70p { flex: 0 0 70%; max-width: 70%; } .col-lg-75p { flex: 0 0 75%; max-width: 75%; } .col-lg-80p { flex: 0 0 80%; max-width: 80%; } .col-lg-90p { flex: 0 0 90%; max-width: 90%; } } /* Auto width */ .col-auto { flex: 1 1 0; max-width: 100%; } /* No Gutters */ .row--no-gutters, .grid--no-gutters { margin: 0; width: 100%; } .row--no-gutters > *, .grid--no-gutters > * { padding: 0 !important; margin-bottom: 0 !important; } /* ===== components.css ===== */ /* ============================================ TECH-STC.RU - COMPONENTS Общие компоненты: цитаты, ссылки ============================================ */ blockquote { position: relative; margin: 0 0 var(--space-lg) 0; padding: var(--space-xl) var(--space-2xl); background-color: var(--color-bg-secondary); color: var(--color-text); font-size: 1.1rem; font-weight: 500; line-height: 1.6; border-radius: 0; } blockquote::before { content: "❝"; position: absolute; top: -0.5rem; left: -0.5rem; font-size: 3rem; color: var(--color-text-muted); font-family: serif; } blockquote::after { content: "❞"; position: absolute; bottom: -0.5rem; right: -0.5rem; font-size: 3rem; color: var(--color-text-muted); font-family: serif; } blockquote p { font-weight: 400; } blockquote small { color: var(--color-text-secondary); } @media (max-width: 768px) { blockquote { padding: var(--space-md); } blockquote::before, blockquote::after { font-size: 2rem; } } .link { font-size: 1.1rem; font-weight: 500; } /* ===== accordion.css ===== */ /* ============================================ TECH-STC.RU - ACCORDION SYSTEM Для FAQ, документации и технических спецификаций ============================================ */ /* ----------------------------------------------------------------- БАЗОВЫЙ АККОРДЕОН ----------------------------------------------------------------- */ .accordion { border-top: 1px solid var(--color-border); width: 100%; } .accordion__item { border-bottom: 1px solid var(--color-border); } /* ----------------------------------------------------------------- ЗАГОЛОВОК (кликабельная область) ----------------------------------------------------------------- */ .accordion__summary { padding: var(--space-lg) 0; cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--color-text); list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color var(--transition-fast); user-select: none; outline: none; position: relative; } .accordion__summary:hover { color: var(--color-accent); } .accordion__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .accordion__summary:active { opacity: 0.8; } .accordion__summary::-webkit-details-marker { display: none; } /* ----------------------------------------------------------------- ИНДИКАТОР (плюс/минус) ----------------------------------------------------------------- */ .accordion__summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 400; color: var(--color-text-muted); transition: transform var(--transition-fast); line-height: 1; margin-left: var(--space-md); } .accordion__item[open] .accordion__summary::after { content: "−"; } /* ----------------------------------------------------------------- КОНТЕНТ АККОРДЕОНА ----------------------------------------------------------------- */ .accordion__content { padding: 0 0 var(--space-lg) 0; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.7; } .accordion__content > :last-child { margin-bottom: 0; } /* ----------------------------------------------------------------- ВАРИАНТ 2: С ИКОНКОЙ ВМЕСТО ПЛЮСА ----------------------------------------------------------------- */ .accordion--icon .accordion__summary::after { content: ""; width: 1.25rem; height: 1.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M4 8h8M8 4v8'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; } .accordion--icon .accordion__item[open] .accordion__summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E"); } /* ----------------------------------------------------------------- ВАРИАНТ 3: КОМПАКТНЫЙ (для плотных интерфейсов) ----------------------------------------------------------------- */ .accordion--compact .accordion__summary { padding: var(--space-md) 0; font-size: 0.875rem; } .accordion--compact .accordion__content { padding: 0 0 var(--space-md) 0; font-size: 0.875rem; } /* ----------------------------------------------------------------- ВАРИАНТ 4: БЕЗ ГРАНИЦ (для вложенных аккордеонов) ----------------------------------------------------------------- */ .accordion--borderless { border-top: none; } .accordion--borderless .accordion__item { border-bottom: none; } .accordion--borderless .accordion__summary { padding: var(--space-sm) 0; } /* ----------------------------------------------------------------- ВАРИАНТ 5: С ФОНОМ (для выделенных секций) ----------------------------------------------------------------- */ .accordion--filled .accordion__item { background: var(--color-bg-secondary); margin-bottom: var(--space-sm); border-bottom: none; border-radius: 0; } .accordion--filled .accordion__summary { padding: var(--space-md) var(--space-lg); } .accordion--filled .accordion__content { padding: 0 var(--space-lg) var(--space-lg); } /* ----------------------------------------------------------------- ВЛОЖЕННЫЕ АККОРДЕОНЫ ----------------------------------------------------------------- */ .accordion .accordion { border-top: none; margin-top: var(--space-sm); margin-left: var(--space-xl); } .accordion .accordion .accordion__summary { font-size: 0.875rem; padding: var(--space-sm) 0; } /* ----------------------------------------------------------------- ТЕХНИЧЕСКИЙ АККОРДЕОН (для документации) ----------------------------------------------------------------- */ .accordion--technical .accordion__summary { font-family: var(--font-mono); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.5px; } .accordion--technical .accordion__content { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; background: var(--color-bg-tertiary); padding: var(--space-md); border-radius: 0; } /* ----------------------------------------------------------------- АНИМАЦИЯ (плавное открытие) ----------------------------------------------------------------- */ .accordion__content { animation: accordion-fade 0.3s ease; } @keyframes accordion-fade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { .accordion__summary { padding: var(--space-md) 0; font-size: 0.875rem; } .accordion__content { font-size: 0.875rem; } .accordion .accordion { margin-left: var(--space-lg); } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Базовый аккордеон: <details class="accordion__item"> <summary class="accordion__summary">Заголовок</summary> <div class="accordion__content">Контент</div> </details> С иконкой: <div class="accordion accordion--icon"> <details class="accordion__item">...</details> </div> Вложенный: <details class="accordion__item"> <summary class="accordion__summary">Раздел 1</summary> <div class="accordion__content"> <div class="accordion accordion--borderless"> <details class="accordion__item">...</details> </div> </div> </details> */ /* ===== alert.css ===== */ /* ============================================ TECH-STC.RU - ALERT COMPONENT Система уведомлений для технического интерфейса ============================================ */ .alert { padding: var(--space-md) var(--space-lg); border-left: 4px solid transparent; background-color: var(--color-bg-secondary); display: flex; align-items: flex-start; gap: var(--space-sm); font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); border-radius: 0; margin-bottom: var(--space-lg); } .alert:last-child { margin-bottom: 0; } /* Иконка в алерте */ .alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; color: currentColor; } /* Контент алерта */ .alert__content { flex: 1; } /* Заголовок алерта */ .alert__title { font-weight: 600; margin-bottom: var(--space-xs); } /* Типы алертов (используем CSS-переменные) */ .alert--info { background-color: color-mix(in srgb, var(--color-accent) 5%, white); border-left-color: var(--color-accent); color: var(--color-accent-hover); } .alert--success { background-color: color-mix(in srgb, var(--color-success) 5%, white); border-left-color: var(--color-success); color: var(--color-success); } .alert--warning { background-color: color-mix(in srgb, var(--color-warning) 5%, white); border-left-color: var(--color-warning); color: var(--color-warning); } .alert--error { background-color: color-mix(in srgb, var(--color-error) 5%, white); border-left-color: var(--color-error); color: var(--color-error); } /* Алерт с возможностью закрытия */ .alert--dismissible { padding-right: var(--space-2xl); position: relative; } .alert__close { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; cursor: pointer; color: currentColor; opacity: 0.6; padding: 0; width: 1.25rem; height: 1.25rem; } .alert__close:hover { opacity: 1; } /* ===== badge.css ===== */ /* ============================================ TECH-STC.RU - BADGE SYSTEM Счетчики, статусы, метки ============================================ */ /* ----------------------------------------------------------------- БАЗОВЫЙ БЕЙДЖ ----------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--space-sm); background-color: var(--color-accent); color: #ffffff; font-size: 0.75rem; font-weight: 600; line-height: 1; border-radius: 0; font-family: var(--font-mono); white-space: nowrap; vertical-align: middle; } /* ----------------------------------------------------------------- РАЗМЕРЫ ----------------------------------------------------------------- */ .badge--xs { min-width: 1.25rem; height: 1.25rem; font-size: 0.625rem; padding: 0 var(--space-xs); } .badge--sm { min-width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; } .badge--md { min-width: 2rem; height: 2rem; font-size: 0.75rem; padding: 0 var(--space-md); } .badge--lg { min-width: 2.5rem; height: 2.5rem; font-size: 0.875rem; padding: 0 var(--space-lg); } /* ----------------------------------------------------------------- ЦВЕТА ----------------------------------------------------------------- */ .badge--primary { background-color: var(--primary); color: #ffffff; } .badge--secondary { background-color: var(--color-bg-tertiary); color: var(--color-text); } .badge--accent { background-color: var(--color-accent); color: #ffffff; } .badge--success { background-color: var(--color-success); color: #ffffff; } .badge--warning { background-color: var(--color-warning); color: #ffffff; } .badge--danger { background-color: var(--color-error); color: #ffffff; } .badge--neutral { background-color: var(--color-text-muted); color: #ffffff; } /* ----------------------------------------------------------------- ВАРИАНТЫ ----------------------------------------------------------------- */ /* Контурный бейдж */ .badge--outline { background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .badge--outline.badge--primary { border-color: var(--primary); color: var(--primary); } .badge--outline.badge--accent { border-color: var(--color-accent); color: var(--color-accent); } /* Круглый бейдж (для аватарок, счетчиков) */ .badge--circle { border-radius: 9999px; aspect-ratio: 1 / 1; padding: 0; } /* ----------------------------------------------------------------- ПОЗИЦИОНИРОВАНИЕ (для прикрепления к элементам) ----------------------------------------------------------------- */ .badge--top-right { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); } .badge--top-left { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); } /* ----------------------------------------------------------------- ИСПОЛЬЗОВАНИЕ В НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__link .badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; } .nav-vertical__link--active .badge { background-color: var(--color-accent); color: #ffffff; } /* ----------------------------------------------------------------- ПРИМЕРЫ ----------------------------------------------------------------- */ /* <span class="badge">42</span> <span class="badge badge--success badge--sm">Готово</span> <span class="badge badge--warning badge--outline">Черновик</span> В навигации: <a href="#" class="nav-vertical__link"> <span>Сообщения</span> <span class="badge badge--circle">3</span> </a> */ /* ===== banner.css ===== */ /* ============================================ TECH-STC.RU - BANNER COMPONENT Информационные баннеры в топе страниц Изолировано через #top-banners ============================================ */ #top-banners { margin: 0; } /* ----------------------------------------------------------------- Ряд баннеров (сетка) ----------------------------------------------------------------- */ #top-banners .banners-row { display: flex; flex-direction: row; gap: var(--space-xl); margin: 0; padding: 0; width: 100%; } #top-banners .banner-col { flex: 1; min-width: 0; width: auto; } /* ----------------------------------------------------------------- Карточка баннера — базовый стиль ----------------------------------------------------------------- */ #top-banners .banner-card { display: flex; flex-direction: column; height: 170px; padding: var(--space-xl); box-sizing: border-box; background-color: var(--color-bg-secondary); border-left: 4px solid var(--banner-accent, var(--primary)); border-radius: 0; text-decoration: none; color: inherit; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 12%, transparent); transition: transform var(--transition-fast), box-shadow var(--transition-fast); position: relative; overflow: hidden; outline: none; } /* Техническая полоска (инженерный стиль) */ #top-banners .banner-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--banner-accent, var(--primary)) 15%, transparent) 20%, color-mix(in srgb, var(--banner-accent, var(--primary)) 30%, transparent) 50%, color-mix(in srgb, var(--banner-accent, var(--primary)) 15%, transparent) 80%, transparent 100% ); pointer-events: none; } /* ----------------------------------------------------------------- Состояния ----------------------------------------------------------------- */ #top-banners .banner-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-3) 20%, transparent); } #top-banners .banner-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } /* ----------------------------------------------------------------- Стрелка-индикатор ----------------------------------------------------------------- */ #top-banners .banner-card::after { content: '→'; position: absolute; bottom: var(--space-xl); right: var(--space-xl); font-size: 2rem; font-weight: 300; color: var(--banner-accent, var(--primary)); opacity: 0.7; transition: opacity var(--transition-fast), transform var(--transition-fast); line-height: 1; pointer-events: none; } #top-banners .banner-card:hover::after { opacity: 1; transform: translateX(4px); } /* ----------------------------------------------------------------- Контент баннера ----------------------------------------------------------------- */ #top-banners .card__body { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 1; padding: 0; margin: 0; background: none; border: none; } #top-banners .banner-title { font-size: 1.3rem; font-weight: 500; line-height: 1.2; margin: 0 0 var(--space-sm) 0; color: var(--color-text-secondary); font-family: inherit; letter-spacing: -0.03em; text-align: left; padding: 0; } #top-banners .banner-lead { font-size: 1rem; font-weight: 400; line-height: 1.5; margin: 0 0 var(--space-lg) 0; color: var(--color-text-muted); max-width: 30ch; text-align: left; padding: 0; background: none; } /* ----------------------------------------------------------------- Адаптивность ----------------------------------------------------------------- */ @media (max-width: 991px) { #top-banners .banners-row { flex-direction: column; gap: var(--space-lg); } #top-banners .banner-card { height: 160px; padding: var(--space-lg); } #top-banners .banner-title { font-size: 1.2rem; } #top-banners .banner-lead { font-size: 0.9375rem; margin-bottom: var(--space-md); } #top-banners .banner-card::after { bottom: var(--space-lg); right: var(--space-lg); font-size: 1.5rem; } } @media (max-width: 480px) { #top-banners .banner-card { height: auto; min-height: 140px; } } /* ===== bootstrap-icons.css ===== */ /*! * Bootstrap Icons v1.13.1 (https://icons.getbootstrap.com/) * Copyright 2019-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE) */ @font-face { font-display: block; font-family: "bootstrap-icons"; src: url("/assets/fonts/bootstrap-icons.woff2") format("woff2"), url("/assets/fonts/bootstrap-icons.woff") format("woff"); } .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { display: inline-block; font-family: bootstrap-icons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bi-123::before { content: "\f67f"; } .bi-alarm-fill::before { content: "\f101"; } .bi-alarm::before { content: "\f102"; } .bi-align-bottom::before { content: "\f103"; } .bi-align-center::before { content: "\f104"; } .bi-align-end::before { content: "\f105"; } .bi-align-middle::before { content: "\f106"; } .bi-align-start::before { content: "\f107"; } .bi-align-top::before { content: "\f108"; } .bi-alt::before { content: "\f109"; } .bi-app-indicator::before { content: "\f10a"; } .bi-app::before { content: "\f10b"; } .bi-archive-fill::before { content: "\f10c"; } .bi-archive::before { content: "\f10d"; } .bi-arrow-90deg-down::before { content: "\f10e"; } .bi-arrow-90deg-left::before { content: "\f10f"; } .bi-arrow-90deg-right::before { content: "\f110"; } .bi-arrow-90deg-up::before { content: "\f111"; } .bi-arrow-bar-down::before { content: "\f112"; } .bi-arrow-bar-left::before { content: "\f113"; } .bi-arrow-bar-right::before { content: "\f114"; } .bi-arrow-bar-up::before { content: "\f115"; } .bi-arrow-clockwise::before { content: "\f116"; } .bi-arrow-counterclockwise::before { content: "\f117"; } .bi-arrow-down-circle-fill::before { content: "\f118"; } .bi-arrow-down-circle::before { content: "\f119"; } .bi-arrow-down-left-circle-fill::before { content: "\f11a"; } .bi-arrow-down-left-circle::before { content: "\f11b"; } .bi-arrow-down-left-square-fill::before { content: "\f11c"; } .bi-arrow-down-left-square::before { content: "\f11d"; } .bi-arrow-down-left::before { content: "\f11e"; } .bi-arrow-down-right-circle-fill::before { content: "\f11f"; } .bi-arrow-down-right-circle::before { content: "\f120"; } .bi-arrow-down-right-square-fill::before { content: "\f121"; } .bi-arrow-down-right-square::before { content: "\f122"; } .bi-arrow-down-right::before { content: "\f123"; } .bi-arrow-down-short::before { content: "\f124"; } .bi-arrow-down-square-fill::before { content: "\f125"; } .bi-arrow-down-square::before { content: "\f126"; } .bi-arrow-down-up::before { content: "\f127"; } .bi-arrow-down::before { content: "\f128"; } .bi-arrow-left-circle-fill::before { content: "\f129"; } .bi-arrow-left-circle::before { content: "\f12a"; } .bi-arrow-left-right::before { content: "\f12b"; } .bi-arrow-left-short::before { content: "\f12c"; } .bi-arrow-left-square-fill::before { content: "\f12d"; } .bi-arrow-left-square::before { content: "\f12e"; } .bi-arrow-left::before { content: "\f12f"; } .bi-arrow-repeat::before { content: "\f130"; } .bi-arrow-return-left::before { content: "\f131"; } .bi-arrow-return-right::before { content: "\f132"; } .bi-arrow-right-circle-fill::before { content: "\f133"; } .bi-arrow-right-circle::before { content: "\f134"; } .bi-arrow-right-short::before { content: "\f135"; } .bi-arrow-right-square-fill::before { content: "\f136"; } .bi-arrow-right-square::before { content: "\f137"; } .bi-arrow-right::before { content: "\f138"; } .bi-arrow-up-circle-fill::before { content: "\f139"; } .bi-arrow-up-circle::before { content: "\f13a"; } .bi-arrow-up-left-circle-fill::before { content: "\f13b"; } .bi-arrow-up-left-circle::before { content: "\f13c"; } .bi-arrow-up-left-square-fill::before { content: "\f13d"; } .bi-arrow-up-left-square::before { content: "\f13e"; } .bi-arrow-up-left::before { content: "\f13f"; } .bi-arrow-up-right-circle-fill::before { content: "\f140"; } .bi-arrow-up-right-circle::before { content: "\f141"; } .bi-arrow-up-right-square-fill::before { content: "\f142"; } .bi-arrow-up-right-square::before { content: "\f143"; } .bi-arrow-up-right::before { content: "\f144"; } .bi-arrow-up-short::before { content: "\f145"; } .bi-arrow-up-square-fill::before { content: "\f146"; } .bi-arrow-up-square::before { content: "\f147"; } .bi-arrow-up::before { content: "\f148"; } .bi-arrows-angle-contract::before { content: "\f149"; } .bi-arrows-angle-expand::before { content: "\f14a"; } .bi-arrows-collapse::before { content: "\f14b"; } .bi-arrows-expand::before { content: "\f14c"; } .bi-arrows-fullscreen::before { content: "\f14d"; } .bi-arrows-move::before { content: "\f14e"; } .bi-aspect-ratio-fill::before { content: "\f14f"; } .bi-aspect-ratio::before { content: "\f150"; } .bi-asterisk::before { content: "\f151"; } .bi-at::before { content: "\f152"; } .bi-award-fill::before { content: "\f153"; } .bi-award::before { content: "\f154"; } .bi-back::before { content: "\f155"; } .bi-backspace-fill::before { content: "\f156"; } .bi-backspace-reverse-fill::before { content: "\f157"; } .bi-backspace-reverse::before { content: "\f158"; } .bi-backspace::before { content: "\f159"; } .bi-badge-3d-fill::before { content: "\f15a"; } .bi-badge-3d::before { content: "\f15b"; } .bi-badge-4k-fill::before { content: "\f15c"; } .bi-badge-4k::before { content: "\f15d"; } .bi-badge-8k-fill::before { content: "\f15e"; } .bi-badge-8k::before { content: "\f15f"; } .bi-badge-ad-fill::before { content: "\f160"; } .bi-badge-ad::before { content: "\f161"; } .bi-badge-ar-fill::before { content: "\f162"; } .bi-badge-ar::before { content: "\f163"; } .bi-badge-cc-fill::before { content: "\f164"; } .bi-badge-cc::before { content: "\f165"; } .bi-badge-hd-fill::before { content: "\f166"; } .bi-badge-hd::before { content: "\f167"; } .bi-badge-tm-fill::before { content: "\f168"; } .bi-badge-tm::before { content: "\f169"; } .bi-badge-vo-fill::before { content: "\f16a"; } .bi-badge-vo::before { content: "\f16b"; } .bi-badge-vr-fill::before { content: "\f16c"; } .bi-badge-vr::before { content: "\f16d"; } .bi-badge-wc-fill::before { content: "\f16e"; } .bi-badge-wc::before { content: "\f16f"; } .bi-bag-check-fill::before { content: "\f170"; } .bi-bag-check::before { content: "\f171"; } .bi-bag-dash-fill::before { content: "\f172"; } .bi-bag-dash::before { content: "\f173"; } .bi-bag-fill::before { content: "\f174"; } .bi-bag-plus-fill::before { content: "\f175"; } .bi-bag-plus::before { content: "\f176"; } .bi-bag-x-fill::before { content: "\f177"; } .bi-bag-x::before { content: "\f178"; } .bi-bag::before { content: "\f179"; } .bi-bar-chart-fill::before { content: "\f17a"; } .bi-bar-chart-line-fill::before { content: "\f17b"; } .bi-bar-chart-line::before { content: "\f17c"; } .bi-bar-chart-steps::before { content: "\f17d"; } .bi-bar-chart::before { content: "\f17e"; } .bi-basket-fill::before { content: "\f17f"; } .bi-basket::before { content: "\f180"; } .bi-basket2-fill::before { content: "\f181"; } .bi-basket2::before { content: "\f182"; } .bi-basket3-fill::before { content: "\f183"; } .bi-basket3::before { content: "\f184"; } .bi-battery-charging::before { content: "\f185"; } .bi-battery-full::before { content: "\f186"; } .bi-battery-half::before { content: "\f187"; } .bi-battery::before { content: "\f188"; } .bi-bell-fill::before { content: "\f189"; } .bi-bell::before { content: "\f18a"; } .bi-bezier::before { content: "\f18b"; } .bi-bezier2::before { content: "\f18c"; } .bi-bicycle::before { content: "\f18d"; } .bi-binoculars-fill::before { content: "\f18e"; } .bi-binoculars::before { content: "\f18f"; } .bi-blockquote-left::before { content: "\f190"; } .bi-blockquote-right::before { content: "\f191"; } .bi-book-fill::before { content: "\f192"; } .bi-book-half::before { content: "\f193"; } .bi-book::before { content: "\f194"; } .bi-bookmark-check-fill::before { content: "\f195"; } .bi-bookmark-check::before { content: "\f196"; } .bi-bookmark-dash-fill::before { content: "\f197"; } .bi-bookmark-dash::before { content: "\f198"; } .bi-bookmark-fill::before { content: "\f199"; } .bi-bookmark-heart-fill::before { content: "\f19a"; } .bi-bookmark-heart::before { content: "\f19b"; } .bi-bookmark-plus-fill::before { content: "\f19c"; } .bi-bookmark-plus::before { content: "\f19d"; } .bi-bookmark-star-fill::before { content: "\f19e"; } .bi-bookmark-star::before { content: "\f19f"; } .bi-bookmark-x-fill::before { content: "\f1a0"; } .bi-bookmark-x::before { content: "\f1a1"; } .bi-bookmark::before { content: "\f1a2"; } .bi-bookmarks-fill::before { content: "\f1a3"; } .bi-bookmarks::before { content: "\f1a4"; } .bi-bookshelf::before { content: "\f1a5"; } .bi-bootstrap-fill::before { content: "\f1a6"; } .bi-bootstrap-reboot::before { content: "\f1a7"; } .bi-bootstrap::before { content: "\f1a8"; } .bi-border-all::before { content: "\f1a9"; } .bi-border-bottom::before { content: "\f1aa"; } .bi-border-center::before { content: "\f1ab"; } .bi-border-inner::before { content: "\f1ac"; } .bi-border-left::before { content: "\f1ad"; } .bi-border-middle::before { content: "\f1ae"; } .bi-border-outer::before { content: "\f1af"; } .bi-border-right::before { content: "\f1b0"; } .bi-border-style::before { content: "\f1b1"; } .bi-border-top::before { content: "\f1b2"; } .bi-border-width::before { content: "\f1b3"; } .bi-border::before { content: "\f1b4"; } .bi-bounding-box-circles::before { content: "\f1b5"; } .bi-bounding-box::before { content: "\f1b6"; } .bi-box-arrow-down-left::before { content: "\f1b7"; } .bi-box-arrow-down-right::before { content: "\f1b8"; } .bi-box-arrow-down::before { content: "\f1b9"; } .bi-box-arrow-in-down-left::before { content: "\f1ba"; } .bi-box-arrow-in-down-right::before { content: "\f1bb"; } .bi-box-arrow-in-down::before { content: "\f1bc"; } .bi-box-arrow-in-left::before { content: "\f1bd"; } .bi-box-arrow-in-right::before { content: "\f1be"; } .bi-box-arrow-in-up-left::before { content: "\f1bf"; } .bi-box-arrow-in-up-right::before { content: "\f1c0"; } .bi-box-arrow-in-up::before { content: "\f1c1"; } .bi-box-arrow-left::before { content: "\f1c2"; } .bi-box-arrow-right::before { content: "\f1c3"; } .bi-box-arrow-up-left::before { content: "\f1c4"; } .bi-box-arrow-up-right::before { content: "\f1c5"; } .bi-box-arrow-up::before { content: "\f1c6"; } .bi-box-seam::before { content: "\f1c7"; } .bi-box::before { content: "\f1c8"; } .bi-braces::before { content: "\f1c9"; } .bi-bricks::before { content: "\f1ca"; } .bi-briefcase-fill::before { content: "\f1cb"; } .bi-briefcase::before { content: "\f1cc"; } .bi-brightness-alt-high-fill::before { content: "\f1cd"; } .bi-brightness-alt-high::before { content: "\f1ce"; } .bi-brightness-alt-low-fill::before { content: "\f1cf"; } .bi-brightness-alt-low::before { content: "\f1d0"; } .bi-brightness-high-fill::before { content: "\f1d1"; } .bi-brightness-high::before { content: "\f1d2"; } .bi-brightness-low-fill::before { content: "\f1d3"; } .bi-brightness-low::before { content: "\f1d4"; } .bi-broadcast-pin::before { content: "\f1d5"; } .bi-broadcast::before { content: "\f1d6"; } .bi-brush-fill::before { content: "\f1d7"; } .bi-brush::before { content: "\f1d8"; } .bi-bucket-fill::before { content: "\f1d9"; } .bi-bucket::before { content: "\f1da"; } .bi-bug-fill::before { content: "\f1db"; } .bi-bug::before { content: "\f1dc"; } .bi-building::before { content: "\f1dd"; } .bi-bullseye::before { content: "\f1de"; } .bi-calculator-fill::before { content: "\f1df"; } .bi-calculator::before { content: "\f1e0"; } .bi-calendar-check-fill::before { content: "\f1e1"; } .bi-calendar-check::before { content: "\f1e2"; } .bi-calendar-date-fill::before { content: "\f1e3"; } .bi-calendar-date::before { content: "\f1e4"; } .bi-calendar-day-fill::before { content: "\f1e5"; } .bi-calendar-day::before { content: "\f1e6"; } .bi-calendar-event-fill::before { content: "\f1e7"; } .bi-calendar-event::before { content: "\f1e8"; } .bi-calendar-fill::before { content: "\f1e9"; } .bi-calendar-minus-fill::before { content: "\f1ea"; } .bi-calendar-minus::before { content: "\f1eb"; } .bi-calendar-month-fill::before { content: "\f1ec"; } .bi-calendar-month::before { content: "\f1ed"; } .bi-calendar-plus-fill::before { content: "\f1ee"; } .bi-calendar-plus::before { content: "\f1ef"; } .bi-calendar-range-fill::before { content: "\f1f0"; } .bi-calendar-range::before { content: "\f1f1"; } .bi-calendar-week-fill::before { content: "\f1f2"; } .bi-calendar-week::before { content: "\f1f3"; } .bi-calendar-x-fill::before { content: "\f1f4"; } .bi-calendar-x::before { content: "\f1f5"; } .bi-calendar::before { content: "\f1f6"; } .bi-calendar2-check-fill::before { content: "\f1f7"; } .bi-calendar2-check::before { content: "\f1f8"; } .bi-calendar2-date-fill::before { content: "\f1f9"; } .bi-calendar2-date::before { content: "\f1fa"; } .bi-calendar2-day-fill::before { content: "\f1fb"; } .bi-calendar2-day::before { content: "\f1fc"; } .bi-calendar2-event-fill::before { content: "\f1fd"; } .bi-calendar2-event::before { content: "\f1fe"; } .bi-calendar2-fill::before { content: "\f1ff"; } .bi-calendar2-minus-fill::before { content: "\f200"; } .bi-calendar2-minus::before { content: "\f201"; } .bi-calendar2-month-fill::before { content: "\f202"; } .bi-calendar2-month::before { content: "\f203"; } .bi-calendar2-plus-fill::before { content: "\f204"; } .bi-calendar2-plus::before { content: "\f205"; } .bi-calendar2-range-fill::before { content: "\f206"; } .bi-calendar2-range::before { content: "\f207"; } .bi-calendar2-week-fill::before { content: "\f208"; } .bi-calendar2-week::before { content: "\f209"; } .bi-calendar2-x-fill::before { content: "\f20a"; } .bi-calendar2-x::before { content: "\f20b"; } .bi-calendar2::before { content: "\f20c"; } .bi-calendar3-event-fill::before { content: "\f20d"; } .bi-calendar3-event::before { content: "\f20e"; } .bi-calendar3-fill::before { content: "\f20f"; } .bi-calendar3-range-fill::before { content: "\f210"; } .bi-calendar3-range::before { content: "\f211"; } .bi-calendar3-week-fill::before { content: "\f212"; } .bi-calendar3-week::before { content: "\f213"; } .bi-calendar3::before { content: "\f214"; } .bi-calendar4-event::before { content: "\f215"; } .bi-calendar4-range::before { content: "\f216"; } .bi-calendar4-week::before { content: "\f217"; } .bi-calendar4::before { content: "\f218"; } .bi-camera-fill::before { content: "\f219"; } .bi-camera-reels-fill::before { content: "\f21a"; } .bi-camera-reels::before { content: "\f21b"; } .bi-camera-video-fill::before { content: "\f21c"; } .bi-camera-video-off-fill::before { content: "\f21d"; } .bi-camera-video-off::before { content: "\f21e"; } .bi-camera-video::before { content: "\f21f"; } .bi-camera::before { content: "\f220"; } .bi-camera2::before { content: "\f221"; } .bi-capslock-fill::before { content: "\f222"; } .bi-capslock::before { content: "\f223"; } .bi-card-checklist::before { content: "\f224"; } .bi-card-heading::before { content: "\f225"; } .bi-card-image::before { content: "\f226"; } .bi-card-list::before { content: "\f227"; } .bi-card-text::before { content: "\f228"; } .bi-caret-down-fill::before { content: "\f229"; } .bi-caret-down-square-fill::before { content: "\f22a"; } .bi-caret-down-square::before { content: "\f22b"; } .bi-caret-down::before { content: "\f22c"; } .bi-caret-left-fill::before { content: "\f22d"; } .bi-caret-left-square-fill::before { content: "\f22e"; } .bi-caret-left-square::before { content: "\f22f"; } .bi-caret-left::before { content: "\f230"; } .bi-caret-right-fill::before { content: "\f231"; } .bi-caret-right-square-fill::before { content: "\f232"; } .bi-caret-right-square::before { content: "\f233"; } .bi-caret-right::before { content: "\f234"; } .bi-caret-up-fill::before { content: "\f235"; } .bi-caret-up-square-fill::before { content: "\f236"; } .bi-caret-up-square::before { content: "\f237"; } .bi-caret-up::before { content: "\f238"; } .bi-cart-check-fill::before { content: "\f239"; } .bi-cart-check::before { content: "\f23a"; } .bi-cart-dash-fill::before { content: "\f23b"; } .bi-cart-dash::before { content: "\f23c"; } .bi-cart-fill::before { content: "\f23d"; } .bi-cart-plus-fill::before { content: "\f23e"; } .bi-cart-plus::before { content: "\f23f"; } .bi-cart-x-fill::before { content: "\f240"; } .bi-cart-x::before { content: "\f241"; } .bi-cart::before { content: "\f242"; } .bi-cart2::before { content: "\f243"; } .bi-cart3::before { content: "\f244"; } .bi-cart4::before { content: "\f245"; } .bi-cash-stack::before { content: "\f246"; } .bi-cash::before { content: "\f247"; } .bi-cast::before { content: "\f248"; } .bi-chat-dots-fill::before { content: "\f249"; } .bi-chat-dots::before { content: "\f24a"; } .bi-chat-fill::before { content: "\f24b"; } .bi-chat-left-dots-fill::before { content: "\f24c"; } .bi-chat-left-dots::before { content: "\f24d"; } .bi-chat-left-fill::before { content: "\f24e"; } .bi-chat-left-quote-fill::before { content: "\f24f"; } .bi-chat-left-quote::before { content: "\f250"; } .bi-chat-left-text-fill::before { content: "\f251"; } .bi-chat-left-text::before { content: "\f252"; } .bi-chat-left::before { content: "\f253"; } .bi-chat-quote-fill::before { content: "\f254"; } .bi-chat-quote::before { content: "\f255"; } .bi-chat-right-dots-fill::before { content: "\f256"; } .bi-chat-right-dots::before { content: "\f257"; } .bi-chat-right-fill::before { content: "\f258"; } .bi-chat-right-quote-fill::before { content: "\f259"; } .bi-chat-right-quote::before { content: "\f25a"; } .bi-chat-right-text-fill::before { content: "\f25b"; } .bi-chat-right-text::before { content: "\f25c"; } .bi-chat-right::before { content: "\f25d"; } .bi-chat-square-dots-fill::before { content: "\f25e"; } .bi-chat-square-dots::before { content: "\f25f"; } .bi-chat-square-fill::before { content: "\f260"; } .bi-chat-square-quote-fill::before { content: "\f261"; } .bi-chat-square-quote::before { content: "\f262"; } .bi-chat-square-text-fill::before { content: "\f263"; } .bi-chat-square-text::before { content: "\f264"; } .bi-chat-square::before { content: "\f265"; } .bi-chat-text-fill::before { content: "\f266"; } .bi-chat-text::before { content: "\f267"; } .bi-chat::before { content: "\f268"; } .bi-check-all::before { content: "\f269"; } .bi-check-circle-fill::before { content: "\f26a"; } .bi-check-circle::before { content: "\f26b"; } .bi-check-square-fill::before { content: "\f26c"; } .bi-check-square::before { content: "\f26d"; } .bi-check::before { content: "\f26e"; } .bi-check2-all::before { content: "\f26f"; } .bi-check2-circle::before { content: "\f270"; } .bi-check2-square::before { content: "\f271"; } .bi-check2::before { content: "\f272"; } .bi-chevron-bar-contract::before { content: "\f273"; } .bi-chevron-bar-down::before { content: "\f274"; } .bi-chevron-bar-expand::before { content: "\f275"; } .bi-chevron-bar-left::before { content: "\f276"; } .bi-chevron-bar-right::before { content: "\f277"; } .bi-chevron-bar-up::before { content: "\f278"; } .bi-chevron-compact-down::before { content: "\f279"; } .bi-chevron-compact-left::before { content: "\f27a"; } .bi-chevron-compact-right::before { content: "\f27b"; } .bi-chevron-compact-up::before { content: "\f27c"; } .bi-chevron-contract::before { content: "\f27d"; } .bi-chevron-double-down::before { content: "\f27e"; } .bi-chevron-double-left::before { content: "\f27f"; } .bi-chevron-double-right::before { content: "\f280"; } .bi-chevron-double-up::before { content: "\f281"; } .bi-chevron-down::before { content: "\f282"; } .bi-chevron-expand::before { content: "\f283"; } .bi-chevron-left::before { content: "\f284"; } .bi-chevron-right::before { content: "\f285"; } .bi-chevron-up::before { content: "\f286"; } .bi-circle-fill::before { content: "\f287"; } .bi-circle-half::before { content: "\f288"; } .bi-circle-square::before { content: "\f289"; } .bi-circle::before { content: "\f28a"; } .bi-clipboard-check::before { content: "\f28b"; } .bi-clipboard-data::before { content: "\f28c"; } .bi-clipboard-minus::before { content: "\f28d"; } .bi-clipboard-plus::before { content: "\f28e"; } .bi-clipboard-x::before { content: "\f28f"; } .bi-clipboard::before { content: "\f290"; } .bi-clock-fill::before { content: "\f291"; } .bi-clock-history::before { content: "\f292"; } .bi-clock::before { content: "\f293"; } .bi-cloud-arrow-down-fill::before { content: "\f294"; } .bi-cloud-arrow-down::before { content: "\f295"; } .bi-cloud-arrow-up-fill::before { content: "\f296"; } .bi-cloud-arrow-up::before { content: "\f297"; } .bi-cloud-check-fill::before { content: "\f298"; } .bi-cloud-check::before { content: "\f299"; } .bi-cloud-download-fill::before { content: "\f29a"; } .bi-cloud-download::before { content: "\f29b"; } .bi-cloud-drizzle-fill::before { content: "\f29c"; } .bi-cloud-drizzle::before { content: "\f29d"; } .bi-cloud-fill::before { content: "\f29e"; } .bi-cloud-fog-fill::before { content: "\f29f"; } .bi-cloud-fog::before { content: "\f2a0"; } .bi-cloud-fog2-fill::before { content: "\f2a1"; } .bi-cloud-fog2::before { content: "\f2a2"; } .bi-cloud-hail-fill::before { content: "\f2a3"; } .bi-cloud-hail::before { content: "\f2a4"; } .bi-cloud-haze-fill::before { content: "\f2a6"; } .bi-cloud-haze::before { content: "\f2a7"; } .bi-cloud-haze2-fill::before { content: "\f2a8"; } .bi-cloud-lightning-fill::before { content: "\f2a9"; } .bi-cloud-lightning-rain-fill::before { content: "\f2aa"; } .bi-cloud-lightning-rain::before { content: "\f2ab"; } .bi-cloud-lightning::before { content: "\f2ac"; } .bi-cloud-minus-fill::before { content: "\f2ad"; } .bi-cloud-minus::before { content: "\f2ae"; } .bi-cloud-moon-fill::before { content: "\f2af"; } .bi-cloud-moon::before { content: "\f2b0"; } .bi-cloud-plus-fill::before { content: "\f2b1"; } .bi-cloud-plus::before { content: "\f2b2"; } .bi-cloud-rain-fill::before { content: "\f2b3"; } .bi-cloud-rain-heavy-fill::before { content: "\f2b4"; } .bi-cloud-rain-heavy::before { content: "\f2b5"; } .bi-cloud-rain::before { content: "\f2b6"; } .bi-cloud-slash-fill::before { content: "\f2b7"; } .bi-cloud-slash::before { content: "\f2b8"; } .bi-cloud-sleet-fill::before { content: "\f2b9"; } .bi-cloud-sleet::before { content: "\f2ba"; } .bi-cloud-snow-fill::before { content: "\f2bb"; } .bi-cloud-snow::before { content: "\f2bc"; } .bi-cloud-sun-fill::before { content: "\f2bd"; } .bi-cloud-sun::before { content: "\f2be"; } .bi-cloud-upload-fill::before { content: "\f2bf"; } .bi-cloud-upload::before { content: "\f2c0"; } .bi-cloud::before { content: "\f2c1"; } .bi-clouds-fill::before { content: "\f2c2"; } .bi-clouds::before { content: "\f2c3"; } .bi-cloudy-fill::before { content: "\f2c4"; } .bi-cloudy::before { content: "\f2c5"; } .bi-code-slash::before { content: "\f2c6"; } .bi-code-square::before { content: "\f2c7"; } .bi-code::before { content: "\f2c8"; } .bi-collection-fill::before { content: "\f2c9"; } .bi-collection-play-fill::before { content: "\f2ca"; } .bi-collection-play::before { content: "\f2cb"; } .bi-collection::before { content: "\f2cc"; } .bi-columns-gap::before { content: "\f2cd"; } .bi-columns::before { content: "\f2ce"; } .bi-command::before { content: "\f2cf"; } .bi-compass-fill::before { content: "\f2d0"; } .bi-compass::before { content: "\f2d1"; } .bi-cone-striped::before { content: "\f2d2"; } .bi-cone::before { content: "\f2d3"; } .bi-controller::before { content: "\f2d4"; } .bi-cpu-fill::before { content: "\f2d5"; } .bi-cpu::before { content: "\f2d6"; } .bi-credit-card-2-back-fill::before { content: "\f2d7"; } .bi-credit-card-2-back::before { content: "\f2d8"; } .bi-credit-card-2-front-fill::before { content: "\f2d9"; } .bi-credit-card-2-front::before { content: "\f2da"; } .bi-credit-card-fill::before { content: "\f2db"; } .bi-credit-card::before { content: "\f2dc"; } .bi-crop::before { content: "\f2dd"; } .bi-cup-fill::before { content: "\f2de"; } .bi-cup-straw::before { content: "\f2df"; } .bi-cup::before { content: "\f2e0"; } .bi-cursor-fill::before { content: "\f2e1"; } .bi-cursor-text::before { content: "\f2e2"; } .bi-cursor::before { content: "\f2e3"; } .bi-dash-circle-dotted::before { content: "\f2e4"; } .bi-dash-circle-fill::before { content: "\f2e5"; } .bi-dash-circle::before { content: "\f2e6"; } .bi-dash-square-dotted::before { content: "\f2e7"; } .bi-dash-square-fill::before { content: "\f2e8"; } .bi-dash-square::before { content: "\f2e9"; } .bi-dash::before { content: "\f2ea"; } .bi-diagram-2-fill::before { content: "\f2eb"; } .bi-diagram-2::before { content: "\f2ec"; } .bi-diagram-3-fill::before { content: "\f2ed"; } .bi-diagram-3::before { content: "\f2ee"; } .bi-diamond-fill::before { content: "\f2ef"; } .bi-diamond-half::before { content: "\f2f0"; } .bi-diamond::before { content: "\f2f1"; } .bi-dice-1-fill::before { content: "\f2f2"; } .bi-dice-1::before { content: "\f2f3"; } .bi-dice-2-fill::before { content: "\f2f4"; } .bi-dice-2::before { content: "\f2f5"; } .bi-dice-3-fill::before { content: "\f2f6"; } .bi-dice-3::before { content: "\f2f7"; } .bi-dice-4-fill::before { content: "\f2f8"; } .bi-dice-4::before { content: "\f2f9"; } .bi-dice-5-fill::before { content: "\f2fa"; } .bi-dice-5::before { content: "\f2fb"; } .bi-dice-6-fill::before { content: "\f2fc"; } .bi-dice-6::before { content: "\f2fd"; } .bi-disc-fill::before { content: "\f2fe"; } .bi-disc::before { content: "\f2ff"; } .bi-discord::before { content: "\f300"; } .bi-display-fill::before { content: "\f301"; } .bi-display::before { content: "\f302"; } .bi-distribute-horizontal::before { content: "\f303"; } .bi-distribute-vertical::before { content: "\f304"; } .bi-door-closed-fill::before { content: "\f305"; } .bi-door-closed::before { content: "\f306"; } .bi-door-open-fill::before { content: "\f307"; } .bi-door-open::before { content: "\f308"; } .bi-dot::before { content: "\f309"; } .bi-download::before { content: "\f30a"; } .bi-droplet-fill::before { content: "\f30b"; } .bi-droplet-half::before { content: "\f30c"; } .bi-droplet::before { content: "\f30d"; } .bi-earbuds::before { content: "\f30e"; } .bi-easel-fill::before { content: "\f30f"; } .bi-easel::before { content: "\f310"; } .bi-egg-fill::before { content: "\f311"; } .bi-egg-fried::before { content: "\f312"; } .bi-egg::before { content: "\f313"; } .bi-eject-fill::before { content: "\f314"; } .bi-eject::before { content: "\f315"; } .bi-emoji-angry-fill::before { content: "\f316"; } .bi-emoji-angry::before { content: "\f317"; } .bi-emoji-dizzy-fill::before { content: "\f318"; } .bi-emoji-dizzy::before { content: "\f319"; } .bi-emoji-expressionless-fill::before { content: "\f31a"; } .bi-emoji-expressionless::before { content: "\f31b"; } .bi-emoji-frown-fill::before { content: "\f31c"; } .bi-emoji-frown::before { content: "\f31d"; } .bi-emoji-heart-eyes-fill::before { content: "\f31e"; } .bi-emoji-heart-eyes::before { content: "\f31f"; } .bi-emoji-laughing-fill::before { content: "\f320"; } .bi-emoji-laughing::before { content: "\f321"; } .bi-emoji-neutral-fill::before { content: "\f322"; } .bi-emoji-neutral::before { content: "\f323"; } .bi-emoji-smile-fill::before { content: "\f324"; } .bi-emoji-smile-upside-down-fill::before { content: "\f325"; } .bi-emoji-smile-upside-down::before { content: "\f326"; } .bi-emoji-smile::before { content: "\f327"; } .bi-emoji-sunglasses-fill::before { content: "\f328"; } .bi-emoji-sunglasses::before { content: "\f329"; } .bi-emoji-wink-fill::before { content: "\f32a"; } .bi-emoji-wink::before { content: "\f32b"; } .bi-envelope-fill::before { content: "\f32c"; } .bi-envelope-open-fill::before { content: "\f32d"; } .bi-envelope-open::before { content: "\f32e"; } .bi-envelope::before { content: "\f32f"; } .bi-eraser-fill::before { content: "\f330"; } .bi-eraser::before { content: "\f331"; } .bi-exclamation-circle-fill::before { content: "\f332"; } .bi-exclamation-circle::before { content: "\f333"; } .bi-exclamation-diamond-fill::before { content: "\f334"; } .bi-exclamation-diamond::before { content: "\f335"; } .bi-exclamation-octagon-fill::before { content: "\f336"; } .bi-exclamation-octagon::before { content: "\f337"; } .bi-exclamation-square-fill::before { content: "\f338"; } .bi-exclamation-square::before { content: "\f339"; } .bi-exclamation-triangle-fill::before { content: "\f33a"; } .bi-exclamation-triangle::before { content: "\f33b"; } .bi-exclamation::before { content: "\f33c"; } .bi-exclude::before { content: "\f33d"; } .bi-eye-fill::before { content: "\f33e"; } .bi-eye-slash-fill::before { content: "\f33f"; } .bi-eye-slash::before { content: "\f340"; } .bi-eye::before { content: "\f341"; } .bi-eyedropper::before { content: "\f342"; } .bi-eyeglasses::before { content: "\f343"; } .bi-facebook::before { content: "\f344"; } .bi-file-arrow-down-fill::before { content: "\f345"; } .bi-file-arrow-down::before { content: "\f346"; } .bi-file-arrow-up-fill::before { content: "\f347"; } .bi-file-arrow-up::before { content: "\f348"; } .bi-file-bar-graph-fill::before { content: "\f349"; } .bi-file-bar-graph::before { content: "\f34a"; } .bi-file-binary-fill::before { content: "\f34b"; } .bi-file-binary::before { content: "\f34c"; } .bi-file-break-fill::before { content: "\f34d"; } .bi-file-break::before { content: "\f34e"; } .bi-file-check-fill::before { content: "\f34f"; } .bi-file-check::before { content: "\f350"; } .bi-file-code-fill::before { content: "\f351"; } .bi-file-code::before { content: "\f352"; } .bi-file-diff-fill::before { content: "\f353"; } .bi-file-diff::before { content: "\f354"; } .bi-file-earmark-arrow-down-fill::before { content: "\f355"; } .bi-file-earmark-arrow-down::before { content: "\f356"; } .bi-file-earmark-arrow-up-fill::before { content: "\f357"; } .bi-file-earmark-arrow-up::before { content: "\f358"; } .bi-file-earmark-bar-graph-fill::before { content: "\f359"; } .bi-file-earmark-bar-graph::before { content: "\f35a"; } .bi-file-earmark-binary-fill::before { content: "\f35b"; } .bi-file-earmark-binary::before { content: "\f35c"; } .bi-file-earmark-break-fill::before { content: "\f35d"; } .bi-file-earmark-break::before { content: "\f35e"; } .bi-file-earmark-check-fill::before { content: "\f35f"; } .bi-file-earmark-check::before { content: "\f360"; } .bi-file-earmark-code-fill::before { content: "\f361"; } .bi-file-earmark-code::before { content: "\f362"; } .bi-file-earmark-diff-fill::before { content: "\f363"; } .bi-file-earmark-diff::before { content: "\f364"; } .bi-file-earmark-easel-fill::before { content: "\f365"; } .bi-file-earmark-easel::before { content: "\f366"; } .bi-file-earmark-excel-fill::before { content: "\f367"; } .bi-file-earmark-excel::before { content: "\f368"; } .bi-file-earmark-fill::before { content: "\f369"; } .bi-file-earmark-font-fill::before { content: "\f36a"; } .bi-file-earmark-font::before { content: "\f36b"; } .bi-file-earmark-image-fill::before { content: "\f36c"; } .bi-file-earmark-image::before { content: "\f36d"; } .bi-file-earmark-lock-fill::before { content: "\f36e"; } .bi-file-earmark-lock::before { content: "\f36f"; } .bi-file-earmark-lock2-fill::before { content: "\f370"; } .bi-file-earmark-lock2::before { content: "\f371"; } .bi-file-earmark-medical-fill::before { content: "\f372"; } .bi-file-earmark-medical::before { content: "\f373"; } .bi-file-earmark-minus-fill::before { content: "\f374"; } .bi-file-earmark-minus::before { content: "\f375"; } .bi-file-earmark-music-fill::before { content: "\f376"; } .bi-file-earmark-music::before { content: "\f377"; } .bi-file-earmark-person-fill::before { content: "\f378"; } .bi-file-earmark-person::before { content: "\f379"; } .bi-file-earmark-play-fill::before { content: "\f37a"; } .bi-file-earmark-play::before { content: "\f37b"; } .bi-file-earmark-plus-fill::before { content: "\f37c"; } .bi-file-earmark-plus::before { content: "\f37d"; } .bi-file-earmark-post-fill::before { content: "\f37e"; } .bi-file-earmark-post::before { content: "\f37f"; } .bi-file-earmark-ppt-fill::before { content: "\f380"; } .bi-file-earmark-ppt::before { content: "\f381"; } .bi-file-earmark-richtext-fill::before { content: "\f382"; } .bi-file-earmark-richtext::before { content: "\f383"; } .bi-file-earmark-ruled-fill::before { content: "\f384"; } .bi-file-earmark-ruled::before { content: "\f385"; } .bi-file-earmark-slides-fill::before { content: "\f386"; } .bi-file-earmark-slides::before { content: "\f387"; } .bi-file-earmark-spreadsheet-fill::before { content: "\f388"; } .bi-file-earmark-spreadsheet::before { content: "\f389"; } .bi-file-earmark-text-fill::before { content: "\f38a"; } .bi-file-earmark-text::before { content: "\f38b"; } .bi-file-earmark-word-fill::before { content: "\f38c"; } .bi-file-earmark-word::before { content: "\f38d"; } .bi-file-earmark-x-fill::before { content: "\f38e"; } .bi-file-earmark-x::before { content: "\f38f"; } .bi-file-earmark-zip-fill::before { content: "\f390"; } .bi-file-earmark-zip::before { content: "\f391"; } .bi-file-earmark::before { content: "\f392"; } .bi-file-easel-fill::before { content: "\f393"; } .bi-file-easel::before { content: "\f394"; } .bi-file-excel-fill::before { content: "\f395"; } .bi-file-excel::before { content: "\f396"; } .bi-file-fill::before { content: "\f397"; } .bi-file-font-fill::before { content: "\f398"; } .bi-file-font::before { content: "\f399"; } .bi-file-image-fill::before { content: "\f39a"; } .bi-file-image::before { content: "\f39b"; } .bi-file-lock-fill::before { content: "\f39c"; } .bi-file-lock::before { content: "\f39d"; } .bi-file-lock2-fill::before { content: "\f39e"; } .bi-file-lock2::before { content: "\f39f"; } .bi-file-medical-fill::before { content: "\f3a0"; } .bi-file-medical::before { content: "\f3a1"; } .bi-file-minus-fill::before { content: "\f3a2"; } .bi-file-minus::before { content: "\f3a3"; } .bi-file-music-fill::before { content: "\f3a4"; } .bi-file-music::before { content: "\f3a5"; } .bi-file-person-fill::before { content: "\f3a6"; } .bi-file-person::before { content: "\f3a7"; } .bi-file-play-fill::before { content: "\f3a8"; } .bi-file-play::before { content: "\f3a9"; } .bi-file-plus-fill::before { content: "\f3aa"; } .bi-file-plus::before { content: "\f3ab"; } .bi-file-post-fill::before { content: "\f3ac"; } .bi-file-post::before { content: "\f3ad"; } .bi-file-ppt-fill::before { content: "\f3ae"; } .bi-file-ppt::before { content: "\f3af"; } .bi-file-richtext-fill::before { content: "\f3b0"; } .bi-file-richtext::before { content: "\f3b1"; } .bi-file-ruled-fill::before { content: "\f3b2"; } .bi-file-ruled::before { content: "\f3b3"; } .bi-file-slides-fill::before { content: "\f3b4"; } .bi-file-slides::before { content: "\f3b5"; } .bi-file-spreadsheet-fill::before { content: "\f3b6"; } .bi-file-spreadsheet::before { content: "\f3b7"; } .bi-file-text-fill::before { content: "\f3b8"; } .bi-file-text::before { content: "\f3b9"; } .bi-file-word-fill::before { content: "\f3ba"; } .bi-file-word::before { content: "\f3bb"; } .bi-file-x-fill::before { content: "\f3bc"; } .bi-file-x::before { content: "\f3bd"; } .bi-file-zip-fill::before { content: "\f3be"; } .bi-file-zip::before { content: "\f3bf"; } .bi-file::before { content: "\f3c0"; } .bi-files-alt::before { content: "\f3c1"; } .bi-files::before { content: "\f3c2"; } .bi-film::before { content: "\f3c3"; } .bi-filter-circle-fill::before { content: "\f3c4"; } .bi-filter-circle::before { content: "\f3c5"; } .bi-filter-left::before { content: "\f3c6"; } .bi-filter-right::before { content: "\f3c7"; } .bi-filter-square-fill::before { content: "\f3c8"; } .bi-filter-square::before { content: "\f3c9"; } .bi-filter::before { content: "\f3ca"; } .bi-flag-fill::before { content: "\f3cb"; } .bi-flag::before { content: "\f3cc"; } .bi-flower1::before { content: "\f3cd"; } .bi-flower2::before { content: "\f3ce"; } .bi-flower3::before { content: "\f3cf"; } .bi-folder-check::before { content: "\f3d0"; } .bi-folder-fill::before { content: "\f3d1"; } .bi-folder-minus::before { content: "\f3d2"; } .bi-folder-plus::before { content: "\f3d3"; } .bi-folder-symlink-fill::before { content: "\f3d4"; } .bi-folder-symlink::before { content: "\f3d5"; } .bi-folder-x::before { content: "\f3d6"; } .bi-folder::before { content: "\f3d7"; } .bi-folder2-open::before { content: "\f3d8"; } .bi-folder2::before { content: "\f3d9"; } .bi-fonts::before { content: "\f3da"; } .bi-forward-fill::before { content: "\f3db"; } .bi-forward::before { content: "\f3dc"; } .bi-front::before { content: "\f3dd"; } .bi-fullscreen-exit::before { content: "\f3de"; } .bi-fullscreen::before { content: "\f3df"; } .bi-funnel-fill::before { content: "\f3e0"; } .bi-funnel::before { content: "\f3e1"; } .bi-gear-fill::before { content: "\f3e2"; } .bi-gear-wide-connected::before { content: "\f3e3"; } .bi-gear-wide::before { content: "\f3e4"; } .bi-gear::before { content: "\f3e5"; } .bi-gem::before { content: "\f3e6"; } .bi-geo-alt-fill::before { content: "\f3e7"; } .bi-geo-alt::before { content: "\f3e8"; } .bi-geo-fill::before { content: "\f3e9"; } .bi-geo::before { content: "\f3ea"; } .bi-gift-fill::before { content: "\f3eb"; } .bi-gift::before { content: "\f3ec"; } .bi-github::before { content: "\f3ed"; } .bi-globe::before { content: "\f3ee"; } .bi-globe2::before { content: "\f3ef"; } .bi-google::before { content: "\f3f0"; } .bi-graph-down::before { content: "\f3f1"; } .bi-graph-up::before { content: "\f3f2"; } .bi-grid-1x2-fill::before { content: "\f3f3"; } .bi-grid-1x2::before { content: "\f3f4"; } .bi-grid-3x2-gap-fill::before { content: "\f3f5"; } .bi-grid-3x2-gap::before { content: "\f3f6"; } .bi-grid-3x2::before { content: "\f3f7"; } .bi-grid-3x3-gap-fill::before { content: "\f3f8"; } .bi-grid-3x3-gap::before { content: "\f3f9"; } .bi-grid-3x3::before { content: "\f3fa"; } .bi-grid-fill::before { content: "\f3fb"; } .bi-grid::before { content: "\f3fc"; } .bi-grip-horizontal::before { content: "\f3fd"; } .bi-grip-vertical::before { content: "\f3fe"; } .bi-hammer::before { content: "\f3ff"; } .bi-hand-index-fill::before { content: "\f400"; } .bi-hand-index-thumb-fill::before { content: "\f401"; } .bi-hand-index-thumb::before { content: "\f402"; } .bi-hand-index::before { content: "\f403"; } .bi-hand-thumbs-down-fill::before { content: "\f404"; } .bi-hand-thumbs-down::before { content: "\f405"; } .bi-hand-thumbs-up-fill::before { content: "\f406"; } .bi-hand-thumbs-up::before { content: "\f407"; } .bi-handbag-fill::before { content: "\f408"; } .bi-handbag::before { content: "\f409"; } .bi-hash::before { content: "\f40a"; } .bi-hdd-fill::before { content: "\f40b"; } .bi-hdd-network-fill::before { content: "\f40c"; } .bi-hdd-network::before { content: "\f40d"; } .bi-hdd-rack-fill::before { content: "\f40e"; } .bi-hdd-rack::before { content: "\f40f"; } .bi-hdd-stack-fill::before { content: "\f410"; } .bi-hdd-stack::before { content: "\f411"; } .bi-hdd::before { content: "\f412"; } .bi-headphones::before { content: "\f413"; } .bi-headset::before { content: "\f414"; } .bi-heart-fill::before { content: "\f415"; } .bi-heart-half::before { content: "\f416"; } .bi-heart::before { content: "\f417"; } .bi-heptagon-fill::before { content: "\f418"; } .bi-heptagon-half::before { content: "\f419"; } .bi-heptagon::before { content: "\f41a"; } .bi-hexagon-fill::before { content: "\f41b"; } .bi-hexagon-half::before { content: "\f41c"; } .bi-hexagon::before { content: "\f41d"; } .bi-hourglass-bottom::before { content: "\f41e"; } .bi-hourglass-split::before { content: "\f41f"; } .bi-hourglass-top::before { content: "\f420"; } .bi-hourglass::before { content: "\f421"; } .bi-house-door-fill::before { content: "\f422"; } .bi-house-door::before { content: "\f423"; } .bi-house-fill::before { content: "\f424"; } .bi-house::before { content: "\f425"; } .bi-hr::before { content: "\f426"; } .bi-hurricane::before { content: "\f427"; } .bi-image-alt::before { content: "\f428"; } .bi-image-fill::before { content: "\f429"; } .bi-image::before { content: "\f42a"; } .bi-images::before { content: "\f42b"; } .bi-inbox-fill::before { content: "\f42c"; } .bi-inbox::before { content: "\f42d"; } .bi-inboxes-fill::before { content: "\f42e"; } .bi-inboxes::before { content: "\f42f"; } .bi-info-circle-fill::before { content: "\f430"; } .bi-info-circle::before { content: "\f431"; } .bi-info-square-fill::before { content: "\f432"; } .bi-info-square::before { content: "\f433"; } .bi-info::before { content: "\f434"; } .bi-input-cursor-text::before { content: "\f435"; } .bi-input-cursor::before { content: "\f436"; } .bi-instagram::before { content: "\f437"; } .bi-intersect::before { content: "\f438"; } .bi-journal-album::before { content: "\f439"; } .bi-journal-arrow-down::before { content: "\f43a"; } .bi-journal-arrow-up::before { content: "\f43b"; } .bi-journal-bookmark-fill::before { content: "\f43c"; } .bi-journal-bookmark::before { content: "\f43d"; } .bi-journal-check::before { content: "\f43e"; } .bi-journal-code::before { content: "\f43f"; } .bi-journal-medical::before { content: "\f440"; } .bi-journal-minus::before { content: "\f441"; } .bi-journal-plus::before { content: "\f442"; } .bi-journal-richtext::before { content: "\f443"; } .bi-journal-text::before { content: "\f444"; } .bi-journal-x::before { content: "\f445"; } .bi-journal::before { content: "\f446"; } .bi-journals::before { content: "\f447"; } .bi-joystick::before { content: "\f448"; } .bi-justify-left::before { content: "\f449"; } .bi-justify-right::before { content: "\f44a"; } .bi-justify::before { content: "\f44b"; } .bi-kanban-fill::before { content: "\f44c"; } .bi-kanban::before { content: "\f44d"; } .bi-key-fill::before { content: "\f44e"; } .bi-key::before { content: "\f44f"; } .bi-keyboard-fill::before { content: "\f450"; } .bi-keyboard::before { content: "\f451"; } .bi-ladder::before { content: "\f452"; } .bi-lamp-fill::before { content: "\f453"; } .bi-lamp::before { content: "\f454"; } .bi-laptop-fill::before { content: "\f455"; } .bi-laptop::before { content: "\f456"; } .bi-layer-backward::before { content: "\f457"; } .bi-layer-forward::before { content: "\f458"; } .bi-layers-fill::before { content: "\f459"; } .bi-layers-half::before { content: "\f45a"; } .bi-layers::before { content: "\f45b"; } .bi-layout-sidebar-inset-reverse::before { content: "\f45c"; } .bi-layout-sidebar-inset::before { content: "\f45d"; } .bi-layout-sidebar-reverse::before { content: "\f45e"; } .bi-layout-sidebar::before { content: "\f45f"; } .bi-layout-split::before { content: "\f460"; } .bi-layout-text-sidebar-reverse::before { content: "\f461"; } .bi-layout-text-sidebar::before { content: "\f462"; } .bi-layout-text-window-reverse::before { content: "\f463"; } .bi-layout-text-window::before { content: "\f464"; } .bi-layout-three-columns::before { content: "\f465"; } .bi-layout-wtf::before { content: "\f466"; } .bi-life-preserver::before { content: "\f467"; } .bi-lightbulb-fill::before { content: "\f468"; } .bi-lightbulb-off-fill::before { content: "\f469"; } .bi-lightbulb-off::before { content: "\f46a"; } .bi-lightbulb::before { content: "\f46b"; } .bi-lightning-charge-fill::before { content: "\f46c"; } .bi-lightning-charge::before { content: "\f46d"; } .bi-lightning-fill::before { content: "\f46e"; } .bi-lightning::before { content: "\f46f"; } .bi-link-45deg::before { content: "\f470"; } .bi-link::before { content: "\f471"; } .bi-linkedin::before { content: "\f472"; } .bi-list-check::before { content: "\f473"; } .bi-list-nested::before { content: "\f474"; } .bi-list-ol::before { content: "\f475"; } .bi-list-stars::before { content: "\f476"; } .bi-list-task::before { content: "\f477"; } .bi-list-ul::before { content: "\f478"; } .bi-list::before { content: "\f479"; } .bi-lock-fill::before { content: "\f47a"; } .bi-lock::before { content: "\f47b"; } .bi-mailbox::before { content: "\f47c"; } .bi-mailbox2::before { content: "\f47d"; } .bi-map-fill::before { content: "\f47e"; } .bi-map::before { content: "\f47f"; } .bi-markdown-fill::before { content: "\f480"; } .bi-markdown::before { content: "\f481"; } .bi-mask::before { content: "\f482"; } .bi-megaphone-fill::before { content: "\f483"; } .bi-megaphone::before { content: "\f484"; } .bi-menu-app-fill::before { content: "\f485"; } .bi-menu-app::before { content: "\f486"; } .bi-menu-button-fill::before { content: "\f487"; } .bi-menu-button-wide-fill::before { content: "\f488"; } .bi-menu-button-wide::before { content: "\f489"; } .bi-menu-button::before { content: "\f48a"; } .bi-menu-down::before { content: "\f48b"; } .bi-menu-up::before { content: "\f48c"; } .bi-mic-fill::before { content: "\f48d"; } .bi-mic-mute-fill::before { content: "\f48e"; } .bi-mic-mute::before { content: "\f48f"; } .bi-mic::before { content: "\f490"; } .bi-minecart-loaded::before { content: "\f491"; } .bi-minecart::before { content: "\f492"; } .bi-moisture::before { content: "\f493"; } .bi-moon-fill::before { content: "\f494"; } .bi-moon-stars-fill::before { content: "\f495"; } .bi-moon-stars::before { content: "\f496"; } .bi-moon::before { content: "\f497"; } .bi-mouse-fill::before { content: "\f498"; } .bi-mouse::before { content: "\f499"; } .bi-mouse2-fill::before { content: "\f49a"; } .bi-mouse2::before { content: "\f49b"; } .bi-mouse3-fill::before { content: "\f49c"; } .bi-mouse3::before { content: "\f49d"; } .bi-music-note-beamed::before { content: "\f49e"; } .bi-music-note-list::before { content: "\f49f"; } .bi-music-note::before { content: "\f4a0"; } .bi-music-player-fill::before { content: "\f4a1"; } .bi-music-player::before { content: "\f4a2"; } .bi-newspaper::before { content: "\f4a3"; } .bi-node-minus-fill::before { content: "\f4a4"; } .bi-node-minus::before { content: "\f4a5"; } .bi-node-plus-fill::before { content: "\f4a6"; } .bi-node-plus::before { content: "\f4a7"; } .bi-nut-fill::before { content: "\f4a8"; } .bi-nut::before { content: "\f4a9"; } .bi-octagon-fill::before { content: "\f4aa"; } .bi-octagon-half::before { content: "\f4ab"; } .bi-octagon::before { content: "\f4ac"; } .bi-option::before { content: "\f4ad"; } .bi-outlet::before { content: "\f4ae"; } .bi-paint-bucket::before { content: "\f4af"; } .bi-palette-fill::before { content: "\f4b0"; } .bi-palette::before { content: "\f4b1"; } .bi-palette2::before { content: "\f4b2"; } .bi-paperclip::before { content: "\f4b3"; } .bi-paragraph::before { content: "\f4b4"; } .bi-patch-check-fill::before { content: "\f4b5"; } .bi-patch-check::before { content: "\f4b6"; } .bi-patch-exclamation-fill::before { content: "\f4b7"; } .bi-patch-exclamation::before { content: "\f4b8"; } .bi-patch-minus-fill::before { content: "\f4b9"; } .bi-patch-minus::before { content: "\f4ba"; } .bi-patch-plus-fill::before { content: "\f4bb"; } .bi-patch-plus::before { content: "\f4bc"; } .bi-patch-question-fill::before { content: "\f4bd"; } .bi-patch-question::before { content: "\f4be"; } .bi-pause-btn-fill::before { content: "\f4bf"; } .bi-pause-btn::before { content: "\f4c0"; } .bi-pause-circle-fill::before { content: "\f4c1"; } .bi-pause-circle::before { content: "\f4c2"; } .bi-pause-fill::before { content: "\f4c3"; } .bi-pause::before { content: "\f4c4"; } .bi-peace-fill::before { content: "\f4c5"; } .bi-peace::before { content: "\f4c6"; } .bi-pen-fill::before { content: "\f4c7"; } .bi-pen::before { content: "\f4c8"; } .bi-pencil-fill::before { content: "\f4c9"; } .bi-pencil-square::before { content: "\f4ca"; } .bi-pencil::before { content: "\f4cb"; } .bi-pentagon-fill::before { content: "\f4cc"; } .bi-pentagon-half::before { content: "\f4cd"; } .bi-pentagon::before { content: "\f4ce"; } .bi-people-fill::before { content: "\f4cf"; } .bi-people::before { content: "\f4d0"; } .bi-percent::before { content: "\f4d1"; } .bi-person-badge-fill::before { content: "\f4d2"; } .bi-person-badge::before { content: "\f4d3"; } .bi-person-bounding-box::before { content: "\f4d4"; } .bi-person-check-fill::before { content: "\f4d5"; } .bi-person-check::before { content: "\f4d6"; } .bi-person-circle::before { content: "\f4d7"; } .bi-person-dash-fill::before { content: "\f4d8"; } .bi-person-dash::before { content: "\f4d9"; } .bi-person-fill::before { content: "\f4da"; } .bi-person-lines-fill::before { content: "\f4db"; } .bi-person-plus-fill::before { content: "\f4dc"; } .bi-person-plus::before { content: "\f4dd"; } .bi-person-square::before { content: "\f4de"; } .bi-person-x-fill::before { content: "\f4df"; } .bi-person-x::before { content: "\f4e0"; } .bi-person::before { content: "\f4e1"; } .bi-phone-fill::before { content: "\f4e2"; } .bi-phone-landscape-fill::before { content: "\f4e3"; } .bi-phone-landscape::before { content: "\f4e4"; } .bi-phone-vibrate-fill::before { content: "\f4e5"; } .bi-phone-vibrate::before { content: "\f4e6"; } .bi-phone::before { content: "\f4e7"; } .bi-pie-chart-fill::before { content: "\f4e8"; } .bi-pie-chart::before { content: "\f4e9"; } .bi-pin-angle-fill::before { content: "\f4ea"; } .bi-pin-angle::before { content: "\f4eb"; } .bi-pin-fill::before { content: "\f4ec"; } .bi-pin::before { content: "\f4ed"; } .bi-pip-fill::before { content: "\f4ee"; } .bi-pip::before { content: "\f4ef"; } .bi-play-btn-fill::before { content: "\f4f0"; } .bi-play-btn::before { content: "\f4f1"; } .bi-play-circle-fill::before { content: "\f4f2"; } .bi-play-circle::before { content: "\f4f3"; } .bi-play-fill::before { content: "\f4f4"; } .bi-play::before { content: "\f4f5"; } .bi-plug-fill::before { content: "\f4f6"; } .bi-plug::before { content: "\f4f7"; } .bi-plus-circle-dotted::before { content: "\f4f8"; } .bi-plus-circle-fill::before { content: "\f4f9"; } .bi-plus-circle::before { content: "\f4fa"; } .bi-plus-square-dotted::before { content: "\f4fb"; } .bi-plus-square-fill::before { content: "\f4fc"; } .bi-plus-square::before { content: "\f4fd"; } .bi-plus::before { content: "\f4fe"; } .bi-power::before { content: "\f4ff"; } .bi-printer-fill::before { content: "\f500"; } .bi-printer::before { content: "\f501"; } .bi-puzzle-fill::before { content: "\f502"; } .bi-puzzle::before { content: "\f503"; } .bi-question-circle-fill::before { content: "\f504"; } .bi-question-circle::before { content: "\f505"; } .bi-question-diamond-fill::before { content: "\f506"; } .bi-question-diamond::before { content: "\f507"; } .bi-question-octagon-fill::before { content: "\f508"; } .bi-question-octagon::before { content: "\f509"; } .bi-question-square-fill::before { content: "\f50a"; } .bi-question-square::before { content: "\f50b"; } .bi-question::before { content: "\f50c"; } .bi-rainbow::before { content: "\f50d"; } .bi-receipt-cutoff::before { content: "\f50e"; } .bi-receipt::before { content: "\f50f"; } .bi-reception-0::before { content: "\f510"; } .bi-reception-1::before { content: "\f511"; } .bi-reception-2::before { content: "\f512"; } .bi-reception-3::before { content: "\f513"; } .bi-reception-4::before { content: "\f514"; } .bi-record-btn-fill::before { content: "\f515"; } .bi-record-btn::before { content: "\f516"; } .bi-record-circle-fill::before { content: "\f517"; } .bi-record-circle::before { content: "\f518"; } .bi-record-fill::before { content: "\f519"; } .bi-record::before { content: "\f51a"; } .bi-record2-fill::before { content: "\f51b"; } .bi-record2::before { content: "\f51c"; } .bi-reply-all-fill::before { content: "\f51d"; } .bi-reply-all::before { content: "\f51e"; } .bi-reply-fill::before { content: "\f51f"; } .bi-reply::before { content: "\f520"; } .bi-rss-fill::before { content: "\f521"; } .bi-rss::before { content: "\f522"; } .bi-rulers::before { content: "\f523"; } .bi-save-fill::before { content: "\f524"; } .bi-save::before { content: "\f525"; } .bi-save2-fill::before { content: "\f526"; } .bi-save2::before { content: "\f527"; } .bi-scissors::before { content: "\f528"; } .bi-screwdriver::before { content: "\f529"; } .bi-search::before { content: "\f52a"; } .bi-segmented-nav::before { content: "\f52b"; } .bi-server::before { content: "\f52c"; } .bi-share-fill::before { content: "\f52d"; } .bi-share::before { content: "\f52e"; } .bi-shield-check::before { content: "\f52f"; } .bi-shield-exclamation::before { content: "\f530"; } .bi-shield-fill-check::before { content: "\f531"; } .bi-shield-fill-exclamation::before { content: "\f532"; } .bi-shield-fill-minus::before { content: "\f533"; } .bi-shield-fill-plus::before { content: "\f534"; } .bi-shield-fill-x::before { content: "\f535"; } .bi-shield-fill::before { content: "\f536"; } .bi-shield-lock-fill::before { content: "\f537"; } .bi-shield-lock::before { content: "\f538"; } .bi-shield-minus::before { content: "\f539"; } .bi-shield-plus::before { content: "\f53a"; } .bi-shield-shaded::before { content: "\f53b"; } .bi-shield-slash-fill::before { content: "\f53c"; } .bi-shield-slash::before { content: "\f53d"; } .bi-shield-x::before { content: "\f53e"; } .bi-shield::before { content: "\f53f"; } .bi-shift-fill::before { content: "\f540"; } .bi-shift::before { content: "\f541"; } .bi-shop-window::before { content: "\f542"; } .bi-shop::before { content: "\f543"; } .bi-shuffle::before { content: "\f544"; } .bi-signpost-2-fill::before { content: "\f545"; } .bi-signpost-2::before { content: "\f546"; } .bi-signpost-fill::before { content: "\f547"; } .bi-signpost-split-fill::before { content: "\f548"; } .bi-signpost-split::before { content: "\f549"; } .bi-signpost::before { content: "\f54a"; } .bi-sim-fill::before { content: "\f54b"; } .bi-sim::before { content: "\f54c"; } .bi-skip-backward-btn-fill::before { content: "\f54d"; } .bi-skip-backward-btn::before { content: "\f54e"; } .bi-skip-backward-circle-fill::before { content: "\f54f"; } .bi-skip-backward-circle::before { content: "\f550"; } .bi-skip-backward-fill::before { content: "\f551"; } .bi-skip-backward::before { content: "\f552"; } .bi-skip-end-btn-fill::before { content: "\f553"; } .bi-skip-end-btn::before { content: "\f554"; } .bi-skip-end-circle-fill::before { content: "\f555"; } .bi-skip-end-circle::before { content: "\f556"; } .bi-skip-end-fill::before { content: "\f557"; } .bi-skip-end::before { content: "\f558"; } .bi-skip-forward-btn-fill::before { content: "\f559"; } .bi-skip-forward-btn::before { content: "\f55a"; } .bi-skip-forward-circle-fill::before { content: "\f55b"; } .bi-skip-forward-circle::before { content: "\f55c"; } .bi-skip-forward-fill::before { content: "\f55d"; } .bi-skip-forward::before { content: "\f55e"; } .bi-skip-start-btn-fill::before { content: "\f55f"; } .bi-skip-start-btn::before { content: "\f560"; } .bi-skip-start-circle-fill::before { content: "\f561"; } .bi-skip-start-circle::before { content: "\f562"; } .bi-skip-start-fill::before { content: "\f563"; } .bi-skip-start::before { content: "\f564"; } .bi-slack::before { content: "\f565"; } .bi-slash-circle-fill::before { content: "\f566"; } .bi-slash-circle::before { content: "\f567"; } .bi-slash-square-fill::before { content: "\f568"; } .bi-slash-square::before { content: "\f569"; } .bi-slash::before { content: "\f56a"; } .bi-sliders::before { content: "\f56b"; } .bi-smartwatch::before { content: "\f56c"; } .bi-snow::before { content: "\f56d"; } .bi-snow2::before { content: "\f56e"; } .bi-snow3::before { content: "\f56f"; } .bi-sort-alpha-down-alt::before { content: "\f570"; } .bi-sort-alpha-down::before { content: "\f571"; } .bi-sort-alpha-up-alt::before { content: "\f572"; } .bi-sort-alpha-up::before { content: "\f573"; } .bi-sort-down-alt::before { content: "\f574"; } .bi-sort-down::before { content: "\f575"; } .bi-sort-numeric-down-alt::before { content: "\f576"; } .bi-sort-numeric-down::before { content: "\f577"; } .bi-sort-numeric-up-alt::before { content: "\f578"; } .bi-sort-numeric-up::before { content: "\f579"; } .bi-sort-up-alt::before { content: "\f57a"; } .bi-sort-up::before { content: "\f57b"; } .bi-soundwave::before { content: "\f57c"; } .bi-speaker-fill::before { content: "\f57d"; } .bi-speaker::before { content: "\f57e"; } .bi-speedometer::before { content: "\f57f"; } .bi-speedometer2::before { content: "\f580"; } .bi-spellcheck::before { content: "\f581"; } .bi-square-fill::before { content: "\f582"; } .bi-square-half::before { content: "\f583"; } .bi-square::before { content: "\f584"; } .bi-stack::before { content: "\f585"; } .bi-star-fill::before { content: "\f586"; } .bi-star-half::before { content: "\f587"; } .bi-star::before { content: "\f588"; } .bi-stars::before { content: "\f589"; } .bi-stickies-fill::before { content: "\f58a"; } .bi-stickies::before { content: "\f58b"; } .bi-sticky-fill::before { content: "\f58c"; } .bi-sticky::before { content: "\f58d"; } .bi-stop-btn-fill::before { content: "\f58e"; } .bi-stop-btn::before { content: "\f58f"; } .bi-stop-circle-fill::before { content: "\f590"; } .bi-stop-circle::before { content: "\f591"; } .bi-stop-fill::before { content: "\f592"; } .bi-stop::before { content: "\f593"; } .bi-stoplights-fill::before { content: "\f594"; } .bi-stoplights::before { content: "\f595"; } .bi-stopwatch-fill::before { content: "\f596"; } .bi-stopwatch::before { content: "\f597"; } .bi-subtract::before { content: "\f598"; } .bi-suit-club-fill::before { content: "\f599"; } .bi-suit-club::before { content: "\f59a"; } .bi-suit-diamond-fill::before { content: "\f59b"; } .bi-suit-diamond::before { content: "\f59c"; } .bi-suit-heart-fill::before { content: "\f59d"; } .bi-suit-heart::before { content: "\f59e"; } .bi-suit-spade-fill::before { content: "\f59f"; } .bi-suit-spade::before { content: "\f5a0"; } .bi-sun-fill::before { content: "\f5a1"; } .bi-sun::before { content: "\f5a2"; } .bi-sunglasses::before { content: "\f5a3"; } .bi-sunrise-fill::before { content: "\f5a4"; } .bi-sunrise::before { content: "\f5a5"; } .bi-sunset-fill::before { content: "\f5a6"; } .bi-sunset::before { content: "\f5a7"; } .bi-symmetry-horizontal::before { content: "\f5a8"; } .bi-symmetry-vertical::before { content: "\f5a9"; } .bi-table::before { content: "\f5aa"; } .bi-tablet-fill::before { content: "\f5ab"; } .bi-tablet-landscape-fill::before { content: "\f5ac"; } .bi-tablet-landscape::before { content: "\f5ad"; } .bi-tablet::before { content: "\f5ae"; } .bi-tag-fill::before { content: "\f5af"; } .bi-tag::before { content: "\f5b0"; } .bi-tags-fill::before { content: "\f5b1"; } .bi-tags::before { content: "\f5b2"; } .bi-telegram::before { content: "\f5b3"; } .bi-telephone-fill::before { content: "\f5b4"; } .bi-telephone-forward-fill::before { content: "\f5b5"; } .bi-telephone-forward::before { content: "\f5b6"; } .bi-telephone-inbound-fill::before { content: "\f5b7"; } .bi-telephone-inbound::before { content: "\f5b8"; } .bi-telephone-minus-fill::before { content: "\f5b9"; } .bi-telephone-minus::before { content: "\f5ba"; } .bi-telephone-outbound-fill::before { content: "\f5bb"; } .bi-telephone-outbound::before { content: "\f5bc"; } .bi-telephone-plus-fill::before { content: "\f5bd"; } .bi-telephone-plus::before { content: "\f5be"; } .bi-telephone-x-fill::before { content: "\f5bf"; } .bi-telephone-x::before { content: "\f5c0"; } .bi-telephone::before { content: "\f5c1"; } .bi-terminal-fill::before { content: "\f5c2"; } .bi-terminal::before { content: "\f5c3"; } .bi-text-center::before { content: "\f5c4"; } .bi-text-indent-left::before { content: "\f5c5"; } .bi-text-indent-right::before { content: "\f5c6"; } .bi-text-left::before { content: "\f5c7"; } .bi-text-paragraph::before { content: "\f5c8"; } .bi-text-right::before { content: "\f5c9"; } .bi-textarea-resize::before { content: "\f5ca"; } .bi-textarea-t::before { content: "\f5cb"; } .bi-textarea::before { content: "\f5cc"; } .bi-thermometer-half::before { content: "\f5cd"; } .bi-thermometer-high::before { content: "\f5ce"; } .bi-thermometer-low::before { content: "\f5cf"; } .bi-thermometer-snow::before { content: "\f5d0"; } .bi-thermometer-sun::before { content: "\f5d1"; } .bi-thermometer::before { content: "\f5d2"; } .bi-three-dots-vertical::before { content: "\f5d3"; } .bi-three-dots::before { content: "\f5d4"; } .bi-toggle-off::before { content: "\f5d5"; } .bi-toggle-on::before { content: "\f5d6"; } .bi-toggle2-off::before { content: "\f5d7"; } .bi-toggle2-on::before { content: "\f5d8"; } .bi-toggles::before { content: "\f5d9"; } .bi-toggles2::before { content: "\f5da"; } .bi-tools::before { content: "\f5db"; } .bi-tornado::before { content: "\f5dc"; } .bi-trash-fill::before { content: "\f5dd"; } .bi-trash::before { content: "\f5de"; } .bi-trash2-fill::before { content: "\f5df"; } .bi-trash2::before { content: "\f5e0"; } .bi-tree-fill::before { content: "\f5e1"; } .bi-tree::before { content: "\f5e2"; } .bi-triangle-fill::before { content: "\f5e3"; } .bi-triangle-half::before { content: "\f5e4"; } .bi-triangle::before { content: "\f5e5"; } .bi-trophy-fill::before { content: "\f5e6"; } .bi-trophy::before { content: "\f5e7"; } .bi-tropical-storm::before { content: "\f5e8"; } .bi-truck-flatbed::before { content: "\f5e9"; } .bi-truck::before { content: "\f5ea"; } .bi-tsunami::before { content: "\f5eb"; } .bi-tv-fill::before { content: "\f5ec"; } .bi-tv::before { content: "\f5ed"; } .bi-twitch::before { content: "\f5ee"; } .bi-twitter::before { content: "\f5ef"; } .bi-type-bold::before { content: "\f5f0"; } .bi-type-h1::before { content: "\f5f1"; } .bi-type-h2::before { content: "\f5f2"; } .bi-type-h3::before { content: "\f5f3"; } .bi-type-italic::before { content: "\f5f4"; } .bi-type-strikethrough::before { content: "\f5f5"; } .bi-type-underline::before { content: "\f5f6"; } .bi-type::before { content: "\f5f7"; } .bi-ui-checks-grid::before { content: "\f5f8"; } .bi-ui-checks::before { content: "\f5f9"; } .bi-ui-radios-grid::before { content: "\f5fa"; } .bi-ui-radios::before { content: "\f5fb"; } .bi-umbrella-fill::before { content: "\f5fc"; } .bi-umbrella::before { content: "\f5fd"; } .bi-union::before { content: "\f5fe"; } .bi-unlock-fill::before { content: "\f5ff"; } .bi-unlock::before { content: "\f600"; } .bi-upc-scan::before { content: "\f601"; } .bi-upc::before { content: "\f602"; } .bi-upload::before { content: "\f603"; } .bi-vector-pen::before { content: "\f604"; } .bi-view-list::before { content: "\f605"; } .bi-view-stacked::before { content: "\f606"; } .bi-vinyl-fill::before { content: "\f607"; } .bi-vinyl::before { content: "\f608"; } .bi-voicemail::before { content: "\f609"; } .bi-volume-down-fill::before { content: "\f60a"; } .bi-volume-down::before { content: "\f60b"; } .bi-volume-mute-fill::before { content: "\f60c"; } .bi-volume-mute::before { content: "\f60d"; } .bi-volume-off-fill::before { content: "\f60e"; } .bi-volume-off::before { content: "\f60f"; } .bi-volume-up-fill::before { content: "\f610"; } .bi-volume-up::before { content: "\f611"; } .bi-vr::before { content: "\f612"; } .bi-wallet-fill::before { content: "\f613"; } .bi-wallet::before { content: "\f614"; } .bi-wallet2::before { content: "\f615"; } .bi-watch::before { content: "\f616"; } .bi-water::before { content: "\f617"; } .bi-whatsapp::before { content: "\f618"; } .bi-wifi-1::before { content: "\f619"; } .bi-wifi-2::before { content: "\f61a"; } .bi-wifi-off::before { content: "\f61b"; } .bi-wifi::before { content: "\f61c"; } .bi-wind::before { content: "\f61d"; } .bi-window-dock::before { content: "\f61e"; } .bi-window-sidebar::before { content: "\f61f"; } .bi-window::before { content: "\f620"; } .bi-wrench::before { content: "\f621"; } .bi-x-circle-fill::before { content: "\f622"; } .bi-x-circle::before { content: "\f623"; } .bi-x-diamond-fill::before { content: "\f624"; } .bi-x-diamond::before { content: "\f625"; } .bi-x-octagon-fill::before { content: "\f626"; } .bi-x-octagon::before { content: "\f627"; } .bi-x-square-fill::before { content: "\f628"; } .bi-x-square::before { content: "\f629"; } .bi-x::before { content: "\f62a"; } .bi-youtube::before { content: "\f62b"; } .bi-zoom-in::before { content: "\f62c"; } .bi-zoom-out::before { content: "\f62d"; } .bi-bank::before { content: "\f62e"; } .bi-bank2::before { content: "\f62f"; } .bi-bell-slash-fill::before { content: "\f630"; } .bi-bell-slash::before { content: "\f631"; } .bi-cash-coin::before { content: "\f632"; } .bi-check-lg::before { content: "\f633"; } .bi-coin::before { content: "\f634"; } .bi-currency-bitcoin::before { content: "\f635"; } .bi-currency-dollar::before { content: "\f636"; } .bi-currency-euro::before { content: "\f637"; } .bi-currency-exchange::before { content: "\f638"; } .bi-currency-pound::before { content: "\f639"; } .bi-currency-yen::before { content: "\f63a"; } .bi-dash-lg::before { content: "\f63b"; } .bi-exclamation-lg::before { content: "\f63c"; } .bi-file-earmark-pdf-fill::before { content: "\f63d"; } .bi-file-earmark-pdf::before { content: "\f63e"; } .bi-file-pdf-fill::before { content: "\f63f"; } .bi-file-pdf::before { content: "\f640"; } .bi-gender-ambiguous::before { content: "\f641"; } .bi-gender-female::before { content: "\f642"; } .bi-gender-male::before { content: "\f643"; } .bi-gender-trans::before { content: "\f644"; } .bi-headset-vr::before { content: "\f645"; } .bi-info-lg::before { content: "\f646"; } .bi-mastodon::before { content: "\f647"; } .bi-messenger::before { content: "\f648"; } .bi-piggy-bank-fill::before { content: "\f649"; } .bi-piggy-bank::before { content: "\f64a"; } .bi-pin-map-fill::before { content: "\f64b"; } .bi-pin-map::before { content: "\f64c"; } .bi-plus-lg::before { content: "\f64d"; } .bi-question-lg::before { content: "\f64e"; } .bi-recycle::before { content: "\f64f"; } .bi-reddit::before { content: "\f650"; } .bi-safe-fill::before { content: "\f651"; } .bi-safe2-fill::before { content: "\f652"; } .bi-safe2::before { content: "\f653"; } .bi-sd-card-fill::before { content: "\f654"; } .bi-sd-card::before { content: "\f655"; } .bi-skype::before { content: "\f656"; } .bi-slash-lg::before { content: "\f657"; } .bi-translate::before { content: "\f658"; } .bi-x-lg::before { content: "\f659"; } .bi-safe::before { content: "\f65a"; } .bi-apple::before { content: "\f65b"; } .bi-microsoft::before { content: "\f65d"; } .bi-windows::before { content: "\f65e"; } .bi-behance::before { content: "\f65c"; } .bi-dribbble::before { content: "\f65f"; } .bi-line::before { content: "\f660"; } .bi-medium::before { content: "\f661"; } .bi-paypal::before { content: "\f662"; } .bi-pinterest::before { content: "\f663"; } .bi-signal::before { content: "\f664"; } .bi-snapchat::before { content: "\f665"; } .bi-spotify::before { content: "\f666"; } .bi-stack-overflow::before { content: "\f667"; } .bi-strava::before { content: "\f668"; } .bi-wordpress::before { content: "\f669"; } .bi-vimeo::before { content: "\f66a"; } .bi-activity::before { content: "\f66b"; } .bi-easel2-fill::before { content: "\f66c"; } .bi-easel2::before { content: "\f66d"; } .bi-easel3-fill::before { content: "\f66e"; } .bi-easel3::before { content: "\f66f"; } .bi-fan::before { content: "\f670"; } .bi-fingerprint::before { content: "\f671"; } .bi-graph-down-arrow::before { content: "\f672"; } .bi-graph-up-arrow::before { content: "\f673"; } .bi-hypnotize::before { content: "\f674"; } .bi-magic::before { content: "\f675"; } .bi-person-rolodex::before { content: "\f676"; } .bi-person-video::before { content: "\f677"; } .bi-person-video2::before { content: "\f678"; } .bi-person-video3::before { content: "\f679"; } .bi-person-workspace::before { content: "\f67a"; } .bi-radioactive::before { content: "\f67b"; } .bi-webcam-fill::before { content: "\f67c"; } .bi-webcam::before { content: "\f67d"; } .bi-yin-yang::before { content: "\f67e"; } .bi-bandaid-fill::before { content: "\f680"; } .bi-bandaid::before { content: "\f681"; } .bi-bluetooth::before { content: "\f682"; } .bi-body-text::before { content: "\f683"; } .bi-boombox::before { content: "\f684"; } .bi-boxes::before { content: "\f685"; } .bi-dpad-fill::before { content: "\f686"; } .bi-dpad::before { content: "\f687"; } .bi-ear-fill::before { content: "\f688"; } .bi-ear::before { content: "\f689"; } .bi-envelope-check-fill::before { content: "\f68b"; } .bi-envelope-check::before { content: "\f68c"; } .bi-envelope-dash-fill::before { content: "\f68e"; } .bi-envelope-dash::before { content: "\f68f"; } .bi-envelope-exclamation-fill::before { content: "\f691"; } .bi-envelope-exclamation::before { content: "\f692"; } .bi-envelope-plus-fill::before { content: "\f693"; } .bi-envelope-plus::before { content: "\f694"; } .bi-envelope-slash-fill::before { content: "\f696"; } .bi-envelope-slash::before { content: "\f697"; } .bi-envelope-x-fill::before { content: "\f699"; } .bi-envelope-x::before { content: "\f69a"; } .bi-explicit-fill::before { content: "\f69b"; } .bi-explicit::before { content: "\f69c"; } .bi-git::before { content: "\f69d"; } .bi-infinity::before { content: "\f69e"; } .bi-list-columns-reverse::before { content: "\f69f"; } .bi-list-columns::before { content: "\f6a0"; } .bi-meta::before { content: "\f6a1"; } .bi-nintendo-switch::before { content: "\f6a4"; } .bi-pc-display-horizontal::before { content: "\f6a5"; } .bi-pc-display::before { content: "\f6a6"; } .bi-pc-horizontal::before { content: "\f6a7"; } .bi-pc::before { content: "\f6a8"; } .bi-playstation::before { content: "\f6a9"; } .bi-plus-slash-minus::before { content: "\f6aa"; } .bi-projector-fill::before { content: "\f6ab"; } .bi-projector::before { content: "\f6ac"; } .bi-qr-code-scan::before { content: "\f6ad"; } .bi-qr-code::before { content: "\f6ae"; } .bi-quora::before { content: "\f6af"; } .bi-quote::before { content: "\f6b0"; } .bi-robot::before { content: "\f6b1"; } .bi-send-check-fill::before { content: "\f6b2"; } .bi-send-check::before { content: "\f6b3"; } .bi-send-dash-fill::before { content: "\f6b4"; } .bi-send-dash::before { content: "\f6b5"; } .bi-send-exclamation-fill::before { content: "\f6b7"; } .bi-send-exclamation::before { content: "\f6b8"; } .bi-send-fill::before { content: "\f6b9"; } .bi-send-plus-fill::before { content: "\f6ba"; } .bi-send-plus::before { content: "\f6bb"; } .bi-send-slash-fill::before { content: "\f6bc"; } .bi-send-slash::before { content: "\f6bd"; } .bi-send-x-fill::before { content: "\f6be"; } .bi-send-x::before { content: "\f6bf"; } .bi-send::before { content: "\f6c0"; } .bi-steam::before { content: "\f6c1"; } .bi-terminal-dash::before { content: "\f6c3"; } .bi-terminal-plus::before { content: "\f6c4"; } .bi-terminal-split::before { content: "\f6c5"; } .bi-ticket-detailed-fill::before { content: "\f6c6"; } .bi-ticket-detailed::before { content: "\f6c7"; } .bi-ticket-fill::before { content: "\f6c8"; } .bi-ticket-perforated-fill::before { content: "\f6c9"; } .bi-ticket-perforated::before { content: "\f6ca"; } .bi-ticket::before { content: "\f6cb"; } .bi-tiktok::before { content: "\f6cc"; } .bi-window-dash::before { content: "\f6cd"; } .bi-window-desktop::before { content: "\f6ce"; } .bi-window-fullscreen::before { content: "\f6cf"; } .bi-window-plus::before { content: "\f6d0"; } .bi-window-split::before { content: "\f6d1"; } .bi-window-stack::before { content: "\f6d2"; } .bi-window-x::before { content: "\f6d3"; } .bi-xbox::before { content: "\f6d4"; } .bi-ethernet::before { content: "\f6d5"; } .bi-hdmi-fill::before { content: "\f6d6"; } .bi-hdmi::before { content: "\f6d7"; } .bi-usb-c-fill::before { content: "\f6d8"; } .bi-usb-c::before { content: "\f6d9"; } .bi-usb-fill::before { content: "\f6da"; } .bi-usb-plug-fill::before { content: "\f6db"; } .bi-usb-plug::before { content: "\f6dc"; } .bi-usb-symbol::before { content: "\f6dd"; } .bi-usb::before { content: "\f6de"; } .bi-boombox-fill::before { content: "\f6df"; } .bi-displayport::before { content: "\f6e1"; } .bi-gpu-card::before { content: "\f6e2"; } .bi-memory::before { content: "\f6e3"; } .bi-modem-fill::before { content: "\f6e4"; } .bi-modem::before { content: "\f6e5"; } .bi-motherboard-fill::before { content: "\f6e6"; } .bi-motherboard::before { content: "\f6e7"; } .bi-optical-audio-fill::before { content: "\f6e8"; } .bi-optical-audio::before { content: "\f6e9"; } .bi-pci-card::before { content: "\f6ea"; } .bi-router-fill::before { content: "\f6eb"; } .bi-router::before { content: "\f6ec"; } .bi-thunderbolt-fill::before { content: "\f6ef"; } .bi-thunderbolt::before { content: "\f6f0"; } .bi-usb-drive-fill::before { content: "\f6f1"; } .bi-usb-drive::before { content: "\f6f2"; } .bi-usb-micro-fill::before { content: "\f6f3"; } .bi-usb-micro::before { content: "\f6f4"; } .bi-usb-mini-fill::before { content: "\f6f5"; } .bi-usb-mini::before { content: "\f6f6"; } .bi-cloud-haze2::before { content: "\f6f7"; } .bi-device-hdd-fill::before { content: "\f6f8"; } .bi-device-hdd::before { content: "\f6f9"; } .bi-device-ssd-fill::before { content: "\f6fa"; } .bi-device-ssd::before { content: "\f6fb"; } .bi-displayport-fill::before { content: "\f6fc"; } .bi-mortarboard-fill::before { content: "\f6fd"; } .bi-mortarboard::before { content: "\f6fe"; } .bi-terminal-x::before { content: "\f6ff"; } .bi-arrow-through-heart-fill::before { content: "\f700"; } .bi-arrow-through-heart::before { content: "\f701"; } .bi-badge-sd-fill::before { content: "\f702"; } .bi-badge-sd::before { content: "\f703"; } .bi-bag-heart-fill::before { content: "\f704"; } .bi-bag-heart::before { content: "\f705"; } .bi-balloon-fill::before { content: "\f706"; } .bi-balloon-heart-fill::before { content: "\f707"; } .bi-balloon-heart::before { content: "\f708"; } .bi-balloon::before { content: "\f709"; } .bi-box2-fill::before { content: "\f70a"; } .bi-box2-heart-fill::before { content: "\f70b"; } .bi-box2-heart::before { content: "\f70c"; } .bi-box2::before { content: "\f70d"; } .bi-braces-asterisk::before { content: "\f70e"; } .bi-calendar-heart-fill::before { content: "\f70f"; } .bi-calendar-heart::before { content: "\f710"; } .bi-calendar2-heart-fill::before { content: "\f711"; } .bi-calendar2-heart::before { content: "\f712"; } .bi-chat-heart-fill::before { content: "\f713"; } .bi-chat-heart::before { content: "\f714"; } .bi-chat-left-heart-fill::before { content: "\f715"; } .bi-chat-left-heart::before { content: "\f716"; } .bi-chat-right-heart-fill::before { content: "\f717"; } .bi-chat-right-heart::before { content: "\f718"; } .bi-chat-square-heart-fill::before { content: "\f719"; } .bi-chat-square-heart::before { content: "\f71a"; } .bi-clipboard-check-fill::before { content: "\f71b"; } .bi-clipboard-data-fill::before { content: "\f71c"; } .bi-clipboard-fill::before { content: "\f71d"; } .bi-clipboard-heart-fill::before { content: "\f71e"; } .bi-clipboard-heart::before { content: "\f71f"; } .bi-clipboard-minus-fill::before { content: "\f720"; } .bi-clipboard-plus-fill::before { content: "\f721"; } .bi-clipboard-pulse::before { content: "\f722"; } .bi-clipboard-x-fill::before { content: "\f723"; } .bi-clipboard2-check-fill::before { content: "\f724"; } .bi-clipboard2-check::before { content: "\f725"; } .bi-clipboard2-data-fill::before { content: "\f726"; } .bi-clipboard2-data::before { content: "\f727"; } .bi-clipboard2-fill::before { content: "\f728"; } .bi-clipboard2-heart-fill::before { content: "\f729"; } .bi-clipboard2-heart::before { content: "\f72a"; } .bi-clipboard2-minus-fill::before { content: "\f72b"; } .bi-clipboard2-minus::before { content: "\f72c"; } .bi-clipboard2-plus-fill::before { content: "\f72d"; } .bi-clipboard2-plus::before { content: "\f72e"; } .bi-clipboard2-pulse-fill::before { content: "\f72f"; } .bi-clipboard2-pulse::before { content: "\f730"; } .bi-clipboard2-x-fill::before { content: "\f731"; } .bi-clipboard2-x::before { content: "\f732"; } .bi-clipboard2::before { content: "\f733"; } .bi-emoji-kiss-fill::before { content: "\f734"; } .bi-emoji-kiss::before { content: "\f735"; } .bi-envelope-heart-fill::before { content: "\f736"; } .bi-envelope-heart::before { content: "\f737"; } .bi-envelope-open-heart-fill::before { content: "\f738"; } .bi-envelope-open-heart::before { content: "\f739"; } .bi-envelope-paper-fill::before { content: "\f73a"; } .bi-envelope-paper-heart-fill::before { content: "\f73b"; } .bi-envelope-paper-heart::before { content: "\f73c"; } .bi-envelope-paper::before { content: "\f73d"; } .bi-filetype-aac::before { content: "\f73e"; } .bi-filetype-ai::before { content: "\f73f"; } .bi-filetype-bmp::before { content: "\f740"; } .bi-filetype-cs::before { content: "\f741"; } .bi-filetype-css::before { content: "\f742"; } .bi-filetype-csv::before { content: "\f743"; } .bi-filetype-doc::before { content: "\f744"; } .bi-filetype-docx::before { content: "\f745"; } .bi-filetype-exe::before { content: "\f746"; } .bi-filetype-gif::before { content: "\f747"; } .bi-filetype-heic::before { content: "\f748"; } .bi-filetype-html::before { content: "\f749"; } .bi-filetype-java::before { content: "\f74a"; } .bi-filetype-jpg::before { content: "\f74b"; } .bi-filetype-js::before { content: "\f74c"; } .bi-filetype-jsx::before { content: "\f74d"; } .bi-filetype-key::before { content: "\f74e"; } .bi-filetype-m4p::before { content: "\f74f"; } .bi-filetype-md::before { content: "\f750"; } .bi-filetype-mdx::before { content: "\f751"; } .bi-filetype-mov::before { content: "\f752"; } .bi-filetype-mp3::before { content: "\f753"; } .bi-filetype-mp4::before { content: "\f754"; } .bi-filetype-otf::before { content: "\f755"; } .bi-filetype-pdf::before { content: "\f756"; } .bi-filetype-php::before { content: "\f757"; } .bi-filetype-png::before { content: "\f758"; } .bi-filetype-ppt::before { content: "\f75a"; } .bi-filetype-psd::before { content: "\f75b"; } .bi-filetype-py::before { content: "\f75c"; } .bi-filetype-raw::before { content: "\f75d"; } .bi-filetype-rb::before { content: "\f75e"; } .bi-filetype-sass::before { content: "\f75f"; } .bi-filetype-scss::before { content: "\f760"; } .bi-filetype-sh::before { content: "\f761"; } .bi-filetype-svg::before { content: "\f762"; } .bi-filetype-tiff::before { content: "\f763"; } .bi-filetype-tsx::before { content: "\f764"; } .bi-filetype-ttf::before { content: "\f765"; } .bi-filetype-txt::before { content: "\f766"; } .bi-filetype-wav::before { content: "\f767"; } .bi-filetype-woff::before { content: "\f768"; } .bi-filetype-xls::before { content: "\f76a"; } .bi-filetype-xml::before { content: "\f76b"; } .bi-filetype-yml::before { content: "\f76c"; } .bi-heart-arrow::before { content: "\f76d"; } .bi-heart-pulse-fill::before { content: "\f76e"; } .bi-heart-pulse::before { content: "\f76f"; } .bi-heartbreak-fill::before { content: "\f770"; } .bi-heartbreak::before { content: "\f771"; } .bi-hearts::before { content: "\f772"; } .bi-hospital-fill::before { content: "\f773"; } .bi-hospital::before { content: "\f774"; } .bi-house-heart-fill::before { content: "\f775"; } .bi-house-heart::before { content: "\f776"; } .bi-incognito::before { content: "\f777"; } .bi-magnet-fill::before { content: "\f778"; } .bi-magnet::before { content: "\f779"; } .bi-person-heart::before { content: "\f77a"; } .bi-person-hearts::before { content: "\f77b"; } .bi-phone-flip::before { content: "\f77c"; } .bi-plugin::before { content: "\f77d"; } .bi-postage-fill::before { content: "\f77e"; } .bi-postage-heart-fill::before { content: "\f77f"; } .bi-postage-heart::before { content: "\f780"; } .bi-postage::before { content: "\f781"; } .bi-postcard-fill::before { content: "\f782"; } .bi-postcard-heart-fill::before { content: "\f783"; } .bi-postcard-heart::before { content: "\f784"; } .bi-postcard::before { content: "\f785"; } .bi-search-heart-fill::before { content: "\f786"; } .bi-search-heart::before { content: "\f787"; } .bi-sliders2-vertical::before { content: "\f788"; } .bi-sliders2::before { content: "\f789"; } .bi-trash3-fill::before { content: "\f78a"; } .bi-trash3::before { content: "\f78b"; } .bi-valentine::before { content: "\f78c"; } .bi-valentine2::before { content: "\f78d"; } .bi-wrench-adjustable-circle-fill::before { content: "\f78e"; } .bi-wrench-adjustable-circle::before { content: "\f78f"; } .bi-wrench-adjustable::before { content: "\f790"; } .bi-filetype-json::before { content: "\f791"; } .bi-filetype-pptx::before { content: "\f792"; } .bi-filetype-xlsx::before { content: "\f793"; } .bi-1-circle-fill::before { content: "\f796"; } .bi-1-circle::before { content: "\f797"; } .bi-1-square-fill::before { content: "\f798"; } .bi-1-square::before { content: "\f799"; } .bi-2-circle-fill::before { content: "\f79c"; } .bi-2-circle::before { content: "\f79d"; } .bi-2-square-fill::before { content: "\f79e"; } .bi-2-square::before { content: "\f79f"; } .bi-3-circle-fill::before { content: "\f7a2"; } .bi-3-circle::before { content: "\f7a3"; } .bi-3-square-fill::before { content: "\f7a4"; } .bi-3-square::before { content: "\f7a5"; } .bi-4-circle-fill::before { content: "\f7a8"; } .bi-4-circle::before { content: "\f7a9"; } .bi-4-square-fill::before { content: "\f7aa"; } .bi-4-square::before { content: "\f7ab"; } .bi-5-circle-fill::before { content: "\f7ae"; } .bi-5-circle::before { content: "\f7af"; } .bi-5-square-fill::before { content: "\f7b0"; } .bi-5-square::before { content: "\f7b1"; } .bi-6-circle-fill::before { content: "\f7b4"; } .bi-6-circle::before { content: "\f7b5"; } .bi-6-square-fill::before { content: "\f7b6"; } .bi-6-square::before { content: "\f7b7"; } .bi-7-circle-fill::before { content: "\f7ba"; } .bi-7-circle::before { content: "\f7bb"; } .bi-7-square-fill::before { content: "\f7bc"; } .bi-7-square::before { content: "\f7bd"; } .bi-8-circle-fill::before { content: "\f7c0"; } .bi-8-circle::before { content: "\f7c1"; } .bi-8-square-fill::before { content: "\f7c2"; } .bi-8-square::before { content: "\f7c3"; } .bi-9-circle-fill::before { content: "\f7c6"; } .bi-9-circle::before { content: "\f7c7"; } .bi-9-square-fill::before { content: "\f7c8"; } .bi-9-square::before { content: "\f7c9"; } .bi-airplane-engines-fill::before { content: "\f7ca"; } .bi-airplane-engines::before { content: "\f7cb"; } .bi-airplane-fill::before { content: "\f7cc"; } .bi-airplane::before { content: "\f7cd"; } .bi-alexa::before { content: "\f7ce"; } .bi-alipay::before { content: "\f7cf"; } .bi-android::before { content: "\f7d0"; } .bi-android2::before { content: "\f7d1"; } .bi-box-fill::before { content: "\f7d2"; } .bi-box-seam-fill::before { content: "\f7d3"; } .bi-browser-chrome::before { content: "\f7d4"; } .bi-browser-edge::before { content: "\f7d5"; } .bi-browser-firefox::before { content: "\f7d6"; } .bi-browser-safari::before { content: "\f7d7"; } .bi-c-circle-fill::before { content: "\f7da"; } .bi-c-circle::before { content: "\f7db"; } .bi-c-square-fill::before { content: "\f7dc"; } .bi-c-square::before { content: "\f7dd"; } .bi-capsule-pill::before { content: "\f7de"; } .bi-capsule::before { content: "\f7df"; } .bi-car-front-fill::before { content: "\f7e0"; } .bi-car-front::before { content: "\f7e1"; } .bi-cassette-fill::before { content: "\f7e2"; } .bi-cassette::before { content: "\f7e3"; } .bi-cc-circle-fill::before { content: "\f7e6"; } .bi-cc-circle::before { content: "\f7e7"; } .bi-cc-square-fill::before { content: "\f7e8"; } .bi-cc-square::before { content: "\f7e9"; } .bi-cup-hot-fill::before { content: "\f7ea"; } .bi-cup-hot::before { content: "\f7eb"; } .bi-currency-rupee::before { content: "\f7ec"; } .bi-dropbox::before { content: "\f7ed"; } .bi-escape::before { content: "\f7ee"; } .bi-fast-forward-btn-fill::before { content: "\f7ef"; } .bi-fast-forward-btn::before { content: "\f7f0"; } .bi-fast-forward-circle-fill::before { content: "\f7f1"; } .bi-fast-forward-circle::before { content: "\f7f2"; } .bi-fast-forward-fill::before { content: "\f7f3"; } .bi-fast-forward::before { content: "\f7f4"; } .bi-filetype-sql::before { content: "\f7f5"; } .bi-fire::before { content: "\f7f6"; } .bi-google-play::before { content: "\f7f7"; } .bi-h-circle-fill::before { content: "\f7fa"; } .bi-h-circle::before { content: "\f7fb"; } .bi-h-square-fill::before { content: "\f7fc"; } .bi-h-square::before { content: "\f7fd"; } .bi-indent::before { content: "\f7fe"; } .bi-lungs-fill::before { content: "\f7ff"; } .bi-lungs::before { content: "\f800"; } .bi-microsoft-teams::before { content: "\f801"; } .bi-p-circle-fill::before { content: "\f804"; } .bi-p-circle::before { content: "\f805"; } .bi-p-square-fill::before { content: "\f806"; } .bi-p-square::before { content: "\f807"; } .bi-pass-fill::before { content: "\f808"; } .bi-pass::before { content: "\f809"; } .bi-prescription::before { content: "\f80a"; } .bi-prescription2::before { content: "\f80b"; } .bi-r-circle-fill::before { content: "\f80e"; } .bi-r-circle::before { content: "\f80f"; } .bi-r-square-fill::before { content: "\f810"; } .bi-r-square::before { content: "\f811"; } .bi-repeat-1::before { content: "\f812"; } .bi-repeat::before { content: "\f813"; } .bi-rewind-btn-fill::before { content: "\f814"; } .bi-rewind-btn::before { content: "\f815"; } .bi-rewind-circle-fill::before { content: "\f816"; } .bi-rewind-circle::before { content: "\f817"; } .bi-rewind-fill::before { content: "\f818"; } .bi-rewind::before { content: "\f819"; } .bi-train-freight-front-fill::before { content: "\f81a"; } .bi-train-freight-front::before { content: "\f81b"; } .bi-train-front-fill::before { content: "\f81c"; } .bi-train-front::before { content: "\f81d"; } .bi-train-lightrail-front-fill::before { content: "\f81e"; } .bi-train-lightrail-front::before { content: "\f81f"; } .bi-truck-front-fill::before { content: "\f820"; } .bi-truck-front::before { content: "\f821"; } .bi-ubuntu::before { content: "\f822"; } .bi-unindent::before { content: "\f823"; } .bi-unity::before { content: "\f824"; } .bi-universal-access-circle::before { content: "\f825"; } .bi-universal-access::before { content: "\f826"; } .bi-virus::before { content: "\f827"; } .bi-virus2::before { content: "\f828"; } .bi-wechat::before { content: "\f829"; } .bi-yelp::before { content: "\f82a"; } .bi-sign-stop-fill::before { content: "\f82b"; } .bi-sign-stop-lights-fill::before { content: "\f82c"; } .bi-sign-stop-lights::before { content: "\f82d"; } .bi-sign-stop::before { content: "\f82e"; } .bi-sign-turn-left-fill::before { content: "\f82f"; } .bi-sign-turn-left::before { content: "\f830"; } .bi-sign-turn-right-fill::before { content: "\f831"; } .bi-sign-turn-right::before { content: "\f832"; } .bi-sign-turn-slight-left-fill::before { content: "\f833"; } .bi-sign-turn-slight-left::before { content: "\f834"; } .bi-sign-turn-slight-right-fill::before { content: "\f835"; } .bi-sign-turn-slight-right::before { content: "\f836"; } .bi-sign-yield-fill::before { content: "\f837"; } .bi-sign-yield::before { content: "\f838"; } .bi-ev-station-fill::before { content: "\f839"; } .bi-ev-station::before { content: "\f83a"; } .bi-fuel-pump-diesel-fill::before { content: "\f83b"; } .bi-fuel-pump-diesel::before { content: "\f83c"; } .bi-fuel-pump-fill::before { content: "\f83d"; } .bi-fuel-pump::before { content: "\f83e"; } .bi-0-circle-fill::before { content: "\f83f"; } .bi-0-circle::before { content: "\f840"; } .bi-0-square-fill::before { content: "\f841"; } .bi-0-square::before { content: "\f842"; } .bi-rocket-fill::before { content: "\f843"; } .bi-rocket-takeoff-fill::before { content: "\f844"; } .bi-rocket-takeoff::before { content: "\f845"; } .bi-rocket::before { content: "\f846"; } .bi-stripe::before { content: "\f847"; } .bi-subscript::before { content: "\f848"; } .bi-superscript::before { content: "\f849"; } .bi-trello::before { content: "\f84a"; } .bi-envelope-at-fill::before { content: "\f84b"; } .bi-envelope-at::before { content: "\f84c"; } .bi-regex::before { content: "\f84d"; } .bi-text-wrap::before { content: "\f84e"; } .bi-sign-dead-end-fill::before { content: "\f84f"; } .bi-sign-dead-end::before { content: "\f850"; } .bi-sign-do-not-enter-fill::before { content: "\f851"; } .bi-sign-do-not-enter::before { content: "\f852"; } .bi-sign-intersection-fill::before { content: "\f853"; } .bi-sign-intersection-side-fill::before { content: "\f854"; } .bi-sign-intersection-side::before { content: "\f855"; } .bi-sign-intersection-t-fill::before { content: "\f856"; } .bi-sign-intersection-t::before { content: "\f857"; } .bi-sign-intersection-y-fill::before { content: "\f858"; } .bi-sign-intersection-y::before { content: "\f859"; } .bi-sign-intersection::before { content: "\f85a"; } .bi-sign-merge-left-fill::before { content: "\f85b"; } .bi-sign-merge-left::before { content: "\f85c"; } .bi-sign-merge-right-fill::before { content: "\f85d"; } .bi-sign-merge-right::before { content: "\f85e"; } .bi-sign-no-left-turn-fill::before { content: "\f85f"; } .bi-sign-no-left-turn::before { content: "\f860"; } .bi-sign-no-parking-fill::before { content: "\f861"; } .bi-sign-no-parking::before { content: "\f862"; } .bi-sign-no-right-turn-fill::before { content: "\f863"; } .bi-sign-no-right-turn::before { content: "\f864"; } .bi-sign-railroad-fill::before { content: "\f865"; } .bi-sign-railroad::before { content: "\f866"; } .bi-building-add::before { content: "\f867"; } .bi-building-check::before { content: "\f868"; } .bi-building-dash::before { content: "\f869"; } .bi-building-down::before { content: "\f86a"; } .bi-building-exclamation::before { content: "\f86b"; } .bi-building-fill-add::before { content: "\f86c"; } .bi-building-fill-check::before { content: "\f86d"; } .bi-building-fill-dash::before { content: "\f86e"; } .bi-building-fill-down::before { content: "\f86f"; } .bi-building-fill-exclamation::before { content: "\f870"; } .bi-building-fill-gear::before { content: "\f871"; } .bi-building-fill-lock::before { content: "\f872"; } .bi-building-fill-slash::before { content: "\f873"; } .bi-building-fill-up::before { content: "\f874"; } .bi-building-fill-x::before { content: "\f875"; } .bi-building-fill::before { content: "\f876"; } .bi-building-gear::before { content: "\f877"; } .bi-building-lock::before { content: "\f878"; } .bi-building-slash::before { content: "\f879"; } .bi-building-up::before { content: "\f87a"; } .bi-building-x::before { content: "\f87b"; } .bi-buildings-fill::before { content: "\f87c"; } .bi-buildings::before { content: "\f87d"; } .bi-bus-front-fill::before { content: "\f87e"; } .bi-bus-front::before { content: "\f87f"; } .bi-ev-front-fill::before { content: "\f880"; } .bi-ev-front::before { content: "\f881"; } .bi-globe-americas::before { content: "\f882"; } .bi-globe-asia-australia::before { content: "\f883"; } .bi-globe-central-south-asia::before { content: "\f884"; } .bi-globe-europe-africa::before { content: "\f885"; } .bi-house-add-fill::before { content: "\f886"; } .bi-house-add::before { content: "\f887"; } .bi-house-check-fill::before { content: "\f888"; } .bi-house-check::before { content: "\f889"; } .bi-house-dash-fill::before { content: "\f88a"; } .bi-house-dash::before { content: "\f88b"; } .bi-house-down-fill::before { content: "\f88c"; } .bi-house-down::before { content: "\f88d"; } .bi-house-exclamation-fill::before { content: "\f88e"; } .bi-house-exclamation::before { content: "\f88f"; } .bi-house-gear-fill::before { content: "\f890"; } .bi-house-gear::before { content: "\f891"; } .bi-house-lock-fill::before { content: "\f892"; } .bi-house-lock::before { content: "\f893"; } .bi-house-slash-fill::before { content: "\f894"; } .bi-house-slash::before { content: "\f895"; } .bi-house-up-fill::before { content: "\f896"; } .bi-house-up::before { content: "\f897"; } .bi-house-x-fill::before { content: "\f898"; } .bi-house-x::before { content: "\f899"; } .bi-person-add::before { content: "\f89a"; } .bi-person-down::before { content: "\f89b"; } .bi-person-exclamation::before { content: "\f89c"; } .bi-person-fill-add::before { content: "\f89d"; } .bi-person-fill-check::before { content: "\f89e"; } .bi-person-fill-dash::before { content: "\f89f"; } .bi-person-fill-down::before { content: "\f8a0"; } .bi-person-fill-exclamation::before { content: "\f8a1"; } .bi-person-fill-gear::before { content: "\f8a2"; } .bi-person-fill-lock::before { content: "\f8a3"; } .bi-person-fill-slash::before { content: "\f8a4"; } .bi-person-fill-up::before { content: "\f8a5"; } .bi-person-fill-x::before { content: "\f8a6"; } .bi-person-gear::before { content: "\f8a7"; } .bi-person-lock::before { content: "\f8a8"; } .bi-person-slash::before { content: "\f8a9"; } .bi-person-up::before { content: "\f8aa"; } .bi-scooter::before { content: "\f8ab"; } .bi-taxi-front-fill::before { content: "\f8ac"; } .bi-taxi-front::before { content: "\f8ad"; } .bi-amd::before { content: "\f8ae"; } .bi-database-add::before { content: "\f8af"; } .bi-database-check::before { content: "\f8b0"; } .bi-database-dash::before { content: "\f8b1"; } .bi-database-down::before { content: "\f8b2"; } .bi-database-exclamation::before { content: "\f8b3"; } .bi-database-fill-add::before { content: "\f8b4"; } .bi-database-fill-check::before { content: "\f8b5"; } .bi-database-fill-dash::before { content: "\f8b6"; } .bi-database-fill-down::before { content: "\f8b7"; } .bi-database-fill-exclamation::before { content: "\f8b8"; } .bi-database-fill-gear::before { content: "\f8b9"; } .bi-database-fill-lock::before { content: "\f8ba"; } .bi-database-fill-slash::before { content: "\f8bb"; } .bi-database-fill-up::before { content: "\f8bc"; } .bi-database-fill-x::before { content: "\f8bd"; } .bi-database-fill::before { content: "\f8be"; } .bi-database-gear::before { content: "\f8bf"; } .bi-database-lock::before { content: "\f8c0"; } .bi-database-slash::before { content: "\f8c1"; } .bi-database-up::before { content: "\f8c2"; } .bi-database-x::before { content: "\f8c3"; } .bi-database::before { content: "\f8c4"; } .bi-houses-fill::before { content: "\f8c5"; } .bi-houses::before { content: "\f8c6"; } .bi-nvidia::before { content: "\f8c7"; } .bi-person-vcard-fill::before { content: "\f8c8"; } .bi-person-vcard::before { content: "\f8c9"; } .bi-sina-weibo::before { content: "\f8ca"; } .bi-tencent-qq::before { content: "\f8cb"; } .bi-wikipedia::before { content: "\f8cc"; } .bi-alphabet-uppercase::before { content: "\f2a5"; } .bi-alphabet::before { content: "\f68a"; } .bi-amazon::before { content: "\f68d"; } .bi-arrows-collapse-vertical::before { content: "\f690"; } .bi-arrows-expand-vertical::before { content: "\f695"; } .bi-arrows-vertical::before { content: "\f698"; } .bi-arrows::before { content: "\f6a2"; } .bi-ban-fill::before { content: "\f6a3"; } .bi-ban::before { content: "\f6b6"; } .bi-bing::before { content: "\f6c2"; } .bi-cake::before { content: "\f6e0"; } .bi-cake2::before { content: "\f6ed"; } .bi-cookie::before { content: "\f6ee"; } .bi-copy::before { content: "\f759"; } .bi-crosshair::before { content: "\f769"; } .bi-crosshair2::before { content: "\f794"; } .bi-emoji-astonished-fill::before { content: "\f795"; } .bi-emoji-astonished::before { content: "\f79a"; } .bi-emoji-grimace-fill::before { content: "\f79b"; } .bi-emoji-grimace::before { content: "\f7a0"; } .bi-emoji-grin-fill::before { content: "\f7a1"; } .bi-emoji-grin::before { content: "\f7a6"; } .bi-emoji-surprise-fill::before { content: "\f7a7"; } .bi-emoji-surprise::before { content: "\f7ac"; } .bi-emoji-tear-fill::before { content: "\f7ad"; } .bi-emoji-tear::before { content: "\f7b2"; } .bi-envelope-arrow-down-fill::before { content: "\f7b3"; } .bi-envelope-arrow-down::before { content: "\f7b8"; } .bi-envelope-arrow-up-fill::before { content: "\f7b9"; } .bi-envelope-arrow-up::before { content: "\f7be"; } .bi-feather::before { content: "\f7bf"; } .bi-feather2::before { content: "\f7c4"; } .bi-floppy-fill::before { content: "\f7c5"; } .bi-floppy::before { content: "\f7d8"; } .bi-floppy2-fill::before { content: "\f7d9"; } .bi-floppy2::before { content: "\f7e4"; } .bi-gitlab::before { content: "\f7e5"; } .bi-highlighter::before { content: "\f7f8"; } .bi-marker-tip::before { content: "\f802"; } .bi-nvme-fill::before { content: "\f803"; } .bi-nvme::before { content: "\f80c"; } .bi-opencollective::before { content: "\f80d"; } .bi-pci-card-network::before { content: "\f8cd"; } .bi-pci-card-sound::before { content: "\f8ce"; } .bi-radar::before { content: "\f8cf"; } .bi-send-arrow-down-fill::before { content: "\f8d0"; } .bi-send-arrow-down::before { content: "\f8d1"; } .bi-send-arrow-up-fill::before { content: "\f8d2"; } .bi-send-arrow-up::before { content: "\f8d3"; } .bi-sim-slash-fill::before { content: "\f8d4"; } .bi-sim-slash::before { content: "\f8d5"; } .bi-sourceforge::before { content: "\f8d6"; } .bi-substack::before { content: "\f8d7"; } .bi-threads-fill::before { content: "\f8d8"; } .bi-threads::before { content: "\f8d9"; } .bi-transparency::before { content: "\f8da"; } .bi-twitter-x::before { content: "\f8db"; } .bi-type-h4::before { content: "\f8dc"; } .bi-type-h5::before { content: "\f8dd"; } .bi-type-h6::before { content: "\f8de"; } .bi-backpack-fill::before { content: "\f8df"; } .bi-backpack::before { content: "\f8e0"; } .bi-backpack2-fill::before { content: "\f8e1"; } .bi-backpack2::before { content: "\f8e2"; } .bi-backpack3-fill::before { content: "\f8e3"; } .bi-backpack3::before { content: "\f8e4"; } .bi-backpack4-fill::before { content: "\f8e5"; } .bi-backpack4::before { content: "\f8e6"; } .bi-brilliance::before { content: "\f8e7"; } .bi-cake-fill::before { content: "\f8e8"; } .bi-cake2-fill::before { content: "\f8e9"; } .bi-duffle-fill::before { content: "\f8ea"; } .bi-duffle::before { content: "\f8eb"; } .bi-exposure::before { content: "\f8ec"; } .bi-gender-neuter::before { content: "\f8ed"; } .bi-highlights::before { content: "\f8ee"; } .bi-luggage-fill::before { content: "\f8ef"; } .bi-luggage::before { content: "\f8f0"; } .bi-mailbox-flag::before { content: "\f8f1"; } .bi-mailbox2-flag::before { content: "\f8f2"; } .bi-noise-reduction::before { content: "\f8f3"; } .bi-passport-fill::before { content: "\f8f4"; } .bi-passport::before { content: "\f8f5"; } .bi-person-arms-up::before { content: "\f8f6"; } .bi-person-raised-hand::before { content: "\f8f7"; } .bi-person-standing-dress::before { content: "\f8f8"; } .bi-person-standing::before { content: "\f8f9"; } .bi-person-walking::before { content: "\f8fa"; } .bi-person-wheelchair::before { content: "\f8fb"; } .bi-shadows::before { content: "\f8fc"; } .bi-suitcase-fill::before { content: "\f8fd"; } .bi-suitcase-lg-fill::before { content: "\f8fe"; } .bi-suitcase-lg::before { content: "\f8ff"; } .bi-suitcase::before { content: "\f900"; } .bi-suitcase2-fill::before { content: "\f901"; } .bi-suitcase2::before { content: "\f902"; } .bi-vignette::before { content: "\f903"; } .bi-bluesky::before { content: "\f7f9"; } .bi-tux::before { content: "\f904"; } .bi-beaker-fill::before { content: "\f905"; } .bi-beaker::before { content: "\f906"; } .bi-flask-fill::before { content: "\f907"; } .bi-flask-florence-fill::before { content: "\f908"; } .bi-flask-florence::before { content: "\f909"; } .bi-flask::before { content: "\f90a"; } .bi-leaf-fill::before { content: "\f90b"; } .bi-leaf::before { content: "\f90c"; } .bi-measuring-cup-fill::before { content: "\f90d"; } .bi-measuring-cup::before { content: "\f90e"; } .bi-unlock2-fill::before { content: "\f90f"; } .bi-unlock2::before { content: "\f910"; } .bi-battery-low::before { content: "\f911"; } .bi-anthropic::before { content: "\f912"; } .bi-apple-music::before { content: "\f913"; } .bi-claude::before { content: "\f914"; } .bi-openai::before { content: "\f915"; } .bi-perplexity::before { content: "\f916"; } .bi-css::before { content: "\f917"; } .bi-javascript::before { content: "\f918"; } .bi-typescript::before { content: "\f919"; } .bi-fork-knife::before { content: "\f91a"; } .bi-globe-americas-fill::before { content: "\f91b"; } .bi-globe-asia-australia-fill::before { content: "\f91c"; } .bi-globe-central-south-asia-fill::before { content: "\f91d"; } .bi-globe-europe-africa-fill::before { content: "\f91e"; } /* ===== button.css ===== */ /* ============================================ TECH-STC.RU - PROFESSIONAL BUTTON SYSTEM Инженерный интерфейс: функциональность важнее декора ============================================ */ /* БАЗОВЫЙ КЛАСС КНОПКИ ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: 0; font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: all var(--transition-fast); position: relative; overflow: hidden; } /* ОСНОВНЫЕ ТИПЫ КНОПОК ============================================ */ /* 1. PRIMARY — Главное действие (синий) */ .btn-primary { color: var(--white); background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover:not(:disabled) { background-color: var(--primary-4); border-color: var(--primary-4); } .btn-primary:active:not(:disabled) { background-color: var(--primary-3); border-color: var(--primary-3); } /* 2. SECONDARY — Второстепенное действие (серая) */ .btn-secondary { color: var(--dark); background-color: var(--white); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background-color: var(--gray); border-color: var(--primary-1); color: var(--primary-4); } .btn-secondary:active:not(:disabled) { background-color: var(--gray); border-color: var(--primary); } /* 3. OUTLINE — Контурная (для второстепенных действий) */ .btn-outline { color: var(--primary); background-color: transparent; border-color: var(--primary); } .btn-outline:hover:not(:disabled) { color: var(--white); background-color: var(--primary); border-color: var(--primary); } .btn-outline:active:not(:disabled) { background-color: var(--primary-4); border-color: var(--primary-4); } /* 4. DANGER — Опасное действие (красная) */ .btn-danger { color: var(--white); background-color: var(--color-error); border-color: var(--color-error); } .btn-danger:hover:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } .btn-danger:active:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } /* 5. SUCCESS — Успешное действие (зелёная) */ .btn-success { color: var(--white); background-color: var(--color-success); border-color: var(--color-success); } .btn-success:hover:not(:disabled) { background-color: var(--success-dark); border-color: var(--success-dark); } .btn-success:active:not(:disabled) { background-color: var(--success-dark); border-color: var(--success-dark); } /* РАЗМЕРЫ ============================================ */ .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; min-height: 36px; min-width: 90px; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; min-height: 56px; min-width: 160px; } /* БЛОЧНЫЕ КНОПКИ (на всю ширину) */ .btn-block { display: flex; width: 100%; } /* СОСТОЯНИЯ ============================================ */ /* Disabled — для всех типов */ .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Focus — доступность */ .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Loading state */ .btn-loading { color: transparent !important; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; animation: button-spin 0.6s linear infinite; } @keyframes button-spin { to { transform: rotate(360deg); } } /* Корректировка цвета спиннера для разных типов */ .btn-primary.btn-loading::after { border-color: rgba(255, 255, 255, 0.5); border-right-color: transparent; border-top-color: transparent; } .btn-outline.btn-loading::after { border-color: var(--primary); border-right-color: transparent; border-top-color: transparent; } /* ГРУППЫ КНОПОК ============================================ */ .btn-group { display: inline-flex; gap: 0.5rem; } .btn-group-vertical { display: flex; flex-direction: column; gap: 0.5rem; } /* ДОСТУПНОСТЬ И ПРОИЗВОДИТЕЛЬНОСТЬ ============================================ */ @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* УТИЛИТАРНЫЕ КЛАССЫ (для особых случаев) ============================================ */ /* .btn-icon-only удалён — дублируется в 100-icons.css */ /* Кнопка для скролла (специфичный компонент) */ .btn-scroll { font-weight: 900; font-size: 2.6rem; text-align: center; border: 1px solid transparent; cursor: pointer; background: transparent; } /* ===== card.css ===== */ /* ============================================ TECH-STC.RU - CARD COMPONENT Технические карточки для инженерного интерфейса ============================================ */ /* ----------------------------------------------------------------- БАЗОВАЯ КАРТОЧКА ----------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; overflow: hidden; color: var(--color-text); transition: border-color var(--transition-fast); } /* ----------------------------------------------------------------- МОДИФИКАТОРЫ КАРТОЧЕК ----------------------------------------------------------------- */ .card--bordered { border-color: var(--color-border); } .card--borderless { border: none; } .card--elevated { border-color: var(--color-border-light); border-width: 1px; } .card--interactive { cursor: pointer; } .card--interactive:hover { /*border-color: var(--color-accent);*/ } .card--interactive:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ----------------------------------------------------------------- СТРУКТУРА КАРТОЧКИ (БЭМ) ----------------------------------------------------------------- */ .card__header { padding: var(--space-lg) var(--space-xl); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); } .card__body { padding: var(--space-xl); flex: 1 1 auto; } .card__footer { padding: var(--space-lg) var(--space-xl); background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-md); } .card__image { width: 100%; height: auto; display: block; } .card__image img { width: 100%; height: auto; display: block; } .card__title { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--color-text); } .card__title:last-child { margin-bottom: 0; } .card__title-icon { display: flex; align-items: center; gap: var(--space-sm); } .card__text { font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .card__text:last-child { margin-bottom: 0; } .card__meta { font-size: 0.875rem; color: var(--color-text-muted); display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); } /* ----------------------------------------------------------------- ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ ----------------------------------------------------------------- */ .card--horizontal { flex-direction: row; } .card--horizontal .card__image { width: 200px; flex-shrink: 0; } .card--horizontal .card__body { flex: 1; } /* ----------------------------------------------------------------- КОМПАКТНЫЕ КАРТОЧКИ (для плотных интерфейсов) ----------------------------------------------------------------- */ .card--compact .card__header { padding: var(--space-md) var(--space-lg); } .card--compact .card__body { padding: var(--space-lg); } .card--compact .card__footer { padding: var(--space-md) var(--space-lg); } .card--compact .card__title { font-size: 1rem; } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 767px) { .card--horizontal { flex-direction: column; } .card--horizontal .card__image { width: 100%; } .card__header { padding: var(--space-md) var(--space-lg); } .card__body { padding: var(--space-lg); } .card__footer { padding: var(--space-md) var(--space-lg); } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ (комментарии для разработчиков) ----------------------------------------------------------------- */ /* Простая карточка: <div class="card"> <div class="card__body"> <h3 class="card__title">Заголовок</h3> <p class="card__text">Текст</p> </div> </div> Карточка с заголовком и действиями: <div class="card"> <div class="card__header"> <h3 class="card__title">Заголовок</h3> </div> <div class="card__body"> <p class="card__text">Контент</p> </div> <div class="card__footer"> <button class="btn btn-outline">Отмена</button> <button class="btn btn-primary">Сохранить</button> </div> </div> */ /* ===== category-nav.css ===== */ /* ============================================ TECH-STC.RU - CATEGORY NAVIGATION Навигация по категориям и файлам ============================================ */ /* === СБРОС И БАЗОВЫЕ СТИЛИ === */ .ctg-reset { margin: 0; padding: 0; box-sizing: border-box; } .ctg-container { width: 100%; margin-right: auto; margin-left: auto; } /* === СЕТКА НАВИГАЦИИ === */ .ctg-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } @media (min-width: 992px) { .ctg-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .ctg-grid { grid-template-columns: repeat(3, 1fr); } } /* === СЕКЦИЯ НАВИГАЦИИ === */ .ctg-nav-section { padding: 0; margin-bottom: var(--space-lg); height: 500px; overflow-y: auto; } .ctg-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } .ctg-nav-title { display: flex; align-items: center; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin: 0; } .ctg-nav-title svg { margin-right: 0.3rem; stroke: var(--color-accent); stroke-width: 2.4; height: 20px; } .ctg-nav-stats { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); } /* === СПИСОК РАЗДЕЛОВ === */ .ctg-nav-list { list-style: none; padding: 0; margin: 0; } .ctg-group-title { font-weight: 600; font-size: 1.2rem; line-height: 1.3; background: var(--color-bg-tertiary); padding: 1rem; } .ctg-nav-item { padding: 0.6rem; background: transparent; transition: all var(--transition-fast); cursor: pointer; margin-bottom: 0.2rem; } .ctg-nav-item a { font-weight: 400; text-decoration: none; font-size: 1.1rem; line-height: 1.2; color: var(--color-text); } .ctg-nav-btn { padding: 0.6rem; background: transparent; transition: all var(--transition-fast); cursor: pointer; margin-bottom: 0.2rem; font-size: 1.1rem; width: 100%; /* Исправлено: убрано невалидное width: 500 */ } .ctg-file-count { font-size: 1rem; } .ctg-nav-item:not(:last-child) { border-bottom: 1px solid var(--color-border); } .ctg-nav-count { font-size: 0.6875rem; padding: var(--space-xs) var(--space-sm); min-width: 2.5rem; text-align: center; background: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: 0; font-weight: 600; letter-spacing: 0.02em; } /* === ПОИСК И ФИЛЬТРАЦИЯ === */ .ctg-search-section { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); } .ctg-search-box { margin-bottom: var(--space-lg); position: relative; } .ctg-search-input { width: 100%; padding: calc(var(--space-md) + 0.125rem) var(--space-lg) calc(var(--space-md) + 0.125rem) 1.4rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; font-size: 0.9375rem; transition: all var(--transition-fast); color: var(--color-text); font-family: var(--font-mono); } .ctg-search-input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.05); } .ctg-search-icon { position: absolute; left: var(--space-lg); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 1rem; opacity: 0.6; pointer-events: none; } /* === СПИСОК ФАЙЛОВ === */ .ctg-files-list { max-height: 520px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); } .ctg-files-list::-webkit-scrollbar { width: 6px; } .ctg-files-list::-webkit-scrollbar-track { background: var(--color-bg-secondary); } .ctg-files-list::-webkit-scrollbar-thumb { background: var(--color-border); } .ctg-files-list::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); } .ctg-folder-group { border-bottom: 1px solid var(--color-border); } .ctg-folder-group:last-child { border-bottom: none; } .ctg-folder-header { padding: var(--space-md) var(--space-lg); background: var(--color-bg-tertiary); font-weight: 600; font-size: 0.8125rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: 0.03em; } .ctg-file-item { display: block; padding: calc(var(--space-md) - 0.125rem) var(--space-lg); text-decoration: none; color: var(--color-text); transition: all var(--transition-fast); position: relative; font-size: 1.1rem; font-weight: 400; line-height: 1.3; } .ctg-file-item:hover { color: var(--color-accent); text-decoration: none; padding-left: calc(var(--space-lg) - 2px); } .ctg-file-item:last-child { border-bottom: none; } .ctg-file-name { font-weight: 500; margin-bottom: 0.125rem; display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9375rem; } .ctg-file-icon { font-size: 0.875rem; color: var(--color-text-muted); } .ctg-file-item:hover .ctg-file-icon { color: var(--color-accent); } .ctg-file-path { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); word-break: break-all; letter-spacing: -0.01em; } .ctg-file-translated { color: var(--color-success); font-size: 0.75rem; opacity: 0.8; } /* === КАТЕГОРИИ ФАЙЛОВ === */ .ctg-categories-section { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); } .ctg-categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .ctg-category { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .ctg-category:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-light); transform: translateY(-1px); } .ctg-category.ctg-active { background: var(--color-accent-light); border-color: var(--color-accent); border-left: 3px solid var(--color-accent); } .ctg-category-icon { font-size: 1.5rem; margin-bottom: var(--space-sm); color: var(--color-text-secondary); } .ctg-category.ctg-active .ctg-category-icon { color: var(--color-accent); } .ctg-category-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 0.03em; } .ctg-category-count { font-size: 0.6875rem; color: var(--color-text-muted); font-family: var(--font-mono); } /* Типы категорий */ .ctg-category-make .ctg-category-icon { color: #3b82f6; } .ctg-category-example .ctg-category-icon { color: var(--color-success); } .ctg-category-other .ctg-category-icon { color: var(--color-text-secondary); } .ctg-category-make.ctg-active { border-color: #3b82f6; } .ctg-category-example.ctg-active { border-color: var(--color-success); } .ctg-category-other.ctg-active { border-color: var(--color-text-secondary); } /* === БЫСТРЫЕ ФИЛЬТРЫ === */ .ctg-quick-filters { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); margin-bottom: var(--space-lg); } .ctg-filters-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.03em; } .ctg-filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .ctg-filter-tag { padding: var(--space-sm) var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; font-size: 0.8125rem; color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-sm); } .ctg-filter-tag:hover { background: var(--color-bg-secondary); border-color: var(--color-border-light); } .ctg-filter-tag.ctg-active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* === ПОПУЛЯРНЫЕ ФАЙЛЫ === */ .ctg-popular-section { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); } .ctg-popular-list { display: flex; flex-direction: column; gap: var(--space-sm); } .ctg-popular-item { display: flex; align-items: center; padding: var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; text-decoration: none; color: var(--color-text); transition: all var(--transition-fast); } .ctg-popular-item:hover { background: var(--color-bg-secondary); text-decoration: none; color: var(--color-accent); border-left: 2px solid var(--color-accent); padding-left: calc(var(--space-md) - 2px); } .ctg-popular-icon { width: 2rem; height: 2rem; background: var(--color-bg-secondary); border-radius: 0; display: flex; align-items: center; justify-content: center; margin-right: var(--space-md); color: var(--color-text-muted); font-size: 0.875rem; } .ctg-popular-item:hover .ctg-popular-icon { background: var(--color-accent-light); color: var(--color-accent); } .ctg-popular-info { flex-grow: 1; } .ctg-popular-name { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.125rem; } .ctg-popular-path { font-size: 0.75rem; color: var(--color-text-muted); font-family: var(--font-mono); } /* === УТИЛИТЫ === */ .ctg-divider { height: 0; background: var(--color-border); margin: var(--space-lg) 0; border: none; } .ctg-monospace { font-family: var(--font-mono); font-size: 0.875rem; } .ctg-uppercase { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8125rem; } .ctg-hidden { display: none !important; } .ctg-match { background-color: rgba(251, 191, 36, 0.15); padding: 0.125rem 0.25rem; border-radius: 0; font-weight: 600; } .ctg-empty-state { padding: 2.5rem var(--space-xl); text-align: center; color: var(--color-text-muted); background: var(--color-bg-tertiary); } .ctg-empty-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: var(--space-md); } /* === АНИМАЦИИ === */ @keyframes ctgFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ctg-fade-in { animation: ctgFadeIn 0.2s ease-out; } /* === ДОСТУПНОСТЬ === */ .ctg-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === СОСТОЯНИЯ === */ .ctg-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ctg-loading { position: relative; pointer-events: none; } .ctg-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: ctgSpin 0.6s linear infinite; } @keyframes ctgSpin { to { transform: rotate(360deg); } } /* Отладка переводов (оставлена для бэкенда, стилизована под систему) */ .ctg-translation-debug { background: #fff3cd; border: 2px solid #ffc107; border-radius: 0; padding: 1rem; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.875rem; } .ctg-translation-debug h5 { color: #856404; margin-bottom: 0.5rem; font-size: 0.9rem; } .ctg-translation-debug ul { margin: 0; padding-left: 1.5rem; } .ctg-translation-debug li { margin-bottom: 0.25rem; } .ctg-translation-debug .has-translation { color: var(--primary-1); font-weight: bold; } .ctg-translation-debug .no-translation { color: var(--color-error); } .ctg-file-item.has-translation { border-left: 0 solid var(--color-accent); } .ctg-nav-item.has-translation { border-right: 3px solid var(--primary-1); } .ctg-reset-btn { display: block; margin: 8px auto 0; padding: 6px 16px; font-size: 0.9rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0; cursor: pointer; color: var(--color-text); transition: all var(--transition-fast); } .ctg-reset-btn:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-light); } .ctg-reset-btn:active { background: var(--color-bg-tertiary); } /* ===== category.css ===== */ /** * СТИЛИ ДЛЯ РАЗДЕЛА "НЕСУЩИЕ КОНСТРУКЦИИ" * building-structures/styles.css * Версия: 1.0.0 * Дата: 2026-04-13 * Нормативы РК: СНиП РК 5.01-103-2024, СНиП РК 5.04-01-2011 */ /* ============================================ КАТЕГОРИИ И КАЛЬКУЛЯТОРЫ ============================================ */ .categories-list { display: flex; flex-direction: column; gap: var(--space-2xl, 2rem); } .category-block { background: var(--color-bg, #ffffff); border: 0px solid var(--color-border, #d1d5db); padding: var(--space-xl, 1.5rem); transition: border-color var(--transition-fast, 150ms ease); } .category-block:hover { border-color: var(--color-accent, #2563eb); } .category-title { font-size: 1.25rem; font-weight: 600; color: var(--color-text, #202122); margin: 0 0 var(--space-lg, 1rem) 0; padding-bottom: var(--space-sm, 0.5rem); border-bottom: 2px solid var(--color-border, #d1d5db); display: flex; align-items: baseline; justify-content:left; flex-wrap: wrap; gap: var(--space-sm, 0.5rem); } .cat-count { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted, #9ca3af); font-family: var(--font-mono, monospace); } /* ============================================ СЕТКА КАЛЬКУЛЯТОРОВ ============================================ */ .calculators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg, 1rem); } /* ============================================ КАРТОЧКА КАЛЬКУЛЯТОРА ============================================ */ .calc-card { display: flex; flex-direction: column; padding: var(--space-lg, 1rem); background: var(--color-bg-secondary, #f5f7fa); border-radius: 4px; border: 0px solid var(--color-border-light, #e5e7eb); text-decoration: none; transition: all var(--transition-fast, 150ms ease); position: relative; overflow: hidden; } .calc-card:hover { background: var(--color-bg, #ffffff); border-color: var(--color-accent, #2563eb); transform: translateY(-2px); } .calc-card:focus-visible { outline: 2px solid var(--color-accent, #2563eb); outline-offset: 2px; } /* Техническая полоска сверху */ .calc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent, #2563eb); transform: scaleX(0); transition: transform var(--transition-fast, 150ms ease); } .calc-card:hover::before { transform: scaleX(1); } .calc-name { font-size: 1rem; font-weight: 500; color: var(--color-text, #202122); line-height: 1.4; margin-bottom: var(--space-sm, 0.5rem); transition: color var(--transition-fast, 150ms ease); } .calc-card:hover .calc-name { color: var(--color-accent, #2563eb); } .calc-slug { font-size: 0.75rem; font-family: var(--font-mono, monospace); color: var(--color-text-muted, #9ca3af); word-break: break-all; } /* ============================================ АДАПТИВНОСТЬ ============================================ */ @media (max-width: 768px) { .category-block { padding: var(--space-lg, 1rem); } .category-title { font-size: 1.125rem; flex-direction: column; align-items: flex-start; } .calculators-grid { grid-template-columns: 1fr; gap: var(--space-md, 0.75rem); } .calc-card { padding: var(--space-md, 0.75rem); } .calc-name { font-size: 0.9375rem; } } /* ============================================ ПЕЧАТЬ ============================================ */ @media print { .category-block { break-inside: avoid; page-break-inside: avoid; } .calc-card { border: 1px solid #000; background: none; } .calc-card:hover { transform: none; } .calc-card::before { display: none; } } /* ===== contact-form.css ===== */ /* ============================================ TECH-STC.RU - CONTACT FORM SYSTEM Mobile First | WCAG 2.1 AA | 152-ФЗ | Технический стиль ============================================ */ .contact-form { display: block; width: 100%; max-width: 100%; margin: 0; padding: var(--space-xl) 0; } /* ----------------------------------------------------------------- ЗАГОЛОВКИ ФОРМЫ ----------------------------------------------------------------- */ .contact-form__title { font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--color-text); margin: 0 0 var(--space-lg) 0; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-border); } .contact-form__subtitle { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0 0 var(--space-xl) 0; } /* ----------------------------------------------------------------- ГРУППЫ ПОЛЕЙ ----------------------------------------------------------------- */ .contact-form .form__group { margin-bottom: var(--space-lg); position: relative; } .contact-form .form__group--error { margin-bottom: var(--space-xl); } /* ----------------------------------------------------------------- МЕТКИ ПОЛЕЙ — ИНЖЕНЕРНЫЙ СТИЛЬ ----------------------------------------------------------------- */ .contact-form .form__label { display: block; margin-bottom: var(--space-xs); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text); } .contact-form .form__label span.text-error { color: var(--color-error); font-size: 1.1em; margin-left: 2px; } /* ----------------------------------------------------------------- ПОЛЯ ВВОДА — ТЕХНИЧЕСКИЙ МИНИМАЛИЗМ ----------------------------------------------------------------- */ .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; } .contact-form .form__input { height: 3rem; } .contact-form .form__textarea { min-height: 6rem; resize: vertical; line-height: 1.5; } .contact-form .form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; } /* Исправляем автозаполнение Chrome */ .contact-form .form__input:-webkit-autofill, .contact-form .form__input:-webkit-autofill:hover, .contact-form .form__input:-webkit-autofill:focus, .contact-form .form__textarea:-webkit-autofill, .contact-form .form__textarea:-webkit-autofill:hover, .contact-form .form__textarea:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0px 1000px var(--color-bg) inset; transition: background-color 5000s ease-in-out 0s; } /* ----------------------------------------------------------------- СОСТОЯНИЯ ПОЛЕЙ ----------------------------------------------------------------- */ .contact-form .form__input:hover, .contact-form .form__textarea:hover, .contact-form .form__select:hover { border-color: var(--color-text-secondary); } .contact-form .form__input:focus, .contact-form .form__textarea:focus, .contact-form .form__select:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } /* Невалидные поля */ .contact-form .form__input:invalid:not(:placeholder-shown), .contact-form .form__textarea:invalid:not(:placeholder-shown), .contact-form .form__select:invalid:not(:placeholder-shown) { border-color: var(--color-error); } .contact-form .form__input:invalid:not(:placeholder-shown):focus, .contact-form .form__textarea:invalid:not(:placeholder-shown):focus, .contact-form .form__select:invalid:not(:placeholder-shown):focus { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); } /* ----------------------------------------------------------------- PLACEHOLDER ----------------------------------------------------------------- */ .contact-form .form__input::placeholder, .contact-form .form__textarea::placeholder, .contact-form .form__select::placeholder { color: var(--color-text-muted); opacity: 0.7; font-size: 0.9375rem; } /* ----------------------------------------------------------------- СЧЁТЧИК СИМВОЛОВ (для textarea) ----------------------------------------------------------------- */ .contact-form .form__counter { display: flex; justify-content: flex-end; margin-top: var(--space-xs); font-size: 0.75rem; color: var(--color-text-muted); } .contact-form .form__counter--warning { color: var(--color-warning); } .contact-form .form__counter--error { color: var(--color-error); } /* ----------------------------------------------------------------- ЧЕКБОКС СОГЛАСИЯ (152-ФЗ) ----------------------------------------------------------------- */ .contact-form .form__group--checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); margin: var(--space-xl) 0; padding: var(--space-md); background-color: var(--color-bg-secondary); } .contact-form .form__checkbox { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; margin-top: 0.125rem; border: 1.5px solid var(--color-border); border-radius: 0; background-color: var(--color-bg); cursor: pointer; transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; } .contact-form .form__checkbox:checked { background-color: var(--color-accent); border-color: var(--color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='white'%3E%3Cpath d='M10 3L4.5 8.5 2 6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .contact-form .form__checkbox:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } .contact-form .form__checkbox:disabled { opacity: 0.5; cursor: not-allowed; } .contact-form .form__label--inline { flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font-weight: 400; } .contact-form .form__label--inline a { color: var(--color-accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } .contact-form .form__label--inline a:hover, .contact-form .form__label--inline a:focus { border-bottom-color: var(--color-accent); } /* ----------------------------------------------------------------- СООБЩЕНИЯ ----------------------------------------------------------------- */ .contact-form__error { display: block; margin-top: var(--space-xs); font-size: 0.75rem; color: var(--color-error); font-weight: 500; } .contact-form__success { padding: var(--space-lg); background-color: color-mix(in srgb, var(--color-success) 5%, white); border-left: 4px solid var(--color-success); margin-bottom: var(--space-xl); } .contact-form__success-title { font-size: 1rem; font-weight: 600; color: var(--color-success-dark); margin: 0 0 var(--space-xs) 0; } .contact-form__success-text { font-size: 0.875rem; color: var(--color-success-dark); margin: 0; } .contact-form__hint { display: block; margin-top: var(--space-md); font-size: 0.6875rem; color: var(--color-text-muted); text-align: center; line-height: 1.5; } /* ----------------------------------------------------------------- АДАПТАЦИЯ ----------------------------------------------------------------- */ @media (min-width: 768px) { .contact-form { padding: var(--space-2xl) 0; } .contact-form .btn--primary { width: auto; min-width: 280px; padding: 0.875rem 2.5rem; } .contact-form .form__group--checkbox { padding: var(--space-lg); } .contact-form__title { font-size: 1.5rem; } } @media (min-width: 992px) { .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select { font-size: 0.9375rem; } .contact-form .btn--primary { min-width: 320px; } } /* ----------------------------------------------------------------- ПЕЧАТЬ ----------------------------------------------------------------- */ @media print { .contact-form { display: none; } } /* ----------------------------------------------------------------- HIGH CONTRAST MODE ----------------------------------------------------------------- */ @media (forced-colors: active) { .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select, .contact-form .form__checkbox, .contact-form .btn--primary { border: 1px solid; } .contact-form .form__checkbox:checked { background-color: highlight; } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Базовая форма: <form class="contact-form"> <h2 class="contact-form__title">Связаться с нами</h2> <div class="row"> <div class="col-12 col-md-6"> <div class="form__group"> <label class="form__label">Имя <span class="text-error">*</span></label> <input type="text" class="form__input" required> </div> </div> </div> <div class="form__group--checkbox"> <input type="checkbox" class="form__checkbox" id="agree" required> <label for="agree" class="form__label--inline">Согласие на обработку данных</label> </div> <div class="form__actions"> <button type="submit" class="btn--primary">Отправить</button> </div> </form> */ /* ===== content-list.css ===== */ /* ============================================ TECH-STC.RU - CONTENT LIST (TOC) Оглавление и навигация по контенту ============================================ */ .content-list { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); margin-bottom: var(--space-2xl); font-family: var(--font-sans); color: var(--color-text); } .content-list h3 { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.02em; } .content-list ol { list-style: none; counter-reset: item-counter; padding-left: 0; margin-bottom: 0; } .content-list li { counter-increment: item-counter; margin-bottom: 2px; display: block; background-color: var(--color-border-light); } .content-list li:last-child { margin-bottom: 0; } .content-list a { display: block; width: 100%; padding: var(--space-sm) var(--space-md); color: var(--color-text); text-decoration: none; font-size: 0.875rem; line-height: 1.5; background-color: var(--color-bg); transition: background-color var(--transition-fast), color var(--transition-fast); } .content-list a::before { content: counter(item-counter) ". "; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); margin-right: var(--space-sm); } .content-list a:hover { background-color: var(--color-bg-secondary); color: var(--color-accent); } .content-list a:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } .content-list hr { margin: var(--space-lg) 0; border: 0; border-top: 1px solid var(--color-border); opacity: 0.5; } /* Вариант с компактным отображением */ .content-list--compact { padding: var(--space-lg); } .content-list--compact h3 { font-size: 0.9375rem; margin-bottom: var(--space-md); } .content-list--compact a { padding: var(--space-xs) var(--space-sm); font-size: 0.8125rem; } /* Вариант с номерами справа */ .content-list--numbers-right li { display: flex; align-items: center; justify-content: space-between; } .content-list--numbers-right a { flex: 1; } .content-list--numbers-right a::before { content: ""; display: none; } .content-list--numbers-right a::after { content: counter(item-counter); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); margin-left: var(--space-sm); } /* Sticky на десктопе */ @media (min-width: 992px) { .content-list--sticky { position: sticky; top: var(--space-lg); } } /* Адаптивность */ @media (max-width: 768px) { .content-list { padding: var(--space-lg); margin-bottom: var(--space-xl); } .content-list h3 { font-size: 0.9375rem; margin-bottom: var(--space-md); } .content-list a { padding: var(--space-xs) var(--space-sm); font-size: 0.8125rem; } .content-list hr { margin: var(--space-md) 0; } } /* ===== cookie.css ===== */ /* ============================================ TECH-STC.RU - COOKIE BANNER & MODAL 152-ФЗ, GDPR, согласие на cookies ============================================ */ /* ----------------------------------------------------------------- COOKIE BANNER ----------------------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: var(--space-lg) 0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); transform: translateY(0); transition: transform var(--transition-base); } .cookie-banner--hidden { transform: translateY(100%); } .cookie-banner__text { margin: 0 0 var(--space-md) 0; font-size: 0.875rem; color: var(--color-text-secondary); } .cookie-banner__text a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid transparent; } .cookie-banner__text a:hover { border-bottom-color: var(--color-accent); } .cookie-banner__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } @media (min-width: 768px) { .cookie-banner__text { margin: 0; flex: 1; } .cookie-banner__actions { flex: 0 0 auto; } } /* ----------------------------------------------------------------- COOKIE MODAL (окно настроек) ----------------------------------------------------------------- */ .cookie-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .cookie-modal--open { opacity: 1; visibility: visible; } .cookie-modal__content { background-color: var(--color-bg); border: 1px solid var(--color-border); max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; padding: var(--space-xl); box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(20px); transition: transform var(--transition-base); } .cookie-modal--open .cookie-modal__content { transform: translateY(0); } .cookie-modal__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-sm) 0; color: var(--color-text); } .cookie-modal__text { color: var(--color-text-secondary); font-size: 0.9375rem; margin: 0 0 var(--space-lg) 0; } /* Опции cookie */ .cookie-option { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); } .cookie-option:last-child { border-bottom: none; } .cookie-option__header { display: flex; align-items: center; margin-bottom: var(--space-xs); } .cookie-option__checkbox { width: 1.125rem; height: 1.125rem; margin-right: var(--space-sm); accent-color: var(--color-accent); cursor: pointer; } .cookie-option__checkbox:disabled { opacity: 0.6; cursor: not-allowed; } .cookie-option__label { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .cookie-option__description { display: block; margin-left: calc(1.125rem + var(--space-sm)); color: var(--color-text-muted); font-size: 0.8125rem; line-height: 1.5; } /* Действия модалки */ .cookie-modal__actions { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); display: flex; gap: var(--space-md); flex-wrap: wrap; } /* Кнопки для cookie (можно использовать общие .btn) */ .cookie-btn { padding: 0.5rem 1rem; font-size: 0.875rem; border: 1px solid transparent; background-color: var(--color-bg-secondary); color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); } .cookie-btn:hover { background-color: var(--color-bg-tertiary); } .cookie-btn--primary { background-color: var(--color-accent); color: white; } .cookie-btn--primary:hover { background-color: var(--color-accent-hover); } /* ===== doc-card.css ===== */ /* ============================================ HR-TEMPLATES SPECIFIC STYLES ============================================ */ /* Заголовок категории */ .clc-category-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text, #333); border-bottom: 2px solid var(--color-border, #eee); padding-bottom: 0.5rem; margin-top: 2rem; } /* Обертка документа (для страницы просмотра/печати) */ .clc-document-wrapper { background: #fff; padding: 40px; border: 1px solid var(--color-border, #ddd); box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 210mm; /* A4 width */ margin: 0 auto; font-family: "Times New Roman", Times, serif; line-height: 1.5; color: #000; } /* Типографика внутри документа */ .clc-doc-content h3, .clc-doc-content h4 { font-weight: bold; margin-top: 1.5em; margin-bottom: 0.5em; text-align: center; font-family: "Times New Roman", Times, serif; } .clc-doc-content p { margin-bottom: 0.8em; text-align: justify; text-indent: 1.25cm; } .clc-doc-content ul { list-style-type: disc; margin-left: 2em; } .clc-sign-table { width: 100%; margin-top: 2em; border-collapse: collapse; } .clc-sign-line { margin-top: 2em; border-top: 1px solid #000; padding-top: 0.5em; } /* Стили для печати */ @media print { body * { visibility: hidden; } .clc-document-wrapper, .clc-document-wrapper * { visibility: visible; } .clc-document-wrapper { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 20mm; box-shadow: none; border: none; } .d-print-none { display: none !important; } .d-none.d-print-block { display: block !important; } a { text-decoration: none; color: #000; } } /* ===== icons.css ===== */ /* Базовые стили для SVG-иконок */ .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon-left { margin-right: 0.5rem; } .icon-right { margin-left: 0.5rem; } /* Для кнопок-иконок */ .btn-icon-only { padding: 0.75rem; aspect-ratio: 1 / 1; } .btn-icon-only .icon { margin: 0; } /* ===== main-page.css ===== */ /* ============================================ MAIN PAGE — TECH-STC.RU COLOR SCHEME Стиль: строгий деловой минимализм ============================================ */ :root { --primary: #0056b3; --primary-1: #64a4de; --primary-2: #388fde; --primary-3: #0062bd; --primary-4: #235b8e; --accent: #0088cc; --secondary: #6c757d; --white: #fff; --gray: #f8f9fa; --dark: #212529; --border: #e9ecef; --background: #f8fafd; --success: #1a7d39; --success-light: #4caf50; --success-dark: #145a2c; --danger: #c62828; --danger-light: #ef5350; --danger-dark: #9a1c1c; --color-bg: #ffffff; --color-bg-secondary: #f5f7fa; --color-bg-tertiary: #e8ecf1; --color-border: #d1d5db; --color-border-light: #e5e7eb; --color-text: #202122; --color-text-secondary: #6b7280; --color-text-muted: #9ca3af; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-light: #dbeafe; --color-success: #059669; --color-warning: #d97706; --color-error: #dc2626; } /* === HERO SECTION === */ .main-hero { padding: 5rem 0 4rem; background: linear-gradient(135deg, #202f3d 0%, #3c566d 50%, #202f3d 100%); border-bottom: 0px solid var(--primary); } .main-hero__inner { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; text-align: left; } .main-hero__badge { display: inline-block; color: var(--primary-1); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; border-left: 3px solid var(--primary); padding-left: 0.75rem; } .main-hero__title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin: 0 0 1.25rem; color: var(--white); letter-spacing: -0.02em; } .main-hero__subtitle { font-size: 1.125rem; line-height: 1.5; color: var(--color-text-muted); margin: 0 0 2rem; max-width: 640px; } .main-hero__actions { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 2.5rem; } .main-hero__compliance { display: flex; gap: 2rem; justify-content: flex-start; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 0.75rem; color: var(--color-text-muted); } .main-hero__compliance li { display: flex; align-items: center; gap: 0.5rem; } .main-hero__compliance i { color: var(--primary-1); font-size: 0.8rem; } /* === SECTIONS === */ .main-section { padding: 4rem 0; } .main-section--light { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .main-section--accent { background: var(--primary-4); color: var(--white); } .main-section--accent .main-section__title, .main-section--accent .main-card__title, .main-section--accent .main-card__text, .main-section--accent .main-advantages span { color: var(--white); } .main-section__title { font-size: 1.75rem; font-weight: 700; margin: 0 0 2.5rem; text-align: left; color: var(--color-text); letter-spacing: -0.01em; } .main-section--accent .main-section__title { color: var(--white); } /* === GRID === */ .main-grid { display: grid; gap: 2rem; } .main-grid--3 { grid-template-columns: repeat(1, 1fr); } .main-grid--2 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .main-grid--3 { grid-template-columns: repeat(3, 1fr); } .main-grid--2 { grid-template-columns: repeat(2, 1fr); } } /* === CARDS === */ .main-card { background: var(--color-bg); border: 1px solid rgb(238, 238, 238); border-radius: 7px; padding: 2rem; transition: border-color 0.2s; } .main-card:hover { border-color: var(--primary); } .main-card__icon { font-size: 1.25rem; color: var(--primary); margin-bottom: 1rem; font-weight: 600; } .main-card__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--color-text); line-height: 1.3; } .main-card__text { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.25rem; } .main-card__link { font-size: 0.875rem; font-weight: 500; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); transition: opacity 0.15s; } .main-card__link:hover { opacity: 0.6; } /* === WORKFLOW === */ .main-workflow { display: grid; gap: 2rem; } .main-workflow__item { position: relative; padding-left: 4rem; border-left: 1px solid var(--color-border); } .main-workflow__number { position: absolute; left: -1px; top: 0; width: 2.5rem; height: 2.5rem; background: var(--color-bg); color: var(--primary); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); } .main-workflow__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--color-text); } .main-workflow__item p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* === AUDIENCE CARDS === */ .main-audience-card { background: var(--color-bg); border: 1px solid var(--color-border); padding: 2rem; } .main-audience-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.75rem; color: var(--color-text); } .main-audience-card h3 i { color: var(--primary); font-size: 1rem; } .main-audience-card ul { list-style: none; padding: 0; margin: 0; } .main-audience-card li { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; } .main-audience-card li::before { content: "—"; position: absolute; left: 0; color: var(--primary); } /* === ADVANTAGES === */ .main-advantages { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; } .main-advantages li { display: flex; align-items: flex-start; gap: 1rem; font-size: 0.9375rem; line-height: 1.6; } .main-advantages i { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; font-size: 0.875rem; } .main-advantages span { color: var(--color-text); font-weight: 500; } .main-section--accent .main-advantages i { color: var(--primary-1); } .main-section--accent .main-advantages span { color: var(--white); } /* === CTA GRID === */ .main-cta-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .main-cta-grid { grid-template-columns: repeat(2, 1fr); } } .main-cta-card { display: block; background: var(--color-bg); border: 1px solid var(--color-border); padding: 2rem; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; } .main-cta-card:hover { border-color: var(--primary); background: var(--color-bg-secondary); } .main-cta-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.75rem; color: var(--color-text); } .main-cta-card h3 i { color: var(--primary); font-size: 1rem; } .main-cta-card p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* === DISCLAIMER === */ .main-disclaimer { padding: 2rem 0; border-top: 1px solid var(--color-border-light); text-align: left; font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.6; } .main-disclaimer i { margin-right: 0.5rem; color: var(--primary); } /* === PRINT === */ @media print { .main-hero, .main-section, .main-disclaimer { padding: 1rem 0; } .main-hero { background: var(--white); } .main-hero__title { color: var(--color-text); } .main-hero__actions, .main-card__link, .main-cta-card { display: none; } .main-card, .main-audience-card, .main-cta-card { border: 1px solid var(--color-text); } } /* ===== main.css ===== */ /* ============================================ TECH-STC.RU - MAIN CSS Системный файл сборки стилей ============================================ */ /* 1. БАЗОВЫЕ НАСТРОЙКИ */ /* 2. ТИПОГРАФИКА И СЕТКА */ /* 3. УТИЛИТЫ */ /* 4. КОМПОНЕНТЫ UI */ /**/ /* 5. ФОРМЫ */ /* 6. КАЛЬКУЛЯТОРЫ */ /* 9. ОБЩИЕ КОМПОНЕНТЫ */ /* 10. АДАПТИВНОСТЬ */ /* 11. ПЕЧАТЬ */ /* ===== markdown.css ===== */ /* ============================================ TECH-STC.RU - MARKDOWN CONTENT STYLES ============================================ */ .markdown-content { font-size: 1rem; line-height: 1.7; color: var(--color-text); max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--space-md); word-break: break-word; hyphens: auto; } /* Заголовки */ .markdown-content h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-2xl); color: var(--color-text); letter-spacing: -0.02em; scroll-margin-top: 100px; } .markdown-content h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: var(--space-2xl) 0 var(--space-lg); color: var(--color-text); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-border); } .markdown-content h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: var(--space-xl) 0 var(--space-md); color: var(--color-text); } .markdown-content h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: var(--space-lg) 0 var(--space-sm); color: var(--color-text); } /* Параграфы */ .markdown-content p { margin: 0 0 var(--space-lg); } /* Списки */ .markdown-content ul, .markdown-content ol { padding-left: 1.25rem; margin: 0 0 var(--space-lg) 1.5rem; } .markdown-content ul { list-style-type: disc; } .markdown-content li { margin-bottom: var(--space-xs); line-height: 1.6; } /* Ссылки */ .markdown-content a { color: var(--color-accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } .markdown-content a:hover { border-bottom-color: var(--color-accent); } /* Жирный и курсив */ .markdown-content strong { font-weight: 700; color: var(--color-text); } .markdown-content em { font-style: italic; color: var(--color-text-secondary); } /* Моноширинный текст */ .markdown-content .text-mono, .markdown-content code, .markdown-content pre code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-tertiary); padding: 0.2em 0.4em; border-radius: 0; } /* Блоки кода */ .markdown-content pre { background: var(--color-bg-tertiary); padding: var(--space-lg); margin: var(--space-xl) 0; border: 1px solid var(--color-border-light); overflow-x: auto; border-radius: 0; } /* Юридический блок и статус */ .markdown-content p:has(strong:contains("Юридический статус")) { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); border-left: 4px solid var(--color-accent); background: var(--color-accent-light); } .markdown-content p:has(strong:contains("Создатель:")), .markdown-content p:has(strong:contains("ИНН:")) { margin: 0.5rem 0; font-size: 0.9375rem; } /* Контакты */ .markdown-content p:has(a[href^="mailto:"]) { margin-top: var(--space-xl); padding: var(--space-md); background: var(--color-bg-secondary); border: 1px solid var(--color-border); } /* Отступы между блоками */ .markdown-content > * + * { margin-top: var(--space-xl); } /* Мобильная адаптивность */ @media (max-width: 767px) { .markdown-content { padding: var(--space-lg) var(--space-md); } .markdown-content h1 { font-size: 1.5rem; } .markdown-content h2 { font-size: 1.25rem; } } /* ===== mobile.css ===== */ /* ============================================ TECH-STC.RU - MOBILE OVERRIDES Mobile-first adjustments for screens < 760px ============================================ */ @media (max-width: 759px) { #top-banners { display: none; } .technical-passport{padding: 1rem 0.75rem;} /* Утилиты: сброс p-3 */ .p-3 { padding: 0 !important; } /* Контейнеры и обертки: единый сброс + отступы */ .container, .container--narrow, main, .row { padding-left: 0 !important; padding-right: 0 !important; max-width: none; width: 100%; margin: 0; box-sizing: border-box; } .shell-h1{padding: 0 16px;} /* Сброс гридов */ .grid { display: block; } .grid > [class*="grid__"] { width: 100%; margin-left: 0; margin-right: 0; } /* Навигация: вертикальная */ .nav, .nav__list { display: block; } .nav__item { display: block; margin: 0 0 var(--space-sm) 0; } /* Скрытие/показ элементов */ .desktop-only { display: none !important; } .mobile-only { display: block !important; } /* Таблицы: горизонтальный скролл */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Сайдбар */ .sidebar { position: static; width: 100%; margin-top: var(--space-xl); } /* Типография */ h1 { font-size: 1.5rem; line-height: 1.3; } h2 { font-size: 1.25rem; line-height: 1.3; } } /* Touch-friendly */ button, .button, [role="button"], input[type="submit"] { min-height: 44px; min-width: 44px; } /* Отключаем hover на тач-устройствах */ @media (hover: none) and (pointer: coarse) { .nav__link:hover { background-color: transparent; } .card:hover { transform: none; box-shadow: none; } } /* ===== navigation.css ===== */ /* ============================================ TECH-STC.RU - VERTICAL NAVIGATION Современная навигация без бордеров ============================================ */ /* ----------------------------------------------------------------- ОСНОВНОЙ КОНТЕЙНЕР ВЕРТИКАЛЬНОЙ НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical { width: 100%; background: var(--color-bg); } /* ----------------------------------------------------------------- СПИСОК НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__list { list-style: none; padding: 0; margin: 0; } /* ----------------------------------------------------------------- ЭЛЕМЕНТ СПИСКА ----------------------------------------------------------------- */ .nav-vertical__item { margin-bottom: 2px; position: relative; } .nav-vertical__item:last-child { margin-bottom: 0; } /* Разделители между группами */ .nav-vertical__item--divider { height: 1px; background: var(--color-border-light); margin: var(--space-md) 0; } /* ----------------------------------------------------------------- ССЫЛКА НАВИГАЦИИ - СОВРЕМЕННЫЙ СТИЛЬ БЕЗ БОРДЕРОВ ----------------------------------------------------------------- */ .nav-vertical__link { display: flex; align-items: center; gap: var(--space-sm); padding: 0.6rem var(--space-md); color: var(--color-text-secondary); text-decoration: none; font-size: 0.9375rem; font-weight: 500; border-radius: 0; /* Технический стиль */ transition: all var(--transition-fast); position: relative; } /* Текст ссылки */ .nav-vertical__link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Стрелка для вложенных меню */ .nav-vertical__link .arrow { margin-left: auto; font-size: 0.75rem; opacity: 0.5; transition: transform var(--transition-fast); } /* Открытое вложенное меню */ .nav-vertical__item--expanded > .nav-vertical__link .arrow { transform: rotate(90deg); } /* ----------------------------------------------------------------- СОСТОЯНИЯ ССЫЛОК - ЧИСТЫЙ СОВРЕМЕННЫЙ ДИЗАЙН ----------------------------------------------------------------- */ /* Hover - просто изменение фона */ .nav-vertical__link:hover, .nav-vertical__link:focus { color: var(--color-accent); background-color: var(--color-bg-secondary); } .nav-vertical__link:hover .icon, .nav-vertical__link:focus .icon { color: var(--color-accent); } /* Active (текущая страница) - цветной фон, без бордеров */ .nav-vertical__link--active, .nav-vertical__item--active > .nav-vertical__link { color: var(--color-accent); background-color: var(--color-accent-light); font-weight: 600; } .nav-vertical__link--active .icon, .nav-vertical__item--active > .nav-vertical__link .icon { color: var(--color-accent); } /* Disabled */ .nav-vertical__link--disabled, .nav-vertical__item--disabled > .nav-vertical__link { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* ----------------------------------------------------------------- ВЛОЖЕННЫЕ МЕНЮ - СОВРЕМЕННЫЙ СТИЛЬ ----------------------------------------------------------------- */ .nav-vertical__sublist { list-style: none; padding: 0 0 0 var(--space-lg); margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition-base); } .nav-vertical__item--expanded .nav-vertical__sublist { max-height: 500px; } .nav-vertical__sublist .nav-vertical__link { padding: 0.5rem var(--space-md); font-size: 0.875rem; background: transparent; } .nav-vertical__sublist .nav-vertical__link:hover { background-color: var(--color-bg-secondary); } .nav-vertical__sublist .nav-vertical__item:last-child .nav-vertical__link { margin-bottom: 0; } /* ----------------------------------------------------------------- ГРУППЫ НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__group { margin-bottom: var(--space-xl); } .nav-vertical__group:last-child { margin-bottom: 0; } .nav-vertical__group-title { padding: var(--space-md) var(--space-md) var(--space-xs); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; } /* ----------------------------------------------------------------- ВАРИАНТЫ - КОМПАКТНЫЙ ----------------------------------------------------------------- */ .nav-vertical--compact .nav-vertical__link { padding: 0.4rem var(--space-sm); font-size: 0.875rem; } .nav-vertical--compact .nav-vertical__sublist { padding-left: var(--space-md); } /* ----------------------------------------------------------------- ВАРИАНТЫ - С ИКОНКАМИ СПРАВА ----------------------------------------------------------------- */ .nav-vertical--icons-right .nav-vertical__link { flex-direction: row-reverse; } /* ----------------------------------------------------------------- ВАРИАНТЫ - ТЕХНИЧЕСКАЯ НАВИГАЦИЯ (для документации) ----------------------------------------------------------------- */ .nav-vertical--technical .nav-vertical__link { font-family: var(--font-mono); font-size: 0.875rem; } .nav-vertical--technical .nav-vertical__link .code { color: var(--color-accent); margin-right: var(--space-sm); } /* ----------------------------------------------------------------- ВАРИАНТЫ - МИНИМАЛИСТИЧНАЯ (только иконки) ----------------------------------------------------------------- */ .nav-vertical--icons-only .nav-vertical__link span:not(.icon) { display: none; } .nav-vertical--icons-only .nav-vertical__link { justify-content: center; padding: 0.6rem; } .nav-vertical--icons-only .nav-vertical__link .icon { margin: 0; width: 1.5rem; height: 1.5rem; } /* ----------------------------------------------------------------- ВАРИАНТЫ - БЕЗ ЗАЛИВКИ (только текст) ----------------------------------------------------------------- */ .nav-vertical--minimal .nav-vertical__link { background: transparent; } .nav-vertical--minimal .nav-vertical__link:hover { background: transparent; color: var(--color-accent); } .nav-vertical--minimal .nav-vertical__link--active, .nav-vertical--minimal .nav-vertical__item--active > .nav-vertical__link { background: transparent; color: var(--color-accent); font-weight: 600; } /* ----------------------------------------------------------------- БЕЙДЖИ В НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__link .badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; border-radius: 0; /* Технический стиль */ } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { .nav-vertical--collapsible { position: relative; } .nav-vertical--collapsible .nav-vertical__list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 100; } .nav-vertical--collapsible.expanded .nav-vertical__list { display: block; } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Современная навигация без бордеров: <nav class="nav-vertical"> <ul class="nav-vertical__list"> <li class="nav-vertical__item"> <a href="#" class="nav-vertical__link nav-vertical__link--active"> <svg class="icon">...</svg> <span>Главная</span> </a> </li> </ul> </nav> */ /* ===== print.css ===== */ /* ============================================ TECH-STC.RU - PRINT STYLES Оптимизация для печати технической документации ============================================ */ @media print { /* ===== СБРОС И БАЗОВЫЕ НАСТРОЙКИ ===== */ *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; transition: none !important; animation: none !important; } body { width: 100%; margin: 0; padding: 0; font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } /* ===== КОНТЕЙНЕРЫ ===== */ .col-6, .container, .container-fluid, .container--narrow, section, main, article { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ===== ТИПОГРАФИКА ===== */ h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; } h1 { font-size: 18pt; margin: 1cm 0 0.5cm; } h2 { font-size: 16pt; margin: 0.8cm 0 0.4cm; } h3 { font-size: 14pt; margin: 0.6cm 0 0.3cm; } h4 { font-size: 12pt; margin: 0.4cm 0 0.2cm; } p, li, .text-body { font-size: 11pt; line-height: 1.5; orphans: 3; widows: 3; } a { text-decoration: underline; color: #000; } /* Печатаем только внешние ссылки */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; font-weight: normal; } /* ===== ТАБЛИЦЫ ===== */ table { width: 100% !important; border-collapse: collapse; margin: 0.5cm 0; break-inside: avoid; page-break-inside: avoid; } th { background: #f0f0f0 !important; color: #000 !important; font-weight: bold; border: 1px solid #000; padding: 0.3cm; } td { border: 1px solid #000; padding: 0.3cm; } /* ===== КАРТОЧКИ ===== */ .card { border: 1px solid #000 !important; background: transparent !important; margin: 0.5cm 0; padding: 0.3cm; break-inside: avoid; page-break-inside: avoid; } .card__header { background: transparent !important; border-bottom: 1px solid #000; } .card__body, .card__footer { background: transparent !important; } /* ===== КНОПКИ И ФОРМЫ ===== */ .btn, button, .button { border: 1px solid #000 !important; background: transparent !important; color: #000 !important; padding: 0.2cm 0.5cm; text-decoration: none; } input, select, textarea { border: 1px solid #000 !important; background: transparent !important; color: #000 !important; padding: 0.2cm; } /* ===== СКРЫВАЕМ НЕНУЖНОЕ ===== */ .nav--vertical, .hdr-toggler, .hdr-mobile, .sidebar, .breadcrumb, .btn--primary, .btn--secondary, .btn--outline, .alert, .cookie-banner, .cookie-modal, .ftr-social, .hdr-desktop-menu, .mobile-only, iframe, video, .video-wrapper, .map, .no-print { display: none !important; } /* ===== ХЕДЕР И ФУТЕР ===== */ .hdr { border-bottom: 2px solid #000; margin-bottom: 0.5cm; } .hdr-brand-text { font-size: 16pt; font-weight: bold; } .ftr { border-top: 2px solid #000; margin-top: 1cm; padding-top: 0.5cm; font-size: 10pt; } /* ===== КОД И ЦИТАТЫ ===== */ pre, code, .mono { font-family: "Courier New", monospace; border: 1px solid #ccc; padding: 0.2cm; white-space: pre-wrap; word-wrap: break-word; } blockquote { margin: 0.5cm 0; padding: 0.3cm; border-left: 3px solid #000; font-style: italic; } /* ===== УПРАВЛЕНИЕ СТРАНИЦАМИ ===== */ img { max-width: 100% !important; break-inside: avoid; page-break-inside: avoid; } tr, li { break-inside: avoid; page-break-inside: avoid; } thead { display: table-header-group; } tfoot { display: table-footer-group; } /* ===== ПОЛЯ СТРАНИЦЫ ===== */ @page { margin: 2cm; size: A4; orphans: 4; widows: 3; } @page :first { margin-top: 3cm; } } @media print { .print-footer { font-size: 8pt; color: #666; margin-top: 20pt; border-top: 1px solid #ccc; padding-top: 6pt; } } /* ===== pro-calc.css ===== */ /* ============================================ TECH-STC.RU - PRO CALCULATOR Minimalist | Tech | Border-radius: 0 ============================================ */ .calculator-container { padding-top: 1rem; } .pro-split-calc { max-width: 100%; margin: 1.4rem auto; font-family: var(--font-sans); color: var(--color-text); } /* ----- Typography ----- */ .pro-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--color-text); letter-spacing: -0.02em; } .pro-note { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } /* ----- Grid Layout ----- */ .pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } /* ----- Form Column ----- */ .pro-form-col { background: var(--color-bg-secondary); padding: 1.5rem; border: 1px solid var(--color-border-light); border-radius: 0; } .pro-field { margin-bottom: 1.25rem; } .pro-label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--color-text); } .pro-input, .pro-select { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: 0; font-size: 1.1rem; color: var(--color-text); font-family: var(--font-mono); background: var(--color-bg); transition: border-color var(--transition-fast); } .pro-input:focus, .pro-select:focus { border-color: var(--primary); outline: none; } .pro-hint { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.375rem; } /* ----- Checkbox ----- */ .pro-checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; } .pro-checkbox { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--primary); } /* ----- Buttons ----- */ .pro-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .pro-btn { padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: 0; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .pro-btn-primary { background-color: var(--primary); color: var(--white); } .pro-btn-secondary { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } .pro-btn-secondary:hover { background-color: var(--color-bg-secondary); } .pro-error { color: var(--color-error); font-size: 0.875rem; margin-top: 0.75rem; min-height: 1.25rem; } /* ----- Results Column ----- */ .pro-results-col { background: var(--color-bg); display: flex; flex-direction: column; position: sticky; top: 0; z-index: 10; } .pro-results-card, .pro-export-card { background: var(--color-bg); padding: 1.5rem; border-left: 0; /*height: 100%;*/ display: flex; flex-direction: column; border-radius: 0; } .pro-results-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1.25rem 0; color: var(--color-text); padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .pro-result-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); } .pro-result-item:last-of-type { border-bottom: none; } .pro-result-highlight { background-color: var(--primary-light); margin: 0.5rem -0.75rem; padding: 0.875rem 0.75rem; border-bottom: none; } .pro-result-label { color: var(--color-text-secondary); font-size: 0.875rem; } .pro-result-value { font-weight: 600; color: var(--color-text); font-size: 1rem; font-family: var(--font-mono); } .pro-result-highlight .pro-result-value { color: var(--primary); } /* ----- Recommendations ----- */ .pro-recommendations { margin-top: auto; padding: 1rem; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 0; } .pro-recommendations-title { font-weight: 600; margin: 0 0 0.5rem 0; font-size: 0.875rem; color: var(--color-text); } .pro-recommendations-text { margin: 0 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.6; } .pro-recommendations-note { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; } /* ----- Normative Footer ----- */ .pro-normative-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); } .pro-normative-links { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 0.75rem 0; line-height: 1.5; } .pro-normative-links a { color: var(--primary); text-decoration: none; } .pro-normative-links a:hover { text-decoration: underline; } .pro-disclaimer { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .pro-disclaimer a { color: var(--primary); text-decoration: none; } /* ----- Responsive ----- */ @media (max-width: 768px) { .pro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .pro-results-col { order: 2; } .pro-buttons { flex-direction: column; } .pro-btn { width: 100%; } .pro-title { font-size: 1.25rem; } } .pro-field { margin-bottom: 1.25rem; } .pro-field:last-child { margin-bottom: 0; } .pro-label { display: block; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text, #202122); } .pro-label-hint { font-weight: normal; font-size: 0.85em; color: var(--color-text-muted, #6c757d); } .pro-input, .pro-select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border, #d1d5db); border-radius: 0; font-size: 0.875rem; line-height: 1.5; background: var(--color-bg, #ffffff); } .pro-input:focus, .pro-select:focus { outline: none; border-color: var(--primary, #0056b3); } .pro-hint { display: block; font-size: 0.75rem; color: var(--color-text-muted, #6c757d); margin-top: 0.25rem; } .pro-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; margin-bottom: 0.5rem; } .pro-checkbox input { width: auto; margin: 0; } .pro-checkbox span { flex: 1; } .pro-ingredients-container { background: var(--color-bg-secondary, #f8f9fa); padding: 1rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-ingredients-list { max-height: 400px; overflow-y: auto; margin-bottom: 1rem; } .pro-ingredient-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.75rem; background: var(--color-bg, #ffffff); border: 1px solid var(--color-border, #e5e7eb); } .pro-ingredient-fields { flex: 1; display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0.75rem; } .pro-ingredient-name, .pro-ingredient-weight { margin: 0; } .pro-ingredient-allergens { margin: 0; } .pro-remove-btn { width: 34px; height: 34px; padding: 0 !important; line-height: 1; font-size: 1.25rem; flex-shrink: 0; } .pro-add-btn { width: 100%; } .pro-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } .pro-results-card { background: var(--color-bg, #ffffff); padding: 1rem; /*max-height: 80vh;*/ overflow-y: auto; } .pro-results-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary, #e74c3c); } .pro-result-group { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-result-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pro-result-group-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--primary, #e74c3c); } .pro-result-list { font-size: 0.875rem; } .pro-result-list > div { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border, #f0f0f0); } .pro-result-list > div:last-child { border-bottom: none; } .pro-empty-message { color: var(--color-text-muted, #6c757d); font-style: italic; padding: 0.5rem; text-align: center; } .pro-result-code { background: var(--color-bg-secondary, #f4f4f4); padding: 0.75rem; font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; border: 1px solid var(--color-border, #e5e7eb); } .pro-collapsible { margin-top: 0.5rem; } .pro-toggle-btn { padding: 0 !important; font-size: 0.875rem; } /* Адаптивность */ @media (max-width: 768px) { .pro-ingredient-fields { grid-template-columns: 1fr; gap: 0.5rem; } } .pro-checkbox-wrapper { display: flex; flex-direction: column; gap: 0.25rem; } .pro-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; margin-bottom: 1rem; } .pro-checkbox input { flex-shrink: 0; margin-top: 0.125rem; } .pro-checkbox span { flex: 1; line-height: 1.1; min-width: 200px; } .pro-checkbox-wrapper .pro-hint { margin-left: 1.5rem; } .pro-params-card { background: var(--color-bg-secondary, #f8f9fa); border: 1px solid var(--color-border, #e5e7eb); padding: 1rem; margin-bottom: 1.25rem; } .pro-param-item { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-param-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .pro-param-item .pro-checkbox { margin-bottom: 0.25rem; } .pro-param-item .pro-hint { margin-left: 1.5rem; } .pro-param-item .pro-label { margin-bottom: 0.25rem; } /* Специфичные стили для калькулятора себестоимости */ .cost-ingredient-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; } @media (max-width: 768px) { .cost-ingredient-fields { grid-template-columns: 1fr; gap: 0.5rem; } } .pro-result-highlight { background-color: rgba(37, 99, 235, 0.1); padding: 0.5rem; margin: 0 -0.5rem; border-radius: 0; } .pro-recommendations { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem; border-left: 3px solid var(--primary, #0056b3); } /* Дополнительные стили для двух колонок в форме */ .pro-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .pro-result-info { background: var(--color-bg-secondary, #f8f9fa); padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-result-info-row { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--color-border-light, #f0f0f0); } .pro-result-info-row:last-child { border-bottom: none; } .pro-result-info-label { font-weight: 500; color: var(--color-text-secondary, #6c757d); } .pro-result-info-value { font-weight: 600; color: var(--color-text, #202122); font-family: var(--font-mono, monospace); } .pro-result-table-wrapper { overflow-x: auto; } .pro-results-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .pro-results-table th, .pro-results-table td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-results-table th { background: var(--color-bg-secondary, #f8f9fa); font-weight: 600; border-bottom: 2px solid var(--color-border, #d1d5db); } .pro-results-table td:not(:first-child) { text-align: right; } .pro-results-table td:first-child { text-align: left; } .pro-results-table td:last-child, .pro-results-table th:last-child { background: #fafafa; font-weight: 500; } @media print { .pro-form-col { display: none; } .pro-results-single { margin-top: 0; } .pro-results-table th, .pro-results-table td { border: 1px solid #000 !important; } } @media (max-width: 640px) { .pro-two-columns { grid-template-columns: 1fr; gap: 0; } .pro-ingredient-fields { grid-template-columns: 1fr !important; gap: 0.5rem; } } .pro-title i, .pro-label i, .pro-result-group-title i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-results-title i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-btn i { margin-right: 0.5rem; } .pro-result-group { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-result-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pro-result-item { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light, #f0f0f0); } .pro-result-item:last-child { border-bottom: none; } .pro-result-label { font-weight: 500; color: var(--color-text-secondary, #6c757d); min-width: 160px; display: inline-block; } .pro-result-value { font-weight: 600; color: var(--color-text, #202122); font-family: var(--font-mono, monospace); } .pro-adjustment-item { padding: 0.5rem 0; display: flex; align-items: baseline; gap: 0.5rem; } .pro-adjustment-item i { color: var(--color-success, #059669); font-size: 0.875rem; } .coefficient-highlight { background: var(--primary-light, #e0e7ff); padding: 0.125rem 0.375rem; border-radius: 4px; font-weight: 600; } /* Адаптивность */ @media (max-width: 768px) { .pro-result-item { flex-direction: column; } .pro-result-label { margin-bottom: 0.25rem; } } /* Дополнительные стили для радио-кнопок */ .pro-radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem; padding: 0.25rem 0; } .pro-radio-label input { width: auto; margin: 0; } .pro-radio-label span { font-size: 0.875rem; color: var(--color-text, #202122); } .pro-radio-label:last-child { margin-bottom: 0; } .pro-checkbox-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .pro-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; } .pro-checkbox-label input { margin: 0; } .pro-result-highlight { background-color: rgba(231, 76, 60, 0.1); margin: 0.5rem -0.75rem; padding: 0.875rem 0.75rem; border-radius: 0; } .pro-results-single { margin-top: 2rem; } @media (max-width: 768px) { .pro-checkbox-group { flex-direction: column; gap: 0.5rem; } .pro-buttons { flex-direction: column; } .pro-buttons .pro-btn { width: 100%; } } @media print { .pro-buttons, .pro-results-single button, #shelf-life-copy-text { display: none !important; } } .pro-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--color-border, #ddd); margin-bottom: 1rem; padding-bottom: 0.5rem; } .pro-tab-btn { padding: 0.5rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary, #6c757d); transition: all 0.2s ease; } .pro-tab-btn i { margin-right: 0.5rem; } .pro-tab-btn:hover { color: var(--primary, #e74c3c); } .pro-tab-btn.active { color: var(--primary, #e74c3c); border-bottom: 2px solid var(--primary, #e74c3c); } .pro-tab-content { display: none; } .pro-tab-content.active { display: block; } /* Стили для документов (печать) */ .ttk-document, .act-document, .info-list { font-family: 'Times New Roman', Times, serif; font-size: 12pt; line-height: 1.4; } .ttk-document h1, .ttk-document h2, .ttk-document h3, .act-document h1, .act-document h2, .act-document h3, .info-list h2, .info-list h3 { font-family: 'Times New Roman', Times, serif; } @media print { .pro-tabs, .pro-print-buttons, .accordion__item, .technical-passport { display: none; } .pro-tab-content { display: block !important; } .ttk-document, .act-document, .info-list { margin: 0; padding: 0; } } /* Стили для колонок формы */ .pro-row { display: flex; gap: 1rem; margin-bottom: 0; } .pro-col { flex: 1; } @media (max-width: 768px) { .pro-row { flex-direction: column; gap: 0; } } /* Стили для таблиц */ .pro-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; } .pro-table th, .pro-table td { border: 1px solid var(--color-border, #ddd); padding: 8px; text-align: left; } .pro-table th { background: var(--color-bg-secondary, #f5f5f5); font-weight: 600; } .pro-mode-switch { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; background: var(--color-bg-secondary, #f8f9fa); padding: 0.5rem; border-radius: 0; } .pro-mode-btn { flex: 1; padding: 0.625rem 1rem; background: transparent; border: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast, 0.15s ease); color: var(--color-text-secondary, #6c757d); } .pro-mode-btn i { margin-right: 0.5rem; } .pro-mode-btn.active { background: var(--color-bg, #ffffff); color: var(--primary, #0056b3); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .pro-radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; } .pro-radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .pro-radio-label i { font-size: 1rem; } .pro-info-box { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem 1rem; margin: 1rem 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary, #6c757d); } .pro-info-box i { color: var(--primary, #0056b3); font-size: 1rem; } .pro-reference-details { margin-top: 1rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-reference-summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 500; background: var(--color-bg-secondary, #f8f9fa); } .pro-reference-summary i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-reference-content { padding: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); } .reference-table { width: 100%; border-collapse: collapse; } .reference-table th, .reference-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--color-border, #e5e7eb); } .reference-table th { font-weight: 600; background: var(--color-bg-secondary, #f8f9fa); } .reference-badge { display: inline-block; padding: 0.125rem 0.375rem; font-size: 0.75rem; background: var(--primary-light, #dbeafe); color: var(--primary, #0056b3); } @media (max-width: 768px) { .pro-mode-switch { flex-direction: column; } .pro-radio-group { flex-direction: column; gap: 0.75rem; } .reference-table th, .reference-table td { padding: 0.375rem; font-size: 0.75rem; } } .pro-formula { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem 1rem; margin: 0.75rem 0; font-family: monospace; font-size: 0.875rem; text-align: center; border-left: 3px solid var(--primary, #0056b3); } .pro-mos-bar { background: #e5e7eb; height: 24px; margin: 1rem 0 0.5rem; position: relative; } .pro-mos-bar-fill { background: #10b981; height: 100%; transition: width 0.3s ease; } .pro-mos-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: #6c757d; } .pro-recommendation-block { background: #f0f9ff; padding: 1rem; border-left: 3px solid #3b82f6; font-size: 0.875rem; } .pro-warning-block { background: #fef2f2; padding: 0.75rem; border-left: 3px solid #ef4444; color: #991b1b; font-size: 0.875rem; margin-top: 1rem; } .pro-result-highlight { background: #eff6ff; margin: 0.5rem -0.75rem; padding: 0.75rem 0.75rem; border-radius: 4px; } @media print { .pro-mos-bar { border: 1px solid #000; background: none; } .pro-mos-bar-fill { background: #000; } .pro-recommendation-block { border: 1px solid #000; background: none; } } /* ===== recommendations-block.css ===== */ /* ============================================ TECH-STC.RU - RECOMMENDATIONS BLOCK Список рекомендаций и связанных материалов ============================================ */ .recommendations-block { margin: 0.9rem 0; font-family: var(--font-sans); } .recommendations-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .recommendations-block li { margin: 0; position: relative; } .recommendations-block a { display: flex; align-items: center; padding: var(--space-sm) 0; color: var(--color-text); text-decoration: none; font-size: 0.9375rem; line-height: 1.5; border-bottom: 1px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); position: relative; } .recommendations-block a::before { content: '→'; color: var(--color-accent); font-size: 0.875rem; margin-right: var(--space-sm); opacity: 0; transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); font-weight: 400; } .recommendations-block a:hover { color: var(--color-accent); border-bottom-color: var(--color-border-light); } .recommendations-block a:hover::before { opacity: 1; transform: translateX(0); } /* Технологичный вариант с подсветкой при наведении */ .recommendations-block--tech li { border-left: 2px solid transparent; transition: border-color var(--transition-fast); padding-left: 0; } .recommendations-block--tech li:hover { border-left-color: var(--color-accent); } .recommendations-block--tech a { padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); } .recommendations-block--tech a::before { display: none; } /* Вариант с сеткой 2 колонки для более плотного отображения */ .recommendations-block--grid ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-lg); } .recommendations-block--grid li { border: none; } .recommendations-block--grid a { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.875rem; } .recommendations-block--grid a::before { content: ''; display: none; } /* Компактная версия для сайдбара */ .recommendations-block--compact ul { gap: 0; } .recommendations-block--compact li { border-bottom: 1px solid var(--color-border-light); } .recommendations-block--compact li:last-child { border-bottom: none; } .recommendations-block--compact a { padding: var(--space-sm) 0; } .recommendations-block--compact a::before { font-size: 0.75rem; margin-right: var(--space-xs); } @media (max-width: 768px) { .recommendations-block { margin: var(--space-xl) 0; } .recommendations-block a { font-size: 0.875rem; padding: var(--space-xs) 0; } .recommendations-block a::before { font-size: 0.75rem; } .recommendations-block--grid ul { grid-template-columns: 1fr; gap: 0; } .recommendations-block--grid li { border-bottom: 1px solid var(--color-border-light); } .recommendations-block--grid li:last-child { border-bottom: none; } } /* Дополнительный микро-взаимодействие */ @keyframes slideIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } .recommendations-block a:hover::before { animation: slideIn 0.2s ease forwards; } /* ===== search-calculators.css ===== */ /* ============================================ TECH-STC.RU - SEARCH CALCULATORS ТЕХНИЧЕСКИЙ СТИЛЬ - СИСТЕМНЫЕ ЦВЕТА ============================================ */ .srh-form-main { margin: 0 auto 2rem auto; max-width: 900px; background: var(--color-bg); padding: 1.5rem; border: none; } .srh-input-wrapper { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; position: relative; width: 100%; } .srh-input-wrapper i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 1rem; pointer-events: none; z-index: 1; } .srh-input { flex: 1; padding: 0.9rem 1rem 0.9rem 2.5rem; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); font-family: var(--font-mono); font-size: 0.9375rem; color: var(--color-text); height: 52px; box-sizing: border-box; } .srh-input:focus { outline: none; border-color: var(--color-accent); border-width: 2px; } .srh-input::placeholder { color: var(--color-text-muted); font-family: var(--font-sans); } .srh-button { padding: 0.65rem 1.75rem; background: var(--color-accent); color: var(--white); border: 1px solid var(--color-accent-hover); border-radius: 0; font-weight: 500; font-size: 0.9375rem; cursor: pointer; font-family: var(--font-sans); height: 44px; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; align-self: center; transition: background var(--transition-fast); } .srh-button:hover { background: var(--color-accent-hover); } .srh-hints { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 0.75rem; } .srh-hint { display: flex; align-items: center; gap: 0.375rem; } .srh-hint i { font-size: 0.75rem; color: var(--color-accent); } .srh-hint-mobile { display: none; } .srh-stats-highlight { background: var(--color-accent-light); padding: 0.25rem 0.75rem; border: 1px solid var(--color-accent-light); font-weight: 500; font-size: 0.875rem; color: var(--color-accent); } /* Mobile адаптация */ @media (max-width: 768px) { .srh-form-main { padding: 1rem; } .srh-input-wrapper { flex-direction: column; align-items: stretch; gap: 0.5rem; } .srh-input-wrapper i { top: 1rem; transform: none; } .srh-input { width: 100%; height: 48px; padding: 0.75rem 1rem 0.75rem 2.5rem; font-size: 16px; } .srh-button { width: 100%; height: 48px; padding: 0.75rem; align-self: stretch; } .srh-hints { flex-direction: column; gap: 0.375rem; } .srh-hint-mobile { display: flex; } } /* ===== sidebar.css ===== */ /* ============================================ TECH-STC.RU - SIDEBAR Навигация и компоненты боковой панели ============================================ */ /* ----------------------------------------------------------------- ОСНОВНОЙ КОНТЕЙНЕР САЙДБАРА ----------------------------------------------------------------- */ .sbr-sidebar { background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-border); min-height: 100vh; overflow-y: auto; } .sbr-nav__list { list-style: none; padding: 0; } .sbr-nav__link { display: flex; align-items: center; gap: var(--space-md); padding: 6px var(--space-xs); color: var(--color-text-secondary); text-decoration: none; transition: all var(--transition-fast); font-size: 17px; line-height: 1.3; outline: none; border-radius: 0; } .sbr-nav__link:hover { color: var(--color-accent); background-color: var(--color-bg-tertiary); } .sbr-nav__link--active { color: var(--color-accent); background-color: var(--color-accent-light); font-weight: 500; } .sbr-nav__link:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); } .sbr-nav__header { padding: var(--space-md) var(--space-md) var(--space-sm); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 600; } /* Печать */ @media print { .sbr-nav__list { display: none; } } /* ===== table.css ===== */ /* ============================================ TECH-STC.RU - TABLE STYLES Для тега table (без классов) ============================================ */ /* ----------------------------------------------------------------- БАЗОВАЯ ТАБЛИЦА ----------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); } table table { margin: 0; } /* ----------------------------------------------------------------- ЗАГОЛОВКИ ----------------------------------------------------------------- */ table th { background: var(--color-bg-secondary); color: var(--color-text); font-weight: 600; text-align: left; padding: var(--space-md) var(--space-lg); border-bottom: 2px solid var(--color-border); white-space: nowrap; } table th.numeric { text-align: right; } /* ----------------------------------------------------------------- ЯЧЕЙКИ ----------------------------------------------------------------- */ table td { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-border-light); vertical-align: top; } /* Компактные таблицы */ table.compact th, table.compact td { padding: var(--space-xs) var(--space-md); } /* ----------------------------------------------------------------- ЧЕРЕДОВАНИЕ СТРОК (зебра) ----------------------------------------------------------------- */ table.striped tbody tr:nth-child(odd) { background: var(--color-bg-tertiary); } /* ----------------------------------------------------------------- HOVER-ЭФФЕКТЫ ----------------------------------------------------------------- */ table.hover tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 5%, white); } table.interactive tbody tr { cursor: pointer; transition: background-color var(--transition-fast); } table.interactive tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 8%, white); } /* ----------------------------------------------------------------- ВЫДЕЛЕНИЕ СТРОК ----------------------------------------------------------------- */ table tr.success { background: color-mix(in srgb, var(--color-success) 5%, white); } table tr.warning { background: color-mix(in srgb, var(--color-warning) 5%, white); } table tr.danger { background: color-mix(in srgb, var(--color-error) 5%, white); } table tr.selected { background: color-mix(in srgb, var(--color-accent) 10%, white); border-left: 3px solid var(--color-accent); } /* ----------------------------------------------------------------- ВЫРАВНИВАНИЕ ----------------------------------------------------------------- */ table .numeric, table td.numeric, table th.numeric { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- ГРАНИЦЫ ----------------------------------------------------------------- */ table.bordered th, table.bordered td { border: 1px solid var(--color-border-light); } table.borderless th, table.borderless td { border: none; } /* ----------------------------------------------------------------- ПОДВАЛ ТАБЛИЦЫ ----------------------------------------------------------------- */ table tfoot td, table tfoot th { background: var(--color-bg-secondary); font-weight: 600; border-top: 2px solid var(--color-border); border-bottom: none; } table .total { font-weight: 700; background: var(--color-bg-tertiary); } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { table th, table td { padding: var(--space-sm) var(--space-md); } table.scrollable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } /* ----------------------------------------------------------------- ОБЕРТКА ДЛЯ СКРОЛЛА ----------------------------------------------------------------- */ .table-responsive-sm { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } /* ===== MAIN: button.css ===== */ /* ============================================ TECH-STC.RU - PROFESSIONAL BUTTON SYSTEM Инженерный интерфейс: функциональность важнее декора ============================================ */ /* БАЗОВЫЙ КЛАСС КНОПКИ ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.75rem 1.5rem; border: 1px solid transparent; border-radius: 0; font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: all var(--transition-fast); position: relative; overflow: hidden; } /* ОСНОВНЫЕ ТИПЫ КНОПОК ============================================ */ /* 1. PRIMARY — Главное действие (синий) */ .btn-primary { color: var(--white); background-color: var(--primary); border-color: var(--primary); } .btn-primary:hover:not(:disabled) { background-color: var(--primary-4); border-color: var(--primary-4); } .btn-primary:active:not(:disabled) { background-color: var(--primary-3); border-color: var(--primary-3); } /* 2. SECONDARY — Второстепенное действие (серая) */ .btn-secondary { color: var(--dark); background-color: var(--white); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background-color: var(--gray); border-color: var(--primary-1); color: var(--primary-4); } .btn-secondary:active:not(:disabled) { background-color: var(--gray); border-color: var(--primary); } /* 3. OUTLINE — Контурная (для второстепенных действий) */ .btn-outline { color: var(--primary); background-color: transparent; border-color: var(--primary); } .btn-outline:hover:not(:disabled) { color: var(--white); background-color: var(--primary); border-color: var(--primary); } .btn-outline:active:not(:disabled) { background-color: var(--primary-4); border-color: var(--primary-4); } /* 4. DANGER — Опасное действие (красная) */ .btn-danger { color: var(--white); background-color: var(--color-error); border-color: var(--color-error); } .btn-danger:hover:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } .btn-danger:active:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } /* 5. SUCCESS — Успешное действие (зелёная) */ .btn-success { color: var(--white); background-color: var(--color-success); border-color: var(--color-success); } .btn-success:hover:not(:disabled) { background-color: var(--success-dark); border-color: var(--success-dark); } .btn-success:active:not(:disabled) { background-color: var(--success-dark); border-color: var(--success-dark); } /* РАЗМЕРЫ ============================================ */ .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; min-height: 36px; min-width: 90px; } .btn-lg { padding: 1rem 2rem; font-size: 1rem; min-height: 56px; min-width: 160px; } /* БЛОЧНЫЕ КНОПКИ (на всю ширину) */ .btn-block { display: flex; width: 100%; } /* СОСТОЯНИЯ ============================================ */ /* Disabled — для всех типов */ .btn:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Focus — доступность */ .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Loading state */ .btn-loading { color: transparent !important; pointer-events: none; } .btn-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; border-top-color: transparent; animation: button-spin 0.6s linear infinite; } @keyframes button-spin { to { transform: rotate(360deg); } } /* Корректировка цвета спиннера для разных типов */ .btn-primary.btn-loading::after { border-color: rgba(255, 255, 255, 0.5); border-right-color: transparent; border-top-color: transparent; } .btn-outline.btn-loading::after { border-color: var(--primary); border-right-color: transparent; border-top-color: transparent; } /* ГРУППЫ КНОПОК ============================================ */ .btn-group { display: inline-flex; gap: 0.5rem; } .btn-group-vertical { display: flex; flex-direction: column; gap: 0.5rem; } /* ДОСТУПНОСТЬ И ПРОИЗВОДИТЕЛЬНОСТЬ ============================================ */ @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } /* УТИЛИТАРНЫЕ КЛАССЫ (для особых случаев) ============================================ */ /* .btn-icon-only удалён — дублируется в 100-icons.css */ /* Кнопка для скролла (специфичный компонент) */ .btn-scroll { font-weight: 900; font-size: 2.6rem; text-align: center; border: 1px solid transparent; cursor: pointer; background: transparent; } /* ===== MAIN: card.css ===== */ /* ============================================ TECH-STC.RU - CARD COMPONENT Технические карточки для инженерного интерфейса ============================================ */ /* ----------------------------------------------------------------- БАЗОВАЯ КАРТОЧКА ----------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; overflow: hidden; color: var(--color-text); transition: border-color var(--transition-fast); } /* ----------------------------------------------------------------- МОДИФИКАТОРЫ КАРТОЧЕК ----------------------------------------------------------------- */ .card--bordered { border-color: var(--color-border); } .card--borderless { border: none; } .card--elevated { border-color: var(--color-border-light); border-width: 1px; } .card--interactive { cursor: pointer; } .card--interactive:hover { /*border-color: var(--color-accent);*/ } .card--interactive:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ----------------------------------------------------------------- СТРУКТУРА КАРТОЧКИ (БЭМ) ----------------------------------------------------------------- */ .card__header { padding: var(--space-lg) var(--space-xl); background-color: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); } .card__body { padding: var(--space-xl); flex: 1 1 auto; } .card__footer { padding: var(--space-lg) var(--space-xl); background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--space-md); } .card__image { width: 100%; height: auto; display: block; } .card__image img { width: 100%; height: auto; display: block; } .card__title { margin: 0 0 var(--space-sm) 0; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--color-text); } .card__title:last-child { margin-bottom: 0; } .card__title-icon { display: flex; align-items: center; gap: var(--space-sm); } .card__text { font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: var(--space-md); } .card__text:last-child { margin-bottom: 0; } .card__meta { font-size: 0.875rem; color: var(--color-text-muted); display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); } /* ----------------------------------------------------------------- ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ ----------------------------------------------------------------- */ .card--horizontal { flex-direction: row; } .card--horizontal .card__image { width: 200px; flex-shrink: 0; } .card--horizontal .card__body { flex: 1; } /* ----------------------------------------------------------------- КОМПАКТНЫЕ КАРТОЧКИ (для плотных интерфейсов) ----------------------------------------------------------------- */ .card--compact .card__header { padding: var(--space-md) var(--space-lg); } .card--compact .card__body { padding: var(--space-lg); } .card--compact .card__footer { padding: var(--space-md) var(--space-lg); } .card--compact .card__title { font-size: 1rem; } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 767px) { .card--horizontal { flex-direction: column; } .card--horizontal .card__image { width: 100%; } .card__header { padding: var(--space-md) var(--space-lg); } .card__body { padding: var(--space-lg); } .card__footer { padding: var(--space-md) var(--space-lg); } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ (комментарии для разработчиков) ----------------------------------------------------------------- */ /* Простая карточка: <div class="card"> <div class="card__body"> <h3 class="card__title">Заголовок</h3> <p class="card__text">Текст</p> </div> </div> Карточка с заголовком и действиями: <div class="card"> <div class="card__header"> <h3 class="card__title">Заголовок</h3> </div> <div class="card__body"> <p class="card__text">Контент</p> </div> <div class="card__footer"> <button class="btn btn-outline">Отмена</button> <button class="btn btn-primary">Сохранить</button> </div> </div> */ /* ===== MAIN: category-nav.css ===== */ /* ============================================ TECH-STC.RU - CATEGORY NAVIGATION Навигация по категориям и файлам ============================================ */ /* === СБРОС И БАЗОВЫЕ СТИЛИ === */ .ctg-reset { margin: 0; padding: 0; box-sizing: border-box; } .ctg-container { width: 100%; margin-right: auto; margin-left: auto; } /* === СЕТКА НАВИГАЦИИ === */ .ctg-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } @media (min-width: 992px) { .ctg-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1200px) { .ctg-grid { grid-template-columns: repeat(3, 1fr); } } /* === СЕКЦИЯ НАВИГАЦИИ === */ .ctg-nav-section { padding: 0; margin-bottom: var(--space-lg); height: 500px; overflow-y: auto; } .ctg-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } .ctg-nav-title { display: flex; align-items: center; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin: 0; } .ctg-nav-title svg { margin-right: 0.3rem; stroke: var(--color-accent); stroke-width: 2.4; height: 20px; } .ctg-nav-stats { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-text-muted); } /* === СПИСОК РАЗДЕЛОВ === */ .ctg-nav-list { list-style: none; padding: 0; margin: 0; } .ctg-group-title { font-weight: 600; font-size: 1.2rem; line-height: 1.3; background: var(--color-bg-tertiary); padding: 1rem; } .ctg-nav-item { padding: 0.6rem; background: transparent; transition: all var(--transition-fast); cursor: pointer; margin-bottom: 0.2rem; } .ctg-nav-item a { font-weight: 400; text-decoration: none; font-size: 1.1rem; line-height: 1.2; color: var(--color-text); } .ctg-nav-btn { padding: 0.6rem; background: transparent; transition: all var(--transition-fast); cursor: pointer; margin-bottom: 0.2rem; font-size: 1.1rem; width: 100%; /* Исправлено: убрано невалидное width: 500 */ } .ctg-file-count { font-size: 1rem; } .ctg-nav-item:not(:last-child) { border-bottom: 1px solid var(--color-border); } .ctg-nav-count { font-size: 0.6875rem; padding: var(--space-xs) var(--space-sm); min-width: 2.5rem; text-align: center; background: var(--color-bg-tertiary); color: var(--color-text-secondary); border-radius: 0; font-weight: 600; letter-spacing: 0.02em; } /* === ПОИСК И ФИЛЬТРАЦИЯ === */ .ctg-search-section { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); } .ctg-search-box { margin-bottom: var(--space-lg); position: relative; } .ctg-search-input { width: 100%; padding: calc(var(--space-md) + 0.125rem) var(--space-lg) calc(var(--space-md) + 0.125rem) 1.4rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; font-size: 0.9375rem; transition: all var(--transition-fast); color: var(--color-text); font-family: var(--font-mono); } .ctg-search-input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.05); } .ctg-search-icon { position: absolute; left: var(--space-lg); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 1rem; opacity: 0.6; pointer-events: none; } /* === СПИСОК ФАЙЛОВ === */ .ctg-files-list { max-height: 520px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); } .ctg-files-list::-webkit-scrollbar { width: 6px; } .ctg-files-list::-webkit-scrollbar-track { background: var(--color-bg-secondary); } .ctg-files-list::-webkit-scrollbar-thumb { background: var(--color-border); } .ctg-files-list::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); } .ctg-folder-group { border-bottom: 1px solid var(--color-border); } .ctg-folder-group:last-child { border-bottom: none; } .ctg-folder-header { padding: var(--space-md) var(--space-lg); background: var(--color-bg-tertiary); font-weight: 600; font-size: 0.8125rem; color: var(--color-text); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: 0.03em; } .ctg-file-item { display: block; padding: calc(var(--space-md) - 0.125rem) var(--space-lg); text-decoration: none; color: var(--color-text); transition: all var(--transition-fast); position: relative; font-size: 1.1rem; font-weight: 400; line-height: 1.3; } .ctg-file-item:hover { color: var(--color-accent); text-decoration: none; padding-left: calc(var(--space-lg) - 2px); } .ctg-file-item:last-child { border-bottom: none; } .ctg-file-name { font-weight: 500; margin-bottom: 0.125rem; display: flex; align-items: center; gap: var(--space-sm); font-size: 0.9375rem; } .ctg-file-icon { font-size: 0.875rem; color: var(--color-text-muted); } .ctg-file-item:hover .ctg-file-icon { color: var(--color-accent); } .ctg-file-path { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); word-break: break-all; letter-spacing: -0.01em; } .ctg-file-translated { color: var(--color-success); font-size: 0.75rem; opacity: 0.8; } /* === КАТЕГОРИИ ФАЙЛОВ === */ .ctg-categories-section { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); } .ctg-categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } .ctg-category { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); cursor: pointer; transition: all var(--transition-fast); text-align: center; } .ctg-category:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-light); transform: translateY(-1px); } .ctg-category.ctg-active { background: var(--color-accent-light); border-color: var(--color-accent); border-left: 3px solid var(--color-accent); } .ctg-category-icon { font-size: 1.5rem; margin-bottom: var(--space-sm); color: var(--color-text-secondary); } .ctg-category.ctg-active .ctg-category-icon { color: var(--color-accent); } .ctg-category-name { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-xs); text-transform: uppercase; letter-spacing: 0.03em; } .ctg-category-count { font-size: 0.6875rem; color: var(--color-text-muted); font-family: var(--font-mono); } /* Типы категорий */ .ctg-category-make .ctg-category-icon { color: #3b82f6; } .ctg-category-example .ctg-category-icon { color: var(--color-success); } .ctg-category-other .ctg-category-icon { color: var(--color-text-secondary); } .ctg-category-make.ctg-active { border-color: #3b82f6; } .ctg-category-example.ctg-active { border-color: var(--color-success); } .ctg-category-other.ctg-active { border-color: var(--color-text-secondary); } /* === БЫСТРЫЕ ФИЛЬТРЫ === */ .ctg-quick-filters { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); margin-bottom: var(--space-lg); } .ctg-filters-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-md); text-transform: uppercase; letter-spacing: 0.03em; } .ctg-filter-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .ctg-filter-tag { padding: var(--space-sm) var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; font-size: 0.8125rem; color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: var(--space-sm); } .ctg-filter-tag:hover { background: var(--color-bg-secondary); border-color: var(--color-border-light); } .ctg-filter-tag.ctg-active { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } /* === ПОПУЛЯРНЫЕ ФАЙЛЫ === */ .ctg-popular-section { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-lg); } .ctg-popular-list { display: flex; flex-direction: column; gap: var(--space-sm); } .ctg-popular-item { display: flex; align-items: center; padding: var(--space-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; text-decoration: none; color: var(--color-text); transition: all var(--transition-fast); } .ctg-popular-item:hover { background: var(--color-bg-secondary); text-decoration: none; color: var(--color-accent); border-left: 2px solid var(--color-accent); padding-left: calc(var(--space-md) - 2px); } .ctg-popular-icon { width: 2rem; height: 2rem; background: var(--color-bg-secondary); border-radius: 0; display: flex; align-items: center; justify-content: center; margin-right: var(--space-md); color: var(--color-text-muted); font-size: 0.875rem; } .ctg-popular-item:hover .ctg-popular-icon { background: var(--color-accent-light); color: var(--color-accent); } .ctg-popular-info { flex-grow: 1; } .ctg-popular-name { font-weight: 500; font-size: 0.875rem; margin-bottom: 0.125rem; } .ctg-popular-path { font-size: 0.75rem; color: var(--color-text-muted); font-family: var(--font-mono); } /* === УТИЛИТЫ === */ .ctg-divider { height: 0; background: var(--color-border); margin: var(--space-lg) 0; border: none; } .ctg-monospace { font-family: var(--font-mono); font-size: 0.875rem; } .ctg-uppercase { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.8125rem; } .ctg-hidden { display: none !important; } .ctg-match { background-color: rgba(251, 191, 36, 0.15); padding: 0.125rem 0.25rem; border-radius: 0; font-weight: 600; } .ctg-empty-state { padding: 2.5rem var(--space-xl); text-align: center; color: var(--color-text-muted); background: var(--color-bg-tertiary); } .ctg-empty-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: var(--space-md); } /* === АНИМАЦИИ === */ @keyframes ctgFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ctg-fade-in { animation: ctgFadeIn 0.2s ease-out; } /* === ДОСТУПНОСТЬ === */ .ctg-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === СОСТОЯНИЯ === */ .ctg-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ctg-loading { position: relative; pointer-events: none; } .ctg-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border: 2px solid var(--color-border); border-top-color: var(--color-accent); border-radius: 50%; animation: ctgSpin 0.6s linear infinite; } @keyframes ctgSpin { to { transform: rotate(360deg); } } /* Отладка переводов (оставлена для бэкенда, стилизована под систему) */ .ctg-translation-debug { background: #fff3cd; border: 2px solid #ffc107; border-radius: 0; padding: 1rem; margin: 1rem 0; font-family: var(--font-mono); font-size: 0.875rem; } .ctg-translation-debug h5 { color: #856404; margin-bottom: 0.5rem; font-size: 0.9rem; } .ctg-translation-debug ul { margin: 0; padding-left: 1.5rem; } .ctg-translation-debug li { margin-bottom: 0.25rem; } .ctg-translation-debug .has-translation { color: var(--primary-1); font-weight: bold; } .ctg-translation-debug .no-translation { color: var(--color-error); } .ctg-file-item.has-translation { border-left: 0 solid var(--color-accent); } .ctg-nav-item.has-translation { border-right: 3px solid var(--primary-1); } .ctg-reset-btn { display: block; margin: 8px auto 0; padding: 6px 16px; font-size: 0.9rem; background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0; cursor: pointer; color: var(--color-text); transition: all var(--transition-fast); } .ctg-reset-btn:hover { background: var(--color-bg-tertiary); border-color: var(--color-border-light); } .ctg-reset-btn:active { background: var(--color-bg-tertiary); } /* ===== MAIN: category.css ===== */ /** * СТИЛИ ДЛЯ РАЗДЕЛА "НЕСУЩИЕ КОНСТРУКЦИИ" * building-structures/styles.css * Версия: 1.0.0 * Дата: 2026-04-13 * Нормативы РК: СНиП РК 5.01-103-2024, СНиП РК 5.04-01-2011 */ /* ============================================ КАТЕГОРИИ И КАЛЬКУЛЯТОРЫ ============================================ */ .categories-list { display: flex; flex-direction: column; gap: var(--space-2xl, 2rem); } .category-block { background: var(--color-bg, #ffffff); border: 0px solid var(--color-border, #d1d5db); padding: var(--space-xl, 1.5rem); transition: border-color var(--transition-fast, 150ms ease); } .category-block:hover { border-color: var(--color-accent, #2563eb); } .category-title { font-size: 1.25rem; font-weight: 600; color: var(--color-text, #202122); margin: 0 0 var(--space-lg, 1rem) 0; padding-bottom: var(--space-sm, 0.5rem); border-bottom: 2px solid var(--color-border, #d1d5db); display: flex; align-items: baseline; justify-content:left; flex-wrap: wrap; gap: var(--space-sm, 0.5rem); } .cat-count { font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted, #9ca3af); font-family: var(--font-mono, monospace); } /* ============================================ СЕТКА КАЛЬКУЛЯТОРОВ ============================================ */ .calculators-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg, 1rem); } /* ============================================ КАРТОЧКА КАЛЬКУЛЯТОРА ============================================ */ .calc-card { display: flex; flex-direction: column; padding: var(--space-lg, 1rem); background: var(--color-bg-secondary, #f5f7fa); border-radius: 4px; border: 0px solid var(--color-border-light, #e5e7eb); text-decoration: none; transition: all var(--transition-fast, 150ms ease); position: relative; overflow: hidden; } .calc-card:hover { background: var(--color-bg, #ffffff); border-color: var(--color-accent, #2563eb); transform: translateY(-2px); } .calc-card:focus-visible { outline: 2px solid var(--color-accent, #2563eb); outline-offset: 2px; } /* Техническая полоска сверху */ .calc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent, #2563eb); transform: scaleX(0); transition: transform var(--transition-fast, 150ms ease); } .calc-card:hover::before { transform: scaleX(1); } .calc-name { font-size: 1rem; font-weight: 500; color: var(--color-text, #202122); line-height: 1.4; margin-bottom: var(--space-sm, 0.5rem); transition: color var(--transition-fast, 150ms ease); } .calc-card:hover .calc-name { color: var(--color-accent, #2563eb); } .calc-slug { font-size: 0.75rem; font-family: var(--font-mono, monospace); color: var(--color-text-muted, #9ca3af); word-break: break-all; } /* ============================================ АДАПТИВНОСТЬ ============================================ */ @media (max-width: 768px) { .category-block { padding: var(--space-lg, 1rem); } .category-title { font-size: 1.125rem; flex-direction: column; align-items: flex-start; } .calculators-grid { grid-template-columns: 1fr; gap: var(--space-md, 0.75rem); } .calc-card { padding: var(--space-md, 0.75rem); } .calc-name { font-size: 0.9375rem; } } /* ============================================ ПЕЧАТЬ ============================================ */ @media print { .category-block { break-inside: avoid; page-break-inside: avoid; } .calc-card { border: 1px solid #000; background: none; } .calc-card:hover { transform: none; } .calc-card::before { display: none; } } /* ===== MAIN: contact-form.css ===== */ /* ============================================ TECH-STC.RU - CONTACT FORM SYSTEM Mobile First | WCAG 2.1 AA | 152-ФЗ | Технический стиль ============================================ */ .contact-form { display: block; width: 100%; max-width: 100%; margin: 0; padding: var(--space-xl) 0; } /* ----------------------------------------------------------------- ЗАГОЛОВКИ ФОРМЫ ----------------------------------------------------------------- */ .contact-form__title { font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--color-text); margin: 0 0 var(--space-lg) 0; padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-border); } .contact-form__subtitle { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0 0 var(--space-xl) 0; } /* ----------------------------------------------------------------- ГРУППЫ ПОЛЕЙ ----------------------------------------------------------------- */ .contact-form .form__group { margin-bottom: var(--space-lg); position: relative; } .contact-form .form__group--error { margin-bottom: var(--space-xl); } /* ----------------------------------------------------------------- МЕТКИ ПОЛЕЙ — ИНЖЕНЕРНЫЙ СТИЛЬ ----------------------------------------------------------------- */ .contact-form .form__label { display: block; margin-bottom: var(--space-xs); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text); } .contact-form .form__label span.text-error { color: var(--color-error); font-size: 1.1em; margin-left: 2px; } /* ----------------------------------------------------------------- ПОЛЯ ВВОДА — ТЕХНИЧЕСКИЙ МИНИМАЛИЗМ ----------------------------------------------------------------- */ .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-family: var(--font-sans); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; } .contact-form .form__input { height: 3rem; } .contact-form .form__textarea { min-height: 6rem; resize: vertical; line-height: 1.5; } .contact-form .form__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.5rem; } /* Исправляем автозаполнение Chrome */ .contact-form .form__input:-webkit-autofill, .contact-form .form__input:-webkit-autofill:hover, .contact-form .form__input:-webkit-autofill:focus, .contact-form .form__textarea:-webkit-autofill, .contact-form .form__textarea:-webkit-autofill:hover, .contact-form .form__textarea:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0px 1000px var(--color-bg) inset; transition: background-color 5000s ease-in-out 0s; } /* ----------------------------------------------------------------- СОСТОЯНИЯ ПОЛЕЙ ----------------------------------------------------------------- */ .contact-form .form__input:hover, .contact-form .form__textarea:hover, .contact-form .form__select:hover { border-color: var(--color-text-secondary); } .contact-form .form__input:focus, .contact-form .form__textarea:focus, .contact-form .form__select:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); } /* Невалидные поля */ .contact-form .form__input:invalid:not(:placeholder-shown), .contact-form .form__textarea:invalid:not(:placeholder-shown), .contact-form .form__select:invalid:not(:placeholder-shown) { border-color: var(--color-error); } .contact-form .form__input:invalid:not(:placeholder-shown):focus, .contact-form .form__textarea:invalid:not(:placeholder-shown):focus, .contact-form .form__select:invalid:not(:placeholder-shown):focus { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); } /* ----------------------------------------------------------------- PLACEHOLDER ----------------------------------------------------------------- */ .contact-form .form__input::placeholder, .contact-form .form__textarea::placeholder, .contact-form .form__select::placeholder { color: var(--color-text-muted); opacity: 0.7; font-size: 0.9375rem; } /* ----------------------------------------------------------------- СЧЁТЧИК СИМВОЛОВ (для textarea) ----------------------------------------------------------------- */ .contact-form .form__counter { display: flex; justify-content: flex-end; margin-top: var(--space-xs); font-size: 0.75rem; color: var(--color-text-muted); } .contact-form .form__counter--warning { color: var(--color-warning); } .contact-form .form__counter--error { color: var(--color-error); } /* ----------------------------------------------------------------- ЧЕКБОКС СОГЛАСИЯ (152-ФЗ) ----------------------------------------------------------------- */ .contact-form .form__group--checkbox { display: flex; align-items: flex-start; gap: var(--space-sm); margin: var(--space-xl) 0; padding: var(--space-md); background-color: var(--color-bg-secondary); } .contact-form .form__checkbox { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; margin-top: 0.125rem; border: 1.5px solid var(--color-border); border-radius: 0; background-color: var(--color-bg); cursor: pointer; transition: all var(--transition-fast); -webkit-appearance: none; appearance: none; } .contact-form .form__checkbox:checked { background-color: var(--color-accent); border-color: var(--color-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='white'%3E%3Cpath d='M10 3L4.5 8.5 2 6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .contact-form .form__checkbox:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } .contact-form .form__checkbox:disabled { opacity: 0.5; cursor: not-allowed; } .contact-form .form__label--inline { flex: 1 1 auto; font-size: 0.875rem; line-height: 1.5; color: var(--color-text); margin: 0; padding: 0; text-transform: none; letter-spacing: normal; font-weight: 400; } .contact-form .form__label--inline a { color: var(--color-accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } .contact-form .form__label--inline a:hover, .contact-form .form__label--inline a:focus { border-bottom-color: var(--color-accent); } /* ----------------------------------------------------------------- СООБЩЕНИЯ ----------------------------------------------------------------- */ .contact-form__error { display: block; margin-top: var(--space-xs); font-size: 0.75rem; color: var(--color-error); font-weight: 500; } .contact-form__success { padding: var(--space-lg); background-color: color-mix(in srgb, var(--color-success) 5%, white); border-left: 4px solid var(--color-success); margin-bottom: var(--space-xl); } .contact-form__success-title { font-size: 1rem; font-weight: 600; color: var(--color-success-dark); margin: 0 0 var(--space-xs) 0; } .contact-form__success-text { font-size: 0.875rem; color: var(--color-success-dark); margin: 0; } .contact-form__hint { display: block; margin-top: var(--space-md); font-size: 0.6875rem; color: var(--color-text-muted); text-align: center; line-height: 1.5; } /* ----------------------------------------------------------------- АДАПТАЦИЯ ----------------------------------------------------------------- */ @media (min-width: 768px) { .contact-form { padding: var(--space-2xl) 0; } .contact-form .btn--primary { width: auto; min-width: 280px; padding: 0.875rem 2.5rem; } .contact-form .form__group--checkbox { padding: var(--space-lg); } .contact-form__title { font-size: 1.5rem; } } @media (min-width: 992px) { .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select { font-size: 0.9375rem; } .contact-form .btn--primary { min-width: 320px; } } /* ----------------------------------------------------------------- ПЕЧАТЬ ----------------------------------------------------------------- */ @media print { .contact-form { display: none; } } /* ----------------------------------------------------------------- HIGH CONTRAST MODE ----------------------------------------------------------------- */ @media (forced-colors: active) { .contact-form .form__input, .contact-form .form__textarea, .contact-form .form__select, .contact-form .form__checkbox, .contact-form .btn--primary { border: 1px solid; } .contact-form .form__checkbox:checked { background-color: highlight; } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Базовая форма: <form class="contact-form"> <h2 class="contact-form__title">Связаться с нами</h2> <div class="row"> <div class="col-12 col-md-6"> <div class="form__group"> <label class="form__label">Имя <span class="text-error">*</span></label> <input type="text" class="form__input" required> </div> </div> </div> <div class="form__group--checkbox"> <input type="checkbox" class="form__checkbox" id="agree" required> <label for="agree" class="form__label--inline">Согласие на обработку данных</label> </div> <div class="form__actions"> <button type="submit" class="btn--primary">Отправить</button> </div> </form> */ /* ===== MAIN: content-list.css ===== */ /* ============================================ TECH-STC.RU - CONTENT LIST (TOC) Оглавление и навигация по контенту ============================================ */ .content-list { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; padding: var(--space-xl); margin-bottom: var(--space-2xl); font-family: var(--font-sans); color: var(--color-text); } .content-list h3 { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.02em; } .content-list ol { list-style: none; counter-reset: item-counter; padding-left: 0; margin-bottom: 0; } .content-list li { counter-increment: item-counter; margin-bottom: 2px; display: block; background-color: var(--color-border-light); } .content-list li:last-child { margin-bottom: 0; } .content-list a { display: block; width: 100%; padding: var(--space-sm) var(--space-md); color: var(--color-text); text-decoration: none; font-size: 0.875rem; line-height: 1.5; background-color: var(--color-bg); transition: background-color var(--transition-fast), color var(--transition-fast); } .content-list a::before { content: counter(item-counter) ". "; font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); margin-right: var(--space-sm); } .content-list a:hover { background-color: var(--color-bg-secondary); color: var(--color-accent); } .content-list a:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; } .content-list hr { margin: var(--space-lg) 0; border: 0; border-top: 1px solid var(--color-border); opacity: 0.5; } /* Вариант с компактным отображением */ .content-list--compact { padding: var(--space-lg); } .content-list--compact h3 { font-size: 0.9375rem; margin-bottom: var(--space-md); } .content-list--compact a { padding: var(--space-xs) var(--space-sm); font-size: 0.8125rem; } /* Вариант с номерами справа */ .content-list--numbers-right li { display: flex; align-items: center; justify-content: space-between; } .content-list--numbers-right a { flex: 1; } .content-list--numbers-right a::before { content: ""; display: none; } .content-list--numbers-right a::after { content: counter(item-counter); font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); margin-left: var(--space-sm); } /* Sticky на десктопе */ @media (min-width: 992px) { .content-list--sticky { position: sticky; top: var(--space-lg); } } /* Адаптивность */ @media (max-width: 768px) { .content-list { padding: var(--space-lg); margin-bottom: var(--space-xl); } .content-list h3 { font-size: 0.9375rem; margin-bottom: var(--space-md); } .content-list a { padding: var(--space-xs) var(--space-sm); font-size: 0.8125rem; } .content-list hr { margin: var(--space-md) 0; } } /* ===== MAIN: cookie.css ===== */ /* ============================================ TECH-STC.RU - COOKIE BANNER & MODAL 152-ФЗ, GDPR, согласие на cookies ============================================ */ /* ----------------------------------------------------------------- COOKIE BANNER ----------------------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: var(--space-lg) 0; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); transform: translateY(0); transition: transform var(--transition-base); } .cookie-banner--hidden { transform: translateY(100%); } .cookie-banner__text { margin: 0 0 var(--space-md) 0; font-size: 0.875rem; color: var(--color-text-secondary); } .cookie-banner__text a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid transparent; } .cookie-banner__text a:hover { border-bottom-color: var(--color-accent); } .cookie-banner__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; } @media (min-width: 768px) { .cookie-banner__text { margin: 0; flex: 1; } .cookie-banner__actions { flex: 0 0 auto; } } /* ----------------------------------------------------------------- COOKIE MODAL (окно настроек) ----------------------------------------------------------------- */ .cookie-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); } .cookie-modal--open { opacity: 1; visibility: visible; } .cookie-modal__content { background-color: var(--color-bg); border: 1px solid var(--color-border); max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; padding: var(--space-xl); box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(20px); transition: transform var(--transition-base); } .cookie-modal--open .cookie-modal__content { transform: translateY(0); } .cookie-modal__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-sm) 0; color: var(--color-text); } .cookie-modal__text { color: var(--color-text-secondary); font-size: 0.9375rem; margin: 0 0 var(--space-lg) 0; } /* Опции cookie */ .cookie-option { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); } .cookie-option:last-child { border-bottom: none; } .cookie-option__header { display: flex; align-items: center; margin-bottom: var(--space-xs); } .cookie-option__checkbox { width: 1.125rem; height: 1.125rem; margin-right: var(--space-sm); accent-color: var(--color-accent); cursor: pointer; } .cookie-option__checkbox:disabled { opacity: 0.6; cursor: not-allowed; } .cookie-option__label { font-weight: 600; font-size: 0.9375rem; color: var(--color-text); } .cookie-option__description { display: block; margin-left: calc(1.125rem + var(--space-sm)); color: var(--color-text-muted); font-size: 0.8125rem; line-height: 1.5; } /* Действия модалки */ .cookie-modal__actions { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); display: flex; gap: var(--space-md); flex-wrap: wrap; } /* Кнопки для cookie (можно использовать общие .btn) */ .cookie-btn { padding: 0.5rem 1rem; font-size: 0.875rem; border: 1px solid transparent; background-color: var(--color-bg-secondary); color: var(--color-text); cursor: pointer; transition: all var(--transition-fast); } .cookie-btn:hover { background-color: var(--color-bg-tertiary); } .cookie-btn--primary { background-color: var(--color-accent); color: white; } .cookie-btn--primary:hover { background-color: var(--color-accent-hover); } /* ===== MAIN: doc-card.css ===== */ /* ============================================ HR-TEMPLATES SPECIFIC STYLES ============================================ */ /* Заголовок категории */ .clc-category-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text, #333); border-bottom: 2px solid var(--color-border, #eee); padding-bottom: 0.5rem; margin-top: 2rem; } /* Обертка документа (для страницы просмотра/печати) */ .clc-document-wrapper { background: #fff; padding: 40px; border: 1px solid var(--color-border, #ddd); box-shadow: 0 4px 12px rgba(0,0,0,0.05); max-width: 210mm; /* A4 width */ margin: 0 auto; font-family: "Times New Roman", Times, serif; line-height: 1.5; color: #000; } /* Типографика внутри документа */ .clc-doc-content h3, .clc-doc-content h4 { font-weight: bold; margin-top: 1.5em; margin-bottom: 0.5em; text-align: center; font-family: "Times New Roman", Times, serif; } .clc-doc-content p { margin-bottom: 0.8em; text-align: justify; text-indent: 1.25cm; } .clc-doc-content ul { list-style-type: disc; margin-left: 2em; } .clc-sign-table { width: 100%; margin-top: 2em; border-collapse: collapse; } .clc-sign-line { margin-top: 2em; border-top: 1px solid #000; padding-top: 0.5em; } /* Стили для печати */ @media print { body * { visibility: hidden; } .clc-document-wrapper, .clc-document-wrapper * { visibility: visible; } .clc-document-wrapper { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 20mm; box-shadow: none; border: none; } .d-print-none { display: none !important; } .d-none.d-print-block { display: block !important; } a { text-decoration: none; color: #000; } } /* ===== MAIN: icons.css ===== */ /* Базовые стили для SVG-иконок */ .icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon-left { margin-right: 0.5rem; } .icon-right { margin-left: 0.5rem; } /* Для кнопок-иконок */ .btn-icon-only { padding: 0.75rem; aspect-ratio: 1 / 1; } .btn-icon-only .icon { margin: 0; } /* ===== MAIN: main-page.css ===== */ /* ============================================ MAIN PAGE — TECH-STC.RU COLOR SCHEME Стиль: строгий деловой минимализм ============================================ */ :root { --primary: #0056b3; --primary-1: #64a4de; --primary-2: #388fde; --primary-3: #0062bd; --primary-4: #235b8e; --accent: #0088cc; --secondary: #6c757d; --white: #fff; --gray: #f8f9fa; --dark: #212529; --border: #e9ecef; --background: #f8fafd; --success: #1a7d39; --success-light: #4caf50; --success-dark: #145a2c; --danger: #c62828; --danger-light: #ef5350; --danger-dark: #9a1c1c; --color-bg: #ffffff; --color-bg-secondary: #f5f7fa; --color-bg-tertiary: #e8ecf1; --color-border: #d1d5db; --color-border-light: #e5e7eb; --color-text: #202122; --color-text-secondary: #6b7280; --color-text-muted: #9ca3af; --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-light: #dbeafe; --color-success: #059669; --color-warning: #d97706; --color-error: #dc2626; } /* === HERO SECTION === */ .main-hero { padding: 5rem 0 4rem; background: linear-gradient(135deg, #202f3d 0%, #3c566d 50%, #202f3d 100%); border-bottom: 0px solid var(--primary); } .main-hero__inner { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; text-align: left; } .main-hero__badge { display: inline-block; color: var(--primary-1); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.5rem; border-left: 3px solid var(--primary); padding-left: 0.75rem; } .main-hero__title { font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin: 0 0 1.25rem; color: var(--white); letter-spacing: -0.02em; } .main-hero__subtitle { font-size: 1.125rem; line-height: 1.5; color: var(--color-text-muted); margin: 0 0 2rem; max-width: 640px; } .main-hero__actions { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 2.5rem; } .main-hero__compliance { display: flex; gap: 2rem; justify-content: flex-start; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; font-size: 0.75rem; color: var(--color-text-muted); } .main-hero__compliance li { display: flex; align-items: center; gap: 0.5rem; } .main-hero__compliance i { color: var(--primary-1); font-size: 0.8rem; } /* === SECTIONS === */ .main-section { padding: 4rem 0; } .main-section--light { background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); } .main-section--accent { background: var(--primary-4); color: var(--white); } .main-section--accent .main-section__title, .main-section--accent .main-card__title, .main-section--accent .main-card__text, .main-section--accent .main-advantages span { color: var(--white); } .main-section__title { font-size: 1.75rem; font-weight: 700; margin: 0 0 2.5rem; text-align: left; color: var(--color-text); letter-spacing: -0.01em; } .main-section--accent .main-section__title { color: var(--white); } /* === GRID === */ .main-grid { display: grid; gap: 2rem; } .main-grid--3 { grid-template-columns: repeat(1, 1fr); } .main-grid--2 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .main-grid--3 { grid-template-columns: repeat(3, 1fr); } .main-grid--2 { grid-template-columns: repeat(2, 1fr); } } /* === CARDS === */ .main-card { background: var(--color-bg); border: 1px solid rgb(238, 238, 238); border-radius: 7px; padding: 2rem; transition: border-color 0.2s; } .main-card:hover { border-color: var(--primary); } .main-card__icon { font-size: 1.25rem; color: var(--primary); margin-bottom: 1rem; font-weight: 600; } .main-card__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--color-text); line-height: 1.3; } .main-card__text { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.25rem; } .main-card__link { font-size: 0.875rem; font-weight: 500; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--primary); transition: opacity 0.15s; } .main-card__link:hover { opacity: 0.6; } /* === WORKFLOW === */ .main-workflow { display: grid; gap: 2rem; } .main-workflow__item { position: relative; padding-left: 4rem; border-left: 1px solid var(--color-border); } .main-workflow__number { position: absolute; left: -1px; top: 0; width: 2.5rem; height: 2.5rem; background: var(--color-bg); color: var(--primary); font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); } .main-workflow__title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--color-text); } .main-workflow__item p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* === AUDIENCE CARDS === */ .main-audience-card { background: var(--color-bg); border: 1px solid var(--color-border); padding: 2rem; } .main-audience-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.75rem; color: var(--color-text); } .main-audience-card h3 i { color: var(--primary); font-size: 1rem; } .main-audience-card ul { list-style: none; padding: 0; margin: 0; } .main-audience-card li { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; } .main-audience-card li::before { content: "—"; position: absolute; left: 0; color: var(--primary); } /* === ADVANTAGES === */ .main-advantages { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; } .main-advantages li { display: flex; align-items: flex-start; gap: 1rem; font-size: 0.9375rem; line-height: 1.6; } .main-advantages i { color: var(--primary); margin-top: 0.125rem; flex-shrink: 0; font-size: 0.875rem; } .main-advantages span { color: var(--color-text); font-weight: 500; } .main-section--accent .main-advantages i { color: var(--primary-1); } .main-section--accent .main-advantages span { color: var(--white); } /* === CTA GRID === */ .main-cta-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, 1fr); } @media (min-width: 768px) { .main-cta-grid { grid-template-columns: repeat(2, 1fr); } } .main-cta-card { display: block; background: var(--color-bg); border: 1px solid var(--color-border); padding: 2rem; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; } .main-cta-card:hover { border-color: var(--primary); background: var(--color-bg-secondary); } .main-cta-card h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.75rem; color: var(--color-text); } .main-cta-card h3 i { color: var(--primary); font-size: 1rem; } .main-cta-card p { font-size: 0.9375rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } /* === DISCLAIMER === */ .main-disclaimer { padding: 2rem 0; border-top: 1px solid var(--color-border-light); text-align: left; font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.6; } .main-disclaimer i { margin-right: 0.5rem; color: var(--primary); } /* === PRINT === */ @media print { .main-hero, .main-section, .main-disclaimer { padding: 1rem 0; } .main-hero { background: var(--white); } .main-hero__title { color: var(--color-text); } .main-hero__actions, .main-card__link, .main-cta-card { display: none; } .main-card, .main-audience-card, .main-cta-card { border: 1px solid var(--color-text); } } /* ===== MAIN: main.css ===== */ /* ============================================ TECH-STC.RU - MAIN CSS Системный файл сборки стилей ============================================ */ /* 1. БАЗОВЫЕ НАСТРОЙКИ */ /* 2. ТИПОГРАФИКА И СЕТКА */ /* 3. УТИЛИТЫ */ /* 4. КОМПОНЕНТЫ UI */ /**/ /* 5. ФОРМЫ */ /* 6. КАЛЬКУЛЯТОРЫ */ /* 9. ОБЩИЕ КОМПОНЕНТЫ */ /* 10. АДАПТИВНОСТЬ */ /* 11. ПЕЧАТЬ */ /* ===== MAIN: markdown.css ===== */ /* ============================================ TECH-STC.RU - MARKDOWN CONTENT STYLES ============================================ */ .markdown-content { font-size: 1rem; line-height: 1.7; color: var(--color-text); max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--space-md); word-break: break-word; hyphens: auto; } /* Заголовки */ .markdown-content h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-2xl); color: var(--color-text); letter-spacing: -0.02em; scroll-margin-top: 100px; } .markdown-content h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: var(--space-2xl) 0 var(--space-lg); color: var(--color-text); padding-bottom: var(--space-md); border-bottom: 2px solid var(--color-border); } .markdown-content h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin: var(--space-xl) 0 var(--space-md); color: var(--color-text); } .markdown-content h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: var(--space-lg) 0 var(--space-sm); color: var(--color-text); } /* Параграфы */ .markdown-content p { margin: 0 0 var(--space-lg); } /* Списки */ .markdown-content ul, .markdown-content ol { padding-left: 1.25rem; margin: 0 0 var(--space-lg) 1.5rem; } .markdown-content ul { list-style-type: disc; } .markdown-content li { margin-bottom: var(--space-xs); line-height: 1.6; } /* Ссылки */ .markdown-content a { color: var(--color-accent); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color var(--transition-fast); } .markdown-content a:hover { border-bottom-color: var(--color-accent); } /* Жирный и курсив */ .markdown-content strong { font-weight: 700; color: var(--color-text); } .markdown-content em { font-style: italic; color: var(--color-text-secondary); } /* Моноширинный текст */ .markdown-content .text-mono, .markdown-content code, .markdown-content pre code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-bg-tertiary); padding: 0.2em 0.4em; border-radius: 0; } /* Блоки кода */ .markdown-content pre { background: var(--color-bg-tertiary); padding: var(--space-lg); margin: var(--space-xl) 0; border: 1px solid var(--color-border-light); overflow-x: auto; border-radius: 0; } /* Юридический блок и статус */ .markdown-content p:has(strong:contains("Юридический статус")) { padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-xl); border-left: 4px solid var(--color-accent); background: var(--color-accent-light); } .markdown-content p:has(strong:contains("Создатель:")), .markdown-content p:has(strong:contains("ИНН:")) { margin: 0.5rem 0; font-size: 0.9375rem; } /* Контакты */ .markdown-content p:has(a[href^="mailto:"]) { margin-top: var(--space-xl); padding: var(--space-md); background: var(--color-bg-secondary); border: 1px solid var(--color-border); } /* Отступы между блоками */ .markdown-content > * + * { margin-top: var(--space-xl); } /* Мобильная адаптивность */ @media (max-width: 767px) { .markdown-content { padding: var(--space-lg) var(--space-md); } .markdown-content h1 { font-size: 1.5rem; } .markdown-content h2 { font-size: 1.25rem; } } /* ===== MAIN: mobile.css ===== */ /* ============================================ TECH-STC.RU - MOBILE OVERRIDES Mobile-first adjustments for screens < 760px ============================================ */ @media (max-width: 759px) { #top-banners { display: none; } .technical-passport{padding: 1rem 0.75rem;} /* Утилиты: сброс p-3 */ .p-3 { padding: 0 !important; } /* Контейнеры и обертки: единый сброс + отступы */ .container, .container--narrow, main, .row { padding-left: 0 !important; padding-right: 0 !important; max-width: none; width: 100%; margin: 0; box-sizing: border-box; } .shell-h1{padding: 0 16px;} /* Сброс гридов */ .grid { display: block; } .grid > [class*="grid__"] { width: 100%; margin-left: 0; margin-right: 0; } /* Навигация: вертикальная */ .nav, .nav__list { display: block; } .nav__item { display: block; margin: 0 0 var(--space-sm) 0; } /* Скрытие/показ элементов */ .desktop-only { display: none !important; } .mobile-only { display: block !important; } /* Таблицы: горизонтальный скролл */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Сайдбар */ .sidebar { position: static; width: 100%; margin-top: var(--space-xl); } /* Типография */ h1 { font-size: 1.5rem; line-height: 1.3; } h2 { font-size: 1.25rem; line-height: 1.3; } } /* Touch-friendly */ button, .button, [role="button"], input[type="submit"] { min-height: 44px; min-width: 44px; } /* Отключаем hover на тач-устройствах */ @media (hover: none) and (pointer: coarse) { .nav__link:hover { background-color: transparent; } .card:hover { transform: none; box-shadow: none; } } /* ===== MAIN: navigation.css ===== */ /* ============================================ TECH-STC.RU - VERTICAL NAVIGATION Современная навигация без бордеров ============================================ */ /* ----------------------------------------------------------------- ОСНОВНОЙ КОНТЕЙНЕР ВЕРТИКАЛЬНОЙ НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical { width: 100%; background: var(--color-bg); } /* ----------------------------------------------------------------- СПИСОК НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__list { list-style: none; padding: 0; margin: 0; } /* ----------------------------------------------------------------- ЭЛЕМЕНТ СПИСКА ----------------------------------------------------------------- */ .nav-vertical__item { margin-bottom: 2px; position: relative; } .nav-vertical__item:last-child { margin-bottom: 0; } /* Разделители между группами */ .nav-vertical__item--divider { height: 1px; background: var(--color-border-light); margin: var(--space-md) 0; } /* ----------------------------------------------------------------- ССЫЛКА НАВИГАЦИИ - СОВРЕМЕННЫЙ СТИЛЬ БЕЗ БОРДЕРОВ ----------------------------------------------------------------- */ .nav-vertical__link { display: flex; align-items: center; gap: var(--space-sm); padding: 0.6rem var(--space-md); color: var(--color-text-secondary); text-decoration: none; font-size: 0.9375rem; font-weight: 500; border-radius: 0; /* Технический стиль */ transition: all var(--transition-fast); position: relative; } /* Текст ссылки */ .nav-vertical__link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Стрелка для вложенных меню */ .nav-vertical__link .arrow { margin-left: auto; font-size: 0.75rem; opacity: 0.5; transition: transform var(--transition-fast); } /* Открытое вложенное меню */ .nav-vertical__item--expanded > .nav-vertical__link .arrow { transform: rotate(90deg); } /* ----------------------------------------------------------------- СОСТОЯНИЯ ССЫЛОК - ЧИСТЫЙ СОВРЕМЕННЫЙ ДИЗАЙН ----------------------------------------------------------------- */ /* Hover - просто изменение фона */ .nav-vertical__link:hover, .nav-vertical__link:focus { color: var(--color-accent); background-color: var(--color-bg-secondary); } .nav-vertical__link:hover .icon, .nav-vertical__link:focus .icon { color: var(--color-accent); } /* Active (текущая страница) - цветной фон, без бордеров */ .nav-vertical__link--active, .nav-vertical__item--active > .nav-vertical__link { color: var(--color-accent); background-color: var(--color-accent-light); font-weight: 600; } .nav-vertical__link--active .icon, .nav-vertical__item--active > .nav-vertical__link .icon { color: var(--color-accent); } /* Disabled */ .nav-vertical__link--disabled, .nav-vertical__item--disabled > .nav-vertical__link { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* ----------------------------------------------------------------- ВЛОЖЕННЫЕ МЕНЮ - СОВРЕМЕННЫЙ СТИЛЬ ----------------------------------------------------------------- */ .nav-vertical__sublist { list-style: none; padding: 0 0 0 var(--space-lg); margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition-base); } .nav-vertical__item--expanded .nav-vertical__sublist { max-height: 500px; } .nav-vertical__sublist .nav-vertical__link { padding: 0.5rem var(--space-md); font-size: 0.875rem; background: transparent; } .nav-vertical__sublist .nav-vertical__link:hover { background-color: var(--color-bg-secondary); } .nav-vertical__sublist .nav-vertical__item:last-child .nav-vertical__link { margin-bottom: 0; } /* ----------------------------------------------------------------- ГРУППЫ НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__group { margin-bottom: var(--space-xl); } .nav-vertical__group:last-child { margin-bottom: 0; } .nav-vertical__group-title { padding: var(--space-md) var(--space-md) var(--space-xs); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; } /* ----------------------------------------------------------------- ВАРИАНТЫ - КОМПАКТНЫЙ ----------------------------------------------------------------- */ .nav-vertical--compact .nav-vertical__link { padding: 0.4rem var(--space-sm); font-size: 0.875rem; } .nav-vertical--compact .nav-vertical__sublist { padding-left: var(--space-md); } /* ----------------------------------------------------------------- ВАРИАНТЫ - С ИКОНКАМИ СПРАВА ----------------------------------------------------------------- */ .nav-vertical--icons-right .nav-vertical__link { flex-direction: row-reverse; } /* ----------------------------------------------------------------- ВАРИАНТЫ - ТЕХНИЧЕСКАЯ НАВИГАЦИЯ (для документации) ----------------------------------------------------------------- */ .nav-vertical--technical .nav-vertical__link { font-family: var(--font-mono); font-size: 0.875rem; } .nav-vertical--technical .nav-vertical__link .code { color: var(--color-accent); margin-right: var(--space-sm); } /* ----------------------------------------------------------------- ВАРИАНТЫ - МИНИМАЛИСТИЧНАЯ (только иконки) ----------------------------------------------------------------- */ .nav-vertical--icons-only .nav-vertical__link span:not(.icon) { display: none; } .nav-vertical--icons-only .nav-vertical__link { justify-content: center; padding: 0.6rem; } .nav-vertical--icons-only .nav-vertical__link .icon { margin: 0; width: 1.5rem; height: 1.5rem; } /* ----------------------------------------------------------------- ВАРИАНТЫ - БЕЗ ЗАЛИВКИ (только текст) ----------------------------------------------------------------- */ .nav-vertical--minimal .nav-vertical__link { background: transparent; } .nav-vertical--minimal .nav-vertical__link:hover { background: transparent; color: var(--color-accent); } .nav-vertical--minimal .nav-vertical__link--active, .nav-vertical--minimal .nav-vertical__item--active > .nav-vertical__link { background: transparent; color: var(--color-accent); font-weight: 600; } /* ----------------------------------------------------------------- БЕЙДЖИ В НАВИГАЦИИ ----------------------------------------------------------------- */ .nav-vertical__link .badge { margin-left: auto; min-width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; border-radius: 0; /* Технический стиль */ } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { .nav-vertical--collapsible { position: relative; } .nav-vertical--collapsible .nav-vertical__list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 100; } .nav-vertical--collapsible.expanded .nav-vertical__list { display: block; } } /* ----------------------------------------------------------------- ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ----------------------------------------------------------------- */ /* Современная навигация без бордеров: <nav class="nav-vertical"> <ul class="nav-vertical__list"> <li class="nav-vertical__item"> <a href="#" class="nav-vertical__link nav-vertical__link--active"> <svg class="icon">...</svg> <span>Главная</span> </a> </li> </ul> </nav> */ /* ===== MAIN: print.css ===== */ /* ============================================ TECH-STC.RU - PRINT STYLES Оптимизация для печати технической документации ============================================ */ @media print { /* ===== СБРОС И БАЗОВЫЕ НАСТРОЙКИ ===== */ *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0 !important; transition: none !important; animation: none !important; } body { width: 100%; margin: 0; padding: 0; font-size: 12pt; line-height: 1.5; color: #000; background: #fff; } /* ===== КОНТЕЙНЕРЫ ===== */ .col-6, .container, .container-fluid, .container--narrow, section, main, article { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ===== ТИПОГРАФИКА ===== */ h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; } h1 { font-size: 18pt; margin: 1cm 0 0.5cm; } h2 { font-size: 16pt; margin: 0.8cm 0 0.4cm; } h3 { font-size: 14pt; margin: 0.6cm 0 0.3cm; } h4 { font-size: 12pt; margin: 0.4cm 0 0.2cm; } p, li, .text-body { font-size: 11pt; line-height: 1.5; orphans: 3; widows: 3; } a { text-decoration: underline; color: #000; } /* Печатаем только внешние ссылки */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; font-weight: normal; } /* ===== ТАБЛИЦЫ ===== */ table { width: 100% !important; border-collapse: collapse; margin: 0.5cm 0; break-inside: avoid; page-break-inside: avoid; } th { background: #f0f0f0 !important; color: #000 !important; font-weight: bold; border: 1px solid #000; padding: 0.3cm; } td { border: 1px solid #000; padding: 0.3cm; } /* ===== КАРТОЧКИ ===== */ .card { border: 1px solid #000 !important; background: transparent !important; margin: 0.5cm 0; padding: 0.3cm; break-inside: avoid; page-break-inside: avoid; } .card__header { background: transparent !important; border-bottom: 1px solid #000; } .card__body, .card__footer { background: transparent !important; } /* ===== КНОПКИ И ФОРМЫ ===== */ .btn, button, .button { border: 1px solid #000 !important; background: transparent !important; color: #000 !important; padding: 0.2cm 0.5cm; text-decoration: none; } input, select, textarea { border: 1px solid #000 !important; background: transparent !important; color: #000 !important; padding: 0.2cm; } /* ===== СКРЫВАЕМ НЕНУЖНОЕ ===== */ .nav--vertical, .hdr-toggler, .hdr-mobile, .sidebar, .breadcrumb, .btn--primary, .btn--secondary, .btn--outline, .alert, .cookie-banner, .cookie-modal, .ftr-social, .hdr-desktop-menu, .mobile-only, iframe, video, .video-wrapper, .map, .no-print { display: none !important; } /* ===== ХЕДЕР И ФУТЕР ===== */ .hdr { border-bottom: 2px solid #000; margin-bottom: 0.5cm; } .hdr-brand-text { font-size: 16pt; font-weight: bold; } .ftr { border-top: 2px solid #000; margin-top: 1cm; padding-top: 0.5cm; font-size: 10pt; } /* ===== КОД И ЦИТАТЫ ===== */ pre, code, .mono { font-family: "Courier New", monospace; border: 1px solid #ccc; padding: 0.2cm; white-space: pre-wrap; word-wrap: break-word; } blockquote { margin: 0.5cm 0; padding: 0.3cm; border-left: 3px solid #000; font-style: italic; } /* ===== УПРАВЛЕНИЕ СТРАНИЦАМИ ===== */ img { max-width: 100% !important; break-inside: avoid; page-break-inside: avoid; } tr, li { break-inside: avoid; page-break-inside: avoid; } thead { display: table-header-group; } tfoot { display: table-footer-group; } /* ===== ПОЛЯ СТРАНИЦЫ ===== */ @page { margin: 2cm; size: A4; orphans: 4; widows: 3; } @page :first { margin-top: 3cm; } } @media print { .print-footer { font-size: 8pt; color: #666; margin-top: 20pt; border-top: 1px solid #ccc; padding-top: 6pt; } } /* ===== MAIN: pro-calc.css ===== */ /* ============================================ TECH-STC.RU - PRO CALCULATOR Minimalist | Tech | Border-radius: 0 ============================================ */ .calculator-container { padding-top: 1rem; } .pro-split-calc { max-width: 100%; margin: 1.4rem auto; font-family: var(--font-sans); color: var(--color-text); } /* ----- Typography ----- */ .pro-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--color-text); letter-spacing: -0.02em; } .pro-note { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } /* ----- Grid Layout ----- */ .pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } /* ----- Form Column ----- */ .pro-form-col { background: var(--color-bg-secondary); padding: 1.5rem; border: 1px solid var(--color-border-light); border-radius: 0; } .pro-field { margin-bottom: 1.25rem; } .pro-label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--color-text); } .pro-input, .pro-select { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--color-border); border-radius: 0; font-size: 1.1rem; color: var(--color-text); font-family: var(--font-mono); background: var(--color-bg); transition: border-color var(--transition-fast); } .pro-input:focus, .pro-select:focus { border-color: var(--primary); outline: none; } .pro-hint { display: block; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.375rem; } /* ----- Checkbox ----- */ .pro-checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; } .pro-checkbox { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--primary); } /* ----- Buttons ----- */ .pro-buttons { display: flex; gap: 0.75rem; margin-top: 1.5rem; } .pro-btn { padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: 0; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .pro-btn-primary { background-color: var(--primary); color: var(--white); } .pro-btn-secondary { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); } .pro-btn-secondary:hover { background-color: var(--color-bg-secondary); } .pro-error { color: var(--color-error); font-size: 0.875rem; margin-top: 0.75rem; min-height: 1.25rem; } /* ----- Results Column ----- */ .pro-results-col { background: var(--color-bg); display: flex; flex-direction: column; position: sticky; top: 0; z-index: 10; } .pro-results-card, .pro-export-card { background: var(--color-bg); padding: 1.5rem; border-left: 0; /*height: 100%;*/ display: flex; flex-direction: column; border-radius: 0; } .pro-results-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 1.25rem 0; color: var(--color-text); padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .pro-result-item { display: flex; justify-content: space-between; align-items: baseline; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-light); } .pro-result-item:last-of-type { border-bottom: none; } .pro-result-highlight { background-color: var(--primary-light); margin: 0.5rem -0.75rem; padding: 0.875rem 0.75rem; border-bottom: none; } .pro-result-label { color: var(--color-text-secondary); font-size: 0.875rem; } .pro-result-value { font-weight: 600; color: var(--color-text); font-size: 1rem; font-family: var(--font-mono); } .pro-result-highlight .pro-result-value { color: var(--primary); } /* ----- Recommendations ----- */ .pro-recommendations { margin-top: auto; padding: 1rem; background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: 0; } .pro-recommendations-title { font-weight: 600; margin: 0 0 0.5rem 0; font-size: 0.875rem; color: var(--color-text); } .pro-recommendations-text { margin: 0 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.875rem; line-height: 1.6; } .pro-recommendations-note { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); font-style: italic; } /* ----- Normative Footer ----- */ .pro-normative-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); } .pro-normative-links { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 0.75rem 0; line-height: 1.5; } .pro-normative-links a { color: var(--primary); text-decoration: none; } .pro-normative-links a:hover { text-decoration: underline; } .pro-disclaimer { font-size: 0.75rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .pro-disclaimer a { color: var(--primary); text-decoration: none; } /* ----- Responsive ----- */ @media (max-width: 768px) { .pro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .pro-results-col { order: 2; } .pro-buttons { flex-direction: column; } .pro-btn { width: 100%; } .pro-title { font-size: 1.25rem; } } .pro-field { margin-bottom: 1.25rem; } .pro-field:last-child { margin-bottom: 0; } .pro-label { display: block; font-weight: 500; margin-bottom: 0.5rem; color: var(--color-text, #202122); } .pro-label-hint { font-weight: normal; font-size: 0.85em; color: var(--color-text-muted, #6c757d); } .pro-input, .pro-select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border, #d1d5db); border-radius: 0; font-size: 0.875rem; line-height: 1.5; background: var(--color-bg, #ffffff); } .pro-input:focus, .pro-select:focus { outline: none; border-color: var(--primary, #0056b3); } .pro-hint { display: block; font-size: 0.75rem; color: var(--color-text-muted, #6c757d); margin-top: 0.25rem; } .pro-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; margin-bottom: 0.5rem; } .pro-checkbox input { width: auto; margin: 0; } .pro-checkbox span { flex: 1; } .pro-ingredients-container { background: var(--color-bg-secondary, #f8f9fa); padding: 1rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-ingredients-list { max-height: 400px; overflow-y: auto; margin-bottom: 1rem; } .pro-ingredient-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.75rem; background: var(--color-bg, #ffffff); border: 1px solid var(--color-border, #e5e7eb); } .pro-ingredient-fields { flex: 1; display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0.75rem; } .pro-ingredient-name, .pro-ingredient-weight { margin: 0; } .pro-ingredient-allergens { margin: 0; } .pro-remove-btn { width: 34px; height: 34px; padding: 0 !important; line-height: 1; font-size: 1.25rem; flex-shrink: 0; } .pro-add-btn { width: 100%; } .pro-buttons { display: flex; gap: 1rem; margin-top: 1.5rem; } .pro-results-card { background: var(--color-bg, #ffffff); padding: 1rem; /*max-height: 80vh;*/ overflow-y: auto; } .pro-results-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary, #e74c3c); } .pro-result-group { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-result-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pro-result-group-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--primary, #e74c3c); } .pro-result-list { font-size: 0.875rem; } .pro-result-list > div { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border, #f0f0f0); } .pro-result-list > div:last-child { border-bottom: none; } .pro-empty-message { color: var(--color-text-muted, #6c757d); font-style: italic; padding: 0.5rem; text-align: center; } .pro-result-code { background: var(--color-bg-secondary, #f4f4f4); padding: 0.75rem; font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; border: 1px solid var(--color-border, #e5e7eb); } .pro-collapsible { margin-top: 0.5rem; } .pro-toggle-btn { padding: 0 !important; font-size: 0.875rem; } /* Адаптивность */ @media (max-width: 768px) { .pro-ingredient-fields { grid-template-columns: 1fr; gap: 0.5rem; } } .pro-checkbox-wrapper { display: flex; flex-direction: column; gap: 0.25rem; } .pro-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; margin-bottom: 1rem; } .pro-checkbox input { flex-shrink: 0; margin-top: 0.125rem; } .pro-checkbox span { flex: 1; line-height: 1.1; min-width: 200px; } .pro-checkbox-wrapper .pro-hint { margin-left: 1.5rem; } .pro-params-card { background: var(--color-bg-secondary, #f8f9fa); border: 1px solid var(--color-border, #e5e7eb); padding: 1rem; margin-bottom: 1.25rem; } .pro-param-item { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-param-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .pro-param-item .pro-checkbox { margin-bottom: 0.25rem; } .pro-param-item .pro-hint { margin-left: 1.5rem; } .pro-param-item .pro-label { margin-bottom: 0.25rem; } /* Специфичные стили для калькулятора себестоимости */ .cost-ingredient-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; } @media (max-width: 768px) { .cost-ingredient-fields { grid-template-columns: 1fr; gap: 0.5rem; } } .pro-result-highlight { background-color: rgba(37, 99, 235, 0.1); padding: 0.5rem; margin: 0 -0.5rem; border-radius: 0; } .pro-recommendations { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem; border-left: 3px solid var(--primary, #0056b3); } /* Дополнительные стили для двух колонок в форме */ .pro-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .pro-result-info { background: var(--color-bg-secondary, #f8f9fa); padding: 1rem; margin-bottom: 1.5rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-result-info-row { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--color-border-light, #f0f0f0); } .pro-result-info-row:last-child { border-bottom: none; } .pro-result-info-label { font-weight: 500; color: var(--color-text-secondary, #6c757d); } .pro-result-info-value { font-weight: 600; color: var(--color-text, #202122); font-family: var(--font-mono, monospace); } .pro-result-table-wrapper { overflow-x: auto; } .pro-results-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .pro-results-table th, .pro-results-table td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-results-table th { background: var(--color-bg-secondary, #f8f9fa); font-weight: 600; border-bottom: 2px solid var(--color-border, #d1d5db); } .pro-results-table td:not(:first-child) { text-align: right; } .pro-results-table td:first-child { text-align: left; } .pro-results-table td:last-child, .pro-results-table th:last-child { background: #fafafa; font-weight: 500; } @media print { .pro-form-col { display: none; } .pro-results-single { margin-top: 0; } .pro-results-table th, .pro-results-table td { border: 1px solid #000 !important; } } @media (max-width: 640px) { .pro-two-columns { grid-template-columns: 1fr; gap: 0; } .pro-ingredient-fields { grid-template-columns: 1fr !important; gap: 0.5rem; } } .pro-title i, .pro-label i, .pro-result-group-title i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-results-title i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-btn i { margin-right: 0.5rem; } .pro-result-group { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border, #e5e7eb); } .pro-result-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .pro-result-item { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-light, #f0f0f0); } .pro-result-item:last-child { border-bottom: none; } .pro-result-label { font-weight: 500; color: var(--color-text-secondary, #6c757d); min-width: 160px; display: inline-block; } .pro-result-value { font-weight: 600; color: var(--color-text, #202122); font-family: var(--font-mono, monospace); } .pro-adjustment-item { padding: 0.5rem 0; display: flex; align-items: baseline; gap: 0.5rem; } .pro-adjustment-item i { color: var(--color-success, #059669); font-size: 0.875rem; } .coefficient-highlight { background: var(--primary-light, #e0e7ff); padding: 0.125rem 0.375rem; border-radius: 4px; font-weight: 600; } /* Адаптивность */ @media (max-width: 768px) { .pro-result-item { flex-direction: column; } .pro-result-label { margin-bottom: 0.25rem; } } /* Дополнительные стили для радио-кнопок */ .pro-radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem; padding: 0.25rem 0; } .pro-radio-label input { width: auto; margin: 0; } .pro-radio-label span { font-size: 0.875rem; color: var(--color-text, #202122); } .pro-radio-label:last-child { margin-bottom: 0; } .pro-checkbox-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .pro-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: normal; } .pro-checkbox-label input { margin: 0; } .pro-result-highlight { background-color: rgba(231, 76, 60, 0.1); margin: 0.5rem -0.75rem; padding: 0.875rem 0.75rem; border-radius: 0; } .pro-results-single { margin-top: 2rem; } @media (max-width: 768px) { .pro-checkbox-group { flex-direction: column; gap: 0.5rem; } .pro-buttons { flex-direction: column; } .pro-buttons .pro-btn { width: 100%; } } @media print { .pro-buttons, .pro-results-single button, #shelf-life-copy-text { display: none !important; } } .pro-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--color-border, #ddd); margin-bottom: 1rem; padding-bottom: 0.5rem; } .pro-tab-btn { padding: 0.5rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; font-weight: 500; color: var(--color-text-secondary, #6c757d); transition: all 0.2s ease; } .pro-tab-btn i { margin-right: 0.5rem; } .pro-tab-btn:hover { color: var(--primary, #e74c3c); } .pro-tab-btn.active { color: var(--primary, #e74c3c); border-bottom: 2px solid var(--primary, #e74c3c); } .pro-tab-content { display: none; } .pro-tab-content.active { display: block; } /* Стили для документов (печать) */ .ttk-document, .act-document, .info-list { font-family: 'Times New Roman', Times, serif; font-size: 12pt; line-height: 1.4; } .ttk-document h1, .ttk-document h2, .ttk-document h3, .act-document h1, .act-document h2, .act-document h3, .info-list h2, .info-list h3 { font-family: 'Times New Roman', Times, serif; } @media print { .pro-tabs, .pro-print-buttons, .accordion__item, .technical-passport { display: none; } .pro-tab-content { display: block !important; } .ttk-document, .act-document, .info-list { margin: 0; padding: 0; } } /* Стили для колонок формы */ .pro-row { display: flex; gap: 1rem; margin-bottom: 0; } .pro-col { flex: 1; } @media (max-width: 768px) { .pro-row { flex-direction: column; gap: 0; } } /* Стили для таблиц */ .pro-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; } .pro-table th, .pro-table td { border: 1px solid var(--color-border, #ddd); padding: 8px; text-align: left; } .pro-table th { background: var(--color-bg-secondary, #f5f5f5); font-weight: 600; } .pro-mode-switch { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; background: var(--color-bg-secondary, #f8f9fa); padding: 0.5rem; border-radius: 0; } .pro-mode-btn { flex: 1; padding: 0.625rem 1rem; background: transparent; border: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all var(--transition-fast, 0.15s ease); color: var(--color-text-secondary, #6c757d); } .pro-mode-btn i { margin-right: 0.5rem; } .pro-mode-btn.active { background: var(--color-bg, #ffffff); color: var(--primary, #0056b3); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .pro-radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; } .pro-radio-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; } .pro-radio-label i { font-size: 1rem; } .pro-info-box { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem 1rem; margin: 1rem 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary, #6c757d); } .pro-info-box i { color: var(--primary, #0056b3); font-size: 1rem; } .pro-reference-details { margin-top: 1rem; border: 1px solid var(--color-border, #e5e7eb); } .pro-reference-summary { padding: 0.75rem 1rem; cursor: pointer; font-weight: 500; background: var(--color-bg-secondary, #f8f9fa); } .pro-reference-summary i { margin-right: 0.5rem; color: var(--primary, #0056b3); } .pro-reference-content { padding: 1rem; border-top: 1px solid var(--color-border, #e5e7eb); } .reference-table { width: 100%; border-collapse: collapse; } .reference-table th, .reference-table td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--color-border, #e5e7eb); } .reference-table th { font-weight: 600; background: var(--color-bg-secondary, #f8f9fa); } .reference-badge { display: inline-block; padding: 0.125rem 0.375rem; font-size: 0.75rem; background: var(--primary-light, #dbeafe); color: var(--primary, #0056b3); } @media (max-width: 768px) { .pro-mode-switch { flex-direction: column; } .pro-radio-group { flex-direction: column; gap: 0.75rem; } .reference-table th, .reference-table td { padding: 0.375rem; font-size: 0.75rem; } } .pro-formula { background: var(--color-bg-secondary, #f8f9fa); padding: 0.75rem 1rem; margin: 0.75rem 0; font-family: monospace; font-size: 0.875rem; text-align: center; border-left: 3px solid var(--primary, #0056b3); } .pro-mos-bar { background: #e5e7eb; height: 24px; margin: 1rem 0 0.5rem; position: relative; } .pro-mos-bar-fill { background: #10b981; height: 100%; transition: width 0.3s ease; } .pro-mos-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: #6c757d; } .pro-recommendation-block { background: #f0f9ff; padding: 1rem; border-left: 3px solid #3b82f6; font-size: 0.875rem; } .pro-warning-block { background: #fef2f2; padding: 0.75rem; border-left: 3px solid #ef4444; color: #991b1b; font-size: 0.875rem; margin-top: 1rem; } .pro-result-highlight { background: #eff6ff; margin: 0.5rem -0.75rem; padding: 0.75rem 0.75rem; border-radius: 4px; } @media print { .pro-mos-bar { border: 1px solid #000; background: none; } .pro-mos-bar-fill { background: #000; } .pro-recommendation-block { border: 1px solid #000; background: none; } } /* ===== MAIN: recommendations-block.css ===== */ /* ============================================ TECH-STC.RU - RECOMMENDATIONS BLOCK Список рекомендаций и связанных материалов ============================================ */ .recommendations-block { margin: 0.9rem 0; font-family: var(--font-sans); } .recommendations-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); } .recommendations-block li { margin: 0; position: relative; } .recommendations-block a { display: flex; align-items: center; padding: var(--space-sm) 0; color: var(--color-text); text-decoration: none; font-size: 0.9375rem; line-height: 1.5; border-bottom: 1px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); position: relative; } .recommendations-block a::before { content: '→'; color: var(--color-accent); font-size: 0.875rem; margin-right: var(--space-sm); opacity: 0; transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); font-weight: 400; } .recommendations-block a:hover { color: var(--color-accent); border-bottom-color: var(--color-border-light); } .recommendations-block a:hover::before { opacity: 1; transform: translateX(0); } /* Технологичный вариант с подсветкой при наведении */ .recommendations-block--tech li { border-left: 2px solid transparent; transition: border-color var(--transition-fast); padding-left: 0; } .recommendations-block--tech li:hover { border-left-color: var(--color-accent); } .recommendations-block--tech a { padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); } .recommendations-block--tech a::before { display: none; } /* Вариант с сеткой 2 колонки для более плотного отображения */ .recommendations-block--grid ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md) var(--space-lg); } .recommendations-block--grid li { border: none; } .recommendations-block--grid a { padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border-light); font-size: 0.875rem; } .recommendations-block--grid a::before { content: ''; display: none; } /* Компактная версия для сайдбара */ .recommendations-block--compact ul { gap: 0; } .recommendations-block--compact li { border-bottom: 1px solid var(--color-border-light); } .recommendations-block--compact li:last-child { border-bottom: none; } .recommendations-block--compact a { padding: var(--space-sm) 0; } .recommendations-block--compact a::before { font-size: 0.75rem; margin-right: var(--space-xs); } @media (max-width: 768px) { .recommendations-block { margin: var(--space-xl) 0; } .recommendations-block a { font-size: 0.875rem; padding: var(--space-xs) 0; } .recommendations-block a::before { font-size: 0.75rem; } .recommendations-block--grid ul { grid-template-columns: 1fr; gap: 0; } .recommendations-block--grid li { border-bottom: 1px solid var(--color-border-light); } .recommendations-block--grid li:last-child { border-bottom: none; } } /* Дополнительный микро-взаимодействие */ @keyframes slideIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } } .recommendations-block a:hover::before { animation: slideIn 0.2s ease forwards; } /* ===== MAIN: search-calculators.css ===== */ /* ============================================ TECH-STC.RU - SEARCH CALCULATORS ТЕХНИЧЕСКИЙ СТИЛЬ - СИСТЕМНЫЕ ЦВЕТА ============================================ */ .srh-form-main { margin: 0 auto 2rem auto; max-width: 900px; background: var(--color-bg); padding: 1.5rem; border: none; } .srh-input-wrapper { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; position: relative; width: 100%; } .srh-input-wrapper i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 1rem; pointer-events: none; z-index: 1; } .srh-input { flex: 1; padding: 0.9rem 1rem 0.9rem 2.5rem; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg); font-family: var(--font-mono); font-size: 0.9375rem; color: var(--color-text); height: 52px; box-sizing: border-box; } .srh-input:focus { outline: none; border-color: var(--color-accent); border-width: 2px; } .srh-input::placeholder { color: var(--color-text-muted); font-family: var(--font-sans); } .srh-button { padding: 0.65rem 1.75rem; background: var(--color-accent); color: var(--white); border: 1px solid var(--color-accent-hover); border-radius: 0; font-weight: 500; font-size: 0.9375rem; cursor: pointer; font-family: var(--font-sans); height: 44px; box-sizing: border-box; white-space: nowrap; flex-shrink: 0; align-self: center; transition: background var(--transition-fast); } .srh-button:hover { background: var(--color-accent-hover); } .srh-hints { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: 0.75rem; } .srh-hint { display: flex; align-items: center; gap: 0.375rem; } .srh-hint i { font-size: 0.75rem; color: var(--color-accent); } .srh-hint-mobile { display: none; } .srh-stats-highlight { background: var(--color-accent-light); padding: 0.25rem 0.75rem; border: 1px solid var(--color-accent-light); font-weight: 500; font-size: 0.875rem; color: var(--color-accent); } /* Mobile адаптация */ @media (max-width: 768px) { .srh-form-main { padding: 1rem; } .srh-input-wrapper { flex-direction: column; align-items: stretch; gap: 0.5rem; } .srh-input-wrapper i { top: 1rem; transform: none; } .srh-input { width: 100%; height: 48px; padding: 0.75rem 1rem 0.75rem 2.5rem; font-size: 16px; } .srh-button { width: 100%; height: 48px; padding: 0.75rem; align-self: stretch; } .srh-hints { flex-direction: column; gap: 0.375rem; } .srh-hint-mobile { display: flex; } } /* ===== MAIN: sidebar.css ===== */ /* ============================================ TECH-STC.RU - SIDEBAR Навигация и компоненты боковой панели ============================================ */ /* ----------------------------------------------------------------- ОСНОВНОЙ КОНТЕЙНЕР САЙДБАРА ----------------------------------------------------------------- */ .sbr-sidebar { background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-border); min-height: 100vh; overflow-y: auto; } .sbr-nav__list { list-style: none; padding: 0; } .sbr-nav__link { display: flex; align-items: center; gap: var(--space-md); padding: 6px var(--space-xs); color: var(--color-text-secondary); text-decoration: none; transition: all var(--transition-fast); font-size: 17px; line-height: 1.3; outline: none; border-radius: 0; } .sbr-nav__link:hover { color: var(--color-accent); background-color: var(--color-bg-tertiary); } .sbr-nav__link--active { color: var(--color-accent); background-color: var(--color-accent-light); font-weight: 500; } .sbr-nav__link:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); } .sbr-nav__header { padding: var(--space-md) var(--space-md) var(--space-sm); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 600; } /* Печать */ @media print { .sbr-nav__list { display: none; } } /* ===== MAIN: table.css ===== */ /* ============================================ TECH-STC.RU - TABLE STYLES Для тега table (без классов) ============================================ */ /* ----------------------------------------------------------------- БАЗОВАЯ ТАБЛИЦА ----------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin: var(--space-xl) 0; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); } table table { margin: 0; } /* ----------------------------------------------------------------- ЗАГОЛОВКИ ----------------------------------------------------------------- */ table th { background: var(--color-bg-secondary); color: var(--color-text); font-weight: 600; text-align: left; padding: var(--space-md) var(--space-lg); border-bottom: 2px solid var(--color-border); white-space: nowrap; } table th.numeric { text-align: right; } /* ----------------------------------------------------------------- ЯЧЕЙКИ ----------------------------------------------------------------- */ table td { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-border-light); vertical-align: top; } /* Компактные таблицы */ table.compact th, table.compact td { padding: var(--space-xs) var(--space-md); } /* ----------------------------------------------------------------- ЧЕРЕДОВАНИЕ СТРОК (зебра) ----------------------------------------------------------------- */ table.striped tbody tr:nth-child(odd) { background: var(--color-bg-tertiary); } /* ----------------------------------------------------------------- HOVER-ЭФФЕКТЫ ----------------------------------------------------------------- */ table.hover tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 5%, white); } table.interactive tbody tr { cursor: pointer; transition: background-color var(--transition-fast); } table.interactive tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 8%, white); } /* ----------------------------------------------------------------- ВЫДЕЛЕНИЕ СТРОК ----------------------------------------------------------------- */ table tr.success { background: color-mix(in srgb, var(--color-success) 5%, white); } table tr.warning { background: color-mix(in srgb, var(--color-warning) 5%, white); } table tr.danger { background: color-mix(in srgb, var(--color-error) 5%, white); } table tr.selected { background: color-mix(in srgb, var(--color-accent) 10%, white); border-left: 3px solid var(--color-accent); } /* ----------------------------------------------------------------- ВЫРАВНИВАНИЕ ----------------------------------------------------------------- */ table .numeric, table td.numeric, table th.numeric { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- ГРАНИЦЫ ----------------------------------------------------------------- */ table.bordered th, table.bordered td { border: 1px solid var(--color-border-light); } table.borderless th, table.borderless td { border: none; } /* ----------------------------------------------------------------- ПОДВАЛ ТАБЛИЦЫ ----------------------------------------------------------------- */ table tfoot td, table tfoot th { background: var(--color-bg-secondary); font-weight: 600; border-top: 2px solid var(--color-border); border-bottom: none; } table .total { font-weight: 700; background: var(--color-bg-tertiary); } /* ----------------------------------------------------------------- АДАПТИВНОСТЬ ----------------------------------------------------------------- */ @media (max-width: 768px) { table th, table td { padding: var(--space-sm) var(--space-md); } table.scrollable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } } /* ----------------------------------------------------------------- ОБЕРТКА ДЛЯ СКРОЛЛА ----------------------------------------------------------------- */ .table-responsive-sm { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; }