/**
 * Ada Mail — Roundcube skin
 * Extends stock `elastic` (see meta.json). This file is ONLY the reskin layer:
 * elastic's compiled CSS is pulled in below, then overridden with the Ada design tokens.
 *
 * Why an override layer instead of a fork: Roundcube core updates ship a new
 * elastic/, and this skin inherits those fixes automatically. A forked skin does not.
 *
 * Design source: "Ada Mail.dc.html" (Claude Design project 449c2e2b).
 */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
@import url("../../elastic/styles/styles.min.css");

/* ---------------------------------------------------------------- tokens */

:root {
	--bg:        #0b0b0d;
	--bg-2:      #100f13;
	--surface:   #151518;
	--surface-2: #1b1b1f;
	--surface-3: #1c1c20;

	--line:      rgba(255, 255, 255, .08);
	--line-soft: rgba(255, 255, 255, .05);

	--fg:   #f4f4f5;
	--fg-2: rgba(255, 255, 255, .72);
	--fg-3: rgba(255, 255, 255, .42);
	--fg-4: rgba(255, 255, 255, .34);

	--violet: #a78bfa;
	--pink:   #f472b6;
	--cyan:   #67e8f9;
	--green:  #34d399;
	--amber:  #fbbf24;
	--rose:   #fb7185;

	--grad:        linear-gradient(135deg, #a78bfa, #f472b6);
	--grad-border: linear-gradient(95deg, #a78bfa, #f472b6 45%, #67e8f9);
	--on-grad:     #141014;

	--radius-row:  14px;
	--radius-btn:  11px;
	--radius-icon: 9px;

	--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------- globals */

html,
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
}

body,
input,
textarea,
select,
button,
.propform,
#layout {
	font-family: var(--font);
}

a { color: #c4b5fd; }
a:hover { color: #ddd6fe; }
::selection { background: rgba(167, 139, 250, .35); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

input::placeholder,
textarea::placeholder { color: var(--fg-4); }

* { scrollbar-color: rgba(255, 255, 255, .18) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .13);
	border-radius: 99px;
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); background-clip: content-box; }

@keyframes adaIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes adaGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

#layout { background: var(--bg); }

/* ------------------------------------------------------- task rail (left) */
/* Ada keeps a slim rail so mail / contacts / settings / logout stay reachable. */

#layout-menu {
	background: var(--bg-2);
	border-right: 1px solid var(--line-soft);
}

#layout-menu .popover-header { background: transparent; border-bottom: 1px solid var(--line-soft); }

#taskmenu { background: transparent; }

#taskmenu a.button {
	color: var(--fg-3);
	background: transparent;
	border-radius: var(--radius-icon);
	transition: color .12s ease, background .12s ease;
}
#taskmenu a.button:hover { color: var(--fg); background: var(--surface-2); }
#taskmenu a.button.selected,
#taskmenu a.button.selected:hover { color: var(--fg); background: var(--surface-3); }
#taskmenu a.button.selected::before { color: var(--violet); }

/* Compose = the one gradient call-to-action, matching "Yeni mesaj". */
#taskmenu a.button.compose {
	background: var(--grad);
	color: var(--on-grad);
	border-radius: var(--radius-btn);
	margin: 6px 8px 10px;
}
#taskmenu a.button.compose:hover { filter: brightness(1.07); background: var(--grad); color: var(--on-grad); }
#taskmenu a.button.compose::before { color: var(--on-grad); }

#taskmenu a.button.logout:hover { color: var(--rose); }

/* --------------------------------------------------------- sidebar (nav) */

#layout-sidebar {
	background: var(--bg-2);
	border-right: 1px solid var(--line-soft);
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
	background: transparent;
	border-bottom: 1px solid var(--line-soft);
	color: var(--fg);
}

#layout-sidebar > .header .header-title,
#layout-list > .header .header-title,
#layout-content > .header .header-title {
	color: var(--fg);
	font-weight: 600;
	letter-spacing: -.01em;
}

#layout-sidebar > .header .username { color: var(--fg-2); font-size: 12.5px; font-weight: 500; }

#folderlist-content { background: transparent; padding: 6px 10px 10px; }

#layout-sidebar .footer,
#layout-list .footer,
#layout-content .footer {
	background: transparent;
	border-top: 1px solid var(--line-soft);
	color: var(--fg-3);
}

/* Folder rows — Ada's pill buttons with icon, label and trailing count. */

.folderlist li,
.treelist li { border: 0; }

.folderlist li a,
.treelist li a {
	color: var(--fg-2);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	padding: 8px 10px;
	margin: 1px 0;
	border: 1px solid transparent;
	transition: background .12s ease, color .12s ease;
}

.folderlist li a:hover,
.treelist li a:hover { background: var(--surface-2); color: var(--fg); }

.folderlist li.selected > a,
.treelist li.selected > a {
	background: var(--surface-3);
	border-color: var(--line);
	color: var(--fg);
	font-weight: 600;
}

.folderlist li > a::before,
.treelist li > a::before { color: var(--fg-3); opacity: .85; }
.folderlist li.selected > a::before { color: var(--violet); opacity: 1; }

/* Unread badge — gradient pill, like Ada's counts. */
.folderlist li a .unreadcount,
.treelist li a .unreadcount {
	background: var(--grad);
	color: var(--on-grad);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 1px 7px;
	min-width: 20px;
}

.folderlist li.unread > a { color: var(--fg); font-weight: 600; }

/* Quota widget in the sidebar footer. */
#quotadisplay { color: var(--fg-3); }
.quota-widget .bar { background: var(--surface-3); border-radius: 999px; }
.quota-widget .value { background: var(--grad); border-radius: 999px; }

/* ------------------------------------------------- message list (middle) */

#layout-list { background: var(--bg); }

#messagelist-header {
	background: transparent;
	border-bottom: 1px solid var(--line-soft);
	padding: 10px 14px;
	gap: 10px;
}

/* Toolbar buttons in the list header. */
#messagelist-header .toolbar a,
#layout-content .header a.button {
	color: var(--fg-2);
	border-radius: var(--radius-icon);
	transition: background .12s ease, color .12s ease;
}
#messagelist-header .toolbar a:hover,
#layout-content .header a.button:hover { background: var(--surface-3); color: var(--fg); }
#messagelist-header .toolbar a.disabled { color: var(--fg-4); }

/* Search bar — Ada's rounded field with the inline icon. */
.searchbar,
#mailsearchform {
	background: transparent;
	border: 0;
	padding: 8px 14px;
}

.searchbar input,
.searchbar > input.form-control,
#mailsearchform input {
	height: 38px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--fg);
	font-size: 13.5px;
	padding: 0 12px 0 36px;
	box-shadow: none;
}
.searchbar input:focus,
#mailsearchform input:focus {
	border-color: rgba(167, 139, 250, .55);
	background: var(--surface-2);
	color: var(--fg);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
.searchbar a.button.search::before,
.searchbar .icon.search::before { color: var(--fg-3); }
.searchbar a.button.reset { color: var(--fg-3); }

#messagelist-content { background: var(--bg); padding: 4px 12px 14px; }

/* Kill elastic's table chrome — Ada rows are free-standing cards. */
table.messagelist,
table.messagelist tbody,
table.messagelist tr,
table.messagelist td { border: 0; background: transparent; }

table.messagelist thead th {
	background: transparent;
	border-bottom: 1px solid var(--line-soft);
	color: var(--fg-3);
	font-size: 11.5px;
	font-weight: 500;
	text-transform: none;
}
table.messagelist thead th a.sortcol { color: var(--fg-3); }

/* The row itself. */
table.messagelist tr.message {
	border-radius: var(--radius-row);
	border: 1px solid transparent;
	background: transparent;
	transition: background .12s ease, border-color .12s ease;
}
table.messagelist tr.message:hover { background: var(--surface-2); }
table.messagelist tr.message.selected,
table.messagelist tr.message.focused {
	background: var(--surface-3);
	border-color: var(--line);
}
table.messagelist tr.message.selected td,
table.messagelist tr.message.focused td { color: var(--fg); }

table.messagelist tr.message td { padding: 10px 8px; vertical-align: middle; }
table.messagelist tr.message td.subject { padding-left: 4px; }

/* Sender / subject / date typography, straight from the design spec. */
table.messagelist tr.message span.fromto,
table.messagelist tr.message span.fromto .adr {
	font-size: 14px;
	font-weight: 500;
	color: var(--fg-2);
}
table.messagelist tr.message.unread span.fromto,
table.messagelist tr.message.unread span.fromto .adr { font-weight: 700; color: var(--fg); }

table.messagelist tr.message span.subject {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fg-2);
}
table.messagelist tr.message span.subject a { color: inherit; text-decoration: none; }
table.messagelist tr.message.unread span.subject,
table.messagelist tr.message.unread span.subject a { color: var(--fg); }

table.messagelist tr.message span.date { font-size: 12.5px; color: var(--fg-3); font-weight: 500; }
table.messagelist tr.message span.size { font-size: 12px; color: var(--fg-4); }

/* Sender avatar: gradient disc with the sender's initials, filled by ada.js
   (`data-ada-initial` / `data-ada-hue`). Hue is hashed from the name, so the
   same sender keeps the same colour between sessions. */
table.messagelist tr.message span.fromto::before {
	content: attr(data-ada-initial);
	display: inline-grid;
	place-items: center;
	vertical-align: middle;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	border-radius: 50%;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	color: rgba(10, 10, 12, .75);
	background: var(--grad);
}

.ada-hue-0,
[data-ada-hue="0"]::before { background: linear-gradient(135deg, #a78bfa, #f472b6) !important; }
[data-ada-hue="1"]::before { background: linear-gradient(135deg, #67e8f9, #a78bfa) !important; }
[data-ada-hue="2"]::before { background: linear-gradient(135deg, #34d399, #22d3ee) !important; }
[data-ada-hue="3"]::before { background: linear-gradient(135deg, #fbbf24, #fb7185) !important; }
[data-ada-hue="4"]::before { background: linear-gradient(135deg, #f472b6, #a78bfa) !important; }
[data-ada-hue="5"]::before { background: linear-gradient(135deg, #a78bfa, #67e8f9) !important; }

/* Status / flag icons. */
table.messagelist tr.message span.msgicon,
table.messagelist tr.message span.flag span { color: var(--fg-3); }
table.messagelist tr.message span.flag span.flagged { color: var(--amber); }
table.messagelist tr.message span.attachment span { color: var(--fg-3); }
table.messagelist tr.message.unread span.msgicon.status { color: var(--violet); }

/* Selection checkbox — Ada's rounded square that fills with the gradient. */
table.messagelist td.selection input[type="checkbox"] {
	width: 17px;
	height: 17px;
	border-radius: 5px;
	border: 1px solid var(--line);
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
}
table.messagelist td.selection input[type="checkbox"]:checked { background: var(--grad); border-color: transparent; }
table.messagelist td.selection input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid var(--on-grad);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* Empty state. */
.messagelist td.empty,
#messagelist-content .boxinformation { color: var(--fg-4); font-size: 13px; }

/* Pagination footer. */
.pagenav,
.pagenav.footer { background: transparent; color: var(--fg-3); }
.pagenav a.button { color: var(--fg-2); }
.pagenav a.button.disabled { color: var(--fg-4); }

/* ------------------------------------------------ message preview (right) */
/* Ada floats the open message as a rounded card over the list. */

#layout-content {
	background: var(--surface);
	border-left: 1px solid var(--line);
	border-top-left-radius: 20px;
	box-shadow: -24px -14px 60px rgba(0, 0, 0, .45);
	animation: adaIn .16s ease-out;
	overflow: hidden;
}

#layout-content > .header { padding: 12px 18px; }

#layout-content .header-title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--fg);
}

.iframe-wrapper { background: var(--surface); }
#messagecontframe { background: var(--surface); }

/* Message body.
   Two failed attempts are worth recording:
   1. a white "paper" sheet — readable, but a bright slab in a dark app;
   2. dark surface + forced light text — mail that brings its own light
      background then rendered light-on-light and became unreadable.
   HTML mail is authored for a light page, so render it on white as the sender
   intended and invert the whole part. Contrast is preserved by construction,
   the result reads dark, and media is inverted back so photos look right. */

#messagebody { margin: 0; padding: 0; background: transparent; }

#messagebody .message-htmlpart {
	background: #ffffff;
	color: #16161b;
	border-radius: 12px;
	padding: 14px 16px;
	filter: invert(1) hue-rotate(180deg);
}
#messagebody .message-htmlpart img,
#messagebody .message-htmlpart video,
#messagebody .message-htmlpart svg,
#messagebody .message-htmlpart canvas,
#messagebody .message-htmlpart [style*="background-image"] {
	filter: invert(1) hue-rotate(180deg);
}

/* Plain-text parts carry no sender colours, so they can simply be dark. */
#messagebody .message-part {
	background: transparent;
	color: var(--fg);
}
#messagebody .message-part pre {
	color: var(--fg);
	font-family: var(--font);
	white-space: pre-wrap;
	word-wrap: break-word;
}
#messagebody .message-part a { color: #c4b5fd; }

/* Message headers rendered inside the preview (non-iframe parts). */
#messageheader,
#partheader {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	color: var(--fg);
}
#messageheader .subject { color: var(--fg); font-weight: 600; }
#messageheader .header-links a { color: var(--fg-3); }
.message-partheaders { background: var(--surface-2); border-color: var(--line); }

#messageheader .adr,
.rcmContactAddress { color: var(--fg-2); }
#messageheader .date { color: var(--fg-3); }

/* Sender avatar placeholder ships a light grey square. */
img.contactphoto,
#messageheader .contactphoto,
.contactphoto {
	background-color: var(--surface-3) !important;
	border-radius: 50%;
	overflow: hidden;
}

/* Attachment chips. */
#attachment-list li,
.attachmentslist li {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--fg-2);
}
#attachment-list li a,
.attachmentslist li a { color: var(--fg-2); }

/* --------------------------------------------------- buttons and controls */

.btn,
button.btn { border-radius: var(--radius-btn); font-weight: 600; font-size: 13.5px; }

.btn-primary,
button.btn-primary,
.formbuttons .btn-primary {
	background: var(--grad);
	border: 0;
	color: var(--on-grad);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background: var(--grad);
	filter: brightness(1.07);
	color: var(--on-grad);
	box-shadow: none;
}

.btn-secondary,
button.btn-secondary {
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--fg-2);
}
.btn-secondary:hover { background: var(--surface-3); color: var(--fg); border-color: var(--line); }

.btn-danger { background: var(--rose); border: 0; color: var(--on-grad); }

a.button,
.toolbar a.button { color: var(--fg-2); }
a.button:hover { color: var(--fg); }
a.button.disabled { color: var(--fg-4); }

/* Floating action button (mobile compose). */
.floating-action-buttons a.button {
	background: var(--grad);
	color: var(--on-grad);
	box-shadow: 0 8px 24px rgba(167, 139, 250, .3);
}

/* ------------------------------------------------------- forms and inputs */

input.form-control,
textarea.form-control,
select.form-control,
select.custom-select,
.propform input[type="text"],
.propform input[type="password"],
.propform input[type="email"],
.propform textarea,
.propform select {
	background: var(--surface-2);
	border: 1px solid var(--line);
	color: var(--fg);
	border-radius: var(--radius-btn);
	box-shadow: none;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.custom-select:focus,
.propform input:focus,
.propform textarea:focus {
	background: var(--surface-2);
	border-color: rgba(167, 139, 250, .55);
	color: var(--fg);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}

label,
.col-form-label,
legend { color: var(--fg-2); }

fieldset,
.propform fieldset { border-color: var(--line); }

/* Toggle switches (settings). */
.custom-switch .custom-control-label::before { background: var(--surface-3); border-color: var(--line); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--grad); border-color: transparent; }
.custom-switch .custom-control-label::after { background: var(--fg-3); }
.custom-control-input:checked ~ .custom-control-label::after { background: var(--on-grad); }

/* ------------------------------------------------------------- popupmenus */

.popupmenu,
.popover,
.ui-dialog,
#rcmKSearchpane {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
	color: var(--fg);
}

.popupmenu ul.menu li a,
.popover ul.menu li a,
.menu.listing li a {
	color: var(--fg-2);
	border-radius: 10px;
	font-size: 13.5px;
}
.popupmenu ul.menu li a:hover,
.menu.listing li a:hover { background: var(--surface-3); color: var(--fg); }
.popupmenu ul.menu li a.disabled { color: var(--fg-4); }
.popupmenu ul.menu li a::before { color: var(--fg-3); }

.popupmenu h3.voice { color: var(--fg-3); }

/* Dialogs. */
.ui-dialog .ui-dialog-titlebar {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	color: var(--fg);
	border-radius: 14px 14px 0 0;
}
.ui-dialog .ui-dialog-content { background: var(--surface-2); color: var(--fg); }
.ui-dialog .ui-dialog-buttonpane { background: var(--surface-2); border-top: 1px solid var(--line); }
.ui-widget-overlay { background: rgba(0, 0, 0, .6); }

/* --------------------------------------------------------- notifications */

#messagestack div {
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--surface-3);
	color: var(--fg);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
	font-size: 13px;
}
#messagestack div.error { border-color: rgba(251, 113, 133, .5); }
#messagestack div.confirmation { border-color: rgba(52, 211, 153, .5); }
#messagestack div.loading { color: var(--fg-2); }

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

#compose-content,
#compose-headers,
.compose-mode #layout-content { background: var(--surface); }

#composebody,
#compose-content textarea {
	background: var(--surface);
	color: var(--fg);
	border-color: var(--line);
}

#compose-headers td,
#compose-headers input { color: var(--fg); }

.ui-autocomplete,
#rcmKSearchpane ul li { background: var(--surface-2); color: var(--fg-2); }
#rcmKSearchpane ul li.selected { background: var(--surface-3); color: var(--fg); }

/* Recipient pill field, input-group addons and the plain-text editor toolbar
   all ship light (#fff / #f1f3f4) and out-specify the generic input rules. */
ul.recipient-input,
ul.form-control.recipient-input,
.recipient-input {
	background-color: var(--surface-2) !important;
	border: 1px solid var(--line) !important;
	color: var(--fg) !important;
}
.recipient-input input,
.recipient-input .input-group input {
	background: transparent !important;
	border: 0 !important;
	color: var(--fg) !important;
}
.recipient-input li.recipient {
	background: var(--surface-3) !important;
	border: 1px solid var(--line) !important;
	border-radius: 999px;
	color: var(--fg) !important;
}
.recipient-input li.recipient a.button.icon.remove { color: var(--fg-3) !important; }

.input-group-text,
a.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
	background-color: var(--surface-3) !important;
	border: 1px solid var(--line) !important;
	color: var(--fg-2) !important;
}
a.input-group-text::before { color: var(--fg-2) !important; }

.editor-toolbar {
	background-color: var(--surface-2) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-btn) var(--radius-btn) 0 0;
	color: var(--fg-2) !important;
}
.editor-toolbar a,
.editor-toolbar a::before,
.editor-toolbar select { color: var(--fg-2) !important; }

/* Attachment dropzone. */
#compose-attachments .dropzone,
.file-upload .dropzone,
#uploadform .dropzone {
	background: var(--surface-2) !important;
	border: 1px dashed var(--line) !important;
	border-radius: 14px;
	color: var(--fg-3) !important;
}

/* TinyMCE shell — keep the chrome dark; body colours live in embed.css. */
.tox.tox-tinymce { border: 1px solid var(--line) !important; border-radius: var(--radius-btn); }
.tox .tox-toolbar__primary,
.tox .tox-editor-header { background: var(--surface-2) !important; }
.tox .tox-tbtn { color: var(--fg-2) !important; }
.tox .tox-tbtn:hover { background: var(--surface-3) !important; }

/* ---------------------------------------------------------- settings task */

#settings-menu li a,
.listing li a { color: var(--fg-2); border-radius: 10px; }
#settings-menu li.selected a,
.listing li.selected > a { background: var(--surface-3); color: var(--fg); }

/* Table-based listings (settings sections, folder manager, identities,
   responses, contacts) keep elastic's slate text on light rules. The
   :not(.messagelist) guard keeps the mail list's own rules above intact. */
table.listing:not(.messagelist) td,
table.listing:not(.messagelist) th {
	color: var(--fg-2) !important;
	border-bottom-color: var(--line-soft) !important;
	background-color: transparent !important;
}
table.listing:not(.messagelist) td::before,
table.listing:not(.messagelist) td > span::before { color: var(--fg-3) !important; }

table.listing:not(.messagelist) tr:hover td { background-color: var(--surface-2) !important; }

table.listing:not(.messagelist) tr.selected td,
table.listing:not(.messagelist) tr.focused td {
	background-color: var(--surface-3) !important;
	color: var(--fg) !important;
}
table.listing:not(.messagelist) tr.selected td::before { color: var(--violet) !important; }

/* Same treatment for the record/box headings these screens use. */
.boxtitle,
.record .title,
fieldset legend { color: var(--fg) !important; }

#preferences-frame,
#folder-details,
#identity-details { background: var(--surface); }

table.propform td,
table.propform th { color: var(--fg-2); border-color: var(--line); }

/* ---------------------------------------------------------- address book */

#contacts-table td,
.contactslist li a { color: var(--fg-2); }
#contact-frame { background: var(--surface); }
.contactfieldgroup { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }

/* ---------------------------------------------------------------- login */

#layout.login,
body.task-login,
body.task-login #layout {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(103, 232, 249, .10), transparent 55%),
		radial-gradient(100% 80% at 0% 100%, rgba(167, 139, 250, .12), transparent 55%),
		var(--bg);
}

.task-login #layout-content,
#login-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

#login-form .box-inner { background: transparent; }
#login-form #rcmloginsubmit,
#login-form .formbuttons .btn-primary {
	background: var(--grad);
	border: 0;
	color: var(--on-grad);
	height: 42px;
	border-radius: 12px;
	font-weight: 600;
}
#login-form input { background: var(--surface-2); border: 1px solid var(--line); color: var(--fg); }
#login-form .product-name { color: var(--fg); font-weight: 600; letter-spacing: -.01em; }

/* --------------------------------------------------- icon colour override */
/* Elastic compiles its palette to literal hex (#2c363a for icons/labels), and
   those rules out-specify a plain skin override. Forcing the few colour
   properties is smaller and steadier than mirroring every elastic selector. */

#layout a.button,
#layout a.button::before,
#layout a.button .inner,
#layout .header a,
#layout .header a::before,
#layout .toolbar a,
#layout .toolbar a::before,
#layout .toolbar a .inner,
.popupmenu ul.menu li a,
.popupmenu ul.menu li a::before,
.menu.listing li a::before,
.pagenav a.button,
.pagenav a.button::before {
	color: var(--fg-2) !important;
}

#layout a.button:hover,
#layout a.button:hover::before,
#layout .toolbar a:hover,
#layout .toolbar a:hover::before,
.popupmenu ul.menu li a:hover,
.popupmenu ul.menu li a:hover::before {
	color: var(--fg) !important;
}

#layout a.button.disabled,
#layout a.button.disabled::before,
#layout .toolbar a.disabled,
#layout .toolbar a.disabled::before,
.popupmenu ul.menu li a.disabled,
.popupmenu ul.menu li a.disabled::before {
	color: var(--fg-4) !important;
}

/* Task rail: compose stays gradient, selected task stays bright, logout reads red. */
#taskmenu a.button.compose,
#taskmenu a.button.compose::before,
#taskmenu a.button.compose .inner { color: var(--on-grad) !important; }

#taskmenu a.button.selected,
#taskmenu a.button.selected::before,
#taskmenu a.button.selected .inner { color: var(--fg) !important; }
#taskmenu a.button.selected::before { color: var(--violet) !important; }

#taskmenu a.button.logout:hover,
#taskmenu a.button.logout:hover::before { color: var(--rose) !important; }

/* Folder icons follow the folder text, not elastic's slate. */
.folderlist li > a::before,
.treelist li > a::before { color: var(--fg-3) !important; }
.folderlist li.selected > a,
.folderlist li.selected > a::before,
.treelist li.selected > a,
.treelist li.selected > a::before { color: var(--fg) !important; }
.folderlist li.selected > a::before { color: var(--violet) !important; }

/* Elastic paints several panes white further down its sheet. */
#layout-content,
#layout-content .iframe-wrapper,
#messagecontframe,
#messageheader,
#preferences-frame,
#contact-frame,
#folder-details,
#identity-details { background-color: var(--surface) !important; }

#layout-list,
#messagelist-content { background-color: var(--bg) !important; }

#layout-sidebar,
#layout-menu { background-color: var(--bg-2) !important; }

/* Panel chrome — elastic paints these #f4f4f4 / #fff and out-specifies a plain
   override, which left light bars top and bottom of every column. */
#layout > div > .header,
#messagelist-header,
#layout > div > .footer,
#layout > div > .footer.small,
.pagenav,
.pagenav.menu.footer,
#layout .listing-hover-menu,
.listing-hover-menu {
	background-color: var(--bg-2) !important;
	border-color: var(--line-soft) !important;
	color: var(--fg-2) !important;
}

.listing-hover-menu {
	background-color: var(--surface-3) !important;
	border: 1px solid var(--line) !important;
	border-radius: 10px;
	color: var(--fg-2) !important;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
.listing-hover-menu a,
.listing-hover-menu a::before { color: var(--fg-2) !important; }

input.rcpagejumper,
.rcpagejumper {
	background-color: var(--surface-2) !important;
	border: 1px solid var(--line) !important;
	color: var(--fg) !important;
}

/* Elastic's own selected/hover backgrounds are pale blue and survive a plain
   override, which left white text on near-white. Force the dark equivalents. */
.folderlist li > a,
.treelist li > a,
.listing li > a { background-color: transparent !important; }

.folderlist li > a:hover,
.treelist li > a:hover,
.listing li > a:hover { background-color: var(--surface-2) !important; }

.folderlist li.selected > a,
.treelist li.selected > a,
.listing li.selected > a,
#settings-menu li.selected > a { background-color: var(--surface-3) !important; }

/* Elastic tints the cells, not the row, on hover/select — so the row override
   alone left a pale blue band under white text. Clear the cells too. */
table.messagelist tr.message,
table.messagelist tr.message > td { background-color: transparent !important; }

table.messagelist tr.message:hover,
table.messagelist tr.message:hover > td { background-color: var(--surface-2) !important; }

table.messagelist tr.message.selected,
table.messagelist tr.message.selected > td,
table.messagelist tr.message.focused,
table.messagelist tr.message.focused > td { background-color: var(--surface-3) !important; }

table.messagelist tr.message.selected span.subject,
table.messagelist tr.message.selected span.subject a,
table.messagelist tr.message.selected span.fromto,
table.messagelist tr.message.selected span.fromto .adr { color: var(--fg) !important; }

/* Bootstrap alerts (remote-image notice, errors, confirmations) ship dark
   slate text — invisible on this palette. Recolour per severity. */
.ui.alert,
.boxwarning,
.boxerror,
.boxinformation,
.boxconfirmation {
	border-radius: 12px;
	border: 1px solid var(--line);
	color: var(--fg) !important;
}
.ui.alert.alert-warning,
.boxwarning {
	background-color: rgba(251, 191, 36, .12) !important;
	border-color: rgba(251, 191, 36, .38) !important;
	color: #fde68a !important;
}
.ui.alert.alert-danger,
.boxerror {
	background-color: rgba(251, 113, 133, .12) !important;
	border-color: rgba(251, 113, 133, .38) !important;
	color: #fecdd3 !important;
}
.ui.alert.alert-success,
.boxconfirmation {
	background-color: rgba(52, 211, 153, .12) !important;
	border-color: rgba(52, 211, 153, .38) !important;
	color: #a7f3d0 !important;
}
.ui.alert.alert-info,
.boxinformation {
	background-color: rgba(103, 232, 249, .10) !important;
	border-color: rgba(103, 232, 249, .32) !important;
	color: #a5f3fc !important;
}
.ui.alert a,
.ui.alert .btn { color: inherit; }

/* ------------------------------------------------------- column proportions */
/* Ada gives the list most of the width and shows the message as a card beside
   it. Elastic ships a narrow list, so rebalance: list flexes, card is bounded. */

/* Mail only. Unscoped, this let the settings/addressbook list eat the whole
   row and pushed their content pane off screen. */
html:not(.iframe) body.task-mail.action-none #layout-list {
	flex: 1 1 auto !important;
	max-width: none !important;
	min-width: 0;
}

/* (Removed: the old three-column width for #layout-content. It was unscoped,
   so it also applied INSIDE the preview iframe — whose root is #layout-content
   — and squeezed every message into a ~520px column. The overlay rules below
   govern the card now.) */

/* --------------------------------------------------- single-line list rows */
/* Ada's row is one line: avatar · sender · subject — snippet · time.
   In widescreen elastic packs sender/date/size/subject into one td.subject and
   stacks them; flex + explicit order flattens that to a single line. Flex (not
   grid) because the cell picks up extra spans from plugins and flags — those
   just flow to the end here instead of spawning stray grid columns.
   Gated at 1280px, where the flex maths above leaves the list ~560px+; below
   that elastic's stacked row is the readable option, so it is left alone. */

@media screen and (min-width: 1280px) {
	table.messagelist tr.message td.subject {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		gap: 12px;
		height: auto;
		min-width: 0;
	}

	/* anything unexpected in the cell lands after the three known parts */
	table.messagelist tr.message td.subject > * { order: 9; }

	table.messagelist tr.message td.subject > span.fromto {
		order: 1;
		flex: 0 0 170px;
		display: flex !important;
		align-items: center;
		min-width: 0;
		max-width: 170px;
		float: none;
		position: static;
	}
	table.messagelist tr.message td.subject > span.fromto .adr {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	table.messagelist tr.message td.subject > span.subject {
		order: 2;
		flex: 1 1 auto;
		display: flex !important;
		align-items: center;
		gap: 8px;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		float: none;
		position: static;
		width: auto;
	}
	table.messagelist tr.message td.subject > span.subject a {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	table.messagelist tr.message td.subject > span.date {
		order: 3;
		flex: none;
		margin-left: auto;
		float: none;
		position: static;
		width: auto;
	}

	table.messagelist tr.message td.subject > span.size { display: none !important; }

	/* Elastic stacks the flag and attachment markers because its row is two
	   lines tall. On a one-line row they have to sit side by side, otherwise
	   the flags cell alone forces the row back to ~66px. */
	/* subject takes every spare pixel, flags shrink-wraps (the 100%/1% pair is
	   the standard auto-layout trick — `auto` on flags lets it eat the row) */
	table.messagelist tr.message td.subject { width: 100%; }

	table.messagelist tr.message td.flags {
		white-space: nowrap;
		vertical-align: middle;
		width: 1%;
		min-width: 46px;
		padding-right: 10px;
		text-align: right;
	}
	table.messagelist tr.message td.flags > span {
		display: inline-block !important;
		vertical-align: middle;
		float: none !important;
		position: static !important;
		width: 20px;
		height: 20px;
		line-height: 20px;
	}

	table.messagelist tr.message { height: auto; }
	table.messagelist tr.message td { padding-top: 9px; padding-bottom: 9px; }
}

/* ------------------------------------------------------------ responsive */

@media screen and (max-width: 768px) {
	#layout-content {
		border-radius: 0;
		border-left: 0;
		box-shadow: none;
	}
	#messagelist-content { padding: 4px 8px 80px; }
	table.messagelist tr.message span.fromto::before { width: 24px; height: 24px; margin-right: 8px; }
}


/* ==========================================================================
   Ada structure (merged from ada.css: a nested @import gets no ?s= cache
   buster, so edits went stale in browsers). Keep this in styles.css.
   ========================================================================== */


/* Elastic's icon rail is redundant once the Ada nav carries brand, account,
   folders, contacts and settings. It stays in the DOM (elastic's ui.js drives
   it) and stays visible on small screens, where it is the only task nav. */
/* Hide the rail ONLY where the Ada nav actually replaces it. mail.html has the
   Ada nav; compose.html, settings and addressbook do not, and hiding the rail
   there strands the user with no task navigation at all. :has() keys off the
   real DOM instead of guessing from body classes; browsers without :has()
   simply keep the rail, which is harmless. */
@media screen and (min-width: 1024px) {
	#layout:has(#layout-sidebar.ada-nav) #layout-menu { display: none !important; }
}

/* ---------------------------------------------------------------- Ada nav */

#layout-sidebar.ada-nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 12px;
	background: var(--bg-2) !important;
	border-right: 1px solid var(--line-soft);
	overflow-x: hidden;
}

.ada-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 6px 0;
	flex: none;
}
.ada-mark {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	flex: none;
	color: var(--fg);
}
.ada-wordmark {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--fg);
}

.ada-account {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 0 6px;
	flex: none;
	min-width: 0;
}
.ada-account-avatar {
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 600;
	color: rgba(10, 10, 12, .75);
	background: var(--grad);
}
.ada-account-avatar::before { content: attr(data-ada-initial); }
.ada-account-mail {
	font-size: 12.5px;
	color: var(--fg-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.ada-iconbtn {
	margin-left: auto;
	width: 20px;
	height: 20px;
	display: grid !important;
	place-items: center;
	border-radius: 6px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--fg-3) !important;
	line-height: 1;
	padding: 0;
	flex: none;
	cursor: pointer;
}
.ada-iconbtn:hover { background: var(--surface-2); color: var(--fg) !important; }
.ada-iconbtn .inner { display: none; }
.ada-iconbtn::before { font-size: 12px; }
.ada-logout:hover { color: var(--rose) !important; border-color: rgba(251, 113, 133, .4); }

.ada-sechead {
	display: flex;
	align-items: center;
	padding: 0 8px 2px;
	flex: none;
}
.ada-sechead > span { font-size: 12px; color: var(--fg-3); }

#layout-sidebar.ada-nav #folderlist-content {
	flex: 0 1 auto;
	padding: 0;
	overflow-y: auto;
	min-height: 0;
}

.ada-nav .folderlist li > a,
.ada-nav .treelist li > a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fg-2);
}

/* Etiketler — colour dot + label, each wired to a real IMAP filter by ada.js. */
.ada-labels {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: none;
}
.ada-label {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fg-2);
	text-decoration: none;
	cursor: pointer;
}
.ada-label:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.ada-label.is-active {
	background: var(--surface-3);
	border-color: var(--line);
	color: var(--fg);
}
.ada-label i { width: 9px; height: 9px; border-radius: 3px; flex: none; display: block; }

.ada-pro {
	margin-top: auto;
	flex: none;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 16px;
	color: var(--fg);
	background:
		radial-gradient(120% 120% at 100% 100%, rgba(103, 232, 249, .22), rgba(167, 139, 250, .10) 45%, rgba(255, 255, 255, .04) 100%),
		var(--surface-2);
	border: 1px solid var(--line-soft);
}
.ada-pro-title { font-size: 14px; font-weight: 600; margin-top: 10px; }
.ada-pro-desc { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); margin-top: 4px; }

.ada-navfoot { flex: none; display: flex; flex-direction: column; gap: 6px; }

a.ada-navbtn {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--fg-2) !important;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
}
a.ada-navbtn:hover { background: var(--surface-3); color: var(--fg) !important; }
a.ada-navbtn::before { font-size: 15px; opacity: .8; }
a.ada-navbtn .inner { display: inline; font-size: 13px; }

/* ------------------------------------------------------------ Ada toolbar */

#messagelist-header.ada-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	padding: 12px 16px;
	background: var(--bg) !important;
	border-bottom: 1px solid var(--line-soft) !important;
	min-height: 62px;
}

.ada-scopes { display: flex; align-items: center; gap: 8px; flex: none; }

.ada-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	color: var(--fg-2);
	border: 1px solid var(--line);
	background: var(--surface-2);
}
.ada-chip:hover { color: var(--fg); text-decoration: none; }
.ada-chip.is-active {
	color: var(--fg);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
		var(--grad-border) border-box;
}

a.ada-compose {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border-radius: var(--radius-btn);
	color: var(--fg) !important;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	flex: none;
	text-decoration: none;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--surface), var(--surface)) padding-box,
		var(--grad-border) border-box;
}
a.ada-compose:hover { filter: brightness(1.12); text-decoration: none; }
a.ada-compose::before { font-size: 15px; }
a.ada-compose .inner { display: inline; }

/* The mock has ONE toolbar row: chips · search · Yeni mesaj · actions.
   The search form has to stay a DOM sibling of the header (elastic's ui.js
   rewrites header children into its own menu), so lift it into the same band
   with absolute positioning instead of moving it in the template. */
html:not(.iframe) #layout-list { position: relative; }

html:not(.iframe) body.task-mail #layout-list > .searchbar {
	position: absolute !important;
	/* Anchor from the RIGHT and give an explicit width. With left+right+max-width
	   together the box stays left-anchored and `right` is ignored, so the field
	   ran under the utility icons. 285px clears them plus the Ada AI pill. */
	top: 14px;
	left: auto;
	right: 285px;
	width: min(520px, 34vw);
	z-index: 3;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	min-width: 0;
}
html:not(.iframe) #layout-list > .searchbar input {
	width: 100% !important;
	height: 38px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--fg);
	font-size: 13.5px;
	padding: 0 34px 0 36px;
	box-sizing: border-box;
}

/* Below ~1500px the row cannot hold all four groups; drop the search to its
   own line rather than letting it collide with the action icons. */
@media screen and (max-width: 1499px) {
	html:not(.iframe) body.task-mail #layout-list > .searchbar {
		position: static !important;
		width: auto !important;
		padding: 0 16px 10px !important;
	}
}

/* ---------------------------------------------------------- Ada assistant */

#ada-ai {
	flex: 0 0 clamp(280px, 22%, 360px);
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var(--bg);
	border-left: 1px solid var(--line-soft);
	padding: 14px 14px 16px;
	gap: 12px;
}

.ada-ai-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 12.5px;
	color: var(--fg-3);
}
.ada-ai-soon {
	margin-left: auto;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fg-4);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 2px 8px;
}

.ada-ai-body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	color: var(--fg-3);
}
.ada-ai-mark { color: var(--violet); opacity: .8; }
.ada-ai-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--fg-2); }

.ada-ai-foot { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ada-ai-input {
	width: 100%;
	resize: none;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--fg-3);
	font-family: var(--font);
	font-size: 13px;
	padding: 12px 14px;
	cursor: not-allowed;
	box-sizing: border-box;
}
.ada-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ada-ai-chip {
	font-size: 12px;
	color: var(--fg-3);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 11px;
	background: var(--surface-2);
}

@media screen and (max-width: 1279px) {
	#ada-ai { display: none; }
}

/* ------------------------------------------------- open / closed message */
/* Ada shows the message as a card only while one is open; otherwise the list
   runs full width. ada.js toggles body.ada-open from the list selection. */
@media screen and (min-width: 1024px) {
	/* NOTE: do NOT display:none the closed card. Elastic decides whether a
	   preview pane exists by testing #layout-content visibility at click time;
	   hidden, it stops loading messages into the iframe entirely. The card is
	   always laid out and only fades/slides, which keeps it :visible. */
}

/* Toolbar leftovers from elastic (select / threads / options / refresh) are
   not in the design's toolbar. Keep them reachable but compact and to the
   right, so the row reads as chips + search + Yeni mesaj like the mock. */
#messagelist-header.ada-toolbar .toolbar.menu {
	margin-left: auto;
	gap: 2px;
}
#messagelist-header.ada-toolbar .toolbar.menu a,
#messagelist-header.ada-toolbar a.toolbar-button.refresh {
	width: 34px;
	height: 34px;
	min-width: 0;
	padding: 0;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-icon);
	font-size: 0;
}
#messagelist-header.ada-toolbar .toolbar.menu a::before,
#messagelist-header.ada-toolbar a.toolbar-button.refresh::before {
	font-size: 15px;
	margin: 0;
}
#messagelist-header.ada-toolbar .toolbar.menu a .inner,
#messagelist-header.ada-toolbar a.toolbar-button.refresh .inner {
	display: none !important;
}
#messagelist-header.ada-toolbar .toolbar.menu a:hover,
#messagelist-header.ada-toolbar a.toolbar-button.refresh:hover {
	background: var(--surface-3);
}
#messagelist-header.ada-toolbar .header-title { display: none; }

/* Nav icon buttons keep elastic's icon font but Ada's 20px square shell. */
.ada-iconbtn.button.icon {
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
}
.ada-iconbtn.button.icon::before {
	font-size: 11px !important;
	margin: 0 !important;
	width: auto !important;
}

/* Menu list items inside the toolbar keep elastic's #f1f3f4 divider, which
   reads as a bright hairline on this palette. */
#messagelist-header li,
#messagelist-header ul li,
.toolbar.menu li,
.popupmenu ul.menu li { border-bottom-color: var(--line-soft) !important; }

/* ==========================================================================
   Corrections against the design source (Ada Mail.dc.html):
   - navBtn():   padding 8px 10px, radius 10, gap 10, 13.5px/500,
                 active = surface-3 + 1px var(--line) + 600. No gradient.
   - counts:     plain 11.5px var(--fg-3) text, NOT a gradient badge.
   - cardStyle:  absolute overlay, left:52 top:10, radius 20 top-left only,
                 shadow -24px -14px 60px, animation adaIn .18s.
   ========================================================================== */

:root {
	--ada-nav-w: 200px;
	--ada-ai-w:  320px;
	--ada-card-offset: 52px;
	--ada-header-h: 58px;
}

/* ------------------------------------------------------- nav proportions */

#layout-sidebar.ada-nav {
	flex: 0 0 var(--ada-nav-w) !important;
	width: var(--ada-nav-w) !important;
	max-width: var(--ada-nav-w) !important;
	min-width: 0 !important;
	gap: 16px;
}

#ada-ai {
	flex: 0 0 var(--ada-ai-w) !important;
	width: var(--ada-ai-w) !important;
}

.ada-sechead { padding: 0 8px 6px; }

/* Folder rows, verbatim from navBtn(). */
.ada-nav .folderlist li > a,
.ada-nav .treelist li > a,
.ada-label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--fg-2) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-align: left;
	margin: 0 !important;
	line-height: 1.25;
}

.ada-nav .folderlist li > a:hover,
.ada-nav .treelist li > a:hover,
.ada-label:hover { background: var(--surface-2) !important; color: var(--fg) !important; }

.ada-nav .folderlist li.selected > a,
.ada-nav .treelist li.selected > a,
.ada-label.is-active {
	background: var(--surface-3) !important;
	border-color: var(--line) !important;
	color: var(--fg) !important;
	font-weight: 600 !important;
}

/* Elastic's icon font stands in for the design's line icons: same 17px slot,
   same .75 opacity, so the row rhythm matches even though the glyphs differ. */
.ada-nav .folderlist li > a::before,
.ada-nav .treelist li > a::before {
	width: 17px !important;
	min-width: 17px !important;
	margin: 0 !important;
	font-size: 15px !important;
	text-align: center;
	opacity: .75;
	color: var(--fg-2) !important;
}
.ada-nav .folderlist li.selected > a::before,
.ada-nav .treelist li.selected > a::before { opacity: 1; color: var(--fg) !important; }

/* Counts are plain grey text in the design — the gradient badge was wrong. */
.ada-nav .folderlist li a .unreadcount,
.ada-nav .treelist li a .unreadcount {
	margin-left: auto;
	background: none !important;
	color: var(--fg-3) !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	min-width: 0 !important;
	border-radius: 0 !important;
}

.ada-nav .folderlist li.unread > a { font-weight: 500 !important; }
.ada-nav .folderlist li.selected.unread > a { font-weight: 600 !important; }

/* --------------------------------------- message card as an overlay panel */
/* The design floats the open message over the list and animates it up; it is
   not a third column. Absolute against #layout (no DOM wrapper — elastic's
   ui.js selects `#layout > div`, so an extra element would break it). */

@media screen and (min-width: 1024px) {
	#layout { position: relative; }

	/* html:not(.iframe) is essential: the preview iframe is itself a Roundcube
	   page whose root is #layout-content, so an unscoped rule hid the message
	   inside its own frame. Roundcube marks framed documents with html.iframe. */
	html:not(.iframe) body.task-mail.action-none #layout-content {
		position: absolute !important;
		left: calc(var(--ada-nav-w) + var(--ada-card-offset)) !important;
		right: var(--ada-ai-w) !important;
		top: calc(var(--ada-header-h) + 10px) !important;
		bottom: 0 !important;
		width: auto !important;
		max-width: none !important;
		flex: none !important;
		z-index: 5;

		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow: hidden;

		background: var(--surface) !important;
		border: 1px solid var(--line);
		border-right: 0;
		border-bottom: 0;
		border-radius: 20px 0 0 0;
		box-shadow: -24px -14px 60px rgba(0, 0, 0, .45);

		opacity: 0;
		transform: translateY(10px);
		pointer-events: none;
		transition: opacity .18s ease-out, transform .18s ease-out;
	}

	html:not(.iframe) body.task-mail.action-none.ada-open #layout-content {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	/* List keeps its full width underneath, so the card reads as an overlay. */
	html:not(.iframe) body.task-mail.action-none #layout-list {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Elastic's drag-to-resize would fight the fixed geometry. */
	html:not(.iframe) body.task-mail.action-none #layout-list > .column-resizer,
	html:not(.iframe) body.task-mail.action-none #layout-sidebar > .column-resizer { display: none !important; }
}

@media screen and (max-width: 1279px) {
	:root { --ada-ai-w: 0px; }
}

/* Card close button — the design's X. Elastic ships no desktop close, so this
   is skin-provided; adaCloseCard() clears the list selection. */
html:not(.iframe) a.ada-close {
	width: 32px;
	height: 32px;
	display: grid !important;
	place-items: center;
	flex: none;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	margin-right: 4px;
	text-decoration: none;
}
html:not(.iframe) a.ada-close:hover { background: var(--surface-2); color: var(--fg) !important; }
html.iframe a.ada-close { display: none !important; }

/* Attachment filenames read a touch brighter than body meta text. */
#attachment-list li a.filename,
.attachmentslist li a.filename { color: var(--fg) !important; }

/* ---------------------------------------------- message card header (Ada) */
/* Elastic renders these as wide icon-over-label tiles centred in the bar. The
   design uses small square icon buttons grouped left and right, so strip the
   labels and size them like the rest of the Ada chrome. */

html:not(.iframe) #layout-content > .header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	min-height: var(--ada-header-h);
	background: var(--surface) !important;
	border-bottom: 1px solid var(--line) !important;
}

html:not(.iframe) #layout-content > .header a.button,
html:not(.iframe) #layout-content > .header .toolbar a {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	font-size: 0 !important;
}
html:not(.iframe) #layout-content > .header a.button::before,
html:not(.iframe) #layout-content > .header .toolbar a::before {
	font-size: 15px !important;
	margin: 0 !important;
	width: auto !important;
}
html:not(.iframe) #layout-content > .header a .inner { display: none !important; }
html:not(.iframe) #layout-content > .header a.button:hover,
html:not(.iframe) #layout-content > .header .toolbar a:hover { background: var(--surface-2); }

/* "Diğer" and the reply-split arrows sit at the right, like the mock. */
html:not(.iframe) #layout-content > .header .toolbar { margin-left: auto; gap: 6px; display: flex; }

/* ------------------------------------------------- Ada assistant toggle */
/* The mock has an "Ada AI" pill in the toolbar. Making it a real toggle keeps
   the panel from permanently eating 320px while it has no backend. */

html:not(.iframe) body.ada-ai-off #ada-ai { display: none !important; }
/* Must out-specify the overlay rule, which carries two classes
   (body.task-mail.action-none) — otherwise the card keeps a 320px gap
   on the right with no panel in it and the list's dates peek out. */
html:not(.iframe) body.task-mail.action-none.ada-ai-off #layout-content { right: 0 !important; }

a.ada-ai-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px 0 10px;
	border-radius: 999px;
	flex: none;
	white-space: nowrap;
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	margin-left: 8px;
	border: 1px solid transparent;
	background: var(--grad);
	color: var(--on-grad) !important;
}
a.ada-ai-toggle:hover { filter: brightness(1.07); text-decoration: none; }

body.ada-ai-off a.ada-ai-toggle {
	background: var(--surface-2);
	border-color: var(--line);
	color: var(--fg-2) !important;
}

/* Elastic's mobile back-arrow is redundant next to Ada's close button. */
html:not(.iframe) #layout-content > .header a.back-list-button { display: none !important; }

/* Sender avatar: Roundcube serves a grey person placeholder. Render it as an
   Ada gradient disc instead (initials would need per-message JS in the frame). */
#messageheader .contactphoto,
img.contactphoto {
	background: linear-gradient(135deg, #a78bfa, #f472b6) !important;
	border-radius: 50%;
	overflow: hidden;
	object-fit: cover;
}
#messageheader .contactphoto[src*="pixel"],
#messageheader .contactphoto:not([src*="_action=photo"]) { opacity: .25; }

/* ==========================================================================
   Toolbar rows that elastic's ui.js rebuilds.
   It converts the `.toolbar` DIV in each header into
   `UL.menu.toolbar.listing.iconized` (#toolbar-menu in the card header,
   #toolbar-list-menu in the list header). Rules written against `.toolbar a`
   never matched the real `ul > li > a`, so the items kept elastic's LIST
   styling and grew an 81px-tall block inside a 58px header.
   ========================================================================== */

html:not(.iframe) #layout-content > .header ul#toolbar-menu,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	position: static !important;
	width: auto !important;
	overflow: visible !important;
}

html:not(.iframe) #layout-content > .header ul#toolbar-menu > li,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li {
	display: flex !important;
	align-items: center;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
}

html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	font-size: 0 !important;
	line-height: 1 !important;
}
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a::before,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a::before {
	font-size: 15px !important;
	margin: 0 !important;
	width: auto !important;
	color: var(--fg-2) !important;
}
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a:hover,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a:hover { background: var(--surface-2); }
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a.disabled,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a.disabled,
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a.disabled::before { color: var(--fg-4) !important; opacity: .55; }

html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a .inner,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a .inner { display: none !important; }

/* Split buttons (reply-all / forward) carry a dropdown arrow beside them. */
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li > a.dropdown,
html:not(.iframe) #messagelist-header ul#toolbar-list-menu > li > a.dropdown {
	width: 18px !important;
	border-left: 0;
	border-radius: 0 var(--radius-icon) var(--radius-icon) 0;
	margin-left: -2px !important;
}
html:not(.iframe) #layout-content > .header ul#toolbar-menu > li.spacer { width: 10px !important; }

/* ------------------------------------------------- list toolbar ordering */
/* The mock ends the row with the Ada AI pill, so push the utility icons in
   front of it and let the pill sit hard right. */

html:not(.iframe) #messagelist-header.ada-toolbar .ada-scopes  { order: 1; }
html:not(.iframe) #messagelist-header.ada-toolbar .ada-compose { order: 2; }
html:not(.iframe) #messagelist-header.ada-toolbar ul#toolbar-list-menu { order: 8; margin-left: auto !important; }
html:not(.iframe) #messagelist-header.ada-toolbar a.refresh { order: 9; }
html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button { order: 10; }
html:not(.iframe) #messagelist-header.ada-toolbar .ada-ai-toggle { order: 11; margin-left: 8px; }

html:not(.iframe) #messagelist-header.ada-toolbar a.refresh {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
}

/* Card header: actions hug the right, close stays left. */
/* !important: the shared toolbar rule above sets margin:0 !important. */
html:not(.iframe) #layout-content > .header ul#toolbar-menu { margin-left: auto !important; }
html:not(.iframe) #layout-content > .header a.toolbar-menu-button { margin-left: 6px !important; }

/* Breathing room between the search field, the utility icons and the pill. */
html:not(.iframe) #messagelist-header.ada-toolbar ul#toolbar-list-menu { margin-left: auto !important; gap: 6px; }
html:not(.iframe) #messagelist-header.ada-toolbar a.refresh { margin-left: 6px; }

/* ----------------------------------------- collapse list utilities into "⋯" */
/* The mock's toolbar ends with the Ada AI pill and nothing else. Elastic's
   select / threads / options icons are real functions though, so fold them into
   the single menu button elastic already ships (it builds a popover on desktop
   too — verified). The popover marks those three hidden-big/hidden-large
   because they normally render inline, so re-show them there. */

html:not(.iframe) #messagelist-header.ada-toolbar ul#toolbar-list-menu { display: none !important; }

html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button {
	display: grid !important;
	order: 10;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin-left: auto;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-icon);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	font-size: 0 !important;
}
html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button::before {
	font-size: 15px !important;
	margin: 0 !important;
	color: var(--fg-2) !important;
}
html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button .inner { display: none !important; }
html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button:hover { background: var(--surface-2); }

/* Refresh now sits directly before the menu button. */
html:not(.iframe) #messagelist-header.ada-toolbar a.refresh { order: 9; margin-left: auto; }
html:not(.iframe) #messagelist-header.ada-toolbar a.toolbar-menu-button { margin-left: 6px; }

/* Items elastic hides in the popover because they normally render inline. */
.popover a.hidden-big,
.popover a.hidden-large,
.popover li.hidden-big,
.popover li.hidden-large { display: flex !important; }

/* ------------------------------------------------------- popover menus */
/* The "⋯" popover clones the toolbar, ids and all. The header rules above are
   scoped to the headers so the clone is free to render as a normal vertical
   menu with labels instead of a cramped icon strip. */

.popover .toolbar,
.popover ul.menu.toolbar {
	display: block !important;
	width: auto !important;
	height: auto !important;
	padding: 4px !important;
	margin: 0 !important;
	background: transparent !important;
}
.popover ul.menu.toolbar > li {
	display: block !important;
	width: 100% !important;
	border: 0 !important;
	margin: 0 !important;
}
.popover ul.menu.toolbar > li > a,
.popover ul.menu > li > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	height: auto !important;
	min-height: 36px;
	padding: 8px 12px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 10px;
	background: transparent !important;
	color: var(--fg-2) !important;
	font-size: 13.5px !important;
	text-align: left;
	white-space: nowrap;
}
.popover ul.menu.toolbar > li > a::before,
.popover ul.menu > li > a::before {
	font-size: 15px !important;
	width: 18px !important;
	text-align: center;
	margin: 0 !important;
}
.popover ul.menu.toolbar > li > a .inner,
.popover ul.menu > li > a .inner { display: inline !important; font-size: 13.5px; }
.popover ul.menu.toolbar > li > a:hover { background: var(--surface-3) !important; color: var(--fg) !important; }
.popover ul.menu.toolbar > li > a.disabled { color: var(--fg-4) !important; opacity: .6; }
.popover ul.menu.toolbar > li.spacer {
	width: auto !important;
	height: 1px !important;
	margin: 4px 8px !important;
	background: var(--line-soft) !important;
}
.popover .popover-header { background: transparent !important; border-bottom: 1px solid var(--line) !important; color: var(--fg-2) !important; }
.popover .arrow, .popover .popover-arrow { display: none !important; }

/* ==========================================================================
   Message card internals — metrics taken verbatim from the design source.
   Card toolbar : padding 14px 18px, gap 8, 32px icon buttons
   Subject row  : padding 2px 24px 14px, 1px bottom rule, 19px/600, 2-line clamp
   Body         : padding 18px 24px 22px, own scroll
   Sender row   : 34px gradient avatar, name 14/600, address 12 muted, date right
   ========================================================================== */

html:not(.iframe) #layout-content > .header {
	padding: 14px 18px !important;
	gap: 8px !important;
	min-height: 0 !important;
	border-bottom: 0 !important;
}

/* Card is held hidden until the preview frame reports it has content. */
html:not(.iframe) body.task-mail.action-none.ada-msg-loading #layout-content,
html:not(.iframe) body.task-mail.action-none.ada-msg-loading.ada-open #layout-content {
	opacity: 0 !important;
	transform: translateY(10px) !important;
}

/* ---- inside the preview frame ---- */

html.iframe #layout-content > .content.frame-content { background: var(--surface); }

html.iframe #message-header {
	background: var(--surface);
	border: 0;
	padding: 0;
}

html.iframe #message-header h2.subject {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.32;
	color: var(--fg);
	margin: 0;
	padding: 2px 24px 14px;
	border-bottom: 1px solid var(--line);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}

html.iframe #message-header > .header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 24px 0;
	background: transparent;
	border: 0;
	min-height: 0;
}

html.iframe #message-header .contactphoto {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #a78bfa, #f472b6) !important;
	flex: none;
}

html.iframe #message-header .header-content { min-width: 0; flex: 1 1 auto; }

html.iframe #message-header .header-summary,
html.iframe #message-header .header-headers { font-size: 13px; color: var(--fg-2); }
html.iframe #message-header .header-headers .adr,
html.iframe #message-header .header-summary .adr { color: var(--fg); font-weight: 600; font-size: 14px; }
html.iframe #message-header .header-headers .subject,
html.iframe #message-header .rcmContactAddress { color: var(--fg-3); font-size: 12px; }
html.iframe #message-header .date { color: var(--fg-3); font-size: 12.5px; white-space: nowrap; }

/* The details / headers / plain-text links are not in the mock; keep them
   reachable but quiet so they stop competing with the sender line. */
html.iframe #message-header .header-links {
	margin-top: 4px;
	font-size: 11.5px;
	/* No opacity here: elastic already shrinks and fades the links, and stacking
	   a second fade on top left them at ~23% alpha — effectively invisible. */
}
html.iframe #message-header .header-links a { font-size: 11.5px !important; }
html.iframe #message-header .header-links a { color: var(--fg-3) !important; }
html.iframe #message-header .header-links a:hover { opacity: 1; color: var(--fg-2) !important; }

html.iframe #message-content {
	display: block;
	padding: 18px 24px 22px;
	background: var(--surface);
}
html.iframe #message-content .leftcol,
html.iframe #message-content .rightcol {
	display: block;
	width: auto;
	float: none;
	padding: 0;
	border: 0;
}
/* Attachments read as chips above the body, not as a side column. */
html.iframe #message-content .leftcol { margin-bottom: 14px; }
html.iframe #attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none;
}
html.iframe #attachment-list li {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 12px;
	margin: 0;
	max-width: 100%;
}

/* ------------------------------------------------- Ada card toolbar (6 icons) */
/* Elastic's #mailtoolbar stays in the DOM — Roundcube registers its commands
   and popup menus from it — but the visible row is Ada's six actions. */

/* elastic's ui.js renames #mailtoolbar to ul#toolbar-menu, so hide that.
   The "..." button stays: the mock drops reply/forward/delete from the card
   because it replies through an inline composer, which does not exist here —
   removing it too would leave no way to reply at all. */
/* Mail only: the Ada card carries its own six actions. Addressbook needs its
   real toolbar (Ekle / Sil / Dışa aktar), so do not hide it there. */
/* action-none only: compose is ALSO task-mail, and hiding its toolbar left
   the Kaydet / Dosya ekle / Imza buttons gone with two empty boxes behind. */
html:not(.iframe) body.task-mail.action-none #layout-content > .header ul#toolbar-menu { display: none !important; }
html:not(.iframe) body.task-mail.action-none #layout-content > .header a.toolbar-menu-button {
	display: grid !important;
	width: 32px !important;
	height: 32px !important;
	margin-left: 8px !important;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-icon);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	font-size: 0 !important;
}
html:not(.iframe) #layout-content > .header a.toolbar-menu-button::before { font-size: 15px !important; margin: 0 !important; }
html:not(.iframe) #layout-content > .header a.toolbar-menu-button .inner { display: none !important; }

html:not(.iframe) .ada-cardhead {
	display: flex !important;
	align-items: center;
	gap: 8px !important;
	padding: 14px 18px !important;
}

html:not(.iframe) .ada-cardhead-right {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

html:not(.iframe) a.ada-cardbtn {
	width: 32px;
	height: 32px;
	display: grid !important;
	place-items: center;
	flex: none;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	text-decoration: none;
	cursor: pointer;
}
html:not(.iframe) a.ada-cardbtn:hover { background: var(--surface-2); color: var(--fg) !important; }
html:not(.iframe) a.ada-cardbtn.ada-star.is-on { color: #fbbf24 !important; }

/* ---------------------------------------------------- header inputs & icons */

/* Elastic only defines the toolbar-menu glyph in its mobile rules, so on
   desktop the button rendered as an empty box. Draw the ellipsis ourselves. */
html:not(.iframe) a.toolbar-menu-button::before {
	content: "\22EF" !important;
	font-family: var(--font) !important;
	font-size: 17px !important;
	line-height: 1 !important;
	color: var(--fg-2) !important;
}

/* Search: elastic hangs its unread/options buttons OUTSIDE the input, so the
   control read as three glued parts. Make the searchbar itself the field and
   let the input and buttons sit inside it. */
html:not(.iframe) body.task-mail #layout-list > .searchbar {
	display: flex !important;
	align-items: center;
	gap: 2px;
	height: 38px;
	padding: 0 6px 0 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-btn) !important;
	background: var(--surface-2) !important;
	box-sizing: border-box;
}
html:not(.iframe) body.task-mail #layout-list > .searchbar:focus-within {
	border-color: rgba(167, 139, 250, .55) !important;
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
html:not(.iframe) body.task-mail #layout-list > .searchbar form {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
}
html:not(.iframe) body.task-mail #layout-list > .searchbar input {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: 34px !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 8px 0 36px !important;
	color: var(--fg);
	font-size: 13.5px;
}
html:not(.iframe) body.task-mail #layout-list > .searchbar a.button {
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	place-items: center;
	flex: none;
	border: 0 !important;
	border-radius: 7px;
	background: transparent !important;
	color: var(--fg-3) !important;
	font-size: 0 !important;
}
html:not(.iframe) body.task-mail #layout-list > .searchbar a.button::before {
	font-size: 14px !important;
	margin: 0 !important;
	color: var(--fg-3) !important;
}
html:not(.iframe) body.task-mail #layout-list > .searchbar a.button:hover { background: var(--surface-3) !important; }
html:not(.iframe) body.task-mail #layout-list > .searchbar a.button:hover::before { color: var(--fg) !important; }
html:not(.iframe) body.task-mail #layout-list > .searchbar a.button .inner { display: none !important; }

/* --------------------------------------------------------- inline reply box */
/* Sits at the foot of the card like the mock, and gives a short message a
   bottom edge instead of a large empty void. */

html:not(.iframe) .ada-reply {
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--line);
	background: var(--surface);
}

html:not(.iframe) .ada-reply-avatar {
	width: 28px;
	height: 28px;
	flex: none;
	margin-top: 6px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	color: rgba(10, 10, 12, .75);
	background: var(--grad);
}
html:not(.iframe) .ada-reply-avatar::before { content: attr(data-ada-initial); }

html:not(.iframe) .ada-reply-main { flex: 1 1 auto; min-width: 0; }

html:not(.iframe) textarea.ada-reply-input {
	width: 100%;
	min-height: 44px;
	max-height: 160px;
	resize: none;
	box-sizing: border-box;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--surface-2);
	color: var(--fg);
	font-family: var(--font);
	font-size: 13.5px;
	line-height: 1.5;
	padding: 12px 14px;
	outline: none;
}
html:not(.iframe) textarea.ada-reply-input:focus {
	border-color: rgba(167, 139, 250, .55);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}

html:not(.iframe) .ada-reply-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

html:not(.iframe) a.ada-reply-ghost {
	font-size: 12.5px;
	color: var(--fg-3) !important;
	text-decoration: none;
	padding: 4px 6px;
	border-radius: 8px;
}
html:not(.iframe) a.ada-reply-ghost:hover { color: var(--fg-2) !important; background: var(--surface-2); }

html:not(.iframe) a.ada-reply-send {
	width: 30px;
	height: 30px;
	margin-left: auto;
	flex: none;
	display: grid !important;
	place-items: center;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: var(--grad);
	color: var(--on-grad) !important;
	text-decoration: none;
}
html:not(.iframe) a.ada-reply-send:hover { filter: brightness(1.08); }

/* Draft mailboxes and search results still get the box; it is only pointless
   when nothing is open, and the whole card is hidden then anyway. */
@media screen and (max-width: 1023px) {
	html:not(.iframe) .ada-reply { padding: 10px 12px 12px; }
}

/* ------------------------------------------------ message frame corrections */

/* The attachment <ul> keeps elastic's #fcfcfc and stretched edge to edge as a
   white bar — the chips were styled but their container was not. */
html.iframe #attachment-list,
html.iframe .attachmentslist,
html.iframe #message-content .leftcol {
	background: transparent !important;
	border: 0 !important;
}

/* Cap the reading column. With the assistant panel closed the card can run
   1800px wide and lines ran to the very edge, which read as "no padding on the
   right". At normal widths the cap does not bite, so it still matches the mock. */
/* The design does not centre the message column; it keeps a flat 24px gutter
   and caps the PROSE at 660px instead (see .message-part below). */

/* ==========================================================================
   Exact metrics from the design source (see the spec extracted from
   ada-mail.dc.html). Values here are transcribed, not estimated.
   ========================================================================== */

/* Prose measure: the mock caps paragraphs at 660px, left aligned to the gutter.
   Applied to the plain-text part only — HTML mail carries its own layout. */
html.iframe #messagebody .message-part {
	max-width: 660px;
	font-size: 14.5px;
	line-height: 1.68;
}

/* ---- sender row (design: gap 11, margin-bottom 18, padding 4, radius 12) ---- */
html.iframe #message-header > .header {
	gap: 11px;
	margin: 0 0 18px;
	padding: 18px 24px 0;
	border-radius: 12px;
}
html.iframe #message-header .header-headers .adr { font-size: 14px; font-weight: 600; color: var(--fg); }
html.iframe #message-header .rcmContactAddress { font-size: 12px; color: var(--fg-3); }
html.iframe #message-header .date { font-size: 12.5px; color: var(--fg-3); }

/* ---- reply draft box ---- */

html:not(.iframe) .ada-reply {
	flex: none;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 8px 24px 4px;   /* design: 8/24/4 */
	border-top: 0;           /* the mock has no divider here */
	background: var(--surface);
}

html:not(.iframe) .ada-reply-avatar {
	width: 28px;
	height: 28px;
	flex: none;
	margin-top: 6px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fg);        /* design omits a colour here, so it inherits */
	background: linear-gradient(135deg, #f472b6, #a78bfa);
}
html:not(.iframe) .ada-reply-avatar::before { content: attr(data-ada-initial); }

html:not(.iframe) .ada-reply-box {
	flex: 1;
	min-width: 0;
	border-radius: 16px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	padding: 10px 12px 8px;
}

html:not(.iframe) textarea.ada-reply-input {
	width: 100%;
	height: 34px;
	min-height: 0;
	max-height: 110px;
	resize: vertical;
	border: 0;
	background: transparent;
	color: var(--fg);
	font-family: var(--font);
	font-size: 13.5px;
	line-height: 1.5;
	outline: none;
	box-sizing: border-box;
	padding: 0;
}

html:not(.iframe) .ada-reply-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* gradChipStyle, verbatim */
html:not(.iframe) a.ada-gradchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 30px;
	padding: 0 12px;
	border-radius: 9px;
	color: var(--fg) !important;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
		linear-gradient(95deg, #a78bfa, #f472b6 50%, #67e8f9) border-box;
}
html:not(.iframe) a.ada-gradchip:hover { filter: brightness(1.12); text-decoration: none; }

/* sendBtnStyle, verbatim */
html:not(.iframe) a.ada-reply-send {
	width: 30px;
	height: 30px;
	margin-left: auto;
	flex: none;
	display: grid !important;
	place-items: center;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: linear-gradient(135deg, #a78bfa, #f472b6);
	color: #0b0b0d !important;
	text-decoration: none;
}
html:not(.iframe) a.ada-reply-send:hover { filter: brightness(1.08); }

/* Attachment chips — design: padding 9/13, radius 12, surface-3, 1px line;
   extension label 10.5/700 violet, name 12.5/fg-2, size 11.5/fg-4. */
html.iframe #attachment-list li,
html.iframe .attachmentslist li {
	padding: 9px 13px !important;
	border-radius: 12px !important;
	background: var(--surface-3) !important;
	border: 1px solid var(--line) !important;
	gap: 10px;
	display: flex;
	align-items: center;
}
html.iframe #attachment-list li a.filename { font-size: 12.5px !important; color: var(--fg-2) !important; }
html.iframe #attachment-list li .attachment-size,
html.iframe #attachment-list li .size { font-size: 11.5px !important; color: var(--fg-4) !important; }

/* Sender row reads as a hoverable chip in the mock. */
html.iframe #message-header > .header:hover { background: var(--surface-2); }

/* Send button busy state while an inline reply is in flight. */
html:not(.iframe) a.ada-reply-send.is-busy { opacity: .55; cursor: progress; }
html:not(.iframe) a.ada-reply-send.is-busy svg { animation: adaGlow 1s ease-in-out infinite; }

/* ==========================================================================
   Sub-tasks (settings, addressbook) wear the same Ada shell as mail, so the
   app reads as one product rather than an Ada inbox bolted onto elastic.
   ========================================================================== */

/* The nav's own scroller — settings sections, address groups. */
html:not(.iframe) #layout-sidebar.ada-nav > .scroller {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0;
	background: transparent;
	overflow-y: auto;
}

/* Section / group rows use the folder-row shape from the mail nav. */
html:not(.iframe) .ada-nav #settings-menu > li > a,
html:not(.iframe) .ada-nav #directorylist li > a,
html:not(.iframe) .ada-nav #savedsearchlist li > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--fg-2) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.25;
}
html:not(.iframe) .ada-nav #settings-menu > li > a:hover,
html:not(.iframe) .ada-nav #directorylist li > a:hover,
html:not(.iframe) .ada-nav #savedsearchlist li > a:hover {
	background: var(--surface-2) !important;
	color: var(--fg) !important;
}
html:not(.iframe) .ada-nav #settings-menu > li.selected > a,
html:not(.iframe) .ada-nav #directorylist li.selected > a,
html:not(.iframe) .ada-nav #savedsearchlist li.selected > a {
	background: var(--surface-3) !important;
	border-color: var(--line) !important;
	color: var(--fg) !important;
	font-weight: 600 !important;
}
html:not(.iframe) .ada-nav #settings-menu > li,
html:not(.iframe) .ada-nav #directorylist li,
html:not(.iframe) .ada-nav #savedsearchlist li { border: 0 !important; background: transparent !important; }

html:not(.iframe) .ada-nav #settings-menu > li > a::before,
html:not(.iframe) .ada-nav #directorylist li > a::before,
html:not(.iframe) .ada-nav #savedsearchlist li > a::before {
	width: 17px !important;
	min-width: 17px !important;
	margin: 0 !important;
	font-size: 15px !important;
	text-align: center;
	opacity: .75;
	color: var(--fg-2) !important;
}
html:not(.iframe) .ada-nav #settings-menu > li.selected > a::before,
html:not(.iframe) .ada-nav #directorylist li.selected > a::before {
	opacity: 1;
	color: var(--violet) !important;
}

/* Current task is highlighted from the body class — one include, no branching. */
html:not(.iframe) body.task-mail        a.ada-nav-mail,
html:not(.iframe) body.task-addressbook a.ada-nav-contacts,
html:not(.iframe) body.task-settings    a.ada-nav-settings {
	background: var(--surface-3) !important;
	border-color: var(--line) !important;
	color: var(--fg) !important;
	font-weight: 600;
}
html:not(.iframe) body.task-mail        a.ada-nav-mail::before,
html:not(.iframe) body.task-addressbook a.ada-nav-contacts::before,
html:not(.iframe) body.task-settings    a.ada-nav-settings::before { color: var(--violet) !important; opacity: 1; }

/* Sub-task headers and list panes pick up the mail toolbar's proportions. */
html:not(.iframe) body.task-settings #layout-list > .header,
html:not(.iframe) body.task-addressbook #layout-list > .header,
html:not(.iframe) body.task-settings #layout-content > .header,
html:not(.iframe) body.task-addressbook #layout-content > .header {
	min-height: var(--ada-header-h);
	padding: 12px 16px !important;
	background: var(--bg) !important;
	border-bottom: 1px solid var(--line-soft) !important;
}
html:not(.iframe) body.task-settings #layout-content > .header,
html:not(.iframe) body.task-addressbook #layout-content > .header {
	background: var(--surface) !important;
}

/* Contact / preferences panes are cards like the message card. */
html:not(.iframe) body.task-settings #layout-content,
html:not(.iframe) body.task-addressbook #layout-content {
	background: var(--surface) !important;
	border-left: 1px solid var(--line);
	border-top-left-radius: 20px;
	overflow: hidden;
}

/* Contact list rows match the message rows' rhythm. */
html:not(.iframe) #contacts-table td,
html:not(.iframe) #contacts-table tr { border-radius: var(--radius-row); }

/* Sub-task proportions: a list column plus the detail card, like mail. */
@media screen and (min-width: 1024px) {
	html:not(.iframe) body.task-settings #layout-list,
	html:not(.iframe) body.task-addressbook #layout-list {
		flex: 0 0 clamp(300px, 30%, 460px) !important;
		width: clamp(300px, 30%, 460px) !important;
		max-width: 460px !important;
	}
	html:not(.iframe) body.task-settings #layout-content,
	html:not(.iframe) body.task-addressbook #layout-content {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: none !important;
	}
}

/* Addressbook / settings keep a normal in-flow search bar styled like Ada's. */
html:not(.iframe) body.task-addressbook #layout-list > .searchbar {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 8px 16px 10px;
	padding: 0 6px 0 0;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	background: var(--surface-2) !important;
	box-sizing: border-box;
}
html:not(.iframe) body.task-addressbook #layout-list > .searchbar form { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; }
html:not(.iframe) body.task-addressbook #layout-list > .searchbar input {
	flex: 1 1 auto;
	width: 100% !important;
	height: 34px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 8px 0 36px !important;
	color: var(--fg);
	font-size: 13.5px;
}
html:not(.iframe) body.task-addressbook #layout-list > .searchbar a.button {
	width: 26px !important; height: 26px !important; padding: 0 !important;
	display: grid !important; place-items: center; flex: none;
	border: 0 !important; border-radius: 7px; background: transparent !important;
	color: var(--fg-3) !important; font-size: 0 !important;
}
html:not(.iframe) body.task-addressbook #layout-list > .searchbar a.button::before { font-size: 14px !important; margin: 0 !important; }
html:not(.iframe) body.task-addressbook #layout-list > .searchbar a.button .inner { display: none !important; }

/* Long group / section names must not run under the nav edge. */
html:not(.iframe) .ada-nav #directorylist li > a,
html:not(.iframe) .ada-nav #savedsearchlist li > a,
html:not(.iframe) .ada-nav #settings-menu > li > a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Addressbook toolbar reads like the mail card's action row. */
html:not(.iframe) body.task-addressbook #layout-content > .header ul#toolbar-menu { margin-left: auto !important; }
html:not(.iframe) body.task-addressbook #layout-list > .header .toolbar { margin-left: auto; }

/* Group names ellipsize inside the 200px nav. */
html:not(.iframe) .ada-nav #directorylist li > a span,
html:not(.iframe) .ada-nav #savedsearchlist li > a span,
html:not(.iframe) .ada-nav #settings-menu > li > a span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Nav rows in the sub-tasks use block layout, not flex: `text-overflow` has no
   effect on a flex container, so long group names ("Güvenilen göndericiler")
   were being cut mid-word with no ellipsis. */
html:not(.iframe) .ada-nav #directorylist li > a,
html:not(.iframe) .ada-nav #savedsearchlist li > a,
html:not(.iframe) .ada-nav #settings-menu > li > a {
	display: block !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 20px;
}
html:not(.iframe) .ada-nav #directorylist li > a::before,
html:not(.iframe) .ada-nav #savedsearchlist li > a::before,
html:not(.iframe) .ada-nav #settings-menu > li > a::before {
	display: inline-block !important;
	vertical-align: middle;
	margin-right: 10px !important;
}

/* Addressbook list header: same compact icon row as mail's. */
html:not(.iframe) body.task-addressbook #layout-list > .header .toolbar a,
html:not(.iframe) body.task-addressbook #layout-list > .header a.toolbar-menu-button {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	font-size: 0 !important;
}
html:not(.iframe) body.task-addressbook #layout-list > .header .toolbar a::before,
html:not(.iframe) body.task-addressbook #layout-list > .header a.toolbar-menu-button::before {
	font-size: 15px !important;
	margin: 0 !important;
}
html:not(.iframe) body.task-addressbook #layout-list > .header .toolbar a .inner,
html:not(.iframe) body.task-addressbook #layout-list > .header a.toolbar-menu-button .inner { display: none !important; }
html:not(.iframe) body.task-addressbook #layout-list > .header .header-title {
	color: var(--fg);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* ==================================================== icon / label alignment */
/* Every icon slot is one square em so labels start at the same x in every list.
   Before this the folder glyph sat in a 17x15 box (non-square, so mask-size
   contain shifted it) while the Etiketler dot took 9px — two different text
   indents in the same column. */

html:not(.iframe) .ada-nav .folderlist li > a::before,
html:not(.iframe) .ada-nav .treelist li > a::before {
	width: 1em !important;
	min-width: 1em !important;
	height: 1em !important;
}

/* Colour dot gets the same 1em slot as a glyph (9px dot + 3px either side). */
html:not(.iframe) .ada-label i {
	margin-left: 3px;
	margin-right: 3px;
}

/* In flex rows vertical-align is inert; centre the mask explicitly so the glyph
   never rides above the text. */
html .folderlist li a::before,
html .treelist li a::before,
html .listing.iconized li > a::before,
html a.button.icon::before,
html .menu a::before,
html a.ada-navbtn::before {
	align-self: center;
}

/* Sub-task nav icons use the same square 1em slot as the mail folder list, so
   the text indent is identical in every left column. */
html:not(.iframe) .ada-nav #settings-menu > li > a::before,
html:not(.iframe) .ada-nav #directorylist li > a::before,
html:not(.iframe) .ada-nav #savedsearchlist li > a::before {
	width: 1em !important;
	min-width: 1em !important;
	height: 1em !important;
	margin-right: 10px !important;
	vertical-align: middle;
}

/* ------------------------------------------------------- popover submenus */
/* Split buttons (reply-all / forward) keep elastic's absolute chevron, which
   floated as a loose grey box over the rows below. Make them part of the row. */
.popover .dropbutton {
	display: flex !important;
	align-items: center;
	width: 100%;
}
.popover .dropbutton > a:first-child { flex: 1 1 auto; }
.popover .dropbutton > a.dropdown {
	position: static !important;
	width: 32px !important;
	min-width: 32px !important;
	height: 32px !important;
	flex: none;
	display: grid !important;
	place-items: center;
	border: 0 !important;
	background: transparent !important;
	border-radius: 8px;
}
.popover .dropbutton > a.dropdown:hover { background: var(--surface-3) !important; }
.popover ul.menu li a[aria-haspopup]::after {
	color: var(--fg-3) !important;
	margin-left: auto !important;
}

/* ============================================================== login screen */
/* Metrics from the design's sign-in modal: title 24/600/-.015em, hint 13.5 in
   --fg-3, inputs 38px radius 11, primary 42px radius 12 gradient. */

html:not(.iframe) body.task-login #layout-content.ada-login {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

html:not(.iframe) .ada-login-card {
	width: 100%;
	max-width: 380px;
	padding: 28px 26px 22px;
	border-radius: 20px;
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	box-sizing: border-box;
}

html:not(.iframe) .ada-login-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}
html:not(.iframe) .ada-login-brand .ada-mark { color: var(--fg); display: grid; place-items: center; }
html:not(.iframe) .ada-login-brand .ada-wordmark { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

html:not(.iframe) .ada-login-title {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--fg);
	text-wrap: pretty;
}
html:not(.iframe) .ada-login-hint {
	font-size: 13.5px;
	color: var(--fg-3);
	margin-top: 8px;
	line-height: 1.55;
	margin-bottom: 20px;
}

/* Elastic pushes #login-form down with `position:relative; top:254px` so it can
   centre it in a bare page. Inside the Ada card that shoved the whole form out
   the bottom, so pin it back into normal flow. */
html:not(.iframe) .ada-login-card #login-form {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The field + its leading icon read as ONE control, like the mock's inputs. */
html:not(.iframe) .ada-login-card .input-group {
	display: flex !important;
	align-items: center;
	margin-bottom: 10px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: var(--surface-2);
	overflow: hidden;
}
html:not(.iframe) .ada-login-card .input-group:focus-within {
	border-color: rgba(167, 139, 250, .55);
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
html:not(.iframe) .ada-login-card .input-group .input-group-prepend,
html:not(.iframe) .ada-login-card .input-group .input-group-text {
	display: grid !important;
	place-items: center;
	width: 38px;
	height: 36px;
	flex: none;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--fg-3) !important;
}
html:not(.iframe) .ada-login-card .input-group input.form-control {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 12px 0 0 !important;
}

html:not(.iframe) .ada-login-card button.btn-primary,
html:not(.iframe) .ada-login-card #rcmloginsubmit {
	width: 100%;
	height: 42px !important;
	padding: 0 22px !important;
	margin-top: 8px;
	border: 0 !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #a78bfa, #f472b6) !important;
	color: #141014 !important;
	font-size: 14px;
	font-weight: 600;
}
html:not(.iframe) .ada-login-card button.btn-primary:hover { filter: brightness(1.07); }

html:not(.iframe) .ada-login-card #login-footer {
	margin-top: 18px;
	text-align: center;
	font-size: 12px;
	color: var(--fg-4);
}
html:not(.iframe) .ada-login-card #login-footer a { color: var(--fg-3); }

/* ================================================= stray elastic borders */
/* Elastic leaves light dividers on the layout columns and a pale-blue focus
   rule on list cells. Both read as random bright hairlines on this palette. */

html:not(.iframe) #layout > div,
html:not(.iframe) #layout-sidebar,
html:not(.iframe) #layout-list,
html:not(.iframe) #layout-content,
html:not(.iframe) #layout-menu {
	border-color: var(--line-soft) !important;
}

/* List cells: kill the pale focus rule, and use the Ada accent for the real
   selected row instead. */
html:not(.iframe) table.listing td,
html:not(.iframe) table.listing th,
html:not(.iframe) table.listing tr > td {
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-top-color: transparent !important;
}
html:not(.iframe) table.listing tr > td { border-bottom-color: var(--line-soft) !important; }

html:not(.iframe) table.listing tr.selected > td.section,
html:not(.iframe) table.listing tr.focused > td.section {
	border-left-color: var(--violet) !important;
}

/* Same treatment inside the framed pages (settings forms, contact details). */
html.iframe table.listing td,
html.iframe table.listing th,
html.iframe fieldset,
html.iframe .propform td { border-color: var(--line-soft) !important; }

/* ==================================================== scrollbars, one style */
/* Applies in the framed documents too — those were still painting the OS
   default light scrollbar inside the dark message card. */

html, body, * {
	scrollbar-color: rgba(255, 255, 255, .16) transparent;
	scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; border: 0; }
::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, .14);
	border-radius: 99px;
	border: 3px solid transparent;
	background-clip: content-box;
	min-height: 36px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .26); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* The message body renders sender HTML on our dark surface; keep its scrollbar
   in the same language rather than the light default. */
html.iframe { scrollbar-color: rgba(255, 255, 255, .16) transparent; }

/* ============================================== search field, every task */
/* The Ada field was only wired up for mail (absolute, lifted into the toolbar)
   and addressbook. Settings > Klasörler and anything else with a search box
   fell back to elastic's bare input with the option button hanging outside it.
   One base rule for every task; mail keeps its absolute variant below. */

html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar {
	display: flex !important;
	align-items: center;
	gap: 2px;
	margin: 10px 16px;
	padding: 0 6px 0 0 !important;
	height: 38px;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-btn) !important;
	background: var(--surface-2) !important;
	box-sizing: border-box;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar:focus-within {
	border-color: rgba(167, 139, 250, .55) !important;
	box-shadow: 0 0 0 3px rgba(167, 139, 250, .14);
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar form {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	display: flex;
	align-items: center;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar input {
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0;
	height: 34px !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 8px 0 36px !important;
	color: var(--fg);
	font-size: 13.5px;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar a.button {
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	place-items: center;
	flex: none;
	border: 0 !important;
	border-radius: 7px;
	background: transparent !important;
	color: var(--fg-3) !important;
	font-size: 0 !important;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar a.button::before {
	font-size: 14px !important;
	margin: 0 !important;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar a.button:hover { background: var(--surface-3) !important; }
html:not(.iframe) body:not(.task-mail) #layout-list > .searchbar a.button .inner { display: none !important; }

/* Give every list column a real header band so the search box is not floating
   against the top edge of the page. */
html:not(.iframe) body:not(.task-mail) #layout-list > .header {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--ada-header-h);
	padding: 12px 16px !important;
	background: var(--bg) !important;
	border-bottom: 1px solid var(--line-soft) !important;
}
html:not(.iframe) body:not(.task-mail) #layout-list > .header .header-title {
	color: var(--fg);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}

/* Elastic hides .header-title on large layouts because its sidebar already
   names the context. In Ada the sub-task list column has no other label, so
   the band came up empty — show it back for every task except mail, whose
   toolbar carries chips instead. */
html:not(.iframe) body:not(.task-mail) #layout-list > .header .header-title,
html:not(.iframe) body:not(.task-mail) #layout-content > .header .header-title {
	display: block !important;
	color: var(--fg);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ======================================== header toolbars, every task */
/* elastic's ui.js turns each header's .toolbar into UL.menu.toolbar.listing on
   every page, not just mail. The mail-scoped rules left the settings and
   addressbook ones with raw list styling — a stray square in the header band. */

html:not(.iframe) #layout-list > .header ul.menu.toolbar,
html:not(.iframe) #layout-content > .header ul.menu.toolbar {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	position: static !important;
	width: auto !important;
	overflow: visible !important;
}

html:not(.iframe) #layout-list > .header ul.menu.toolbar > li,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li {
	display: flex !important;
	align-items: center;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
}

html:not(.iframe) #layout-list > .header ul.menu.toolbar > li > a,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a {
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	place-items: center;
	border-radius: var(--radius-icon);
	border: 1px solid var(--line);
	background: var(--surface-3);
	color: var(--fg-2) !important;
	font-size: 0 !important;
	line-height: 1 !important;
}
html:not(.iframe) #layout-list > .header ul.menu.toolbar > li > a::before,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a::before {
	font-size: 15px !important;
	margin: 0 !important;
	color: var(--fg-2) !important;
}
html:not(.iframe) #layout-list > .header ul.menu.toolbar > li > a .inner,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a .inner { display: none !important; }
html:not(.iframe) #layout-list > .header ul.menu.toolbar > li > a:hover,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a:hover { background: var(--surface-2); }
html:not(.iframe) #layout-list > .header ul.menu.toolbar > li > a.disabled,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a.disabled { opacity: .5; }
html:not(.iframe) #layout-list > .header ul.menu.toolbar > li.spacer,
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li.spacer { width: 10px !important; }

/* Split buttons in a header toolbar keep their chevron attached. */
html:not(.iframe) #layout-content > .header ul.menu.toolbar > li > a.dropdown {
	width: 18px !important;
	border-left: 0;
	border-radius: 0 var(--radius-icon) var(--radius-icon) 0;
	margin-left: -2px !important;
}

/* The attachment drop area is `.file-upload.droptarget`, not `.dropzone` — the
   earlier rule missed it and it kept elastic's light dashed frame. */
html:not(.iframe) .file-upload,
html:not(.iframe) .file-upload.droptarget,
html:not(.iframe) #compose-attachments .file-upload {
	border: 1px dashed var(--line) !important;
	border-radius: 14px !important;
	background: var(--surface-2) !important;
	color: var(--fg-3) !important;
}
html:not(.iframe) .file-upload.droptarget.hover,
html:not(.iframe) .file-upload.active {
	border-color: rgba(167, 139, 250, .55) !important;
	background: var(--surface-3) !important;
}
html:not(.iframe) .file-upload .buttons .btn { margin-top: 8px; }

/* ============================================== task rail icon stacking */
/* elastic stacks the rail glyph ABOVE its label. The generated icon layer sets
   every ::before to inline-block, which dropped the glyph onto the label's line
   and they overlapped. Restore the stack for the rail only. */
html:not(.iframe) #taskmenu a::before {
	display: block !important;
	margin: 0 auto 4px !important;
	width: 18px !important;
	height: 18px !important;
}
html:not(.iframe) #taskmenu a {
	text-align: center;
}
html:not(.iframe) #taskmenu a .inner {
	display: block;
	text-align: center;
	font-size: 11px;
}

/* ================================================= attachment drop area */
/* elastic drops a 140x86 light illustration in via ::after content. Replace it
   with the Ada upload glyph at a sane size. */
html:not(.iframe) .file-upload::after {
	content: "" !important;
	display: block;
	width: 44px;
	height: 44px;
	margin: 16px auto 4px;
	background-color: var(--fg-4);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}

/* ==================================== message-row hover menu placement */
/* Elastic positions it with `right: 5px` against the scroller, but the Ada
   scroller carries 12px horizontal padding, so the menu overhung the row and
   sat flush against the viewport edge. Offset by the padding. */
html:not(.iframe) .listing-hover-menu {
	right: 18px !important;
	left: auto !important;
}

/* ================================= icon / text alignment in table lists */
/* Settings sections and other table listings put the glyph in a table-cell with
   a 35px line-height. The generated layer left it baseline-shifted, so icons
   rode high above their labels. Centre them against the line box instead. */
html .listing td::before,
html td.section::before,
html .listing.iconized td::before,
html .listing.iconized tr > td::before {
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right: 9px !important;
	position: relative;
	top: -1px;
}

/* Same for the identity / addressbook rows, which use the same table shape. */
html .listing td.mail::before,
html .listing td.contact::before { vertical-align: middle !important; }

/* The mobile task-menu toggle has no job on desktop — the rail or the Ada nav
   is always present there — and it was rendering as an empty square in the
   compose header. */
@media screen and (min-width: 1024px) {
	html:not(.iframe) a.button.icon.task-menu-button,
	html:not(.iframe) a.button.icon.back-sidebar-button,
	html:not(.iframe) a.button.icon.back-list-button {
		display: none !important;
	}
}

/* Elastic floats the glyph in table listings, which parks it at the top of the
   line box so it rides above its label. Take it out of the float and centre it
   on the line. Needs `html body` to out-specify elastic's own rule. */
html body table.listing td::before,
html body table.listing.iconized td::before,
html body table.listing.iconized tr > td::before,
html body #sections-table td.section::before,
html body #contacts-table td::before {
	display: inline-block !important;
	float: none !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	margin: 0 9px 0 0 !important;
	top: -1px;
	position: relative;
}

/* ==========================================================================
   Icon set — GENERATED by gen_icons.py, do not hand-edit.

   Elastic draws icons from a Font Awesome subset; the Ada design uses thin
   stroke line icons. Instead of swapping icon fonts we keep elastic's markup
   and repaint each ::before as an SVG mask filled with currentColor, so every
   existing colour, hover and disabled rule keeps working untouched.
   ========================================================================== */

html .folderlist li a::before,
html .treelist li a::before,
html .listing.iconized li > a::before,
html a.button.icon::before,
html button.btn::before,
html .menu a::before {
	/* NOTE: font-family is reset per-rule below, never here. Blanket-resetting it
	   also killed the glyph on every icon we did not mask (the pager arrows came
	   up as empty boxes). Only masked selectors may drop the icon font. */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

html .folderlist li a::before,
html .treelist li a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.inbox > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2012.5h4l1.5%202.5h6l1.5-2.5h4M4.5%2012.5%206.8%205.6a1.5%201.5%200%200%201%201.4-1h7.6a1.5%201.5%200%200%201%201.4%201l2.3%206.9v5a1.5%201.5%200%200%201-1.5%201.5h-14a1.5%201.5%200%200%201-1.5-1.5v-5Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2012.5h4l1.5%202.5h6l1.5-2.5h4M4.5%2012.5%206.8%205.6a1.5%201.5%200%200%201%201.4-1h7.6a1.5%201.5%200%200%201%201.4%201l2.3%206.9v5a1.5%201.5%200%200%201-1.5%201.5h-14a1.5%201.5%200%200%201-1.5-1.5v-5Z%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.drafts a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.sent a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%2014-7-5.5%2014-2.5-5.5L5%2012Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%2014-7-5.5%2014-2.5-5.5L5%2012Z%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.junk a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.5%204.5%2019h15L12%204.5ZM12%2010v4M12%2016.6v.1%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.5%204.5%2019h15L12%204.5ZM12%2010v4M12%2016.6v.1%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.trash a::before,
html .folderlist li.trash.empty > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
}

html .folderlist li.archive > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5.5%208.5v10a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1v-10M10%2012h4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5.5%208.5v10a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1v-10M10%2012h4%27%2F%3E%3C%2Fsvg%3E");
}

html a.ada-nav-mail::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.ada-nav-contacts::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html a.ada-nav-settings::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.preferences > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.folders > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.responses > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.identities > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M5.8%2016c.6-1.4%201.9-2.1%203.2-2.1s2.6.7%203.2%202.1M15%2012h4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M5.8%2016c.6-1.4%201.9-2.1%203.2-2.1s2.6.7%203.2%202.1M15%2012h4%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.password > a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.addressbook a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%27%2F%3E%3Cpath%20d%3D%27M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%27%2F%3E%3Cpath%20d%3D%27M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.contactgroup a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized li.contactsearch a::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
}

html .listing.iconized tr.mailbox > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.refresh::before,
html button.btn.refresh::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a9%209%200%201%201-3-6.7%27%2F%3E%3Cpath%20d%3D%27M21%204v5h-5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a9%209%200%201%201-3-6.7%27%2F%3E%3Cpath%20d%3D%27M21%204v5h-5%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.search::before,
html button.btn.search::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.create::before,
html button.btn.create::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.edit::before,
html button.btn.edit::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.delete::before,
html a.button.icon.discard::before,
html button.btn.delete::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.export::before,
html button.btn.export::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.import::before,
html button.btn.import::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.close::before,
html a.button.icon.cancel::before,
html a.button.icon.no::before,
html a.button.icon.remove::before,
html button.btn.close::before,
html button.btn.cancel::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.back::before,
html a.button.icon.back-list-button::before,
html a.button.icon.back-sidebar-button::before,
html a.button.icon.back-content-button::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%206-6%206%206%206%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%206-6%206%206%206%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.dropdown::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.sidebar-menu::before,
html a.button.icon.toolbar-list-button::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%275%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2719%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%275%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2719%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.task-menu-button::before,
html button.btn.task-menu-button::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M3%2012h18M3%2018h18%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M3%2012h18M3%2018h18%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.attach::before,
html button.btn.attach::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.4%2011%2012.3%2020.2a5%205%200%200%201-7.1-7.1l9.2-9.2a3.3%203.3%200%200%201%204.7%204.7l-9.2%209.2a1.7%201.7%200%200%201-2.4-2.4l8.5-8.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.4%2011%2012.3%2020.2a5%205%200%200%201-7.1-7.1l9.2-9.2a3.3%203.3%200%200%201%204.7%204.7l-9.2%209.2a1.7%201.7%200%200%201-2.4-2.4l8.5-8.5%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.send::before,
html button.btn.send::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%2014-7-5.5%2014-2.5-5.5L5%2012Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012%2014-7-5.5%2014-2.5-5.5L5%2012Z%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.options::before,
html button.btn.options::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.folders::before,
html button.btn.folders::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.settings::before,
html a.button.icon.tools::before,
html button.btn.settings::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.selection::before,
html button.btn.selection::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.save::before,
html a.button.icon.submit::before,
html a.button.icon.yes::before,
html a.button.icon.continue::before,
html button.btn.save::before,
html button.btn.submit::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.icon.print::before,
html button.btn.print::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%2712%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%2712%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.mail::before,
html .menu a.unread::before,
html .menu a.select.unread::before,
html .menu a.expand.unread::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.contacts::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.settings::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.options::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.reply::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2017-6-5%206-5%27%2F%3E%3Cpath%20d%3D%27M3%2012h11a5%205%200%200%201%205%205v2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%2017-6-5%206-5%27%2F%3E%3Cpath%20d%3D%27M3%2012h11a5%205%200%200%201%205%205v2%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.reply-all::before,
html .menu a.reply.all::before,
html .menu a.reply.list::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m7%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27m12%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27M2%2012h13a5%205%200%200%201%205%205v2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m7%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27m12%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27M2%2012h13a5%205%200%200%201%205%205v2%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.forward::before,
html .menu a.forward.inline::before,
html .menu a.forward.attachment::before,
html .menu a.forward.bounce::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%2017%205-5-5-5%27%2F%3E%3Cpath%20d%3D%27M20%2012H9a5%205%200%200%200-5%205v2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%2017%205-5-5-5%27%2F%3E%3Cpath%20d%3D%27M20%2012H9a5%205%200%200%200-5%205v2%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.markmessage::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010.5V5a1%201%200%200%201%201-1h5.5l9%209-6.5%206.5-9-9Z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2010.5V5a1%201%200%200%201%201-1h5.5l9%209-6.5%206.5-9-9Z%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.more::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2712%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.threads::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.select::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m4%204%207%2017%202.5-7.4L21%2011%204%204Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m4%204%207%2017%202.5-7.4L21%2011%204%204Z%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.select.invert::before,
html .menu a.selection::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.select.none::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.select.page::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M3%2012h18M3%2018h18%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M3%2012h18M3%2018h18%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.select.all::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%273%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m8%2012%203%203%205-6%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.archive::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5.5%208.5v10a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1v-10M10%2012h4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%274.5%27%20width%3D%2717%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M5.5%208.5v10a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1v-10M10%2012h4%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.junk::before,
html .menu a.notjunk::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.5%204.5%2019h15L12%204.5ZM12%2010v4M12%2016.6v.1%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%204.5%204.5%2019h15L12%204.5ZM12%2010v4M12%2016.6v.1%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.export::before,
html .menu a.export.all::before,
html .menu a.export.selection::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.flag::before,
html .menu a.select.flagged::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V4h10l-1%203h7l-2%205%202%205h-9l-1-3H4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V4h10l-1%203h7l-2%205%202%205h-9l-1-3H4%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.check.selected::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.print::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%2712%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209V3h12v6%27%2F%3E%3Cpath%20d%3D%27M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2714%27%20width%3D%2712%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.delete::before,
html .menu a.purge::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%207h15M9.5%207V4.8h5V7M7%207l1%2012.2h8L17%207%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.create::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.search::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.folders::before,
html .menu a.move::before,
html .menu a.copy::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.download::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.edit::before,
html .menu a.edit.asnew::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.read::before,
html .menu a.mark-all-read::before,
html .menu a.expunge::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.5%204.5%204.5L19%207%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.snooze::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278.2%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.source::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
}

html .menu a.extwin::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

html .pagenav a.firstpage::before,
html a.button.firstpage::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m11%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27m18%2017-5-5%205-5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m11%2017-5-5%205-5%27%2F%3E%3Cpath%20d%3D%27m18%2017-5-5%205-5%27%2F%3E%3C%2Fsvg%3E");
}

html .pagenav a.prevpage::before,
html a.button.prevpage::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%206-6%206%206%206%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m15%206-6%206%206%206%27%2F%3E%3C%2Fsvg%3E");
}

html .pagenav a.nextpage::before,
html a.button.nextpage::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m9%206%206%206-6%206%27%2F%3E%3C%2Fsvg%3E");
}

html .pagenav a.lastpage::before,
html a.button.lastpage::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m13%2017%205-5-5-5%27%2F%3E%3Cpath%20d%3D%27m6%2017%205-5-5-5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m13%2017%205-5-5-5%27%2F%3E%3Cpath%20d%3D%27m6%2017%205-5-5-5%27%2F%3E%3C%2Fsvg%3E");
}

html .messagelist span.attachment::before,
html span.attachment::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.4%2011%2012.3%2020.2a5%205%200%200%201-7.1-7.1l9.2-9.2a3.3%203.3%200%200%201%204.7%204.7l-9.2%209.2a1.7%201.7%200%200%201-2.4-2.4l8.5-8.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.4%2011%2012.3%2020.2a5%205%200%200%201-7.1-7.1l9.2-9.2a3.3%203.3%200%200%201%204.7%204.7l-9.2%209.2a1.7%201.7%200%200%201-2.4-2.4l8.5-8.5%27%2F%3E%3C%2Fsvg%3E");
}

html .messagelist span.report::before,
html span.report::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
}

html .messagelist span.msgicon.status::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E");
}

html .messagelist span.flag span.flagged::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V4h10l-1%203h7l-2%205%202%205h-9l-1-3H4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V4h10l-1%203h7l-2%205%202%205h-9l-1-3H4%27%2F%3E%3C%2Fsvg%3E");
}

html a.button.reset::before,
html .searchbar a.button.reset::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%206l12%2012M18%206%206%2018%27%2F%3E%3C%2Fsvg%3E");
}

html tr.general > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E");
}

html tr.mailbox > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2012.5h4l1.5%202.5h6l1.5-2.5h4M4.5%2012.5%206.8%205.6a1.5%201.5%200%200%201%201.4-1h7.6a1.5%201.5%200%200%201%201.4%201l2.3%206.9v5a1.5%201.5%200%200%201-1.5%201.5h-14a1.5%201.5%200%200%201-1.5-1.5v-5Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2012.5h4l1.5%202.5h6l1.5-2.5h4M4.5%2012.5%206.8%205.6a1.5%201.5%200%200%201%201.4-1h7.6a1.5%201.5%200%200%201%201.4%201l2.3%206.9v5a1.5%201.5%200%200%201-1.5%201.5h-14a1.5%201.5%200%200%201-1.5-1.5v-5Z%27%2F%3E%3C%2Fsvg%3E");
}

html tr.mailview > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html tr.compose > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
}

html tr.addressbook > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html tr.folders > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.7-.9L9.6%203.9A2%202%200%200%200%207.9%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%27%2F%3E%3C%2Fsvg%3E");
}

html tr.server > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%2714%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M6.5%207h.01M6.5%2017h.01%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%2714%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M6.5%207h.01M6.5%2017h.01%27%2F%3E%3C%2Fsvg%3E");
}

html tr.encryption > td.section::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
}

html .input-group-text.icon.user::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021v-1a6%206%200%200%201%206-6h4a6%206%200%200%201%206%206v1%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M4%2021v-1a6%206%200%200%201%206-6h4a6%206%200%200%201%206%206v1%27%2F%3E%3C%2Fsvg%3E");
}

html .input-group-text.icon.pass::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2710.5%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E");
}

html .input-group-text.icon.host::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%2714%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M6.5%207h.01M6.5%2017h.01%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%2714%27%20width%3D%2719%27%20height%3D%276%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M6.5%207h.01M6.5%2017h.01%27%2F%3E%3C%2Fsvg%3E");
}

html .searchbar form::before,
html form.searchform::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27m20%2020-3.2-3.2%27%2F%3E%3C%2Fsvg%3E");
}

html a.import::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27%2F%3E%3Cpath%20d%3D%27M12%203v12%27%2F%3E%3C%2Fsvg%3E");
}

html a.export::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpath%20d%3D%27m7%2010%205%205%205-5%27%2F%3E%3Cpath%20d%3D%27M12%2015V3%27%2F%3E%3C%2Fsvg%3E");
}

html a.dropdown::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

html .listing td.mail::before,
html .listing tr.mail > td::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.headers-details::before,
html a.headers-summary::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

html a.headers-all::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2016.5v-5.2M12%208.2h.01%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2016.5v-5.2M12%208.2h.01%27%2F%3E%3C%2Fsvg%3E");
}

html a.plain::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%204.5h9l5%205v10h-14zM14%204.5v5h5%27%2F%3E%3C%2Fsvg%3E");
}

html a.html::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2021h8M12%2017v4%27%2F%3E%3C%2Fsvg%3E");
}

html a.extwin::before,
html a.button.icon.extwin::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%204h6v6%27%2F%3E%3Cpath%20d%3D%27M20%204%2010.5%2013.5%27%2F%3E%3Cpath%20d%3D%27M18%2013.5V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h5.5%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%204h6v6%27%2F%3E%3Cpath%20d%3D%27M20%204%2010.5%2013.5%27%2F%3E%3Cpath%20d%3D%27M18%2013.5V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h5.5%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.compose::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.mail::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%207%209%206%209-6%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.contacts::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.settings::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M12%202.9v2.7M12%2018.4v2.7M2.9%2012h2.7M18.4%2012h2.7%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.about::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2016.5v-5.2M12%208.2h.01%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2016.5v-5.2M12%208.2h.01%27%2F%3E%3C%2Fsvg%3E");
}

html #taskmenu a.logout::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%205.5V4a1.5%201.5%200%200%200-1.5-1.5h-8A1.5%201.5%200%200%200%204%204v16a1.5%201.5%200%200%200%201.5%201.5h8A1.5%201.5%200%200%200%2015%2020v-1.5M10%2012h10m0%200-3-3m3%203-3%203%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M15%205.5V4a1.5%201.5%200%200%200-1.5-1.5h-8A1.5%201.5%200%200%200%204%204v16a1.5%201.5%200%200%200%201.5%201.5h8A1.5%201.5%200%200%200%2015%2020v-1.5M10%2012h10m0%200-3-3m3%203-3%203%27%2F%3E%3C%2Fsvg%3E");
}

html a.input-group-text.icon.add::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
}

html a.input-group-text.icon.recipient::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279.5%27%20cy%3D%278%27%20r%3D%273.4%27%2F%3E%3Cpath%20d%3D%27M3%2020v-1a5%205%200%200%201%205-5h3a5%205%200%200%201%205%205v1%27%2F%3E%3Cpath%20d%3D%27M16.8%205.3a3.4%203.4%200%200%201%200%205.4M18.2%2014.3a5%205%200%200%201%202.8%204.5V20%27%2F%3E%3C%2Fsvg%3E");
}

html a.input-group-text.icon.edit::before {
	content: "" !important;
	font-family: inherit !important;
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -.125em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h4l10-10-4-4L4%2016v4Z%27%2F%3E%3Cpath%20d%3D%27m14.5%205.5%204%204%27%2F%3E%3C%2Fsvg%3E");
}