:root { font-size: 16px; }

body,
#layout > div > .header,
#layout > div > .footer,
.ui-dialog .ui-dialog-title,
.menu.toolbar a,
.propform td.rowbuttons a,
div.tox,
div.tox .tox-dialog__title { font-size: var(--mp-chu); }

.messagelist td { font-size: var(--mp-chu) !important; }

#layout .messagelist td.subject span.date,
#layout .messagelist td.subject span.size,
#layout .messagelist td.subject span.adr,
#layout .messagelist td.subject span.rcmContactAddress { font-size: var(--mp-chu-sm); }

html { --mailpro-skin: "on"; }
html.dark-mode { --mailpro-skin: "on-dark"; }

#layout-menu,
#layout-menu .popover-header { background: var(--mp-rail); }

html.dark-mode #layout-menu { background: var(--mp-rail); border-right: 1px solid var(--mp-line); }
html.dark-mode #layout-menu .popover-header,
html.dark-mode #layout-menu .special-buttons { background: var(--mp-rail) !important; }
#layout-menu #taskmenu a { color: var(--mp-rail-fg); }
#layout-menu #taskmenu a:hover { background: var(--mp-rail-2); color: var(--mp-on-color); }
#layout-menu #taskmenu a.selected {
  background: var(--mp-rail-2);
  color: var(--mp-on-color);
  box-shadow: inset 3px 0 0 var(--mp-accent);
}

#layout-menu #taskmenu .special-buttons { background: transparent; }
#layout-menu #taskmenu a.logout { color: var(--mp-rail-fg) !important; }
#layout-menu #taskmenu a.logout:hover {
  background: var(--mp-danger); color: var(--mp-on-color) !important;
}

#layout-sidebar { background: var(--mp-pane); }
#layout-sidebar .header { background: var(--mp-surface); border-bottom: 1px solid var(--mp-line); }
#layout-sidebar #folderlist-content { background: var(--mp-pane); }

#mailboxlist li.selected > a,
#mailboxlist li.selected > a:hover {
  background: var(--mp-pri);
  color: var(--mp-on-color);
  font-weight: 600;
}
#mailboxlist li.selected > a .unreadcount { background: rgba(255,255,255,.22); color: var(--mp-on-color); }
#mailboxlist li > a:hover { background: var(--mp-hover); }

#mailboxlist .unreadcount { color: var(--mp-pri); font-weight: 700; }

#layout-sidebar .footer { background: var(--mp-pane); border-top: 1px solid var(--mp-line); }
#quotadisplay .progress { background: var(--mp-line); }
#quotadisplay .progress-bar { background: var(--mp-pri); }

#layout-list { background: var(--mp-surface); }
#layout-list .header,
#layout-list .searchbar { background: var(--mp-surface); border-bottom: 1px solid var(--mp-line); }
#messagelist tbody tr { border-bottom: 1px solid var(--mp-line-2); }
#messagelist tbody tr:hover { background: var(--mp-hover); }

#messagelist tbody tr.selected,
#messagelist tbody tr.selected:hover {
  background: var(--mp-sel);
  box-shadow: inset 3px 0 0 var(--mp-pri);
}
#messagelist tbody tr.selected td { color: var(--mp-text); }

#messagelist tbody tr.unread td.subject { font-weight: 700; color: var(--mp-text); }
#messagelist tbody tr.unread td.fromto { font-weight: 700; }
#messagelist .msgicon.status.unread { color: var(--mp-pri); }

#layout-content { background: var(--mp-surface); }
#layout-content .header { background: var(--mp-surface); border-bottom: 1px solid var(--mp-line); }

.toolbar a.button.compose,
a.button.compose { color: var(--mp-pri); }
.btn-primary,
button.btn.btn-primary {
  background: var(--mp-pri);
  border-color: var(--mp-pri);
  color: var(--mp-on-color);
}
.btn-primary:hover,
button.btn.btn-primary:hover { background: var(--mp-pri-d); border-color: var(--mp-pri-d); }
a { color: var(--mp-pri); }

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-color: var(--mp-pri);
  box-shadow: 0 0 0 3px rgba(0,102,204,.12);
}

#layout > div > .header,
#layout > div > .footer {
  background-color: var(--mp-surface);
  border-color: var(--mp-line);
  color: var(--mp-text);
}

#layout > div.list,
#layout > div.content,
#layout > div.content .content,
#messagelist,
.messagelist {
  background-color: var(--mp-surface);
}

#layout > div.sidebar {
  background-color: var(--mp-pane);
}

#messagelist tbody tr td,
#messagelist tbody tr td span.subject,
#layout > div > .header .header-title {
  color: var(--mp-text);
}

#messagelist tbody tr td span.from span,
#messagelist tbody tr td span.date {
  color: var(--mp-muted);
}

#messagelist tbody tr:hover td {
  background-color: var(--mp-hover);
}

#messagelist tbody tr.selected td,
#messagelist tbody tr.focused td {
  background-color: var(--mp-sel);
  color: var(--mp-text);
}

.contextmenu.popover > .popover-header {
  display: none !important;
}

.contextmenu.popover {
  min-width: 190px;
  padding: var(--mp-s1) 0;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);

  box-shadow: var(--mp-sh-2);
  background: var(--mp-surface);
}

.contextmenu.popover .popover-body {
  padding: 0;
  max-height: min(70vh, 560px);
}

.contextmenu.popover ul.menu > li > a.button {
  display: flex;
  align-items: center;
  gap: var(--mp-s2);
  padding: var(--mp-s1h) var(--mp-s3h);
  min-height: 0;
  font-size: var(--mp-chu-md);
  line-height: 1.35;
  color: var(--mp-text);
  border: 0;
}

.contextmenu.popover ul.menu > li > a.button:hover,
.contextmenu.popover ul.menu > li > a.button:focus {
  background: var(--mp-hover);
  color: var(--mp-pri);
}

.contextmenu.popover ul.menu > li.separator,
.contextmenu.popover ul.menu > li.separator_above {
  border-top: 1px solid var(--mp-line-2);
  margin: var(--mp-s1) 0;
}

html.layout-phone .contextmenu.popover:not(.select-menu),
html.layout-small .contextmenu.popover:not(.select-menu) {
  top: auto !important;
  left: var(--mp-s2) !important;
  right: var(--mp-s2) !important;
  bottom: var(--mp-s2) !important;
  width: calc(100vw - 16px) !important;
  max-width: none !important;
  height: auto !important;
  max-height: 70vh;
  margin: 0 !important;
  border: 1px solid var(--mp-line) !important;
  border-radius: var(--mp-r-md);
  overflow: hidden;
}

html.layout-phone .contextmenu.popover ul.menu,
html.layout-small .contextmenu.popover ul.menu {
  min-width: 0;
  width: 100%;
}

html.layout-phone .contextmenu.popover .popover-body,
html.layout-small .contextmenu.popover .popover-body {
  padding: var(--mp-s1) 0;
}

html.layout-phone .contextmenu.popover ul.menu > li > a.button,
html.layout-small .contextmenu.popover ul.menu > li > a.button {
  padding: var(--mp-s3) var(--mp-s4);
  font-size: var(--mp-chu);
}

#layout .btn,
#layout button.btn,
#layout a.button.btn,
.ui-dialog .ui-dialog-buttonset button,
.ui-dialog .ui-dialog-buttonset a.button,
.formbuttons .btn,
#compose-attachments .btn,
.attachment-form .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-s2);
  height: var(--mp-h-nut);
  min-height: var(--mp-h-nut);
  padding: 0 var(--mp-s5);
  border-radius: var(--mp-r-pill);
  font-size: var(--mp-chu);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

#layout .btn.btn-primary,
.ui-dialog .ui-dialog-buttonset button.mainaction,
.formbuttons .btn.btn-primary {
  min-width: 112px;
  padding: 0 var(--mp-s6);
  background-color: var(--mp-pri);
  border: 1px solid var(--mp-pri);
  color: var(--mp-on-color);
}

#layout .btn.btn-primary:hover,
.ui-dialog .ui-dialog-buttonset button.mainaction:hover,
.formbuttons .btn.btn-primary:hover {
  background-color: var(--mp-pri-d);
  border-color: var(--mp-pri-d);
  color: var(--mp-on-color);
}

#layout .btn:focus-visible,
.ui-dialog .ui-dialog-buttonset button:focus-visible,
.formbuttons .btn:focus-visible {
  outline: 2px solid var(--mp-pri);
  outline-offset: 2px;
}

#layout .btn.btn-secondary,
.mp-sh-nut .btn.btn-secondary,
.mp-sh-tat .btn.btn-secondary,
.ui-dialog .ui-dialog-buttonset button:not(.mainaction):not(.delete),
.formbuttons .btn.btn-secondary,
#compose-attachments .btn,
.attachment-form .btn {
  background-color: var(--mp-surface);
  border: 1px solid var(--mp-line);
  color: var(--mp-text);
}

#layout .btn.btn-secondary:hover,
.mp-sh-nut .btn.btn-secondary:hover,
.mp-sh-tat .btn.btn-secondary:hover,
.ui-dialog .ui-dialog-buttonset button:not(.mainaction):not(.delete):hover,
.formbuttons .btn.btn-secondary:hover,
#compose-attachments .btn:hover,
.attachment-form .btn:hover {
  background-color: var(--mp-sel);
  border-color: var(--mp-pri);
  color: var(--mp-pri);
}

#layout .btn.btn-danger,
.ui-dialog .ui-dialog-buttonset button.delete {
  background-color: var(--mp-danger);
  border-color: var(--mp-danger);
  color: var(--mp-on-color);
}

#layout > div > .header a.button:not(.btn),
#messagetoolbar a.button:not(.btn),
.toolbar a.button:not(.btn) {
  border-radius: var(--mp-r-pill);
  transition: background-color .12s ease, color .12s ease;
}

#layout > div > .header a.button:not(.btn):hover,
#messagetoolbar a.button:not(.btn):hover,
.toolbar a.button:not(.btn):hover {
  background-color: var(--mp-sel);
  color: var(--mp-pri);
}

#layout input[type="text"],
#layout input[type="email"],
#layout input[type="password"],
#layout input[type="search"],
#layout input[type="number"],
#layout textarea,
#layout select,
#layout .ui-input,
#layout .recipient-input,
#layout .ui-input-group,
#_to,
#_cc,
#_bcc,
.ui-dialog input[type="text"],
.ui-dialog input[type="password"],
.ui-dialog textarea,
.ui-dialog select {
  border-radius: var(--mp-r-sm);
}

.ui-dialog {
  border-radius: var(--mp-r-md);
  overflow: hidden;
  border: 1px solid var(--mp-line);

  box-shadow: var(--mp-sh-2);
}

.ui-dialog .ui-dialog-titlebar {
  border-radius: var(--mp-r-md) var(--mp-r-md) 0 0;
}

.ui-dialog .ui-dialog-buttonpane {
  border-radius: 0 0 var(--mp-r-md) var(--mp-r-md);
}

#compose-attachments .attachment-form,
#layout .dropzone,
#layout .boxcontent,
#layout .box,
#layout .content-box,
#layout fieldset.propform,
#layout .contentbox {
  border-radius: var(--mp-r-md);
}

#layout .contact-photo,
#layout .avatar,
#layout img.contactphoto {
  border-radius: var(--mp-r-pill);
}

#layout > div#layout-content > .header {
  justify-content: flex-start;
  padding-left: var(--mp-s3);
  padding-right: var(--mp-s3);
  gap: var(--mp-s1);
}

#layout > div#layout-content > .header .header-title {
  text-align: left;
  margin: 0;
  flex: 1;
  min-width: 0;
}

@media screen and (min-width: 769px) {
  #toolbar-menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
}

#toolbar-menu > li {
  order: 5;
}
#toolbar-menu > li:has(> a.reply)      { order: 1; }
#toolbar-menu > li:has(> a.reply-all)  { order: 2; }
#toolbar-menu > li:has(> a.forward)    { order: 3; }
#toolbar-menu > li:has(> a.junk),
#toolbar-menu > li:has(> a.notjunk)    { order: 6; }
#toolbar-menu > li:has(> a.markmessage){ order: 7; }
#toolbar-menu > li:has(> a.more)       { order: 8; }

#toolbar-menu > li:has(> a.delete) {
  order: 9;
  margin-left: var(--mp-s4);
}
#toolbar-menu > li:has(> a.delete) > a:hover {
  background: var(--mp-danger);
  color: var(--mp-on-color);
}

#layout > div > .header,
#layout > div > .header .header-title,
#layout > div > .footer {
  font-weight: 500;
}

#messagelist tbody tr > td {
  border-bottom-color: var(--mp-line-2);
}

#messagelist tbody tr.selected > td:first-child,
#messagelist tbody tr.focused > td:first-child {
  box-shadow: inset 3px 0 0 var(--mp-pri);
}

#layout .searchbar,
#layout .searchbar input,
#layout .ui-searchbar {
  border-radius: var(--mp-r-sm);
}

#layout .searchbar {
  background-color: var(--mp-pane);
  border: 1px solid var(--mp-line);
}

#layout .searchbar:focus-within {
  border-color: var(--mp-pri);
  background-color: var(--mp-surface);
}

#layout .searchbar {
  margin: var(--mp-s1) var(--mp-s2);
}

#layout > div > .footer.pagenav {
  padding-left: var(--mp-s2) !important;
  padding-right: var(--mp-s2) !important;
}

#layout .footer.pagenav input.form-control {
  min-height: 0;
  max-height: none;
  height: var(--mp-s6);
  padding: 0 var(--mp-s2);
  margin: 0 var(--mp-s1h);
  font-size: var(--mp-chu-sm);
  line-height: calc(var(--mp-s6) - 2px);
}

#layout > div.content > .header .toolbar,
#messagetoolbar {
  gap: var(--mp-s1);
}

#messagebody,
#layout > div.content .message-part,
#layout > div.content .message-htmlpart {
  padding-left: var(--mp-s2);
  padding-right: var(--mp-s2);
}

#layout .contact-photo img,
#layout img.contactphoto {
  opacity: .55;
}

#layout .ui.alert.alert-success,
#layout .boxconfirmation {
  background: var(--mp-ok-bg);
  border-color: var(--mp-ok);
  color: var(--mp-ok-fg);
}

#layout .ui.alert.alert-warning,
#layout .boxwarning {
  background: var(--mp-warn-bg);
  border-color: var(--mp-warn);
  color: var(--mp-warn-fg);
}

#layout .ui.alert.alert-danger,
#layout .boxerror {
  background: var(--mp-bad-bg);
  border-color: var(--mp-bad);
  color: var(--mp-bad-fg);
}

#layout .boxerror .error-title {
  text-transform: lowercase;
  font-weight: 500;
}
#layout .boxerror .error-title::first-letter { text-transform: uppercase; }
#layout .boxerror .error-text a { color: inherit; text-decoration: underline; }

#layout .ui.alert.alert-info {
  background: var(--mp-pri-bg);
  border-color: var(--mp-pri);
  color: var(--mp-pri-d);
}

body #messagestack div.confirmation { background: var(--mp-ok); color: var(--mp-on-color); }
body #messagestack div.warning      { background: var(--mp-warn); color: var(--mp-on-color); }
body #messagestack div.error        { background: var(--mp-bad); color: var(--mp-on-color); }
body #messagestack div.notice       { background: var(--mp-pri); color: var(--mp-on-color); }
body #messagestack div { border-radius: var(--mp-r-sm); }

#messagelist tbody tr.unread td span.msgicon.status,
#messagelist tbody tr.unread td span.flag {
  color: var(--mp-pri);
}

#messagelist tbody tr td span.flagged,
#messagelist tbody tr td span.flagged:before {
  color: var(--mp-bad);
}

#messagelist.junk tbody tr td span.msgicon.status {
  color: var(--mp-warn);
}

#messagelist tbody tr td.subject,
#messagelist tbody tr td.flags {
  padding-left: var(--mp-s2);
  padding-right: var(--mp-s2);
}

#messagelist tbody tr td.subject span.fromto {
  padding-left: var(--mp-s5);
  padding-right: var(--mp-s2);
}

#mailsearchform,
#quotadisplay {
  padding: var(--mp-s2);
}

#mailboxlist li a,
#directorylist li a,
#layout > div.sidebar .listing li a {
  padding-left: var(--mp-s2);
  padding-right: var(--mp-s7);
}

#taskmenu span.inner,
#layout span.inner,
#layout span.button-inner {
  font-size: var(--mp-chu-sm);
  padding-left: var(--mp-s0);
  padding-right: var(--mp-s0);
}

#rcmquotadisplay,
#rcmcountdisplay,
#layout .footer.pagenav .countdisplay { font-size: var(--mp-chu-xs); }

#layout .form-control,
.ui-dialog .form-control {
  padding: var(--mp-s2) var(--mp-s3);
  min-height: var(--mp-h-nut-nho);
}

#layout .custom-control-label::before,
.ui-dialog .custom-control-label::before {
  background-color: var(--mp-line);
  border-color: var(--mp-line);
  border-radius: var(--mp-r-pill);
}

#layout .custom-control-input:checked ~ .custom-control-label::before,
.ui-dialog .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--mp-pri);
  border-color: var(--mp-pri);
}

#layout .custom-control-input:focus-visible ~ .custom-control-label::before,
.ui-dialog .custom-control-input:focus-visible ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--mp-pri-bg);
}

#layout .custom-control-input:disabled ~ .custom-control-label,
.ui-dialog .custom-control-input:disabled ~ .custom-control-label {
  opacity: .5;
  cursor: not-allowed;
}

#layout .custom-switch .custom-control-label::after,
.ui-dialog .custom-switch .custom-control-label::after {
  background-color: var(--mp-card);
  border-radius: var(--mp-r-pill);
}

#layout .form-control,
#layout select.form-control,
#layout .recipient-input,
#layout #compose-subject,
.ui-dialog .form-control {
  min-height: var(--mp-h-nut-nho);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-sm);
  background-color: var(--mp-surface);
  color: var(--mp-text);
}

#layout .input-group > .recipient-input,
#layout .recipient-input {
  border-radius: var(--mp-r-sm) !important;
  align-items: center;

  padding: var(--mp-s1) var(--mp-s3);
}

#layout .recipient-input > li.input { height: 26px; }

#layout .recipient-input li.recipient {
  border-radius: var(--mp-r-pill);
  background-color: var(--mp-pri-bg);
  border-color: var(--mp-line);
  padding: 0 var(--mp-s2);
  margin-right: var(--mp-s1);
}

#layout .recipient-input > input,
#layout #_to,
#layout #_cc,
#layout #_bcc {
  border: 0;
  min-height: auto;
  background: transparent;
}

#layout input.form-control,
#layout select.form-control,
.ui-dialog input.form-control {
  height: var(--mp-h-nut-nho);
}

#layout .form-control:focus,
#layout select.form-control:focus,
#layout .recipient-input:focus-within,
.ui-dialog .form-control:focus {
  border-color: var(--mp-pri);
  box-shadow: 0 0 0 3px var(--mp-pri-bg);
  outline: none;
}

#layout .recipient-input .recipient {
  background: var(--mp-pri-bg);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-pill);
  padding: 0 var(--mp-s2);
  margin: var(--mp-s0) var(--mp-s1) var(--mp-s0) 0;
  color: var(--mp-text);
}

#layout .input-group > a.button,
#layout td.editfield > a.button,
#layout .header-links a.button {
  height: var(--mp-h-nut-nho);
  min-height: var(--mp-h-nut-nho);
  border-radius: var(--mp-r-pill);
  padding: 0 var(--mp-s3);
}

#layout #compose-headers .input-group { position: relative; }
#layout #compose-headers .input-group > .form-control,
#layout #compose-headers .input-group > .recipient-input,
#layout #compose-headers .input-group > select.form-control { width: 100%; }
#layout #compose-headers .input-group-append {
  position: absolute; top: 0; right: 0; height: 100%;
  margin: 0; z-index: 2;
  display: flex; align-items: center;
}

#layout #compose-headers .input-group-append:nth-last-of-type(2) { right: var(--mp-icon-o); }

#layout #compose-headers .input-group:has(> .input-group-append) > .form-control,
#layout #compose-headers .input-group:has(> .input-group-append) > .recipient-input,
#layout #compose-headers .input-group:has(> .input-group-append) > select.form-control {
  padding-right: var(--mp-icon-o);
}
#layout #compose-headers .input-group:has(> .input-group-append ~ .input-group-append) > .form-control,
#layout #compose-headers .input-group:has(> .input-group-append ~ .input-group-append) > .recipient-input {
  padding-right: var(--mp-icon-2o);
}

#layout #compose-headers .input-group-append > .input-group-text,
#layout #compose-headers .input-group-append > a.button,
#layout #compose-headers .input-group-append > .btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  border-radius: var(--mp-r-pill) !important;
  width: var(--mp-icon-o);
  height: var(--mp-icon-o);
  min-height: 0;
  padding: 0;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--mp-muted);
}
#layout #compose-headers .input-group-append > .input-group-text:hover,
#layout #compose-headers .input-group-append > a.button:hover,
#layout #compose-headers .input-group-append > .btn:hover {
  background: var(--mp-hover) !important;
  color: var(--mp-text);
}

#layout #compose-headers .input-group-append { align-items: center; }

#layout-content > .header a,
#layout-content > .header a.button,
#settings-menu li a,
#directorylist li a,
#contacts-table td,
.pagenav a,
#layout .searchbar a { color: var(--mp-text); }

html #settings-menu li a { font-size: var(--mp-chu); }

#layout-content > .header a:hover,
#layout-content > .header a.button:hover,
#settings-menu li a:hover,
#directorylist li a:hover,
.pagenav a:hover,
#layout .searchbar a:hover { background: var(--mp-hover); color: var(--mp-text); }

#directorylist li.selected > a,
#contacts-table tr.selected td,
#settings-menu li.selected a,
#contacts-table tr:hover td { background-color: var(--mp-sel); color: var(--mp-text); }
#contacts-table tr:hover td { background-color: var(--mp-hover); }

#layout #messagelist tbody tr:not(.selected),
#layout #messagelist tbody tr:not(.selected) td,
#layout #mailboxlist li:not(.selected) > a,
#layout .pagenav a,
#layout .pagenav > a.button,
#layout-list .pagenav a { color: var(--mp-text); }

#layout .pagenav a:hover,
#layout .pagenav > a.button:hover,
#layout-list .pagenav a:hover { background-color: var(--mp-hover); color: var(--mp-text); }

#layout .pagenav a.disabled,
#layout-list .pagenav a.disabled { color: var(--mp-muted); background: transparent; }

.mp-av {
  display: flex; align-items: center; justify-content: center;
  width: var(--mp-av-o); height: var(--mp-av-o); flex: 0 0 auto;
  border-radius: var(--mp-r-pill);
  font-size: var(--mp-chu-md); font-weight: 500; letter-spacing: .02em;
  color: var(--mp-on-color);
  background: var(--mp-av-1);
  user-select: none;
}
.mp-av-1 { background: var(--mp-av-1); }
.mp-av-2 { background: var(--mp-av-2); }
.mp-av-3 { background: var(--mp-av-3); }
.mp-av-4 { background: var(--mp-av-4); }
.mp-av-5 { background: var(--mp-av-5); }
.mp-av-6 { background: var(--mp-av-6); }

.mp-av.mp-av-anh {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#layout #messagelist tbody td.subject { position: relative; padding-left: var(--mp-av-le); }
#layout #messagelist tbody td.subject > .mp-av {
  position: absolute; left: var(--mp-s2); top: 50%; transform: translateY(-50%);
}

@media (max-width: 480px) {
  #layout #messagelist tbody td.subject { padding-left: var(--mp-av-le-nho); }
  #layout #messagelist tbody td.subject > .mp-av {
    width: var(--mp-av-o-nho); height: var(--mp-av-o-nho); font-size: var(--mp-chu-sm); }
}

#message-header > .header .mp-av.mp-av-to,
.mp-av.mp-av-to {
  width: var(--mp-av-o-to);
  height: var(--mp-av-o-to);
  font-size: var(--mp-chu-lg);
  margin: 0 var(--mp-s4) 0 0;
  flex: 0 0 auto;
}

#layout .recipient-input li.recipient .email {
  display: inline !important;
  width: auto !important;
  text-indent: 0 !important;
  overflow: visible;
  color: var(--mp-muted);
  font-size: var(--mp-chu-sm);
}
#layout .recipient-input li.recipient {
  display: inline-flex; align-items: baseline; gap: var(--mp-s1);
  max-width: 100%;
}
#layout .recipient-input li.recipient .name { font-weight: 500; }

#message-header .mp-adr,
.mp-adr {
  margin-left: var(--mp-s1);
  color: var(--mp-muted);
  font-size: var(--mp-chu-sm);
  white-space: nowrap;
}

.mp-adr::before { content: "<"; }
.mp-adr::after { content: ">"; }

#layout #messagelist tbody td.subject span.fromto {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#layout #messagelist tbody td.subject span.fromto .mp-adr-ds {
  display: block;
  margin-left: 0;
  white-space: normal;
  word-break: break-word;
}

#layout .formbuttons .mp-huy {
  margin-left: var(--mp-s2);
  background: transparent;
  color: var(--mp-text);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-pill);
  height: var(--mp-h-nut);
  padding: 0 var(--mp-s4);
  font-size: var(--mp-chu);
}
#layout .formbuttons .mp-huy:hover { background: var(--mp-hover); border-color: var(--mp-pri); }

body .tox .tox-dialog { border-radius: var(--mp-r-md); border-color: var(--mp-line); }
body .tox .tox-dialog__header,
body .tox .tox-dialog__footer { background: var(--mp-surface); border-color: var(--mp-line); }
body .tox .tox-dialog__body { background: var(--mp-surface); }

body div.tox .tox-dialog__footer .tox-button,
body div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  border-radius: var(--mp-r-pill);
  height: var(--mp-h-nut-nho);
  padding: 0 var(--mp-s4);
  font-weight: 500;
  background: var(--mp-pri);
  background-color: var(--mp-pri);
  border-color: var(--mp-pri);
  color: var(--mp-on-color);
  box-shadow: none;
}
body div.tox .tox-dialog__footer .tox-button:hover:not(:disabled),
body div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active {
  background: var(--mp-pri-d);
  background-color: var(--mp-pri-d);
  border-color: var(--mp-pri-d);
}

body div.tox .tox-dialog__footer .tox-button.tox-button--secondary,
body div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled) {
  background: transparent;
  background-color: transparent;
  border-color: var(--mp-line);
  color: var(--mp-text);
  box-shadow: none;
}
body div.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled),
body div.tox .tox-dialog__footer .tox-button.tox-button--secondary:not(:disabled):not(.disabled):active {
  background: var(--mp-hover);
  background-color: var(--mp-hover);
  border-color: var(--mp-pri);
  color: var(--mp-text);
}

body .tox .tox-button--icon,
body .tox .tox-button--naked {
  background: transparent; border-color: transparent; color: var(--mp-muted);
  border-radius: var(--mp-r-pill);
}
body .tox .tox-button--icon:hover:not(:disabled),
body .tox .tox-button--naked:hover:not(:disabled) {
  background: var(--mp-hover); color: var(--mp-text);
}

body .tox .tox-textfield,
body .tox .tox-selectfield select,
body .tox .tox-textarea {
  border-radius: var(--mp-r-sm);
  border-color: var(--mp-line);
  background: var(--mp-surface);
  color: var(--mp-text);
}
body .tox .tox-textfield:focus,
body .tox .tox-selectfield select:focus,
body .tox .tox-textarea:focus {
  border-color: var(--mp-pri);
  box-shadow: 0 0 0 3px var(--mp-pri-bg);
}

body .tox .tox-toolbar,
body .tox .tox-toolbar__primary,
body .tox .tox-toolbar-overlord { background: var(--mp-surface); }
body .tox .tox-editor-header { border-bottom: 1px solid var(--mp-line); box-shadow: none; }
body .tox .tox-tbtn { border-radius: var(--mp-r-sm); color: var(--mp-text); }
body .tox .tox-tbtn:hover { background: var(--mp-hover); }
body .tox .tox-tbtn--enabled { background: var(--mp-pri-bg); color: var(--mp-pri); }

body .tox .tox-menu { border-radius: var(--mp-r-sm); border-color: var(--mp-line); }
body .tox .tox-collection__item--active { background: var(--mp-hover); }
body .tox .tox-collection__item--enabled { background: var(--mp-pri-bg); color: var(--mp-pri); }

html.dark-mode body div.tox .tox-dialog__footer .tox-button,
html.dark-mode body div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  background: var(--mp-pri);
  background-color: var(--mp-pri);
  border-color: var(--mp-pri);
  color: var(--mp-on-color);
}
html.dark-mode body div.tox .tox-dialog__footer .tox-button:hover:not(:disabled) {
  background-color: var(--mp-pri-d);
}
html.dark-mode body div.tox .tox-dialog__footer .tox-button.tox-button--secondary,
html.dark-mode body div.tox .tox-dialog__footer .tox-button.tox-button--secondary:focus:not(:disabled) {
  background: transparent;
  background-color: transparent;
  border-color: var(--mp-line);
  color: var(--mp-text);
}
html.dark-mode body div.tox .tox-dialog__footer .tox-button.tox-button--secondary:hover:not(:disabled) {
  background-color: var(--mp-hover);
  border-color: var(--mp-pri);
}

body div.tox .tox-textfield:focus,
body div.tox .tox-textarea:focus,
body div.tox .tox-selectfield select:focus,
html.dark-mode body div.tox .tox-textfield:focus,
html.dark-mode body div.tox .tox-textarea:focus {
  border-color: var(--mp-pri);
  box-shadow: 0 0 0 3px var(--mp-pri-bg);
}

#messagebody > .message-part,
.message-part > pre,
.message-part > div {
  max-width: var(--mp-do-dai-dong);
}

@media screen and (max-width: 768px) {

  #layout-content > .header #toolbar-menu a .inner,
  #layout-content > .header #toolbar-menu button .inner,
  #messagetoolbar a .inner,
  #messagetoolbar button .inner { display: none; }

  #layout-content > .header #toolbar-menu > li > a,
  #messagetoolbar > ul > li > a,
  #messagetoolbar a.button,
  #messagetoolbar button { min-width: 44px; padding-left: var(--mp-s2); padding-right: var(--mp-s2); }
}

#layout > div#layout-sidebar > .header {
  gap: var(--mp-s2);
  justify-content: flex-start;

  padding-left: var(--mp-s2);
  padding-right: var(--mp-s2);

  align-items: center;
}

#layout > div#layout-sidebar > .header a.sidebar-menu { display: none; }

#layout-sidebar > .header .mp-toi-av {
  width: 26px; height: 26px; font-size: var(--mp-chu-xs); flex: 0 0 auto;
}

#layout > div#layout-sidebar > .header .header-title {
  flex: 1 1 auto; min-width: 0; text-align: left; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mp-idav { display: flex; align-items: center; gap: var(--mp-s4); padding: var(--mp-s2) 0; }
.mp-idav .mp-idav-anh {
  width: 72px; height: 72px; font-size: var(--mp-chu-h1); flex: 0 0 auto;
  border-radius: var(--mp-r-pill);
}
.mp-idav .mp-idav-phai { min-width: 0; }
.mp-idav .mp-idav-nut { display: flex; gap: var(--mp-s2); flex-wrap: wrap; }

.mp-idav .custom-file { display: none; }
.mp-idav .mp-idav-goi {
  margin: var(--mp-s2) 0 0; font-size: var(--mp-chu-sm); color: var(--mp-muted);
  max-width: 44ch; line-height: 1.45;
}

#layout #mp-so-tudong.mp-ghichu {
  margin: 0;
  padding: var(--mp-s2) var(--mp-s3);
  background: var(--mp-pane);
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-muted);
  font-size: var(--mp-chu-sm);
  line-height: 1.45;
}

#contacts-table td.name,
#contacts-table td.contact {
  display: grid;
  grid-template-columns: var(--mp-s5) minmax(0, 1fr);
  column-gap: var(--mp-s2);
  align-items: center;
  padding-top: var(--mp-s2);
  padding-bottom: var(--mp-s2);
  line-height: 1.35;
}
#contacts-table td.name::before,
#contacts-table td.contact::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  font-weight: 400;
  color: var(--mp-muted);
}
#contacts-table td.name .mp-adr-dong,
#contacts-table td.contact .mp-adr-dong {
  grid-column: 2;
  margin-left: 0;
  margin-top: var(--mp-s0);
  overflow: hidden;
  text-overflow: ellipsis;
}
#contacts-table td.contact > a { grid-column: 2; min-width: 0; }

.mp-tb-ds {
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  overflow: hidden;
  margin-bottom: var(--mp-s5);
}

.mp-tb-may {
  display: flex;
  align-items: flex-start;
  gap: var(--mp-s3);
  padding: var(--mp-s3) var(--mp-s4);
  border-top: 1px solid var(--mp-line);
}
.mp-tb-may:first-child { border-top: 0; }

.mp-tb-icon {
  flex: 0 0 auto;
  color: var(--mp-muted);
  margin-top: var(--mp-s0);
}

.mp-tb-chu { min-width: 0; }

.mp-tb-ten {
  display: block;
  font-weight: 500;
  color: var(--mp-text);
}

.mp-tb-huong {
  display: block;
  margin-top: var(--mp-s0);
  font-size: var(--mp-chu-md);
  color: var(--mp-muted);
}

.mp-tb-nhan {
  margin: 0 0 var(--mp-s2);
  font-size: var(--mp-chu-md);
  color: var(--mp-muted);
}

.mailpro-thietbi-nut { margin: var(--mp-s3) 0 0; }

.mp-tb-bang {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  overflow: hidden;
}
.mp-tb-bang dt,
.mp-tb-bang dd {
  margin: 0;
  min-height: var(--mp-s7);
  padding: var(--mp-s2) var(--mp-s4);
  display: flex;
  align-items: center;
  gap: var(--mp-s2);
  min-width: 0;
}
.mp-tb-bang dt { color: var(--mp-muted); font-weight: 400; padding-right: var(--mp-s6); }
.mp-tb-bang dt:nth-of-type(n+2),
.mp-tb-bang dt:nth-of-type(n+2) + dd { border-top: 1px solid var(--mp-line); }
.mp-tb-gt { color: var(--mp-text); overflow-wrap: anywhere; }
.mp-tb-gt-mo { color: var(--mp-muted); }
.mp-tb-ct { color: var(--mp-muted); font-size: var(--mp-chu-md); }

#layout .mp-tb-bang .mp-chep,
#layout .mp-tb-bang .mp-chep.btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mp-s6); height: var(--mp-s6); min-width: 0; min-height: 0; gap: 0;
  padding: 0; border: 0; border-radius: 50%; box-shadow: none;
  background: transparent; color: var(--mp-muted); cursor: pointer;
}
#layout .mp-tb-bang .mp-chep svg { width: var(--mp-s4); height: var(--mp-s4); flex: 0 0 auto; }
#layout .mp-tb-bang .mp-chep:hover,
#layout .mp-tb-bang .mp-chep:focus-visible { background: var(--mp-hover); color: var(--mp-text); }
#layout .mp-tb-bang .mp-chep.da-chep { color: var(--mp-ok-fg); }

@media (max-width: 480px) {
  .mp-tb-may { flex-wrap: wrap; }
  .mp-tb-may .mp-tb-chu { flex: 1 1 0; }
  .mp-tb-may .mailpro-thietbi-nut { flex: 1 1 100%; margin: 0 0 0 calc(var(--mp-s6) + var(--mp-s3)); text-align: left; }
  .mp-tb-bang { grid-template-columns: minmax(0, 1fr); }
  .mp-tb-bang dt { min-height: 0; padding: var(--mp-s2) var(--mp-s4) 0; }
  .mp-tb-bang dd { padding-top: var(--mp-s0); flex-wrap: wrap; }
  .mp-tb-bang dt:nth-of-type(n+2) + dd { border-top: 0; }
}

.mp-sh-h {
  margin: var(--mp-s6) 0 var(--mp-s2);
  font-size: var(--mp-chu-lg);
  font-weight: 500;
  color: var(--mp-text);
}
.boxcontent > .mp-sh-h:first-child { margin-top: 0; }

.mp-sh-dong { align-items: center; }
.mp-sh-dong .mp-tb-chu { flex: 1 1 auto; }
.mp-sh-nut { display: flex; flex: 0 0 auto; gap: var(--mp-s2); }
.mp-sh-nut form { margin: 0; }

.mp-sh-ten { font-weight: 500; color: var(--mp-text); overflow-wrap: anywhere; }
.mp-sh-dc { color: var(--mp-muted); font-weight: 400; overflow-wrap: anywhere; }

.mp-sh-moi { display: grid; gap: var(--mp-s4); max-width: 520px; }
.mp-sh-f { display: grid; gap: var(--mp-s1); }
.mp-sh-f > label,
.mp-sh-lbl { font-weight: 500; color: var(--mp-text); }
.mp-sh-lvls { display: grid; gap: var(--mp-s1); }
.mp-sh-lvl {
  display: flex;
  align-items: flex-start;
  gap: var(--mp-s2);
  padding: var(--mp-s2) var(--mp-s3);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  cursor: pointer;
}
.mp-sh-lvl input { margin-top: var(--mp-s1); flex: 0 0 auto; }
.mp-sh-lvl:has(input:checked) { border-color: var(--mp-pri); }
.mp-sh-lvl-t { min-width: 0; }
.mp-sh-inbox { margin: var(--mp-s1) 0 0; color: var(--mp-warn-fg); }
.mp-sh-tat { margin: var(--mp-s3) 0 0; }

@media (max-width: 480px) {
  .mp-sh-dong { flex-wrap: wrap; }
  .mp-sh-dong .mp-sh-nut { flex: 1 1 100%; margin-left: calc(var(--mp-s6) + var(--mp-s3)); }
}
.mp-sh-inbox[hidden] { display: none; }
.mp-sh-moi select,
.mp-sh-moi input[type=email] { font-size: var(--mp-chu); }

html, body,
input, select, textarea, button,
.popupmenu, .ui-dialog, .menu, .listing, .toolbar,
#layout, #layout-sidebar, #layout-list, #layout-content {
  font-family: var(--mp-font);
}

.listing.iconized li.mailpro-share > a:before   { content: "\f1e0"; }
.listing.iconized li.mailpro-thietbi > a:before { content: "\f3cd"; }

.listing.iconized li.mailpro-forward > a:before { content: "\f064"; }

.formbuttons .mp-sched-group { display: inline-flex; align-items: stretch; }
#layout .formbuttons .mp-sched-group .btn.send,
.formbuttons .mp-sched-group .btn.send {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#layout .formbuttons .btn.mp-sched-split,
.formbuttons .btn.mp-sched-split {
  min-width: 44px;
  width: 44px;
  padding: 0;
  margin-left: calc(var(--mp-s0) / 2);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.formbuttons .btn.mp-sched-split:before {
  font-family: Icons;
  content: "\f078";
  font-weight: 900;
  font-size: var(--mp-chu-sm);
}

html.layout-phone .formbuttons .btn.mp-sched-split { display: none; }

.menu a.mp-sched-open:before { content: "\f017"; font-weight: 400; }

.folderlist li.mp-scheduled a:before { content: "\f017"; font-weight: 400; }

.mp-sched-list a.mp-sched-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-s4);
  min-height: 44px;
}
.mp-sched-list .mp-sched-when {
  color: var(--mp-muted);
  font-size: var(--mp-chu-md);
  white-space: nowrap;
}
.mp-sched-list a.mp-sched-custom { border-top: 1px solid var(--mp-line); }

html.layout-phone .mp-sched-list a.mp-sched-pick { flex-direction: column; align-items: flex-start; gap: var(--mp-s0); }
html.layout-phone .mp-sched-list .mp-sched-when { white-space: normal; }

.mp-sched-pickbox label { display: block; margin-bottom: var(--mp-s2); font-weight: 500; }
.mp-sched-pickbox .form-control { max-width: 100%; }
.mp-sched-pickbox .mp-sched-tz { margin: var(--mp-s2) 0 0; color: var(--mp-muted); font-size: var(--mp-chu-sm); }
.mp-sched-pickbox .mp-sched-live { margin: var(--mp-s2) 0 0; color: var(--mp-bad-fg); font-size: var(--mp-chu-md); }
.mp-sched-pickbox .mp-sched-live:empty { display: none; }

.mp-sched-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mp-s2) var(--mp-s3);
  margin: 0 0 var(--mp-s3);
  padding: var(--mp-s2h) var(--mp-s3);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  background: var(--mp-pri-bg);
  color: var(--mp-text);
  font-size: var(--mp-chu);
}
.mp-sched-band:before {
  font-family: Icons;
  content: "\f017";
  font-weight: 400;
  color: var(--mp-pri);
}
.mp-sched-band.mp-sched-ok   { background: var(--mp-ok-bg); }
.mp-sched-band.mp-sched-ok:before   { color: var(--mp-ok-fg); content: "\f00c"; font-weight: 900; }
.mp-sched-band.mp-sched-warn { background: var(--mp-warn-bg); }
.mp-sched-band.mp-sched-warn:before { color: var(--mp-warn-fg); }
.mp-sched-band.mp-sched-bad  { background: var(--mp-bad-bg); }
.mp-sched-band.mp-sched-bad:before  { color: var(--mp-bad-fg); content: "\f071"; font-weight: 900; }
.mp-sched-band .mp-sched-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.mp-sched-band .mp-sched-btns { display: inline-flex; flex-wrap: wrap; gap: var(--mp-s2); }
#mp-sched-alerts { padding: var(--mp-s2) var(--mp-s3) 0; }
#mp-sched-alerts .mp-sched-band { margin-bottom: var(--mp-s2); }