@import url('./icons.css'); :root { --kaefer-blue: #0066B3; --kaefer-orange: #FF6600; --font-aptos: 'Aptos', 'Segoe UI', sans-serif; } html, body { display: flex; flex-direction: column; font-family: var(--font-aptos); height: 100%; overflow: hidden; margin: 0; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .overflow-hidden { overflow: hidden !important; } .text-danger { color: var(--dxds-color-content-danger-default-rest); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--dxds-color-border-success-default-rest); } .invalid { outline: 1px solid var(--dxds-color-border-danger-default-rest); } /* Portal element for .field-info-icon tooltips (see js/engagement.js). Rendered as a fixed-position element appended to so it is never clipped by ancestor `overflow: auto/hidden` scroll containers. */ .field-info-tooltip-portal { display: none; position: fixed; z-index: 10000; background: #1a1a2e; color: #fff; font-size: 0.78rem; font-weight: 400; font-family: var(--font-aptos); line-height: 1.5; padding: 0.5rem 0.75rem; border-radius: 0.375rem; white-space: normal; width: 17rem; max-width: min(17rem, calc(100vw - 1.5rem)); box-shadow: 0 4px 12px rgba(0,0,0,0.2); text-align: left; pointer-events: none; } .validation-message { color: var(--dxds-color-content-danger-default-rest); } .button-link { text-decoration: unset; } .title { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } .title.title-secondary { padding: 0.313rem 0 0; color: var(--dxds-color-content-secondary-default-rest); } .title-header-text { font-size: var(--dxds-font-size-headline-lg); font-weight: var(--dxds-font-weight-headline-default); letter-spacing: var(--dxds-letter-spacing-headline-lg); line-height: var(--dxds-line-height-headline-lg); } .title-content-text { font-size: var(--dxds-font-size-base-lg); font-weight: var(--dxds-font-weight-base-default); letter-spacing: var(--dxds-letter-spacing-base-lg); line-height: var(--dxds-line-height-base-lg); } .main-content { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } /* ── Shared tag chip styles ─────────────────────────────────────────────── */ .tag-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: #e8f0fb; color: var(--kaefer-blue); border: 1px solid #b3cef5; border-radius: 20px; padding: 0.2rem 0.65rem; font-size: 0.78rem; font-family: var(--font-aptos); font-weight: 500; white-space: nowrap; } .tag-chip-remove { background: none; border: none; cursor: pointer; padding: 0; font-size: 0.7rem; color: var(--kaefer-blue); opacity: 0.6; line-height: 1; } .tag-chip-remove:hover { opacity: 1; } .tag-chip-link { text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .tag-chip-link:hover { background: #d0e2f8; border-color: var(--kaefer-blue); } .tag-chip-sm { font-size: 0.72rem; padding: 0.15rem 0.5rem; cursor: pointer; } .tag-chip-sm:hover { background: #d0e2f8; border-color: var(--kaefer-blue); } .tag-chip-more { background: #f0f0f0; color: #555; border-color: #ccc; cursor: default; } .tag-chip-more:hover { background: #f0f0f0; border-color: #ccc; }