/* Sfera Mail: shared application surfaces, layered over Elastic2022. */
:root {
  --sf-canvas: #f5f7fa;
  --sf-surface: #ffffff;
  --sf-subtle: #f0f3f6;
  --sf-hover: #e9eef2;
  --sf-selected: #d8f1f5;
  --sf-ink: #20262d;
  --sf-muted: #616b76;
  --sf-line: #e2e7eb;
  --sf-accent: #007b8e;
  --sf-accent-strong: #006577;
  --sf-danger: #b3261e;
  --sf-focus: #00899d;
  --sf-shadow: 0 8px 28px #172b3a1c;
  --sf-sidebar: 240px;
  --sf-header: 76px;
  --font: var(--sf-ink);
  --background: var(--sf-surface);
  --background2: var(--sf-canvas);
}
html.dark-mode {
  color-scheme: dark;
  --sf-canvas: #181c20;
  --sf-surface: #22272c;
  --sf-subtle: #2b3138;
  --sf-hover: #353d45;
  --sf-selected: #174852;
  --sf-ink: #e8edf0;
  --sf-muted: #abb5bf;
  --sf-line: #3b424a;
  --sf-accent: #64d3e1;
  --sf-accent-strong: #9be7ef;
  --sf-danger: #ffb4ab;
  --sf-focus: #64d3e1;
  --sf-shadow: 0 8px 28px #0005;
}
html, body { height: 100%; background: var(--sf-canvas) !important; color: var(--sf-ink) !important; }
body, button, input, select, textarea { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; letter-spacing: 0; }
body { margin: 0; line-height: 1.5; }
* { box-sizing: border-box; }
a { color: var(--sf-accent); }
a:hover { color: var(--sf-accent-strong); }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--sf-focus) !important; outline-offset: 3px; }
[hidden] { display: none !important; }
.sfera-skip { position: fixed; top: -80px; left: 16px; padding: 12px 20px; z-index: 99999; background: var(--sf-surface); }
.sfera-skip:focus { top: 12px; }
.sfera-icon, .sfera-nav-link::before { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background-color: currentColor; mask: var(--sf-icon) center / contain no-repeat; -webkit-mask: var(--sf-icon) center / contain no-repeat; }
[data-icon=menu] { --sf-icon: url(../images/icons/menu.svg); }
[data-icon=moon] { --sf-icon: url(../images/icons/moon.svg); }
[data-icon=sun] { --sf-icon: url(../images/icons/sun.svg); }
.sfera-nav-link.mail { --sf-icon: url(../images/icons/mail.svg); }
.sfera-nav-link.contacts { --sf-icon: url(../images/icons/contact-round.svg); }
.sfera-nav-link.settings { --sf-icon: url(../images/icons/settings.svg); }
#sfera-header { display: flex; align-items: center; gap: 8px; height: var(--sf-header); padding: 12px 24px 12px 16px; background: var(--sf-canvas); position: relative; z-index: 30; }
.sfera-brand-group { width: calc(var(--sf-sidebar) - 16px); flex: 0 0 calc(var(--sf-sidebar) - 16px); display: flex; gap: 8px; align-items: center; }
.sfera-brand { display: flex; align-items: center; position: relative; }
.sfera-brand img { width: 148px; height: 40px; object-fit: contain; }
.sfera-icon-button, .sfera-account-toggle, .sfera-login-footer button { width: 40px; height: 40px; padding: 10px; border: 0 !important; border-radius: 50%; background: transparent !important; color: var(--sf-muted) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 40px; box-shadow: none !important; }
.sfera-icon-button:hover, .sfera-account-toggle:hover { background: var(--sf-hover) !important; }
.sfera-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 34px; background: var(--sf-accent); color: var(--sf-surface); font-weight: 700; }
#sfera-search-slot { flex: 1 1 auto; min-width: 120px; max-width: 780px; margin-right: auto; }
.sfera-app-nav { display: flex; gap: 4px; flex: 0 0 auto; box-shadow: none !important; }
.sfera-nav-link { padding: 10px; width: 40px; height: 40px; border-radius: 50%; color: var(--sf-muted); display: flex; justify-content: center; align-items: center; }
.sfera-nav-link::before { content: ""; margin: 0; }
.sfera-nav-link .inner { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sfera-nav-link.selected { background: var(--sf-selected); color: var(--sf-accent); }
.sfera-nav-link:hover { background: var(--sf-hover); }
#sfera-account-menu { position: absolute; top: 65px; right: 20px; width: min(320px, calc(100vw - 32px)); padding: 24px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: 8px; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; gap: 12px; align-items: center; }
#sfera-account-menu strong { font-size: 18px; }
.sfera-account-address { color: var(--sf-muted); overflow-wrap: anywhere; text-align: center; }
#sfera-account-menu a { align-self: stretch; padding: 10px 16px; border-top: 1px solid var(--sf-line); color: var(--sf-ink); }
.sfera-account-theme { align-self: stretch; min-height: 44px; border: 0; border-radius: 4px; background: var(--sf-subtle) !important; color: var(--sf-ink) !important; display: flex; align-items: center; gap: 12px; padding: 10px 16px; box-shadow: none !important; }
html.dark-mode .sfera-brand img, html.dark-mode .sfera-login-brand img { filter: brightness(0) invert(1); }
html.dark-mode .sfera-brand::before { content: ""; position: absolute; z-index: 1; left: 0; width: 40px; height: 40px; background: var(--sf-canvas) url(../images/sfera-media-icon.png) center / contain no-repeat; }
#sfera-account-menu .logout::before { content: "" !important; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: currentColor; mask: url(../images/icons/log-out.svg) center / contain no-repeat; -webkit-mask: url(../images/icons/log-out.svg) center / contain no-repeat; vertical-align: middle; }
.sebmenu, .menu_bottom, #layout-sidebar > .username, #tlb_menu, #tlb_search { display: none !important; }
#layout { display: flex !important; flex-direction: row !important; height: calc(100dvh - var(--sf-header)) !important; width: 100%; top: auto !important; padding: 0 16px 16px 0; gap: 0; background: var(--sf-canvas) !important; overflow: hidden; }
#layout > div { min-height: 0; }
#layout-sidebar { flex: 0 0 var(--sf-sidebar); width: var(--sf-sidebar) !important; min-width: var(--sf-sidebar) !important; max-width: var(--sf-sidebar) !important; border: 0 !important; background: var(--sf-canvas) !important; }
#layout-list { flex: 1 1 auto; width: auto !important; min-width: 0 !important; max-width: none !important; border: 0 !important; border-radius: 8px 0 0 8px; background: var(--sf-surface) !important; overflow: hidden; }
#layout-content { flex: 1 1 auto; min-width: 0 !important; width: auto !important; background: var(--sf-surface) !important; border: 0 !important; border-radius: 0 8px 8px 0; overflow: hidden; }
.task-mail.action-none:not(.sfera-message-open) #layout-content { display: none !important; }
.task-mail.action-none #layout-list { border-radius: 8px; }
.task-mail.sfera-message-open #layout-list { display: none !important; }
.task-mail.sfera-message-open #layout-content { display: flex !important; border-radius: 8px; }
.task-mail.sfera-message-open #layout-sidebar, .task-mail.action-none #layout-sidebar { display: flex !important; }
.header, .footer, .pagenav, .toolbar, .header_topmenu, .header_back { background: var(--sf-surface) !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; box-shadow: none !important; }
#layout .header { min-height: 56px; height: 56px; padding: 8px 16px; flex-shrink: 0; }
#layout-sidebar .header { background: transparent !important; border: 0; padding: 8px 16px 16px; height: auto; min-height: 80px; }
.header-title { font-size: 17px !important; line-height: 40px !important; font-weight: 700; margin: 0 !important; color: var(--sf-ink) !important; }
#layout-sidebar .compose.button { display: inline-flex; align-items: center; justify-content: flex-start; padding: 16px 22px !important; height: 56px; min-width: 154px; width: auto !important; border: 0 !important; border-radius: 8px !important; background: var(--sf-selected) !important; color: var(--sf-ink) !important; box-shadow: 0 1px 2px #102a3b12; font-size: 14px; font-weight: 700; }
#layout-sidebar .compose.button:hover { box-shadow: 0 3px 6px #102a3b24; }
#layout-sidebar .compose.button > div { display: flex; align-items: center; gap: 14px; background: transparent !important; border-radius: 0 !important; width: auto !important; margin: 0 !important; }
#layout-sidebar > .header:has(.compose) { display: flex !important; align-items: flex-start; justify-content: flex-start; padding: 8px 16px 16px !important; }
#layout-sidebar .compose .sebicon { margin: 0 !important; }
.listing, .listing li, .listing li a, .listing tr, .listing td { color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
#layout-sidebar .listing { padding: 0 12px 0 8px; }
#layout-sidebar .listing li { border: 0 !important; margin: 1px 0; background: transparent !important; }
#layout-sidebar .listing li > a { border-radius: 0 20px 20px 0; min-height: 40px; line-height: 40px; padding-top: 0; padding-bottom: 0; color: var(--sf-ink) !important; font-size: 14px; }
#layout-sidebar .listing li.selected > a { background: var(--sf-selected) !important; color: var(--sf-ink) !important; font-weight: 700; }
#layout-sidebar .listing li > a:hover { background: var(--sf-hover) !important; }
#mailboxlist .unreadcount { background: transparent !important; color: inherit !important; font-size: 12px; font-weight: 700; right: 16px; }
#mailboxlist li a::before { margin-right: 14px; color: var(--sf-muted); }
#mailboxlist li.selected a::before { color: var(--sf-accent); }
#layout-sidebar .footer { background: transparent !important; font-size: 12px; color: var(--sf-muted) !important; }
.gitissue16 { height: 44px !important; }
.gitissue16 .sidebar-menu { position: relative !important; margin: 0 12px; width: 40px; height: 40px; }
#messagelist-header { height: 56px !important; min-height: 56px !important; padding: 6px 12px !important; margin: 0 !important; border-bottom: 1px solid var(--sf-line); }
#messagelist-header table { width: 100%; height: 44px; }
#messagelist-header td { height: 40px; vertical-align: middle; padding: 0; }
#messagelist-header #MIDDLE { width: 100%; }
#tlb_nbselect { min-width: 32px; font-size: 13px !important; color: var(--sf-muted); }
#messagelist-header a, .toolbar a, .header_topmenu a { color: var(--sf-muted) !important; border-radius: 4px; box-shadow: none !important; }
#messagelist-header a:hover, .toolbar a:hover, .header_topmenu a:hover { background: var(--sf-hover) !important; color: var(--sf-ink) !important; }
.sfera-message-open .header_back { display: block !important; min-height: 56px; border-bottom: 1px solid var(--sf-line); }
.sfera-message-open .header_topmenu { display: flex !important; height: 56px; align-items: center; padding: 4px 12px; gap: 8px; }
.header_topmenu .header_back_back { width: 40px !important; height: 40px !important; }
.header_topmenu a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.header_back_back a::before { margin: 0 !important; }
.sfera-message-open .iframe-wrapper { flex: 1; min-height: 0; }
#layout-sidebar .listing li.inbox > a { --sf-icon: url(../images/icons/inbox.svg); }
#layout-sidebar .listing li.drafts > a { --sf-icon: url(../images/icons/file-pen-line.svg); }
#layout-sidebar .listing li.sent > a { --sf-icon: url(../images/icons/send.svg); }
#layout-sidebar .listing li.junk > a { --sf-icon: url(../images/icons/shield-alert.svg); }
#layout-sidebar .listing li.trash > a { --sf-icon: url(../images/icons/trash-2.svg); }
.compose .composeicon { --sf-icon: url(../images/icons/pencil.svg); }
#cubeselect { --sf-icon: url(../images/icons/square.svg); }
.toolbar .refresh { --sf-icon: url(../images/icons/rotate-cw.svg); }
.toolbar .sort { --sf-icon: url(../images/icons/arrow-down-wide-narrow.svg); }
.toolbar .delete, .header_topmenu .delete { --sf-icon: url(../images/icons/trash-2.svg); }
.toolbar .reply { --sf-icon: url(../images/icons/reply.svg); }
.toolbar .reply-all { --sf-icon: url(../images/icons/reply-all.svg); }
.toolbar .forward { --sf-icon: url(../images/icons/forward.svg); }
.toolbar .more, .header_topmenu .more { --sf-icon: url(../images/icons/ellipsis-vertical.svg); }
.header_back_back .back { --sf-icon: url(../images/icons/arrow-left.svg); }
#layout-sidebar .listing li.inbox > a::before, #layout-sidebar .listing li.drafts > a::before,
#layout-sidebar .listing li.sent > a::before, #layout-sidebar .listing li.junk > a::before,
#layout-sidebar .listing li.trash > a::before, .compose .composeicon::before,
#cubeselect::before, .toolbar .refresh::before, .toolbar .sort::before,
.toolbar .delete::before, .header_topmenu .delete::before, .toolbar .reply::before,
.toolbar .reply-all::before, .toolbar .forward::before, .toolbar .more::before,
.header_topmenu .more::before, .header_back_back .back::before {
  content: "" !important; display: inline-block !important; width: 19px; height: 19px; font-size: 0 !important;
  background: currentColor; mask: var(--sf-icon) center / contain no-repeat; -webkit-mask: var(--sf-icon) center / contain no-repeat;
  opacity: 1 !important; vertical-align: middle; float: none !important;
}
.toolbar .refresh, .toolbar .sort, #cubeselect { display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px; height: 40px; }
.sfera-keep-toolbar a::before, .header_topmenu a::before, .footer-mail-small a::before { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; }
.sfera-keep-toolbar a .inner { display: none !important; }
#messagelist-header .toolbar a { overflow: visible !important; }
.minicompose_header_right button { border: 0 !important; background: transparent !important; color: var(--sf-muted) !important; padding: 0; box-shadow: none !important; }
.minicompose_header_right button:hover { background: var(--sf-hover) !important; }
#compose-headers button { box-shadow: none !important; background: transparent !important; color: var(--sf-muted) !important; }
#composebodycontainer > .editor-toolbar { background: var(--sf-surface) !important; border: 0 !important; box-shadow: none !important; }
.toolbar a.disabled, a.disabled { opacity: .38 !important; }
#sfera-search-slot .searchbar { height: 48px !important; border: 0 !important; border-radius: 8px !important; background: #eaf0f4 !important; width: 100%; padding: 0 12px; display: flex; align-items: center; margin: 0 !important; }
html.dark-mode #sfera-search-slot .searchbar { background: var(--sf-subtle) !important; }
#sfera-search-slot .searchbar:focus-within { background: var(--sf-surface) !important; box-shadow: 0 1px 5px #24384926; }
#sfera-search-slot .searchbar form { flex: 1; min-width: 0; }
#sfera-search-slot input { width: 100%; height: 46px; border: 0 !important; border-radius: 0; background: transparent !important; color: var(--sf-ink) !important; font-size: 16px; box-shadow: none !important; }
#sfera-search-slot .searchbar a { color: var(--sf-muted); min-width: 32px; }
#searchmenu { background: var(--sf-surface) !important; border-bottom: 1px solid var(--sf-line); }
#messagelist { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 14px; }
#messagelist tbody { display: block; }
#messagelist tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 60px; background: var(--sf-subtle) !important; height: 52px !important; border-left: 0 !important; }
#messagelist tr.unread { background: var(--sf-surface) !important; font-weight: 700; }
#messagelist tr:hover { box-shadow: inset 0 1px var(--sf-line), inset 0 -1px var(--sf-line), 0 1px 3px #172b3a12; background: var(--sf-hover) !important; }
#messagelist tr.selected, #messagelist tr.focused.selected { background: var(--sf-selected) !important; }
#messagelist td { padding-top: 9px !important; padding-bottom: 9px !important; border-bottom: 1px solid var(--sf-line) !important; background: transparent !important; border-left: 0 !important; width: auto !important; height: 52px !important; }
#messagelist td.subject { display: grid; grid-template-columns: 200px minmax(0, 1fr) 112px; align-items: center; gap: 16px; }
#messagelist td.subject > .fromto { grid-column: 1; grid-row: 1; width: auto; }
#messagelist td.subject > .subject { grid-column: 2; grid-row: 1; width: auto; padding: 0 !important; }
#messagelist td.subject > .date { grid-column: 3; grid-row: 1; position: static !important; text-align: right; }
#messagelist td.subject > .size { display: none !important; }
#messagelist td.subject > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#messagelist td.selection { padding: 16px 12px !important; }
#messagelist .sel_circle { font-size: 0; width: 18px !important; height: 18px !important; line-height: 18px !important; border: 1.5px solid var(--sf-muted); border-radius: 3px !important; background: transparent !important; color: var(--sf-accent) !important; margin: 0 !important; }
#messagelist .maillogo_is_select { background: var(--sf-accent) !important; border-color: var(--sf-accent); }
#messagelist .maillogo_is_select i { font-size: 12px; line-height: 16px; }
#messagelist td.flags { padding: 15px 8px !important; display: flex; gap: 4px; align-items: center; }
#messagelist td.flags > span { margin: 0 !important; flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
#messagelist td.flags > .attachment:not(:has(span)) { display: none !important; }
#messagelist td.flags .attachment .attachment { margin: 0 !important; }
#messagelist .unflagged { opacity: .7 !important; }
#messagelist .flags .flag { display: inline-flex !important; width: 20px; height: 20px; }
#messagelist .flags .unflagged::before, #messagelist .flags .flagged::before { content: "" !important; display: block !important; visibility: visible !important; width: 18px !important; height: 18px !important; background: currentColor; mask: url(../images/icons/star.svg) center / contain no-repeat; -webkit-mask: url(../images/icons/star.svg) center / contain no-repeat; }
#messagelist td.subject { padding-left: 12px !important; padding-right: 20px !important; }
#messagelist .subject .subject, #messagelist .subject a { font-size: 14px !important; color: var(--sf-ink) !important; }
#messagelist .subject .fromto { color: var(--sf-ink) !important; }
#messagelist .subject .date { color: var(--sf-muted) !important; font-size: 12px; font-variant-numeric: tabular-nums; }
#messagelist .subject .msgicon { color: var(--sf-muted); }
.messagelist .flagged, .messagelist .flagged::before { color: #ad7900 !important; }
#messagelist-content { background: var(--sf-surface) !important; }
.listing td, .listing li { border-bottom: 1px solid var(--sf-line); }
.listing tr.selected td, .listing li.selected > a { background: var(--sf-selected) !important; color: var(--sf-ink) !important; }
.listing tr:hover td { background: var(--sf-hover); }
.pagenav { min-height: 44px; border-top: 1px solid var(--sf-line); font-size: 12px; }
.pagenav a { color: var(--sf-muted) !important; }
.watermark, .sfera-watermark { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; text-align: center; background: var(--sf-surface) !important; }
.sfera-watermark h2 { font-size: 20px; font-weight: 500; margin: 16px 0 8px; }
.sfera-watermark p { color: var(--sf-muted); font-size: 14px; }
.sfera-watermark img { opacity: .75; }
.iframe body, .sfera-embedded body { background: var(--sf-surface) !important; }
.sfera-embedded #sfera-header, .sfera-embedded .sfera-skip { display: none !important; }
.sfera-embedded #layout { height: 100dvh !important; padding: 0 !important; }
.iframe #layout-content, .sfera-embedded #layout-content { border-radius: 0 !important; }
iframe { border: 0; background: var(--sf-surface); }
.iframe-wrapper { background: var(--sf-surface) !important; }
#message-header { padding: 24px 32px 12px !important; background: var(--sf-surface) !important; }
#message-header h2.subject { font-size: 23px; font-weight: 400; line-height: 1.4; margin: 0 0 20px !important; color: var(--sf-ink) !important; overflow-wrap: anywhere; }
#message-header .header { padding: 0 !important; height: auto !important; min-height: 48px; border: 0 !important; }
#message-header table { font-size: 13px; }
#message-header .header-headers { color: var(--sf-muted); }
#message-header .contactphoto { width: 40px !important; height: 40px !important; border-radius: 50%; background: var(--sf-selected); }
#message-content { padding: 12px 32px 28px !important; background: var(--sf-surface) !important; }
#messagebody { background: var(--sf-surface); line-height: 1.65; }
#messagebody .message-part { margin-bottom: 16px; }
#messagebody pre { font-family: inherit; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
#messagebody .pre { font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; font-size: 14px; line-height: 1.7; }
#message-header .header-content { padding-left: 12px; }
.footer-mail-small { display: block !important; margin: 20px 32px 32px; padding: 0 !important; border: 0 !important; }
.footer-mail-small .toolbar { justify-content: flex-start !important; max-width: none !important; gap: 12px; }
.footer-mail-small .toolbar a { display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; min-width: 112px; padding: 9px 16px !important; height: 40px !important; border: 1px solid #b8c2cb !important; border-radius: 6px; color: var(--sf-ink) !important; }
.footer-mail-small .toolbar a .inner { display: inline !important; font-size: 14px !important; }
.footer-mail-small .toolbar a::before { margin: 0 !important; }
#layout-sidebar > #quotadisplay { margin: auto 20px 12px; height: 36px; min-height: 36px; color: var(--sf-muted); font-size: 12px; }
#layout-sidebar .gitissue16 { margin-top: auto; }
#messagelist tr.focused td { outline: none; box-shadow: none !important; }
#messagelist td:focus-visible { outline: 2px solid var(--sf-focus) !important; outline-offset: -3px; }
#message-objects .notice, .notice, .warning, .error { border-radius: 4px; }
.attachmentslist li { border: 1px solid var(--sf-line) !important; background: var(--sf-subtle) !important; border-radius: 6px; margin: 6px; color: var(--sf-ink); }
.attachmentslist a { color: var(--sf-ink) !important; }
#message-content .attachmentslist { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible !important; padding: 0; margin: 0 0 12px; }
#message-content .attachmentslist li { margin: 0 !important; width: auto !important; max-width: 100%; min-width: min(220px, 100%); }
.footer-mail-small { background: var(--sf-surface) !important; border-color: var(--sf-line) !important; }
.task-settings #layout-list, .task-addressbook #layout-list { flex: 0 0 290px; border-right: 1px solid var(--sf-line) !important; }
.task-settings #layout-sidebar .header, .task-addressbook #layout-sidebar .header { min-height: 56px; padding: 8px 20px; }
#settings-menu a { min-height: 44px; }
#sections-table td, #identities-table td, #responses-table td, #contacts-table td { padding: 14px 16px !important; font-size: 14px; }
.tableheaderseb { background: var(--sf-surface) !important; border-bottom: 1px solid var(--sf-line); }
.tableheaderseb .searchbar { background: var(--sf-subtle) !important; border-radius: 6px; border: 0 !important; margin: 8px; }
.tableheaderseb .task-menu-button { display: none !important; }
.contact-photo, #contactphoto { width: 80px !important; height: 80px !important; margin-right: 24px !important; flex: 0 0 80px; }
#contactpic, #contactphoto img { width: 80px !important; height: 80px !important; border-radius: 50%; object-fit: cover; background: var(--sf-subtle); }
.contact-header { margin-bottom: 28px; }
.contact-head.readonly { font-size: 18px; }
.contact-head .source { font-size: 12px; color: var(--sf-muted); }
.readonly .row { padding: 8px 0; border-bottom: 1px solid var(--sf-line); }
.content, .formcontent, .formcontainer, .propform, .boxcontent { color: var(--sf-ink) !important; background-color: var(--sf-surface) !important; }
.formcontent { padding: 24px !important; }
.sfera-form-title { font-size: 22px; font-weight: 500; padding: 24px 24px 0; margin: 0; }
.formcontent fieldset { margin-bottom: 28px; border: 0; }
.formcontent legend { font-size: 16px; font-weight: 700; margin: 0 0 16px; color: var(--sf-ink) !important; border-bottom: 1px solid var(--sf-line); padding-bottom: 12px; }
.propform .form-group { margin-bottom: 18px; }
.col-form-label, .propform label { color: var(--sf-ink); font-size: 14px; line-height: 1.5; }
.form-control, .custom-select, select, textarea, input[type=text], input[type=password], input[type=email], input[type=number] { background-color: var(--sf-surface) !important; color: var(--sf-ink) !important; border: 1px solid #b8c2cb !important; border-radius: 5px; box-shadow: none; min-height: 38px; }
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode select { border-color: #65717c !important; }
input::placeholder, textarea::placeholder { color: var(--sf-muted) !important; opacity: 1; }
.form-control:focus, .custom-select:focus { border-color: var(--sf-accent) !important; box-shadow: 0 0 0 2px var(--sf-selected) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--sf-accent); }
.input-group-text { background: var(--sf-subtle) !important; color: var(--sf-muted) !important; border-color: var(--sf-line) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--sf-accent) !important; border-color: var(--sf-accent) !important; }
.btn, button.button, input.button { min-height: 38px; padding: 8px 18px; border-radius: 5px; font-size: 14px; font-weight: 500; box-shadow: none; }
.btn-primary, button.mainaction, input.mainaction, a.mainaction { background: var(--sf-accent) !important; border-color: var(--sf-accent) !important; color: var(--sf-surface) !important; }
.btn-primary:hover, button.mainaction:hover, input.mainaction:hover { background: var(--sf-accent-strong) !important; }
.btn-secondary { background: var(--sf-subtle) !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
.formbuttons { padding: 16px 24px !important; border-top: 1px solid var(--sf-line) !important; background: var(--sf-surface) !important; }
.form-text, .hint, .description { color: var(--sf-muted) !important; }
.nav-tabs { border-color: var(--sf-line); background: var(--sf-surface) !important; }
.nav-tabs .nav-link { border: 0; color: var(--sf-muted); padding: 14px 20px; }
.nav-tabs .nav-link.active { background: transparent !important; border-bottom: 3px solid var(--sf-accent); color: var(--sf-accent); font-weight: 700; }
.popupmenu, .ui-dialog, .ui-widget-content, .ui-dialog .ui-dialog-content { background: var(--sf-surface) !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
.popupmenu, .ui-dialog { border: 1px solid var(--sf-line); border-radius: 8px !important; box-shadow: var(--sf-shadow) !important; overflow: hidden; }
.popupmenu .listing li a { min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 24px; color: var(--sf-ink) !important; }
.popupmenu .listing li a:hover { background: var(--sf-hover) !important; }
.popupmenu .separator { background: var(--sf-subtle) !important; color: var(--sf-muted); font-size: 12px; }
.ui-dialog .ui-dialog-titlebar { padding: 16px 20px; background: var(--sf-surface) !important; border-bottom: 1px solid var(--sf-line); font-size: 17px; color: var(--sf-ink); }
.ui-dialog .ui-dialog-buttonpane { background: var(--sf-surface) !important; border-top: 1px solid var(--sf-line); padding: 12px 20px; }
.ui-widget-overlay { background: #111820; opacity: .35; }
#messagestack { z-index: 10000; }
#messagestack div { border-radius: 6px; box-shadow: var(--sf-shadow); padding: 14px 20px; font-size: 14px; }
.task-mail.action-compose #layout { padding-left: 16px; }
.task-mail.action-compose #layout-sidebar { order: 2; margin-left: 16px; flex-basis: 248px; }
.task-mail.action-compose #layout-content { border-radius: 8px; }
.task-mail.action-compose #compose-content { padding: 0 24px 16px !important; }
#compose-headers { padding: 4px 0 8px !important; }
#compose-headers > table, .compose-headers { width: 100%; }
#compose-headers td { vertical-align: middle; }
#compose_button_send { display: none; }
.compose-headers > tbody > tr > td { border-bottom: 1px solid var(--sf-line); padding: 5px 0 !important; }
.compose-headers > tbody > tr > td:first-child { width: 72px; }
#compose-headers input, #compose-headers .form-control, #compose-headers .input-group { border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important; }
#compose-headers input:focus-visible { outline-offset: -2px; }
#compose-headers button { border: 0; background: transparent; color: var(--sf-muted); padding: 6px 8px; border-radius: 4px; }
#compose-headers button:hover { background: var(--sf-hover); }
#compose-subject { min-height: 44px; font-size: 16px; padding-left: 8px; }
#composebodycontainer { border: 0 !important; }
#composebody { border: 0 !important; padding: 16px 8px; font-size: 14px; line-height: 1.65; resize: none; }
#composebodycontainer.html-editor > textarea { padding-top: 48px !important; }
#composebodycontainer > .editor-toolbar { height: 36px !important; min-height: 36px; top: 0; }
#compose-options { padding: 20px 16px !important; background: transparent !important; }
#compose-options .form-group { margin: 0 0 18px; padding: 0; align-items: center; }
#compose-options .form-group > label { flex: 1 1 auto; max-width: calc(100% - 44px); padding: 0 12px 0 0; word-break: normal; overflow-wrap: normal; }
#compose-options .form-group > div { flex: 0 0 44px; max-width: 44px; padding: 0; }
#compose-attachments { margin: 8px 16px 0; padding: 0 !important; border: 0 !important; }
#compose-attachments::after { display: none !important; }
#compose-attachments .upload-form { min-height: 132px; padding: 16px; border: 1px dashed #8c9aa5; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#compose-attachments.droptarget.hover .upload-form { background: var(--sf-selected); border-color: var(--sf-accent); }
.sfera-compose-dock { flex: 0 0 auto; min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--sf-surface); border-top: 1px solid var(--sf-line); }
.sfera-compose-dock .sendmain { display: inline-flex !important; gap: 10px; justify-content: center; align-items: center; width: auto !important; height: 40px !important; min-width: 108px; border-radius: 6px !important; background: var(--sf-accent) !important; color: var(--sf-surface) !important; padding: 10px 20px !important; }
.sfera-compose-dock .sendmain::before { font-size: 17px; margin: 0; }
.sfera-compose-dock .sendmain .inner { display: inline !important; font-size: 14px !important; }
.sfera-compose-dock #messagetoolbar { display: flex !important; visibility: visible !important; flex-wrap: wrap; min-width: 0; align-items: center; justify-content: flex-start; margin: 0 !important; padding: 0 !important; height: auto !important; }
.sfera-compose-dock #messagetoolbar > a { display: inline-flex !important; align-items: center; justify-content: center; min-width: 36px; height: 40px; padding: 6px !important; }
.sfera-compose-dock #messagetoolbar .inner { display: none !important; }
.task-mail.action-compose #compose-content { flex: 1; min-height: 0; overflow-y: auto; }
.task-mail.action-compose .sfera-compose-dock { position: relative; z-index: 10; }
.layout-minicompose .sfera-compose-dock #messagetoolbar .options { display: inline-flex !important; }
.layout-minicompose #layout-content > .header { display: none !important; }
.layout-minicompose #compose-headers { position: relative !important; top: 0 !important; }
.layout-minicompose #composebodycontainer { min-height: 200px; }
.layout-minicompose #composebody { min-height: 200px; }
.minicompose_maindiv.minicompose_reduced2 { height: 48px !important; }
.minicompose_title { max-width: 360px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.compose .composeicon { box-shadow: none !important; }
#layout-sidebar .compose > div { box-shadow: none !important; }
.minicompose_header_left > .composeicon { display: none !important; }
.minicompose_header_left { float: left; }
.minicompose_header_right { float: right; }
#minicompose_container { z-index: 60; right: 24px; bottom: 0; gap: 16px; display: flex !important; align-items: flex-end; justify-content: flex-end; width: auto !important; max-width: calc(100vw - 48px); height: auto !important; pointer-events: none; }
.minicompose_maindiv { margin: 0 !important; transform: none !important; position: relative !important; bottom: auto !important; top: auto !important; pointer-events: auto; flex: 0 1 600px; min-width: min(500px, calc(100vw - 32px)); }
.minicompose_maindiv { width: 600px !important; max-width: calc(100vw - 32px); height: min(660px, calc(100dvh - 96px)) !important; max-height: calc(100dvh - 96px); border: 1px solid var(--sf-line) !important; border-radius: 8px 8px 0 0 !important; background: var(--sf-surface) !important; box-shadow: 0 8px 36px #172b3a40 !important; }
.minicompose_header { height: 48px !important; min-height: 48px; background: var(--sf-subtle) !important; color: var(--sf-ink) !important; padding: 0 16px !important; border-bottom: 1px solid var(--sf-line); }
.minicompose_header_left, .minicompose_header_right { display: flex; align-items: center; gap: 12px; height: 48px; }
.minicompose_header_right .sebicon { width: 28px; height: 32px; cursor: pointer; }
.minicompose_title { display: block !important; font-size: 14px; font-weight: 700; }
.sfera-composer-window { height: min(680px, calc(100dvh - 88px)) !important; border: 0 !important; }
.sfera-composer-window .minicompose_header { display: flex; align-items: center; height: 40px !important; min-height: 40px; padding: 0 16px !important; border: 0 !important; }
.sfera-composer-window .minicompose_header_left { display: flex; flex: 1; min-width: 0; height: 40px; gap: 10px; }
.sfera-composer-window .minicompose_title { max-width: 310px; border: 0 !important; background: transparent !important; color: var(--sf-ink) !important; padding: 0; margin: 0; font-size: 14px; font-weight: 400; box-shadow: none !important; text-align: left; cursor: pointer; }
.sfera-composer-window .minicompose_header_right { height: 40px; gap: 4px; margin-left: 12px; }
.sfera-composer-window .minicompose_header_right button { width: 24px; height: 28px; min-height: 28px; font-size: 13px; }
.sfera-composer-window .sfera-compose-status { color: var(--sf-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfera-composer-window .minicompose_iframe { height: calc(100% - 40px) !important; display: block; }
.sfera-composer-window.minicompose_reduced2 { height: 40px !important; }
.sfera-composer-window.sfera-composer-maximized:not(.minicompose_reduced2) { position: fixed !important; inset: 24px !important; width: calc(100vw - 48px) !important; max-width: none; height: calc(100dvh - 48px) !important; max-height: none; border-radius: 8px !important; z-index: 90; }
.minicompose_send { display: none !important; }
.minicompose_iframe { width: 100%; height: calc(100% - 48px) !important; }
.layout-minicompose #layout-sidebar { display: none !important; }
.layout-minicompose #layout-content > .header { min-height: 44px; height: 44px; }
.layout-minicompose #layout-content { border-radius: 0 !important; }
.layout-minicompose #compose-content { padding: 0 16px 8px !important; }
.layout-minicompose .sfera-compose-dock { padding: 10px 20px; min-height: 60px; }
.tox-tinymce, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow, .tox .tox-edit-area__iframe { border-color: var(--sf-line) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { background: var(--sf-subtle) !important; }
.tox .tox-statusbar { border-color: var(--sf-line) !important; background: var(--sf-surface) !important; }
.tox .tox-dialog, .tox .tox-menu { border: 1px solid var(--sf-line) !important; border-radius: 8px !important; box-shadow: var(--sf-shadow) !important; }
.tox .tox-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.tox .tox-dialog, .tox .tox-dialog__header, .tox .tox-dialog__body, .tox .tox-dialog__footer, .tox .tox-menu, .tox .tox-collection__item { background: var(--sf-surface) !important; color: var(--sf-ink) !important; }
.tox .tox-dialog__header { padding: 16px 20px; border-bottom: 1px solid var(--sf-line); }
.tox .tox-dialog__title { font-size: 18px; font-weight: 500; color: var(--sf-ink) !important; }
.tox .tox-dialog__body-content { padding: 20px; }
.tox .tox-form__group { margin-bottom: 16px; }
.tox .tox-label { margin-bottom: 6px; color: var(--sf-ink) !important; font-size: 14px; }
.tox .tox-dialog__footer { padding: 12px 20px; border-top: 1px solid var(--sf-line) !important; }
.tox .tox-textfield, .tox .tox-textarea, .tox .tox-listbox, .tox .tox-selectfield select { background: var(--sf-surface) !important; color: var(--sf-ink) !important; border: 1px solid #8c9aa5 !important; min-height: 38px; border-radius: 5px; }
.tox .tox-button { background: var(--sf-accent) !important; color: var(--sf-surface) !important; border: 1px solid var(--sf-accent) !important; min-height: 38px; border-radius: 5px; font-size: 14px; font-weight: 500; padding: 8px 18px; }
.tox .tox-button--secondary { background: var(--sf-subtle) !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
.tox .tox-button--naked { background: transparent !important; color: var(--sf-muted) !important; border: 0 !important; padding: 8px; }
.tox .tox-button--naked:hover, .tox .tox-collection__item--active { background: var(--sf-hover) !important; }
.tox .tox-listbox__select-chevron svg, .tox .tox-button--naked svg, .tox .tox-collection__item-icon svg { fill: currentColor !important; }
.tox .tox-collection__item-label, .tox .tox-collection__item-accessory { color: var(--sf-ink) !important; }
.task-login { overflow: auto !important; }
.task-login #layout { display: flex !important; flex-direction: column !important; align-items: center; padding: 0 24px; min-height: 100dvh; height: auto !important; overflow: visible; }
.sfera-login-brand { align-self: flex-start; padding: 36px 24px 0; position: relative; }
html.dark-mode .sfera-login-brand::before { content: ""; position: absolute; z-index: 1; left: 24px; bottom: 0; width: 50px; height: 50px; background: var(--sf-canvas) url(../images/sfera-media-icon.png) center / contain no-repeat; }
.sfera-login-brand img { object-fit: contain; }
.task-login #layout-content.sfera-login { display: flex !important; flex: none; flex-direction: column; align-items: center; width: min(100%, 420px) !important; max-width: 420px; margin: auto 0; padding: 32px 8px; background: transparent !important; border: 0 !important; border-radius: 0; box-shadow: none !important; overflow: visible; }
.sfera-login-icon { margin-bottom: 24px; }
.sfera-login h1 { font-size: 30px !important; font-weight: 500; line-height: 1.3; margin: 0 0 8px; }
.sfera-login-subtitle { color: var(--sf-muted); font-size: 16px; margin-bottom: 32px; }
.task-login #layout-content #login-form { width: 100% !important; max-width: none !important; background: transparent !important; margin: 0 !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; }
.sfera-login table, .sfera-login tbody, .sfera-login tr, .sfera-login td { display: block; width: 100%; padding: 0 !important; border: 0 !important; }
.sfera-login td.title { display: block !important; margin-bottom: 8px; text-align: left !important; font-weight: 500; }
.sfera-login td.input { margin-bottom: 20px; }
.sfera-login input.form-control { width: 100% !important; height: 50px; font-size: 16px; padding: 12px 14px; border-radius: 6px !important; }
.sfera-login .input-group-prepend { display: none !important; }
.sfera-login .formbuttons { padding: 0 !important; border: 0 !important; background: transparent !important; margin: 0 !important; }
.sfera-login #login-footer:empty { display: none; }
.sfera-login input::placeholder { opacity: 0; }
.sfera-login button#rcmloginsubmit { width: 100%; height: 48px; margin-top: 8px; border-radius: 6px; background: var(--sf-accent) !important; color: var(--sf-surface) !important; border: 0; font-size: 16px; text-transform: none !important; }
.sfera-login #login-footer { text-align: center; margin-top: 24px; color: var(--sf-muted); background: transparent; }
.sfera-login-footer { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; color: var(--sf-muted); font-size: 12px; }
.task-error #layout-content { padding: 48px; }
.task-error h1, .task-error h2 { font-size: 24px; }
.sfera-drawer-shade { display: none; }
.floating-action-buttons a { background: var(--sf-accent) !important; color: var(--sf-surface) !important; width: 56px; height: 56px; }
#messagelist-header #tlb_cube { display: table-cell !important; }
#cubeselect_div { display: block !important; }
html body .tox .tox-dialog button.tox-button { background: var(--sf-accent) !important; color: var(--sf-surface) !important; border-color: var(--sf-accent) !important; }
html body .tox .tox-dialog button.tox-button--secondary { background: var(--sf-subtle) !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
html body .tox .tox-dialog button.tox-button--naked { background: transparent !important; color: var(--sf-muted) !important; }
html body .tox .tox-dialog button.tox-listbox { background: var(--sf-surface) !important; color: var(--sf-ink) !important; }
.task-mail.action-compose.sfera-sidebar-open #layout-sidebar {
  display: flex !important; position: fixed; top: var(--sf-header); right: 0; bottom: 0; left: auto;
  width: min(320px, calc(100vw - 32px)) !important; min-width: 0 !important; max-width: none !important;
  margin: 0; z-index: 80; box-shadow: var(--sf-shadow); background: var(--sf-surface) !important;
}
.task-mail.action-compose.sfera-sidebar-open .sfera-drawer-shade { display: block; position: fixed; inset: var(--sf-header) 0 0; background: #18202c55; z-index: 70; border: 0; }
.sfera-embedded .task-mail.action-compose.sfera-sidebar-open #layout-sidebar { top: 0; }
.sfera-embedded .task-mail.action-compose.sfera-sidebar-open .sfera-drawer-shade { top: 0; }
.task-mail.action-compose #layout-sidebar > .header { display: flex !important; align-items: center; padding: 8px !important; min-height: 56px; height: auto; }
.task-mail.action-compose #layout-sidebar .header-title { font-size: 15px !important; line-height: 1.4 !important; white-space: normal; }
.task-mail.action-compose:not(.sfera-sidebar-open) #layout-sidebar .back-content-button { display: none !important; }
@media (min-width: 1025px) {
  .sfera-sidebar-collapsed #layout-sidebar { display: none !important; }
  .task-settings #layout-sidebar, .task-addressbook #layout-sidebar { display: flex !important; }
  .task-settings #layout-list, .task-addressbook #layout-list { display: flex !important; }
}
@media (max-width: 1200px) and (min-width: 769px) {
  :root { --sf-sidebar: 208px; }
  .task-settings #layout-list, .task-addressbook #layout-list { flex-basis: 240px; }
  #sfera-header { padding-right: 16px; }
}
@media (max-width: 1024px) {
  #layout-sidebar, .task-mail.action-none #layout-sidebar, .task-mail.sfera-message-open #layout-sidebar { display: none !important; }
  .sfera-sidebar-open #layout-sidebar, .task-mail.sfera-sidebar-open #layout-sidebar { display: flex !important; position: fixed; top: var(--sf-header); left: 0; bottom: 0; width: 280px !important; min-width: 280px !important; max-width: min(280px, calc(100vw - 48px)) !important; z-index: 80; box-shadow: var(--sf-shadow); padding-top: 8px; }
  .sfera-sidebar-open .sfera-drawer-shade { display: block; position: fixed; inset: var(--sf-header) 0 0; background: #18202c55; z-index: 70; border: 0; }
  #layout { padding-left: 12px; padding-right: 12px; }
  .sfera-brand-group { flex-basis: 192px; width: 192px; }
  .task-mail.action-compose #layout { padding-left: 12px; }
  .task-mail.action-compose #layout-sidebar { margin: 0; }
}
@media (max-width: 768px) {
  :root { --sf-header: 120px; --sf-sidebar: 240px; }
  body { font-size: 16px; }
  #sfera-header { height: var(--sf-header); padding: 8px 12px 64px; gap: 2px; }
  .sfera-brand-group { flex: 1; width: auto; gap: 4px; }
  .sfera-brand img { width: 118px; height: 32px; }
  html.dark-mode .sfera-brand::before { width: 32px; height: 32px; }
  #sfera-header > .sfera-theme-toggle { display: none; }
  .sfera-icon-button, .sfera-account-toggle, .sfera-nav-link { width: 40px; height: 44px; flex-basis: 40px; padding: 10px; }
  .sfera-app-nav { gap: 0; }
  #sfera-search-slot { position: absolute; left: 12px; right: 12px; top: 64px; max-width: none; }
  #sfera-search-slot:empty::after { content: "Sfera Mail"; display: block; height: 44px; line-height: 44px; font-weight: 500; color: var(--sf-muted); }
  #sfera-search-slot .searchbar { height: 44px !important; }
  .sfera-no-search { --sf-header: 64px; }
  .sfera-no-search #sfera-header { padding-bottom: 8px; }
  .sfera-no-search #sfera-search-slot { display: none; }
  #sfera-search-slot input { height: 42px; }
  #sfera-account-menu { top: 56px; right: 12px; }
  #layout { padding: 0; height: calc(100dvh - var(--sf-header)) !important; }
  #layout-list, #layout-content, .task-mail.action-none #layout-list { border-radius: 0 !important; }
  #layout-list, .task-settings #layout-list, .task-addressbook #layout-list { flex: 1 1 100%; min-width: 0 !important; border: 0 !important; }
  #layout-content.hidden { display: none !important; }
  #layout .header { padding: 4px 12px; min-height: 52px; height: 52px; }
  #messagelist-header { padding: 4px 8px !important; height: 48px !important; min-height: 48px !important; }
  #messagelist-header a { width: 40px; min-height: 40px; }
  #messagelist-header #tlb_cube, #messagelist-header #tlb_refresh, #messagelist-header #tlb_sort { display: table-cell !important; }
  #cubeselect_div { display: block !important; }
  .floating-action-buttons a { background: var(--sf-accent) !important; color: var(--sf-surface) !important; width: 56px; height: 56px; }
  .footer-mail-small { margin: 20px 16px; }
  .footer-mail-small .toolbar { gap: 8px; flex-wrap: wrap; }
  .footer-mail-small .toolbar a { min-width: 96px; padding: 9px 12px !important; }
  #messagelist tr { height: 76px !important; grid-template-columns: 36px minmax(0, 1fr) 28px; }
  #messagelist td { height: 76px !important; }
  #messagelist td.selection { padding: 28px 8px !important; }
  #messagelist td.subject { grid-template-columns: minmax(0, 1fr) 88px; grid-template-rows: 24px 24px; gap: 0 8px; padding: 12px 4px !important; }
  #messagelist td.subject > .date { grid-column: 2; grid-row: 1; font-size: 11px; }
  #messagelist td.subject > .subject { grid-column: 1 / -1; grid-row: 2; }
  #messagelist td.flags { padding: 16px 4px !important; flex-direction: column; justify-content: center; gap: 4px; }
  #messagelist td.subject { padding-left: 12px !important; padding-right: 12px !important; }
  #messagelist .subject .fromto { font-size: 15px; }
  #messagelist .subject .subject { font-size: 14px !important; }
  .sfera-embedded #layout { height: 100dvh !important; }
  #message-header { padding: 20px 16px 8px !important; }
  #message-header h2.subject { font-size: 21px; }
  #message-content { padding: 12px 16px 20px !important; }
  .formcontent { padding: 20px 16px !important; }
  .formbuttons { padding: 12px 16px !important; }
  .sfera-form-title { padding: 20px 16px 0; font-size: 20px; }
  input, select, textarea, .form-control, .custom-select { font-size: 16px !important; min-height: 44px; }
  .btn, button.button { min-height: 44px; }
  .tox .tox-tbtn { min-width: 40px; height: 40px; }
  .tox .tox-button, .tox .tox-textfield, .tox .tox-listbox { min-height: 44px; }
  .task-addressbook #layout-content > .header .header-title { display: none !important; }
  #addressbooktoolbar { display: flex !important; align-items: center; min-width: 0; }
  #addressbooktoolbar a { width: 40px !important; height: 44px !important; padding: 10px !important; display: inline-flex; justify-content: center; align-items: center; }
  #addressbooktoolbar a .inner { display: none !important; }
  #addressbooktoolbar a::before { width: 20px !important; height: 20px !important; flex: 0 0 20px; margin: 0 !important; }
  #addressbooktoolbar .spacer { display: none; }
  #addressbooktoolbar .dropbutton { display: flex; }
  #addressbooktoolbar .dropdown { width: 20px !important; padding: 0 !important; }
  .task-addressbook #layout-content > .header { padding-left: 4px; padding-right: 4px; }
  .contact-photo, #contactphoto { width: 64px !important; height: 64px !important; margin-right: 16px !important; flex-basis: 64px; }
  #contactpic, #contactphoto img { width: 64px !important; height: 64px !important; }
  .task-mail.action-compose #layout { padding: 0; }
  .task-mail.action-compose #compose-content { padding: 0 12px 8px !important; }
  .sfera-compose-dock { padding: 12px 16px; }
  #minicompose_container { right: 0 !important; left: 0; bottom: 0; max-width: 100vw; }
  .minicompose_maindiv { width: 100vw !important; max-width: 100vw; height: calc(100dvh - 56px) !important; max-height: calc(100dvh - 56px); }
  .minicompose_header_right .sebicon { width: 36px; height: 44px; }
  .sfera-login-brand { padding: 24px 0 0; }
  .sfera-login-brand img { width: 148px; height: 40px; }
  html.dark-mode .sfera-login-brand::before { left: 0; width: 40px; height: 40px; }
  .task-login #layout { padding: 0 24px; }
  .task-login #layout-content.sfera-login { padding: 36px 0; }
  .sfera-login-footer { padding: 12px 0; }
  .ui-dialog { max-width: calc(100vw - 16px) !important; }
}
@media (max-height: 600px) {
  .sfera-login-brand { padding-top: 16px; }
  .task-login #layout-content.sfera-login { padding: 20px 0; }
  .sfera-login-icon { display: none; }
  .sfera-login-subtitle { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  a, button { transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; }
  #sfera-account-menu { animation: sf-menu-in 140ms ease-out; }
  @keyframes sf-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  #sfera-header, .sfera-skip, .sfera-compose-dock { display: none !important; }
  html, body, #print-layout { background: white !important; color: black !important; height: auto !important; }
}