/*
 * yotis_look: a modern look over Elastic. A flat blue bar across the top (the headers of all
 * columns joined), the task tools as a row of white icons over the folder column, rounded
 * selections, line icons and quiet 1px borders. No shadows except on floating menus/dialogs.
 * Colours are variables: dark mode (html.dark-mode) only swaps the palette.
 * ":root:root" outranks Elastic's own "html.dark-mode #id" rules without !important.
 * Line icons are drawn after Lucide (ISC licence, lucide.dev).
 */

:root {
	--yl-bar: #0f6cbd;
	--yl-bar-text: #ffffff;
	--yl-bar-muted: rgba(255, 255, 255, .45);
	--yl-bar-hover: rgba(255, 255, 255, .16);
	--yl-bar-active: rgba(255, 255, 255, .24);
	--yl-accent: #0f6cbd;
	--yl-accent-hover: #115ea3;
	--yl-btn: #0f6cbd;
	--yl-btn-hover: #115ea3;
	--yl-accent-soft: #e1edfa;
	--yl-accent-text: #0c5aa0;
	--yl-ring: rgba(15, 108, 189, .22);
	--yl-bg: #ffffff;
	--yl-panel: #f5f6f8;
	--yl-field: #ffffff;
	--yl-field-soft: #f0f2f5;
	--yl-border: #e1e4e8;
	--yl-border-soft: #eceef1;
	--yl-input-border: #d0d5dc;
	--yl-text: #1f2328;
	--yl-muted: #656d76;
	--yl-faint: #8c959f;
	--yl-hover: #eef1f5;
	--yl-flag: #c4314b;
	--yl-flag-soft: #fdf0f2;
	--yl-danger: #c4314b;
	--yl-badge: #0f6cbd;
	--yl-badge-text: #ffffff;
	--yl-badge-muted: #dfe3e8;
	--yl-badge-muted-text: #4b535c;
	--yl-scroll: #c6ccd4;
	--yl-tooltip: #1f2328;
	--yl-tooltip-text: #ffffff;
	--yl-pop-shadow: 0 2px 8px rgba(16, 24, 40, .08);
	--yl-radius: 8px;
	--yl-radius-lg: 12px;
	--yl-bar-height: 58px;
	--yl-tool: 32px;
	--yl-font: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--yl-ease: .15s ease;

	/* line icons, used as masks painted in currentColor */
	--yl-i-compose: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.4 2.6a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4Z'/></svg>");
	--yl-i-mail: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 6L2 7'/></svg>");
	--yl-i-contacts: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
	--yl-i-settings: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/><circle cx='12' cy='12' r='3'/></svg>");
	--yl-i-moon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/></svg>");
	--yl-i-sun: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
	--yl-i-about: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>");
	--yl-i-logout: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5M21 12H9'/></svg>");
	--yl-i-account: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='10' r='3'/><path d='M7 20.66V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.66'/></svg>");
	--yl-i-inbox: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>");
	--yl-i-drafts: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>");
	--yl-i-sent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4Z'/><path d='M22 2 11 13'/></svg>");
	--yl-i-junk: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m4.9 4.9 14.2 14.2'/></svg>");
	--yl-i-trash: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/></svg>");
	--yl-i-archive: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='5' rx='1'/><path d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8M10 12h4'/></svg>");
	--yl-i-folder: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>");
	--yl-i-reply: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 17 4 12l5-5'/><path d='M20 18v-2a4 4 0 0 0-4-4H4'/></svg>");
	--yl-i-reply-all: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 2 12l5-5M12 17l-5-5 5-5'/><path d='M22 18v-2a4 4 0 0 0-4-4H7'/></svg>");
	--yl-i-forward: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m15 17 5-5-5-5'/><path d='M4 18v-2a4 4 0 0 1 4-4h12'/></svg>");
	--yl-i-tag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.42l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/><circle cx='7.5' cy='7.5' r='1' fill='black'/></svg>");
	--yl-i-more: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='4' cy='12' r='2.3'/><circle cx='12' cy='12' r='2.3'/><circle cx='20' cy='12' r='2.3'/></svg>");
	--yl-i-more-v: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='4' r='2.3'/><circle cx='12' cy='12' r='2.3'/><circle cx='12' cy='20' r='2.3'/></svg>");
	--yl-i-select: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='m9 12 2 2 4-4'/></svg>");
	--yl-i-threads: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z'/><path d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1'/></svg>");
	--yl-i-options: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/></svg>");
	--yl-i-print: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9V2h12v7'/><path d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/><rect x='6' y='14' width='12' height='8' rx='1'/></svg>");
	--yl-i-upload: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='m17 8-5-5-5 5M12 3v12'/></svg>");
	--yl-i-download: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='m7 10 5 5 5-5M12 15V3'/></svg>");
	--yl-i-save: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><path d='M17 21v-8H7v8M7 3v5h8'/></svg>");
	--yl-i-attach: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>");
	--yl-i-signature: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17c3.33-3.33 5-6 5-8 0-3-1-3-2-3S3.97 7.05 4 9c.03 2.09 2.66 4.9 3.5 6 1.5 2 2.5 2.5 3.5 1l2-3c.33 2.67 1.33 4 3 4 .53 0 2.94-2 3.5-2 .73 0 1.4.67 2.5 2'/></svg>");
	--yl-i-responses: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
	--yl-i-spellcheck: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 16 6-12 6 12M8 12h8'/><path d='m16 20 2 2 4-4'/></svg>");
	--yl-i-lock: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
	--yl-i-monitor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><path d='M8 21h8M12 17v4'/></svg>");
	--yl-i-idcard: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><circle cx='8' cy='11' r='2'/><path d='M5 16a3 3 0 0 1 6 0M14 10h4M14 14h3'/></svg>");
	--yl-i-filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/></svg>");
	--yl-i-shield: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/></svg>");
	--yl-i-shield-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
	--yl-i-server: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='8' rx='2'/><rect x='2' y='14' width='20' height='8' rx='2'/><path d='M6 6h.01M6 18h.01'/></svg>");
	--yl-i-book: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/><circle cx='12' cy='8' r='2'/><path d='M15 13a3 3 0 1 0-6 0'/></svg>");
	--yl-i-mail-open: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z'/><path d='m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10'/></svg>");
	--yl-i-align-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 6H3M15 12H3M17 18H3'/></svg>");
	--yl-i-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/></svg>");
	--yl-i-external: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
	--yl-i-code: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m16 18 6-6-6-6M8 6l-6 6 6 6'/></svg>");
	--yl-i-move: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-1.5'/><path d='M2 13h10M9 16l3-3-3-3'/></svg>");
	--yl-i-copy: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='8' width='14' height='14' rx='2'/><path d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/></svg>");
	--yl-i-flag: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7'/></svg>");
	--yl-i-flag-off: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2c3 0 5 2 8 2s4-1 4-1v11M4 22V4M4 15s1-1 4-1 5 2 8 2M2 2l20 20'/></svg>");
	--yl-i-shrink: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m15 15 6 6M15 20v-5h5M9 20v-5H4M9 15l-6 6M15 4v5h5M15 9l6-6M9 4v5H4M9 9 3 3'/></svg>");
	--yl-i-pie: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21.21 15.89A10 10 0 1 1 8 2.83'/><path d='M22 12A10 10 0 0 0 12 2v10z'/></svg>");
	--yl-i-repeat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m17 2 4 4-4 4M3 11v-1a4 4 0 0 1 4-4h14M7 22l-4-4 4-4M21 13v1a4 4 0 0 1-4 4H3'/></svg>");
	--yl-i-square: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/></svg>");
	--yl-i-chevrons-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m7 6 5 5 5-5M7 13l5 5 5-5'/></svg>");
	--yl-i-chevrons-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m17 11-5-5-5 5M17 18l-5-5-5 5'/></svg>");
	--yl-i-chevron-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	--yl-i-chevron-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m18 15-6-6-6 6'/></svg>");
	--yl-i-x: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
	--yl-i-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
	--yl-i-plus: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5v14'/></svg>");
	--yl-i-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0'/><circle cx='12' cy='12' r='3'/></svg>");
	--yl-i-pencil: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/></svg>");
	--yl-i-file-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4M12 18v-6M9 15l3 3 3-3'/></svg>");
	--yl-i-file: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/><path d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/></svg>");
	--yl-i-undo: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7v6h6'/><path d='M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13'/></svg>");
	--yl-i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
	--yl-i-refresh: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/></svg>");
}

:root.dark-mode {
	--yl-bar: #0f5ea8;
	--yl-bar-muted: rgba(255, 255, 255, .4);
	--yl-bar-hover: rgba(255, 255, 255, .12);
	--yl-bar-active: rgba(255, 255, 255, .2);
	--yl-accent: #479ef5;
	--yl-accent-hover: #62abf5;
	--yl-btn: #1f74cc;
	--yl-btn-hover: #2a82dc;
	--yl-accent-soft: #1f3550;
	--yl-accent-text: #8cc2fb;
	--yl-ring: rgba(71, 158, 245, .3);
	--yl-bg: #1b1e23;
	--yl-panel: #16181c;
	--yl-field: #22262c;
	--yl-field-soft: #262a31;
	--yl-border: #2d3239;
	--yl-border-soft: #262a30;
	--yl-input-border: #3a4049;
	--yl-text: #e4e6e9;
	--yl-muted: #9aa2ac;
	--yl-faint: #737c86;
	--yl-hover: #252a31;
	--yl-flag: #f1707b;
	--yl-flag-soft: #3a2328;
	--yl-danger: #f1707b;
	--yl-badge: #479ef5;
	--yl-badge-text: #0b1a2b;
	--yl-badge-muted: #333a43;
	--yl-badge-muted-text: #c9ced4;
	--yl-scroll: #3b424c;
	--yl-tooltip: #e4e6e9;
	--yl-tooltip-text: #16181c;
	--yl-pop-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* ---------------------------------------------------------------- base */

:root:root body,
:root:root input,
:root:root select,
:root:root textarea,
:root:root button,
:root:root .popover,
:root:root .ui-dialog {
	font-family: var(--yl-font);
}

:root:root body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:root:root * {
	scrollbar-width: thin;
	scrollbar-color: var(--yl-scroll) transparent;
}

:root:root body,
:root:root #layout-content,
:root:root #layout-list {
	background-color: var(--yl-bg);
	color: var(--yl-text);
}

:root:root a {
	color: var(--yl-accent);
}

/* the shared recipe for line icons: set --yl-i on the element, the :before paints it */
:root:root #taskmenu a:before,
:root:root #layout-sidebar > .header .header-title.username:before,
:root:root #layout-sidebar > .header a.sidebar-menu:before,
:root:root .folderlist li > a:before,
:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li :is(a.reply, a.reply-all, a.forward, a.delete, a.archive, a.junk, a.notjunk, a.markmessage, a.more, a.select, a.threads, a.options, a.create, a.print, a.search, a.import, a.export, a.save, a.attach, a.signature, a.responses, a.spellcheck, a.encrypt):before,
:root:root #layout > div > .header a.toolbar-menu-button:before,
:root:root #settings-menu li > a:before,
:root:root #sections-table td.section:before,
:root:root #directorylist li > a:before,
:root:root #layout-list > .header a.refresh:before,
:root:root .searchbar a.button:is(.unread, .options, .reset):before,
:root:root #message-header .header-links a:before,
:root:root #message-header > .subject a.extwin:before,
:root:root .popupmenu ul.menu li > a:is(.yl-i, .forward, .reply, .print, .import, .download, .edit, .source, .move, .copy, .extwin, .filterlink, .read, .unread, .flag, .unflag, .expunge, .purge, .folders, .show-folder-size, .selection, .select, .expand, .collapseall, .expandall, .openextwin, .open, .delete, .rename):before,
:root:root button.btn:is(.send, .attach, .save, .submit, .cancel, .delete, .create):before,
:root:root a.btn.extwin:before,
:root:root .listing-hover-menu a.button:before,
:root:root .input-group-text.icon:is(.edit, .add, .delete):before,
:root:root .messagelist span.attachment span:before,
:root:root .messagelist span.flag span.flagged:before,
:root:root .html-editor .editor-toolbar .mce-i-html:before,
:root:root .attachmentslist li:before,
:root:root .attachmentslist li a.dropdown:before {
	content: "";
	background-color: currentColor;
	-webkit-mask: var(--yl-i) center / var(--yl-isz, 20px) no-repeat;
	mask: var(--yl-i) center / var(--yl-isz, 20px) no-repeat;
}

/* ---------------------------------------------------------------- the top bar */

:root:root #layout > div > .header {
	background: var(--yl-bar);
	color: var(--yl-bar-text);
	border-bottom: 0;
	margin-right: -1px;
	box-shadow: none;
}

:root:root #layout > div:last-of-type > .header {
	margin-right: 0;
}

:root:root #layout > div > .header .header-title,
:root:root #layout > div > .header .header-title a,
:root:root #layout > div > .header a.button,
:root:root #layout > div > .header .toolbar a,
:root:root #layout > div > .header .dropbutton a.dropdown:before {
	color: var(--yl-bar-text);
}

:root:root #layout > div > .header ul.toolbar li {
	border: 0;
}

:root:root #layout > div > .header .header-title {
	font-weight: 600;
	letter-spacing: .01em;
}

/* button geometry for the desktop bar; below 769px Elastic's touch header stays as is */
@media screen and (min-width: 769px) {
	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) li {
		vertical-align: top;
	}

	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > a,
	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > .dropbutton,
	:root:root #layout > div > .header > a.button {
		margin-top: 5px;
	}

	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > a,
	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > .dropbutton > a,
	:root:root #layout > div > .header > a.button {
		height: 48px;
		padding: 5px 7px 4px;
		border-radius: var(--yl-radius);
		transition: background-color var(--yl-ease), color var(--yl-ease);
	}

	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > a:before,
	:root:root #layout > div > .header ul.toolbar:not(.popupmenu) > li > .dropbutton > a:not(.dropdown):before,
	:root:root #layout > div > .header > a.button:before {
		display: block;
		height: 22px !important;
		line-height: 22px;
		font-size: 17px;
	}

	:root:root #layout > div > .header .toolbar a .inner,
	:root:root #layout > div > .header a.button .inner {
		font-size: 11.5px;
		font-weight: 500;
		letter-spacing: .01em;
	}

	:root:root #layout > div > .header .dropbutton a.dropdown {
		height: 48px;
		padding: 0 3px;
		border-radius: var(--yl-radius);
	}

	:root:root #layout > div > .header .dropbutton a.dropdown:before {
		line-height: 48px;
		font-size: 9px;
	}
}

:root:root #layout > div > .header .toolbar a.disabled,
:root:root #layout > div > .header .toolbar a.disabled:before,
:root:root #layout > div > .header .dropbutton a.dropdown.disabled:before,
:root:root #layout > div > .header a.button.disabled,
:root:root #layout > div > .header a.button.disabled:before {
	color: var(--yl-bar-muted);
	opacity: 1;
}

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

:root:root #layout > div > .header .dropbutton:not(.disabled):hover {
	border-radius: var(--yl-radius);
}

:root:root #layout > div > .header .dropbutton a.dropdown:not(.disabled):hover {
	background-color: var(--yl-bar-active);
}

:root:root #layout > div > .header .toolbar a.selected {
	background-color: var(--yl-bar-active);
	color: var(--yl-bar-text);
}

/* line icons for the mail toolbars */
:root:root #layout > div > .header ul.toolbar > li a.reply { --yl-i: var(--yl-i-reply); }
:root:root #layout > div > .header ul.toolbar > li a.reply-all { --yl-i: var(--yl-i-reply-all); }
:root:root #layout > div > .header ul.toolbar > li a.forward { --yl-i: var(--yl-i-forward); }
:root:root #layout > div > .header ul.toolbar > li a.delete { --yl-i: var(--yl-i-trash); }
:root:root #layout > div > .header ul.toolbar > li a.archive { --yl-i: var(--yl-i-archive); }
:root:root #layout > div > .header ul.toolbar > li a.junk,
:root:root #layout > div > .header ul.toolbar > li a.notjunk { --yl-i: var(--yl-i-junk); }
:root:root #layout > div > .header ul.toolbar > li a.markmessage { --yl-i: var(--yl-i-tag); }
:root:root #layout > div > .header ul.toolbar > li a.more { --yl-i: var(--yl-i-more); }
:root:root #layout > div > .header ul.toolbar > li a.select { --yl-i: var(--yl-i-select); }
:root:root #layout > div > .header ul.toolbar > li a.threads { --yl-i: var(--yl-i-threads); }
:root:root #layout > div > .header ul.toolbar > li a.options { --yl-i: var(--yl-i-options); }
:root:root #layout-list > .header a.refresh { --yl-i: var(--yl-i-refresh); }
:root:root #layout > div > .header ul.toolbar > li a.create { --yl-i: var(--yl-i-compose); }
:root:root #layout > div > .header ul.toolbar > li a.print { --yl-i: var(--yl-i-print); }
:root:root #layout > div > .header ul.toolbar > li a.search { --yl-i: var(--yl-i-search); }
:root:root #layout > div > .header ul.toolbar > li a.import { --yl-i: var(--yl-i-upload); }
:root:root #layout > div > .header ul.toolbar > li a.export { --yl-i: var(--yl-i-download); }
:root:root #layout > div > .header ul.toolbar > li a.save { --yl-i: var(--yl-i-save); }
:root:root #layout > div > .header ul.toolbar > li a.attach { --yl-i: var(--yl-i-attach); }
:root:root #layout > div > .header ul.toolbar > li a.signature { --yl-i: var(--yl-i-signature); }
:root:root #layout > div > .header ul.toolbar > li a.responses { --yl-i: var(--yl-i-responses); }
:root:root #layout > div > .header ul.toolbar > li a.spellcheck { --yl-i: var(--yl-i-spellcheck); }
:root:root #layout > div > .header ul.toolbar > li a.encrypt { --yl-i: var(--yl-i-lock); }
:root:root #layout > div > .header a.toolbar-menu-button { --yl-i: var(--yl-i-more); }
:root:root .searchbar a.button.unread { --yl-i: var(--yl-i-mail); --yl-isz: 18px; }
:root:root .searchbar a.button.options { --yl-i: var(--yl-i-chevron-down); --yl-isz: 18px; }
:root:root .searchbar.open a.button.options { --yl-i: var(--yl-i-chevron-up); }
:root:root .searchbar a.button.reset { --yl-i: var(--yl-i-x); --yl-isz: 18px; }

/* ---------------------------------------------------------------- the task tools */

:root:root #layout-menu .popover-header {
	background-color: var(--yl-bar) !important;
	border-bottom: 0;
}

:root:root #layout-menu #logo {
	display: none;
}

:root:root #taskmenu a.compose { --yl-i: var(--yl-i-compose); }
:root:root #taskmenu a.mail { --yl-i: var(--yl-i-mail); }
:root:root #taskmenu a.contacts { --yl-i: var(--yl-i-contacts); }
:root:root #taskmenu a.settings { --yl-i: var(--yl-i-settings); }
:root:root #taskmenu a.theme { --yl-i: var(--yl-i-moon); }
:root:root.dark-mode #taskmenu a.theme { --yl-i: var(--yl-i-sun); }
:root:root #taskmenu a.about { --yl-i: var(--yl-i-about); }
:root:root #taskmenu a.logout { --yl-i: var(--yl-i-logout); }

@media screen and (max-width: 480px) {
	:root:root #taskmenu a:before {
		height: 100% !important;
	}
}

@media screen and (min-width: 481px) {
	:root:root #layout-menu {
		background-color: var(--yl-panel);
		border-right: 1px solid var(--yl-border);
	}

	:root:root #layout-menu .special-buttons {
		background-color: transparent !important;
	}

	:root:root #taskmenu a,
	:root:root #taskmenu .action-buttons a,
	:root:root #layout-menu .special-buttons a:not(:focus) {
		color: var(--yl-muted);
		background: transparent;
		border-radius: 10px;
		transition: background-color var(--yl-ease), color var(--yl-ease);
	}

	/* a fixed square with the glyph centred; Elastic forces the glyph box with !important */
	:root:root #taskmenu a {
		display: flex;
		align-items: center;
		justify-content: center;
		text-indent: 0;
	}

	:root:root #taskmenu a:before {
		flex: none;
		display: block;
		width: var(--yl-isz, 20px) !important;
		height: var(--yl-isz, 20px) !important;
		margin: 0 !important;
		float: none !important;
		line-height: 0;
		text-indent: 0;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	:root:root #taskmenu a:hover,
	:root:root #taskmenu .action-buttons a:hover {
		background-color: var(--yl-hover);
		color: var(--yl-text);
	}

	:root:root #taskmenu a.selected,
	:root:root #taskmenu a.selected:hover {
		background-color: var(--yl-accent-soft);
		color: var(--yl-accent);
	}

	:root:root #taskmenu .action-buttons a.compose {
		color: var(--yl-accent);
	}

	:root:root #taskmenu a.logout,
	:root:root #taskmenu a.logout:hover {
		color: var(--yl-danger) !important;
	}

	/* the slim rail, for the widths that cannot give the folder column a tool row */
	:root:root #taskmenu a {
		width: 36px;
		height: 36px;
		margin: 3px auto;
		padding: 0;
	}

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

@media screen and (min-width: 1025px) and (max-width: 1200px) {
	:root:root #layout-menu {
		width: 52px;
	}

	:root:root #taskmenu a {
		width: 40px;
		height: 40px;
		margin: 4px 6px;
	}
}

/* wide screens: no rail, the tools become a row in the bar over the folder column */
@media screen and (min-width: 1201px) {
	:root:root #layout-menu {
		width: 0;
		min-width: 0;
		flex: 0 0 0;
		border: 0;
		position: static;
	}

	:root:root #layout-menu .popover-header {
		display: none;
	}

	:root:root #taskmenu {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		height: var(--yl-bar-height);
		display: flex;
		align-items: center;
		gap: 1px;
		padding: 0 8px;
		overflow: visible;
	}

	:root:root #taskmenu .action-buttons,
	:root:root #taskmenu .special-buttons {
		display: contents;
	}

	:root:root #taskmenu a,
	:root:root #taskmenu .action-buttons a,
	:root:root #layout-menu .special-buttons a:not(:focus),
	:root:root #taskmenu a.logout {
		position: relative;
		width: var(--yl-tool);
		height: var(--yl-tool);
		margin: 0;
		overflow: visible;
		border-radius: var(--yl-radius);
		color: var(--yl-bar-text) !important;
		background: transparent;
		--yl-isz: 19px;
	}

	:root:root #taskmenu a:hover,
	:root:root #taskmenu a:focus,
	:root:root #taskmenu .action-buttons a:hover,
	:root:root #layout-menu .special-buttons a:hover {
		background-color: var(--yl-bar-hover);
	}

	:root:root #taskmenu a.selected,
	:root:root #taskmenu a.selected:hover {
		background-color: var(--yl-bar-active);
	}

	:root:root #taskmenu a.theme {
		margin-left: 6px;
	}

	/* labels become tooltips */
	:root:root #taskmenu a .inner {
		display: block;
		position: absolute;
		top: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);
		padding: 4px 8px;
		border-radius: 6px;
		background: var(--yl-tooltip);
		color: var(--yl-tooltip-text);
		font-size: 12px;
		font-weight: 500;
		line-height: 1.3;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--yl-ease);
	}

	:root:root #taskmenu .action-buttons a .inner {
		left: 0;
		transform: none;
	}

	:root:root #taskmenu a:hover .inner {
		opacity: 1;
		transition-delay: .35s;
	}

	/* the folder column: a bar strip for the tools, the account row below it */
	:root:root #layout-sidebar:not(.sidebar-right) {
		min-width: 250px;
	}

	:root:root #layout-sidebar:not(.sidebar-right)::before {
		content: "";
		flex: 0 0 var(--yl-bar-height);
		margin-right: -1px;
		background: var(--yl-bar);
	}

	:root:root #layout > #layout-sidebar:not(.sidebar-right) > .header {
		background: var(--yl-panel);
		color: var(--yl-text);
		height: 44px;
		min-height: 44px;
		line-height: 44px;
		margin-right: 0;
		padding: 0 6px 0 12px;
		justify-content: flex-start;
		border-bottom: 1px solid var(--yl-border-soft);
	}

	:root:root #layout > #layout-sidebar:not(.sidebar-right) > .header .header-title {
		color: var(--yl-text);
		text-align: left;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 13px;
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	:root:root #layout-sidebar:not(.sidebar-right) > .header .header-title.username:before {
		--yl-i: var(--yl-i-account);
		--yl-isz: 20px;
		display: block;
		flex: 0 0 20px;
		height: 20px;
		color: var(--yl-muted);
	}

	:root:root #layout > #layout-sidebar:not(.sidebar-right) > .header a.button {
		color: var(--yl-muted);
		height: 32px;
		width: 32px;
		min-width: 32px;
		margin: 6px 0;
		padding: 0;
		line-height: 32px;
	}

	:root:root #layout-sidebar:not(.sidebar-right) > .header a.sidebar-menu:before {
		--yl-i: var(--yl-i-more-v);
		display: block;
		width: 32px;
		height: 32px !important;
		margin: 0;
	}

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

	/* pages without a folder column: make room for the tools in the first header */
	:root:root #layout:not(:has(> #layout-sidebar:not(.sidebar-right))) > #layout-list > .header,
	:root:root #layout:not(:has(> #layout-sidebar:not(.sidebar-right), > #layout-list)) > #layout-content > .header {
		padding-left: calc(7 * var(--yl-tool) + 32px);
	}
}

/* ---------------------------------------------------------------- the folder list */

:root:root #layout-sidebar {
	background-color: var(--yl-panel);
	border-right: 1px solid var(--yl-border);
}

:root:root #layout-sidebar > .scroller {
	padding: 6px 0;
}

:root:root #layout-sidebar .listing li {
	border-bottom: 0;
	background: transparent;
}

:root:root #layout-sidebar .listing li > a,
:root:root #layout-sidebar .listing li > div > a {
	border-radius: var(--yl-radius);
	width: auto;
	margin: 1px 8px;
	line-height: 34px;
	color: var(--yl-text);
	background: transparent;
	border-left: 0;
	transition: background-color var(--yl-ease), color var(--yl-ease);
}

:root:root #layout-sidebar .listing li > a:hover,
:root:root #layout-sidebar .listing li > div > a:hover {
	background-color: var(--yl-hover);
}

:root:root #layout-sidebar .listing li > a:focus {
	outline: 2px solid var(--yl-ring);
	outline-offset: -2px;
}

:root:root #layout-sidebar .listing li.selected,
:root:root #layout-sidebar .listing li.selected ul {
	background: transparent;
}

:root:root #layout-sidebar .listing li.selected > a,
:root:root #layout-sidebar .listing li.selected > div > a {
	background-color: var(--yl-accent-soft);
	color: var(--yl-accent-text);
	font-weight: 600;
}

:root:root #layout-sidebar .listing li > a:before,
:root:root #layout-sidebar .listing li > div > a:before,
:root:root #layout-sidebar .listing li div.treetoggle {
	color: var(--yl-muted);
}

:root:root #layout-sidebar .listing li.selected > a:before,
:root:root #layout-sidebar .listing li.selected > div > a:before {
	color: var(--yl-accent);
}

:root:root .folderlist li > a:before {
	--yl-i: var(--yl-i-folder);
	--yl-isz: 18px;
	height: 34px;
	width: 20px;
	margin-right: 10px;
}

:root:root .folderlist li.inbox > a:before { --yl-i: var(--yl-i-inbox); }
:root:root .folderlist li.drafts > a:before { --yl-i: var(--yl-i-drafts); }
:root:root .folderlist li.sent > a:before { --yl-i: var(--yl-i-sent); }
:root:root .folderlist li.junk > a:before { --yl-i: var(--yl-i-junk); }
:root:root .folderlist li.trash > a:before { --yl-i: var(--yl-i-trash); }

/* the archive folder has no special class here, so it is matched by its IMAP name too */
:root:root .folderlist li.archive > a:before,
:root:root .folderlist li > a[rel="Archive"]:before { --yl-i: var(--yl-i-archive); }

:root:root #layout-sidebar .folderlist li.mailbox.unread > a {
	font-weight: 600;
}

:root:root .folderlist li.mailbox .unreadcount,
:root:root .folderlist li.mailbox.recent > a > .unreadcount {
	top: 50%;
	right: 8px;
	margin: 0;
	transform: translateY(-50%);
	min-width: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--yl-badge-muted);
	color: var(--yl-badge-muted-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 19px;
}

:root:root .folderlist li.mailbox.inbox .unreadcount,
:root:root .folderlist li.mailbox.recent > a > .unreadcount {
	background: var(--yl-badge);
	color: var(--yl-badge-text);
}

:root:root .folderlist li.mailbox.selected > a > .unreadcount {
	background: var(--yl-accent);
	color: var(--yl-badge-text);
}

:root:root #layout-sidebar .footer,
:root:root #layout-sidebar .quota-widget {
	background-color: var(--yl-panel);
}

/* ---------------------------------------------------------------- settings and contacts lists */

:root:root #settings-menu li > a:before,
:root:root #directorylist li > a:before {
	--yl-i: var(--yl-i-options);
	--yl-isz: 18px;
	height: 34px;
	width: 20px;
	margin-right: 10px;
}

:root:root #settings-menu li.folders > a:before { --yl-i: var(--yl-i-folder); }
:root:root #settings-menu li.identities > a:before { --yl-i: var(--yl-i-idcard); }
:root:root #settings-menu li.responses > a:before { --yl-i: var(--yl-i-responses); }
:root:root #settings-menu li.filter > a:before { --yl-i: var(--yl-i-filter); }
:root:root #settings-menu li.cd_preferences > a:before { --yl-i: var(--yl-i-contacts); }
:root:root #settings-menu li.twofactor_gauthenticator > a:before { --yl-i: var(--yl-i-shield-check); }
:root:root #directorylist li > a:before { --yl-i: var(--yl-i-book); }
:root:root #directorylist li.contactgroup > a:before { --yl-i: var(--yl-i-contacts); }

:root:root #sections-table td.section:before {
	--yl-i: var(--yl-i-options);
	--yl-isz: 18px;
	width: 20px;
	height: 35px;
	margin-right: 12px;
	color: var(--yl-muted);
}

:root:root #sections-table tr.general td.section:before { --yl-i: var(--yl-i-monitor); }
:root:root #sections-table tr.mailbox td.section:before { --yl-i: var(--yl-i-mail); }
:root:root #sections-table tr.mailview td.section:before { --yl-i: var(--yl-i-inbox); }
:root:root #sections-table tr.compose td.section:before { --yl-i: var(--yl-i-compose); }
:root:root #sections-table tr.addressbook td.section:before { --yl-i: var(--yl-i-contacts); }
:root:root #sections-table tr.folders td.section:before { --yl-i: var(--yl-i-folder); }
:root:root #sections-table tr.server td.section:before { --yl-i: var(--yl-i-server); }
:root:root #sections-table tr.encryption td.section:before { --yl-i: var(--yl-i-lock); }
:root:root #sections-table tr.authres_status td.section:before { --yl-i: var(--yl-i-shield); }

:root:root #sections-table tr.selected td.section:before {
	color: var(--yl-accent);
}

/* ---------------------------------------------------------------- lists in general */

:root:root .listing tbody td,
:root:root .listing li {
	border-color: var(--yl-border-soft);
}

:root:root .listing li a,
:root:root .listing tbody td,
:root:root .listing tbody td a {
	color: var(--yl-text);
}

:root:root table.listing tbody tr {
	transition: background-color var(--yl-ease);
}

:root:root table.listing tbody tr:hover td {
	background-color: var(--yl-hover);
}

:root:root .listing li.selected,
:root:root .listing li.selected > a,
:root:root .listing tr.selected td,
:root:root table.listing tbody tr.selected:hover td {
	background-color: var(--yl-accent-soft);
	color: var(--yl-text);
}

:root:root:not(.touch) .listing li > a:focus,
:root:root:not(.touch) .listing.focus tbody tr.focused > td:first-child,
:root:root:not(.touch) .listing.focus:not(.withselection) tbody tr.focused > td.selection + td {
	border-left-color: var(--yl-accent);
}

:root:root .listing span.secondary {
	color: var(--yl-muted);
}

:root:root #layout-list .footer,
:root:root #layout-content > .footer {
	background-color: var(--yl-bg);
	border-top: 1px solid var(--yl-border-soft);
}

:root:root .menu.pagenav .pagenav-text {
	color: var(--yl-muted);
	font-weight: 500;
}

:root:root .menu.pagenav a {
	color: var(--yl-muted);
	border-radius: var(--yl-radius);
}

:root:root .menu.pagenav input {
	border-radius: 999px;
}

/* the search box: the form is one pill holding the magnifier and the input */
:root:root .searchbar {
	height: 46px;
	min-height: 46px;
	line-height: normal;
	padding: 0 6px 0 10px;
	gap: 2px;
	overflow: visible;
	background-color: transparent;
	border-bottom: 1px solid var(--yl-border-soft);
}

:root:root #layout-list .searchbar {
	background-color: var(--yl-bg);
}

:root:root .searchbar form {
	min-width: 0;
	height: 32px;
	align-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--yl-field-soft);
	transition: border-color var(--yl-ease), background-color var(--yl-ease), box-shadow var(--yl-ease);
}

:root:root .searchbar form:hover {
	border-color: var(--yl-input-border);
}

:root:root .searchbar form:focus-within {
	border-color: var(--yl-accent);
	background-color: var(--yl-field);
	box-shadow: 0 0 0 3px var(--yl-ring);
}

:root:root .searchbar form:before {
	content: "";
	flex: none;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0 0 0 12px;
	color: var(--yl-faint);
	background-color: currentColor;
	-webkit-mask: var(--yl-i-search) center / 16px no-repeat;
	mask: var(--yl-i-search) center / 16px no-repeat;
}

:root:root .searchbar form:focus-within:before {
	color: var(--yl-accent);
}

:root:root .searchbar form input,
:root:root .searchbar form input:focus {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 14px 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: var(--yl-text);
}

:root:root .searchbar form input::placeholder {
	color: var(--yl-faint);
}

:root:root .searchbar a.button {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	color: var(--yl-muted);
	transition: background-color var(--yl-ease), color var(--yl-ease);
}

:root:root .searchbar a.button:before {
	flex: none;
	width: 18px;
	height: 18px;
	line-height: 18px;
	margin: 0;
	float: none;
	font-size: 14px;
}

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

:root:root .searchbar.active a.button.reset {
	display: flex;
}

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

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

/* ---------------------------------------------------------------- the message list */

:root:root #layout-list {
	border-right: 1px solid var(--yl-border);
}

:root:root .messagelist tbody td {
	border-bottom: 1px solid var(--yl-border-soft);
	background-color: transparent;
	color: var(--yl-text);
	padding-top: 7px;
	padding-bottom: 7px;
}

:root:root .messagelist td.subject {
	padding-left: 6px;
	padding-right: 4px;
}

:root:root .messagelist td.subject {
	align-content: flex-start;
}

:root:root .messagelist td.subject span {
	line-height: 20px;
}

:root:root.touch .messagelist td.threads,
:root:root.layout-phone .messagelist td.threads {
	line-height: 40px;
}

:root:root.touch .messagelist tr td.flags,
:root:root.layout-phone .messagelist tr td.flags {
	background: transparent;
}

:root:root .messagelist td.subject span.fromto,
:root:root .messagelist td.subject span.date,
:root:root .messagelist td.subject span.size,
:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto,
:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.date {
	color: var(--yl-muted);
	font-size: 12.5px;
}

:root:root .messagelist td.subject span.date {
	font-variant-numeric: tabular-nums;
}

:root:root .messagelist td.subject span.subject {
	font-size: 14px;
}

:root:root .messagelist td.subject span.subject a,
:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.subject a {
	color: var(--yl-text);
}

:root:root .messagelist td.threads,
:root:root .messagelist td.flags {
	color: var(--yl-faint);
}

:root:root .messagelist td.flags > span {
	height: 20px;
	line-height: 20px;
}

:root:root .messagelist td.flags span.attachment span,
:root:root .messagelist tr:not(.flagged):not(.deleted) span.flag,
:root:root .messagelist tr:not(.flagged):not(.deleted) span.attachment span {
	color: var(--yl-faint);
}

:root:root .messagelist tr.thread td.threads div:before {
	color: var(--yl-muted);
}

/* line icons for the attachment and flag marks */
:root:root .messagelist span.attachment span:before,
:root:root .messagelist span.flag span.flagged:before {
	--yl-i: var(--yl-i-attach);
	--yl-isz: 16px;
	display: inline-block;
	vertical-align: top;
	width: 18px;
	height: 20px;
	margin: 0;
}

:root:root .messagelist span.flag span.flagged:before {
	--yl-i: var(--yl-i-flag);
}

/* the quick actions that float over a hovered row */
:root:root .listing-hover-menu {
	background-color: var(--yl-bg);
	border: 1px solid var(--yl-border);
	border-radius: var(--yl-radius);
	box-shadow: var(--yl-pop-shadow);
}

:root:root .listing-hover-menu span.txt {
	color: var(--yl-muted);
}

:root:root .listing-hover-menu a.button {
	color: var(--yl-muted);
	border-radius: 6px;
}

:root:root .listing-hover-menu a.button:hover {
	color: var(--yl-accent);
	background-color: var(--yl-hover);
}

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

:root:root .listing-hover-menu a.button:before {
	--yl-isz: 17px;
	--yl-i: var(--yl-i-flag);
}

:root:root .listing-hover-menu a.button.unflag:before { --yl-i: var(--yl-i-flag-off); }
:root:root .listing-hover-menu a.button.delete:before { --yl-i: var(--yl-i-trash); }
:root:root .listing-hover-menu a.button.undo:before { --yl-i: var(--yl-i-undo); }

/* status icon: read messages show nothing, unread ones a blue dot */
:root:root .messagelist td.subject span.msgicon.status:not([class*="unread"]):not(.replied):not(.forwarded):before {
	visibility: hidden;
}

:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status,
:root:root .messagelist td.subject span.msgicon.status {
	color: var(--yl-faint);
}

:root:root .messagelist td.subject span.msgicon.status:before {
	height: 20px;
	line-height: 20px;
}

:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread,
:root:root .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unreadchildren,
:root:root .messagelist td.subject span.msgicon.status.unread {
	color: var(--yl-accent);
}

:root:root .messagelist tr.unread td.subject span.subject a,
:root:root .messagelist tr.unread td.subject span.fromto,
:root:root .messagelist tr:not(.flagged):not(.deleted).unread td.subject span.fromto {
	font-weight: 700;
	color: var(--yl-text);
}

:root:root .messagelist tr.unread td.subject span.date,
:root:root .messagelist tr:not(.flagged):not(.deleted).unread td.subject span.date {
	color: var(--yl-accent-text);
	font-weight: 600;
}

:root:root .messagelist tr.flagged td,
:root:root .messagelist tr.flagged td.subject span.subject a,
:root:root .messagelist tr.flagged td.subject span.fromto,
:root:root .messagelist tr.flagged td.subject span.date,
:root:root .messagelist tr.flagged span.flag,
:root:root .messagelist tr.flagged:not(.deleted) td,
:root:root .messagelist tr.flagged:not(.deleted) span.attachment span {
	color: var(--yl-flag);
}

:root:root .messagelist tr.flagged:not(.selected) td {
	background-color: var(--yl-flag-soft);
}

:root:root .messagelist tr.deleted td,
:root:root .messagelist tr.deleted td.subject span.subject a {
	color: var(--yl-faint);
}

:root:root .messagelist tbody tr:hover td,
:root:root .messagelist tr.flagged:not(.selected):hover td {
	background-color: var(--yl-hover);
}

:root:root .messagelist tr.selected td,
:root:root .messagelist tr.selected:hover td {
	background-color: var(--yl-accent-soft);
	color: var(--yl-text);
}

:root:root .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
:root:root .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status {
	color: var(--yl-text);
}

/* a 3px accent edge on the selected row */
:root:root .messagelist tr.selected td.threads {
	background-image: linear-gradient(var(--yl-accent), var(--yl-accent));
	background-size: 3px 100%;
	background-repeat: no-repeat;
}

:root:root .messagelist tr.focused td {
	outline: 0;
}

/* ---------------------------------------------------------------- content and the message view */

:root:root #layout-content .content,
:root:root #layout-content .formcontent {
	background-color: var(--yl-bg);
	color: var(--yl-text);
}

:root:root #message-header {
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--yl-border-soft);
}

:root:root #message-header > .subject {
	font-size: 20px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -.01em;
	margin-bottom: 14px;
	color: var(--yl-text);
}

:root:root #message-header > .subject a.extwin {
	color: var(--yl-faint);
}

:root:root #message-header > .subject a.extwin:hover {
	color: var(--yl-accent);
}

:root:root #message-header > .header img.contactphoto {
	width: 44px;
	height: 44px;
	margin-right: 12px;
	background: var(--yl-field-soft);
}

:root:root #message-header .header-content {
	min-height: 44px;
}

:root:root #message-header .header-summary {
	color: var(--yl-muted);
	line-height: 1.5;
}

:root:root #message-header .header-summary .adr a,
:root:root #message-header .header-headers .adr a {
	color: var(--yl-text);
	font-weight: 600;
	text-decoration: none;
}

:root:root #message-header .header-headers td.header-title {
	color: var(--yl-muted);
}

:root:root #message-header .header-links {
	margin-top: 4px;
}

:root:root #message-header .header-links a {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px 2px 6px;
	margin-right: 4px;
	border-radius: 999px;
	color: var(--yl-muted);
	font-size: 12.5px;
	text-decoration: none;
	transition: background-color var(--yl-ease), color var(--yl-ease);
}

:root:root #message-header .header-links a:before {
	color: inherit;
	font-size: 12px;
}

:root:root #message-header .header-links a:hover {
	background-color: var(--yl-hover);
	color: var(--yl-accent-text);
}

:root:root #attachment-list {
	background: transparent;
	border-color: transparent;
}

:root:root .attachmentslist li {
	border: 1px solid var(--yl-border);
	border-radius: var(--yl-radius);
	background-color: var(--yl-bg);
	transition: border-color var(--yl-ease), background-color var(--yl-ease);
}

:root:root .attachmentslist li:before {
	--yl-i: var(--yl-i-file);
	--yl-isz: 17px;
	width: 22px;
	color: var(--yl-muted);
}

:root:root .attachmentslist li:is(.image, .jpeg, .jpg, .png, .gif, .webp):before {
	--yl-i: var(--yl-i-image);
}

:root:root .attachmentslist li a.dropdown:before {
	--yl-i: var(--yl-i-chevron-down);
	--yl-isz: 16px;
	width: 18px;
	height: 2rem;
	color: var(--yl-muted);
}

:root:root .attachmentslist li:hover {
	border-color: var(--yl-input-border);
	background-color: var(--yl-hover);
}

:root:root .ui.alert {
	border-radius: var(--yl-radius);
}

:root:root .iframe-wrapper iframe {
	background-color: var(--yl-bg);
}

/* line icons for the message header links */
:root:root #message-header .header-links a:before {
	flex: none;
	float: none;
	width: 15px;
	height: 15px;
	margin: 0 6px 0 0;
	-webkit-mask-size: 15px;
	mask-size: 15px;
	--yl-i: var(--yl-i-mail);
}

:root:root #message-header .header-links a.headers-summary:before { --yl-i: var(--yl-i-mail-open); }
:root:root #message-header .header-links a.headers-all:before { --yl-i: var(--yl-i-about); }
:root:root #message-header .header-links a.plain:before { --yl-i: var(--yl-i-align-left); }
:root:root #message-header .header-links a.html:before { --yl-i: var(--yl-i-image); }
:root:root #message-header .header-links a.zipdownload:before { --yl-i: var(--yl-i-download); }

:root:root #message-header > .subject a.extwin:before {
	--yl-i: var(--yl-i-external);
	width: .75em;
	height: .75em;
	margin-left: 4px;
	vertical-align: baseline;
	-webkit-mask-size: 100%;
	mask-size: 100%;
}

/* ---------------------------------------------------------------- compose */

:root:root .recipient-input {
	border-radius: var(--yl-radius);
}

:root:root .recipient-input .recipient {
	border-radius: 999px;
	background-color: var(--yl-accent-soft);
	border-color: transparent;
	color: var(--yl-accent-text);
}

:root:root #compose-subject {
	font-weight: 600;
}

:root:root .html-editor .editor-toolbar {
	background-color: var(--yl-field-soft);
	border-color: var(--yl-input-border);
	border-radius: var(--yl-radius) var(--yl-radius) 0 0;
}

:root:root .html-editor .editor-toolbar + textarea,
:root:root .html-editor .editor-toolbar ~ textarea {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

:root:root div.tox.tox-tinymce,
:root:root textarea.form-control {
	border-radius: var(--yl-radius);
}

/* ---------------------------------------------------------------- controls */

:root:root .btn,
:root:root .form-control,
:root:root .custom-select,
:root:root .input-group-text,
:root:root .custom-file-label {
	border-radius: var(--yl-radius);
}

:root:root .input-group > .form-control:not(:first-child),
:root:root .input-group > .custom-select:not(:first-child),
:root:root .input-group > .input-group-append > .input-group-text,
:root:root .input-group > .input-group-append > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

:root:root .input-group > .form-control:not(:last-child),
:root:root .input-group > .custom-select:not(:last-child),
:root:root .input-group > .input-group-prepend > .input-group-text,
:root:root .input-group > .input-group-prepend > .btn {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

:root:root .form-control,
:root:root .custom-select,
:root:root .recipient-input,
:root:root .input-group-text {
	background-color: var(--yl-field);
	color: var(--yl-text);
	border-color: var(--yl-input-border);
	transition: border-color var(--yl-ease), box-shadow var(--yl-ease);
}

:root:root .form-control:focus,
:root:root .custom-select:focus,
:root:root .recipient-input.focus,
:root:root .multi-input > .content.focused,
:root:root .custom-file-input:focus ~ .custom-file-label {
	background-color: var(--yl-field);
	border-color: var(--yl-accent);
	box-shadow: 0 0 0 3px var(--yl-ring);
}

:root:root .btn {
	font-weight: 500;
	transition: background-color var(--yl-ease), border-color var(--yl-ease), color var(--yl-ease);
}

:root:root .btn:focus {
	box-shadow: 0 0 0 3px var(--yl-ring);
}

:root:root .btn-primary,
:root:root .btn-primary.disabled,
:root:root .btn-primary:disabled,
:root:root .btn.mainaction {
	background-color: var(--yl-btn);
	border-color: var(--yl-btn);
	color: #fff;
}

:root:root .btn-primary:not(:disabled):hover,
:root:root .btn.mainaction:not(:disabled):hover {
	background-color: var(--yl-btn-hover);
	border-color: var(--yl-btn-hover);
}

:root:root .btn-secondary {
	background-color: var(--yl-field-soft);
	border-color: var(--yl-border);
	color: var(--yl-text);
}

:root:root .btn-secondary:not(:disabled):hover {
	background-color: var(--yl-hover);
	border-color: var(--yl-input-border);
	color: var(--yl-text);
}

:root:root .btn-link {
	color: var(--yl-accent);
}

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

:root:root .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--yl-accent);
}

:root:root input[type=checkbox],
:root:root input[type=radio] {
	accent-color: var(--yl-accent);
}

:root:root .quota-widget .value {
	background-color: var(--yl-accent);
}

/* ---------------------------------------------------------------- popovers and dialogs */

/* line icons in popup menus; the glyph box is one line of the menu high (Elastic forces it with !important) */
:root:root .popupmenu ul.menu li > a:before {
	--yl-isz: 17px;
}

:root:root .popupmenu ul.menu li > a:is(.yl-i, .forward, .reply, .print, .import, .download, .edit, .source, .move, .copy, .extwin, .filterlink, .read, .unread, .flag, .unflag, .expunge, .purge, .folders, .show-folder-size, .selection, .select, .expand, .collapseall, .expandall, .openextwin, .open, .delete, .rename):before {
	height: 1lh !important;
	width: 20px !important;
	min-width: 20px;
	margin-right: 8px !important;
	color: var(--yl-muted);
}

:root:root .popupmenu ul.menu li > a.forward { --yl-i: var(--yl-i-forward); }
:root:root .popupmenu ul.menu li > a.forward.attachment { --yl-i: var(--yl-i-attach); }
:root:root .popupmenu ul.menu li > a.forward.bounce { --yl-i: var(--yl-i-sent); }
:root:root .popupmenu ul.menu li > a.reply { --yl-i: var(--yl-i-reply-all); }
:root:root .popupmenu ul.menu li > a.reply.list { --yl-i: var(--yl-i-contacts); }
:root:root .popupmenu ul.menu li > a.print { --yl-i: var(--yl-i-print); }
:root:root .popupmenu ul.menu li > a.import { --yl-i: var(--yl-i-upload); }
:root:root .popupmenu ul.menu li > a.download { --yl-i: var(--yl-i-download); }
:root:root .popupmenu ul.menu li > a.edit { --yl-i: var(--yl-i-compose); }
:root:root .popupmenu ul.menu li > a.rename { --yl-i: var(--yl-i-pencil); }
:root:root .popupmenu ul.menu li > a.source { --yl-i: var(--yl-i-code); }
:root:root .popupmenu ul.menu li > a.move { --yl-i: var(--yl-i-move); }
:root:root .popupmenu ul.menu li > a.copy { --yl-i: var(--yl-i-copy); }
:root:root .popupmenu ul.menu li > a:is(.extwin, .openextwin) { --yl-i: var(--yl-i-external); }
:root:root .popupmenu ul.menu li > a.open { --yl-i: var(--yl-i-eye); }
:root:root .popupmenu ul.menu li > a.delete { --yl-i: var(--yl-i-trash); }
:root:root .popupmenu ul.menu li > a.filterlink { --yl-i: var(--yl-i-filter); }
:root:root .popupmenu ul.menu li > a.read { --yl-i: var(--yl-i-mail-open); }
:root:root .popupmenu ul.menu li > a.unread { --yl-i: var(--yl-i-mail); }
:root:root .popupmenu ul.menu li > a.flag { --yl-i: var(--yl-i-flag); }
:root:root .popupmenu ul.menu li > a.unflag { --yl-i: var(--yl-i-flag-off); }
:root:root .popupmenu ul.menu li > a.expunge { --yl-i: var(--yl-i-shrink); }
:root:root .popupmenu ul.menu li > a.purge { --yl-i: var(--yl-i-trash); }
:root:root .popupmenu ul.menu li > a.folders { --yl-i: var(--yl-i-settings); }
:root:root .popupmenu ul.menu li > a.show-folder-size { --yl-i: var(--yl-i-pie); }
:root:root .popupmenu ul.menu li > a:is(.selection, .select) { --yl-i: var(--yl-i-select); }
:root:root .popupmenu ul.menu li > a.select.unread { --yl-i: var(--yl-i-mail); }
:root:root .popupmenu ul.menu li > a.select.flagged { --yl-i: var(--yl-i-flag); }
:root:root .popupmenu ul.menu li > a.select.invert { --yl-i: var(--yl-i-repeat); }
:root:root .popupmenu ul.menu li > a.select.none { --yl-i: var(--yl-i-square); }
:root:root .popupmenu ul.menu li > a:is(.expand.all, .expand.unread, .expandall) { --yl-i: var(--yl-i-chevrons-down); }
:root:root .popupmenu ul.menu li > a:is(.expand.none, .collapseall) { --yl-i: var(--yl-i-chevrons-up); }

:root:root .popupmenu ul.menu li > a:not(.disabled):hover:before {
	color: var(--yl-text);
}

/* line icons in form buttons (Elastic forces the glyph inline with !important) */
:root:root button.btn:is(.send, .attach, .save, .submit, .cancel, .delete, .create):before,
:root:root a.btn.extwin:before {
	display: inline-block !important;
	vertical-align: top;
	font-size: inherit;
	width: 1.2em;
	height: 1.5em;
	margin-right: 6px !important;
	-webkit-mask-size: 1.15em;
	mask-size: 1.15em;
}

:root:root button.btn.send { --yl-i: var(--yl-i-sent); }
:root:root button.btn.attach { --yl-i: var(--yl-i-attach); }
:root:root button.btn:is(.save, .submit) { --yl-i: var(--yl-i-check); }
:root:root button.btn.cancel { --yl-i: var(--yl-i-x); }
:root:root button.btn.delete { --yl-i: var(--yl-i-trash); }
:root:root button.btn.create { --yl-i: var(--yl-i-plus); }
:root:root a.btn.extwin { --yl-i: var(--yl-i-external); }

/* the icon buttons next to compose fields */
:root:root .input-group-text.icon:is(.edit, .add, .delete):before {
	--yl-isz: 18px;
	display: inline-block !important;
	float: none !important;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin: 0 !important;
	--yl-i: var(--yl-i-plus);
}

:root:root .input-group-text.icon.edit:before { --yl-i: var(--yl-i-pencil); }
:root:root .input-group-text.icon.add.recipient:before { --yl-i: var(--yl-i-contacts); }
:root:root .input-group-text.icon.delete:before { --yl-i: var(--yl-i-x); }

:root:root .input-group-text.icon {
	color: var(--yl-muted);
}

:root:root .input-group-text.icon:hover {
	color: var(--yl-accent);
}

/* the plain editor toolbar */
:root:root .html-editor .editor-toolbar .mce-i-html {
	color: var(--yl-muted);
	border-radius: 6px;
}

:root:root .html-editor .editor-toolbar .mce-i-html:hover {
	color: var(--yl-text);
	background-color: var(--yl-hover);
}

:root:root .html-editor .editor-toolbar .mce-i-html:before {
	--yl-i: var(--yl-i-image);
	--yl-isz: 18px;
	height: 28px;
}

/* the drop area of the attachment upload */
:root:root .file-upload {
	border: 2px dashed var(--yl-input-border);
	border-radius: var(--yl-radius-lg);
}

:root:root .file-upload.droptarget:after {
	content: "";
	width: 56px;
	height: 56px;
	margin: 4rem auto 0;
	background-color: var(--yl-faint);
	-webkit-mask: var(--yl-i-file-down) center / 56px no-repeat;
	mask: var(--yl-i-file-down) center / 56px no-repeat;
	opacity: .6;
}

:root:root .popover {
	border: 1px solid var(--yl-border);
	border-radius: var(--yl-radius-lg);
	box-shadow: var(--yl-pop-shadow);
	background-color: var(--yl-bg);
	overflow: hidden;
}

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

:root:root .popupmenu .listing li,
:root:root .popover .menu li {
	border: 0;
}

:root:root .popupmenu .listing li > a,
:root:root .popover .menu li a {
	border-radius: 6px;
	color: var(--yl-text);
}

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

:root:root .popover .menu li a.disabled {
	color: var(--yl-faint);
}

:root:root .ui-menu .ui-state-active {
	background-color: var(--yl-accent) !important;
}

:root:root .ui-dialog {
	border: 1px solid var(--yl-border);
	border-radius: var(--yl-radius-lg);
	box-shadow: var(--yl-pop-shadow);
	overflow: hidden;
}

:root:root .ui-dialog .ui-dialog-titlebar {
	border-bottom-color: var(--yl-border-soft);
}

:root:root .ui-dialog .ui-dialog-title {
	font-weight: 600;
}

:root:root .ui-dialog .ui-dialog-buttonpane {
	border-top-color: var(--yl-border-soft);
}

:root:root #messagestack div {
	border-radius: var(--yl-radius);
}

:root:root #messagestack .alert-info.information {
	background-color: var(--yl-accent);
}