/* E-Safe Tools • User Management Public CSS Aligned with E-Safe Visual and Interaction Standards and E-Safe UI Reference and CSS v1.0. */ .esafe-um-shortcode { --color-primary: #1e5476; --color-primary-dark: #15394f; --color-primary-light: #d7e4ec; --color-success: #1b7f4e; --color-warning: #b08900; --color-danger: #9b2c2c; --color-text: #0f2330; --color-text-muted: #5a6a75; --color-border: #d4dee6; --color-surface: #ffffff; --color-surface-alt: #f5f8fb; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --shadow-low: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 6px 16px rgba(0,0,0,0.12); --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fs-xs: 12px; --lh-tight: 1.25; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #0f2330; line-height: 1.5; } .esafe-um-shortcode .esafe-um-status-help, .esafe-um-members-overlay .esafe-um-status-help { display: inline !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .esafe-um-shortcode a:not(.esafe-btn) { color: #1e5476; text-decoration: none; } .esafe-um-shortcode a:not(.esafe-btn):hover, .esafe-um-shortcode a:not(.esafe-btn):focus { color: #15394f; text-decoration: none; } .esafe-um-shortcode a:focus { outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-shortcode .esafe-h3 { font-size: 22px; line-height: 30px; font-weight: 600; margin: 0 0 12px 0; } .esafe-um-shortcode .esafe-small { font-size: 14px; line-height: 20px; color: #5a6a75; } .esafe-um-shortcode .esafe-btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 12px; line-height: 1.25; background: #F5F5F5; color: #7A7A7A; border: 1px solid #DADADA; border-radius: 10px; padding: 6px 10px; cursor: pointer; text-decoration: none; transition: color 120ms ease, border-color 120ms ease; } /* Ensure buttons inside profile popups remain styled even when overlays are appended to . */ .esafe-um-members-overlay .esafe-btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 12px; line-height: 1.25; background: #F5F5F5; color: #7A7A7A; border: 1px solid #DADADA; border-radius: 10px; padding: 6px 10px; cursor: pointer; text-decoration: none; transition: color 120ms ease, border-color 120ms ease; } .esafe-um-members-overlay .esafe-btn:hover, .esafe-um-members-overlay .esafe-btn:focus { color: #D8677D; border-color: rgba(241, 193, 193, 0.5); text-decoration: none; font-weight: 300; } .esafe-um-members-overlay .esafe-btn.primary { background: #F5F5F5; color: #7A7A7A; border: 1px solid #DADADA; border-radius: 10px; transition: background 120ms ease, color 120ms ease; } .esafe-um-members-overlay .esafe-btn.primary:hover, .esafe-um-members-overlay .esafe-btn.primary:focus { background: #FFFFFF; color: #D8677D; border: 1px solid #DADADA; text-decoration: none; } .esafe-um-members-overlay .esafe-btn.secondary { background: #F5F5F5; color: #7A7A7A; border: 1px solid var(--color-border); border-radius: 10px; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .esafe-um-members-overlay .esafe-btn.secondary:hover, .esafe-um-members-overlay .esafe-btn.secondary:focus { background: #FFFFFF; color: #D8677D; border-color: var(--color-border); text-decoration: none; } .esafe-um-shortcode .esafe-btn:hover, .esafe-um-shortcode .esafe-btn:focus { color: #D8677D; border-color: rgba(241, 193, 193, 0.5); text-decoration: none; font-weight: 300; } .esafe-um-shortcode .esafe-btn.active, .esafe-um-shortcode .esafe-btn.current, .esafe-um-shortcode .esafe-btn.is-selected, .esafe-um-shortcode .esafe-btn[aria-current="page"], .esafe-um-shortcode .esafe-btn[aria-selected="true"], .esafe-um-shortcode .esafe-btn[aria-pressed="true"] { color: #D8677D !important; border-color: rgba(241, 193, 193, 0.5) !important; text-decoration: none; font-weight: 300; } .esafe-um-shortcode .esafe-btn[disabled], .esafe-um-shortcode .esafe-btn.disabled { opacity: .6; cursor: not-allowed; } /* Button variants */ .esafe-um-shortcode .esafe-btn.primary { background: #F5F5F5; color: #7A7A7A; border: 1px solid #DADADA; border-radius: 10px; transition: background 120ms ease, color 120ms ease; } .esafe-um-shortcode .esafe-btn.primary:hover, .esafe-um-shortcode .esafe-btn.primary:focus { background: #FFFFFF; color: #D8677D; border: 1px solid #DADADA; text-decoration: none; } .esafe-um-shortcode .esafe-btn.secondary { background: #F5F5F5; color: #7A7A7A; border: 1px solid var(--color-border); border-radius: 10px; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .esafe-um-shortcode .esafe-btn.secondary:hover, .esafe-um-shortcode .esafe-btn.secondary:focus { background: #FFFFFF; color: #D8677D; border-color: var(--color-border); text-decoration: none; } .esafe-um-shortcode .esafe-card { background: #ffffff; border: 1px solid #d4dee6; border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: transform 160ms ease, box-shadow 160ms ease; } .esafe-um-shortcode .esafe-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .esafe-um-notice { margin: 12px 0; padding: 10px 12px; border: 1px solid #d4dee6; border-left: 4px solid #1b7f4e; background: #f5f8fb; border-radius: 8px; } .esafe-um-profile-component .esafe-um-profile-media { position: relative; margin-bottom: 0; } .esafe-um-banner { width: 100%; aspect-ratio: 1920 / 600; border: 1px solid #d4dee6; border-radius: 8px; overflow: hidden; background: #f5f8fb; } .esafe-um-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .esafe-um-banner-empty { height: 100%; display: flex; align-items: center; justify-content: center; } .esafe-um-avatar { position: absolute; left: 16px; bottom: -24px; width: 120px; height: 120px; border-radius: 8px; border: 1px solid #d4dee6; background: #ffffff; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .esafe-um-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .esafe-um-avatar-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #f5f8fb; } .esafe-um-form { margin-top: 32px; } .esafe-um-form .esafe-field { margin-bottom: 16px; } .esafe-um-form .esafe-label { display: inline-block; margin-bottom: 6px; font-weight: 600; font-size: 14px; color: #0f2330; } .esafe-um-form .esafe-help { margin-top: 6px; font-size: 12px; color: #5a6a75; } .esafe-um-form .esafe-input, .esafe-um-form .esafe-textarea { width: 100%; border: 1px solid #d4dee6; border-radius: 8px; padding: 8px 12px; font-size: 16px; font-family: inherit; color: #0f2330; background: #ffffff; outline: 2px solid transparent; outline-offset: 1px; } .esafe-um-form .esafe-input:focus, .esafe-um-form .esafe-textarea:focus { border-color: #1e5476; box-shadow: 0 0 0 2px #d7e4ec; } .esafe-um-form select.esafe-input{appearance:auto;} .esafe-um-community-custom{margin-top:8px;} .esafe-um-required { color: #9b2c2c; font-weight: 700; } .esafe-um-form-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .esafe-um-section-title { margin: 18px 0 10px; font-weight: 700; font-size: 16px; color: #0f2330; } .esafe-um-social-links { display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; margin: 0; overflow: hidden; } .esafe-um-social-link { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d4dee6; border-radius: 10px; background: #ffffff; color: #1e5476; box-shadow: 0 1px 2px rgba(0,0,0,0.06); text-decoration: none; } .esafe-um-social-link:hover, .esafe-um-social-link:focus { color: #15394f; border-color: #d7e4ec; box-shadow: 0 6px 16px rgba(0,0,0,0.12); text-decoration: none; } .esafe-um-social-link svg { display: block; } /* Buttons */ .esafe-um-shortcode .esafe-btn.primary:hover { background: #FFFFFF; } /* Selected state matches hover */ .esafe-um-shortcode .esafe-btn.primary.active, .esafe-um-shortcode .esafe-btn.primary.is-selected, .esafe-um-shortcode .esafe-btn.primary[aria-current="page"], .esafe-um-shortcode .esafe-btn.primary[aria-selected="true"], .esafe-um-shortcode .esafe-btn.primary[aria-pressed="true"] { background: #FFFFFF; } .esafe-um-shortcode .esafe-btn.primary:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } .esafe-um-shortcode .esafe-btn.secondary:hover { background: #FFFFFF; } .esafe-um-shortcode .esafe-btn.secondary.active, .esafe-um-shortcode .esafe-btn.secondary.is-selected, .esafe-um-shortcode .esafe-btn.secondary[aria-current="page"], .esafe-um-shortcode .esafe-btn.secondary[aria-selected="true"], .esafe-um-shortcode .esafe-btn.secondary[aria-pressed="true"] { background: #FFFFFF; } .esafe-um-shortcode .esafe-btn.secondary:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } .esafe-um-shortcode .esafe-btn.danger:hover { background: #FFFFFF; color: #D8677D; } .esafe-um-shortcode .esafe-btn.danger.active, .esafe-um-shortcode .esafe-btn.danger.is-selected, .esafe-um-shortcode .esafe-btn.danger[aria-current="page"], .esafe-um-shortcode .esafe-btn.danger[aria-selected="true"], .esafe-um-shortcode .esafe-btn.danger[aria-pressed="true"] { background: #FFFFFF; color: #D8677D; } .esafe-um-shortcode .esafe-btn.danger:focus { outline: 2px solid var(--color-primary-light); outline-offset: 2px; } .esafe-um-shortcode .esafe-um-fieldline { margin-top: 10px; } .esafe-um-label { font-weight: 700; margin-right: 8px; } @media (max-width: 768px) { .esafe-um-avatar { width: 92px; height: 92px; bottom: -18px; } .esafe-um-form { margin-top: 28px; } .esafe-um-social-links { margin-left: 0; } } /* Profile display and edit toggle */ .esafe-um-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .esafe-um-profile-header .esafe-h3 { margin: 0; } .esafe-um-profile-component .esafe-um-profile-display, .esafe-um-profile-component .esafe-um-profile-edit { margin-top: 0; } .esafe-um-profile-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; } .esafe-um-email-preferences-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid #d4dee6; } /* Members grid */ .esafe-um-directory-card { padding: 16px; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .esafe-um-directory-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .esafe-um-directory-topbar-left, .esafe-um-directory-topbar-right { display: flex; align-items: center; } .esafe-um-filter-link { font-size: 14px; color: #1e5476; text-decoration: none; cursor: pointer; } .esafe-um-filter-link:hover { color: #15394f; } .esafe-um-online-count-link { font-size: 14px; color: #1e5476; text-decoration: none; cursor: pointer; white-space: nowrap; } .esafe-um-online-count-link:hover { color: #15394f; } .esafe-um-online-count-link.is-active { color: #15394f; font-weight: 700; } .esafe-um-directory-header { margin-bottom: 16px; } .esafe-um-members-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; width: 100%; box-sizing: border-box; } @media (max-width: 720px) { .esafe-um-members-grid { grid-template-columns: 1fr; } } .esafe-um-member-card { display: block; width: 100%; text-align: left; padding: 0; background: #ffffff; border: 1px solid #d4dee6; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); overflow: hidden; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; } .esafe-um-member-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .esafe-um-member-card:focus { outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-member-banner { width: 100%; aspect-ratio: 16 / 9; background: #f5f8fb; } .esafe-um-member-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .esafe-um-member-banner-empty { width: 100%; height: 100%; } .esafe-um-member-body { position: relative; padding: 14px 14px 16px; } .esafe-um-member-status { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; } .esafe-um-status-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #d4dee6; } .esafe-um-status-dot.is-online { background: #1b7f4e; } .esafe-um-status-dot.is-offline { background: #9b2c2c; } .esafe-um-status-help { background: #F5F5F5; border: 1px solid #DADADA; padding: 0; line-height: 1; color: #1e5476; font-size: 14px; cursor: pointer; } .esafe-um-status-help:hover, .esafe-um-status-help:focus { color: #15394f; outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-status-tooltip { position: absolute; top: 18px; right: 0; width: 260px; background: #ffffff; border: 1px solid #d4dee6; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); padding: 10px 12px; font-size: 12px; line-height: 18px; color: #0f2330; display: none; z-index: 5; } .esafe-um-member-status.is-open .esafe-um-status-tooltip { display: block; } .esafe-um-member-avatar { width: 64px; height: 64px; border-radius: 8px; border: 1px solid #d4dee6; overflow: hidden; background: #ffffff; margin-top: -34px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .esafe-um-member-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .esafe-um-member-avatar-empty { width: 100%; height: 100%; background: #f5f8fb; } .esafe-um-member-name { margin-top: 12px; font-size: 16px; font-weight: 600; color: #0f2330; } .esafe-um-member-role { margin-top: 4px; font-size: 14px; color: #5a6a75; } .esafe-um-member-location { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid #d4dee6; font-family: var(--esafe-font-primary); font-size: 13px; line-height: 1.45; } .esafe-um-member-location > div { display: grid; grid-template-columns: minmax(78px, auto) minmax(0, 1fr); gap: 10px; margin: 0; } .esafe-um-member-location dt { margin: 0; color: #5a6a75; font-weight: 600; } .esafe-um-member-location dd { min-width: 0; margin: 0; color: #0f2330; overflow-wrap: anywhere; } /* Small popups (filter and online status help) */ .esafe-um-small-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; z-index: 10010; } .esafe-um-small-overlay.is-open { display: flex; } .esafe-um-small-modal { width: 92%; max-width: 420px; background: #ffffff; border: 1px solid #d4dee6; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); overflow: hidden; max-height: 80vh; display: flex; flex-direction: column; } .esafe-um-small-header { padding: 12px 14px; border-bottom: 1px solid #d4dee6; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .esafe-um-small-title { font-size: 16px; font-weight: 700; color: #0f2330; } .esafe-um-small-close { font-size: 14px; color: #1e5476; text-decoration: none; } .esafe-um-small-close:hover { color: #15394f; } .esafe-um-small-body { padding: 14px; overflow: auto; font-size: 14px; line-height: 20px; color: #0f2330; } /* Restricted avatar and banner library picker */ .esafe-um-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; width: 100%; box-sizing: border-box; } .esafe-um-library-item { width: 100%; padding: 0; border: 1px solid #d4dee6; border-radius: 10px; background: #ffffff; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: transform 160ms ease, box-shadow 160ms ease; } .esafe-um-library-item:hover, .esafe-um-library-item:focus { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-library-item img { width: 100%; height: 90px; object-fit: cover; display: block; } .esafe-um-filter-field input[type="text"], .esafe-um-filter-field select { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 10px; border: 1px solid #d4dee6; border-radius: 8px; background: #ffffff; } .esafe-um-filter-field + .esafe-um-filter-field { margin-top: 16px; } .esafe-um-filter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; } .esafe-um-status-help { width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* Members popup */ .esafe-um-members-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); --color-primary: #1e5476; --color-primary-dark: #15394f; --color-primary-light: #d7e4ec; --color-border: #d4dee6; --color-surface: #ffffff; display: none; align-items: center; justify-content: center; z-index: 9999; } .esafe-um-members-overlay.is-open { display: flex; } .esafe-um-members-popup { width: 90%; max-width: 720px; background: #ffffff; border: 1px solid #d4dee6; border-radius: 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); overflow: hidden; } .esafe-um-members-popup-header { background: #d7e4ec; padding: 12px 16px; border-bottom: 1px solid #d4dee6; display: flex; justify-content: flex-end; } .esafe-um-members-close { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 12px; background: #F5F5F5; color: #7A7A7A; border: 1px solid #DADADA; border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: color 120ms ease, border-color 120ms ease; } .esafe-um-members-close:hover, .esafe-um-members-close:focus { color: #C40228; border-color: rgba(241, 193, 193, 0.5); outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-members-popup-body { max-height: 70vh; overflow: auto; padding: 16px; } /* Popup branding block, Full Branding */ .esafe-um-popup-branding { margin-bottom: 14px; } .esafe-um-branding-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .esafe-um-branding-logo { width: 160px; max-width: 100%; height: auto; display: block; } .esafe-um-branding-line a { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 700; color: #19588F; text-decoration: none; } .esafe-um-branding-line a:hover, .esafe-um-branding-line a:focus { color: #C40228; text-decoration: none; } .esafe-um-branding-tag { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 12px; font-style: italic; color: #19588F; } .esafe-um-shortcode { box-sizing: border-box; padding-left: 12px; padding-right: 12px; } .esafe-um-member-status { position: absolute; } .esafe-um-status-tooltip { max-width: 220px; right: 0; left: auto; top: 22px; } .esafe-um-member-status .esafe-um-status-tooltip { display: none; } .esafe-um-member-status.is-open .esafe-um-status-tooltip { display: block; } .esafe-um-status-help { position: relative; z-index: 3; } .esafe-um-status-tooltip { position: absolute; z-index: 4; } /* Profile launcher shortcode */ .esafe-um-profile-launcher-card{ padding: 16px; overflow: visible; } .esafe-um-profile-launcher-row{ display: flex; justify-content: flex-end; overflow: visible; } .esafe-um-online-help-link{ margin-left: 6px; font-size: 14px; line-height: 20px; color: var(--color-primary, #1e5476); text-decoration: none; } .esafe-um-online-count-link.is-active{ font-weight: 600; } .esafe-um-filter-clear{ font-size: 14px; line-height: 20px; color: var(--color-primary, #1e5476); text-decoration: none; } /* Profile launcher hover menu */ .esafe-um-profile-menuwrap{ position: relative; display: inline-flex; align-items: center; justify-content: flex-end; overflow: visible; } .esafe-um-profile-menu{ display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: #ffffff; border: 1px solid #d4dee6; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); padding: 8px 10px; z-index: 10020; } .esafe-um-profile-menuwrap:hover .esafe-um-profile-menu, .esafe-um-profile-menuwrap:focus-within .esafe-um-profile-menu{ display: block; } .esafe-um-profile-menu a{ display: inline-block; font-size: 14px; line-height: 20px; color: #1e5476; text-decoration: none; } .esafe-um-profile-menu a:hover, .esafe-um-profile-menu a:focus{ color: #15394f; } /* Members directory pagination */ .esafe-um-directory-footer{ margin-top: 16px; display: flex; justify-content: flex-end; } .esafe-um-pagination{ display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .esafe-um-page-btn{ display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; background: #ffffff; border: 1px solid #d4dee6; border-radius: 8px; font-size: 14px; line-height: 20px; color: #1e5476; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.06); transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } .esafe-um-page-btn:hover, .esafe-um-page-btn:focus{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); outline: 2px solid #d7e4ec; outline-offset: 2px; } .esafe-um-page-btn.is-active{ background: #d7e4ec; font-weight: 700; color: #15394f; } .esafe-um-page-ellipsis{ font-size: 14px; line-height: 20px; color: #5a6a75; padding: 0 4px; } .esafe-um-pagination-status{ font-size: 14px; line-height: 20px; color: #5a6a75; margin-right: 6px; } .esafe-um-page-btn.is-disabled{ pointer-events: none; opacity: .6; } .esafe-um-help-trigger{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid #d4dee6;color:#1e5476;text-decoration:none;font-size:11px;line-height:1;margin-left:6px;background:#fff;vertical-align:middle} .esafe-um-help-required{color:#b42318;border-color:#b42318} .esafe-um-help-pop{position:relative;margin-top:12px} .esafe-um-help-pop-inner{border:1px solid #d4dee6;background:#fff;border-radius:12px;padding:12px;box-shadow:0 10px 25px rgba(15,35,48,.12)} .esafe-um-help-close{display:inline-block;margin-bottom:8px} .esafe-um-radio-group{display:flex;gap:16px;flex-wrap:wrap} .esafe-um-help-trigger{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid #d4dee6;color:#1e5476;text-decoration:none;font-size:11px;line-height:1;margin-left:6px;background:#fff;vertical-align:middle} .esafe-um-help-required{color:#b42318;border-color:#b42318} .esafe-um-radio-group{display:flex;gap:16px;flex-wrap:wrap} .esafe-um-shortcode .esafe-field, .esafe-um-members-overlay .esafe-field{position:relative;} .esafe-um-shortcode .esafe-um-help-trigger, .esafe-um-members-overlay .esafe-um-help-trigger{position:static;top:auto;right:auto;margin-left:6px;z-index:3;} .esafe-um-shortcode .esafe-um-profile-edit .esafe-label, .esafe-um-members-overlay .esafe-um-profile-edit .esafe-label{display:block!important;} /* Locked button directive override */ .esafe-um-shortcode .esafe-btn, .esafe-um-members-overlay .esafe-btn, .esafe-um-chat-popup .esafe-btn, .esafe-um-members-close, .esafe-um-chat-close, .esafe-um-page-btn, .esafe-um-status-help, .esafe-um-small-close{ display:inline-flex !important; align-items:center !important; justify-content:center !important; font-family:"Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size:14px !important; line-height:1 !important; min-height:30px; padding:7px 14px !important; background:#F5F5F5 !important; color:#7A7A7A !important; border:1px solid #DADADA !important; border-radius:10px !important; box-shadow:none !important; text-decoration:none !important; cursor:pointer !important; transition:transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease !important; } .esafe-um-shortcode .esafe-btn:hover, .esafe-um-shortcode .esafe-btn:focus, .esafe-um-members-overlay .esafe-btn:hover, .esafe-um-members-overlay .esafe-btn:focus, .esafe-um-chat-popup .esafe-btn:hover, .esafe-um-chat-popup .esafe-btn:focus, .esafe-um-members-close:hover, .esafe-um-members-close:focus, .esafe-um-chat-close:hover, .esafe-um-chat-close:focus, .esafe-um-page-btn:hover, .esafe-um-page-btn:focus, .esafe-um-status-help:hover, .esafe-um-status-help:focus, .esafe-um-small-close:hover, .esafe-um-small-close:focus{ background:#FFFFFF !important; color:#C40228 !important; border:1px solid #DADADA !important; border-radius:10px !important; box-shadow:0 0 6px 0 rgba(224, 90, 90, 0.5) !important; transform:translateY(-1px); outline:2px solid #1E3A8A !important; outline-offset:2px !important; text-decoration:none !important; } .esafe-um-shortcode .esafe-btn.active, .esafe-um-shortcode .esafe-btn.current, .esafe-um-shortcode .esafe-btn.is-selected, .esafe-um-shortcode .esafe-btn[aria-current="page"], .esafe-um-shortcode .esafe-btn[aria-selected="true"], .esafe-um-shortcode .esafe-btn[aria-pressed="true"], .esafe-um-page-btn.is-active{ background:#FFFFFF !important; color:#C40228 !important; box-shadow:0 0 6px 0 rgba(224, 90, 90, 0.5) !important; font-weight:400 !important; } .esafe-um-shortcode .esafe-btn[disabled], .esafe-um-shortcode .esafe-btn.disabled, .esafe-um-page-btn.is-disabled{ opacity:.6 !important; cursor:not-allowed !important; transform:none !important; } .esafe-um-directory-controls-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .esafe-um-user-count{font-size:14px;line-height:20px;color:#5a6a75} .esafe-um-user-count-number{font-weight:700;color:#0f2330} .esafe-um-group-chat-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .esafe-um-member-actions{margin-top:10px;display:flex;justify-content:center} .esafe-um-member-select-indicator{display:none;margin-top:8px;font-size:12px;line-height:18px;color:#C40228} .esafe-um-members-grid.is-selecting .esafe-um-member-card{cursor:pointer} .esafe-um-members-grid.is-selecting .esafe-um-member-card.is-selected{box-shadow:0 0 0 2px #C402286E, 0 6px 16px rgba(0,0,0,0.12)} .esafe-um-members-grid.is-selecting .esafe-um-member-card.is-selected .esafe-um-member-select-indicator{display:block} .esafe-um-chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:10040;padding:16px} .esafe-um-chat-overlay.is-open{display:flex} .esafe-um-chat-popup{width:min(560px, 100%);background:#ffffff;border:1px solid #d4dee6;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.12);overflow:hidden} .esafe-um-chat-popup-header{padding:12px 16px;border-bottom:1px solid #d4dee6;background:#f5f8fb;display:flex;justify-content:flex-end} .esafe-um-chat-popup-body{padding:16px;max-height:70vh;overflow:auto} .esafe-um-chat-popup .esafe-cp-chat-head{margin-top:0} .esafe-um-chat-popup .esafe-cp-message-list{max-height:320px} @media (max-width: 768px){ .esafe-um-directory-controls-right{align-items:stretch} .esafe-um-group-chat-actions{justify-content:stretch} .esafe-um-group-chat-actions .esafe-btn, .esafe-um-group-chat-toggle{width:100%} } /* E-Safe current formatting and popup spacing override v1.8.55 */ .esafe-um-shortcode, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay { --esafe-font-primary: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --esafe-font-secondary: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --esafe-heading-color: #1E5476; --esafe-text: #0F2330; --esafe-muted: #5A6A75; --esafe-meta: #9B9B9B; --esafe-link: #E30000; --esafe-link-hover: #0427C4; --esafe-border: #D4DEE6; --esafe-surface: #FFFFFF; --esafe-surface-alt: #F5F8FB; --esafe-soft-bg: #F5F5F5; --esafe-soft-border: #DADADA; --esafe-soft-text: #7A7A7A; --esafe-soft-hover-bg: #FFFFFF; --esafe-soft-hover-border: rgba(241, 193, 193, 0.5); --esafe-soft-hover-text: #D8677D; --esafe-soft-hover-shadow: 0 0 6px 0 rgba(224, 90, 90, 0.5); font-family: var(--esafe-font-primary) !important; color: var(--esafe-text); font-size: 15px; font-weight: 400; line-height: 1.10; font-synthesis: none; } .esafe-um-shortcode *, .esafe-um-members-overlay *, .esafe-um-small-overlay *, .esafe-um-chat-overlay * { box-sizing: border-box; font-synthesis: none; } .esafe-um-shortcode a:not(.esafe-btn):not(.esafe-um-page-btn), .esafe-um-members-overlay a:not(.esafe-btn):not(.esafe-um-page-btn), .esafe-um-small-overlay a:not(.esafe-btn):not(.esafe-um-page-btn), .esafe-um-chat-overlay a:not(.esafe-btn):not(.esafe-um-page-btn) { color: var(--esafe-link) !important; text-decoration: none !important; font-family: var(--esafe-font-primary) !important; } .esafe-um-shortcode a:not(.esafe-btn):not(.esafe-um-page-btn):hover, .esafe-um-shortcode a:not(.esafe-btn):not(.esafe-um-page-btn):focus, .esafe-um-members-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):hover, .esafe-um-members-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):focus, .esafe-um-small-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):hover, .esafe-um-small-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):focus, .esafe-um-chat-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):hover, .esafe-um-chat-overlay a:not(.esafe-btn):not(.esafe-um-page-btn):focus { color: var(--esafe-link-hover) !important; text-decoration: none !important; } .esafe-um-shortcode .esafe-h2, .esafe-um-members-overlay .esafe-h2, .esafe-um-small-overlay .esafe-h2, .esafe-um-chat-overlay .esafe-h2 { font-family: var(--esafe-font-secondary) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--esafe-heading-color) !important; margin: 0 0 12px 0 !important; } .esafe-um-shortcode .esafe-h3, .esafe-um-members-overlay .esafe-h3, .esafe-um-small-title, .esafe-um-chat-popup .esafe-cp-chat-head { font-family: var(--esafe-font-secondary) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--esafe-heading-color) !important; margin: 0 0 10px 0 !important; } .esafe-um-section-title, .esafe-um-profile-card .esafe-h4 { font-family: var(--esafe-font-secondary) !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--esafe-heading-color) !important; } .esafe-um-shortcode .esafe-small, .esafe-um-members-overlay .esafe-small, .esafe-um-help, .esafe-um-member-role, .esafe-um-user-count, .esafe-um-member-select-indicator, .esafe-um-small-body, .esafe-um-chat-popup-body { font-family: var(--esafe-font-primary) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--esafe-muted) !important; } .esafe-um-shortcode .esafe-btn, .esafe-um-members-overlay .esafe-btn, .esafe-um-chat-popup .esafe-btn, .esafe-um-members-close, .esafe-um-chat-close, .esafe-um-small-close, .esafe-um-status-help, .esafe-um-help-trigger, .esafe-um-library-item { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 31px !important; padding: 7px 14px !important; border: 1px solid var(--esafe-soft-border) !important; border-radius: 10px !important; background: var(--esafe-soft-bg) !important; box-shadow: none !important; color: var(--esafe-soft-text) !important; cursor: pointer !important; font-family: var(--esafe-font-primary) !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; white-space: normal !important; transition: all 0.25s ease !important; } .esafe-um-shortcode .esafe-btn:hover, .esafe-um-shortcode .esafe-btn:focus, .esafe-um-members-overlay .esafe-btn:hover, .esafe-um-members-overlay .esafe-btn:focus, .esafe-um-chat-popup .esafe-btn:hover, .esafe-um-chat-popup .esafe-btn:focus, .esafe-um-members-close:hover, .esafe-um-members-close:focus, .esafe-um-chat-close:hover, .esafe-um-chat-close:focus, .esafe-um-small-close:hover, .esafe-um-small-close:focus, .esafe-um-status-help:hover, .esafe-um-status-help:focus, .esafe-um-help-trigger:hover, .esafe-um-help-trigger:focus, .esafe-um-library-item:hover, .esafe-um-library-item:focus { background: var(--esafe-soft-hover-bg) !important; border-color: var(--esafe-soft-hover-border) !important; box-shadow: var(--esafe-soft-hover-shadow) !important; color: var(--esafe-soft-hover-text) !important; text-decoration: none !important; transform: translateY(-1px) !important; } .esafe-um-shortcode .esafe-btn:focus-visible, .esafe-um-members-overlay .esafe-btn:focus-visible, .esafe-um-chat-popup .esafe-btn:focus-visible, .esafe-um-members-close:focus-visible, .esafe-um-chat-close:focus-visible, .esafe-um-small-close:focus-visible, .esafe-um-status-help:focus-visible, .esafe-um-help-trigger:focus-visible, .esafe-um-library-item:focus-visible { outline: 2px solid #1E3A8A !important; outline-offset: 2px !important; } .esafe-um-shortcode .esafe-btn.active, .esafe-um-shortcode .esafe-btn.current, .esafe-um-shortcode .esafe-btn.is-selected, .esafe-um-shortcode .esafe-btn[aria-current="page"], .esafe-um-shortcode .esafe-btn[aria-selected="true"], .esafe-um-shortcode .esafe-btn[aria-pressed="true"] { background: var(--esafe-soft-hover-bg) !important; border-color: var(--esafe-soft-hover-border) !important; box-shadow: var(--esafe-soft-hover-shadow) !important; color: var(--esafe-soft-hover-text) !important; font-weight: 300 !important; } .esafe-um-page-btn { min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 6px 9px !important; border: 1px solid var(--esafe-soft-border) !important; border-radius: 10px !important; background: var(--esafe-soft-bg) !important; box-shadow: none !important; color: var(--esafe-soft-text) !important; font-family: var(--esafe-font-primary) !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1 !important; text-decoration: none !important; transition: all 0.25s ease !important; } .esafe-um-page-btn:hover, .esafe-um-page-btn:focus, .esafe-um-page-btn.is-active { background: var(--esafe-soft-hover-bg) !important; border-color: var(--esafe-soft-hover-border) !important; box-shadow: var(--esafe-soft-hover-shadow) !important; color: var(--esafe-soft-hover-text) !important; font-weight: 300 !important; transform: none !important; } .esafe-um-pagination-status, .esafe-um-page-ellipsis { font-family: var(--esafe-font-primary) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--esafe-meta) !important; } .esafe-um-pagination, .esafe-um-directory-footer { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; gap: 10px !important; margin-top: 18px !important; } .esafe-um-form label, .esafe-um-form .esafe-label, .esafe-um-filter-field label, .esafe-um-radio-group label { display: block !important; margin: 0 0 6px 0 !important; padding: 0 !important; width: auto !important; min-height: 0 !important; font-family: var(--esafe-font-primary) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.55 !important; letter-spacing: 0 !important; text-transform: none !important; color: #7A7A7A !important; } /* 1.9.16: Members page header, expansion control, and page-spacing contract. */ .esafe-um-directory-footer { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; } .esafe-um-directory-footer .esafe-um-see-more { align-self: flex-end !important; width: fit-content !important; margin: 0 0 0 auto !important; } .esafe-um-directory-footer .esafe-um-pagination { justify-content: flex-end !important; margin-top: 0 !important; } body.page-id-9245 .elementor-element-304ec05 > .e-con-inner { padding: 88px 32px 0 !important; align-items: flex-start !important; } body.page-id-9245 .elementor-element-304ec05, body.page-id-9245 .elementor-element-304ec05 > .e-con-inner { height: 113px !important; max-height: 113px !important; } body.page-id-9245 :is(.elementor-element-304ec05, .elementor-element-36fb321), body.page-id-9245 :is(.elementor-element-304ec05, .elementor-element-36fb321) > .e-con-inner { height: auto !important; min-height: 0 !important; } body.page-id-9245 .elementor-element-b5fa1a5 { width: min(100%, 900px) !important; padding: 0 !important; align-items: flex-start !important; justify-content: flex-start !important; } body.page-id-9245 .elementor-element-0b239f2 .elementor-heading-title { display: flex; align-items: center; gap: 12px; margin: 0 !important; color: #1e5476; font-family: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 20px !important; font-weight: 900 !important; line-height: 25px !important; letter-spacing: 0 !important; } body.page-id-9245 .elementor-element-0b239f2 .pageTitleIcon--users { width: 24px; height: 24px; flex: 0 0 24px; } body.page-id-9245 .elementor-element-36fb321 > .e-con-inner { padding: 12px 32px 0 !important; } body.page-id-9245 .elementor-element-7e3f272 { width: 100% !important; max-width: none !important; margin: 0 !important; } body.page-id-9245 .elementor-element-7e3f272 p { margin: 0 !important; color: #334155; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 21.75px !important; letter-spacing: 0 !important; } body.page-id-9245 .elementor-element-5b1dc72 > .e-con-inner { padding: 24px 0 32px !important; } body.page-id-9245 .elementor-element-fbea53c .esafe-um-shortcode { padding-right: 32px !important; padding-left: 32px !important; } body.page-id-9245 :is(.elementor-element-fe69790, .elementor-element-20046ef), body.page-id-9245 :is(.elementor-element-fe69790, .elementor-element-20046ef) > .e-con-inner { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; } @media (max-width: 767px) { body.page-id-9245 .elementor-element-304ec05, body.page-id-9245 .elementor-element-304ec05 > .e-con-inner { height: 73px !important; max-height: 73px !important; } body.page-id-9245 .elementor-element-304ec05 > .e-con-inner { padding: 48px 20px 0 !important; } body.page-id-9245 .elementor-element-36fb321 > .e-con-inner { padding: 12px 20px 0 !important; } body.page-id-9245 .elementor-element-5b1dc72 > .e-con-inner { padding: 24px 0 32px !important; } body.page-id-9245 .elementor-element-fbea53c .esafe-um-shortcode { padding-right: 20px !important; padding-left: 20px !important; } } .esafe-um-form input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), .esafe-um-form textarea, .esafe-um-form select, .esafe-um-filter-field input[type="text"], .esafe-um-filter-field select { display: block !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid var(--esafe-border) !important; border-radius: 10px !important; background: #FFFFFF !important; box-shadow: none !important; color: #A0A0A0 !important; font-family: var(--esafe-font-primary) !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.55 !important; letter-spacing: 0 !important; text-transform: none !important; } .esafe-um-form textarea { min-height: 112px !important; resize: vertical; } .esafe-um-form input::placeholder, .esafe-um-form textarea::placeholder { color: #A0A0A0 !important; opacity: 1 !important; } .esafe-um-form input:focus, .esafe-um-form textarea:focus, .esafe-um-form select:focus, .esafe-um-filter-field input[type="text"]:focus, .esafe-um-filter-field select:focus { outline: 2px solid rgba(30, 84, 118, 0.20) !important; outline-offset: 1px !important; border-color: #1E5476 !important; box-shadow: 0 0 0 3px rgba(30, 84, 118, 0.08) !important; } .esafe-um-form .esafe-btn, .esafe-um-form button, .esafe-um-form input[type="button"], .esafe-um-form input[type="submit"], .esafe-um-form input[type="reset"] { min-height: 36px !important; padding: 10px 16px !important; font-size: 14px !important; } .esafe-um-members-overlay .esafe-um-members-popup, .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup { display: flex !important; flex-direction: column !important; max-height: 90vh !important; min-height: 0 !important; background: var(--esafe-surface) !important; border: 1px solid var(--esafe-border) !important; border-radius: 10px !important; box-shadow: 0 0 8px 0 rgba(224, 90, 90, 0.25) !important; overflow: hidden !important; } .esafe-um-members-overlay .esafe-um-members-popup-body, .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { max-height: calc(90vh - 56px) !important; min-height: 0 !important; overflow: auto !important; padding: 16px !important; margin: 0 !important; } /* Shared profile component rules are defined in the final v1.8.61 parity block. */ .esafe-um-popup-branding { margin: 0 0 14px 0 !important; } .esafe-um-branding-line a { font-family: var(--esafe-font-primary) !important; font-size: 16px !important; font-weight: 600 !important; color: #1E5476 !important; text-decoration: none !important; } .esafe-um-branding-line a:hover, .esafe-um-branding-line a:focus { color: #D8677D !important; text-decoration: none !important; } .esafe-um-branding-tag { font-family: var(--esafe-font-primary) !important; font-size: 12px !important; font-style: italic !important; font-weight: 400 !important; color: #1E5476 !important; } @media (max-width: 767px) { .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay { align-items: flex-start !important; justify-content: center !important; padding: 10px !important; } .esafe-um-members-overlay .esafe-um-members-popup, .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup { width: 100% !important; max-width: none !important; max-height: calc(100vh - 20px) !important; margin: 0 !important; } .esafe-um-members-overlay .esafe-um-members-popup-body, .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { max-height: calc(100vh - 76px) !important; padding: 14px !important; } } /* Popup profile panels and Bio sizing are controlled by the shared v1.8.61 profile component. */ .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup, .esafe-um-members-overlay .esafe-um-members-popup { margin-top: 0 !important; margin-bottom: 0 !important; } .esafe-um-small-overlay .esafe-um-small-body > :first-child, .esafe-um-chat-overlay .esafe-um-chat-popup-body > :first-child, .esafe-um-members-overlay .esafe-um-members-popup-body > :first-child { margin-top: 0 !important; } .esafe-um-small-overlay .esafe-um-small-body > :last-child, .esafe-um-chat-overlay .esafe-um-chat-popup-body > :last-child, .esafe-um-members-overlay .esafe-um-members-popup-body > :last-child { margin-bottom: 0 !important; } /* v1.8.59 final E-Safe button directive enforcement */ .esafe-um-shortcode, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay { --esafe-button-bg: #F5F5F5; --esafe-button-border: #DADADA; --esafe-button-text: #7A7A7A; --esafe-button-hover-bg: #FFFFFF; --esafe-button-hover-border: rgba(241, 193, 193, 0.5); --esafe-button-hover-text: #D8677D; --esafe-button-hover-shadow: 0 0 6px 0 rgba(224, 90, 90, 0.5); --esafe-button-focus: #1E3A8A; } .esafe-um-shortcode :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn), .esafe-um-shortcode :is(.esafe-btn.primary, .esafe-btn.secondary, .esafe-btn.danger), .esafe-um-shortcode a.esafe-btn:link, .esafe-um-shortcode a.esafe-btn:visited, .esafe-um-members-overlay :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn), .esafe-um-members-overlay :is(.esafe-btn.primary, .esafe-btn.secondary, .esafe-btn.danger), .esafe-um-members-overlay a.esafe-btn:link, .esafe-um-members-overlay a.esafe-btn:visited, .esafe-um-chat-popup :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn), .esafe-um-chat-popup :is(.esafe-btn.primary, .esafe-btn.secondary, .esafe-btn.danger), .esafe-um-chat-popup a.esafe-btn:link, .esafe-um-chat-popup a.esafe-btn:visited, .esafe-um-members-close, .esafe-um-chat-close, .esafe-um-small-close, .esafe-um-help-close, .esafe-um-error-close, .esafe-um-status-help, .esafe-um-help-trigger { appearance: none !important; -webkit-appearance: none !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 31px !important; padding: 7px 14px !important; border: 1px solid var(--esafe-button-border) !important; border-radius: 10px !important; background: var(--esafe-button-bg) !important; box-shadow: none !important; color: var(--esafe-button-text) !important; cursor: pointer !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; font-synthesis: none !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-transform: none !important; text-shadow: none !important; white-space: normal !important; outline: none !important; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .25s ease !important; } .esafe-um-shortcode :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):hover, .esafe-um-shortcode :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):focus, .esafe-um-members-overlay :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):hover, .esafe-um-members-overlay :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):focus, .esafe-um-chat-popup :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):hover, .esafe-um-chat-popup :is(.esafe-btn, a.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn):focus, .esafe-um-members-close:hover, .esafe-um-members-close:focus, .esafe-um-chat-close:hover, .esafe-um-chat-close:focus, .esafe-um-small-close:hover, .esafe-um-small-close:focus, .esafe-um-help-close:hover, .esafe-um-help-close:focus, .esafe-um-error-close:hover, .esafe-um-error-close:focus, .esafe-um-status-help:hover, .esafe-um-status-help:focus, .esafe-um-help-trigger:hover, .esafe-um-help-trigger:focus { background: var(--esafe-button-hover-bg) !important; border-color: var(--esafe-button-hover-border) !important; box-shadow: var(--esafe-button-hover-shadow) !important; color: var(--esafe-button-hover-text) !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; transform: translateY(-1px) !important; outline: none !important; } .esafe-um-shortcode :is(.esafe-btn, a.esafe-btn, button.esafe-btn):focus-visible, .esafe-um-members-overlay :is(.esafe-btn, a.esafe-btn, button.esafe-btn):focus-visible, .esafe-um-chat-popup :is(.esafe-btn, a.esafe-btn, button.esafe-btn):focus-visible, .esafe-um-members-close:focus-visible, .esafe-um-chat-close:focus-visible, .esafe-um-small-close:focus-visible, .esafe-um-help-close:focus-visible, .esafe-um-error-close:focus-visible, .esafe-um-status-help:focus-visible, .esafe-um-help-trigger:focus-visible { outline: 2px solid var(--esafe-button-focus) !important; outline-offset: 2px !important; } .esafe-um-shortcode :is(.esafe-btn.active, .esafe-btn.current, .esafe-btn.is-selected, .esafe-btn[aria-current="page"], .esafe-btn[aria-selected="true"], .esafe-btn[aria-pressed="true"]), .esafe-um-members-overlay :is(.esafe-btn.active, .esafe-btn.current, .esafe-btn.is-selected, .esafe-btn[aria-current="page"], .esafe-btn[aria-selected="true"], .esafe-btn[aria-pressed="true"]), .esafe-um-chat-popup :is(.esafe-btn.active, .esafe-btn.current, .esafe-btn.is-selected, .esafe-btn[aria-current="page"], .esafe-btn[aria-selected="true"], .esafe-btn[aria-pressed="true"]) { background: var(--esafe-button-hover-bg) !important; border: 1px solid var(--esafe-button-hover-border) !important; box-shadow: var(--esafe-button-hover-shadow) !important; color: var(--esafe-button-hover-text) !important; font-weight: 300 !important; } .esafe-um-shortcode :is(.esafe-btn[disabled], .esafe-btn.disabled), .esafe-um-members-overlay :is(.esafe-btn[disabled], .esafe-btn.disabled), .esafe-um-chat-popup :is(.esafe-btn[disabled], .esafe-btn.disabled) { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; } .esafe-um-shortcode .esafe-um-form :is(.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn), .esafe-um-members-overlay .esafe-um-form :is(.esafe-btn, button.esafe-btn, input[type="button"].esafe-btn, input[type="submit"].esafe-btn, input[type="reset"].esafe-btn) { min-height: 36px !important; padding: 10px 16px !important; font-size: 14px !important; } .esafe-um-page-btn, .esafe-um-page-btn:link, .esafe-um-page-btn:visited { min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 6px 9px !important; border: 1px solid var(--esafe-button-border) !important; border-radius: 10px !important; background: var(--esafe-button-bg) !important; box-shadow: none !important; color: var(--esafe-button-text) !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1 !important; text-decoration: none !important; outline: none !important; } .esafe-um-page-btn:hover, .esafe-um-page-btn:focus, .esafe-um-page-btn.is-active { background: var(--esafe-button-hover-bg) !important; border-color: var(--esafe-button-hover-border) !important; box-shadow: var(--esafe-button-hover-shadow) !important; color: var(--esafe-button-hover-text) !important; font-weight: 300 !important; transform: none !important; outline: none !important; } .esafe-um-page-btn:focus-visible { outline: 2px solid var(--esafe-button-focus) !important; outline-offset: 2px !important; } .esafe-um-library-item { border: 1px solid var(--esafe-button-border) !important; background: #FFFFFF !important; border-radius: 10px !important; box-shadow: none !important; outline: none !important; } .esafe-um-library-item:hover, .esafe-um-library-item:focus { border-color: var(--esafe-button-hover-border) !important; box-shadow: var(--esafe-button-hover-shadow) !important; transform: translateY(-1px) !important; outline: none !important; } .esafe-um-library-item:focus-visible { outline: 2px solid var(--esafe-button-focus) !important; outline-offset: 2px !important; } /* v1.8.61 shared profile component and complete popup containment */ .esafe-um-profile-component { width: 100% !important; max-width: 720px !important; margin: 0 auto !important; padding: 0 !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; color: #0F2330 !important; box-sizing: border-box !important; } .esafe-um-members-overlay .esafe-um-profile-component { max-width: none !important; margin: 0 !important; } /* The overlay is only a viewport container. The shared shell owns all visible profile chrome. */ .esafe-um-members-overlay .esafe-um-members-popup { background: transparent !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; } .esafe-um-profile-component *, .esafe-um-profile-component *::before, .esafe-um-profile-component *::after { box-sizing: border-box !important; font-synthesis: none !important; } /* No User Management hyperlink may show a line decoration in any state or viewport. */ :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a, :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a:link, :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a:visited, :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a:hover, :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a:focus, :is( .esafe-um-shortcode, .esafe-um-profile-component, .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay, .esafe-um-chat-popup ) a:active { text-decoration: none !important; text-decoration-line: none !important; text-decoration-thickness: 0 !important; } .esafe-um-profile-shell { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 1px solid #D4DEE6 !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important; overflow: hidden !important; } .esafe-um-profile-shell-header { position: sticky !important; top: 0 !important; z-index: 30 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; width: 100% !important; min-height: 56px !important; margin: 0 !important; padding: 12px 16px !important; background: #F5F8FB !important; border-bottom: 1px solid #D4DEE6 !important; } .esafe-um-profile-branding { min-width: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } .esafe-um-profile-branding-logo { flex: 0 0 auto !important; display: block !important; width: 120px !important; max-width: 160px !important; height: auto !important; margin: 0 !important; } .esafe-um-profile-branding-text { min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .esafe-um-profile-branding-line, .esafe-um-profile-branding-line a { margin: 0 !important; padding: 0 !important; color: #1E5476 !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 16px !important; font-style: normal !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: normal !important; } .esafe-um-profile-branding-line a:hover, .esafe-um-profile-branding-line a:focus { color: #C40228 !important; } .esafe-um-profile-branding-tag { margin: 2px 0 0 !important; padding: 0 !important; color: #1E5476 !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 12px !important; font-style: italic !important; font-weight: 400 !important; line-height: 1.2 !important; } .esafe-um-profile-shell-header .esafe-um-profile-close { flex: 0 0 auto !important; margin: 0 !important; } /* The complete profile content, from banner through actions, has one even inset. */ .esafe-um-profile-component .esafe-um-profile-shell-content { width: 100% !important; margin: 0 !important; padding: 24px !important; background: #FFFFFF !important; } .esafe-um-profile-component .esafe-um-profile-card, .esafe-um-profile-component .esafe-um-profile-card-popup { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } .esafe-um-profile-component .esafe-um-profile-card > :first-child { margin-top: 0 !important; } .esafe-um-profile-component .esafe-um-profile-card > :last-child { margin-bottom: 0 !important; } .esafe-um-profile-media { width: 100% !important; margin: 0 !important; padding: 0 !important; } .esafe-um-profile-display, .esafe-um-profile-edit { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-form { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Profile display and edit line spacing is identical at every breakpoint. */ .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-fieldline, .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-label, .esafe-um-profile-component .esafe-um-profile-fields .esafe-text, .esafe-um-profile-component .esafe-um-profile-edit .esafe-field, .esafe-um-profile-component .esafe-um-profile-edit .esafe-label, .esafe-um-profile-component .esafe-um-profile-edit .esafe-input, .esafe-um-profile-component .esafe-um-profile-edit .esafe-textarea, .esafe-um-profile-component .esafe-um-profile-edit select.esafe-input, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-radio-group, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-radio-group label { line-height: 1.55 !important; } .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-fieldline { margin: 10px 0 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-display-name-row, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-display-name-field { padding-top: 0 !important; } .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-bio-row .esafe-text, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-bio-field textarea, .esafe-um-profile-component .esafe-um-profile-edit textarea#esafe_um_description, .esafe-um-profile-component .esafe-um-profile-edit textarea[name="description"] { line-height: 1.55 !important; } /* Edit fields retain a visible outline and the controlled E-Safe form treatment. */ .esafe-um-profile-component .esafe-um-profile-edit .esafe-field { width: 100% !important; min-height: 0 !important; margin: 0 0 18px !important; padding-left: 0 !important; padding-right: 0 !important; } .esafe-um-profile-component .esafe-um-profile-edit .esafe-label, .esafe-um-profile-component .esafe-um-profile-edit label { color: #7A7A7A !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; } .esafe-um-profile-component .esafe-um-profile-edit :is( input.esafe-input, select.esafe-input, textarea.esafe-textarea ) { display: block !important; width: 100% !important; min-height: 42px !important; margin: 0 !important; padding: 9px 12px !important; border: 1px solid #D4DEE6 !important; border-radius: 10px !important; outline: 1px solid #D4DEE6 !important; outline-offset: 0 !important; background: #FFFFFF !important; box-shadow: none !important; color: #A0A0A0 !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; letter-spacing: 0 !important; } .esafe-um-profile-component .esafe-um-profile-edit :is( input.esafe-input, select.esafe-input, textarea.esafe-textarea ):focus { border-color: #1E5476 !important; outline: 2px solid rgba(30, 84, 118, 0.20) !important; outline-offset: 1px !important; box-shadow: 0 0 0 3px rgba(30, 84, 118, 0.08) !important; } .esafe-um-profile-component .esafe-um-profile-edit input::placeholder, .esafe-um-profile-component .esafe-um-profile-edit textarea::placeholder { color: #A0A0A0 !important; opacity: 1 !important; } .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-bio-field textarea, .esafe-um-profile-component .esafe-um-profile-edit textarea#esafe_um_description, .esafe-um-profile-component .esafe-um-profile-edit textarea[name="description"] { min-height: 150px !important; height: 150px !important; max-height: 300px !important; overflow-x: hidden !important; overflow-y: auto !important; resize: vertical !important; white-space: pre-wrap !important; } .esafe-um-profile-component .esafe-um-radio-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; margin: 6px 0 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-radio-group label { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } /* All profile actions use one button component in all views. */ .esafe-um-profile-component .esafe-um-profile-actions, .esafe-um-profile-component .esafe-um-form-actions { position: relative !important; z-index: 2 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; width: 100% !important; min-height: 0 !important; margin: 18px 0 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-profile-actions > :is(a.esafe-btn, button.esafe-btn), .esafe-um-profile-component .esafe-um-form-actions > :is(a.esafe-btn, button.esafe-btn, input.esafe-btn), .esafe-um-profile-component .esafe-um-profile-close { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 31px !important; margin: 0 !important; padding: 7px 14px !important; border: 1px solid #DADADA !important; border-radius: 10px !important; outline: 0 !important; background: #F5F5F5 !important; box-shadow: none !important; color: #7A7A7A !important; cursor: pointer !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; letter-spacing: 0 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-decoration-line: none !important; text-transform: none !important; white-space: normal !important; transition: all .25s ease !important; } .esafe-um-profile-component .esafe-um-profile-actions > :is(a.esafe-btn, button.esafe-btn):hover, .esafe-um-profile-component .esafe-um-profile-actions > :is(a.esafe-btn, button.esafe-btn):focus, .esafe-um-profile-component .esafe-um-form-actions > :is(a.esafe-btn, button.esafe-btn, input.esafe-btn):hover, .esafe-um-profile-component .esafe-um-form-actions > :is(a.esafe-btn, button.esafe-btn, input.esafe-btn):focus, .esafe-um-profile-component .esafe-um-profile-close:hover, .esafe-um-profile-component .esafe-um-profile-close:focus { border-color: rgba(241, 193, 193, 0.5) !important; background: #FFFFFF !important; box-shadow: 0 0 6px 0 rgba(224, 90, 90, 0.5) !important; color: #D8677D !important; text-decoration: none !important; text-decoration-line: none !important; transform: translateY(-1px) !important; } .esafe-um-profile-component .esafe-um-profile-actions > :is(a.esafe-btn, button.esafe-btn):focus-visible, .esafe-um-profile-component .esafe-um-form-actions > :is(a.esafe-btn, button.esafe-btn, input.esafe-btn):focus-visible, .esafe-um-profile-component .esafe-um-profile-close:focus-visible { outline: 2px solid #1E3A8A !important; outline-offset: 2px !important; } /* Controlled embedded panels and profile help windows. */ .esafe-um-profile-component .esafe-um-profile-embedded-panel, .esafe-um-profile-component .esafe-um-email-preferences-panel { width: 100% !important; max-width: 100% !important; min-height: 0 !important; max-height: none !important; margin: 18px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #D4DEE6 !important; overflow-x: hidden !important; overflow-y: visible !important; } .esafe-um-profile-component .esafe-um-help-pop, .esafe-um-profile-component .esafe-um-error-pop { width: 100% !important; margin: 12px 0 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-help-pop-inner, .esafe-um-profile-component .esafe-um-error-pop .esafe-um-help-pop-inner { width: 100% !important; max-width: 100% !important; max-height: 50vh !important; margin: 0 !important; padding: 16px !important; border: 1px solid #D4DEE6 !important; border-radius: 10px !important; background: #FFFFFF !important; overflow: auto !important; } /* Every public popup uses one controlled header/body scroll model. */ .esafe-um-members-overlay.is-open, .esafe-um-small-overlay.is-open, .esafe-um-chat-overlay.is-open { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } .esafe-um-members-overlay .esafe-um-members-popup, .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup { display: flex !important; flex-direction: column !important; min-height: 0 !important; max-height: calc(100vh - 32px) !important; max-height: calc(100dvh - 32px) !important; margin: 0 auto !important; overflow: hidden !important; } .esafe-um-members-overlay .esafe-um-members-popup-body, .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } .esafe-um-members-overlay .esafe-um-members-popup-body { padding: 0 !important; } .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { padding: 16px !important; } .esafe-um-small-overlay .esafe-um-small-header, .esafe-um-chat-overlay .esafe-um-chat-popup-header { position: sticky !important; top: 0 !important; z-index: 20 !important; flex: 0 0 auto !important; } @media (max-width: 767px) { .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay { --esafe-um-mobile-popup-safe-top: 72px; } .esafe-um-members-overlay.is-open, .esafe-um-small-overlay.is-open, .esafe-um-chat-overlay.is-open { position: fixed !important; top: calc(var(--esafe-um-mobile-popup-safe-top, 72px) + env(safe-area-inset-top, 0px)) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; align-items: flex-start !important; justify-content: center !important; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; overflow-x: hidden !important; overflow-y: auto !important; touch-action: pan-y !important; } .esafe-um-members-overlay .esafe-um-members-popup, .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup { width: 100% !important; max-width: none !important; height: auto !important; max-height: calc(100vh - var(--esafe-um-mobile-popup-safe-top, 72px) - 20px) !important; max-height: calc(100dvh - var(--esafe-um-mobile-popup-safe-top, 72px) - 20px) !important; } .esafe-um-members-overlay .esafe-um-members-popup-body, .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { max-height: none !important; } .esafe-um-members-overlay .esafe-um-members-popup-body { padding: 0 !important; } .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { padding: 16px !important; } .esafe-um-profile-component .esafe-um-profile-shell-header { gap: 10px !important; min-height: 50px !important; padding: 10px 12px !important; } .esafe-um-profile-component .esafe-um-profile-branding { gap: 8px !important; } .esafe-um-profile-component .esafe-um-profile-branding-logo { width: 84px !important; } .esafe-um-profile-component .esafe-um-profile-branding-line, .esafe-um-profile-component .esafe-um-profile-branding-line a { font-size: 12px !important; line-height: 1.15 !important; } .esafe-um-profile-component .esafe-um-profile-branding-tag { font-size: 10px !important; line-height: 1.15 !important; } .esafe-um-profile-component .esafe-um-profile-shell-content { padding: 14px !important; } .esafe-um-profile-component .esafe-um-profile-actions, .esafe-um-profile-component .esafe-um-form-actions { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; margin: 18px 0 0 !important; padding: 0 !important; gap: 12px !important; } .esafe-um-profile-component .esafe-um-profile-actions > :is(a.esafe-btn, button.esafe-btn), .esafe-um-profile-component .esafe-um-form-actions > :is(a.esafe-btn, button.esafe-btn, input.esafe-btn) { width: 100% !important; } .esafe-um-profile-component .esafe-um-radio-group { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; } } /* v1.8.61 plugin-wide hyperlink decoration lock */ a[class*="esafe-um-"], a[class*="esafe-um-"]:link, a[class*="esafe-um-"]:visited, a[class*="esafe-um-"]:hover, a[class*="esafe-um-"]:focus, a[class*="esafe-um-"]:active { text-decoration: none !important; text-decoration-line: none !important; text-decoration-thickness: 0 !important; text-underline-offset: 0 !important; } a[class*="esafe-um-"] { background-image: none !important; } /* v1.8.61 high-specificity hyperlink decoration lock against theme and Elementor rules */ .esafe-ui.esafe-plugin-wrap.esafe-um-profile-component a, .esafe-um-shortcode.esafe-shortcode a, .esafe-um-members-overlay.is-open a, .esafe-um-small-overlay.is-open a, .esafe-um-chat-overlay.is-open a, .esafe-um-chat-popup a { text-decoration: none !important; text-decoration-line: none !important; text-decoration-thickness: 0 !important; text-underline-offset: 0 !important; } .esafe-ui.esafe-plugin-wrap.esafe-um-profile-component a, .esafe-um-shortcode.esafe-shortcode a, .esafe-um-members-overlay.is-open a, .esafe-um-small-overlay.is-open a, .esafe-um-chat-overlay.is-open a, .esafe-um-chat-popup a { background-image: none !important; } /* Remove border-based theme underlines only from text links, never from button or card links. */ .esafe-um-profile-component :is(a.esafe-text, .esafe-um-profile-branding-line a, .esafe-um-help-close, .esafe-um-error-close), .esafe-um-shortcode :is(.esafe-um-link, .esafe-um-filter-link, .esafe-um-filter-clear, .esafe-um-online-count-link, .esafe-um-online-help-link, .esafe-um-sort, .esafe-um-profile-menu a), .esafe-um-small-overlay :is(.esafe-um-help-global-close, .esafe-um-library-close), .esafe-um-chat-overlay .esafe-um-link { border-bottom: 0 !important; } /* v1.8.62 mobile profile social-row containment */ .esafe-um-social-link.is-esafe-um-social-hidden { display: none !important; } /* v1.8.64 exact shared banner-to-profile spacing and true social centering */ .esafe-um-profile-component .esafe-um-profile-media { margin: 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-profile-banner-gap { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .esafe-um-profile-component .esafe-um-profile-banner-gap .esafe-um-social-links { box-sizing: border-box !important; display: flex !important; flex-flow: row nowrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; overflow: hidden !important; } .esafe-um-profile-component .esafe-um-profile-banner-gap .esafe-um-social-link { flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; } .esafe-um-profile-component .esafe-um-profile-display, .esafe-um-profile-component .esafe-um-profile-edit { margin: 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-display-name-row, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-display-name-field { margin-top: 0 !important; padding-top: 0 !important; } .esafe-um-profile-component .esafe-um-name-guidance { margin: -6px 0 12px !important; padding: 0 !important; } @media (max-width: 767px) { .esafe-um-profile-component .esafe-um-profile-banner-gap, .esafe-um-profile-component .esafe-um-profile-banner-gap .esafe-um-social-links, .esafe-um-profile-component .esafe-um-profile-display, .esafe-um-profile-component .esafe-um-profile-edit, .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-display-name-row, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-display-name-field { margin-top: 0 !important; } } /* v1.8.65 mobile-only banner, avatar, social-row, and profile-start spacing */ @media (max-width: 767px) { /* Desktop remains unchanged. On mobile, social icons start 50px below the banner and the profile information starts 40px below the icons. */ .esafe-um-profile-component .esafe-um-profile-banner-gap.has-social-links { box-sizing: border-box !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; height: 124px !important; min-height: 124px !important; max-height: 124px !important; margin: 0 !important; padding: 50px 0 40px !important; overflow: hidden !important; } .esafe-um-profile-component .esafe-um-profile-banner-gap.has-social-links .esafe-um-social-links { align-self: flex-start !important; width: 100% !important; max-width: 100% !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; justify-content: center !important; } /* Profiles without social links keep the prior compact 40px bridge. */ .esafe-um-profile-component .esafe-um-profile-banner-gap.no-social-links { height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important; padding: 0 !important; } .esafe-um-profile-component .esafe-um-profile-display, .esafe-um-profile-component .esafe-um-profile-edit, .esafe-um-profile-component .esafe-um-profile-fields .esafe-um-display-name-row, .esafe-um-profile-component .esafe-um-profile-edit .esafe-um-display-name-field { margin-top: 0 !important; padding-top: 0 !important; } } /* Phase 6 account security and account lifecycle sections */ .esafe-um-account-security { width: 100%; box-sizing: border-box; font-family: var(--esafe-font-primary, "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif); color: #0F2330; } .esafe-um-account-security > .esafe-h3, .esafe-um-account-security > .esafe-small { margin-left: 0; margin-right: 0; } .esafe-um-account-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; } .esafe-um-account-tab { min-height: 31px; padding: 7px 14px; border: 1px solid #DADADA; border-radius: 10px; background: #F5F5F5; color: #7A7A7A; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; } .esafe-um-account-tab:hover, .esafe-um-account-tab:focus-visible, .esafe-um-account-tab.is-active { border-color: rgba(241, 193, 193, .5); background: #FFFFFF; box-shadow: 0 0 6px 0 rgba(224, 90, 90, .5); color: #D8677D; text-decoration: none; } .esafe-um-account-tab:focus-visible { outline: 2px solid #1E5476; outline-offset: 2px; } .esafe-um-account-panel { margin: 0; padding: 16px; border: 1px solid #D4DEE6; border-radius: 10px; background: #FFFFFF; box-sizing: border-box; } .esafe-um-account-panel[hidden] { display: none !important; } .esafe-um-account-panel .esafe-h4 { margin: 0 0 12px; } .esafe-um-account-form { display: grid; gap: 18px; margin-top: 14px; } .esafe-um-account-notice { margin: 12px 0; padding: 12px; border: 1px solid #D4DEE6; border-radius: 10px; background: #F5F8FB; color: #0F2330; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; } .esafe-um-account-confirm { display: flex; align-items: flex-start; gap: 8px; color: #7A7A7A; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.55; } .esafe-um-account-confirm input { margin-top: 4px; } .esafe-um-account-response { min-height: 20px; color: #5A6A75; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; } .esafe-um-account-response[data-status="error"] { color: #8B0000; } .esafe-um-account-response[data-status="success"] { color: #1E5476; } .esafe-um-profile-embedded-panel .esafe-um-account-security.is-embedded { margin-top: 0; } @media (max-width: 600px) { .esafe-um-account-tabs { flex-direction: column; } .esafe-um-account-tab { width: 100%; } .esafe-um-account-panel { padding: 14px; } } /* Version 1.8.75 nested Account Security and passkey containment. */ .esafe-um-profile-component, .esafe-um-profile-component .esafe-um-profile-shell, .esafe-um-profile-component .esafe-um-profile-shell-content, .esafe-um-profile-component .esafe-um-profile-card, .esafe-um-profile-component .esafe-um-profile-card-popup, .esafe-um-profile-component .esafe-um-profile-display, .esafe-um-profile-component .esafe-um-profile-edit, .esafe-um-profile-component .esafe-um-profile-embedded-panel, .esafe-um-profile-component .esafe-sam-passkeys, .esafe-um-profile-component .esafe-sam-passkeys > * { min-width: 0 !important; max-width: 100% !important; } .esafe-um-profile-component .esafe-sam-passkeys { width: 100% !important; overflow: visible !important; } .esafe-um-profile-component .esafe-sam-passkeys .esafe-table-wrap { max-width: 100% !important; } @media (max-width: 767px) { .esafe-um-profile-component .esafe-um-profile-shell-content { padding: 14px !important; } .esafe-um-profile-component .esafe-um-profile-embedded-panel { margin-top: 14px !important; padding-top: 14px !important; } } @media (max-width: 420px) { .esafe-um-members-overlay.is-open { padding-right: 6px !important; padding-left: 6px !important; } .esafe-um-profile-component .esafe-um-profile-shell-content { padding: 10px !important; } } /* Version 1.8.76 administrator profile editor and public identity protection. */ .esafe-um-member-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .esafe-um-member-actions .esafe-btn { min-height: 30px; padding: 7px 12px; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 300; line-height: 1; } .esafe-um-admin-profile-section { margin: 16px 0 0; padding: 14px; border: 1px solid #D4DEE6; border-radius: 10px; background: #F5F8FB; } .esafe-um-admin-profile-section .esafe-h4 { margin: 0 0 6px; color: #1E5476; font-family: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.25; } .esafe-um-admin-profile-section .esafe-um-rolesgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .esafe-um-admin-profile-section .esafe-um-cap { display: flex; align-items: flex-start; gap: 7px; color: #0F2330; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; } @media (max-width: 767px) { .esafe-um-admin-profile-section .esafe-um-rolesgrid { grid-template-columns: 1fr; } } /* Version 1.8.78 dot-free profile identity fields and taller desktop profile viewport. */ @media (min-width: 768px) { .esafe-um-members-overlay.is-open { padding: 4px !important; } .esafe-um-members-overlay .esafe-um-members-popup { height: auto !important; max-height: calc(100vh - 8px) !important; max-height: calc(100dvh - 8px) !important; } .esafe-um-members-overlay .esafe-um-members-popup-body { height: auto !important; max-height: calc(100vh - 8px) !important; max-height: calc(100dvh - 8px) !important; overflow-y: auto !important; } } /* v1.8.89 universal popup stacking and viewport containment */ .esafe-um-members-overlay, .esafe-um-small-overlay, .esafe-um-chat-overlay { align-items: flex-start !important; justify-content: center !important; padding: var(--esafe-popup-safe-top, 12px) 12px 12px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; } .esafe-um-members-popup, .esafe-um-small-modal, .esafe-um-chat-popup { margin: 0 auto !important; max-height: calc(100vh - var(--esafe-popup-safe-top, 12px) - 12px) !important; max-height: calc(100dvh - var(--esafe-popup-safe-top, 12px) - 12px) !important; overflow: hidden !important; } .esafe-um-members-popup-body, .esafe-um-small-body, .esafe-um-chat-popup-body { max-height: calc(100vh - var(--esafe-popup-safe-top, 12px) - 78px) !important; max-height: calc(100dvh - var(--esafe-popup-safe-top, 12px) - 78px) !important; overflow-y: auto !important; scrollbar-gutter: auto !important; } /* v1.8.89 informational asterisks remain compact links, not action buttons. */ .esafe-um-shortcode :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help, .esafe-um-users-help), .esafe-um-members-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help), .esafe-um-small-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help), .esafe-um-chat-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help) { appearance: none !important; -webkit-appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 12px !important; max-width: none !important; height: auto !important; min-height: 0 !important; padding: 0 2px !important; margin: 0 0 0 3px !important; border: 0 !important; border-radius: 2px !important; background: transparent !important; box-shadow: none !important; color: #E30000 !important; cursor: pointer !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-size: 13px !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1 !important; text-decoration: none !important; text-transform: none !important; vertical-align: super !important; transform: none !important; transition: color .25s ease !important; } .esafe-um-shortcode :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help, .esafe-um-users-help):hover, .esafe-um-shortcode :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help, .esafe-um-users-help):focus-visible, .esafe-um-members-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help):hover, .esafe-um-members-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help):focus-visible, .esafe-um-small-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help):hover, .esafe-um-small-overlay :is(.esafe-um-help-trigger, .esafe-um-status-help, .esafe-um-online-help-link, .esafe-um-sc-help):focus-visible { border: 0 !important; background: transparent !important; box-shadow: none !important; color: #0427C4 !important; outline: 2px solid rgba(30,84,118,.35) !important; outline-offset: 2px !important; transform: none !important; } /* v1.8.89 final desktop-specific popup containment override. * This intentionally matches the older high-specificity desktop selectors so * the active profile header always remains below the WordPress admin bar and * browser chrome after resize. Only the popup body scrolls when necessary. */ .esafe-um-members-overlay.is-open, .esafe-um-small-overlay.is-open, .esafe-um-chat-overlay.is-open { align-items: flex-start !important; justify-content: center !important; padding: var(--esafe-popup-safe-top, 12px) 12px 12px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; } .esafe-um-members-overlay .esafe-um-members-popup, .esafe-um-small-overlay .esafe-um-small-modal, .esafe-um-chat-overlay .esafe-um-chat-popup { height: auto !important; margin: 0 auto !important; max-height: calc(100vh - var(--esafe-popup-safe-top, 12px) - 12px) !important; max-height: calc(100dvh - var(--esafe-popup-safe-top, 12px) - 12px) !important; overflow: hidden !important; } .esafe-um-members-overlay .esafe-um-members-popup-body, .esafe-um-small-overlay .esafe-um-small-body, .esafe-um-chat-overlay .esafe-um-chat-popup-body { height: auto !important; max-height: calc(100vh - var(--esafe-popup-safe-top, 12px) - 78px) !important; max-height: calc(100dvh - var(--esafe-popup-safe-top, 12px) - 78px) !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: auto !important; } .esafe-um-generated-display-name { padding: 10px 12px; border: 1px solid #D4DEE6; border-radius: 10px; background: #F5F8FB; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .esafe-um-generated-identity-label { display: inline; color: #7A7A7A; font-size: 15px; font-weight: 400; line-height: 1.55; } .esafe-um-generated-identity-value { display: inline; margin-left: 4px; color: #0F2330; font-size: 14px; font-weight: 400; line-height: 1.55; } /* ESAFE_SAFE_FORM_ANNOTATION_V3 */ .esafe-um-form-help-note { box-sizing: border-box; width: 100%; margin: 0 0 14px; padding: 9px 11px; border: 1px solid #D4DEE6; border-radius: 10px; background: #F5F8FB; color: #5A6A75; font-family: var(--esafe-font-primary, "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.45; } .esafe-um-help-trigger.esafe-um-help-optional, .esafe-um-help-trigger.esafe-um-help-optional:visited { color: #7A7A7A !important; } .esafe-um-help-trigger.esafe-um-help-required, .esafe-um-help-trigger.esafe-um-help-required:visited { color: #C40228 !important; } .esafe-um-field-marker { display: inline-flex; align-items: center; width: max-content; margin: 0 0 4px; } @media (max-width: 767px) { .esafe-um-form-help-note { margin-bottom: 10px; padding: 8px 9px; } } /* Ordinary profile-form checkboxes stay at the surrounding text size. */ .esafe-um-profile-component input[type="checkbox"]:not([role="switch"]), .esafe-um-profile-popup input[type="checkbox"]:not([role="switch"]), .esafe-um-form input[type="checkbox"]:not([role="switch"]) { box-sizing: border-box !important; width: 1em !important; height: 1em !important; min-width: 1em !important; min-height: 1em !important; max-width: 1em !important; max-height: 1em !important; flex: 0 0 1em !important; margin: 0.15em 0.45em 0 0 !important; padding: 0 !important; vertical-align: -0.1em !important; accent-color: #0b2e4f; } /* v1.9.24 Members directory responsive toolbar */ .esafe-um-directory-card .esafe-um-group-chat-actions[hidden] { display: none !important; } @media (max-width: 767px) { .esafe-um-directory-card .esafe-um-directory-topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: start !important; gap: 12px !important; margin-bottom: 16px !important; } .esafe-um-directory-card .esafe-um-directory-topbar-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; } .esafe-um-directory-card .esafe-um-directory-topbar-left .esafe-filter-standard--inline { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; min-height: 38px !important; gap: 8px !important; margin: 0 !important; } .esafe-um-directory-card .esafe-um-directory-topbar-left .esafe-filter-standard__button { flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 !important; } .esafe-um-directory-card .esafe-um-directory-controls-right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: center !important; justify-items: start !important; width: 100% !important; min-width: 0 !important; gap: 8px 12px !important; } .esafe-um-directory-card .esafe-um-user-count, .esafe-um-directory-card .esafe-um-online-tools { min-width: 0 !important; font-size: 14px !important; line-height: 20px !important; } .esafe-um-directory-card .esafe-um-online-tools { justify-self: end !important; text-align: right !important; } .esafe-um-directory-card .esafe-um-group-chat-toggle, .esafe-um-directory-card .esafe-um-group-chat-actions { grid-column: 1 / -1 !important; width: 100% !important; } .esafe-um-directory-card .esafe-um-group-chat-actions:not([hidden]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } .esafe-um-shortcode .esafe-um-status-help, .esafe-um-members-overlay .esafe-um-status-help { display: inline !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* 1.9.23: Community Members container and equal-height card contract. */ body.page-id-9245 .esafe-um-members-grid { align-items: stretch; } body.page-id-9245 .esafe-um-member-card { display: flex; flex-direction: column; height: 100%; } body.page-id-9245 .esafe-um-member-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } body.page-id-9245 .esafe-um-member-actions { margin-top: auto !important; padding-top: 10px; } /* 1.9.26: complete account-deletion result popup. */ .esafe-um-account-deletion-result { z-index: 2147483000 !important; padding: 20px; } .esafe-um-account-deletion-result .esafe-um-small-modal { width: min(100%, 560px); max-width: 560px; border-radius: 8px; } .esafe-um-account-deletion-result .esafe-um-small-header { padding: 14px 16px; } .esafe-um-account-deletion-result .esafe-um-small-title { margin: 0 !important; } .esafe-um-account-deletion-result .esafe-um-small-body { padding: 16px; } .esafe-um-account-deletion-message, .esafe-um-account-deletion-guidance, .esafe-um-result-reference { margin: 0 0 12px; color: #0F2330; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 20px; } .esafe-um-result-heading { margin: 16px 0 8px; color: #1E5476; font-family: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 20px; } .esafe-um-result-list { margin: 0; padding-left: 20px; color: #0F2330; font-size: 14px; line-height: 20px; } .esafe-um-result-list li + li { margin-top: 6px; } .esafe-um-account-deletion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; } @media (max-width: 480px) { .esafe-um-account-deletion-result { align-items: flex-start; padding: 16px; } .esafe-um-account-deletion-result .esafe-um-small-modal { margin-top: max(16px, env(safe-area-inset-top)); max-height: calc(100dvh - 32px - env(safe-area-inset-top)); } .esafe-um-account-deletion-result .esafe-um-small-body { padding: 14px; } .esafe-um-account-deletion-actions, .esafe-um-account-deletion-actions .esafe-btn { width: 100%; } }