/*
 * Apolar webmail · apolar.css
 * Restyle of Elastic 1.7.5 to the approved Apolar design. Shared by the skins
 * "apolar" and "apolar_anil" (inherited through the skin path).
 *
 * Load order (includes/layout.html): bootstrap.min.css, Elastic styles.min.css,
 * <active skin>/styles/fonts.css, <active skin>/styles/theme.css, this file.
 * Plugin stylesheets (jquery-ui, managesieve...) are inserted after this file.
 *
 * Rules
 * - Colors only come from the tokens in theme.css: no raw colors here, except
 *   values the design fixes on purpose (white file-tile labels and switch
 *   knob, system colors in forced-colors mode).
 * - Every selector starts with "html:root" (0,1,1). That ties with Elastic's
 *   "html.dark-mode ..." overrides, and this file loads later, so the same rule
 *   works in light and dark mode. Element ids (#messagelist, #mailboxlist...)
 *   are used wherever Elastic stacks many classes.
 * - Icons: the 24px stroke set of the design, painted with CSS masks on the
 *   pseudo-elements Elastic already uses for its icon font (section 2).
 * - Elastic breakpoints (ui.js / layout.less): phone <= 480, small 481-768,
 *   normal 769-1200, large > 1200; touch mode <= 1024 (html.touch).
 */


/* ==========================================================================
   1. Base: page, type, links, focus, scrollbars
   ========================================================================== */

html:root {
	color-scheme: light;
	scrollbar-color: var(--line-2) transparent;
}

html.dark-mode:root {
	color-scheme: dark;
}

html:root body {
	font-family: var(--font-ui);
	letter-spacing: var(--ui-track);
	color: var(--text);
	background-color: var(--canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html:root :is(button, input, optgroup, select, textarea, .popover, .tooltip) {
	font-family: var(--font-ui);
	letter-spacing: inherit;
}

html:root ::selection {
	background-color: var(--accent-soft);
	color: var(--text);
}

/* Links (kept at low specificity so list and menu links keep their own color) */
a,
a:hover {
	color: var(--accent-text);
}

html:root .num,
html:root .pagenav-text,
html:root .unreadcount,
html:root .count,
html:root #messagelist span.date,
html:root #messagelist span.size {
	font-variant-numeric: tabular-nums;
}

html:root h1,
html:root h2,
html:root h3 {
	color: var(--text);
}

/* Focus: one outline style everywhere (2px accent, offset 2px) */
html:root :focus {
	outline: none;
}

html:root :focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: 2px;
}

html:root #layout-menu :focus-visible,
html:root #layout-sidebar:not(.sidebar-right) :focus-visible,
html:root .ap-login-brand :focus-visible {
	outline-color: var(--side-text);
}

html:root .ap-login-brand :focus-visible {
	outline-color: var(--panel-focus);
}

/* Thin, quiet scrollbars */
html:root:not(.touch) ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

html:root:not(.touch) ::-webkit-scrollbar-track {
	background-color: transparent;
}

html:root:not(.touch) ::-webkit-scrollbar-thumb {
	background-color: var(--line-2);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

html:root:not(.touch) ::-webkit-scrollbar-thumb:hover {
	background-color: var(--border-strong);
}

/* Display type helper used by the headings below */
html:root #layout-list > .header > .header-title,
html:root #message-header > .subject,
html:root .ap-login-title,
html:root .ap-login-name {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: var(--display-track);
}


/* ==========================================================================
   2. Icon set (the design's 24px stroke icons, as CSS masks)
   Elastic draws icons with its "Icons" font in ::before. Here those same
   pseudo-elements get content:"" plus a mask, so each glyph is painted with
   currentColor and follows the tokens in both modes. The sections below set
   the box size (box = icon size) per context. Browsers without unprefixed
   mask support skip this block and keep Elastic's font icons.
   ========================================================================== */

@supports (mask-image: none) {

html:root .menu a.mail:before,
html:root .menu a.recipient:before,
html:root .menu a.contacts:before,
html:root .menu a.settings:before,
html:root .menu a.actions:before,
html:root .menu a.help:before,
html:root .menu a.about:before,
html:root .menu a.logout:before,
html:root .menu a.compose:before,
html:root .menu a.edit:before,
html:root .menu a.rename:before,
html:root .menu a.micuenta:before,
html:root .menu a.button-micuenta:before,
html:root .menu a.calendar:before,
html:root .menu a.tasklist:before,
html:root .menu a.select:before,
html:root .menu a.select.all:before,
html:root .menu a.select.invert:before,
html:root .menu a.files:before,
html:root .menu a.folders:before,
html:root .menu a.notes:before,
html:root .menu a.chat:before,
html:root .menu a.responses:before,
html:root .menu a.insertresponse:before,
html:root .menu a.reply:before,
html:root .menu a.reply-all:before,
html:root .menu a.reply.all:before,
html:root .menu a.reply.list:before,
html:root .menu a.forward:before,
html:root .menu a.dropdown:before,
html:root .menu a.collapse:before,
html:root .menu a.expand.all:before,
html:root .menu a.expand.none:before,
html:root .menu a.expand:before,
html:root .menu a.nextpage:before,
html:root .menu a.delete:before,
html:root .menu a.search.delete:before,
html:root .menu a.archive:before,
html:root .menu a.junk:before,
html:root .menu a.notjunk:before,
html:root .menu a.markmessage:before,
html:root .menu a.more:before,
html:root .menu a.print:before,
html:root .menu a.prev:before,
html:root .menu a.back:before,
html:root .menu a.next:before,
html:root .menu a.options:before,
html:root .menu a.save:before,
html:root .menu a.attach:before,
html:root .menu a.vcard:before,
html:root .menu a.signature:before,
html:root .menu a.spellcheck:before,
html:root .menu a.encrypt:before,
html:root .menu a.enigma:before,
html:root .menu a.create:before,
html:root .menu a.purge:before,
html:root .menu a.remove:before,
html:root .menu a.expunge:before,
html:root .menu a.import:before,
html:root .menu a.upload:before,
html:root .menu a.export:before,
html:root .menu a.download:before,
html:root .menu a.qrcode:before,
html:root .menu a.extwin:before,
html:root .menu a.source:before,
html:root .menu a.move:before,
html:root .menu a.copy:before,
html:root .menu a.read:before,
html:root .menu a.unread:before,
html:root .menu a.select.unread:before,
html:root .menu a.expand.unread:before,
html:root .menu a.flag:before,
html:root .menu a.unflag:before,
html:root .menu a.select.flagged:before,
html:root .menu a.undo:before,
html:root .menu a.refresh:before,
html:root .menu a.search:before,
html:root .menu a.threads:before,
html:root .menu a.firstpage:before,
html:root .menu a.prevpage:before,
html:root .menu a.lastpage:before,
html:root .menu a.addressbook:before,
html:root .menu a.assigngroup:before,
html:root .menu a.removegroup:before,
html:root .menu a.closewin:before,
html:root .menu a.select.none:before,
html:root .menu a.showurl:before,
html:root .menu a.properties:before,
html:root .menu a.info:before,
html:root .menu a.submit:before,
html:root .menu a.check.selected:before,
html:root .menu a.filterlink:before,
html:root .menu a.send:before,
html:root .menu a.select.page:before,
html:root .menu a.theme.dark:before,
html:root .menu a.theme.light:before,
html:root a.button.icon.sidebar-menu:before,
html:root button.btn.sidebar-menu:before,
html:root a.button.icon.toolbar-menu-button:before,
html:root button.btn.toolbar-menu-button:before,
html:root a.button.icon.toolbar-list-button:before,
html:root button.btn.toolbar-list-button:before,
html:root a.button.icon.task-menu-button:before,
html:root button.btn.task-menu-button:before,
html:root a.button.icon.back-sidebar-button:before,
html:root button.btn.back-sidebar-button:before,
html:root a.button.icon.back-content-button:before,
html:root button.btn.back-content-button:before,
html:root a.button.icon.back-list-button:before,
html:root button.btn.back-list-button:before,
html:root a.button.icon.back:before,
html:root button.btn.back:before,
html:root a.button.icon.refresh:before,
html:root button.btn.refresh:before,
html:root a.button.icon.generate:before,
html:root button.btn.generate:before,
html:root a.button.icon.yes:before,
html:root button.btn.yes:before,
html:root a.button.icon.submit:before,
html:root button.btn.submit:before,
html:root a.button.icon.continue:before,
html:root button.btn.continue:before,
html:root a.button.icon.save:before,
html:root button.btn.save:before,
html:root a.button.icon.create:before,
html:root button.btn.create:before,
html:root a.button.icon.edit:before,
html:root button.btn.edit:before,
html:root a.button.icon.qrcode:before,
html:root button.btn.qrcode:before,
html:root a.button.icon.search:before,
html:root button.btn.search:before,
html:root a.button.icon.filter:before,
html:root button.btn.filter:before,
html:root a.button.icon.import:before,
html:root button.btn.import:before,
html:root a.button.icon.export:before,
html:root button.btn.export:before,
html:root a.button.icon.discard:before,
html:root button.btn.discard:before,
html:root a.button.icon.delete:before,
html:root button.btn.delete:before,
html:root a.button.icon.next:before,
html:root button.btn.next:before,
html:root a.button.icon.restore:before,
html:root button.btn.restore:before,
html:root a.button.icon.send:before,
html:root button.btn.send:before,
html:root a.button.icon.bounce:before,
html:root button.btn.bounce:before,
html:root a.button.icon.attach:before,
html:root button.btn.attach:before,
html:root a.button.icon.attach.vcard:before,
html:root button.btn.attach.vcard:before,
html:root a.button.icon.sso:before,
html:root button.btn.sso:before,
html:root a.button.icon.no:before,
html:root button.btn.no:before,
html:root a.button.icon.close:before,
html:root button.btn.close:before,
html:root a.button.icon.cancel:before,
html:root button.btn.cancel:before,
html:root a.button.icon.remove:before,
html:root button.btn.remove:before,
html:root a.button.icon.unlock:before,
html:root button.btn.unlock:before,
html:root a.button.icon.encrypt:before,
html:root button.btn.encrypt:before,
html:root a.button.icon.help:before,
html:root button.btn.help:before,
html:root a.button.icon.folders:before,
html:root button.btn.folders:before,
html:root a.button.icon.options:before,
html:root button.btn.options:before,
html:root a.button.icon.tools:before,
html:root button.btn.tools:before,
html:root a.button.icon.settings:before,
html:root button.btn.settings:before,
html:root a.button.icon.properties:before,
html:root button.btn.properties:before,
html:root a.button.icon.selection:before,
html:root button.btn.selection:before,
html:root a.button.icon.insert.recipient:before,
html:root button.btn.insert.recipient:before,
html:root a.button.icon.sign:before,
html:root button.btn.sign:before,
html:root a.button.icon.extwin:before,
html:root button.btn.extwin:before,
html:root a.button.icon.dropdown:before,
html:root button.btn.dropdown:before,
html:root .input-group .icon.user:before,
html:root .input-group .icon.pass:before,
html:root .input-group .icon.host:before,
html:root .input-group .icon.cancel:before,
html:root .input-group .icon.delete:before,
html:root .input-group .icon.edit:before,
html:root .input-group .icon.add:before,
html:root .input-group .icon.add.recipient:before,
html:root .input-group .icon.search:before,
html:root .input-group .icon.filter:before,
html:root .input-group .icon.key:before,
html:root .searchbar form:before,
html:root .searchbar a.options:before,
html:root .searchbar a.reset:before,
html:root .searchbar a.unread:before,
html:root .searchbar.open a.options:before,
html:root .folderlist li.mailbox > a:before,
html:root .folderlist li.inbox > a:before,
html:root .folderlist li.drafts > a:before,
html:root .folderlist li.sent > a:before,
html:root .folderlist li.junk > a:before,
html:root .folderlist li.trash > a:before,
html:root .folderlist li.archive > a:before,
html:root .folderlist li.ns-shared > a:before,
html:root .folderlist li.ns-other > a:before,
html:root ul.treelist li div.treetoggle:before,
html:root ul.treelist li div.treetoggle.expanded:before,
html:root #settings-menu li > a:before,
html:root #sections-table tr > td.section:before,
html:root #settings-menu li.preferences > a:before,
html:root #settings-menu li.folders > a:before,
html:root #sections-table tr.folders > td.section:before,
html:root #settings-menu li.identities > a:before,
html:root #identities-table td.mail:before,
html:root #settings-menu li.responses > a:before,
html:root #responses-table td.name:before,
html:root #sections-table tr.chat > td.section:before,
html:root #settings-menu li.filter > a:before,
html:root #filterslist td.name:before,
html:root #filtersetslist td.name:before,
html:root #settings-menu li.vacation > a:before,
html:root #settings-menu li.forward > a:before,
html:root #settings-menu li.password > a:before,
html:root #settings-menu li.enigma > a:before,
html:root #settings-menu li.twofactorauth > a:before,
html:root #sections-table tr.encryption > td.section:before,
html:root #settings-menu li.info > a:before,
html:root #settings-menu li.userinfo > a:before,
html:root #settings-menu li.micuenta > a:before,
html:root #sections-table tr.general > td.section:before,
html:root #sections-table tr.mailbox > td.section:before,
html:root #sections-table tr.mailview > td.section:before,
html:root #sections-table tr.compose > td.section:before,
html:root #sections-table tr.addressbook > td.section:before,
html:root #sections-table tr.server > td.section:before,
html:root #sections-table tr.calendar > td.section:before,
html:root #directorylist li.addressbook > a:before,
html:root #directorylist li.contactgroup > a:before,
html:root .contactlist td.contactgroup:before,
html:root .listing.iconized tr.contact.group td.name:before,
html:root #savedsearchlist li > a:before,
html:root .contactlist td.contact:before,
html:root .listing.iconized tr.contact.person td.name:before,
html:root #messagelist span.msgicon.status.replied:not(.unread):before,
html:root #messagelist span.msgicon.status.forwarded:not(.unread):before,
html:root #messagelist span.msgicon.status.replied.forwarded:not(.unread):before,
html:root #messagelist span.flagged:before,
html:root #messagelist tr.flaggedroot:not(:hover) span.unflagged:before,
html:root #messagelist td.flags span.attachment > span:before,
html:root #messagelist td.flags span.attachment > span.report:before,
html:root #messagelist td.flags span.attachment > span.encrypted:before,
html:root #messagelist td.flags span.attachment > span.vcard:before,
html:root #messagelist tr.thread td.threads div:before,
html:root #messagelist tr.thread.expanded td.threads div:before,
html:root #message-content #attachment-list li > a.dropdown:before,
html:root .file-upload .attachmentslist li:before,
html:root .file-upload .attachmentslist li.uploading:before,
html:root .attachmentslist li a.delete:before,
html:root .attachmentslist li a.cancelupload:before,
html:root #message-header .header-links a.headers-details:before,
html:root #message-header .header-links a.headers-summary:before,
html:root #message-header .header-links a.headers-all:before,
html:root #message-header .header-links a.html:before,
html:root #message-header .header-links a.plain:before,
html:root #message-header .header-links a.zipdownload:before,
html:root #message-header > .subject a.extwin:before,
html:root body.status-flagged #message-header > .subject:before,
html:root .ui.alert > i.icon:before,
html:root .ui.alert.alert-success > i.icon:before,
html:root .ui.alert.alert-warning > i.icon:before,
html:root .ui.alert.alert-danger > i.icon:before,
html:root .ui.alert.loading > i.icon:before,
html:root .ui.alert.vcardattachment > i.icon:before,
html:root .ui.alert.enigmaattachment > i.icon:before,
html:root .ui.alert.signed > i.icon:before,
html:root .ui.alert.encrypted > i.icon:before,
html:root .ui.alert.chat > i.icon:before,
html:root .html-editor .editor-toolbar .mce-i-html:before,
html:root .ui-dialog .ui-dialog-titlebar-close:before,
html:root .floating-action-buttons a.button:before,
html:root .floating-action-buttons a.button.compose:before {
	content: "";
	font-family: inherit;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/* Elastic sets this one with !important */
html:root .menu a.selection:before {
	content: "" !important;
	font-family: inherit !important;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* folder */
html:root .menu a.files:before,
html:root .menu a.folders:before,
html:root a.button.icon.folders:before,
html:root button.btn.folders:before,
html:root .folderlist li.mailbox > a:before,
html:root #settings-menu li.folders > a:before,
html:root #sections-table tr.folders > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3C/svg%3E");
}

/* sliders */
html:root .menu a.options:before,
html:root a.button.icon.options:before,
html:root button.btn.options:before,
html:root #settings-menu li.preferences > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
}

/* settings */
html:root .menu a.settings:before,
html:root .menu a.actions:before,
html:root a.button.icon.tools:before,
html:root button.btn.tools:before,
html:root a.button.icon.settings:before,
html:root button.btn.settings:before,
html:root #settings-menu li > a:before,
html:root #sections-table tr > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E");
}

/* users */
html:root .menu a.contacts:before,
html:root #sections-table tr.addressbook > td.section:before,
html:root #directorylist li.contactgroup > a:before,
html:root .contactlist td.contactgroup:before,
html:root .listing.iconized tr.contact.group td.name:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8'/%3E%3Cpath d='M18 14.2c2.2.7 3.5 2.7 3.5 5.8'/%3E%3C/svg%3E");
}

/* mail */
html:root .menu a.mail:before,
html:root .menu a.recipient:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* help */
html:root .menu a.help:before,
html:root .menu a.about:before,
html:root a.button.icon.help:before,
html:root button.btn.help:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 .9-1 1.7v.5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* logout */
html:root .menu a.logout:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* pencil */
html:root .menu a.compose:before,
html:root .menu a.edit:before,
html:root .menu a.rename:before,
html:root a.button.icon.edit:before,
html:root button.btn.edit:before,
html:root .input-group .icon.edit:before,
html:root #sections-table tr.compose > td.section:before,
html:root .floating-action-buttons a.button.compose:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}

/* user-circle */
html:root .menu a.micuenta:before,
html:root .menu a.button-micuenta:before,
html:root #settings-menu li.micuenta > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M6.5 18.5c1.2-2.2 3.2-3.5 5.5-3.5s4.3 1.3 5.5 3.5'/%3E%3C/svg%3E");
}

/* calendar */
html:root .menu a.calendar:before,
html:root #sections-table tr.calendar > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

/* check-square */
html:root .menu a.tasklist:before,
html:root .menu a.select:before,
html:root .menu a.select.all:before,
html:root .menu a.select.invert:before,
html:root a.button.icon.selection:before,
html:root button.btn.selection:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

/* file-text */
html:root .menu a.notes:before,
html:root #filtersetslist td.name:before,
html:root #messagelist td.flags span.attachment > span.report:before,
html:root #message-header .header-links a.plain:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E");
}

/* message-text */
html:root .menu a.chat:before,
html:root .menu a.responses:before,
html:root .menu a.insertresponse:before,
html:root #settings-menu li.responses > a:before,
html:root #responses-table td.name:before,
html:root #sections-table tr.chat > td.section:before,
html:root .ui.alert.chat > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M7 8h10M7 12h6'/%3E%3C/svg%3E");
}

/* reply */
html:root .menu a.reply:before,
html:root #messagelist span.msgicon.status.replied:not(.unread):before,
html:root #messagelist span.msgicon.status.replied.forwarded:not(.unread):before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17 4 12l5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
}

/* reply-all */
html:root .menu a.reply-all:before,
html:root .menu a.reply.all:before,
html:root .menu a.reply.list:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 2 12l5-5'/%3E%3Cpath d='M12 17 7 12l5-5'/%3E%3Cpath d='M22 18v-2a4 4 0 0 0-4-4H7'/%3E%3C/svg%3E");
}

/* forward */
html:root .menu a.forward:before,
html:root #settings-menu li.forward > a:before,
html:root #messagelist span.msgicon.status.forwarded:not(.unread):before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 17 5-5-5-5'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E");
}

/* chevron-right */
html:root .menu a.expand:before,
html:root .menu a.nextpage:before,
html:root ul.treelist li div.treetoggle:before,
html:root #messagelist tr.thread td.threads div:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* shield-check */
html:root .menu a.notjunk:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* tag */
html:root .menu a.markmessage:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Cpath d='M7.5 7.5h.01'/%3E%3C/svg%3E");
}

/* more */
html:root .menu a.more:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E");
}

/* print */
html:root .menu a.print:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5'/%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E");
}

/* arrow-left */
html:root .menu a.prev:before,
html:root .menu a.back:before,
html:root a.button.icon.back-content-button:before,
html:root button.btn.back-content-button:before,
html:root a.button.icon.back-list-button:before,
html:root button.btn.back-list-button:before,
html:root a.button.icon.back:before,
html:root button.btn.back:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
}

/* arrow-right */
html:root .menu a.next:before,
html:root a.button.icon.next:before,
html:root button.btn.next:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* save */
html:root .menu a.save:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21h14a2 2 0 0 0 2-2V8l-5-5H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2z'/%3E%3Cpath d='M7 3v5h8'/%3E%3Cpath d='M7 21v-7h10v7'/%3E%3C/svg%3E");
}

/* paperclip */
html:root .menu a.attach:before,
html:root a.button.icon.attach:before,
html:root button.btn.attach:before,
html:root #messagelist td.flags span.attachment > span:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5 12.5 20a5 5 0 0 1-7-7l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4L15.5 7.5'/%3E%3C/svg%3E");
}

/* id-card */
html:root .menu a.vcard:before,
html:root #settings-menu li.identities > a:before,
html:root #identities-table td.mail:before,
html:root #messagelist td.flags span.attachment > span.vcard:before,
html:root .ui.alert.vcardattachment > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 16c.5-1.5 1.6-2 3-2s2.5.5 3 2M14 10h5M14 14h3'/%3E%3C/svg%3E");
}

/* pen-line */
html:root .menu a.signature:before,
html:root a.button.icon.sign:before,
html:root button.btn.sign:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

/* spell-check */
html:root .menu a.spellcheck:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 16 4-12 4 12M7.5 12h5'/%3E%3Cpath d='m14 19 2.5 2.5L22 16'/%3E%3C/svg%3E");
}

/* lock */
html:root .menu a.encrypt:before,
html:root .menu a.enigma:before,
html:root a.button.icon.unlock:before,
html:root button.btn.unlock:before,
html:root a.button.icon.encrypt:before,
html:root button.btn.encrypt:before,
html:root .input-group .icon.pass:before,
html:root #settings-menu li.twofactorauth > a:before,
html:root #sections-table tr.encryption > td.section:before,
html:root #messagelist td.flags span.attachment > span.encrypted:before,
html:root .ui.alert.signed > i.icon:before,
html:root .ui.alert.encrypted > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* plus */
html:root .menu a.create:before,
html:root a.button.icon.create:before,
html:root button.btn.create:before,
html:root .input-group .icon.add:before,
html:root .floating-action-buttons a.button:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* eraser */
html:root .menu a.purge:before,
html:root .menu a.remove:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 21-4.3-4.3a1 1 0 0 1 0-1.4l10-10a1 1 0 0 1 1.4 0l5.6 5.6a1 1 0 0 1 0 1.4L11 21'/%3E%3Cpath d='M22 21H7'/%3E%3Cpath d='m5 11 9 9'/%3E%3C/svg%3E");
}

/* compress */
html:root .menu a.expunge:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14h6v6'/%3E%3Cpath d='M20 10h-6V4'/%3E%3Cpath d='m14 10 7-7'/%3E%3Cpath d='m3 21 7-7'/%3E%3C/svg%3E");
}

/* upload */
html:root .menu a.import:before,
html:root .menu a.upload:before,
html:root a.button.icon.import:before,
html:root button.btn.import:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
}

/* download */
html:root .menu a.export:before,
html:root .menu a.download:before,
html:root a.button.icon.export:before,
html:root button.btn.export:before,
html:root #message-content #attachment-list li > a.dropdown:before,
html:root #message-header .header-links a.zipdownload:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

/* qr */
html:root .menu a.qrcode:before,
html:root a.button.icon.qrcode:before,
html:root button.btn.qrcode:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3M21 14v.01M14 21h.01M17 21h4v-4'/%3E%3C/svg%3E");
}

/* external-link */
html:root .menu a.extwin:before,
html:root a.button.icon.extwin:before,
html:root button.btn.extwin:before,
html:root #message-header > .subject a.extwin:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 10 14'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* code */
html:root .menu a.source:before,
html:root #message-header .header-links a.headers-all:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 16-4-4 4-4'/%3E%3Cpath d='m16 8 4 4-4 4'/%3E%3C/svg%3E");
}

/* folder-input */
html:root .menu a.move:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.7.9l.8 1.2a2 2 0 0 0 1.7.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1'/%3E%3Cpath d='M2 13h10'/%3E%3Cpath d='m9 16 3-3-3-3'/%3E%3C/svg%3E");
}

/* copy */
html:root .menu a.copy:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}

/* mail-open */
html:root .menu a.read:before,
html:root #sections-table tr.mailview > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9'/%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='m3 10 9 6 9-6'/%3E%3C/svg%3E");
}

/* mail-dot */
html:root .menu a.unread:before,
html:root .menu a.select.unread:before,
html:root .menu a.expand.unread:before,
html:root .searchbar a.unread:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10'/%3E%3Cpath d='m3 8 9 6 4-2.7'/%3E%3Ccircle cx='19' cy='6' r='2.5'/%3E%3C/svg%3E");
}

/* star */
html:root .menu a.flag:before,
html:root #messagelist tr.flaggedroot:not(:hover) span.unflagged:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
}

/* star-fill */
html:root .menu a.unflag:before,
html:root .menu a.select.flagged:before,
html:root #messagelist span.flagged:before,
html:root body.status-flagged #message-header > .subject:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
}

/* undo */
html:root .menu a.undo:before,
html:root a.button.icon.restore:before,
html:root button.btn.restore:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E");
}

/* refresh */
html:root .menu a.refresh:before,
html:root a.button.icon.refresh:before,
html:root button.btn.refresh:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.6-6.4L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}

/* search */
html:root .menu a.search:before,
html:root a.button.icon.search:before,
html:root button.btn.search:before,
html:root .input-group .icon.search:before,
html:root .searchbar form:before,
html:root #savedsearchlist li > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

/* threads */
html:root .menu a.threads:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M8 12h12M12 18h8'/%3E%3C/svg%3E");
}

/* chevrons-left */
html:root .menu a.firstpage:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E");
}

/* chevron-left */
html:root .menu a.prevpage:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}

/* chevrons-right */
html:root .menu a.lastpage:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
}

/* book */
html:root .menu a.addressbook:before,
html:root #directorylist li.addressbook > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h12a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M5 18a2 2 0 0 1 2-2h12'/%3E%3Cpath d='M9 8h6'/%3E%3C/svg%3E");
}

/* user-plus */
html:root .menu a.assigngroup:before,
html:root a.button.icon.insert.recipient:before,
html:root button.btn.insert.recipient:before,
html:root .input-group .icon.add.recipient:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3.1-7 7-7s7 3 7 7'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E");
}

/* x */
html:root .menu a.removegroup:before,
html:root .menu a.closewin:before,
html:root .menu a.select.none:before,
html:root a.button.icon.no:before,
html:root button.btn.no:before,
html:root a.button.icon.close:before,
html:root button.btn.close:before,
html:root a.button.icon.cancel:before,
html:root button.btn.cancel:before,
html:root a.button.icon.remove:before,
html:root button.btn.remove:before,
html:root .input-group .icon.cancel:before,
html:root .searchbar a.reset:before,
html:root .attachmentslist li a.delete:before,
html:root .attachmentslist li a.cancelupload:before,
html:root .ui-dialog .ui-dialog-titlebar-close:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* link */
html:root .menu a.showurl:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1 0l2.8-2.8a5 5 0 0 0-7.1-7.1L11.4 4.5'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1 0L4.1 13.8a5 5 0 0 0 7.1 7.1l1.4-1.4'/%3E%3C/svg%3E");
}

/* info */
html:root .menu a.properties:before,
html:root .menu a.info:before,
html:root a.button.icon.properties:before,
html:root button.btn.properties:before,
html:root #settings-menu li.info > a:before,
html:root #settings-menu li.userinfo > a:before,
html:root .ui.alert > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
}

/* check */
html:root .menu a.submit:before,
html:root .menu a.check.selected:before,
html:root a.button.icon.generate:before,
html:root button.btn.generate:before,
html:root a.button.icon.yes:before,
html:root button.btn.yes:before,
html:root a.button.icon.submit:before,
html:root button.btn.submit:before,
html:root a.button.icon.continue:before,
html:root button.btn.continue:before,
html:root a.button.icon.save:before,
html:root button.btn.save:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* filter */
html:root .menu a.filterlink:before,
html:root a.button.icon.filter:before,
html:root button.btn.filter:before,
html:root .input-group .icon.filter:before,
html:root #settings-menu li.filter > a:before,
html:root #filterslist td.name:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
}

/* list */
html:root .menu a.select.page:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E");
}

/* moon */
html:root .menu a.theme.dark:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E");
}

/* sun */
html:root .menu a.theme.light:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}

/* more-v */
html:root a.button.icon.sidebar-menu:before,
html:root button.btn.sidebar-menu:before,
html:root a.button.icon.toolbar-menu-button:before,
html:root button.btn.toolbar-menu-button:before,
html:root a.button.icon.toolbar-list-button:before,
html:root button.btn.toolbar-list-button:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='12' cy='19' r='1'/%3E%3C/svg%3E");
}

/* user */
html:root a.button.icon.attach.vcard:before,
html:root button.btn.attach.vcard:before,
html:root a.button.icon.sso:before,
html:root button.btn.sso:before,
html:root .input-group .icon.user:before,
html:root .contactlist td.contact:before,
html:root .listing.iconized tr.contact.person td.name:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E");
}

/* server */
html:root .input-group .icon.host:before,
html:root #sections-table tr.server > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='7' rx='2'/%3E%3Crect x='3' y='14' width='18' height='7' rx='2'/%3E%3Cpath d='M7 6.5h.01M7 17.5h.01'/%3E%3C/svg%3E");
}

/* key */
html:root .input-group .icon.key:before,
html:root #settings-menu li.password > a:before,
html:root #settings-menu li.enigma > a:before,
html:root .ui.alert.enigmaattachment > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.3-9.3M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E");
}

/* mail-clock */
html:root #settings-menu li.vacation > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3Ccircle cx='18' cy='17' r='4'/%3E%3Cpath d='M18 15.5V17l1 1'/%3E%3C/svg%3E");
}

/* monitor */
html:root #sections-table tr.general > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

/* file */
html:root .file-upload .attachmentslist li:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E");
}

/* spinner */
html:root .file-upload .attachmentslist li.uploading:before,
html:root .ui.alert.loading > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9'/%3E%3C/svg%3E");
}

/* image */
html:root #message-header .header-links a.html:before,
html:root .html-editor .editor-toolbar .mce-i-html:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/* check-circle */
html:root .ui.alert.alert-success > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

/* alert-triangle */
html:root .ui.alert.alert-warning > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}

/* alert-circle */
html:root .ui.alert.alert-danger > i.icon:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}

/* inbox */
html:root .folderlist li.inbox > a:before,
html:root #sections-table tr.mailbox > td.section:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.8 1.1z'/%3E%3C/svg%3E");
}

/* file-pen */
html:root .folderlist li.drafts > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M17.5 12.5a1.8 1.8 0 0 1 2.5 2.5L14.5 20.5 12 21l.5-2.5z'/%3E%3C/svg%3E");
}

/* send */
html:root .menu a.send:before,
html:root a.button.icon.send:before,
html:root button.btn.send:before,
html:root a.button.icon.bounce:before,
html:root button.btn.bounce:before,
html:root .folderlist li.sent > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E");
}

/* shield-alert */
html:root .menu a.junk:before,
html:root .folderlist li.junk > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}

/* trash */
html:root .menu a.delete:before,
html:root .menu a.search.delete:before,
html:root a.button.icon.discard:before,
html:root button.btn.discard:before,
html:root a.button.icon.delete:before,
html:root button.btn.delete:before,
html:root .input-group .icon.delete:before,
html:root .folderlist li.trash > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E");
}

/* archive */
html:root .menu a.archive:before,
html:root .folderlist li.archive > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='5' rx='1'/%3E%3Cpath d='M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9'/%3E%3Cpath d='M10 13h4'/%3E%3C/svg%3E");
}

/* folder-shared */
html:root .folderlist li.ns-shared > a:before,
html:root .folderlist li.ns-other > a:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M8.5 17c.6-1.3 1.9-2 3.5-2s2.9.7 3.5 2'/%3E%3C/svg%3E");
}

/* chevron-down */
html:root .menu a.dropdown:before,
html:root .menu a.collapse:before,
html:root .menu a.expand.all:before,
html:root a.button.icon.dropdown:before,
html:root button.btn.dropdown:before,
html:root .searchbar a.options:before,
html:root ul.treelist li div.treetoggle.expanded:before,
html:root #messagelist tr.thread.expanded td.threads div:before,
html:root #message-header .header-links a.headers-details:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* chevron-up */
html:root .menu a.expand.none:before,
html:root .searchbar.open a.options:before,
html:root #message-header .header-links a.headers-summary:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}

/* menu */
html:root a.button.icon.task-menu-button:before,
html:root button.btn.task-menu-button:before,
html:root a.button.icon.back-sidebar-button:before,
html:root button.btn.back-sidebar-button:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

/* folder: the folders button next to the menu button in the mail and contacts
   list headers (Elastic's back-sidebar-button.folders). Repeated after "menu"
   because that rule also matches it and comes later. */
html:root a.button.icon.back-sidebar-button.folders:before,
html:root button.btn.back-sidebar-button.folders:before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z'/%3E%3C/svg%3E");
}

}


/* ==========================================================================
   3. Layout frame: columns, column headers and footers
   rail 76 | ink pane 248 | list clamp(340px, 28vw, 440px) | content (canvas)
   Widths only apply to Elastic's "large" layout; below 1201px Elastic shows
   one or two columns at a time and keeps its own flex values. Inline widths
   set by Elastic's column resizer still win (no !important here).
   ========================================================================== */

html:root #layout {
	background-color: var(--canvas);
}

html:root #layout-content {
	background-color: var(--canvas);
	border-color: var(--line);
}

html:root #layout-list {
	background-color: var(--surface);
	border-right: 1px solid var(--line);
}

html:root #layout-sidebar:not(.sidebar-right) {
	background-color: var(--side-bg);
	color: var(--side-text);
	border-right: 0;
}

html:root #layout-sidebar.sidebar-right {
	background-color: var(--surface);
	color: var(--text);
	border-left: 1px solid var(--line);
	border-right: 0;
}

@media screen and (min-width: 1201px) {
	html:root #layout-sidebar:not(.sidebar-right) {
		flex: 0 0 auto;
		width: 248px;
		min-width: 200px;
		max-width: 30%;
	}

	html:root #layout-list {
		flex: 0 0 auto;
		width: clamp(340px, 28vw, 440px);
		min-width: 300px;
		max-width: 40%;
	}

	html:root #layout-sidebar.sidebar-right {
		flex: 0 0 auto;
		width: 300px;
		min-width: 260px;
		max-width: 35%;
	}
}

/* Column resizer: invisible, just a wider grab area */
html:root .column-resizer {
	background: transparent;
}

/* Headers: 56px everywhere, white surface with a hairline */
html:root #layout > div > .header,
html:root #layout > div > .footer {
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	background-color: var(--surface);
	border-color: var(--line);
}

html:root #layout > div > .header {
	height: 56px;
	min-height: 56px;
	line-height: 56px;
	padding: 0 8px;
	gap: 2px;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 1px solid var(--line);
}

html:root #layout > div > .footer {
	height: 40px;
	min-height: 40px;
	line-height: 40px;
	border-top: 1px solid var(--line);
}

/* Content footer toolbar that ui.js adds on small screens
   (prev/next + cloned Enviar/Guardar buttons) */
html:root #layout > div > .footer.toolbar {
	align-items: center;
	height: 56px;
	min-height: 56px;
	padding: 0 8px;
	line-height: normal;
}

html:root #layout > div > .footer.toolbar a.button,
html:root #layout > div > .footer.toolbar .buttons > a,
html:root #layout > div > .footer.toolbar .buttons > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	height: 44px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
}

html:root #layout > div > .footer.toolbar a.button:before,
html:root #layout > div > .footer.toolbar .buttons > a:before,
html:root #layout > div > .footer.toolbar .buttons > button:before {
	display: block;
	float: none !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 22px;
}

html:root #layout > div > .footer.toolbar .inner {
	display: none;
}

/* The rule above sets display, so repeat Elastic's hiding of prev/next
   when there is no list to step through (hide-nav-buttons) */
html:root #layout > div > .footer.toolbar.hide-nav-buttons a.button.prev,
html:root #layout > div > .footer.toolbar.hide-nav-buttons a.button.next {
	display: none;
}

html:root #layout > div > .footer.toolbar .buttons > a.primary {
	border-radius: calc(var(--btn-radius) + 2px);
	background-color: var(--accent-fill);
	color: var(--on-accent);
	box-shadow: inset 0 0 0 1px var(--accent-ring);
}

/* Titles: left aligned (ui.js centers them with inline margins) */
html:root #layout > div > .header > .header-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 0 8px !important;
	text-align: left;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Icon buttons in any column header (back, menu, refresh, more...) */
html:root #layout > div > .header a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	min-width: 36px;
	max-width: none;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background-color: transparent;
	color: var(--text-2);
	line-height: normal;
	font-size: 13px;
	text-decoration: none;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

html:root #layout > div > .header a.button:before {
	display: block;
	float: none !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	font-size: 18px;
	line-height: 20px;
}

html:root #layout > div > .header a.button span.inner {
	display: none !important;
}

html:root #layout > div > .header a.button:not(.disabled):hover,
html:root #layout > div > .header a.button:not(.disabled):focus {
	background-color: var(--hover);
	color: var(--text);
}

html:root #layout > div > .header a.button.disabled {
	opacity: .45;
}

html:root #layout > div > .header a.button:focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: 2px;
}

html:root #layout-sidebar:not(.sidebar-right) > .header a.button:focus-visible {
	outline-color: var(--side-text);
}

/* The rule above sets display, so repeat Elastic's responsive hiding */
@media screen and (min-width: 481px) {
	html:root #layout > div > .header a.task-menu-button {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	html:root #layout > div > .header a.toolbar-list-button {
		display: none;
	}
}

@media screen and (min-width: 769px) {
	html:root #layout > div > .header a.toolbar-menu-button {
		display: none;
	}
}

@media screen and (min-width: 1201px) {
	html:root #layout > div > .header a.toolbar-list-button,
	html:root #layout > div > .header a.back-list-button,
	html:root #layout > div > .header a.back-sidebar-button {
		display: none;
	}
}


/* ==========================================================================
   4. Task rail (#layout-menu)
   76px ink rail: logo plate, items with icon + 11px label, the selected item
   is a "ficha" (light tile behind the icon). Compose sits on top in
   --compose-bg. 481-1024px: compact 60px rail, icons only (Elastic hides the
   labels there). <= 480px: Elastic turns it into a drawer (see section 20).
   ========================================================================== */

@media screen and (min-width: 481px) {
	html:root #layout-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 0 0 auto;
		width: 76px;
		padding: 12px 0;
		position: relative;
		overflow: hidden;
		background: var(--rail-bg);
		border-right: 0;
	}

	html:root #layout-menu > .popover-header {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		height: auto;
		margin: 0 0 12px;
		padding: 0 !important;
		line-height: normal;
		border: 0;
		background-color: transparent !important;
	}

	html:root #layout-menu > .popover-header > a {
		display: none !important;
	}
}

/* Logo plate (square mark, lime for Apolar, white for Añil) */
html:root #layout-menu .ap-rail-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-color: var(--plate-bg);
	color: var(--plate-ink);
	overflow: hidden;
}

html:root #layout-menu .popover-header img {
	display: block;
	width: auto;
	height: auto;
	max-width: 32px;
	max-height: 32px;
	padding: 0;
	opacity: 1;
	object-fit: contain;
}

@media screen and (min-width: 481px) {
	html:root #taskmenu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: none;
	}

	html:root #taskmenu .action-buttons,
	html:root #taskmenu .special-buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	html:root #taskmenu .action-buttons {
		margin-bottom: 6px;
	}

	html:root #taskmenu .special-buttons {
		position: static;
		margin-top: auto;
		padding-top: 8px;
		background: transparent;
	}

	/* Item: icon over an 11px label; the ficha is drawn by ::after */
	html:root #taskmenu a {
		position: relative;
		z-index: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 4px;
		float: none;
		width: 72px;
		min-width: 0;
		max-width: none;
		height: auto;
		min-height: 60px;
		margin: 0;
		padding: 5px 0;
		border-radius: 12px;
		color: var(--side-text-2);
		font-size: 11px;
		line-height: 14px;
		font-weight: 600;
		letter-spacing: 0;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		overflow: visible;
		cursor: pointer;
	}

	html:root #taskmenu a,
	html:root #taskmenu a:hover,
	html:root #taskmenu a:focus,
	html:root #taskmenu a.selected,
	html:root #taskmenu a.selected:hover,
	html:root #taskmenu .special-buttons a:not(:focus),
	html:root #taskmenu .action-buttons a,
	html:root #taskmenu .action-buttons a:hover {
		background: transparent;
	}

	html:root #taskmenu a:before {
		display: block;
		flex: none;
		float: none !important;
		width: 22px !important;
		height: 22px !important;
		margin: 5px 0 !important;
		color: var(--side-icon);
		font-size: 18px;
		line-height: 22px;
	}

	html:root #taskmenu a:after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 5px;
		left: 50%;
		width: 44px;
		height: 32px;
		margin-left: -22px;
		border-radius: 10px;
		background-color: transparent;
		transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
	}

	html:root #taskmenu a span.inner {
		display: block;
		max-width: 72px;
		padding: 0;
		font-size: 11px;
		line-height: 14px;
		font-weight: inherit;
		letter-spacing: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	html:root #taskmenu a:not(.disabled):hover:after {
		background-color: var(--side-hover);
	}

	html:root #taskmenu a.selected {
		color: var(--side-text);
		font-weight: 700;
	}

	html:root #taskmenu a.selected:before {
		color: var(--ficha-icon);
	}

	html:root #taskmenu a.selected:after,
	html:root #taskmenu a.selected:hover:after {
		background-color: var(--ficha-bg);
		box-shadow: inset 0 0 0 1.5px var(--ficha-ring);
	}

	html:root #taskmenu a.logout,
	html:root #taskmenu a.logout:hover {
		color: var(--side-text-2) !important;
	}

	/* Redactar */
	html:root #taskmenu .action-buttons a.compose {
		color: var(--side-text);
	}

	html:root #taskmenu .action-buttons a.compose:before {
		color: var(--on-compose);
	}

	html:root #taskmenu .action-buttons a.compose:after,
	html:root #taskmenu .action-buttons a.compose:hover:after,
	html:root #taskmenu .action-buttons a.compose.selected:after {
		background-color: var(--compose-bg);
		box-shadow: var(--shadow-1);
	}

	html:root #taskmenu .action-buttons a.compose:not(.disabled):hover:after {
		box-shadow: 0 0 0 3px var(--side-hover), var(--shadow-1);
	}

	html:root #taskmenu a:focus-visible {
		outline: 2px solid var(--side-text);
		outline-offset: 0;
	}
}

/* Compact rail, icons only */
@media screen and (min-width: 481px) and (max-width: 1024px) {
	html:root #layout-menu {
		width: 60px;
		padding: 8px 0;
	}

	html:root #layout-menu > .popover-header {
		margin-bottom: 8px;
	}

	html:root #layout-menu .ap-rail-plate {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	html:root #layout-menu .popover-header img {
		max-width: 26px;
		max-height: 26px;
	}

	html:root #taskmenu a {
		justify-content: center;
		gap: 0;
		width: 48px;
		height: 48px;
		min-height: 48px;
		padding: 0;
	}

	html:root #taskmenu a:before {
		margin: 0 !important;
	}

	html:root #taskmenu a:after {
		top: 2px;
		width: 44px;
		height: 44px;
		margin-left: -22px;
		border-radius: 12px;
	}

	html:root #taskmenu a span.inner {
		display: none;
	}
}


/* ==========================================================================
   5. Ink pane (#layout-sidebar): folders, settings sections, address books
   Rows are 36px "folder items"; the selected one is the ficha. Bandeja de
   entrada is the only folder with a count pill; other counts stay quiet.
   ========================================================================== */

html:root #layout-sidebar:not(.sidebar-right) > .header {
	padding: 0 8px 0 22px;
	background-color: transparent;
	color: var(--side-text);
	border-bottom: 0;
}

html:root #layout-sidebar:not(.sidebar-right) > .header > .header-title {
	padding: 0 !important;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--side-text);
}

html:root #layout-sidebar:not(.sidebar-right) > .header a.button {
	color: var(--side-text-2);
}

html:root #layout-sidebar:not(.sidebar-right) > .header a.button:not(.disabled):hover,
html:root #layout-sidebar:not(.sidebar-right) > .header a.button:not(.disabled):focus {
	background-color: var(--side-hover);
	color: var(--side-text);
}

html:root #layout-sidebar:not(.sidebar-right) > .scroller {
	padding: 4px 12px 12px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing,
html:root #layout-sidebar:not(.sidebar-right) .listing ul {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

html:root #layout-sidebar:not(.sidebar-right) .listing ul {
	margin-top: 2px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing + .listing {
	margin-top: 12px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li {
	position: relative;
	margin: 0 0 2px;
	padding: 0;
	border: 0;
	line-height: 36px;
	font-size: 14px;
	color: var(--side-text);
	background: transparent;
	overflow: visible;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li > a {
	position: relative;
	display: block;
	height: 36px;
	margin: 0;
	padding: 0 10px 0 38px;
	border: 0;
	border-radius: 10px;
	background-color: transparent;
	color: var(--side-text);
	font-size: 14px;
	line-height: 36px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li > a:before {
	position: absolute;
	top: 9px;
	left: 10px;
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	color: var(--side-icon);
	font-size: 15px;
	line-height: 18px;
	text-align: center;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li > a:hover {
	background-color: var(--side-hover);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li > a:focus-visible {
	outline: 2px solid var(--side-text);
	outline-offset: -2px;
}

/* Unread folders keep the regular weight; the count says it */
html:root #layout-sidebar:not(.sidebar-right) .listing li.unread > a {
	padding-right: 44px;
	font-weight: 500;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > a,
html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > a:hover {
	background-color: var(--ficha-bg);
	color: var(--ficha-text);
	font-weight: 600;
	box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--ficha-ring);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > a:before {
	color: var(--ficha-icon);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.droptarget > a {
	background-color: var(--side-hover);
	outline: 1.5px dashed var(--side-text);
	outline-offset: -2px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.virtual > a,
html:root #layout-sidebar:not(.sidebar-right) .listing li > a.virtual {
	opacity: .55;
}

/* Counts: quiet numbers, Bandeja de entrada gets the pill */
html:root #layout-sidebar:not(.sidebar-right) .listing li .unreadcount {
	position: absolute;
	top: 50%;
	right: 10px;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border-radius: 0;
	background: transparent;
	color: var(--side-text-2);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.inbox > a > .unreadcount {
	min-width: 24px;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background-color: var(--accent-on-side);
	color: var(--on-accent-side);
	line-height: 20px;
	font-weight: 700;
	text-align: center;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > a > .unreadcount {
	color: var(--ficha-ct);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.inbox.selected > a > .unreadcount {
	background-color: var(--ficha-pill-bg);
	color: var(--ficha-pill-text);
	box-shadow: inset 0 0 0 1px var(--ficha-pill-ring);
}

/* Subfolders: 16px indent per level, chevron toggle on the right */
html:root #layout-sidebar:not(.sidebar-right) .listing li li > a {
	padding-left: 54px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li > a:before {
	left: 26px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li > a {
	padding-left: 70px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li > a:before {
	left: 42px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li li > a {
	padding-left: 86px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li li > a:before {
	left: 58px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li li li > a {
	padding-left: 102px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li li li li li > a:before {
	left: 74px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li div.treetoggle {
	position: absolute;
	z-index: 1;
	top: 4px;
	right: 4px;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background-color: transparent;
	color: var(--side-text-2);
	line-height: normal;
	cursor: pointer;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li div.treetoggle:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li div.treetoggle:hover {
	background-color: var(--side-hover);
	color: var(--side-text);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > div.treetoggle {
	color: var(--ficha-ct);
}

html:root #layout-sidebar:not(.sidebar-right) .listing li:has(> div.treetoggle) > a {
	padding-right: 40px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li.unread:has(> div.treetoggle) > a {
	padding-right: 72px;
}

html:root #layout-sidebar:not(.sidebar-right) .listing li:has(> div.treetoggle) > a > .unreadcount {
	right: 38px;
}

/* Footer: storage meter (#quotadisplay). Label = the "quota" text, which the
   skin localization renames to "Almacenamiento". The apolar plugin may add
   the classes "warn" (>= 80 %) or "alert" (>= 95 %) to #quotadisplay and an
   "Ampliar" link inside it or right after it. */
html:root #layout-sidebar:not(.sidebar-right) > .footer {
	position: relative;
	display: block;
	height: auto;
	min-height: 0;
	padding: 0;
	line-height: normal;
	background-color: transparent;
	border-top: 1px solid var(--side-line);
	color: var(--side-text-2);
	font-weight: 500;
}

html:root #quotadisplay {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	width: 100%;
	max-width: none;
	padding: 12px 22px 16px;
	color: var(--side-text-2);
	font-size: 12px;
	line-height: 16px;
}

html:root #quotadisplay:before {
	display: none;
}

html:root #quotadisplay > .voice {
	display: block !important;
	grid-column: 1;
	grid-row: 1;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--side-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html:root #quotadisplay .bar {
	display: block;
	grid-column: 1 / -1;
	grid-row: 2;
	flex: none;
	height: 6px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--side-track);
	overflow: hidden;
}

html:root #quotadisplay .bar .value {
	display: block;
	height: 6px;
	border-radius: 999px;
	background-color: var(--q-ok);
	opacity: 1;
	transition: width var(--dur-2) var(--ease);
}

html:root #quotadisplay .bar .value.warning,
html:root #quotadisplay.warn .bar .value {
	background-color: var(--q-warn);
}

html:root #quotadisplay.alert .bar .value {
	background-color: var(--q-alert);
}

html:root #quotadisplay .count {
	grid-column: 1 / -1;
	grid-row: 3;
	order: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--side-text);
	font-variant-numeric: tabular-nums;
}

html:root #quotadisplay a,
html:root #layout-sidebar:not(.sidebar-right) > .footer > a {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--side-text);
	text-decoration: underline;
}

html:root #layout-sidebar:not(.sidebar-right) > .footer > a {
	position: absolute;
	top: 12px;
	right: 22px;
}

html:root #layout-sidebar:not(.sidebar-right) > .footer a:hover {
	color: var(--side-text);
	text-decoration-thickness: 2px;
}

/* Touch: 44px rows */
html:root.touch #layout-sidebar:not(.sidebar-right) .listing li {
	line-height: 44px;
	font-size: 14px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li > a {
	height: 44px;
	line-height: 44px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li > a:before {
	top: 13px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li div.treetoggle {
	top: 4px;
	width: 36px;
	height: 36px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li:has(> div.treetoggle) > a {
	padding-right: 48px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li.unread:has(> div.treetoggle) > a {
	padding-right: 80px;
}

html:root.touch #layout-sidebar:not(.sidebar-right) .listing li:has(> div.treetoggle) > a > .unreadcount {
	right: 46px;
}


/* ==========================================================================
   6. List column: header, search bar, page navigation
   ========================================================================== */

html:root #layout-list > .header {
	padding: 0 8px 0 16px;
	border-bottom: 0;
	background-color: var(--surface);
}

/* Folder name in the display face (Elastic hides it on large screens) */
html:root #layout > #layout-list > .header > .header-title {
	display: block;
	padding: 0 !important;
	font-size: 20px;
	line-height: 26px;
	color: var(--text);
}

html:root #layout > #layout-list > .header > a.button:not([style*="none"]) + .header-title {
	padding-left: 4px !important;
}

/* List toolbar (ui.js turns it into ul#toolbar-list-menu; inline on large screens) */
html:root #toolbar-list-menu:not(.popupmenu) {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
}

html:root #toolbar-list-menu:not(.popupmenu) > li {
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: normal;
}

html:root #toolbar-list-menu:not(.popupmenu) a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: 36px;
	min-width: 36px;
	max-width: none;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 10px;
	background-color: transparent;
	color: var(--text-2);
	line-height: normal;
	cursor: pointer;
}

html:root #toolbar-list-menu:not(.popupmenu) a:before {
	display: block;
	float: none !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	font-size: 18px;
	line-height: 20px;
}

html:root #toolbar-list-menu:not(.popupmenu) a span.inner {
	display: none !important;
}

html:root #toolbar-list-menu:not(.popupmenu) a:not(.disabled):hover,
html:root #toolbar-list-menu:not(.popupmenu) a:not(.disabled):focus {
	background-color: var(--hover);
	color: var(--text);
}

html:root #toolbar-list-menu:not(.popupmenu) a.selected,
html:root #toolbar-list-menu:not(.popupmenu) a.active.selected {
	background-color: var(--accent-soft);
	color: var(--accent-text);
	box-shadow: inset 0 0 0 1.5px var(--accent-ui);
}

html:root #toolbar-list-menu:not(.popupmenu) a.disabled {
	opacity: .45;
}

html:root #layout-list > .header a.toolbar-button span.inner {
	display: none !important;
}

/* Search bar: a quiet 36px field under the header */
html:root .searchbar {
	height: 36px;
	min-height: 36px;
	line-height: 36px;
	margin: 0 12px 8px;
	padding: 0 4px 0 0;
	border: 0;
	border-radius: 10px;
	background-color: var(--chip);
	color: var(--text);
	box-shadow: inset 0 0 0 1px transparent;
	transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

html:root .searchbar:focus-within {
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--accent-ui), 0 0 0 1px var(--accent-ui);
}

html:root .searchbar form {
	align-items: center;
	min-width: 0;
}

html:root .searchbar form:before {
	display: block;
	flex: none;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0 8px 0 12px;
	color: var(--text-3);
	font-size: 14px;
	line-height: 16px;
}

html:root .searchbar input {
	height: 36px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 20px;
}

html:root .searchbar input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

html:root .searchbar input:focus-visible {
	outline: none;
}

html:root .searchbar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--text-2);
	text-decoration: none;
}

html:root .searchbar a:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 14px;
	line-height: 16px;
}

html:root .searchbar a:hover {
	background-color: var(--pressed);
	color: var(--text);
}

html:root .searchbar a.selected {
	background-color: var(--accent-soft);
	color: var(--accent-text);
}

html:root .searchbar a.reset,
html:root .searchbar a.search {
	display: none;
}

html:root .searchbar.active a.reset {
	display: inline-flex;
}

/* Search options panel */
html:root .searchoptions {
	background-color: var(--surface);
	color: var(--text);
}

html:root #layout-list > .searchoptions {
	margin: 0 12px 8px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px var(--line-2);
}

/* The list body gets the hairline under the header area */
html:root #layout-list > .scroller {
	border-top: 1px solid var(--line);
}

/* Page navigation (list footer) */
html:root .menu.pagenav {
	gap: 2px;
	padding: 0 8px 0 16px !important;
	background-color: var(--surface);
}

html:root #layout-list > .pagenav {
	height: 40px;
	min-height: 40px;
	line-height: 40px;
	border-top: 1px solid var(--line);
}

html:root .menu.pagenav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	flex-grow: 0;
	width: 28px;
	min-width: 28px !important;
	height: 28px;
	border-radius: 8px;
	color: var(--text-2);
}

html:root .menu.pagenav a:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
}

html:root .menu.pagenav a:not(.disabled):hover {
	background-color: var(--hover);
	color: var(--text);
}

html:root .menu.pagenav a.disabled {
	opacity: .45;
}

html:root .menu.pagenav .pagenav-text {
	order: -1;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

html:root .menu.pagenav input {
	width: 40px;
	height: 28px;
	max-height: 28px;
	margin: 0 4px;
	padding: 0 4px;
	border-radius: 8px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   7. Message list (#messagelist, Elastic widescreen rows)
   Two-line rows: [6px][thread 20][dot gutter 20][sender ... date]
                                                 [subject ... clip star]
   The table is rendered as blocks and every row as a flex box, the same way
   Elastic already does it on touch screens.
   ========================================================================== */

html:root #messagelist {
	display: block;
	width: 100%;
	padding: 4px 8px 8px;
	border-spacing: 0;
	table-layout: auto;
	color: var(--text-2);
}

html:root #messagelist > tbody {
	display: block;
}

html:root #messagelist > tbody > tr {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 64px;
	margin: 0 0 2px;
	padding: 0 0 0 6px;
	border-radius: var(--radius-row);
	background-color: var(--surface);
	color: var(--text-2);
	cursor: default;
	transition: background-color var(--dur-1) var(--ease);
}

html:root #messagelist > tbody > tr > td {
	flex: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 14px !important;
	line-height: 20px;
	vertical-align: top;
	overflow: visible;
	text-overflow: clip;
}

html:root:not(.touch) #messagelist > tbody > tr:not(.selected):hover {
	background-color: var(--hover);
}

html:root #messagelist > tbody > tr.selected {
	background-color: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent-ui);
}

/* Keyboard cursor ring. Not on touch screens (no keyboard cursor there; Elastic
   skips it too), where it looked like a selection on the first row after load */
html:root:not(.touch) #messagelist.focus > tbody > tr.focused {
	box-shadow: inset 0 0 0 2px var(--accent-ui);
}

/* The list focuses a cell of the cursor row; the row ring above is the indicator,
   so the generic :focus-visible outline (clipped to a stray line) is dropped */
html:root .listing tbody td:focus-visible {
	outline: none;
}

/* Selection checkboxes (Seleccionar mode) */
html:root #messagelist > tbody > tr > td.selection {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	padding: 0;
	line-height: normal;
}

html:root #messagelist:not(.withselection) > tbody > tr > td.selection {
	display: none;
}

html:root #messagelist td.selection input {
	width: 18px;
	height: 18px;
	margin: 0;
}

/* Thread toggles */
html:root #messagelist > tbody > tr > td.threads {
	display: flex;
	justify-content: center;
	flex: 0 0 20px;
	padding: 12px 0 0;
	color: var(--text-3);
	line-height: normal;
}

html:root #messagelist td.threads div {
	display: flex;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	cursor: pointer;
}

html:root #messagelist td.threads div:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: auto;
	font-size: 13px;
	line-height: 16px;
}

html:root #messagelist td.threads div:hover {
	background-color: var(--pressed);
	color: var(--text);
}

/* Main cell */
html:root #messagelist > tbody > tr > td.subject {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	align-content: flex-start;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin-left: 20px; /* dot gutter; thread depth adds an inline padding-left */
	padding: 12px 12px 12px 0;
}

html:root #messagelist td.subject span.fromto {
	order: 1;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html:root #messagelist td.subject span.date,
html:root #messagelist td.subject span.size {
	order: 2;
	flex: none;
	margin-left: 8px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--text-3);
	white-space: nowrap;
}

html:root #messagelist td.subject span.subject {
	order: 3;
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
	margin-top: 2px;
	padding-right: 44px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 400;
	color: var(--text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	user-select: none;
}

html:root #messagelist td.subject span.subject a,
html:root #messagelist td.subject span.fromto a {
	color: inherit;
	text-decoration: none;
}

/* Status: unread dot in the gutter (line 1), replied/forwarded glyph (line 2) */
html:root #messagelist td.subject span.msgicon.status {
	position: absolute;
	top: 12px;
	left: -16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 20px;
	margin: 0;
	padding: 0;
	color: var(--text-3);
	line-height: normal;
	cursor: pointer;
}

html:root #messagelist td.subject span.msgicon.status:before {
	content: "";
	display: block;
	float: none;
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 50%;
	background-color: transparent;
	font-size: 0;
	line-height: 0;
}

html:root #messagelist td.subject span.msgicon.status:after {
	display: none;
}

html:root #messagelist td.subject span.msgicon.status.unread:before {
	background-color: var(--accent-ui);
}

html:root #messagelist td.subject span.msgicon.status.unreadchildren:before {
	box-shadow: inset 0 0 0 1.5px var(--accent-ui);
}

html:root #messagelist td.subject span.msgicon.status.replied:not(.unread),
html:root #messagelist td.subject span.msgicon.status.forwarded:not(.unread) {
	top: 34px;
	height: 18px;
}

html:root #messagelist td.subject span.msgicon.status.replied:not(.unread):before,
html:root #messagelist td.subject span.msgicon.status.forwarded:not(.unread):before {
	width: 12px;
	height: 12px;
	border-radius: 0;
}

/* Unread: dot + bold, never color alone */
html:root #messagelist tr.unread td.subject span.fromto {
	font-weight: 700;
	color: var(--text);
}

html:root #messagelist tr.unread td.subject span.subject {
	font-weight: 600;
	color: var(--text);
}

html:root #messagelist tr.unread td.subject span.date {
	font-weight: 600;
	color: var(--text);
}

/* Flagged rows are not tinted (the star says it); deleted rows are struck */
html:root #messagelist tr.deleted td.subject span.fromto,
html:root #messagelist tr.deleted td.subject span.subject,
html:root #messagelist tr.deleted td.subject span.date {
	font-weight: 400;
	color: var(--text-3);
}

html:root #messagelist tr.deleted td.subject span.subject {
	text-decoration: line-through;
}

html:root #messagelist tr.unroot td.subject span.subject a {
	text-decoration: underline;
}

/* Flags and attachment icons: bottom right, on the subject line */
html:root #messagelist > tbody > tr > td.flags {
	position: absolute;
	top: auto;
	right: 12px;
	bottom: 12px;
	left: auto;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 4px;
	width: auto;
	height: 18px;
	padding: 0;
	background: transparent;
}

html:root #messagelist td.flags > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 18px;
	line-height: 18px;
	visibility: visible;
}

html:root #messagelist td.flags > span > span {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
}

html:root #messagelist td.flags span.flagged:before,
html:root #messagelist td.flags span.unflagged:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	color: var(--flag);
	font-size: 13px;
	line-height: 16px;
}

html:root #messagelist td.flags span.unflagged:before {
	color: var(--text-3);
}

html:root #messagelist td.flags span.attachment > span {
	color: var(--text-3);
}

html:root #messagelist td.flags span.attachment > span:before {
	display: block;
	float: none;
	width: 14px;
	height: 14px;
	margin: 1px;
	font-size: 12px;
	line-height: 14px;
}

/* Empty folder / no results: three tejas from the brand mosaic */
html:root .listing-info {
	top: 40%;
	width: 80%;
	padding-top: 40px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
	color: var(--text-2);
}

html:root .listing-info:before,
html:root .listing-info:after {
	content: "";
	position: absolute;
	top: 0;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1.5px var(--line-2);
}

html:root .listing-info:before {
	left: calc(50% - 42px);
	box-shadow: inset 0 0 0 1.5px var(--line-2), 30px 0 0 0 var(--accent-ui);
}

html:root .listing-info:after {
	left: calc(50% + 18px);
}

/* Quick actions on row hover (Elastic 1.7 .listing-hover-menu). Elastic puts
   it next to the table, outside the row, so it is a small floating toolbar.
   Buttons: flag/unflag and delete/undo (plus read/unread or archive if a
   script adds a.button.read / .unread / .archive). */
html:root .listing-hover-menu {
	display: flex;
	align-items: center;
	gap: 2px;
	right: 16px;
	height: 36px;
	margin-top: 4px;
	padding: 3px;
	border: 0;
	border-radius: 10px;
	background-color: var(--raised);
	box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2);
	z-index: 2;
}

html:root .listing-hover-menu span.txt {
	display: none;
}

html:root .listing-hover-menu a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
	line-height: normal;
	cursor: pointer;
}

html:root .listing-hover-menu a.button:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 14px;
	line-height: 16px;
}

html:root .listing-hover-menu a.button:not(.disabled):hover {
	background-color: var(--pressed);
	color: var(--text);
}

html:root .listing-hover-menu a.button.delete:not(.disabled):hover {
	color: var(--danger);
}

html:root .listing-hover-menu a.button.unflag {
	color: var(--flag);
}

/* Drag layer */
html:root #rcmdraglayer {
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background-color: var(--toast-bg);
	color: var(--toast-text);
	box-shadow: var(--shadow-2);
	font-size: 13px;
	opacity: 1;
}


/* ==========================================================================
   8. Other lists in the list column (contacts, settings sections, folders,
      identities, responses, filters). Same row language as the message list.
   ========================================================================== */

html:root #layout-list .scroller table.listing:not(#messagelist) {
	padding: 4px 8px;
	border-collapse: separate;
	border-spacing: 0 2px;
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody td {
	height: 40px;
	padding: 0 12px;
	border: 0;
	background-color: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 20px;
	vertical-align: middle;
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr > td:first-child {
	border-radius: var(--radius-row) 0 0 var(--radius-row);
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr > td:last-child {
	border-radius: 0 var(--radius-row) var(--radius-row) 0;
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr > td:only-child {
	border-radius: var(--radius-row);
}

html:root:not(.touch) #layout-list .scroller table.listing:not(#messagelist) tbody tr:not(.selected):hover > td {
	background-color: var(--hover);
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr.selected > td {
	background-color: var(--accent-soft);
	color: var(--text);
}

html:root:not(.touch) #layout-list .scroller table.listing:not(#messagelist).focus tbody tr.focused {
	outline: 2px solid var(--accent-ui);
	outline-offset: -2px;
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr.droptarget > td {
	background-color: var(--accent-soft);
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr.disabled > td,
html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr.deleted > td {
	color: var(--text-3);
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody td:before {
	display: inline-block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 10px 0 0;
	vertical-align: -4px;
	color: var(--text-3);
	font-size: 15px;
	line-height: 18px;
}

html:root #layout-list .scroller table.listing:not(#messagelist) tbody tr.selected td:before {
	color: var(--accent-text);
}

html:root #layout-list .listing span.secondary,
html:root .contactlist span.email {
	color: var(--text-3);
	font-style: normal;
}

/* ul listings (folder subscriptions in Ajustes > Carpetas) */
html:root #layout-list .scroller ul.listing {
	padding: 4px 8px;
}

html:root #layout-list .scroller ul.listing li {
	position: relative;
	margin: 0 0 2px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-row);
	background: transparent;
	line-height: 40px;
	font-size: 14px;
	color: var(--text);
	overflow: visible;
}

html:root #layout-list .scroller ul.listing li > a {
	position: relative;
	display: block;
	height: 40px;
	margin: 0;
	padding: 0 64px 0 38px;
	border: 0;
	border-radius: var(--radius-row);
	color: var(--text);
	line-height: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

html:root #layout-list .scroller ul.listing li > a:before {
	position: absolute;
	top: 11px;
	left: 10px;
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	color: var(--text-3);
	font-size: 15px;
	line-height: 18px;
}

html:root:not(.touch) #layout-list .scroller ul.listing li > a:hover {
	background-color: var(--hover);
}

html:root #layout-list .scroller ul.listing li.selected {
	background: transparent;
	color: var(--text);
}

html:root #layout-list .scroller ul.listing li.selected > a {
	background-color: var(--accent-soft);
	color: var(--text);
}

html:root #layout-list .scroller ul.listing li.selected > a:before {
	color: var(--accent-text);
}

html:root #layout-list .scroller ul.listing li > a:focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: -2px;
}

html:root #layout-list .scroller ul.listing li ul {
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
}

html:root #layout-list .scroller ul.listing li li > a {
	padding-left: 54px;
}

html:root #layout-list .scroller ul.listing li li > a:before {
	left: 26px;
}

html:root #layout-list .scroller ul.listing li li li > a {
	padding-left: 70px;
}

html:root #layout-list .scroller ul.listing li li li > a:before {
	left: 42px;
}

html:root #layout-list .scroller ul.listing li li li li > a {
	padding-left: 86px;
}

html:root #layout-list .scroller ul.listing li li li li > a:before {
	left: 58px;
}

html:root #layout-list .scroller ul.listing li div.treetoggle {
	position: absolute;
	z-index: 1;
	top: 6px;
	right: 60px;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--text-3);
	line-height: normal;
	cursor: pointer;
}

html:root #layout-list .scroller ul.listing li div.treetoggle:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 13px;
	line-height: 16px;
}

html:root #layout-list .scroller ul.listing li div.treetoggle:hover {
	background-color: var(--pressed);
}

html:root #layout-list .scroller ul.listing li .custom-switch {
	top: 0;
	right: 8px;
	display: flex;
	align-items: center;
	height: 40px;
}

html:root #layout-list .scroller ul.listing li .custom-switch .custom-control-label:before,
html:root #layout-list .scroller ul.listing li .custom-switch .custom-control-label:after {
	margin-top: 0;
}

/* Touch: 48px rows */
html:root.touch #layout-list .scroller table.listing:not(#messagelist) tbody td {
	height: 48px;
	line-height: 20px;
	font-size: 15px;
}

html:root.touch #layout-list .scroller ul.listing li,
html:root.touch #layout-list .scroller ul.listing li > a {
	height: 48px;
	line-height: 48px;
	font-size: 15px;
}

html:root.touch #layout-list .scroller ul.listing li > a:before {
	top: 15px;
}

html:root.touch #layout-list .scroller ul.listing li .custom-switch {
	height: 48px;
}

html:root.touch #layout-list .scroller ul.listing li div.treetoggle {
	top: 6px;
	width: 36px;
	height: 36px;
}


/* ==========================================================================
   9. Content header and its toolbar (ul#toolbar-menu, built by ui.js)
   36px buttons with an 18px icon and a 13px label. On large and normal
   screens the toolbar is inline; on small screens Elastic turns it into a
   popup (".popupmenu") opened from the header's ⋮ button.
   ========================================================================== */

html:root #layout-content > .header {
	padding: 0 12px;
	container-type: inline-size;
	container-name: ap-toolbar;
}

html:root #layout-content > .header > #toolbar-menu:not(.popupmenu) {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
	overflow: hidden;
}

html:root #toolbar-menu:not(.popupmenu) > li {
	display: flex;
	align-items: center;
	flex: none;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	line-height: normal;
}

html:root #toolbar-menu:not(.popupmenu) > li.spacer {
	width: 16px;
}

html:root #toolbar-menu:not(.popupmenu) a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	float: none;
	width: auto;
	min-width: 36px;
	max-width: none;
	height: 36px;
	margin: 0;
	padding: 0 12px 0 10px;
	border: 0 !important;
	border-radius: 10px;
	background-color: transparent;
	color: var(--text-2);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	overflow: visible;
	cursor: pointer;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

html:root #toolbar-menu:not(.popupmenu) a:before {
	display: block;
	flex: none;
	float: none !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	font-size: 16px;
	line-height: 18px;
}

html:root #toolbar-menu:not(.popupmenu) a span.inner {
	display: inline;
	font-size: 13px;
	font-weight: 500;
}

html:root #toolbar-menu:not(.popupmenu) a:not(.disabled):hover,
html:root #toolbar-menu:not(.popupmenu) a:not(.disabled):focus {
	background-color: var(--hover);
	color: var(--text);
}

html:root #toolbar-menu:not(.popupmenu) a:not(.disabled):active {
	background-color: var(--pressed);
}

html:root #toolbar-menu:not(.popupmenu) a.selected,
html:root #toolbar-menu:not(.popupmenu) a.pressed {
	background-color: var(--accent-soft);
	color: var(--accent-text);
	box-shadow: inset 0 0 0 1.5px var(--accent-ui);
}

html:root #toolbar-menu:not(.popupmenu) a.disabled {
	opacity: .45;
	cursor: default;
}

/* Eliminar stays neutral; only its icon turns red on hover */
html:root #toolbar-menu:not(.popupmenu) a.delete:not(.disabled):hover:before {
	color: var(--danger);
}

/* Split buttons (Responder a todos ▾, Reenviar ▾) */
html:root #toolbar-menu:not(.popupmenu) .dropbutton {
	display: inline-flex;
	align-items: center;
	border-radius: 10px;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton:not(.disabled):hover {
	background-color: var(--hover);
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a:first-child {
	padding-right: 4px;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a:first-child:not(.disabled):hover {
	background-color: transparent;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a.dropdown {
	justify-content: center;
	width: 24px;
	min-width: 24px;
	padding: 0;
	font-size: 12px;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a.dropdown:before {
	width: 12px !important;
	height: 12px !important;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a.dropdown span.inner {
	display: none !important;
}

html:root #toolbar-menu:not(.popupmenu) .dropbutton > a.dropdown:not(.disabled):hover {
	background-color: var(--pressed);
}

/* Mail: management actions on the left, reply group (and Más) on the right */
@supports selector(:has(a)) {
	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li.spacer {
		display: none;
	}

	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> a.reply) {
		order: 10;
		margin-left: auto;
	}

	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> .dropbutton > a.reply-all),
	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> .dropbutton > a.forward) {
		order: 11;
	}

	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> a.more) {
		order: 20;
	}

	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> a.prev),
	html:root body.task-mail #toolbar-menu:not(.popupmenu) > li:has(> a.next) {
		order: 30;
	}

	html:root body.task-mail.action-compose #toolbar-menu:not(.popupmenu) > li.spacer {
		display: flex;
	}
}

/* Collapse labels by toolbar width (container queries) */
@container ap-toolbar (max-width: 879px) {
	html:root #toolbar-menu:not(.popupmenu) > li > a:not(.reply):not(.save):not(.send) {
		justify-content: center;
		width: 36px;
		padding: 0;
	}

	html:root #toolbar-menu:not(.popupmenu) > li > a:not(.reply):not(.save):not(.send) span.inner {
		display: none !important;
	}
}

@container ap-toolbar (max-width: 639px) {
	html:root #toolbar-menu:not(.popupmenu) .dropbutton > a:first-child {
		justify-content: center;
		width: 36px;
		padding: 0;
	}

	html:root #toolbar-menu:not(.popupmenu) .dropbutton > a:first-child span.inner,
	html:root #toolbar-menu:not(.popupmenu) > li > a.save span.inner {
		display: none !important;
	}
}


/* ==========================================================================
   10. Buttons
   Primary = --accent-fill, radius --btn-radius (pill in apolar, 10px in Añil;
   +2px for the 44-48px sizes). Secondary = surface + strong border. Ghost =
   accent text. Danger only in dialogs.
   ========================================================================== */

html:root .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--btn-radius);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

html:root .btn.btn-sm {
	min-height: 32px;
	padding: 0 12px;
	font-size: 13px;
}

html:root .btn.btn-lg {
	min-height: 48px;
	padding: 0 24px;
	font-size: 16px;
	line-height: 24px;
	border-radius: calc(var(--btn-radius) + 2px);
}

html:root .btn:before {
	display: block !important;
	flex: none;
	float: none !important;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	font-size: 15px;
	line-height: 18px;
}

html:root .btn:focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: 2px;
}

html:root .btn:disabled,
html:root .btn.disabled {
	opacity: .5 !important;
}

/* Primary */
html:root .btn-primary,
html:root .btn-primary:focus,
html:root .btn-primary.focus {
	background-color: var(--accent-fill);
	border-color: transparent;
	color: var(--on-accent);
	box-shadow: inset 0 0 0 1px var(--accent-ring);
}

html:root .btn-primary:not(:disabled):not(.disabled):hover,
html:root .btn-primary:not(:disabled):not(.disabled):active,
html:root .btn-primary:not(:disabled):not(.disabled).active,
html:root .btn-primary:not(:disabled):not(.disabled):active:focus {
	background-color: var(--accent-hover);
	border-color: transparent;
	color: var(--on-accent);
	box-shadow: inset 0 0 0 1px var(--accent-ring);
}

html:root .btn-primary:disabled,
html:root .btn-primary.disabled {
	background-color: var(--hover);
	color: var(--text-3);
	box-shadow: none;
	opacity: 1 !important;
}

/* Secondary */
html:root .btn-secondary,
html:root .btn-secondary:focus,
html:root .btn-secondary.focus {
	background-color: var(--surface);
	border-color: transparent;
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--border-strong);
}

html:root .btn-secondary:not(:disabled):not(.disabled):hover,
html:root .btn-secondary:not(:disabled):not(.disabled):active,
html:root .btn-secondary:not(:disabled):not(.disabled).active,
html:root .btn-secondary:not(:disabled):not(.disabled):active:focus {
	background-color: var(--hover);
	border-color: transparent;
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--border-strong);
}

html:root .btn-secondary:disabled,
html:root .btn-secondary.disabled {
	background-color: var(--surface);
	color: var(--text-3);
}

/* Danger */
html:root .btn-danger,
html:root .btn-danger:focus,
html:root .btn-danger.focus {
	background-color: var(--danger);
	border-color: transparent;
	color: var(--on-danger);
	box-shadow: none;
}

html:root .btn-danger:not(:disabled):not(.disabled):hover,
html:root .btn-danger:not(:disabled):not(.disabled):active,
html:root .btn-danger:not(:disabled):not(.disabled):active:focus {
	background-color: var(--danger-text);
	border-color: transparent;
	color: var(--on-danger);
	box-shadow: none;
}

/* Link-style buttons inside dialog button bars */
html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
	color: var(--text-2);
}

/* Ghost / link */
html:root .btn-link,
html:root .btn-link:focus {
	min-height: 36px;
	padding: 0 12px;
	background-color: transparent;
	color: var(--accent-text);
	box-shadow: none;
	text-decoration: none;
}

html:root .btn-link:not(:disabled):not(.disabled):hover {
	background-color: var(--accent-soft);
	color: var(--accent-text);
	text-decoration: none;
}

/* Touch: Elastic removes focus shadows, keep our borders */
html:root.touch .btn-primary:focus {
	box-shadow: inset 0 0 0 1px var(--accent-ring) !important;
}

html:root.touch .btn-secondary:focus {
	box-shadow: inset 0 0 0 1px var(--border-strong) !important;
}

/* No icons inside form and dialog buttons (the design uses labels only),
   except Enviar */
html:root .formbuttons .btn:not(.send):before,
html:root .ui-dialog-buttonset .btn:before,
html:root .boxbuttons .btn:before {
	display: none !important;
}

/* Floating compose button (phones) */
html:root .footer:not(:empty) + .floating-action-buttons {
	bottom: 40px;
}

html:root .floating-action-buttons a.button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) 0;
	border-radius: 18px;
	background: var(--accent-fill);
	color: var(--on-accent);
	opacity: 1;
	box-shadow: inset 0 0 0 1px var(--accent-ring), var(--shadow-3);
}

html:root .floating-action-buttons a.button:before {
	display: block;
	float: none;
	width: 24px;
	height: 24px;
	margin: 0;
	font-size: 22px;
	line-height: 24px;
}


/* ==========================================================================
   11. Forms: inputs, selects, switches, checkboxes, tabs, tables
   40px controls, 10px radius, strong border; focus = accent border + ring.
   ========================================================================== */

html:root .form-control {
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	font-size: 14px;
	line-height: 20px;
	box-shadow: none;
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

html:root .form-control:not(.is-invalid) {
	border-color: var(--border-strong);
}

html:root input.form-control,
html:root select.form-control {
	height: 40px;
	padding: 0 12px;
}

html:root select.form-control.custom-select {
	padding-right: 32px;
}

html:root textarea.form-control {
	height: auto;
	padding: 10px 12px;
	line-height: 22px;
}

html:root .form-control:not(.is-invalid):hover {
	border-color: var(--text-3);
}

html:root .form-control:not(.is-invalid):focus {
	border-color: var(--accent-ui);
	background-color: var(--surface);
	color: var(--text) !important;
	box-shadow: 0 0 0 1px var(--accent-ui);
	outline: 0;
}

html:root .form-control.is-invalid {
	border-color: var(--danger);
	background-image: none;
	padding-right: 12px;
}

html:root .form-control.is-invalid:focus {
	border-color: var(--danger);
	box-shadow: 0 0 0 1px var(--danger);
}

html:root .form-control::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

html:root .form-control:disabled,
html:root .form-control[readonly] {
	background-color: var(--hover);
	color: var(--text-3);
	opacity: 1;
}

html:root .form-control-plaintext {
	color: var(--text);
}

html:root .input-group-text {
	background-color: var(--chip);
	border-color: var(--border-strong);
	color: var(--text-2);
	font-size: 14px;
}

html:root .input-group > .input-group-prepend > .input-group-text {
	border-radius: 10px 0 0 10px;
}

html:root .input-group > .input-group-append > .input-group-text {
	border-radius: 0 10px 10px 0;
}

html:root .input-group .icon:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	font-size: 15px;
	line-height: 18px;
}

html:root .input-group a:focus {
	background-color: transparent;
}

html:root .input-group a:focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: -2px;
}

/* Labels, hints, legends */
html:root .col-form-label,
html:root .propform td.title,
html:root .propform label.col-form-label {
	color: var(--text-2);
	font-size: 14px;
	font-weight: 500;
}

html:root .form-text,
html:root .formcontent .hint,
html:root .propform .form-text,
html:root .file-upload .hint {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	font-style: normal;
	color: var(--text-3);
}

html:root .invalid-feedback {
	color: var(--danger-text);
	font-size: 12px;
	line-height: 16px;
}

html:root legend,
html:root .propform legend,
html:root .formcontent legend {
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--text);
}

/* Native checkboxes and radios: accent color */
html:root input[type="checkbox"],
html:root input[type="radio"] {
	accent-color: var(--accent-ui);
}

/* Switch (Elastic converts most form checkboxes to .custom-switch).
   Track 44x26, 20px knob; on = --accent-ui track, --on-accent-ui knob. */
html:root .custom-switch {
	min-height: 26px;
}

html:root .custom-switch .custom-control-label {
	min-height: 26px;
	padding-left: 52px;
	line-height: 26px;
	color: var(--text);
}

html:root.touch .custom-switch .custom-control-label {
	padding-left: 52px;
}

html:root .custom-switch .custom-control-label:before,
html:root.touch .custom-switch .custom-control-label:before {
	top: 0;
	left: 0;
	width: 44px;
	height: 26px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--border-strong);
	box-shadow: none;
	transition: background-color var(--dur-1) var(--ease);
}

html:root .custom-switch .custom-control-label:after,
html:root.touch .custom-switch .custom-control-label:after {
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	margin: 0;
	border-radius: 50%;
	background-color: #FFFFFF; /* fixed: white knob (design spec) */
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

html:root .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
	border-color: transparent;
	background-color: var(--accent-ui);
}

html:root .custom-switch .custom-control-input:checked ~ .custom-control-label:after,
html:root.touch .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
	background-color: var(--on-accent-ui);
	transform: translateX(18px);
}

html:root .custom-switch .custom-control-input:focus ~ .custom-control-label:before,
html:root .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label:before {
	border-color: transparent;
	box-shadow: none;
}

html:root .custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label:before {
	border-color: transparent;
	background-color: var(--text-3);
}

html:root .custom-switch .custom-control-input:checked:not(:disabled):active ~ .custom-control-label:before {
	background-color: var(--accent-ui);
}

html:root .custom-switch .custom-control-input:focus-visible ~ .custom-control-label:before {
	outline: 2px solid var(--accent-ui);
	outline-offset: 2px;
}

html:root .custom-switch .custom-control-input:disabled ~ .custom-control-label {
	opacity: .5;
}

html:root .custom-switch .custom-control-input:checked:disabled ~ .custom-control-label:before {
	background-color: var(--accent-ui);
}

/* Tabs */
html:root .nav-tabs {
	gap: 4px;
	border-bottom: 1px solid var(--line);
}

html:root .nav-tabs .nav-link {
	margin-bottom: -1px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--text-2);
	font-weight: 600;
}

html:root .nav-tabs .nav-link:hover {
	border-color: transparent;
	border-bottom-color: var(--line-2);
	background: transparent;
	color: var(--text);
}

html:root .nav-tabs .nav-link.active,
html:root .nav-tabs .nav-item.show .nav-link {
	border-color: transparent;
	border-bottom-color: var(--accent-ui);
	background: transparent;
	color: var(--text);
}

/* Tables */
html:root .table {
	color: var(--text);
}

html:root .table td,
html:root .table th,
html:root .table thead th {
	border-color: var(--line);
}

html:root .table thead th {
	border-bottom-width: 1px;
	color: var(--text-3);
	font-size: 12px;
	font-weight: 600;
}

html:root .table-widget,
html:root .table-widget > .footer {
	border-color: var(--line-2);
}

html:root .table-widget {
	border-radius: 12px;
	overflow: hidden;
}

html:root .table-widget table.options-table tr.selected td {
	background-color: var(--accent-soft);
	color: var(--text);
}

/* Multi-input (managesieve, identities) */
html:root .multi-input > .content,
html:root .multi-input:not(.is-invalid) > .content {
	border-color: var(--border-strong);
	border-radius: 10px;
}

html:root .multi-input > .content.focused,
html:root .multi-input:not(.is-invalid) > .content.focused {
	border-color: var(--accent-ui);
	box-shadow: 0 0 0 1px var(--accent-ui);
}

/* Upload widgets */
html:root .file-upload {
	border: 2px dashed var(--line-2);
	border-radius: 12px;
}

html:root .file-upload.droptarget.active {
	border-color: var(--border-strong);
}

html:root .file-upload.droptarget.hover {
	border-color: var(--accent-ui);
	background-color: var(--accent-soft);
}

html:root .image-upload {
	background-color: var(--chip);
}

html:root #contactpic,
html:root img.contactphoto {
	background-color: var(--chip) !important;
}


/* ==========================================================================
   12. Popovers, menus, select menus, tooltips
   --raised, 1px --line-2, r12, --shadow-2, 6px padding; 36px items (44 on
   touch) with a 16px icon in --text-2.
   ========================================================================== */

html:root .popover {
	padding: 6px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background-color: var(--raised);
	color: var(--text);
	box-shadow: var(--shadow-2);
	font-size: 14px;
}

html:root .popover > .arrow {
	display: none;
}

html:root .popover-body {
	padding: 0;
	color: var(--text);
}

html:root .popupmenu {
	min-width: 200px;
}

html:root .popover .listing li,
html:root .popover .menu li,
html:root .popupmenu .listing li {
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: 14px;
	line-height: 36px;
}

html:root .popover .menu li a,
html:root .popover .listing li a,
html:root .popupmenu .listing li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 36px;
	font-weight: 400;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

html:root .popover .menu li a:before,
html:root .popover .listing li a:before,
html:root .popupmenu .listing li > a:before {
	flex: none;
	float: none !important;
	width: 16px !important;
	min-width: 16px;
	height: 16px !important;
	margin: 0 !important;
	color: var(--text-2);
	font-size: 14px;
	line-height: 16px !important;
}

html:root .popover .menu li a:not(.disabled):hover,
html:root .popover .menu li a:not(.disabled):focus,
html:root .popover .listing li a:not(.disabled):hover,
html:root .popupmenu .listing li > a:not(.disabled):hover,
html:root .popupmenu .listing li > a:not(.disabled):focus {
	background-color: var(--hover);
	color: var(--text);
}

html:root .listing li > a:focus-visible,
html:root .popover .menu li a:focus-visible,
html:root .popupmenu .listing li > a:focus-visible {
	outline: 2px solid var(--accent-ui);
	outline-offset: -2px;
}

/* Folder picker ("Mover a…"): ui.js indents with an inline padding-left */
html:root .popover .folderlist.menu li > a:before {
	margin-left: 10px !important;
}

html:root .popover .menu li a.disabled,
html:root .popupmenu .listing li > a.disabled {
	opacity: .45;
}

html:root .popover .menu li a.delete:not(.disabled),
html:root .popover .menu li a.purge:not(.disabled) {
	color: var(--danger-text);
}

html:root .popover .menu li a.delete:not(.disabled):before,
html:root .popover .menu li a.purge:not(.disabled):before {
	color: var(--danger);
}

html:root .popover .menu li a span.inner {
	font-size: 14px;
}

html:root .popover .menu li a[aria-haspopup] > span {
	flex: 1;
}

html:root .popover .menu li a[aria-haspopup]:after {
	margin: 0 0 0 auto;
	color: var(--text-3);
}

html:root .popover .menu li.separator,
html:root .popupmenu .listing li.separator {
	padding: 10px 10px 4px;
	line-height: 14px !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-3);
	background-color: transparent;
}

html:root .popover .menu ul + li.separator {
	margin-top: 6px;
	border-top: 1px solid var(--line);
}

html:root .popupmenu .listing li.selected,
html:root .popover .listing li.selected {
	background-color: transparent;
	color: var(--text);
}

html:root .popupmenu .listing li.selected > a,
html:root .popover .listing li.selected > a,
html:root .select-menu .listing li.selected > a {
	background-color: var(--accent-soft);
	color: var(--text);
}

html:root .popover .menu .dropbutton {
	border-radius: 8px;
}

html:root .popover .menu .dropbutton:not(.disabled):hover,
html:root .popover .menu .dropbutton a.dropdown {
	background-color: transparent;
}

html:root .popover .menu .dropbutton a.dropdown:not(.disabled):hover {
	background-color: var(--hover);
}

html:root .popover .formcontent,
html:root .popover .propform {
	color: var(--text);
}

/* Search options inside a popover keep their own padding */
html:root .popover .searchoptions .formcontent {
	padding: 8px 6px;
}

/* Autocomplete (recipients) and jQuery UI menus */
html:root #rcmKSearchpane li.selected,
html:root #rcmKSearchpane li:hover {
	background-color: var(--accent-soft);
	color: var(--text);
}

html:root .ui-menu {
	padding: 6px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background-color: var(--raised);
	box-shadow: var(--shadow-2);
}

html:root .ui-menu .ui-menu-item {
	border: 0;
}

html:root .ui-menu .ui-menu-item-wrapper {
	padding: 0 10px;
	border-radius: 8px;
	color: var(--text);
	line-height: 36px;
}

html:root .ui-menu .ui-state-active {
	margin: 0 !important;
	border: 0 !important;
	background-color: var(--hover) !important;
	color: var(--text);
}

/* Tooltips */
html:root .tooltip {
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

html:root .tooltip-inner {
	max-width: 260px;
	padding: 4px 8px;
	border-radius: 8px;
	background-color: var(--toast-bg);
	color: var(--toast-text);
}

html:root .tooltip .arrow {
	display: none;
}

/* Phone and small screens: Elastic shows popovers as a side sheet */
html:root.layout-phone .popover:not(.select-menu),
html:root.layout-small .popover:not(.select-menu) {
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--raised);
	box-shadow: var(--shadow-3);
}

html:root.layout-phone .popover-header,
html:root.layout-small .popover-header {
	height: 56px;
	min-height: 56px;
	padding: 0 8px 0 16px;
	line-height: 56px;
	border-bottom: 1px solid var(--line);
	background-color: var(--surface);
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
}

html:root.layout-phone .popover-header a,
html:root.layout-small .popover-header a {
	color: var(--text);
}

html:root.layout-phone .popover-body,
html:root.layout-small .popover-body {
	padding: 6px;
}

html:root.layout-phone .popover-overlay,
html:root.layout-small .popover-overlay {
	background-color: var(--scrim);
}

html:root.touch .popover .listing li a,
html:root.touch .popover .menu li a,
html:root.touch .popupmenu .listing li > a {
	height: 44px;
	line-height: 44px;
	font-size: 15px;
	padding: 0 12px;
}


/* ==========================================================================
   13. Dialogs (jQuery UI) and the date picker
   r16, --shadow-3, 24px padding, --scrim backdrop. Buttons right-aligned,
   Cancelar first.
   ========================================================================== */

html:root .ui-widget-overlay {
	background-color: var(--scrim);
	opacity: 1 !important;
}

html:root .ui-widget {
	border-color: var(--line-2);
}

html:root .ui-widget-content,
html:root .ui-widget-header {
	background-color: var(--raised);
	color: var(--text);
}

html:root .ui-dialog.ui-widget-content,
html:root .ui-dialog.ui-widget {
	padding: 0;
	border: 0;
	border-radius: 16px;
	background-color: var(--raised);
	color: var(--text-2);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}

html:root .ui-dialog .ui-dialog-titlebar {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 64px;
	padding: 20px 64px 8px 24px;
	border: 0;
	background: transparent;
	color: var(--text);
}

html:root .ui-dialog .ui-dialog-title {
	float: none;
	padding: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: var(--text);
	background: transparent;
}

html:root .ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
	box-shadow: none;
}

html:root .ui-dialog .ui-dialog-titlebar-close:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	font-size: 16px;
	line-height: 18px !important;
}

html:root .ui-dialog .ui-dialog-titlebar-close .ui-icon,
html:root .ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
	display: none;
}

html:root .ui-dialog .ui-dialog-titlebar-close:hover {
	background-color: var(--hover);
	color: var(--text);
}

html:root .ui-dialog .ui-dialog-content:not(.iframe) {
	padding: 4px 24px 8px;
	color: var(--text-2);
	font-size: 14px;
	line-height: 20px;
}

html:root .ui-dialog .ui-dialog-content.iframe,
html:root .ui-dialog iframe {
	padding: 0;
	background-color: var(--raised);
}

html:root .ui-dialog .ui-dialog-buttonpane {
	height: auto;
	margin: 0;
	padding: 16px 24px 24px;
	border: 0;
	background: transparent;
}

html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	gap: 8px;
}

html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,
html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
	min-width: 0;
	margin: 0;
}

@media screen and (min-width: 481px) {
	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
		order: -1;
	}
}

/* Date picker */
html:root .ui-datepicker {
	padding: 8px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background-color: var(--raised);
	box-shadow: var(--shadow-2);
	color: var(--text);
}

html:root .ui-datepicker .ui-datepicker-header {
	border-color: var(--line);
	background: transparent;
	color: var(--text);
}

html:root .ui-datepicker th {
	color: var(--text-3);
	font-weight: 600;
}

html:root .ui-datepicker td a,
html:root .ui-datepicker .ui-state-default,
html:root .ui-datepicker.ui-widget-content .ui-state-default {
	border-radius: 8px;
	color: var(--text);
}

html:root .ui-datepicker .ui-datepicker-days-cell-over a,
html:root .ui-datepicker .ui-state-highlight,
html:root .ui-datepicker.ui-widget-content .ui-state-highlight {
	background: var(--accent-soft);
	color: var(--accent-text);
}

html:root .ui-datepicker a.ui-state-active {
	background: var(--accent-fill) !important;
	color: var(--on-accent) !important;
}

html:root .ui-datepicker .ui-datepicker-prev,
html:root .ui-datepicker .ui-datepicker-next {
	color: var(--text-2);
}


/* ==========================================================================
   14. Toasts (#messagestack) and inline banners (.ui.alert)
   Toasts: bottom center, max 480, --toast-bg (inverted in dark mode), typed
   18px icon. Banners: soft tone + 1px border + 18px icon, r12.
   ========================================================================== */

@keyframes ap-spin {
	to {
		transform: rotate(360deg);
	}
}

html:root #messagestack {
	left: 50%;
	right: auto;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: min(480px, calc(100vw - 32px));
	transform: translateX(-50%);
	pointer-events: none;
}

html:root #messagestack > div {
	display: flex;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background-color: var(--toast-bg);
	color: var(--toast-text);
	box-shadow: var(--shadow-3);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

html:root #messagestack > div.ui.alert {
	background-color: var(--toast-bg);
	color: var(--toast-text);
	box-shadow: var(--shadow-3);
}

html:root #messagestack > div > span {
	margin: 0;
}

html:root #messagestack > div > i.icon {
	flex: none;
	margin: 0;
	font-size: 18px !important;
	line-height: 1;
	color: var(--toast-text-2);
}

html:root #messagestack > div > i.icon:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	color: var(--toast-text-2);
	font-size: 16px;
	line-height: 18px;
}

html:root #messagestack > div.alert-success > i.icon:before {
	color: var(--toast-ok);
}

html:root #messagestack > div.alert-danger > i.icon:before {
	color: var(--toast-err);
}

html:root #messagestack > div.alert-warning > i.icon:before {
	color: var(--toast-warn);
}

html:root #messagestack > div.loading > i.icon:before {
	animation: ap-spin .9s linear infinite;
}

html:root #messagestack > div a {
	color: inherit !important;
	font-weight: 600;
}

/* Inline banners */
html:root .ui.alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin: 0 0 12px;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background-color: var(--chip);
	color: var(--text-2);
	box-shadow: inset 0 0 0 1px var(--line-2);
	font-size: 13px;
	line-height: 18px;
	opacity: 1;
}

html:root .ui.alert > span {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

html:root .ui.alert > i.icon {
	flex: none;
	margin: 0;
	font-size: 18px !important;
	line-height: 1;
}

html:root .ui.alert > i.icon:before,
html:root .ui.alert.boxinformation > i.icon:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	color: var(--text-3);
	font-size: 16px;
	line-height: 18px;
}

html:root .ui.alert.alert-warning,
html:root .ui.alert.boxwarning {
	background-color: var(--warn-soft);
	color: var(--warn-text);
	box-shadow: inset 0 0 0 1px var(--warn-border);
}

html:root .ui.alert.alert-warning > i.icon:before,
html:root .ui.alert.boxwarning > i.icon:before {
	color: var(--warn);
}

html:root .ui.alert.alert-danger,
html:root .ui.alert.boxerror {
	background-color: var(--danger-soft);
	color: var(--danger-text);
	box-shadow: inset 0 0 0 1px var(--danger-border);
}

html:root .ui.alert.alert-danger > i.icon:before,
html:root .ui.alert.boxerror > i.icon:before {
	color: var(--danger);
}

html:root .ui.alert.alert-success,
html:root .ui.alert.boxconfirmation {
	background-color: var(--success-soft);
	color: var(--success-text);
	box-shadow: none;
}

html:root .ui.alert.alert-success > i.icon:before,
html:root .ui.alert.boxconfirmation > i.icon:before {
	color: var(--success);
}

html:root .ui.alert.alert-info,
html:root .ui.alert.boxinformation {
	background-color: var(--chip);
	color: var(--text-2);
}

html:root .ui.alert a:not(.btn) {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

html:root .ui.alert .btn {
	min-height: 32px;
	margin-left: 8px;
	padding: 0 12px;
	font-size: 13px;
}

html:root .ui.alert.loading > i.icon:before {
	animation: ap-spin .9s linear infinite;
}

/* Loading cover over content frames */
html:root .iframe-loader {
	background-color: var(--canvas);
}

html:root .iframe-loader .spinner-border {
	width: 40px;
	height: 40px;
	border: 3px solid var(--line-2);
	border-right-color: var(--accent-ui);
	color: var(--line-2);
}


/* ==========================================================================
   15. Reading pane (message.html: preview iframe and full view)
   Column max 840px on --canvas: subject in the display face, sender block,
   banners, attachment cards, then the body card.
   ========================================================================== */

html:root body.task-mail.action-preview #layout-content,
html:root body.task-mail.action-show #layout-content {
	background-color: var(--canvas);
}

html:root body.task-mail.action-preview .frame-content,
html:root body.task-mail.action-show .frame-content {
	padding: 24px 32px 48px;
}

html:root #message-header,
html:root #message-content {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

html:root #message-header {
	margin-bottom: 16px;
}

/* Subject */
html:root #message-header > .subject {
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 28px;
	color: var(--text);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

html:root body.status-flagged #message-header > .subject:before {
	display: inline-block;
	float: none;
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	color: var(--flag);
	font-size: 18px;
	line-height: 20px;
}

html:root #message-header > .subject a.extwin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	vertical-align: -6px;
	border-radius: 8px;
	color: var(--text-3);
}

html:root #message-header > .subject a.extwin:before {
	display: block;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	font-size: 14px;
	line-height: 16px;
}

html:root #message-header > .subject a.extwin:hover {
	background-color: var(--hover);
	color: var(--text);
}

/* Sender block */
html:root #message-header > .header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

html:root #message-header > .header img.contactphoto {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 12px;
	object-fit: cover;
}

html:root #message-header .header-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
}

html:root #message-header .header-summary {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	color: var(--text-3);
}

html:root #message-header .header-summary a,
html:root #message-header .header-summary .rcmContactAddress {
	color: var(--text);
	font-size: 15px;
	line-height: 20px;
	font-weight: 600;
	text-decoration: none;
}

html:root #message-header .header-summary a:hover {
	color: var(--accent-text);
	text-decoration: underline;
}

html:root #message-header .header-summary .text-nowrap {
	font-variant-numeric: tabular-nums;
}

html:root #message-header .header-content.details-view .header-headers {
	display: table;
	width: 100%;
}

html:root #message-header .header-headers {
	margin: 8px 0 0;
	padding: 10px 16px;
	border-collapse: separate;
	border-radius: 12px;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 13px;
	line-height: 18px;
	color: var(--text);
}

html:root #message-header .header-headers .header-title {
	width: 72px;
	padding: 3px 12px 3px 0;
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	color: var(--text-3);
	vertical-align: top;
	white-space: nowrap;
}

html:root #message-header .header-headers td.header {
	padding: 3px 0;
	color: var(--text);
	overflow-wrap: anywhere;
}

html:root #message-header .header-headers a {
	color: var(--text);
}

html:root #message-header .header-headers a:hover {
	color: var(--accent-text);
}

html:root #message-header .header-links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin-top: 4px;
}

html:root #message-header .header-links a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	margin: 0;
	padding: 0 4px 0 0;
	border-radius: 6px;
	color: var(--accent-text);
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	text-decoration: none;
}

html:root #message-header .header-links a:before {
	display: block;
	float: none;
	width: 14px;
	height: 14px;
	margin: 0;
	font-size: 12px;
	line-height: 14px;
}

html:root #message-header .header-links a:hover {
	text-decoration: underline;
}

/* Attachments: card grid above the body */
html:root #message-content #attachment-list.attachmentslist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: transparent;
}

html:root #message-content #attachment-list.attachmentslist:empty {
	display: none;
}

html:root #message-content #attachment-list li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: none;
	height: 56px;
	padding: 10px 8px 10px 10px;
	border-radius: 12px;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2);
	line-height: normal;
	white-space: nowrap;
	transition: box-shadow var(--dur-1) var(--ease);
}

html:root #message-content #attachment-list li:hover {
	box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1);
}

html:root #message-content #attachment-list li:focus-within {
	outline: 2px solid var(--accent-ui);
	outline-offset: 2px;
}

/* File tile: fixed colors, white label (design spec) */
html:root #message-content #attachment-list li:before {
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	float: none;
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 8px;
	background: var(--tile-other) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
	color: #FFFFFF; /* fixed: tile label */
	font-family: var(--font-ui);
	font-size: 11px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

html:root #message-content #attachment-list li.plain:before,
html:root #message-content #attachment-list li.txt:before {
	content: "TXT";
	background-image: none;
}

html:root #message-content #attachment-list li.html:before,
html:root #message-content #attachment-list li.htm:before {
	content: "HTML";
	background-image: none;
}

html:root #message-content #attachment-list li.calendar:before,
html:root #message-content #attachment-list li.ics:before {
	content: "ICS";
	background-image: none;
}

html:root #message-content #attachment-list li.vcard:before,
html:root #message-content #attachment-list li.vcf:before {
	content: "VCF";
	background-image: none;
}

html:root #message-content #attachment-list li.image:before,
html:root #message-content #attachment-list li.jpg:before,
html:root #message-content #attachment-list li.jpeg:before,
html:root #message-content #attachment-list li.png:before,
html:root #message-content #attachment-list li.gif:before,
html:root #message-content #attachment-list li.webp:before,
html:root #message-content #attachment-list li.heic:before {
	content: "IMG";
	background-image: none;
	background-color: var(--tile-image);
}

html:root #message-content #attachment-list li.pdf:before {
	content: "PDF";
	background-image: none;
	background-color: var(--tile-pdf);
}

html:root #message-content #attachment-list li.xls:before,
html:root #message-content #attachment-list li.xlsx:before,
html:root #message-content #attachment-list li.ods:before,
html:root #message-content #attachment-list li.csv:before,
html:root #message-content #attachment-list li.msexcel:before {
	content: "XLS";
	background-image: none;
	background-color: var(--tile-sheet);
}

html:root #message-content #attachment-list li.doc:before,
html:root #message-content #attachment-list li.docx:before,
html:root #message-content #attachment-list li.odt:before,
html:root #message-content #attachment-list li.rtf:before,
html:root #message-content #attachment-list li.msword:before {
	content: "DOC";
	background-image: none;
	background-color: var(--tile-doc);
}

html:root #message-content #attachment-list li.ppt:before,
html:root #message-content #attachment-list li.pptx:before,
html:root #message-content #attachment-list li.pps:before,
html:root #message-content #attachment-list li.ppsx:before,
html:root #message-content #attachment-list li.odp:before,
html:root #message-content #attachment-list li.key:before {
	content: "PPT";
	background-image: none;
	background-color: var(--tile-slides);
}

html:root #message-content #attachment-list li.zip:before,
html:root #message-content #attachment-list li.rar:before,
html:root #message-content #attachment-list li.gz:before,
html:root #message-content #attachment-list li.tgz:before,
html:root #message-content #attachment-list li[class~="7z"]:before,
html:root #message-content #attachment-list li.tar:before {
	content: "ZIP";
	background-image: none;
	background-color: var(--tile-zip);
}

html:root #message-content #attachment-list li.eml:before,
html:root #message-content #attachment-list li.rfc822:before {
	content: "EML";
	background-image: none;
}

html:root #message-content #attachment-list li a.filename {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 0;
	line-height: normal;
	color: var(--text);
	text-decoration: none;
}

/* the whole card opens the attachment */
html:root #message-content #attachment-list li a.filename:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

html:root #message-content #attachment-list li a.filename:focus-visible {
	outline: none;
}

html:root #message-content #attachment-list li .attachment-name {
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

html:root #message-content #attachment-list li .attachment-size {
	padding: 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

html:root #message-content #attachment-list li > a.dropdown {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	color: var(--text-2);
	line-height: normal;
}

html:root #message-content #attachment-list li > a.dropdown:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 15px;
	line-height: 18px;
}

html:root #message-content #attachment-list li > a.dropdown:hover {
	background-color: var(--hover);
	color: var(--text);
}

/* Body card */
html:root #messagebody {
	padding: 28px 32px;
	border-radius: 14px;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
	color: var(--text);
	font-size: 15px;
	line-height: 24px;
}

html:root .message-part {
	padding: 0;
	color: var(--text);
	font-size: 15px;
	line-height: 24px;
}

html:root .message-part:not(:first-child),
html:root .message-htmlpart:not(:first-child) {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

html:root .message-part:last-child {
	margin-bottom: 0;
}

html:root .message-part div.pre {
	max-width: 68ch;
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 24px;
}

html:root .message-part a {
	color: var(--accent-text);
	text-decoration: underline;
}

html:root .message-part blockquote,
html:root .message-part blockquote blockquote,
html:root .message-part blockquote blockquote blockquote {
	margin: 4px 0;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--line-2);
	border-right: 0;
	background-color: transparent;
	color: var(--text-3);
}

html:root .message-part blockquote span.blockquote-link {
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: var(--chip);
	color: var(--accent-text);
	font-family: var(--font-ui);
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

html:root .message-part span.sig {
	color: var(--text-3);
}

html:root .message-part pre,
html:root .message-part code {
	font-family: var(--font-mono);
}

/* HTML mail keeps its own design; Elastic paints it on white in dark mode */
html.dark-mode:root .message-htmlpart {
	padding: 16px;
	border-radius: 10px;
}

html.dark-mode:root #messagebody:has(> .message-htmlpart:only-child) {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
}

html.dark-mode:root #messagebody > .message-htmlpart:only-child {
	padding: 28px 32px;
	border-radius: 14px;
}

html:root .message-partheaders {
	margin: 12px 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background-color: var(--hover);
}

html:root .message-partheaders table.headers-table {
	color: var(--text-3);
}

/* Image thumbnails under the body */
html:root p.image-attachment {
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background-color: var(--surface);
}

html:root p.image-attachment span,
html:root fieldset.image-attachment legend {
	color: var(--text-3);
}

html:root fieldset.image-attachment legend {
	border-color: var(--line);
}


/* ==========================================================================
   16. Compose
   Header with the title, a centered 760px card on --canvas (header rows,
   recipient chips, editor) and the send bar attached under it. Elastic's
   "Opciones y adjuntos" panel stays on the right.
   ========================================================================== */

html:root body.action-compose #layout-content > .header > .header-title {
	display: block;
	flex: 0 1 auto;
	padding: 0 8px !important;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	letter-spacing: var(--display-track);
}

html:root body.action-compose #layout-content > .header > #toolbar-menu:not(.popupmenu) {
	justify-content: flex-end;
}

html:root #compose-content {
	background-color: var(--canvas);
}

html:root #compose-content > form.formcontent {
	padding: 24px 16px 0;
}

html:root #compose-objects {
	max-width: 760px;
	margin: 0 auto 12px;
}

html:root #compose-objects:empty {
	display: none;
}

html:root #compose-headers {
	max-width: 760px;
	margin: 0 auto;
	border-radius: 14px 14px 0 0;
	background-color: var(--surface);
	box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2), inset 0 1px 0 var(--line-2);
}

html:root #compose-headers .form-group.row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 4px 20px;
	border-bottom: 1px solid var(--line);
}

html:root #compose-headers .form-group.row:focus-within {
	box-shadow: inset 2px 0 0 var(--accent-ui);
}

html:root #compose-headers .form-group.row > .col-form-label {
	flex: 0 0 56px;
	max-width: 56px;
	padding: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--text-3);
}

html:root #compose-headers .form-group.row > .col-10 {
	flex: 1 1 auto;
	max-width: none;
	min-width: 0;
	padding: 0;
}

html:root #compose-headers .input-group {
	flex-wrap: nowrap;
	align-items: center;
}

html:root #compose-headers .form-control,
html:root #compose-headers .form-control:not(.is-invalid),
html:root #compose-headers .form-control:not(.is-invalid):hover,
html:root #compose-headers .form-control:not(.is-invalid):focus {
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-size: 14px;
}

html:root #compose-headers select.form-control {
	padding-right: 24px;
	background-position: right 4px center;
}

html:root #compose_subject .form-control,
html:root #compose-subject {
	font-size: 15px;
	line-height: 22px;
	font-weight: 600;
}

html:root #compose-headers .input-group-append {
	margin-left: 4px;
}

html:root #compose-headers .input-group-text.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--text-2);
}

html:root #compose-headers .input-group-text.icon:hover {
	background-color: var(--hover);
	color: var(--text);
}

/* Recipient chips */
html:root .recipient-input,
html:root .recipient-input.focus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	height: auto;
	padding: 6px 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text);
}

html:root .recipient-input li.recipient {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	height: 28px;
	margin: 0;
	padding: 0 2px 0 10px;
	border: 0;
	border-radius: 999px;
	background-color: var(--chip);
	color: var(--text);
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
}

html:root .recipient-input li.recipient .name {
	padding: 0;
	line-height: 18px;
}

html:root .recipient-input li.recipient a.button.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: 50%;
	color: var(--text-2);
	font-size: 11px;
	cursor: pointer;
}

html:root .recipient-input li.recipient a.button.icon:before {
	display: block;
	float: none;
	width: 12px;
	height: 12px;
	margin: 0;
	line-height: 12px;
}

html:root .recipient-input li.recipient a.button.icon:hover {
	background-color: var(--line-2);
	color: var(--text);
}

html:root .recipient-input li.recipient.invalid {
	background-color: var(--danger-soft);
	color: var(--danger-text);
	outline: 1px dashed var(--danger);
	outline-offset: -1px;
}

html:root .recipient-input li.input {
	flex: 1 1 120px;
	min-width: 120px;
}

html:root .recipient-input input {
	height: 28px;
	margin: 0;
	padding: 0;
	color: var(--text);
	font-size: 14px;
	line-height: 20px;
}

/* Editor */
html:root #composebodycontainer {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	background-color: var(--surface);
	box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2);
}

html:root #composebodycontainer .html-editor {
	margin: 0;
}

html:root #composebodycontainer .editor-toolbar {
	top: 0;
	left: 1px;
	right: 1px;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 6px 12px;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background-color: var(--surface);
}

html:root #composebodycontainer .editor-toolbar .mce-i-html {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	border-radius: 8px;
	color: var(--text-2);
}

html:root #composebodycontainer .editor-toolbar .mce-i-html:before {
	display: block;
	float: none;
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 15px;
	line-height: 18px;
}

html:root #composebodycontainer .editor-toolbar .mce-i-html:hover,
html:root #composebodycontainer .editor-toolbar .mce-i-html:focus {
	background-color: var(--hover);
	color: var(--text);
}

html:root #composebodycontainer textarea.form-control,
html:root #composebodycontainer textarea.form-control:not(.is-invalid),
html:root #composebodycontainer textarea.form-control:not(.is-invalid):focus {
	min-height: 320px;
	padding: 56px 20px 20px;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 24px;
	resize: vertical;
}

/* TinyMCE frame (its skin CSS loads later, hence "div.tox") */
html:root div.tox.tox-tinymce {
	border: 1px solid var(--border-strong);
	border-radius: 10px;
}

html:root div.tox.focused {
	border-color: var(--accent-ui) !important;
	box-shadow: 0 0 0 1px var(--accent-ui) !important;
}

html:root #composebodycontainer div.tox.tox-tinymce,
html:root #composebodycontainer div.tox.focused {
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
}

html:root div.tox .tox-toolbar-overlord > div,
html:root div.tox .tox-toolbar,
html:root div.tox .tox-toolbar__primary {
	background: var(--surface) none;
}

html:root div.tox .tox-toolbar-overlord {
	border-bottom: 1px solid var(--line);
}

html:root div.tox .tox-toolbar__group:not(:last-of-type) {
	border-color: var(--line);
}

html:root div.tox .tox-tbtn {
	height: 32px;
	border-radius: 8px;
	color: var(--text-2);
}

html:root div.tox .tox-tbtn svg {
	fill: currentColor !important;
}

html:root div.tox .tox-tbtn:hover,
html:root div.tox .tox-tbtn:focus,
html:root div.tox .tox-split-button:hover,
html:root div.tox .tox-split-button:focus {
	background: var(--hover);
	color: var(--text);
	box-shadow: none;
}

html:root div.tox .tox-tbtn--enabled,
html:root div.tox .tox-tbtn--enabled:hover {
	background: var(--accent-soft);
	color: var(--accent-text);
}

html:root div.tox .tox-statusbar {
	border-top: 1px solid var(--line);
	background-color: var(--surface);
	color: var(--text-3);
}

html:root div.tox .tox-dialog {
	border: 0;
	border-radius: 16px;
	background-color: var(--raised);
	color: var(--text);
	box-shadow: var(--shadow-3);
}

html:root div.tox .tox-dialog__header,
html:root div.tox .tox-dialog__body,
html:root div.tox .tox-dialog__footer {
	background-color: var(--raised);
	color: var(--text);
	border-color: var(--line);
}

html:root div.tox .tox-menu {
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background-color: var(--raised);
	box-shadow: var(--shadow-2);
}

html:root div.tox .tox-collection__item {
	border-radius: 8px;
	color: var(--text);
}

html:root div.tox .tox-collection__item--active,
html:root div.tox .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
	background-color: var(--hover);
	color: var(--text);
}

/* Send bar (Enviar), attached under the card */
@media screen and (min-width: 769px) {
	html:root #compose-content > .formbuttons {
		display: flex;
	}
}

html:root #compose-content > .formbuttons {
	align-items: center;
	gap: 8px;
	flex: none;
	width: calc(100% - 32px);
	max-width: 760px;
	min-height: 64px;
	margin: 0 auto 24px;
	padding: 10px 12px 10px 16px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 14px 14px;
	background-color: var(--surface);
	box-shadow: inset 1px 0 0 var(--line-2), inset -1px 0 0 var(--line-2), inset 0 -1px 0 var(--line-2), var(--shadow-1);
}

html:root #compose-content > .formbuttons .btn {
	margin: 0;
}

html:root #compose-content > .formbuttons .btn.send {
	min-height: 44px;
	padding: 0 20px;
	border-radius: calc(var(--btn-radius) + 2px);
	font-size: 15px;
	line-height: 22px;
}

html:root #compose-content > .formbuttons .float-right {
	float: none !important;
	margin-left: auto;
}

html:root #compose-content > .formbuttons .btn-link.extwin {
	min-height: 40px;
	color: var(--text-2);
}

/* Opciones y adjuntos (right panel) */
html:root #layout-sidebar.sidebar-right > .header {
	padding: 0 8px 0 20px;
}

html:root #layout-sidebar.sidebar-right > .header > .header-title {
	padding: 0 !important;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
}

html:root #compose-attachments {
	margin: 16px;
	padding: 16px;
}

html:root #compose-attachments .upload-form {
	padding-bottom: 12px;
	text-align: center;
}

html:root #compose-attachments .upload-form .btn {
	margin: 8px 0 0;
}

html:root #compose-attachments.droptarget:after {
	width: 96px;
	margin: 16px auto 0;
	opacity: .6;
}

html:root .file-upload .attachmentslist li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0 0 6px;
	padding: 0 40px 0 10px;
	border-radius: 10px;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2);
	line-height: normal;
}

html:root .file-upload .attachmentslist li:before {
	display: block;
	flex: none;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	color: var(--text-3);
	font-size: 14px;
	line-height: 16px;
}

html:root .file-upload .attachmentslist li.uploading:before {
	color: var(--accent-ui);
	animation: ap-spin .9s linear infinite;
}

html:root .file-upload .attachmentslist li a.filename {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 0;
	line-height: 18px;
	color: var(--text);
}

html:root .file-upload .attachmentslist li .attachment-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

html:root .file-upload .attachmentslist li .attachment-size {
	padding: 0;
	font-size: 12px;
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}

html:root .file-upload .attachmentslist li a.dropdown {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 8px;
	color: var(--text-2);
	line-height: normal;
}

html:root .file-upload .attachmentslist li a.delete,
html:root .file-upload .attachmentslist li a.cancelupload {
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--text-2);
	line-height: normal;
}

html:root .file-upload .attachmentslist li a.delete:before,
html:root .file-upload .attachmentslist li a.cancelupload:before,
html:root .file-upload .attachmentslist li a.dropdown:before {
	display: block;
	float: none;
	width: 14px;
	height: 14px;
	margin: 0;
	font-size: 12px;
	line-height: 14px !important;
}

html:root .file-upload .attachmentslist li a.delete:hover,
html:root .file-upload .attachmentslist li a.cancelupload:hover {
	background-color: var(--hover);
	color: var(--danger);
}

html:root #compose-options {
	padding: 0 16px 16px;
}

html:root #compose-options .form-group.row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
}

html:root #compose-options .form-group.row > .col-form-label {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
	padding: 0;
	font-size: 14px;
	color: var(--text);
}

html:root #compose-options .form-group.row > div {
	flex: 0 0 auto;
	width: auto;
	max-width: 60%;
	padding: 0;
}


/* ==========================================================================
   17. Settings and other framed forms (preferences, identities, folders,
       responses, managesieve, contact view/edit)
   Each fieldset becomes a card (max 720px) on --canvas; the save bar sits
   at the bottom of the frame.
   ========================================================================== */

html:root.iframe body.task-settings .formcontent,
html:root.iframe body.task-addressbook .formcontent {
	padding: 24px 32px;
}

html:root.iframe body.task-settings .formcontent fieldset,
html:root.iframe body.task-addressbook .formcontent fieldset {
	max-width: 720px;
	margin: 0 0 16px;
	padding: 20px 24px 12px;
	border: 0;
	border-radius: 14px;
	background-color: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line-2);
}

html:root.iframe body.task-settings .formcontent fieldset fieldset,
html:root.iframe body.task-addressbook .formcontent fieldset fieldset {
	margin: 12px 0 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

html:root.iframe body.task-settings .formcontent fieldset > legend,
html:root.iframe body.task-addressbook .formcontent fieldset > legend {
	float: left;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
	color: var(--text);
}

html:root.iframe body.task-settings .formcontent fieldset > legend + *,
html:root.iframe body.task-addressbook .formcontent fieldset > legend + * {
	clear: both;
}

html:root.iframe body.task-settings .formcontent .nav-tabs,
html:root.iframe body.task-addressbook .formcontent .nav-tabs {
	max-width: 720px;
}

html:root.iframe .formcontainer > .formbuttons,
html:root.iframe body > .formbuttons {
	padding: 12px 32px;
	border-top: 1px solid var(--line);
	background-color: var(--surface);
}

html:root.iframe .formbuttons .btn {
	margin: 0 8px 0 0;
}

/* Settings section headers inside frames (e.g. "Preferencias > General") */
html:root.iframe body.task-settings h1.boxtitle,
html:root.iframe body.task-settings .boxtitle {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: var(--display-track);
	color: var(--text);
}

/* Skin selector (Preferencias > Interfaz > Tema) */
html:root .skinselection .skinthumbnail {
	border-color: var(--line-2);
	border-radius: 10px;
	background: var(--surface);
}

html:root .skinselection .skinname {
	color: var(--text);
}

html:root .skinselection .skinlicense,
html:root .skinselection .skinauthor {
	color: var(--text-3);
}


/* ==========================================================================
   18. Contacts
   ========================================================================== */

html:root #contactpic,
html:root img.contactphoto {
	border-radius: 16px;
}

html:root #contacthead .names span.namefield {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: var(--display-track);
	color: var(--text);
}

html:root #contacthead.readonly .source.row,
html:root .contact-header .source {
	color: var(--text-3);
}

html:root .contactlist .contact.readonly td {
	font-style: normal;
	color: var(--text-3);
}

/* Contact picker in compose (dialog) */
html:root #recipient-dialog .listbox {
	background-color: var(--raised);
}

html:root #recipient-dialog .searchbar {
	margin: 0 0 8px;
}


/* ==========================================================================
   19. Login (skins/apolar/templates/login.html)
   Brand panel (44%, min 480px) + form column. 768-1099px: 40% panel, no
   mosaic. < 768px: the panel becomes a top strip.
   Classes: #layout-content.ap-login > .ap-login-brand (.ap-login-plate,
   .ap-login-tenant > .ap-login-pre/.ap-login-name/.ap-login-domain,
   .ap-login-powered, .ap-login-mosaic > span x9) + .ap-login-main
   (.ap-login-box > .ap-login-title > .ap-login-title-tenant, .ap-login-sub,
   #login-form, .ap-login-help; .ap-login-footer).
   ========================================================================== */

html:root body.task-login {
	background-color: var(--surface);
}

html:root #layout-content.ap-login {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
	background-color: var(--surface);
}

/* Brand panel */
html:root .ap-login-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 0 0 44%;
	min-width: 480px;
	max-width: 100%;
	padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 56px);
	overflow: hidden;
	background-color: var(--panel-bg);
	color: var(--panel-text);
}

html:root .ap-login-plate {
	display: flex;
	align-items: center;
	align-self: flex-start;
	max-width: 240px;
	padding: var(--login-plate-pad);
	border-radius: 16px;
	background-color: var(--login-plate-bg);
	color: var(--login-plate-ink);
}

html:root .ap-login-plate img,
html:root .ap-login-plate #logo {
	position: static;
	top: auto;
	display: block;
	width: auto;
	height: 36px;
	max-width: 208px;
	max-height: 40px;
	opacity: 1;
	object-fit: contain;
	object-position: left center;
}

html:root .ap-login-tenant {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: min(440px, calc(100% - 240px));
	margin-top: auto;
}

html:root .ap-login-pre,
html:root .ap-login-domain {
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
	color: var(--panel-text-2);
}

html:root .ap-login-name {
	font-size: clamp(24px, 3vw, 40px);
	line-height: 1.1;
	color: var(--panel-text);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

html:root .ap-login-powered {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--panel-text-2);
}

/* Mosaic: 3x3 tejas, tile 3 filled, tile 5 soft, the rest outlined */
html:root .ap-login-mosaic {
	position: absolute;
	right: clamp(16px, 4vw, 56px);
	bottom: clamp(24px, 4vw, 48px);
	display: grid;
	grid-template-columns: repeat(3, 64px);
	grid-auto-rows: 64px;
	gap: 12px;
	pointer-events: none;
}

html:root .ap-login-mosaic > span {
	display: block;
	border-radius: 16px;
	box-shadow: inset 0 0 0 1.5px var(--panel-line);
}

html:root .ap-login-mosaic > span:nth-child(3) {
	background-color: var(--panel-tile);
	box-shadow: none;
}

html:root .ap-login-mosaic > span:nth-child(5) {
	background-color: var(--panel-soft);
	box-shadow: none;
}

/* Form column */
html:root .ap-login-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	padding: 28px 16px 24px;
	background-color: var(--surface);
	color: var(--text);
}

html:root .ap-login-box {
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding: 24px 0 48px;
}

html:root .ap-login-title {
	margin: 0;
	font-size: 28px;
	line-height: 34px;
	color: var(--text);
}

html:root .ap-login-title-tenant {
	display: block;
	color: var(--accent-text);
}

html:root .ap-login-sub {
	margin: 8px 0 32px;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-2);
}

/* Roundcube's login form (table rows turned into stacked fields) */
html:root #login-form {
	position: static;
	top: auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

html:root #login-form table,
html:root #login-form tbody {
	display: block;
	width: 100%;
}

html:root #login-form tr {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}

html:root #login-form td.title {
	display: block !important;
	flex: none;
	width: auto;
	max-width: none;
	padding: 0;
	text-align: left;
}

html:root #login-form td.title label {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: var(--text-2);
}

html:root #login-form td.input {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	flex: none;
	width: 100%;
	max-width: none;
	padding: 0;
}

html:root #login-form .input-group-prepend {
	position: absolute;
	z-index: 4;
	top: 15px;
	left: 14px;
	margin: 0;
	pointer-events: none;
}

html:root #login-form .input-group-prepend > .input-group-text {
	display: block;
	width: 18px;
	min-width: 0;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--text-3);
	line-height: 18px;
}

html:root #login-form .input-group > .form-control,
html:root #login-form .input-group > .custom-select {
	flex: 1 1 auto;
	width: 100%;
	height: 48px;
	padding: 0 14px 0 44px;
	border-radius: 12px;
	font-size: 16px;
	line-height: 24px;
}

html:root #login-form #rcmloginpwd {
	padding-right: 52px;
}

/* Show/hide password button (added by the apolar plugin): leave it empty,
   the icon comes from here; aria-pressed="true" swaps it */
html:root #login-form .ap-login-eye,
html:root #login-form td.input > button[type="button"] {
	position: absolute;
	z-index: 4;
	top: 2px;
	right: 2px;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 0;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-2);
	box-shadow: none;
}

html:root #login-form .ap-login-eye:hover,
html:root #login-form td.input > button[type="button"]:hover {
	background-color: var(--hover);
	color: var(--text);
}

@supports (mask-image: none) {
	html:root #login-form .ap-login-eye:empty:before {
		content: "";
		display: block !important;
		width: 18px;
		height: 18px;
		margin: 0 !important;
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	html:root #login-form .ap-login-eye[aria-pressed="true"]:empty:before {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4.1M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.8 9.8 0 0 0 5.4-1.6'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	}
}

html:root #login-form .formbuttons {
	margin: 24px 0 0;
	padding: 0;
}

html:root #rcmloginsubmit {
	width: 100%;
	min-height: 48px;
	padding: 0 24px;
	border-radius: calc(var(--btn-radius) + 2px);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	text-transform: none !important;
}

html:root #login-footer {
	margin-top: 16px;
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	color: var(--text-3);
}

/* Nothing to show (no version, no plugin content): no extra gap */
html:root #login-footer:not(:has(> *)) {
	display: none;
}

html:root #login-footer > div {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background-color: var(--chip);
	color: var(--text-2);
	text-align: left;
}

html:root .ap-login-help {
	margin: 20px 0 0;
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	color: var(--text-3);
}

html:root .ap-login-help a {
	color: var(--accent-text);
	font-weight: 600;
	text-decoration: none;
}

html:root .ap-login-help a:hover {
	text-decoration: underline;
}

html:root .ap-login-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	color: var(--text-3);
}

html:root .ap-login-footer a {
	color: var(--text-3);
	text-decoration: none;
}

html:root .ap-login-footer a:hover {
	color: var(--text);
	text-decoration: underline;
}

/* Login messages (wrong password, logged out) at the top of the form column */
html:root body.task-login #messagestack {
	top: 24px;
	bottom: auto;
	left: 72%;
}

html:root body.task-login #messagestack > div.alert-danger {
	background-color: var(--danger-soft);
	color: var(--danger-text);
	box-shadow: inset 0 0 0 1px var(--danger-border), var(--shadow-2);
}

html:root body.task-login #messagestack > div.alert-danger > i.icon:before {
	color: var(--danger);
}

html:root body.task-login #messagestack > div.alert-success {
	background-color: var(--success-soft);
	color: var(--success-text);
	box-shadow: var(--shadow-2);
}

html:root body.task-login #messagestack > div.alert-success > i.icon:before {
	color: var(--success);
}

html:root body.task-login #messagestack > div.alert-warning {
	background-color: var(--warn-soft);
	color: var(--warn-text);
	box-shadow: inset 0 0 0 1px var(--warn-border), var(--shadow-2);
}

html:root body.task-login #messagestack > div.alert-warning > i.icon:before {
	color: var(--warn);
}

@media screen and (max-width: 1199px) {
	html:root .ap-login-mosaic {
		display: none;
	}

	html:root .ap-login-tenant {
		max-width: 100%;
	}
}

@media screen and (max-width: 1099px) {
	html:root .ap-login-brand {
		flex-basis: 40%;
		min-width: 0;
	}

	html:root .ap-login-name {
		font-size: 32px;
		line-height: 36px;
	}

	html:root body.task-login #messagestack {
		left: 70%;
	}
}

@media screen and (max-width: 767px) {
	html:root #layout-content.ap-login {
		flex-direction: column;
	}

	html:root .ap-login-brand {
		flex: none;
		gap: 20px;
		padding: calc(24px + env(safe-area-inset-top, 0px)) 16px 28px;
	}

	html:root .ap-login-pre {
		display: none;
	}

	html:root .ap-login-tenant {
		margin-top: 0;
	}

	html:root .ap-login-plate img,
	html:root .ap-login-plate #logo {
		height: 28px;
	}

	html:root .ap-login-name {
		font-size: 24px;
		line-height: 28px;
	}

	html:root .ap-login-domain {
		font-size: 13px;
		line-height: 18px;
	}

	html:root .ap-login-main {
		flex: 1 0 auto;
	}

	html:root .ap-login-box {
		margin: 0 auto;
		padding: 0 0 32px;
	}

	html:root .ap-login-title {
		font-size: 26px;
		line-height: 32px;
	}

	html:root .ap-login-footer {
		flex-direction: column;
		gap: 0;
	}

	html:root .ap-login-footer a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	html:root body.task-login #messagestack {
		top: 16px;
		bottom: auto;
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		transform: none;
	}
}


/* ==========================================================================
   20. Touch, tablet and phone
   Elastic keeps its own pane switching (one or two columns below 1201px,
   html.layout-*); this only adapts sizes. touch = width <= 1024px.
   ========================================================================== */

/* 44px targets on touch screens */
html:root.touch #layout > div > .header a.button,
html:root.touch #toolbar-list-menu:not(.popupmenu) a {
	width: 44px;
	min-width: 44px;
	height: 44px;
}

html:root.touch #toolbar-menu:not(.popupmenu) a {
	min-width: 44px;
	height: 44px;
}

html:root.touch .menu.pagenav a {
	width: 36px;
	min-width: 36px !important;
	height: 36px;
}

html:root.touch #messagelist > tbody > tr {
	min-height: 68px;
}

@media screen and (max-width: 768px) {
	html:root #layout > div > .header a.button {
		margin: 0 !important;
		padding: 0 !important;
	}

	html:root #layout > div > .header a.button:before {
		width: 22px !important;
		height: 22px !important;
		font-size: 20px;
		line-height: 22px;
	}

	html:root #layout > div > .footer {
		background-color: var(--surface);
	}

	html:root body.task-mail.action-preview .frame-content,
	html:root body.task-mail.action-show .frame-content {
		padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px));
	}

	html:root #messagebody {
		padding: 20px 16px;
	}

	html:root .message-part,
	html:root .message-part div.pre {
		font-size: 16px;
		line-height: 26px;
	}

	html:root #compose-content > form.formcontent {
		padding: 0;
	}

	html:root #compose-headers,
	html:root #composebodycontainer {
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}

	html:root #compose-headers .form-group.row {
		padding: 4px 16px;
	}

	html:root .recipient-input input,
	html:root .form-control,
	html:root .searchbar input {
		font-size: 16px;
	}

	html:root.iframe body.task-settings .formcontent,
	html:root.iframe body.task-addressbook .formcontent {
		padding: 16px;
	}

	html:root.iframe .formcontainer > .formbuttons,
	html:root.iframe body > .formbuttons {
		padding: 12px 16px;
	}
}

/* Phone: no rail; Elastic opens #layout-menu as a drawer (.popover) */
@media screen and (max-width: 480px) {
	html:root #layout-menu.popover {
		width: min(86vw, 320px);
		max-width: none;
		padding: 0 0 12px;
		border: 0;
		border-radius: 0;
		background-color: var(--side-bg);
		color: var(--side-text);
		box-shadow: var(--shadow-3);
	}

	html:root.layout-phone #layout-menu .popover-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		min-height: 64px;
		padding: 0 8px 0 16px !important;
		border: 0;
		border-bottom: 1px solid var(--side-line);
		background-color: transparent !important;
		color: var(--side-text);
	}

	html:root.layout-phone #layout-menu .ap-rail-plate {
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}

	html:root.layout-phone #layout-menu .popover-header img {
		max-width: 24px;
		max-height: 24px;
	}

	html:root.layout-phone #layout-menu .popover-header a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		color: var(--side-text-2);
	}

	html:root.layout-phone #layout-menu .popover-header a:before {
		display: block;
		float: none;
		width: 22px;
		height: 22px;
		margin: 0;
		font-size: 20px;
		line-height: 22px;
	}

	html:root.layout-phone #layout-menu .popover-header a:hover {
		background-color: var(--side-hover);
		color: var(--side-text);
	}

	html:root #taskmenu {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex: 1 1 auto;
		padding: 8px 0 0;
		overflow-y: auto;
	}

	html:root #taskmenu .action-buttons,
	html:root #taskmenu .special-buttons {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	html:root #taskmenu .action-buttons {
		margin-bottom: 6px;
	}

	html:root #taskmenu .special-buttons {
		margin-top: auto;
		padding-top: 8px;
		border-top: 1px solid var(--side-line);
	}

	html:root #taskmenu a {
		position: relative;
		z-index: 0;
		display: flex;
		align-items: center;
		gap: 12px;
		width: auto;
		max-width: none;
		height: 48px;
		min-height: 48px;
		margin: 0 12px;
		padding: 0 12px;
		border: 0 !important;
		border-radius: 10px;
		background: transparent;
		color: var(--side-text);
		font-size: 15px;
		line-height: 48px;
		font-weight: 500;
		text-align: left;
	}

	html:root #taskmenu a,
	html:root #taskmenu a:hover,
	html:root #taskmenu a:focus,
	html:root #taskmenu a.selected,
	html:root #taskmenu a.selected:hover {
		background: transparent;
	}

	html:root #taskmenu a:before {
		flex: none;
		float: none !important;
		width: 20px !important;
		height: 20px !important;
		margin: 0 !important;
		color: var(--side-icon);
		font-size: 18px;
		line-height: 20px;
	}

	html:root #taskmenu a:after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: 10px;
		background-color: transparent;
	}

	html:root #taskmenu a:hover:after {
		background-color: var(--side-hover);
	}

	html:root #taskmenu a span.inner {
		display: inline;
		font-size: 15px;
	}

	html:root #taskmenu a.selected {
		color: var(--ficha-text);
		font-weight: 600;
	}

	html:root #taskmenu a.selected:before {
		color: var(--ficha-icon);
	}

	html:root #taskmenu a.selected:after {
		background-color: var(--ficha-bg);
		box-shadow: inset 0 0 0 1.5px var(--ficha-ring);
	}

	html:root #taskmenu a.logout {
		color: var(--side-text) !important;
	}

	html:root #taskmenu .action-buttons a.compose {
		color: var(--on-compose);
		font-weight: 600;
	}

	html:root #taskmenu .action-buttons a.compose:before {
		color: var(--on-compose);
	}

	html:root #taskmenu .action-buttons a.compose:after {
		background-color: var(--compose-bg);
	}

	/* Ink app bars carry the brand on phones */
	html:root #layout > div > .header {
		background-color: var(--side-bg);
		color: var(--side-text);
		border-bottom: 0;
	}

	html:root #layout > div > .header > .header-title {
		color: var(--side-text);
	}

	html:root #layout > #layout-list > .header > .header-title {
		font-size: 18px;
		line-height: 24px;
		color: var(--side-text);
	}

	html:root #layout > div > .header a.button {
		width: 44px;
		height: 44px;
		color: var(--side-text);
	}

	html:root #layout > div > .header a.button:not(.disabled):hover,
	html:root #layout > div > .header a.button:not(.disabled):focus {
		background-color: var(--side-hover);
		color: var(--side-text);
	}

	html:root #layout > div > .header :focus-visible {
		outline-color: var(--side-text);
	}

	html:root .searchbar {
		margin: 8px 12px;
	}

	/* Full-bleed message rows with inset separators */
	html:root #messagelist {
		padding: 0;
	}

	html:root #messagelist > tbody > tr {
		min-height: 76px;
		margin: 0;
		padding-left: 4px;
		border-radius: 0;
		box-shadow: inset 0 -1px 0 var(--line);
	}

	html:root #messagelist > tbody > tr.selected {
		box-shadow: inset 0 -1px 0 var(--line);
	}

	html:root #messagelist > tbody > tr > td.subject {
		padding: 14px 16px 14px 0;
	}

	html:root #messagelist td.subject span.msgicon.status {
		top: 15px;
		height: 22px;
	}

	html:root #messagelist td.subject span.msgicon.status.replied:not(.unread),
	html:root #messagelist td.subject span.msgicon.status.forwarded:not(.unread) {
		top: 39px;
		height: 20px;
	}

	html:root #messagelist td.subject span.fromto {
		font-size: 16px;
		line-height: 22px;
	}

	html:root #messagelist td.subject span.date {
		line-height: 22px;
	}

	html:root #messagelist td.subject span.subject {
		font-size: 15px;
		line-height: 20px;
	}

	html:root #messagelist > tbody > tr > td.flags {
		right: 16px;
		bottom: 15px;
	}

	html:root .listing-hover-menu {
		display: none;
	}

	html:root #messagestack {
		left: 16px;
		right: 16px;
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-width: none;
		transform: none;
	}

	html:root #messagestack > div {
		width: 100%;
		min-height: 0;
		margin: 0;
		border-radius: 12px;
	}

	html:root .ui-dialog.ui-widget-content,
	html:root .ui-dialog.ui-widget {
		border-radius: 0;
	}

	html:root .ui-dialog .ui-dialog-titlebar {
		min-height: 56px;
		padding: 0 16px;
		border-bottom: 1px solid var(--line);
		background-color: var(--surface);
	}

	html:root .ui-dialog .ui-dialog-title {
		width: 100%;
		text-align: center;
		font-size: 16px;
	}

	html:root .ui-dialog .ui-dialog-content:not(.iframe) {
		padding: 16px;
	}

	html:root .ui-dialog .ui-dialog-buttonpane {
		padding: 0;
		border-top: 1px solid var(--line);
		background-color: var(--surface);
	}

	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
		gap: 0;
	}

	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		color: var(--text);
	}

	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary {
		color: var(--text);
	}

	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary:not(.btn-danger) {
		color: var(--accent-text);
	}

	html:root .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger {
		color: var(--danger-text);
	}
}


/* Print (messageprint.html also loads this file) */
@media print {
	html:root body {
		background-color: transparent;
	}

	html:root #messagebody,
	html:root #message-content #attachment-list li {
		box-shadow: none;
	}

	html:root #messagebody {
		padding: 0;
	}
}


/* ==========================================================================
   21. Reduced motion
   theme.css sets --dur-1/--dur-2 to 0; this also stops spinners and any
   transition or animation coming from Elastic, Bootstrap or TinyMCE.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html:root *,
	html:root *:before,
	html:root *:after {
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		animation-duration: 0s !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


/* ==========================================================================
   22. Forced colors (Windows high contrast)
   Shadows and backgrounds are dropped by the browser, so selected states get
   an outline and bordered surfaces get a real border.
   ========================================================================== */

@media (forced-colors: active) {
	html:root :focus-visible,
	html:root .form-control:focus,
	html:root .searchbar:focus-within {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
	}

	html:root #messagelist > tbody > tr.selected,
	html:root #layout-sidebar:not(.sidebar-right) .listing li.selected > a,
	html:root #layout-list .scroller table.listing tbody tr.selected,
	html:root #layout-list .scroller ul.listing li.selected > a,
	html:root .popover .listing li.selected > a,
	html:root #toolbar-menu a.selected,
	html:root #toolbar-list-menu a.selected,
	html:root .nav-tabs .nav-link.active {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	html:root #taskmenu a.selected:after {
		forced-color-adjust: none;
		background-color: Highlight;
	}

	html:root #taskmenu a.selected:before {
		color: HighlightText !important;
	}

	html:root #messagelist td.subject span.msgicon.status.unread:before,
	html:root #quotadisplay .bar .value {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	html:root #quotadisplay .bar,
	html:root .btn,
	html:root .searchbar,
	html:root .listing-hover-menu,
	html:root #messagestack > div,
	html:root .ui.alert,
	html:root .ui-dialog.ui-widget-content,
	html:root #message-content #attachment-list li,
	html:root #messagebody,
	html:root #compose-headers,
	html:root #composebodycontainer,
	html:root #compose-content > .formbuttons,
	html:root.iframe body.task-settings .formcontent fieldset,
	html:root .recipient-input li.recipient {
		border: 1px solid CanvasText;
	}

	html:root .custom-switch .custom-control-label:before {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
		background-color: Canvas;
	}

	html:root .custom-switch .custom-control-label:after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	html:root .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
		border-color: Highlight;
		background-color: Highlight;
	}

	html:root .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
		background-color: HighlightText;
	}

	html:root #message-content #attachment-list li:before {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
		background-color: Canvas;
		background-image: none;
		color: CanvasText;
	}
}

/* Mask icons (section 2): the browser forces backgrounds off, so let the
   icons keep painting with the (forced) text color */
@supports (mask-image: none) {
	@media (forced-colors: active) {
		html:root .menu a.mail:before,
		html:root .menu a.recipient:before,
		html:root .menu a.contacts:before,
		html:root .menu a.settings:before,
		html:root .menu a.actions:before,
		html:root .menu a.help:before,
		html:root .menu a.about:before,
		html:root .menu a.logout:before,
		html:root .menu a.compose:before,
		html:root .menu a.edit:before,
		html:root .menu a.rename:before,
		html:root .menu a.micuenta:before,
		html:root .menu a.button-micuenta:before,
		html:root .menu a.calendar:before,
		html:root .menu a.tasklist:before,
		html:root .menu a.select:before,
		html:root .menu a.select.all:before,
		html:root .menu a.select.invert:before,
		html:root .menu a.files:before,
		html:root .menu a.folders:before,
		html:root .menu a.notes:before,
		html:root .menu a.chat:before,
		html:root .menu a.responses:before,
		html:root .menu a.insertresponse:before,
		html:root .menu a.reply:before,
		html:root .menu a.reply-all:before,
		html:root .menu a.reply.all:before,
		html:root .menu a.reply.list:before,
		html:root .menu a.forward:before,
		html:root .menu a.dropdown:before,
		html:root .menu a.collapse:before,
		html:root .menu a.expand.all:before,
		html:root .menu a.expand.none:before,
		html:root .menu a.expand:before,
		html:root .menu a.nextpage:before,
		html:root .menu a.delete:before,
		html:root .menu a.search.delete:before,
		html:root .menu a.archive:before,
		html:root .menu a.junk:before,
		html:root .menu a.notjunk:before,
		html:root .menu a.markmessage:before,
		html:root .menu a.more:before,
		html:root .menu a.print:before,
		html:root .menu a.prev:before,
		html:root .menu a.back:before,
		html:root .menu a.next:before,
		html:root .menu a.options:before,
		html:root .menu a.save:before,
		html:root .menu a.attach:before,
		html:root .menu a.vcard:before,
		html:root .menu a.signature:before,
		html:root .menu a.spellcheck:before,
		html:root .menu a.encrypt:before,
		html:root .menu a.enigma:before,
		html:root .menu a.create:before,
		html:root .menu a.purge:before,
		html:root .menu a.remove:before,
		html:root .menu a.expunge:before,
		html:root .menu a.import:before,
		html:root .menu a.upload:before,
		html:root .menu a.export:before,
		html:root .menu a.download:before,
		html:root .menu a.qrcode:before,
		html:root .menu a.extwin:before,
		html:root .menu a.source:before,
		html:root .menu a.move:before,
		html:root .menu a.copy:before,
		html:root .menu a.read:before,
		html:root .menu a.unread:before,
		html:root .menu a.select.unread:before,
		html:root .menu a.expand.unread:before,
		html:root .menu a.flag:before,
		html:root .menu a.unflag:before,
		html:root .menu a.select.flagged:before,
		html:root .menu a.undo:before,
		html:root .menu a.refresh:before,
		html:root .menu a.search:before,
		html:root .menu a.threads:before,
		html:root .menu a.firstpage:before,
		html:root .menu a.prevpage:before,
		html:root .menu a.lastpage:before,
		html:root .menu a.addressbook:before,
		html:root .menu a.assigngroup:before,
		html:root .menu a.removegroup:before,
		html:root .menu a.closewin:before,
		html:root .menu a.select.none:before,
		html:root .menu a.showurl:before,
		html:root .menu a.properties:before,
		html:root .menu a.info:before,
		html:root .menu a.submit:before,
		html:root .menu a.check.selected:before,
		html:root .menu a.filterlink:before,
		html:root .menu a.send:before,
		html:root .menu a.select.page:before,
		html:root .menu a.theme.dark:before,
		html:root .menu a.theme.light:before,
		html:root a.button.icon.sidebar-menu:before,
		html:root button.btn.sidebar-menu:before,
		html:root a.button.icon.toolbar-menu-button:before,
		html:root button.btn.toolbar-menu-button:before,
		html:root a.button.icon.toolbar-list-button:before,
		html:root button.btn.toolbar-list-button:before,
		html:root a.button.icon.task-menu-button:before,
		html:root button.btn.task-menu-button:before,
		html:root a.button.icon.back-sidebar-button:before,
		html:root button.btn.back-sidebar-button:before,
		html:root a.button.icon.back-content-button:before,
		html:root button.btn.back-content-button:before,
		html:root a.button.icon.back-list-button:before,
		html:root button.btn.back-list-button:before,
		html:root a.button.icon.back:before,
		html:root button.btn.back:before,
		html:root a.button.icon.refresh:before,
		html:root button.btn.refresh:before,
		html:root a.button.icon.generate:before,
		html:root button.btn.generate:before,
		html:root a.button.icon.yes:before,
		html:root button.btn.yes:before,
		html:root a.button.icon.submit:before,
		html:root button.btn.submit:before,
		html:root a.button.icon.continue:before,
		html:root button.btn.continue:before,
		html:root a.button.icon.save:before,
		html:root button.btn.save:before,
		html:root a.button.icon.create:before,
		html:root button.btn.create:before,
		html:root a.button.icon.edit:before,
		html:root button.btn.edit:before,
		html:root a.button.icon.qrcode:before,
		html:root button.btn.qrcode:before,
		html:root a.button.icon.search:before,
		html:root button.btn.search:before,
		html:root a.button.icon.filter:before,
		html:root button.btn.filter:before,
		html:root a.button.icon.import:before,
		html:root button.btn.import:before,
		html:root a.button.icon.export:before,
		html:root button.btn.export:before,
		html:root a.button.icon.discard:before,
		html:root button.btn.discard:before,
		html:root a.button.icon.delete:before,
		html:root button.btn.delete:before,
		html:root a.button.icon.next:before,
		html:root button.btn.next:before,
		html:root a.button.icon.restore:before,
		html:root button.btn.restore:before,
		html:root a.button.icon.send:before,
		html:root button.btn.send:before,
		html:root a.button.icon.bounce:before,
		html:root button.btn.bounce:before,
		html:root a.button.icon.attach:before,
		html:root button.btn.attach:before,
		html:root a.button.icon.attach.vcard:before,
		html:root button.btn.attach.vcard:before,
		html:root a.button.icon.sso:before,
		html:root button.btn.sso:before,
		html:root a.button.icon.no:before,
		html:root button.btn.no:before,
		html:root a.button.icon.close:before,
		html:root button.btn.close:before,
		html:root a.button.icon.cancel:before,
		html:root button.btn.cancel:before,
		html:root a.button.icon.remove:before,
		html:root button.btn.remove:before,
		html:root a.button.icon.unlock:before,
		html:root button.btn.unlock:before,
		html:root a.button.icon.encrypt:before,
		html:root button.btn.encrypt:before,
		html:root a.button.icon.help:before,
		html:root button.btn.help:before,
		html:root a.button.icon.folders:before,
		html:root button.btn.folders:before,
		html:root a.button.icon.options:before,
		html:root button.btn.options:before,
		html:root a.button.icon.tools:before,
		html:root button.btn.tools:before,
		html:root a.button.icon.settings:before,
		html:root button.btn.settings:before,
		html:root a.button.icon.properties:before,
		html:root button.btn.properties:before,
		html:root a.button.icon.selection:before,
		html:root button.btn.selection:before,
		html:root a.button.icon.insert.recipient:before,
		html:root button.btn.insert.recipient:before,
		html:root a.button.icon.sign:before,
		html:root button.btn.sign:before,
		html:root a.button.icon.extwin:before,
		html:root button.btn.extwin:before,
		html:root a.button.icon.dropdown:before,
		html:root button.btn.dropdown:before,
		html:root .input-group .icon.user:before,
		html:root .input-group .icon.pass:before,
		html:root .input-group .icon.host:before,
		html:root .input-group .icon.cancel:before,
		html:root .input-group .icon.delete:before,
		html:root .input-group .icon.edit:before,
		html:root .input-group .icon.add:before,
		html:root .input-group .icon.add.recipient:before,
		html:root .input-group .icon.search:before,
		html:root .input-group .icon.filter:before,
		html:root .input-group .icon.key:before,
		html:root .searchbar form:before,
		html:root .searchbar a.options:before,
		html:root .searchbar a.reset:before,
		html:root .searchbar a.unread:before,
		html:root .searchbar.open a.options:before,
		html:root .folderlist li.mailbox > a:before,
		html:root .folderlist li.inbox > a:before,
		html:root .folderlist li.drafts > a:before,
		html:root .folderlist li.sent > a:before,
		html:root .folderlist li.junk > a:before,
		html:root .folderlist li.trash > a:before,
		html:root .folderlist li.archive > a:before,
		html:root .folderlist li.ns-shared > a:before,
		html:root .folderlist li.ns-other > a:before,
		html:root ul.treelist li div.treetoggle:before,
		html:root ul.treelist li div.treetoggle.expanded:before,
		html:root #settings-menu li > a:before,
		html:root #sections-table tr > td.section:before,
		html:root #settings-menu li.preferences > a:before,
		html:root #settings-menu li.folders > a:before,
		html:root #sections-table tr.folders > td.section:before,
		html:root #settings-menu li.identities > a:before,
		html:root #identities-table td.mail:before,
		html:root #settings-menu li.responses > a:before,
		html:root #responses-table td.name:before,
		html:root #sections-table tr.chat > td.section:before,
		html:root #settings-menu li.filter > a:before,
		html:root #filterslist td.name:before,
		html:root #filtersetslist td.name:before,
		html:root #settings-menu li.vacation > a:before,
		html:root #settings-menu li.forward > a:before,
		html:root #settings-menu li.password > a:before,
		html:root #settings-menu li.enigma > a:before,
		html:root #settings-menu li.twofactorauth > a:before,
		html:root #sections-table tr.encryption > td.section:before,
		html:root #settings-menu li.info > a:before,
		html:root #settings-menu li.userinfo > a:before,
		html:root #settings-menu li.micuenta > a:before,
		html:root #sections-table tr.general > td.section:before,
		html:root #sections-table tr.mailbox > td.section:before,
		html:root #sections-table tr.mailview > td.section:before,
		html:root #sections-table tr.compose > td.section:before,
		html:root #sections-table tr.addressbook > td.section:before,
		html:root #sections-table tr.server > td.section:before,
		html:root #sections-table tr.calendar > td.section:before,
		html:root #directorylist li.addressbook > a:before,
		html:root #directorylist li.contactgroup > a:before,
		html:root .contactlist td.contactgroup:before,
		html:root .listing.iconized tr.contact.group td.name:before,
		html:root #savedsearchlist li > a:before,
		html:root .contactlist td.contact:before,
		html:root .listing.iconized tr.contact.person td.name:before,
		html:root #messagelist span.msgicon.status.replied:not(.unread):before,
		html:root #messagelist span.msgicon.status.forwarded:not(.unread):before,
		html:root #messagelist span.msgicon.status.replied.forwarded:not(.unread):before,
		html:root #messagelist span.flagged:before,
		html:root #messagelist tr.flaggedroot:not(:hover) span.unflagged:before,
		html:root #messagelist td.flags span.attachment > span:before,
		html:root #messagelist td.flags span.attachment > span.report:before,
		html:root #messagelist td.flags span.attachment > span.encrypted:before,
		html:root #messagelist td.flags span.attachment > span.vcard:before,
		html:root #messagelist tr.thread td.threads div:before,
		html:root #messagelist tr.thread.expanded td.threads div:before,
		html:root #message-content #attachment-list li > a.dropdown:before,
		html:root .file-upload .attachmentslist li:before,
		html:root .file-upload .attachmentslist li.uploading:before,
		html:root .attachmentslist li a.delete:before,
		html:root .attachmentslist li a.cancelupload:before,
		html:root #message-header .header-links a.headers-details:before,
		html:root #message-header .header-links a.headers-summary:before,
		html:root #message-header .header-links a.headers-all:before,
		html:root #message-header .header-links a.html:before,
		html:root #message-header .header-links a.plain:before,
		html:root #message-header .header-links a.zipdownload:before,
		html:root #message-header > .subject a.extwin:before,
		html:root body.status-flagged #message-header > .subject:before,
		html:root .ui.alert > i.icon:before,
		html:root .ui.alert.alert-success > i.icon:before,
		html:root .ui.alert.alert-warning > i.icon:before,
		html:root .ui.alert.alert-danger > i.icon:before,
		html:root .ui.alert.loading > i.icon:before,
		html:root .ui.alert.vcardattachment > i.icon:before,
		html:root .ui.alert.enigmaattachment > i.icon:before,
		html:root .ui.alert.signed > i.icon:before,
		html:root .ui.alert.encrypted > i.icon:before,
		html:root .ui.alert.chat > i.icon:before,
		html:root .html-editor .editor-toolbar .mce-i-html:before,
		html:root .ui-dialog .ui-dialog-titlebar-close:before,
		html:root .floating-action-buttons a.button:before,
		html:root .floating-action-buttons a.button.compose:before {
			forced-color-adjust: none;
			color: inherit !important;
			background-color: currentColor;
		}
	}
}