/* ═════════════════════════════════════════════════════════════════ EIDA Design System — aligned to Spherity design.md v1.0 Light Mode variant (Default per §11.1 is Dark Mode — Light kept as variant per project decision). Tokens map to design.md §11.1 (Colors), §11.2 (Typography), §11.3 (Spacing), §11.4 (Radius), §11.5 (Shadow), §14.1 (Focus). ───────────────────────────────────────────────────────────────── */ :root { /* Spherity Primary Palette (§11.1) */ --color-primary-dark-blue: #023852; /* Spherity Primary — Buttons, Nav, Top-Bar */ --color-primary-dark-desat-blue: #192B38; /* Dark Mode background reference */ --color-primary-cyan: #2BFEBB; /* Focus-Ring + Accent ≤10% (§14.1) */ --color-primary-light-gray: #EEEEEE; /* Light Mode background, separators */ /* EIDA Sub-Brand Accent (§11.1 — ≤10% Fläche) */ --color-subbrand-eida: #4961A8; /* Indigo — Active-State, Top-Bar accent */ --color-subbrand-eida-soft: #EEF1F8; /* Tinted surface (derived) */ --color-subbrand-eida-border: #C9D2E7; /* Border tint (derived) */ --color-subbrand-eida-hover: #3D5290; /* Darker for hover (derived) */ /* Secondary Palette (§11.1 — semantic) */ --color-secondary-soft-red: #F96D61; /* Non-blocking warnings */ --color-secondary-strong-red: #B62549; /* Critical / Failed / Revoked */ --color-secondary-dark-gray: #A5A5A5; /* Tertiary text, disabled */ /* Aliases (kept so existing class names map to new tokens) */ --eida-teal: var(--color-subbrand-eida); --eida-teal-deep: var(--color-subbrand-eida-hover); --eida-teal-soft: var(--color-subbrand-eida-soft); --eida-teal-border: var(--color-subbrand-eida-border); --eida-navy: var(--color-primary-dark-blue); --eida-navy-soft: #1B3A57; --eida-blue: var(--color-primary-dark-blue); --eida-blue-hover: #022838; /* Neutrals (Light Mode) */ --ink: #101828; --ink-2: #1F2937; --text: #344054; --muted: #667085; --muted-2: var(--color-secondary-dark-gray); --line: var(--color-primary-light-gray); --line-2: #F2F4F7; --bg: #F9FAFB; --white: #FFFFFF; /* Status (semantic, §11.1) */ --success: #12B76A; --success-bg: #ECFDF3; --success-border: #ABEFC6; --warning: #B54708; --warning-bg: #FEF3C7; --warning-border: #FCE3A4; --danger: var(--color-secondary-strong-red); --danger-bg: #FDECEF; --danger-border: #F5C2CC; --neutral: #475467; --neutral-bg: #F2F4F7; /* Shadows (§11.5) */ --shadow-sm: 0 1px 2px rgba(2,56,82,0.05); --shadow-md: 0 4px 8px -2px rgba(2,56,82,0.07), 0 2px 4px -2px rgba(2,56,82,0.04); --shadow-lg: 0 12px 24px -8px rgba(2,56,82,0.10), 0 6px 12px -6px rgba(2,56,82,0.06); /* Border Radius (§11.4) */ --radius-sm: 4px; --radius: 8px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 16px; --radius-full: 9999px; /* Spacing tokens (§11.3 — 4px base grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* Focus-Ring (§14.1 — verbindlich, Cyan, 2px Offset) */ --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--color-primary-cyan); } /* Focus-Ring — produktübergreifend Spherity Cyan (§14.1, §16) */ *:focus-visible { outline: none; box-shadow: var(--focus-ring); } * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [hidden] { display: none !important; } body { font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: var(--white); color: var(--ink); font-size: 14px; line-height: 1.5; display: flex; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } svg { width: 16px; height: 16px; flex-shrink: 0; } /* ═════ UUI Icon System (design.md §11.7 — Untitled UI als Single Source) CSS-Mask-Pattern: Icon-SVG wird als Mask geladen, Farbe per currentColor. Verwendung: Größen: ui-icon (default 16) · ui-icon-sm (12) · ui-icon-md (20) · ui-icon-lg (24) Stroke 1.5px (UUI-Default) ist in den SVG-Dateien selbst gesetzt. */ .ui-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: text-bottom; /* Fallback: SVG als Background-Image, native Strichfarbe. */ background: var(--ui-icon, none) center / contain no-repeat; } /* Wo Browser CSS-Mask unterstützen, ersetzen wir den BG durch eine Maske die mit currentColor eingefärbt wird (Color-Inheritance §11.7). */ @supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) { .ui-icon { background: none; background-color: currentColor; -webkit-mask-image: var(--ui-icon, none); mask-image: var(--ui-icon, none); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; } } .ui-icon--sm { width: 12px; height: 12px; } .ui-icon--md { width: 20px; height: 20px; } .ui-icon--lg { width: 24px; height: 24px; } .ui-icon--xl { width: 32px; height: 32px; } /* Icon-Map — design.md §11.7 Semantik-Defaults + EIDA-spezifische Konzepte */ .ui-icon--dashboard { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V8.4C3 8.96005 3 9.24008 3.10899 9.45399C3.20487 9.64215 3.35785 9.79513 3.54601 9.89101C3.75992 10 4.03995 10 4.6 10H8.4C8.96005 10 9.24008 10 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C10 9.24008 10 8.96005 10 8.4V4.6C10 4.03995 10 3.75992 9.89101 3.54601C9.79513 3.35785 9.64215 3.20487 9.45399 3.10899C9.24008 3 8.96005 3 8.4 3Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M19.4 3H15.6C15.0399 3 14.7599 3 14.546 3.10899C14.3578 3.20487 14.2049 3.35785 14.109 3.54601C14 3.75992 14 4.03995 14 4.6V8.4C14 8.96005 14 9.24008 14.109 9.45399C14.2049 9.64215 14.3578 9.79513 14.546 9.89101C14.7599 10 15.0399 10 15.6 10H19.4C19.9601 10 20.2401 10 20.454 9.89101C20.6422 9.79513 20.7951 9.64215 20.891 9.45399C21 9.24008 21 8.96005 21 8.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M19.4 14H15.6C15.0399 14 14.7599 14 14.546 14.109C14.3578 14.2049 14.2049 14.3578 14.109 14.546C14 14.7599 14 15.0399 14 15.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V15.6C21 15.0399 21 14.7599 20.891 14.546C20.7951 14.3578 20.6422 14.2049 20.454 14.109C20.2401 14 19.9601 14 19.4 14Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M8.4 14H4.6C4.03995 14 3.75992 14 3.54601 14.109C3.35785 14.2049 3.20487 14.3578 3.10899 14.546C3 14.7599 3 15.0399 3 15.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V15.6C10 15.0399 10 14.7599 9.89101 14.546C9.79513 14.3578 9.64215 14.2049 9.45399 14.109C9.24008 14 8.96005 14 8.4 14Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--credentials { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20 12.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H12M14 11H8M10 15H8M16 7H8M14.5 19L16.5 21L21 16.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--messaging { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M6.09436 11.2288C6.03221 10.8282 5.99996 10.4179 5.99996 10C5.99996 5.58172 9.60525 2 14.0526 2C18.4999 2 22.1052 5.58172 22.1052 10C22.1052 10.9981 21.9213 11.9535 21.5852 12.8345C21.5154 13.0175 21.4804 13.109 21.4646 13.1804C21.4489 13.2512 21.4428 13.301 21.4411 13.3735C21.4394 13.4466 21.4493 13.5272 21.4692 13.6883L21.8717 16.9585C21.9153 17.3125 21.9371 17.4895 21.8782 17.6182C21.8266 17.731 21.735 17.8205 21.6211 17.8695C21.4911 17.9254 21.3146 17.8995 20.9617 17.8478L17.7765 17.3809C17.6101 17.3565 17.527 17.3443 17.4512 17.3448C17.3763 17.3452 17.3245 17.3507 17.2511 17.3661C17.177 17.3817 17.0823 17.4172 16.893 17.4881C16.0097 17.819 15.0524 18 14.0526 18C13.6344 18 13.2237 17.9683 12.8227 17.9073M7.63158 22C10.5965 22 13 19.5376 13 16.5C13 13.4624 10.5965 11 7.63158 11C4.66668 11 2.26316 13.4624 2.26316 16.5C2.26316 17.1106 2.36028 17.6979 2.53955 18.2467C2.61533 18.4787 2.65322 18.5947 2.66566 18.6739C2.67864 18.7567 2.68091 18.8031 2.67608 18.8867C2.67145 18.9668 2.65141 19.0573 2.61134 19.2383L2 22L4.9948 21.591C5.15827 21.5687 5.24 21.5575 5.31137 21.558C5.38652 21.5585 5.42641 21.5626 5.50011 21.5773C5.5701 21.5912 5.67416 21.6279 5.88227 21.7014C6.43059 21.8949 7.01911 22 7.63158 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--address-book { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4.00002 21.8174C4.6026 22 5.41649 22 6.8 22H17.2C18.5835 22 19.3974 22 20 21.8174M4.00002 21.8174C3.87082 21.7783 3.75133 21.7308 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H17.2C18.8802 2 19.7202 2 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C22 4.27976 22 5.11984 22 6.8V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C20.2487 21.7308 20.1292 21.7783 20 21.8174M4.00002 21.8174C4.00035 21.0081 4.00521 20.5799 4.07686 20.2196C4.39249 18.6329 5.63288 17.3925 7.21964 17.0769C7.60603 17 8.07069 17 9 17H15C15.9293 17 16.394 17 16.7804 17.0769C18.3671 17.3925 19.6075 18.6329 19.9231 20.2196C19.9948 20.5799 19.9996 21.0081 20 21.8174M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--reset { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 5.12537C19.1213 6.67091 20.5 9.17444 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5H11.5M7 18.8746C4.87867 17.329 3.5 14.8255 3.5 12C3.5 7.30555 7.30558 3.49998 12 3.49998H12.5M13 22.4L11 20.4L13 18.4M11 5.59998L13 3.59998L11 1.59998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--support { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.13626 9.13628L4.92893 4.92896M4.92893 19.0711L9.16797 14.8321M14.8611 14.8638L19.0684 19.0711M19.0684 4.92896L14.8287 9.16862M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--info { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--logout { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 7L21 12L16 17M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--close { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18 6L6 18M6 6L18 18' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--send { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M10.4995 13.5002L20.9995 3.00017M10.6271 13.8282L13.2552 20.5862C13.4867 21.1816 13.6025 21.4793 13.7693 21.5662C13.9139 21.6415 14.0862 21.6416 14.2308 21.5664C14.3977 21.4797 14.5139 21.1822 14.7461 20.5871L21.3364 3.69937C21.5461 3.16219 21.6509 2.8936 21.5935 2.72197C21.5437 2.57292 21.4268 2.45596 21.2777 2.40616C21.1061 2.34883 20.8375 2.45364 20.3003 2.66327L3.41258 9.25361C2.8175 9.48584 2.51997 9.60195 2.43326 9.76886C2.35809 9.91354 2.35819 10.0858 2.43353 10.2304C2.52043 10.3972 2.81811 10.513 3.41345 10.7445L10.1715 13.3726C10.2923 13.4196 10.3527 13.4431 10.4036 13.4794C10.4487 13.5115 10.4881 13.551 10.5203 13.5961C10.5566 13.647 10.5801 13.7074 10.6271 13.8282Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--mail { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21.5 18L14.8571 12M9.14286 12L2.50003 18M2 7L10.1649 12.7154C10.8261 13.1783 11.1567 13.4097 11.5163 13.4993C11.8339 13.5785 12.1661 13.5785 12.4837 13.4993C12.8433 13.4097 13.1739 13.1783 13.8351 12.7154L22 7M6.8 20H17.2C18.8802 20 19.7202 20 20.362 19.673C20.9265 19.3854 21.3854 18.9265 21.673 18.362C22 17.7202 22 16.8802 22 15.2V8.8C22 7.11984 22 6.27976 21.673 5.63803C21.3854 5.07354 20.9265 4.6146 20.362 4.32698C19.7202 4 18.8802 4 17.2 4H6.8C5.11984 4 4.27976 4 3.63803 4.32698C3.07354 4.6146 2.6146 5.07354 2.32698 5.63803C2 6.27976 2 7.11984 2 8.8V15.2C2 16.8802 2 17.7202 2.32698 18.362C2.6146 18.9265 3.07354 19.3854 3.63803 19.673C4.27976 20 5.11984 20 6.8 20Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--concepts { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 2V3M3 12H2M5.5 5.5L4.8999 4.8999M18.5 5.5L19.1002 4.8999M22 12H21M10 13.5H14M12 13.5V18.5M15.5 16.874C17.0141 15.7848 18 14.0075 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 14.0075 6.98593 15.7848 8.5 16.874V18.8C8.5 19.9201 8.5 20.4802 8.71799 20.908C8.90973 21.2843 9.21569 21.5903 9.59202 21.782C10.0198 22 10.5799 22 11.7 22H12.3C13.4201 22 13.9802 22 14.408 21.782C14.7843 21.5903 15.0903 21.2843 15.282 20.908C15.5 20.4802 15.5 19.9201 15.5 18.8V16.874Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--calendar { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--search { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--chevron-down { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M6 9L12 15L18 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--chevron-right { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9 18L15 12L9 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--chevron-left { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15 18L9 12L15 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--dots-vertical { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--check { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20 6L9 17L4 12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--plus { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 5V19M5 12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--edit { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2.87601 18.1156C2.92195 17.7021 2.94493 17.4954 3.00748 17.3022C3.06298 17.1307 3.1414 16.9676 3.24061 16.8171C3.35242 16.6475 3.49952 16.5005 3.7937 16.2063L17 3C18.1046 1.89543 19.8954 1.89543 21 3C22.1046 4.10457 22.1046 5.89543 21 7L7.7937 20.2063C7.49951 20.5005 7.35242 20.6475 7.18286 20.7594C7.03242 20.8586 6.86926 20.937 6.69782 20.9925C6.50457 21.055 6.29783 21.078 5.88434 21.124L2.49997 21.5L2.87601 18.1156Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--copy { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 15C4.06812 15 3.60218 15 3.23463 14.8478C2.74458 14.6448 2.35523 14.2554 2.15224 13.7654C2 13.3978 2 12.9319 2 12V5.2C2 4.0799 2 3.51984 2.21799 3.09202C2.40973 2.71569 2.71569 2.40973 3.09202 2.21799C3.51984 2 4.0799 2 5.2 2H12C12.9319 2 13.3978 2 13.7654 2.15224C14.2554 2.35523 14.6448 2.74458 14.8478 3.23463C15 3.60218 15 4.06812 15 5M12.2 22H18.8C19.9201 22 20.4802 22 20.908 21.782C21.2843 21.5903 21.5903 21.2843 21.782 20.908C22 20.4802 22 19.9201 22 18.8V12.2C22 11.0799 22 10.5198 21.782 10.092C21.5903 9.71569 21.2843 9.40973 20.908 9.21799C20.4802 9 19.9201 9 18.8 9H12.2C11.0799 9 10.5198 9 10.092 9.21799C9.71569 9.40973 9.40973 9.71569 9.21799 10.092C9 10.5198 9 11.0799 9 12.2V18.8C9 19.9201 9 20.4802 9.21799 20.908C9.40973 21.2843 9.71569 21.5903 10.092 21.782C10.5198 22 11.0799 22 12.2 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--download { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 16.2422C2.79401 15.435 2 14.0602 2 12.5C2 10.1564 3.79151 8.23129 6.07974 8.01937C6.54781 5.17213 9.02024 3 12 3C14.9798 3 17.4522 5.17213 17.9203 8.01937C20.2085 8.23129 22 10.1564 22 12.5C22 14.0602 21.206 15.435 20 16.2422M16 17L12 21L8 17M12 21V12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--external { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15 3H21L21 9M21 3L13 11M10 5H7.8C6.11984 5 5.27976 5 4.63803 5.32698C4.07354 5.6146 3.6146 6.07354 3.32698 6.63803C3 7.27976 3 8.11984 3 9.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H14.2C15.8802 21 16.7202 21 17.362 20.673C17.9265 20.3854 18.3854 19.9265 18.673 19.362C19 18.7202 19 17.8802 19 16.2V14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--eye { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M2.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--trash { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--alert-triangle { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.9998 8.99999V13M11.9998 17H12.0098M10.6151 3.89171L2.39019 18.0983C1.93398 18.8863 1.70588 19.2803 1.73959 19.6037C1.769 19.8857 1.91677 20.142 2.14613 20.3088C2.40908 20.5 2.86435 20.5 3.77487 20.5H20.2246C21.1352 20.5 21.5904 20.5 21.8534 20.3088C22.0827 20.142 22.2305 19.8857 22.2599 19.6037C22.2936 19.2803 22.0655 18.8863 21.6093 18.0983L13.3844 3.89171C12.9299 3.10654 12.7026 2.71396 12.4061 2.58211C12.1474 2.4671 11.8521 2.4671 11.5935 2.58211C11.2969 2.71396 11.0696 3.10655 10.6151 3.89171Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--alert-octagon { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 8V12M12 16H12.01M2 8.52274V15.4773C2 15.7218 2 15.8441 2.02763 15.9592C2.05213 16.0613 2.09253 16.1588 2.14736 16.2483C2.2092 16.3492 2.29568 16.4357 2.46863 16.6086L7.39137 21.5314C7.56432 21.7043 7.6508 21.7908 7.75172 21.8526C7.84119 21.9075 7.93873 21.9479 8.04077 21.9724C8.15586 22 8.27815 22 8.52274 22H15.4773C15.7218 22 15.8441 22 15.9592 21.9724C16.0613 21.9479 16.1588 21.9075 16.2483 21.8526C16.3492 21.7908 16.4357 21.7043 16.6086 21.5314L21.5314 16.6086C21.7043 16.4357 21.7908 16.3492 21.8526 16.2483C21.9075 16.1588 21.9479 16.0613 21.9724 15.9592C22 15.8441 22 15.7218 22 15.4773V8.52274C22 8.27815 22 8.15586 21.9724 8.04077C21.9479 7.93873 21.9075 7.84119 21.8526 7.75172C21.7908 7.6508 21.7043 7.56432 21.5314 7.39137L16.6086 2.46863C16.4357 2.29568 16.3492 2.2092 16.2483 2.14736C16.1588 2.09253 16.0613 2.05213 15.9592 2.02763C15.8441 2 15.7218 2 15.4773 2H8.52274C8.27815 2 8.15586 2 8.04077 2.02763C7.93873 2.05213 7.84119 2.09253 7.75172 2.14736C7.6508 2.2092 7.56432 2.29568 7.39137 2.46863L2.46863 7.39137C2.29568 7.56432 2.2092 7.6508 2.14736 7.75172C2.09253 7.84119 2.05213 7.93873 2.02763 8.04077C2 8.15586 2 8.27815 2 8.52274Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--shield-tick { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9 11.4999L11 13.4999L15.5 8.99987M20 11.9999C20 16.9083 14.646 20.4783 12.698 21.6147C12.4766 21.7439 12.3659 21.8085 12.2097 21.842C12.0884 21.868 11.9116 21.868 11.7903 21.842C11.6341 21.8085 11.5234 21.7439 11.302 21.6147C9.35396 20.4783 4 16.9083 4 11.9999V7.21747C4 6.41796 4 6.0182 4.13076 5.67457C4.24627 5.37101 4.43398 5.10015 4.67766 4.8854C4.9535 4.64231 5.3278 4.50195 6.0764 4.22122L11.4382 2.21054C11.6461 2.13258 11.75 2.0936 11.857 2.07815C11.9518 2.06444 12.0482 2.06444 12.143 2.07815C12.25 2.0936 12.3539 2.13258 12.5618 2.21054L17.9236 4.22122C18.6722 4.50195 19.0465 4.64231 19.3223 4.8854C19.566 5.10015 19.7537 5.37101 19.8692 5.67457C20 6.0182 20 6.41796 20 7.21747V11.9999Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--verified { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9 12L11 14L15.5 9.5M7.33377 3.8187C8.1376 3.75455 8.90071 3.43846 9.51447 2.91542C10.9467 1.69486 13.0533 1.69486 14.4855 2.91542C15.0993 3.43846 15.8624 3.75455 16.6662 3.8187C18.5421 3.96839 20.0316 5.45794 20.1813 7.33377C20.2455 8.1376 20.5615 8.90071 21.0846 9.51447C22.3051 10.9467 22.3051 13.0533 21.0846 14.4855C20.5615 15.0993 20.2455 15.8624 20.1813 16.6662C20.0316 18.5421 18.5421 20.0316 16.6662 20.1813C15.8624 20.2455 15.0993 20.5615 14.4855 21.0846C13.0533 22.3051 10.9467 22.3051 9.51447 21.0846C8.90071 20.5615 8.1376 20.2455 7.33377 20.1813C5.45794 20.0316 3.96839 18.5421 3.8187 16.6662C3.75455 15.8624 3.43846 15.0993 2.91542 14.4855C1.69486 13.0533 1.69486 10.9467 2.91542 9.51447C3.43846 8.90071 3.75455 8.1376 3.8187 7.33377C3.96839 5.45794 5.45794 3.96839 7.33377 3.8187Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--clock { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M22.7 13.5L20.7005 11.5L18.7 13.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C15.3019 3 18.1885 4.77814 19.7545 7.42909M12 7V12L15 14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--file { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14 2.26946V6.4C14 6.96005 14 7.24008 14.109 7.45399C14.2049 7.64215 14.3578 7.79513 14.546 7.89101C14.7599 8 15.0399 8 15.6 8H19.7305M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--truck { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14 7H16.3373C16.5818 7 16.7041 7 16.8192 7.02763C16.9213 7.05213 17.0188 7.09253 17.1083 7.14736C17.2092 7.2092 17.2957 7.29568 17.4686 7.46863L21.5314 11.5314C21.7043 11.7043 21.7908 11.7908 21.8526 11.8917C21.9075 11.9812 21.9479 12.0787 21.9724 12.1808C22 12.2959 22 12.4182 22 12.6627V15.5C22 15.9659 22 16.1989 21.9239 16.3827C21.8224 16.6277 21.6277 16.8224 21.3827 16.9239C21.1989 17 20.9659 17 20.5 17M15.5 17H14M14 17V7.2C14 6.0799 14 5.51984 13.782 5.09202C13.5903 4.71569 13.2843 4.40973 12.908 4.21799C12.4802 4 11.9201 4 10.8 4H5.2C4.0799 4 3.51984 4 3.09202 4.21799C2.71569 4.40973 2.40973 4.71569 2.21799 5.09202C2 5.51984 2 6.0799 2 7.2V15C2 16.1046 2.89543 17 4 17M14 17H10M10 17C10 18.6569 8.65685 20 7 20C5.34315 20 4 18.6569 4 17M10 17C10 15.3431 8.65685 14 7 14C5.34315 14 4 15.3431 4 17M20.5 17.5C20.5 18.8807 19.3807 20 18 20C16.6193 20 15.5 18.8807 15.5 17.5C15.5 16.1193 16.6193 15 18 15C19.3807 15 20.5 16.1193 20.5 17.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--users { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--award { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.87625 13.0953L4.70122 7.87653C4.44132 7.55166 4.31138 7.38922 4.21897 7.20834C4.13698 7.04787 4.07706 6.87705 4.04084 6.70052C4 6.50155 4 6.29354 4 5.8775V5.2C4 4.0799 4 3.51984 4.21799 3.09202C4.40973 2.71569 4.71569 2.40973 5.09202 2.21799C5.51984 2 6.0799 2 7.2 2H16.8C17.9201 2 18.4802 2 18.908 2.21799C19.2843 2.40973 19.5903 2.71569 19.782 3.09202C20 3.51984 20 4.0799 20 5.2V5.8775C20 6.29354 20 6.50155 19.9592 6.70052C19.9229 6.87705 19.863 7.04787 19.781 7.20834C19.6886 7.38922 19.5587 7.55166 19.2988 7.87652L15.1238 13.0953M5.00005 3L12.0001 12L19 3M15.5355 13.4645C17.4882 15.4171 17.4882 18.5829 15.5355 20.5355C13.5829 22.4882 10.4171 22.4882 8.46446 20.5355C6.51185 18.5829 6.51185 15.4171 8.46446 13.4645C10.4171 11.5118 13.5829 11.5118 15.5355 13.4645Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--wallet { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 7.99983V4.50048C16 3.66874 16 3.25287 15.8248 2.9973C15.6717 2.77401 15.4346 2.62232 15.1678 2.57691C14.8623 2.52493 14.4847 2.6992 13.7295 3.04775L4.85901 7.14182C4.18551 7.45267 3.84875 7.6081 3.60211 7.84915C3.38406 8.06225 3.21762 8.32238 3.1155 8.60966C3 8.93462 3 9.30551 3 10.0473V14.9998M16.5 14.4998H16.51M3 11.1998L3 17.7998C3 18.9199 3 19.48 3.21799 19.9078C3.40973 20.2841 3.71569 20.5901 4.09202 20.7818C4.51984 20.9998 5.07989 20.9998 6.2 20.9998H17.8C18.9201 20.9998 19.4802 20.9998 19.908 20.7818C20.2843 20.5901 20.5903 20.2841 20.782 19.9078C21 19.48 21 18.9199 21 17.7998V11.1998C21 10.0797 21 9.51967 20.782 9.09185C20.5903 8.71552 20.2843 8.40956 19.908 8.21782C19.4802 7.99983 18.9201 7.99983 17.8 7.99983L6.2 7.99983C5.0799 7.99983 4.51984 7.99983 4.09202 8.21781C3.7157 8.40956 3.40973 8.71552 3.21799 9.09185C3 9.51967 3 10.0797 3 11.1998ZM17 14.4998C17 14.776 16.7761 14.9998 16.5 14.9998C16.2239 14.9998 16 14.776 16 14.4998C16 14.2237 16.2239 13.9998 16.5 13.9998C16.7761 13.9998 17 14.2237 17 14.4998Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--credit-card { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M22 10H2M11 14H6M2 8.2L2 15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.07989 19 5.2 19L18.8 19C19.9201 19 20.4802 19 20.908 18.782C21.2843 18.5903 21.5903 18.2843 21.782 17.908C22 17.4802 22 16.9201 22 15.8V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.7157 21.2843 5.40974 20.908 5.21799C20.4802 5 19.9201 5 18.8 5L5.2 5C4.0799 5 3.51984 5 3.09202 5.21799C2.7157 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.07989 2 8.2Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--qr { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 12H12V17M3.01 12H3M8.01 17H8M12.01 21H12M21.01 12H21M3 17H4.5M15.5 12H17.5M3 21H8M12 2V8M17.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H17.6C17.0399 16 16.7599 16 16.546 16.109C16.3578 16.2049 16.2049 16.3578 16.109 16.546C16 16.7599 16 17.0399 16 17.6V19.4C16 19.9601 16 20.2401 16.109 20.454C16.2049 20.6422 16.3578 20.7951 16.546 20.891C16.7599 21 17.0399 21 17.6 21ZM17.6 8H19.4C19.9601 8 20.2401 8 20.454 7.89101C20.6422 7.79513 20.7951 7.64215 20.891 7.45399C21 7.24008 21 6.96005 21 6.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3H17.6C17.0399 3 16.7599 3 16.546 3.10899C16.3578 3.20487 16.2049 3.35785 16.109 3.54601C16 3.75992 16 4.03995 16 4.6V6.4C16 6.96005 16 7.24008 16.109 7.45399C16.2049 7.64215 16.3578 7.79513 16.546 7.89101C16.7599 8 17.0399 8 17.6 8ZM4.6 8H6.4C6.96005 8 7.24008 8 7.45399 7.89101C7.64215 7.79513 7.79513 7.64215 7.89101 7.45399C8 7.24008 8 6.96005 8 6.4V4.6C8 4.03995 8 3.75992 7.89101 3.54601C7.79513 3.35785 7.64215 3.20487 7.45399 3.10899C7.24008 3 6.96005 3 6.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V6.4C3 6.96005 3 7.24008 3.10899 7.45399C3.20487 7.64215 3.35785 7.79513 3.54601 7.89101C3.75992 8 4.03995 8 4.6 8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--key { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 8.99994C17 8.48812 16.8047 7.9763 16.4142 7.58579C16.0237 7.19526 15.5118 7 15 7M15 15C18.3137 15 21 12.3137 21 9C21 5.68629 18.3137 3 15 3C11.6863 3 9 5.68629 9 9C9 9.27368 9.01832 9.54308 9.05381 9.80704C9.11218 10.2412 9.14136 10.4583 9.12172 10.5956C9.10125 10.7387 9.0752 10.8157 9.00469 10.9419C8.937 11.063 8.81771 11.1823 8.57913 11.4209L3.46863 16.5314C3.29568 16.7043 3.2092 16.7908 3.14736 16.8917C3.09253 16.9812 3.05213 17.0787 3.02763 17.1808C3 17.2959 3 17.4182 3 17.6627V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H7V19H9V17H11L12.5791 15.4209C12.8177 15.1823 12.937 15.063 13.0581 14.9953C13.1843 14.9248 13.2613 14.8987 13.4044 14.8783C13.5417 14.8586 13.7588 14.8878 14.193 14.9462C14.4569 14.9817 14.7263 15 15 15Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--lock { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10M12 14.5V16.5M8.8 21H15.2C16.8802 21 17.7202 21 18.362 20.673C18.9265 20.3854 19.3854 19.9265 19.673 19.362C20 18.7202 20 17.8802 20 16.2V14.8C20 13.1198 20 12.2798 19.673 11.638C19.3854 11.0735 18.9265 10.6146 18.362 10.327C17.7202 10 16.8802 10 15.2 10H8.8C7.11984 10 6.27976 10 5.63803 10.327C5.07354 10.6146 4.6146 11.0735 4.32698 11.638C4 12.2798 4 13.1198 4 14.8V16.2C4 17.8802 4 18.7202 4.32698 19.362C4.6146 19.9265 5.07354 20.3854 5.63803 20.673C6.27976 21 7.11984 21 8.8 21Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--fingerprint { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 10V14M7.44712 3.42103C8.73941 2.52503 10.3084 2 12 2C16.4183 2 20 5.58172 20 10V11.2367M4.41632 7.44607C4.14633 8.24809 4 9.10696 4 10V14C4 17.6349 6.42416 20.7035 9.74396 21.6775M19.6588 16.3187C18.9294 18.7314 17.0911 20.6626 14.7367 21.5196M14.325 6.14635C13.6464 5.7361 12.8508 5.5 12 5.5C9.51472 5.5 7.5 7.51472 7.5 10V12.95M16.5 11.04V14C16.5 16.4853 14.4853 18.5 12 18.5C11.1514 18.5 10.3576 18.2651 9.68014 17.8567' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--globe { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22M12 2C9.49872 4.73835 8.07725 8.29203 8 12C8.07725 15.708 9.49872 19.2616 12 22M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22M2.50002 9H21.5M2.5 15H21.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--building { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 21H21M6 18V9.99998M10 18V9.99998M14 18V9.99998M18 18V9.99998M20 6.99998L12.424 2.26498C12.2702 2.16884 12.1933 2.12077 12.1108 2.10203C12.0379 2.08546 11.9621 2.08546 11.8892 2.10203C11.8067 2.12077 11.7298 2.16884 11.576 2.26498L4 6.99998H20Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--bank { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 9.00002V17M9.5 9.00002V17M14.5 9.00002V17M19 9.00002V17M3 18.6L3 19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7952 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7952 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.04 21 17.7599 20.891 17.546C20.7951 17.3579 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H4.6C4.03995 17 3.75992 17 3.54601 17.109C3.35785 17.2049 3.20487 17.3579 3.10899 17.546C3 17.7599 3 18.04 3 18.6ZM11.6529 3.07715L4.25291 4.7216C3.80585 4.82094 3.58232 4.87062 3.41546 4.99082C3.26829 5.09685 3.15273 5.24092 3.08115 5.40759C3 5.59654 3 5.82553 3 6.28349L3 7.40002C3 7.96007 3 8.2401 3.10899 8.45401C3.20487 8.64217 3.35785 8.79515 3.54601 8.89103C3.75992 9.00002 4.03995 9.00002 4.6 9.00002H19.4C19.9601 9.00002 20.2401 9.00002 20.454 8.89103C20.6422 8.79515 20.7951 8.64217 20.891 8.45401C21 8.2401 21 7.96007 21 7.40002V6.2835C21 5.82553 21 5.59655 20.9188 5.40759C20.8473 5.24092 20.7317 5.09685 20.5845 4.99082C20.4177 4.87062 20.1942 4.82094 19.7471 4.7216L12.3471 3.07715C12.2176 3.04837 12.1528 3.03398 12.0874 3.02824C12.0292 3.02314 11.9708 3.02314 11.9126 3.02824C11.8472 3.03398 11.7824 3.04837 11.6529 3.07715Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--dataflow { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 4V15.2C12 16.8802 12 17.7202 12.327 18.362C12.6146 18.9265 13.0735 19.3854 13.638 19.673C14.2798 20 15.1198 20 16.8 20H17M17 20C17 21.1046 17.8954 22 19 22C20.1046 22 21 21.1046 21 20C21 18.8954 20.1046 18 19 18C17.8954 18 17 18.8954 17 20ZM7 4L17 4M7 4C7 5.10457 6.10457 6 5 6C3.89543 6 3 5.10457 3 4C3 2.89543 3.89543 2 5 2C6.10457 2 7 2.89543 7 4ZM17 4C17 5.10457 17.8954 6 19 6C20.1046 6 21 5.10457 21 4C21 2.89543 20.1046 2 19 2C17.8954 2 17 2.89543 17 4ZM12 12H17M17 12C17 13.1046 17.8954 14 19 14C20.1046 14 21 13.1046 21 12C21 10.8954 20.1046 10 19 10C17.8954 10 17 10.8954 17 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--graduation { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 10.0001V16.0112C5 16.3702 5 16.5496 5.05465 16.7081C5.10299 16.8482 5.18187 16.9759 5.28558 17.0817C5.40287 17.2015 5.5634 17.2818 5.88446 17.4423L11.2845 20.1423C11.5468 20.2735 11.678 20.3391 11.8156 20.3649C11.9375 20.3877 12.0625 20.3877 12.1844 20.3649C12.322 20.3391 12.4532 20.2735 12.7155 20.1423L18.1155 17.4423C18.4366 17.2818 18.5971 17.2015 18.7144 17.0817C18.8181 16.9759 18.897 16.8482 18.9453 16.7081C19 16.5496 19 16.3702 19 16.0112V10.0001M2 8.50006L11.6422 3.67895C11.7734 3.61336 11.839 3.58056 11.9078 3.56766C11.9687 3.55622 12.0313 3.55622 12.0922 3.56766C12.161 3.58056 12.2266 3.61336 12.3578 3.67895L22 8.50006L12.3578 13.3212C12.2266 13.3868 12.161 13.4196 12.0922 13.4325C12.0313 13.4439 11.9687 13.4439 11.9078 13.4325C11.839 13.4196 11.7734 13.3868 11.6422 13.3212L2 8.50006Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--book { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 9.4C12 7.15979 12 6.03968 12.436 5.18404C12.8195 4.43139 13.4314 3.81947 14.184 3.43597C15.0397 3 16.1598 3 18.4 3H18.8C19.9201 3 20.4802 3 20.908 3.21799C21.2843 3.40973 21.5903 3.71569 21.782 4.09202C22 4.51984 22 5.07989 22 6.2V14.8C22 15.9201 22 16.4802 21.782 16.908C21.5903 17.2843 21.2843 17.5903 20.908 17.782C20.4802 18 19.9201 18 18.8 18H17.4252C16.1729 18 15.5467 18 14.9784 18.1726C14.4752 18.3254 14.0071 18.5759 13.6009 18.9098C13.142 19.287 12.7947 19.808 12.1001 20.8499L12 21L11.8999 20.8499C11.2053 19.808 10.858 19.287 10.3991 18.9098C9.99286 18.5759 9.52476 18.3254 9.02161 18.1726C8.45325 18 7.82711 18 6.57482 18H5.2C4.07989 18 3.51984 18 3.09202 17.782C2.71569 17.5903 2.40973 17.2843 2.21799 16.908C2 16.4802 2 15.9201 2 14.8V6.2C2 5.07989 2 4.51984 2.21799 4.09202C2.40973 3.71569 2.71569 3.40973 3.09202 3.21799C3.51984 3 4.07989 3 5.2 3H5.6C7.84021 3 8.96031 3 9.81596 3.43597C10.5686 3.81947 11.1805 4.43139 11.564 5.18404C12 6.03968 12 7.15979 12 9.4ZM12 21V9.4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--phone { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 17.5H12.01M8.2 22H15.8C16.9201 22 17.4802 22 17.908 21.782C18.2843 21.5903 18.5903 21.2843 18.782 20.908C19 20.4802 19 19.9201 19 18.8V5.2C19 4.07989 19 3.51984 18.782 3.09202C18.5903 2.71569 18.2843 2.40973 17.908 2.21799C17.4802 2 16.9201 2 15.8 2H8.2C7.0799 2 6.51984 2 6.09202 2.21799C5.71569 2.40973 5.40973 2.71569 5.21799 3.09202C5 3.51984 5 4.0799 5 5.2V18.8C5 19.9201 5 20.4802 5.21799 20.908C5.40973 21.2843 5.71569 21.5903 6.09202 21.782C6.51984 22 7.07989 22 8.2 22ZM12.5 17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5C11.5 17.2239 11.7239 17 12 17C12.2761 17 12.5 17.2239 12.5 17.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--user-plus { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M19 21V15M16 18H22M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--zap { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M13 2L4.09344 12.6879C3.74463 13.1064 3.57023 13.3157 3.56756 13.4925C3.56524 13.6461 3.63372 13.7923 3.75324 13.8889C3.89073 14 4.16316 14 4.70802 14H12L11 22L19.9065 11.3121C20.2553 10.8936 20.4297 10.6843 20.4324 10.5075C20.4347 10.3539 20.3663 10.2077 20.2467 10.1111C20.1092 10 19.8368 10 19.292 10H12L13 2Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--cube { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M20.5 16H8M8 16V3.5M8 16L3.5 20.5M3.5 8H16M16 8V20.5M16 8L20.5 3.5M21 15.3373V3.8C21 3.51997 21 3.37996 20.9455 3.273C20.8976 3.17892 20.8211 3.10243 20.727 3.0545C20.62 3 20.48 3 20.2 3H8.66274C8.41815 3 8.29586 3 8.18077 3.02763C8.07873 3.05213 7.98119 3.09253 7.89172 3.14736C7.7908 3.2092 7.70432 3.29568 7.53137 3.46863L3.46863 7.53137C3.29568 7.70432 3.2092 7.7908 3.14736 7.89172C3.09253 7.98119 3.05213 8.07873 3.02763 8.18077C3 8.29586 3 8.41815 3 8.66274V20.2C3 20.48 3 20.62 3.0545 20.727C3.10243 20.8211 3.17892 20.8976 3.273 20.9455C3.37996 21 3.51997 21 3.8 21H15.3373C15.5818 21 15.7041 21 15.8192 20.9724C15.9213 20.9479 16.0188 20.9075 16.1083 20.8526C16.2092 20.7908 16.2957 20.7043 16.4686 20.5314L20.5314 16.4686C20.7043 16.2957 20.7908 16.2092 20.8526 16.1083C20.9075 16.0188 20.9479 15.9213 20.9724 15.8192C21 15.7041 21 15.5818 21 15.3373Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--target { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 8V5L19 2L20 4L22 5L19 8H16ZM16 8L12 11.9999M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--chevron-up { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M18 15L12 9L6 15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--settings { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.3951 19.3711L9.97955 20.6856C10.1533 21.0768 10.4368 21.4093 10.7958 21.6426C11.1547 21.8759 11.5737 22.0001 12.0018 22C12.4299 22.0001 12.8488 21.8759 13.2078 21.6426C13.5667 21.4093 13.8503 21.0768 14.024 20.6856L14.6084 19.3711C14.8165 18.9047 15.1664 18.5159 15.6084 18.26C16.0532 18.0034 16.5678 17.8941 17.0784 17.9478L18.5084 18.1C18.9341 18.145 19.3637 18.0656 19.7451 17.8713C20.1265 17.6771 20.4434 17.3763 20.6573 17.0056C20.8715 16.635 20.9735 16.2103 20.9511 15.7829C20.9286 15.3555 20.7825 14.9438 20.5307 14.5978L19.684 13.4344C19.3825 13.0171 19.2214 12.5148 19.224 12C19.2239 11.4866 19.3865 10.9864 19.6884 10.5711L20.5351 9.40778C20.787 9.06175 20.933 8.65007 20.9555 8.22267C20.978 7.79528 20.8759 7.37054 20.6618 7C20.4479 6.62923 20.131 6.32849 19.7496 6.13423C19.3681 5.93997 18.9386 5.86053 18.5129 5.90556L17.0829 6.05778C16.5722 6.11141 16.0577 6.00212 15.6129 5.74556C15.17 5.48825 14.82 5.09736 14.6129 4.62889L14.024 3.31444C13.8503 2.92317 13.5667 2.59072 13.2078 2.3574C12.8488 2.12408 12.4299 1.99993 12.0018 2C11.5737 1.99993 11.1547 2.12408 10.7958 2.3574C10.4368 2.59072 10.1533 2.92317 9.97955 3.31444L9.3951 4.62889C9.18803 5.09736 8.83798 5.48825 8.3951 5.74556C7.95032 6.00212 7.43577 6.11141 6.9251 6.05778L5.49066 5.90556C5.06499 5.86053 4.6354 5.93997 4.25397 6.13423C3.87255 6.32849 3.55567 6.62923 3.34177 7C3.12759 7.37054 3.02555 7.79528 3.04804 8.22267C3.07052 8.65007 3.21656 9.06175 3.46844 9.40778L4.3151 10.5711C4.61704 10.9864 4.77964 11.4866 4.77955 12C4.77964 12.5134 4.61704 13.0137 4.3151 13.4289L3.46844 14.5922C3.21656 14.9382 3.07052 15.3499 3.04804 15.7773C3.02555 16.2047 3.12759 16.6295 3.34177 17C3.55589 17.3706 3.8728 17.6712 4.25417 17.8654C4.63554 18.0596 5.06502 18.1392 5.49066 18.0944L6.92066 17.9422C7.43133 17.8886 7.94587 17.9979 8.39066 18.2544C8.83519 18.511 9.18687 18.902 9.3951 19.3711Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12 15C13.6568 15 15 13.6569 15 12C15 10.3431 13.6568 9 12 9C10.3431 9 8.99998 10.3431 8.99998 12C8.99998 13.6569 10.3431 15 12 15Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--lock-keyhole { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M13.7316 13.1947C13.661 12.9831 13.6257 12.8772 13.6276 12.7907C13.6295 12.6996 13.6417 12.6519 13.6836 12.5711C13.7235 12.4942 13.83 12.395 14.0432 12.1967C14.6318 11.649 15 10.8675 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 10.8675 9.36818 11.649 9.95681 12.1967C10.17 12.395 10.2765 12.4942 10.3164 12.5711C10.3583 12.6519 10.3705 12.6996 10.3724 12.7907C10.3743 12.8772 10.339 12.9831 10.2684 13.1947L9.35099 15.947C9.23249 16.3025 9.17324 16.4803 9.20877 16.6218C9.23987 16.7456 9.31718 16.8529 9.42484 16.9216C9.54783 17 9.7352 17 10.1099 17H13.8901C14.2648 17 14.4522 17 14.5752 16.9216C14.6828 16.8529 14.7601 16.7456 14.7912 16.6218C14.8268 16.4803 14.7675 16.3025 14.649 15.947L13.7316 13.1947Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--message-text { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 8.5H12M7 12H15M9.68375 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V20.3355C3 20.8684 3 21.1348 3.10923 21.2716C3.20422 21.3906 3.34827 21.4599 3.50054 21.4597C3.67563 21.4595 3.88367 21.2931 4.29976 20.9602L6.68521 19.0518C7.17252 18.662 7.41617 18.4671 7.68749 18.3285C7.9282 18.2055 8.18443 18.1156 8.44921 18.0613C8.74767 18 9.0597 18 9.68375 18Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--filter { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M6 12H18M3 6H21M9 18H15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--upload { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M4 16.2422C2.79401 15.435 2 14.0602 2 12.5C2 10.1564 3.79151 8.23129 6.07974 8.01937C6.54781 5.17213 9.02024 3 12 3C14.9798 3 17.4522 5.17213 17.9203 8.01937C20.2085 8.23129 22 10.1564 22 12.5C22 14.0602 21.206 15.435 20 16.2422M16 16L12 12L8 16M12 12V21' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--arrow-right { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 12H19M12 19L19 12L12 5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--arrow-left { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19 12H5M12 5L5 12L12 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--arrow-up-right { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 17L17 7M17 17V7H7' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--check-circle { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--x-circle { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--menu { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 12H15M3 6H21M3 18H21' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--list { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 12H15M3 6H21M3 18H21' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--arrow-down { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M12 5V19M5 12L12 19L19 12' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--paperclip { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21.1525 10.8995L12.1369 19.9151C10.0866 21.9653 6.7625 21.9653 4.71225 19.9151C2.662 17.8648 2.662 14.5407 4.71225 12.4904L13.7279 3.47483C15.0947 2.108 17.3108 2.108 18.6776 3.47483C20.0444 4.84167 20.0444 7.05775 18.6776 8.42458L10.0156 17.0866C9.33213 17.7701 8.22409 17.7701 7.54068 17.0866C6.85726 16.4032 6.85726 15.2952 7.54068 14.6118L15.1421 7.01037' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--pin { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.3767 15.6163L2.71985 21.2732M11.6944 6.64181L10.1335 8.2027C10.0062 8.33003 9.94252 8.39369 9.86999 8.44427C9.80561 8.48917 9.73616 8.52634 9.66309 8.555C9.58077 8.58729 9.49249 8.60495 9.31592 8.64026L5.65145 9.37315C4.69915 9.56361 4.223 9.65884 4.00024 9.9099C3.80617 10.1286 3.71755 10.4213 3.75771 10.7109C3.8038 11.0434 4.14715 11.3867 4.83387 12.0735L11.9196 19.1592C12.6063 19.8459 12.9497 20.1893 13.2821 20.2354C13.5718 20.2755 13.8645 20.1869 14.0832 19.9928C14.3342 19.7701 14.4294 19.2939 14.6199 18.3416L15.3528 14.6771C15.3881 14.5006 15.4058 14.4123 15.4381 14.33C15.4667 14.2569 15.5039 14.1875 15.5488 14.1231C15.5994 14.0505 15.663 13.9869 15.7904 13.8596L17.3512 12.2987C17.4326 12.2173 17.4734 12.1766 17.5181 12.141C17.5578 12.1095 17.5999 12.081 17.644 12.0558C17.6936 12.0274 17.7465 12.0048 17.8523 11.9594L20.3467 10.8904C21.0744 10.5785 21.4383 10.4226 21.6035 10.1706C21.7481 9.95025 21.7998 9.68175 21.7474 9.42348C21.6875 9.12813 21.4076 8.84822 20.8478 8.28839L15.7047 3.14526C15.1448 2.58543 14.8649 2.30552 14.5696 2.24565C14.3113 2.19329 14.0428 2.245 13.8225 2.38953C13.5705 2.55481 13.4145 2.91866 13.1027 3.64636L12.0337 6.14071C11.9883 6.24653 11.9656 6.29944 11.9373 6.34905C11.9121 6.39313 11.8836 6.43522 11.852 6.47496C11.8165 6.51971 11.7758 6.56041 11.6944 6.64181Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--bell { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--help { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52152 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13M12 17H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--users-plus { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M19 21V15M16 18H22M12 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--share { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M15 3H21L21 9M21 3L13 11M10 5H7.8C6.11984 5 5.27976 5 4.63803 5.32698C4.07354 5.6146 3.6146 6.07354 3.32698 6.63803C3 7.27976 3 8.11984 3 9.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H14.2C15.8802 21 16.7202 21 17.362 20.673C17.9265 20.3854 18.3854 19.9265 18.673 19.362C19 18.7202 19 17.8802 19 16.2V14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--star { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.2827 3.45332C11.5131 2.98638 11.6284 2.75291 11.7848 2.67831C11.9209 2.61341 12.0791 2.61341 12.2152 2.67831C12.3717 2.75291 12.4869 2.98638 12.7174 3.45332L14.9041 7.88328C14.9721 8.02113 15.0061 8.09006 15.0558 8.14358C15.0999 8.19096 15.1527 8.22935 15.2113 8.25662C15.2776 8.28742 15.3536 8.29854 15.5057 8.32077L20.397 9.03571C20.9121 9.11099 21.1696 9.14863 21.2888 9.27444C21.3925 9.38389 21.4412 9.5343 21.4215 9.68377C21.3988 9.85558 21.2124 10.0372 20.8395 10.4004L17.3014 13.8464C17.1912 13.9538 17.136 14.0076 17.1004 14.0715C17.0689 14.128 17.0487 14.1902 17.0409 14.2545C17.0321 14.3271 17.0451 14.403 17.0711 14.5547L17.906 19.4221C17.994 19.9355 18.038 20.1922 17.9553 20.3445C17.8833 20.477 17.7554 20.57 17.6071 20.5975C17.4366 20.6291 17.2061 20.5078 16.7451 20.2654L12.3724 17.9658C12.2361 17.8942 12.168 17.8584 12.0962 17.8443C12.0327 17.8318 11.9673 17.8318 11.9038 17.8443C11.832 17.8584 11.7639 17.8942 11.6277 17.9658L7.25492 20.2654C6.79392 20.5078 6.56341 20.6291 6.39297 20.5975C6.24468 20.57 6.11672 20.477 6.04474 20.3445C5.962 20.1922 6.00603 19.9355 6.09407 19.4221L6.92889 14.5547C6.95491 14.403 6.96793 14.3271 6.95912 14.2545C6.95132 14.1902 6.93111 14.128 6.89961 14.0715C6.86402 14.0076 6.80888 13.9538 6.69859 13.8464L3.16056 10.4004C2.78766 10.0372 2.60121 9.85558 2.57853 9.68377C2.55879 9.5343 2.60755 9.38389 2.71125 9.27444C2.83044 9.14863 3.08797 9.11099 3.60304 9.03571L8.49431 8.32077C8.64642 8.29854 8.72248 8.28742 8.78872 8.25662C8.84736 8.22935 8.90016 8.19096 8.94419 8.14358C8.99391 8.09006 9.02793 8.02113 9.09597 7.88328L11.2827 3.45332Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--briefcase { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8 21V7C8 6.07003 8 5.60504 8.10222 5.22354C8.37962 4.18827 9.18827 3.37962 10.2235 3.10222C10.605 3 11.07 3 12 3C12.93 3 13.395 3 13.7765 3.10222C14.8117 3.37962 15.6204 4.18827 15.8978 5.22354C16 5.60504 16 6.07003 16 7V21M5.2 21H18.8C19.9201 21 20.4802 21 20.908 20.782C21.2843 20.5903 21.5903 20.2843 21.782 19.908C22 19.4802 22 18.9201 22 17.8V10.2C22 9.07989 22 8.51984 21.782 8.09202C21.5903 7.71569 21.2843 7.40973 20.908 7.21799C20.4802 7 19.9201 7 18.8 7H5.2C4.07989 7 3.51984 7 3.09202 7.21799C2.71569 7.40973 2.40973 7.71569 2.21799 8.09202C2 8.51984 2 9.07989 2 10.2V17.8C2 18.9201 2 19.4802 2.21799 19.908C2.40973 20.2843 2.71569 20.5903 3.09202 20.782C3.51984 21 4.0799 21 5.2 21Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--home { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M3 10.5651C3 9.9907 3 9.70352 3.07403 9.43905C3.1396 9.20478 3.24737 8.98444 3.39203 8.78886C3.55534 8.56806 3.78202 8.39175 4.23539 8.03912L11.0177 2.764C11.369 2.49075 11.5447 2.35412 11.7387 2.3016C11.9098 2.25526 12.0902 2.25526 12.2613 2.3016C12.4553 2.35412 12.631 2.49075 12.9823 2.764L19.7646 8.03913C20.218 8.39175 20.4447 8.56806 20.608 8.78886C20.7526 8.98444 20.8604 9.20478 20.926 9.43905C21 9.70352 21 9.9907 21 10.5651V17.8C21 18.9201 21 19.4801 20.782 19.908C20.5903 20.2843 20.2843 20.5903 19.908 20.782C19.4802 21 18.9201 21 17.8 21H6.2C5.07989 21 4.51984 21 4.09202 20.782C3.71569 20.5903 3.40973 20.2843 3.21799 19.908C3 19.4801 3 18.9201 3 17.8V10.5651Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--minus { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 12H19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--play { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--refresh { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M17 5.12537C19.1213 6.67091 20.5 9.17444 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5H11.5M7 18.8746C4.87867 17.329 3.5 14.8255 3.5 12C3.5 7.30555 7.30558 3.49998 12 3.49998H12.5M13 22.4L11 20.4L13 18.4M11 5.59998L13 3.59998L11 1.59998' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--save { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M7 3V6.4C7 6.96005 7 7.24008 7.10899 7.45399C7.20487 7.64215 7.35785 7.79513 7.54601 7.89101C7.75992 8 8.03995 8 8.6 8H15.4C15.9601 8 16.2401 8 16.454 7.89101C16.6422 7.79513 16.7951 7.64215 16.891 7.45399C17 7.24008 17 6.96005 17 6.4V4M17 21V14.6C17 14.0399 17 13.7599 16.891 13.546C16.7951 13.3578 16.6422 13.2049 16.454 13.109C16.2401 13 15.9601 13 15.4 13H8.6C8.03995 13 7.75992 13 7.54601 13.109C7.35785 13.2049 7.20487 13.3578 7.10899 13.546C7 13.7599 7 14.0399 7 14.6V21M21 9.32548V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H14.6745C15.1637 3 15.4083 3 15.6385 3.05526C15.8425 3.10425 16.0376 3.18506 16.2166 3.29472C16.4184 3.4184 16.5914 3.59135 16.9373 3.93726L20.0627 7.06274C20.4086 7.40865 20.5816 7.5816 20.7053 7.78343C20.8149 7.96237 20.8957 8.15746 20.9447 8.36154C21 8.59171 21 8.8363 21 9.32548Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } .ui-icon--zoom { --ui-icon: url("data:image/svg+xml;utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M21 21L16.65 16.65M11 6C13.7614 6 16 8.23858 16 11M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/svg%3E"); } /* ═════ Sidebar ═════ */ .sidebar { width: 268px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 24px 0 0; position: sticky; top: 0; height: 100vh; } .sidebar-logo { padding: 0 24px 28px; display: flex; align-items: center; } .sidebar-logo img { width: 132px; height: auto; display: block; } .nav, .sidebar-bottom { padding: 0 12px; } .sidebar-bottom { margin-top: auto; padding-bottom: 0; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--text); font-size: 14px; font-weight: 500; margin-bottom: 4px; letter-spacing: 0; transition: background .15s, color .15s; } .nav-item svg { width: 20px; height: 20px; color: var(--muted); } .nav-item .ui-icon { width: 20px; height: 20px; color: var(--muted); } .nav-item:hover { background: var(--line-2); color: var(--ink); } .nav-item:hover svg { color: var(--ink); } .nav-item.active { background: var(--bg); color: var(--ink); font-weight: 600; } .nav-item.active svg { color: var(--ink); } .nav-item.active .ui-icon { color: var(--ink); } .nav-item:hover .ui-icon { color: var(--ink); } .nav-item--reset .ui-icon { color: var(--danger); } .nav-item--reset:hover .ui-icon { color: var(--danger); } .nav-item--reset { color: var(--danger); } .nav-item--reset svg { color: var(--danger); } .nav-item--reset:hover { background: var(--danger-bg); color: var(--danger); } .nav-item--reset:hover svg { color: var(--danger); } .sidebar-user { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); margin: 12px -12px 0; } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--eida-teal), var(--eida-teal-deep)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; position: relative; flex-shrink: 0; } .avatar::after { content: ""; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--success); border: 2px solid var(--white); } .user-meta { line-height: 1.25; flex: 1; min-width: 0; } .user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .user-role { font-size: 12px; color: var(--muted); } .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius); color: var(--muted); transition: background .15s, color .15s; } .icon-btn:hover { background: var(--line-2); color: var(--ink); } .icon-btn--bordered { border: 1px solid var(--line); } .icon-btn--bordered:hover { border-color: var(--muted-2); } /* ═════ Main ═════ */ .main { flex: 1; background: var(--white); padding: 24px 32px 64px; min-width: 0; } .topbar { padding-bottom: 8px; } .breadcrumb { display: inline-flex; align-items: center; gap: 8px; background: var(--line-2); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13.5px; color: var(--muted); } .breadcrumb a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; color: var(--muted); } .breadcrumb a:hover { color: var(--ink); } .bc-sep { display: inline-flex; align-items: center; color: var(--muted-2); } .bc-sep svg { width: 14px; height: 14px; } .bc-current { color: var(--ink); font-weight: 600; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px 0 24px; } .page-title { font-size: 32px; font-weight: 700; letter-spacing: -0.4px; color: var(--ink); line-height: 1.15; margin: 0 0 6px; } .page-subtitle { font-size: 15px; color: var(--muted); margin: 0; max-width: 720px; } .page-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; border: 1px solid transparent; letter-spacing: 0; white-space: nowrap; transition: all .15s; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--eida-blue); color: var(--white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--eida-blue-hover); } .btn-ghost { background: var(--white); color: var(--ink-2); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { background: var(--line-2); } .btn-ghost .caret { width: 16px; height: 16px; opacity: .6; } /* Toolbar */ .toolbar { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 16px; } .search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 40px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; } .search:focus-within { border-color: var(--eida-teal); box-shadow: 0 0 0 3px rgba(43,208,196,0.18); } .search svg { color: var(--muted-2); } .search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--ink); font-family: inherit; } .search input::placeholder { color: var(--muted-2); } .toolbar-right { display: flex; align-items: center; gap: 8px; } .view-toggle { display: inline-flex; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; } .view-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; color: var(--muted); transition: all .15s; } .view-btn:hover { color: var(--ink); } .view-btn.active { background: var(--eida-teal-soft); color: var(--eida-navy); } /* Card */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .table-card { overflow: hidden; } .table-wrapper { overflow-x: auto; } .cred-table { width: 100%; border-collapse: collapse; font-size: 14px; } .cred-table th, .cred-table td { text-align: left; padding: 14px 20px; vertical-align: middle; } .cred-table thead th { background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; } .cred-table thead th:first-child { padding-left: 24px; } .cred-table tbody td:first-child { padding-left: 24px; } .cred-table thead th:last-child { padding-right: 24px; } .cred-table tbody td:last-child { padding-right: 24px; } .th-sortable { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .th-sortable svg { width: 14px; height: 14px; color: var(--muted-2); } .cred-table tbody tr { border-top: 1px solid var(--line); transition: background .12s; } .cred-table tbody tr:first-child { border-top: 0; } .cred-table tbody tr:hover { background: var(--bg); cursor: pointer; } .cred-cell { display: flex; align-items: center; gap: 12px; } .cred-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cred-icon svg { width: 18px; height: 18px; } .cred-icon .ui-icon { width: 18px; height: 18px; } .cred-icon--teal { background: var(--eida-teal-soft); color: var(--eida-teal-deep); } .cred-icon--blue { background: #EAF2FB; color: var(--eida-blue); } .cred-icon--green { background: var(--success-bg); color: var(--success); } .cred-icon--amber { background: #FEF6E7; color: #B54708; } .cred-icon--rose { background: var(--danger-bg); color: var(--danger); } .cred-icon--violet { background: #F4EBFF; color: #6941C6; } .cred-name { font-weight: 600; color: var(--ink); font-size: 14px; } .cred-id { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .cred-table .col-issuer { color: var(--text); } .cred-table .col-date { color: var(--text); white-space: nowrap; } .cred-table .col-actions { width: 48px; color: var(--muted-2); text-align: right; cursor: pointer; } .cred-table .col-actions svg { width: 18px; height: 18px; transition: transform .15s ease, color .15s ease; } .cred-table tbody tr:hover .col-actions svg { color: var(--eida-blue); transform: translateX(2px); } /* Address Book — partner directory table */ /* The filter row hosts text-bearing buttons ("All", "PQC Resilient", "Legacy Only") not the 34×34 icon toggles `.view-btn` was designed for. Override width + padding so the labels fit on a single line, and let the toolbar-right column expand to host them. */ .toolbar-right:has(#abFilter) { flex-shrink: 0; } #abFilter { padding: 4px; gap: 2px; } #abFilter .view-btn { width: auto; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; font-family: inherit; white-space: nowrap; cursor: pointer; } .ab-table tbody td { vertical-align: middle; } .ab-partner { display: flex; align-items: center; gap: 12px; } .ab-avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; } .ab-partner-meta { min-width: 0; } .ab-name { font-weight: 600; color: var(--ink); font-size: 14px; } .ab-contact { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .ab-did { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text); background: var(--bg); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; } .ab-count { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; border-radius: 999px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); } .view-btn.active .ab-count { background: var(--eida-teal-soft); color: var(--eida-teal-deep); border-color: var(--eida-teal-border); } .ab-empty { padding: 60px 24px; text-align: center; } .ab-empty h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 6px; } .ab-empty p { font-size: 14px; color: var(--muted); margin: 0; } /* Pills */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .pill .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; } .pill svg { width: 12px; height: 12px; } .pill-success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); } .pill-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); } .pill-danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); } .pill-neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--line); } .pill-teal { color: var(--eida-teal-deep); background: var(--eida-teal-soft); border-color: var(--eida-teal-border); } .pill-icon svg { color: currentColor; } /* Grid view */ .grid-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .grid-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; } .grid-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); cursor: pointer; } .tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .tile-head .cred-icon { width: 40px; height: 40px; } .tile-name { font-weight: 600; font-size: 15px; color: var(--ink); margin-top: 14px; } .tile-issuer { font-size: 13px; color: var(--muted); margin-top: 4px; } .tile-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); } .tile-meta-label { font-size: 11.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .tile-meta-value { font-size: 13px; color: var(--ink); font-weight: 500; } .tile-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; } /* Footer */ .footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted-2); } .footer-links { display: inline-flex; align-items: center; gap: 14px; } .footer-links a { color: var(--muted); text-decoration: none; transition: color .15s; } .footer-links a:hover { color: var(--eida-blue); text-decoration: underline; } .auth-foot a, .auth-hero-foot a { color: inherit; text-decoration: none; transition: color .15s; } .auth-foot a:hover, .auth-hero-foot a:hover { color: var(--eida-teal); text-decoration: underline; } /* ═════ Modal ═════ */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .modal[hidden] { display: none; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px); } .modal-dialog { position: relative; width: 100%; max-width: 720px; background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; max-height: calc(100vh - 48px); display: flex; flex-direction: column; animation: modalIn .2s ease-out; } @keyframes modalIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 28px 16px; border-bottom: 1px solid var(--line-2); gap: 16px; } .modal-header h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); } .modal-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); } .stepper { display: flex; align-items: center; justify-content: center; padding: 20px 28px 8px; gap: 4px; } .step { display: flex; flex-direction: column; align-items: center; gap: 8px; } .step-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); } .step-circle svg { width: 18px; height: 18px; } .step.active .step-circle { background: var(--eida-teal-soft); border-color: var(--eida-teal); color: var(--eida-teal-deep); } .step-label { font-size: 12.5px; color: var(--muted); font-weight: 500; } .step.active .step-label { color: var(--ink); font-weight: 600; } .step.done .step-circle { background: var(--eida-teal); border-color: var(--eida-teal); color: var(--white); } .step.done .step-label { color: var(--ink); font-weight: 500; } .step-line { flex: 1; height: 2px; background: var(--line); border-radius: 1px; max-width: 120px; transition: background .25s; } .step-line.done { background: var(--eida-teal); } .modal-body { padding: 16px 28px 8px; overflow-y: auto; } .modal-section { margin-bottom: 24px; } .section-title { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 4px; } .section-help { font-size: 13px; color: var(--muted); margin: 0 0 14px; } .cred-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cred-type { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; transition: all .15s; position: relative; } .cred-type:hover { border-color: var(--muted-2); } .cred-type.selected { border-color: var(--eida-teal); background: var(--eida-teal-soft); box-shadow: 0 0 0 3px rgba(43,208,196,0.16); } .cred-type .ct-icon { width: 32px; height: 32px; background: var(--bg); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; } .cred-type .ct-info { flex: 1; min-width: 0; } .cred-type .ct-name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .cred-type .ct-desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; } .cred-type .ct-tag { margin-top: 8px; } .cred-type .ct-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); flex-shrink: 0; margin-left: auto; position: relative; } .cred-type.selected .ct-radio { border-color: var(--eida-blue); background: var(--eida-blue); } .cred-type.selected .ct-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--white); } /* Issuer card */ .issuer-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); } .issuer-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--eida-navy); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .issuer-info { flex: 1; min-width: 0; } .issuer-name { font-weight: 600; font-size: 14px; color: var(--ink); } .issuer-did { font-size: 12.5px; color: var(--muted); font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .modal-footer { display: flex; justify-content: space-between; gap: 8px; padding: 16px 28px 20px; border-top: 1px solid var(--line-2); background: var(--bg); align-items: center; } .modal-foot-right { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; } /* Review step */ .review-summary { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); margin-bottom: 18px; overflow: hidden; } .review-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; } .review-row:first-child { border-top: 0; } .review-label { flex: 0 0 110px; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .review-value { flex: 1; color: var(--ink); word-break: break-word; } .review-value code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); } .review-heading { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; margin: 18px 0 10px; } .review-points { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .review-points li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); } .rp-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rp-icon svg { width: 16px; height: 16px; } .rp-name { font-size: 12.5px; font-weight: 600; color: var(--ink); } .rp-val { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Done step */ .req-done { text-align: center; padding: 32px 32px 16px; } .done-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .done-icon svg { width: 36px; height: 36px; } .done-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .done-sub { font-size: 13.5px; color: var(--muted); max-width: 360px; margin: 0 auto 18px; line-height: 1.55; } .done-summary { text-align: left; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); margin-top: 12px; overflow: hidden; } .done-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; } .done-row:first-child { border-top: 0; } .done-label { flex: 0 0 100px; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .done-value { flex: 1; color: var(--ink); } /* ═════ Auth / Register Layout ═════ */ .auth-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; width: 100%; } /* Auth Hero — design.md §11.8.3 Bildsprache: Vektor-Illustration (Gemini, isometric flat) auf Spherity Dark Blue Grund. Kein Foto-Composite, kein CSS-Filter, keine Drop-Shadows. §11.1.5 Hard-Rule: Logo bleibt nativ. */ .auth-hero { position: relative; background: url('assets/Gemini_Generated_Image_9o3qke9o3qke9o3q.png') center / cover no-repeat, var(--color-primary-dark-blue); color: var(--white); padding: var(--space-12) var(--space-16); display: flex; flex-direction: column; overflow: hidden; } /* Overlay — Spherity Dark Blue + Indigo, dunkel für Textkontrast (§14 A11y). */ .auth-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2,56,82,0.92) 0%, rgba(2,56,82,0.85) 50%, rgba(73,97,168,0.78) 100%); pointer-events: none; } .auth-hero > * { position: relative; z-index: 1; } /* §11.1.5 Hard-Rule: Logo bleibt im nativen Marken-Gradient — KEIN CSS-Filter. */ .auth-hero .auth-logo { max-width: 132px; opacity: 1; } .auth-hero-spacer { flex: 1; } .auth-hero h1 { font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.7px; margin: 0 0 var(--space-6); max-width: 540px; } .auth-hero h1 em { color: var(--color-primary-cyan); font-style: normal; } .auth-hero p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 520px; margin: 0; } .auth-hero-foot { margin-top: 48px; display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.6); } .auth-pane { display: flex; align-items: center; justify-content: center; padding: 48px 56px; background: var(--white); } .auth-card { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 32px; } .auth-card .auth-logo { max-width: 110px; margin-bottom: 22px; } .auth-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--ink); } .auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 22px; } .callout { display: flex; gap: 10px; padding: 12px 14px; background: var(--eida-teal-soft); border: 1px solid var(--eida-teal-border); border-radius: var(--radius); font-size: 12.5px; color: var(--eida-navy); margin-bottom: 20px; } .callout svg { width: 16px; height: 16px; color: var(--eida-teal-deep); flex-shrink: 0; margin-top: 1px; } .callout strong { display: block; margin-bottom: 2px; font-weight: 600; } .callout--warn { background: var(--warning-bg); border-color: var(--warning-border); color: #5C2E04; } .callout--warn svg { color: var(--warning); } /* "What you will learn" list inside a callout on the demo entry page */ .learn-box { align-items: flex-start; } .learn-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--eida-navy); } .learn-list li { margin: 3px 0; } .learn-list li::marker { color: var(--eida-teal-deep); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; height: 42px; padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; } .field textarea { height: 110px; padding: 10px 12px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--eida-teal); box-shadow: 0 0 0 3px rgba(43,208,196,0.18); } .field-input-icon { position: relative; } .field-input-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); width: 16px; height: 16px; } .field-input-icon input { padding-left: 36px; } .checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text); margin: 8px 0 14px; cursor: pointer; } .checkbox input { margin-top: 2px; accent-color: var(--eida-blue); } .checkbox a { color: var(--eida-blue); text-decoration: underline; } .checkbox-optional { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 4px; } .btn-block { width: 100%; height: 44px; } .auth-foot { display: flex; justify-content: space-between; margin-top: 20px; font-size: 12.5px; color: var(--muted-2); } /* ═════ Centered single-card layout (onboarding/setup) ═════ */ .center-shell { min-height: 100vh; width: 100%; background: var(--bg); padding: 40px 24px 64px; display: flex; flex-direction: column; align-items: center; } .center-logo { margin-bottom: 28px; } .center-logo img { width: 132px; } .center-card { width: 100%; max-width: 720px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 28px 32px; } .onboard-stepper { display: flex; justify-content: center; gap: 8px; padding: 4px 0 24px; } .onboard-step { flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .onboard-step .icon-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-2); } .onboard-step .icon-tile svg { width: 22px; height: 22px; } .onboard-step .label { font-size: 12.5px; color: var(--muted); font-weight: 500; } .onboard-step.active .icon-tile { background: var(--success); color: var(--white); border-color: transparent; } .onboard-step.active .label { color: var(--ink); font-weight: 600; } .onboard-step.current .icon-tile { background: var(--ink); color: var(--white); border-color: transparent; } .onboard-step.current .label { color: var(--ink); font-weight: 600; } .welcome-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; } .welcome-banner .lightning { width: 32px; height: 32px; border-radius: 8px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .welcome-banner h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 2px; } .welcome-banner p { font-size: 13px; color: var(--muted); margin: 0; } .lead-text { font-size: 14.5px; color: var(--text); line-height: 1.6; margin: 0 0 18px; } .lead-text strong { color: var(--ink); } .notice-box { background: var(--eida-teal-soft); border: 1px solid var(--eida-teal-border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .notice-box h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--eida-navy); display: flex; align-items: center; gap: 8px; } .notice-box h4 svg { width: 14px; height: 14px; } .notice-box p { margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.55; } .task-list { list-style: none; padding: 0; margin: 14px 0 0; } .task-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); } .task-list li:last-child { border-bottom: none; } .task-list .ti { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .task-list .ti svg { width: 16px; height: 16px; } .task-list .ttitle { font-size: 13.5px; font-weight: 600; color: var(--ink); } .task-list .tsub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .center-card-actions { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .center-card-actions .btn-primary { height: 44px; } .divider-text { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--muted-2); font-size: 12.5px; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Setup steps with progress */ .setup-icon-big { width: 56px; height: 56px; background: var(--ink); color: var(--white); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .setup-icon-big svg { width: 28px; height: 28px; color: var(--eida-teal); } .setup-title { text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .setup-sub { text-align: center; font-size: 13px; color: var(--muted); margin: 0 0 22px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .setup-steps { display: flex; flex-direction: column; gap: 12px; } .setup-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); opacity: 0.55; transition: all .25s; } .setup-step.active { opacity: 1; border-color: var(--eida-teal); background: var(--eida-teal-soft); } .setup-step.done { opacity: 1; border-color: var(--success-border); background: var(--success-bg); } .setup-step .si { width: 32px; height: 32px; border-radius: 8px; background: var(--white); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); flex-shrink: 0; } .setup-step.active .si, .setup-step.done .si { color: var(--success); border-color: var(--success-border); } .setup-step .stitle { font-size: 13.5px; font-weight: 600; color: var(--ink); } .setup-step .sdesc { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; } .progress-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 22px 0 16px; } .progress-bar > span { display: block; height: 100%; background: var(--eida-blue); transition: width .4s; border-radius: 999px; } .setup-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .btn-primary[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; } /* ═════ Dashboard ═════ */ .welcome-row { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; } .welcome-row h1 { font-size: 28px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.3px; } .welcome-row p { font-size: 14.5px; color: var(--muted); margin: 0; } .dash-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); margin-top: 18px; } .dash-banner { background: var(--white); border-color: var(--line); padding: 18px 22px 22px; } .dash-banner-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); } /* Green PQC pill (mockup: rounded green pill with shield-check) */ .pqc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success); font-size: 12px; font-weight: 600; } .pqc-pill svg { width: 14px; height: 14px; } .progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; margin-top: 22px; } /* Connector line behind the squares */ .progress-steps::before { content: ""; position: absolute; top: 16px; left: 12.5%; right: 12.5%; height: 2px; background: var(--eida-blue); border-radius: 1px; z-index: 0; } /* Filled portion of the line up to the active step */ .progress-steps::after { content: ""; position: absolute; top: 16px; left: 12.5%; width: 25%; height: 2px; background: var(--eida-blue); border-radius: 1px; z-index: 1; } .pstep { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .pstep .num { width: 34px; height: 34px; border-radius: 8px; background: var(--white); border: 2px solid var(--line); color: var(--muted-2); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; } .pstep .num svg { width: 18px; height: 18px; } .pstep.done .num { background: var(--success); border-color: var(--success); color: var(--white); } .pstep.active .num { background: var(--eida-navy); border-color: var(--eida-navy); color: var(--white); } .pstep .title { font-size: 12.5px; font-weight: 600; color: var(--ink); } .pstep .sub { font-size: 11.5px; color: var(--muted); } .pstep:not(.active):not(.done) .title { color: var(--muted); font-weight: 500; } .pstep:not(.active):not(.done) .num { color: var(--muted-2); } .tag-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .tag-line .pill { font-weight: 500; } .howto-list { list-style: none; padding: 0; margin: 14px 0 16px; counter-reset: step; } .howto-list li { position: relative; padding: 8px 0 8px 30px; font-size: 13.5px; color: var(--text); counter-increment: step; } .howto-list li::before { content: counter(step); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .howto-list li b, .howto-list li strong { color: var(--ink); font-weight: 600; } .help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; } .help-card { background: var(--bg); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 28px 22px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; } .help-card .h-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; } .help-card .h-icon svg { width: 20px; height: 20px; } .help-card h3 { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; } .help-card p { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; flex: 1; } .help-card .btn { width: 100%; background: var(--white); border: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; } .help-card .btn:hover { background: var(--white); border-color: var(--muted-2); } /* ═════ Secure Messaging ═════ */ .msg-shell { display: grid; grid-template-columns: 340px 1fr; gap: 16px; margin-top: 16px; height: calc(100vh - 220px); min-height: 520px; } .msg-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .msg-list-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; } .msg-list-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); } .msg-list-head-actions { display: flex; gap: 6px; align-items: center; } .thread-card { display: block; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: all .15s; background: var(--white); } .thread-card:hover { border-color: var(--muted-2); } .thread-card.active { border-color: var(--eida-teal); background: var(--eida-teal-soft); } .thread-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .thread-row b { color: var(--ink-2); font-weight: 600; } .thread-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .thread-party { display: flex; align-items: center; gap: 8px; } .thread-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--eida-navy); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .thread-name { font-size: 13px; font-weight: 600; color: var(--ink); } .msg-thread { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; } .msg-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; } .msg-head .thread-avatar { width: 32px; height: 32px; font-size: 12px; } .msg-head .meta { flex: 1; min-width: 0; } .msg-head .meta b { font-size: 14px; color: var(--ink); display: block; } .msg-head .meta span { font-size: 12px; color: var(--muted); } .msg-body { flex: 1; padding: 20px 24px; overflow-y: auto; background: var(--bg); } .msg-bubble-row { display: flex; margin-bottom: 12px; } .msg-bubble-row.me { justify-content: flex-end; } .msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .msg-bubble-row.me .msg-bubble { background: var(--eida-teal-soft); border-color: var(--eida-teal-border); color: var(--eida-navy); } .msg-bubble .meta { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .msg-encrypted-note { text-align: center; font-size: 11.5px; color: var(--muted); padding: 10px 16px 0; background: var(--white); border-top: 1px solid var(--line); } .msg-encrypted-note svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--success); } .msg-input { padding: 12px 16px 16px; background: var(--white); border-top: 1px solid var(--line-2); display: flex; gap: 8px; align-items: flex-end; } .msg-input textarea { flex: 1; height: 56px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; resize: none; font-family: inherit; font-size: 13.5px; color: var(--ink); } .msg-input textarea:focus { outline: none; border-color: var(--eida-teal); box-shadow: 0 0 0 3px rgba(43,208,196,0.18); } /* Support button highlight */ .nav-item--support { color: var(--eida-blue); } .nav-item--support svg { color: var(--eida-blue); } /* ═════ Secure Messaging — empty states, partner picker, attach picker ═════ */ .thread-empty { padding: 40px 16px 28px; text-align: center; color: var(--muted); font-size: 13px; } .thread-empty p { margin: 0; line-height: 1.55; } .thread-empty-icon { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; } .thread-empty-icon svg { width: 20px; height: 20px; color: var(--muted-2); } .msg-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); } .msg-empty-card { max-width: 520px; width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 28px 28px 24px; text-align: center; } .msg-empty-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 14px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; } .msg-empty-icon svg { width: 22px; height: 22px; } .msg-empty-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ink); } .msg-empty-card p { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.55; } .msg-empty-card .btn { display: inline-flex; } .msg-empty-bullets { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; text-align: left; } .msg-empty-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink); background: var(--bg); border-radius: var(--radius); padding: 10px 12px; } .meb-i { width: 26px; height: 26px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .meb-i svg { width: 14px; height: 14px; color: var(--eida-blue); } /* Partner picker list in invite modal — single column, vertically stacked */ .partner-grid { display: flex; flex-direction: column; gap: 10px; } .partner-tile { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; } .partner-tile:hover { border-color: var(--eida-teal); background: var(--eida-teal-soft); } .partner-tile.selected { border-color: var(--eida-blue); background: #EAF2FB; } .partner-tile .thread-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--eida-teal), var(--eida-teal-deep)); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } .partner-tile .partner-info { line-height: 1.25; min-width: 0; flex: 1; } .partner-tile .partner-name { font-size: 13px; font-weight: 600; color: var(--ink); } .partner-tile .partner-did { font-size: 11.5px; color: var(--muted); font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Attach picker tiles */ .attach-list { display: grid; gap: 10px; } .attach-tile { display: grid; grid-template-columns: 36px 1fr 16px; align-items: center; gap: 12px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, background .15s; } .attach-tile:hover { border-color: var(--eida-blue); background: var(--bg); } .attach-tile .cred-icon { width: 36px; height: 36px; border-radius: 10px; } .attach-name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .attach-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .attach-chev { width: 16px; height: 16px; color: var(--muted-2); } /* In-chat credential / document attachment card (sent inside a bubble) */ .msg-attach { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); margin-top: 6px; } .msg-attach .cred-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; } .msg-attach .msg-attach-info { flex: 1; min-width: 0; } .msg-attach .msg-attach-name { font-size: 13px; font-weight: 600; color: var(--ink); } .msg-attach .msg-attach-sub { font-size: 11.5px; color: var(--muted); } .msg-attach-link { display: inline-flex; align-items: center; gap: 6px; margin: 8px 4px 4px; font-size: 12.5px; font-weight: 600; color: var(--eida-blue); text-decoration: none; } .msg-attach-link svg { width: 14px; height: 14px; } .msg-attach-link:hover { color: var(--eida-blue-hover); text-decoration: underline; } .msg-bubble--card { padding: 8px 10px; } /* Typing indicator (three dots) */ .typing { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: typing-bounce 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.15s; } .typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* System / event message inside thread */ .msg-system { text-align: center; font-size: 11.5px; color: var(--muted); margin: 14px 0; } .msg-system span { display: inline-block; padding: 4px 10px; background: var(--bg); border-radius: 999px; } /* Page-header layout used by messaging */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 0 4px; } .page-header h1 { font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.3px; } .page-header .page-subtitle { font-size: 14px; color: var(--muted); margin: 0; } .page-actions { display: flex; align-items: center; gap: 8px; } .btn-sm { padding: 6px 10px; font-size: 12.5px; gap: 6px; } /* Section headings inside modals */ .modal-section { margin-bottom: 18px; } .modal-section .section-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: 0; } .modal-section .section-help { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; } /* Cred icon — violet variant for documents */ .cred-icon--violet { background: #F4EBFF; color: #6941C6; } /* ═════ Responsive ═════ */ @media (max-width: 1024px) { .sidebar { width: 220px; } .main { padding: 20px 24px 48px; } .page-title { font-size: 28px; } } @media (max-width: 1024px) { .auth-shell { grid-template-columns: 1fr; } .auth-hero { padding: 32px; min-height: 360px; } .auth-pane { padding: 32px 24px; } .help-cards { grid-template-columns: 1fr; } .progress-steps { grid-template-columns: repeat(2, 1fr); } .progress-steps::before, .progress-steps::after { display: none; } .msg-shell { grid-template-columns: 1fr; height: auto; } } @media (max-width: 760px) { body { display: block; } .auth-hero h1 { font-size: 32px; } .center-card { padding: 20px; } .onboard-stepper { flex-wrap: wrap; gap: 12px; } .onboard-step { flex: 1 1 40%; } .sidebar { position: static; height: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; padding: 12px 16px; overflow-x: auto; gap: 4px; } .sidebar-logo { padding: 0 8px 0 0; } .sidebar-logo img { width: 90px; } .nav { display: flex; padding: 0; } .sidebar-bottom { display: none; } .nav-item { white-space: nowrap; margin: 0 2px; } .main { padding: 16px; } .page-header { flex-direction: column; align-items: stretch; } .toolbar { flex-direction: column; align-items: stretch; } .cred-table thead { display: none; } .cred-table tbody td { display: block; padding: 6px 16px; border: none; } .cred-table tbody td:first-child { padding-top: 14px; } .cred-table tbody td:last-child { padding-bottom: 14px; } .cred-table tbody tr { display: block; border-top: 1px solid var(--line); } .cred-type-grid { grid-template-columns: 1fr; } .stepper { padding: 12px 16px 0; } .step-line { max-width: 40px; } } /* ═══════════════════════════════════════════════════════════════════ Learn Key Concepts page ═══════════════════════════════════════════════════════════════════ */ .concepts-card { padding: 0; overflow: visible; } .concepts-head { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .concepts-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .concepts-icon svg { width: 22px; height: 22px; } .concepts-head h3 { font-size: 16px; font-weight: 700; color: var(--ink); } .concepts-head p { font-size: 13px; color: var(--muted); margin-top: 2px; } .page-tabs { display: flex; gap: 6px; margin-left: auto; background: var(--bg); padding: 4px; border-radius: 10px; border: 1px solid var(--line); } .page-tab { border: none; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 7px 12px; border-radius: 7px; transition: background .15s, color .15s; } .page-tab:hover { color: var(--ink); } .page-tab.active { background: var(--white); color: var(--eida-navy); box-shadow: 0 1px 2px rgba(13,34,64,0.08); } .concepts-card .page { display: none; } .concepts-card .page.active { display: block; } /* Accordion items */ .acc-item { border-bottom: 1px solid var(--line); } .acc-item:last-of-type { border-bottom: 0; } .acc-trigger { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 24px; background: none; border: none; cursor: pointer; text-align: left; transition: background .12s; } .acc-trigger:hover { background: var(--bg); } .acc-icon { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .acc-icon svg { width: 20px; height: 20px; } .acc-icon--blue { background: #EAF2FB; color: var(--eida-blue); } .acc-icon--teal { background: var(--eida-teal-soft); color: var(--eida-teal-deep); } .acc-icon--green { background: #ECFDF5; color: var(--success); } .acc-icon--purple { background: #F4EBFF; color: #6941C6; } .acc-icon--orange { background: #FFF7ED; color: #C2410C; } .acc-icon--red { background: #FEF2F2; color: var(--danger); } .acc-title { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); } .acc-chev { color: var(--muted); transition: transform .2s; flex-shrink: 0; display: inline-flex; } .acc-chev svg { width: 16px; height: 16px; } .acc-item.open .acc-chev { transform: rotate(180deg); } .acc-body { display: none; padding: 0 24px 22px 78px; } .acc-item.open .acc-body { display: block; } .acc-body p { font-size: 13.5px; color: var(--muted); line-height: 1.7; } .acc-body p + p { margin-top: 10px; } .acc-body em { font-style: italic; color: var(--ink); } .acc-body strong { color: var(--ink); } /* Tooltip pills */ .tt-pills { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .tt-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; line-height: 1.2; cursor: help; border: 1px solid transparent; } /* (info-dot pseudo-element removed — pills are clean and the tooltip appears on hover/focus without a visual indicator) */ .tt-pill--blue { background: #EAF2FB; border-color: #BFDBFE; color: #1D4ED8; } .tt-pill--teal { background: var(--eida-teal-soft); border-color: #99F6E4; color: var(--eida-teal-deep); } .tt-pill--orange { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; } .tt-pill--red { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; } .tt-pill--neutral{ background: var(--bg); border-color: var(--line); color: var(--ink); } .tt-pill:hover, .tt-pill:focus { outline: none; z-index: 5; } .tt-pill[data-tip]:hover::after, .tt-pill[data-tip]:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--eida-navy); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.5; padding: 9px 12px; border-radius: 8px; width: max-content; max-width: 280px; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(13,34,64,0.22); z-index: 50; pointer-events: none; } .tt-pill[data-tip]:hover::before, .tt-pill[data-tip]:focus::before { z-index: 6; } /* Compare grid — 3 Stufen: Status Quo (Warn/Gelb) → Quantum Resilient (Info/Blau) → Quantum Safe (Good/Grün) */ .compare-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .compare-col { border-radius: 12px; padding: 16px; border: 1.5px solid; } .compare-col--warn { background: var(--warning-bg); border-color: var(--warning-border); } .compare-col--info { background: var(--color-subbrand-eida-soft); border-color: var(--color-subbrand-eida-border); } .compare-col--bad { background: var(--color-subbrand-eida-soft); border-color: var(--color-subbrand-eida-border); } .compare-col--good { background: #ECFDF5; border-color: #A7F3D0; } .compare-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.7); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; } .compare-icon svg { width: 18px; height: 18px; } .compare-icon .ui-icon { width: 18px; height: 18px; } .compare-col--warn .compare-icon { color: var(--warning); } .compare-col--info .compare-icon { color: var(--color-subbrand-eida); } .compare-col--bad .compare-icon { color: var(--color-subbrand-eida); } .compare-col--good .compare-icon { color: #059669; } .compare-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; } .compare-col--warn .compare-label { color: var(--warning); } .compare-col--info .compare-label { color: var(--color-subbrand-eida); } .compare-col--bad .compare-label { color: var(--color-subbrand-eida); } .compare-col--good .compare-label { color: #059669; } .compare-ideal { font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 8px; margin-top: -6px; font-style: italic; } .compare-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); margin-bottom: 6px; line-height: 1.4; } .compare-row:last-child { margin-bottom: 0; } .cd { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; } .cd--ok { background: #D1FAE5; color: #059669; } .cd--no { background: #FEE2E2; color: var(--danger); } .cd--half { background: #FEF3C7; color: #D97706; } /* Corridor diagram */ .corridor-diagram { margin-top: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px; } .corridor-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; text-align: center; } .corridor-row { display: flex; align-items: center; gap: 8px; } .corridor-node { flex: 0 0 auto; min-width: 110px; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; } .cn-icon { width: 36px; height: 36px; border-radius: 10px; margin: 0 auto 6px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; } .cn-icon svg { width: 18px; height: 18px; } .cn-label { font-size: 12px; font-weight: 700; color: var(--eida-navy); } .cn-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .corridor-pipe { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px; } .corridor-lock { color: var(--eida-teal-deep); display: inline-flex; align-items: center; } .corridor-lock svg { width: 18px; height: 18px; } .corridor-line { width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--eida-teal), var(--eida-blue)); position: relative; } .corridor-line::after { content: ''; position: absolute; right: -2px; top: -3px; width: 0; height: 0; border-left: 6px solid var(--eida-blue); border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .corridor-algo { font-size: 11px; font-weight: 600; color: var(--eida-teal-deep); } .corridor-foot { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 14px; padding-top: 10px; text-align: center; } .concepts-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-top: 1px solid var(--line); } /* ═══════════════════════════════════════════════════════════════════ Generic data-tip tooltip (used on existing pills/badges) ═══════════════════════════════════════════════════════════════════ */ [data-tip] { position: relative; cursor: help; } [data-tip]:hover::after, [data-tip]:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--eida-navy); color: #fff; font-size: 11.5px; font-weight: 500; line-height: 1.5; padding: 9px 12px; border-radius: 8px; width: max-content; max-width: 280px; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(13,34,64,0.22); z-index: 50; pointer-events: none; } [data-tip]:hover, [data-tip]:focus { z-index: 5; outline: none; } @media (max-width: 720px) { .compare-grid { grid-template-columns: 1fr; } .page-tabs { width: 100%; margin-left: 0; } .acc-body { padding-left: 24px; } } /* ═══════════════════════════════════════════════════════════════════ Onboarding learning sequence (onboarding-learn.html) ═══════════════════════════════════════════════════════════════════ */ .learn-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(13,34,64,0.04), 0 4px 12px rgba(13,34,64,0.04); width: 100%; max-width: 720px; margin: 24px auto 0; overflow: hidden; } .learn-card-header { display: flex; align-items: center; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid var(--line); } .learn-card-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--eida-teal-soft); color: var(--eida-teal-deep); display: inline-flex; align-items: center; justify-content: center; } .learn-card-icon svg { width: 22px; height: 22px; } .learn-card-header h3 { font-size: 17px; font-weight: 700; color: var(--eida-navy); margin: 0 0 3px; } .learn-card-header p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; } /* Page indicator dots */ .learn-dots { display: flex; justify-content: center; gap: 8px; padding: 18px 24px 4px; } .learn-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--line); border: none; cursor: pointer; padding: 0; transition: width 0.2s, background-color 0.2s; } .learn-dot:hover { background: var(--muted); } .learn-dot.active { width: 28px; background: var(--eida-navy); } /* Pages */ .learn-page { display: none; padding: 14px 22px 22px; } .learn-page.active { display: block; } .learn-page .acc-item + .acc-item { margin-top: 12px; } /* Footer with Back / Next buttons */ .learn-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 6px 4px; gap: 12px; } .learn-foot .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 10px 18px; } .learn-foot .btn svg { width: 16px; height: 16px; } /* Hint underneath the card */ .learn-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--muted); } .learn-hint svg { width: 14px; height: 14px; } .learn-hint-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; } /* Corridor-pipe inner labels (used inside corridor-diagram on learn page) */ .cp-algo { font-size: 11px; font-weight: 700; color: var(--eida-blue); letter-spacing: 0.04em; } .cp-sub { font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; } @media (max-width: 720px) { .learn-card-header { padding: 20px 18px 14px; } .learn-page { padding: 14px 14px 18px; } .learn-foot { flex-direction: column; gap: 10px; } .learn-foot .btn { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ Company Selection page (company-select.html) ═══════════════════════════════════════════════════════════════════ */ .company-card-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); } .company-head-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--eida-navy), var(--eida-blue)); color: var(--white); display: inline-flex; align-items: center; justify-content: center; } .company-head-icon svg { width: 22px; height: 22px; } .company-card-head h3 { font-size: 16px; font-weight: 700; color: var(--eida-navy); margin: 0 0 3px; } .company-card-head p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; } /* DEMO notice strip */ .demo-notice { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .demo-tag { display: inline-flex; align-items: center; background: var(--ink); color: var(--white); font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.06em; } /* Company picker list */ .company-block { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px; } .company-pick { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s; } .company-pick:hover { border-color: var(--eida-blue); background: var(--bg); } .company-pick input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .company-pick.selected { border-color: var(--eida-teal); background: var(--eida-teal-soft); box-shadow: 0 0 0 3px rgba(43,208,196,0.12); } .company-logo { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); color: var(--eida-blue); display: inline-flex; align-items: center; justify-content: center; } .company-logo--alt { color: var(--eida-navy); } .company-logo svg { width: 22px; height: 22px; } .company-info { flex: 1; min-width: 0; } .company-name { font-size: 14.5px; font-weight: 700; color: var(--eida-navy); } .company-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 11.5px; color: var(--muted); } .company-pick.selected .company-name { color: var(--eida-teal-deep); } .company-pick.selected .company-meta { color: var(--eida-teal-deep); } .company-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .company-check svg { width: 14px; height: 14px; } .company-pick.selected .company-check { background: var(--eida-teal); color: var(--white); } /* Card footer with Back / Initialize buttons */ .company-foot { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); gap: 12px; } .company-foot .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 10px 18px; } .company-foot .btn svg { width: 16px; height: 16px; } @media (max-width: 720px) { .company-card-head { padding: 18px 18px 14px; } .demo-notice { padding: 10px 18px; flex-wrap: wrap; } .company-block { padding: 14px 18px; } .company-pick { flex-wrap: wrap; } .company-info { width: 100%; order: 3; } .company-foot { flex-direction: column; gap: 10px; padding: 14px 18px; } .company-foot .btn { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ FAQ page (concepts.html) ═══════════════════════════════════════════════════════════════════ */ .faq-page { padding: 32px 40px 56px; max-width: 980px; margin: 0 auto; } .faq-hero { display: flex; align-items: flex-start; gap: 20px; background: linear-gradient(135deg, #EAF2FB 0%, var(--eida-teal-soft) 100%); border: 1px solid var(--line); border-radius: 16px; padding: 28px 32px; margin-bottom: 28px; } .faq-hero-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--white); color: var(--eida-blue); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(13,34,64,0.06); } .faq-hero-icon svg { width: 28px; height: 28px; } .faq-hero-title { font-size: 22px; font-weight: 700; color: var(--eida-navy); margin: 0 0 6px; } .faq-hero-sub { font-size: 14px; color: var(--ink); margin: 0; line-height: 1.6; } /* FAQ search bar */ .faq-search { position: relative; margin-bottom: 28px; } .faq-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); } .faq-search input { width: 100%; padding: 12px 16px 12px 42px; font-size: 14px; font-family: inherit; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .faq-search input:focus { border-color: var(--eida-blue); box-shadow: 0 0 0 3px rgba(23,104,166,0.12); } /* Section navigation chips (jump to section) */ .faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .faq-nav-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: all 0.15s; } .faq-nav-chip:hover { background: var(--bg); border-color: var(--eida-blue); color: var(--eida-blue); } .faq-nav-chip svg { width: 13px; height: 13px; } /* FAQ section */ .faq-section { margin-bottom: 36px; scroll-margin-top: 24px; } .faq-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .faq-section-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .faq-section-icon svg { width: 18px; height: 18px; } .faq-section-title { font-size: 17px; font-weight: 700; color: var(--eida-navy); margin: 0; } .faq-section-sub { font-size: 13px; color: var(--muted); margin: 4px 0 0; } /* FAQ accordion item */ .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow 0.15s; } .faq-item.open { box-shadow: 0 1px 2px rgba(13,34,64,0.04), 0 4px 12px rgba(13,34,64,0.06); border-color: var(--eida-blue); } .faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.12s; } .faq-q:hover { background: var(--bg); } .faq-q-text { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ink); } .faq-q-chev { color: var(--muted); transition: transform 0.2s; flex-shrink: 0; display: inline-flex; } .faq-q-chev svg { width: 16px; height: 16px; } .faq-item.open .faq-q-chev { transform: rotate(180deg); } .faq-item.open .faq-q-chev { color: var(--eida-blue); } .faq-a { display: none; padding: 0 20px 20px; } .faq-item.open .faq-a { display: block; } .faq-a p { font-size: 13.5px; color: var(--ink); line-height: 1.7; margin: 0; } .faq-a p + p { margin-top: 10px; } .faq-a strong { color: var(--eida-navy); } .faq-a em { font-style: italic; color: var(--ink); } .faq-a ul { margin: 10px 0 0; padding-left: 20px; } .faq-a ul li { font-size: 13.5px; color: var(--ink); line-height: 1.7; } .faq-a code { background: var(--bg); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--eida-navy); } .faq-empty { text-align: center; padding: 48px 20px; color: var(--muted); font-size: 14px; } @media (max-width: 720px) { .faq-page { padding: 24px 20px 40px; } .faq-hero { flex-direction: column; padding: 22px; } .faq-hero-icon { width: 44px; height: 44px; } } /* ═════════════════════════════════════════════════════════════════ Credential Detail page ───────────────────────────────────────────────────────────────── */ .cd-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-top: 12px; } .cd-side { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-sm); align-self: start; position: sticky; top: 20px; } .cd-side-section + .cd-side-section { margin-top: 18px; } .cd-side-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; } .cd-side-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .cd-side-row:last-child { margin-bottom: 0; } .cd-side-key { font-size: 12px; color: var(--muted); } .cd-side-val { font-size: 12.5px; color: var(--ink); font-weight: 500; text-align: right; max-width: 160px; word-break: break-word; } .cd-side-val.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; } .cd-side-val.teal { color: var(--eida-teal-deep); } .cd-map { background: linear-gradient(135deg, #DBEAFE, #E0F2FE); border: 1px solid #BFDBFE; border-radius: var(--radius-sm); height: 110px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: #93C5FD; } .cd-map svg { width: 32px; height: 32px; } .cd-map-label { font-size: 11px; color: var(--muted); text-align: center; } .cd-main { min-width: 0; } .cd-head { margin-bottom: 16px; } .cd-title { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; margin: 0 0 4px; } .cd-sub { font-size: 13.5px; color: var(--muted); margin: 0; } .cd-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); } .cd-card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; } .cd-validity-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-2); } .cd-validity-item:first-of-type { border-top: none; padding-top: 0; } .cd-validity-item:last-child { padding-bottom: 0; } .cd-vi-icon { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .cd-vi-icon svg { width: 14px; height: 14px; } .cd-vi-icon.ok { background: var(--success-bg); color: var(--success); } .cd-vi-icon.warn { background: var(--warning-bg); color: var(--warning); } .cd-vi-icon.info { background: #EAF2FB; color: var(--eida-blue); } .cd-vi-body { flex: 1; min-width: 0; } .cd-vi-label { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 2px; } .cd-vi-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; } .cd-vi-action { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--eida-blue); text-decoration: none; cursor: pointer; } .cd-vi-action:hover { text-decoration: underline; } .cd-proof { background: var(--eida-teal-soft); border: 1.5px solid var(--eida-teal-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 16px; } .cd-proof-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #065F46; margin-bottom: 12px; } .cd-proof-title svg { width: 16px; height: 16px; } .cd-proof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; } .cd-proof-row + .cd-proof-row { border-top: 1px dashed rgba(22,182,171,0.4); } .cd-proof-key { font-size: 12.5px; color: #047857; } .cd-proof-val { font-size: 12.5px; font-weight: 600; color: #065F46; font-family: ui-monospace, "SF Mono", Menlo, monospace; display: inline-flex; align-items: center; gap: 8px; } .cd-proof-badge { background: var(--success); color: var(--white); border-radius: 4px; padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } .cd-proof-badge.legacy { background: var(--neutral); } .cd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .cd-field-full { grid-column: 1 / -1; } .cd-field-key { font-size: 11.5px; color: var(--muted-2); margin-bottom: 4px; letter-spacing: 0.02em; } .cd-field-val { font-size: 13px; color: var(--ink); font-weight: 500; line-height: 1.5; word-break: break-word; } .cd-field-val.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--text); } .cd-field-val.teal { color: var(--eida-teal-deep); } .cd-actions { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } @media (max-width: 1100px) { .cd-layout { grid-template-columns: 1fr; } .cd-side { position: static; } .cd-fields { grid-template-columns: 1fr; } } /* ═════ UUI Icon — kontextuelle Größen (parallel zu den svg-Regeln oben) ═════ */ .bc-sep .ui-icon { width: 14px; height: 14px; } .btn .ui-icon { width: 16px; height: 16px; } .search .ui-icon { color: var(--muted-2); } .th-sortable .ui-icon { width: 14px; height: 14px; color: var(--muted-2); } .pill .ui-icon { width: 12px; height: 12px; } .pill-icon .ui-icon { color: currentColor; } .step-circle .ui-icon { width: 18px; height: 18px; } .rp-icon .ui-icon { width: 16px; height: 16px; } .done-icon .ui-icon { width: 36px; height: 36px; } .callout .ui-icon { width: 16px; height: 16px; color: var(--eida-teal-deep); flex-shrink: 0; margin-top: 1px; } .callout--warn .ui-icon { color: var(--warning); } .field-input-icon .ui-icon { width: 16px; height: 16px; color: var(--muted-2); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } .setup-icon-big .ui-icon { width: 28px; height: 28px; color: var(--eida-teal); } .pqc-pill .ui-icon { width: 14px; height: 14px; } .msg-encrypted-note .ui-icon { width: 12px; height: 12px; color: var(--success); } .nav-item--support .ui-icon { color: var(--eida-blue); } .thread-empty-icon .ui-icon { width: 20px; height: 20px; color: var(--muted-2); } .msg-empty-icon .ui-icon { width: 22px; height: 22px; } .meb-i .ui-icon { width: 14px; height: 14px; color: var(--eida-blue); } .msg-attach-link .ui-icon { width: 14px; height: 14px; } .concepts-icon .ui-icon { width: 22px; height: 22px; } .acc-icon .ui-icon { width: 20px; height: 20px; } .acc-chev .ui-icon, .ui-icon.acc-chev { width: 16px; height: 16px; } .cn-icon .ui-icon { width: 18px; height: 18px; } .corridor-lock .ui-icon { width: 18px; height: 18px; } .learn-card-icon .ui-icon { width: 22px; height: 22px; } .learn-hint .ui-icon { width: 14px; height: 14px; } .company-head-icon .ui-icon { width: 22px; height: 22px; } .company-logo .ui-icon { width: 22px; height: 22px; } .company-check .ui-icon { width: 14px; height: 14px; } .faq-hero-icon .ui-icon { width: 28px; height: 28px; } .faq-search .ui-icon { width: 18px; height: 18px; color: var(--muted-2); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); } .faq-nav-chip .ui-icon { width: 13px; height: 13px; } .faq-section-icon .ui-icon { width: 18px; height: 18px; } .faq-q-chev .ui-icon, .ui-icon.faq-q-chev { width: 16px; height: 16px; } .cd-map .ui-icon { width: 32px; height: 32px; } .cd-vi-icon .ui-icon { width: 14px; height: 14px; } .cd-proof-title .ui-icon { width: 16px; height: 16px; } .icon-tile .ui-icon { width: 20px; height: 20px; } .ti .ui-icon { width: 16px; height: 16px; color: var(--eida-blue); } .si .ui-icon { width: 16px; height: 16px; color: var(--eida-teal-deep); } .tile-head .ui-icon { width: 20px; height: 20px; } .h-icon .ui-icon { width: 22px; height: 22px; } .pstep .num .ui-icon { width: 18px; height: 18px; } .cd-side .ui-icon { color: var(--eida-teal-deep); } /* ═════ Issuer dropdown + Invitation Paste (credentials request modal) ═════ */ .issuer-select-row { margin-top: var(--space-2); margin-bottom: var(--space-3); } .issuer-select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .issuer-select:hover { border-color: var(--muted-2); } .issuer-select:focus-visible { border-color: var(--color-subbrand-eida); } .custom-did-wrap { margin: var(--space-3) 0; } .custom-did-wrap .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .custom-did-wrap .field-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font: inherit; font-size: 13.5px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--white); } .custom-did-wrap .field-input:focus-visible { border-color: var(--color-subbrand-eida); } .invitation-divider { display: flex; align-items: center; margin: var(--space-6) 0 var(--space-3); font-size: 11px; font-weight: 600; color: var(--muted-2); letter-spacing: 0.08em; } .invitation-divider::before, .invitation-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .invitation-divider span { padding: 0 12px; } .invitation-row { display: flex; gap: 8px; align-items: stretch; margin-top: var(--space-2); } .invitation-input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); font: inherit; font-size: 13.5px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--white); } .invitation-input:focus-visible { border-color: var(--color-subbrand-eida); } .invitation-row .btn { flex-shrink: 0; } .invitation-preview { margin-top: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; } .invitation-preview .ui-icon { flex-shrink: 0; margin-top: 1px; } .invitation-preview--ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; } .invitation-preview--ok .ui-icon { color: #059669; } .invitation-preview--err { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); } .invitation-preview--err .ui-icon { color: var(--danger); } .invitation-preview .ip-did { display: inline-block; margin: 4px 0; font-size: 11.5px; font-family: 'IBM Plex Mono', ui-monospace, monospace; background: rgba(255,255,255,0.7); padding: 2px 6px; border-radius: 4px; word-break: break-all; } /* Address-Book: chevron acts as a separate "Details" affordance — make the hit-target obvious and give it its own hover-tint so users discover the dual-click row vs chevron behavior. */ .ab-details-btn { cursor: pointer; transition: background .12s, color .12s; } .ab-details-btn:hover { background: var(--color-subbrand-eida-soft); color: var(--color-subbrand-eida); } .ab-details-btn:hover .ui-icon { color: var(--color-subbrand-eida); } /* ═════ Dashboard: "What's next" card after the journey is complete ═════ */ .dash-card--done { border-left: 3px solid var(--success); } .completed-actions { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 720px) { .completed-actions { grid-template-columns: 1fr 1fr; } } .completed-action { display: grid; grid-template-columns: 44px 1fr 20px; align-items: flex-start; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; } .completed-action:hover { border-color: var(--color-subbrand-eida); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .completed-action-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .completed-action-icon .ui-icon { width: 22px; height: 22px; } .completed-action-title { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.3; } .completed-action-desc { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; } .completed-action > .ui-icon { color: var(--muted-2); align-self: center; width: 18px; height: 18px; } .completed-action:hover > .ui-icon { color: var(--color-subbrand-eida); } /* ═════ FAQ Sources & References ═════ */ .faq-sources-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; } .faq-sources-list li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); } .faq-sources-list strong { font-size: 13.5px; color: var(--ink); font-weight: 600; } .faq-sources-list a { color: var(--color-subbrand-eida); font-size: 13px; font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; text-decoration: none; word-break: break-all; } .faq-sources-list a:hover { text-decoration: underline; } .faq-source-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; } .faq-sources-disclaimer { margin-top: 14px; padding: 12px 14px; background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-md); font-size: 12.5px; color: #5C2E04; line-height: 1.5; }