/* 乐邮 Mail — overlay on Elastic. Do not edit styles.min.css. */

:root {
  --ly-bg: #070b14;
  --ly-bg2: #0b1220;
  --ly-panel: #111827;
  --ly-panel2: #0f172a;
  --ly-line: rgba(34, 211, 238, 0.16);
  --ly-line2: rgba(34, 211, 238, 0.32);
  --ly-cyan: #22d3ee;
  --ly-text: #e5e7eb;
  --ly-muted: #94a3b8;
  --ly-ink: #042f2e;
  --ly-danger: #fb7185;
}

html,
html.dark-mode,
html.iframe,
html.iframe.dark-mode,
body,
html.dark-mode body,
html.iframe body {
  background: var(--ly-bg) !important;
  color: var(--ly-text);
  scrollbar-color: #164e63 var(--ly-panel);
}

html.dark-mode #logo,
#logo {
  opacity: 1 !important;
}

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

#layout-menu,
#layout-menu .popover-header,
#layout-menu .special-buttons {
  background: var(--ly-bg) !important;
  border-color: var(--ly-line) !important;
}

#layout-menu {
  border-right: 1px solid var(--ly-line) !important;
}

#layout-sidebar,
#layout-list,
#layout-content,
#layout > div > .header,
#layout > div > .footer,
.listbox,
.listbox > .header,
.listbox > .footer,
.scroller {
  background-color: var(--ly-panel) !important;
  border-color: var(--ly-line) !important;
  color: var(--ly-text);
}

#layout-list,
#layout-list > .header,
#layout-list > .footer {
  background-color: var(--ly-panel2) !important;
}

#layout-content,
#layout-content > .header {
  background-color: var(--ly-bg2) !important;
}

#layout > div > .header,
#layout > div > .footer,
.header-title,
.header-title.username {
  background-color: var(--ly-panel2) !important;
  color: var(--ly-muted) !important;
}

/* Task menu */
#taskmenu a {
  color: var(--ly-muted) !important;
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus {
  color: var(--ly-cyan) !important;
  background: rgba(34, 211, 238, 0.12) !important;
}

#taskmenu a.compose,
#taskmenu .action-buttons a {
  color: var(--ly-cyan) !important;
}

#taskmenu a.logout {
  color: var(--ly-danger) !important;
}

#taskmenu a.theme {
  display: none !important;
}

.searchbar {
  background: rgba(7, 11, 20, 0.55) !important;
  border-color: var(--ly-line) !important;
}

.searchbar form:before,
.searchbar a,
.searchbar input {
  color: var(--ly-muted) !important;
  background: transparent !important;
}

.searchbar input {
  color: var(--ly-text) !important;
}

/* Lists */
.listing,
.listing li,
.listing td,
.listing tbody td,
.listing tbody td a,
.listing li a,
.folderlist li a,
.messagelist,
.messagelist td,
.treelist li a {
  color: var(--ly-text) !important;
  border-color: rgba(148, 163, 184, 0.08) !important;
  background-color: transparent;
}

.listing li:hover > a,
.listing tr:hover td,
.folderlist li:hover > a {
  background: rgba(34, 211, 238, 0.05) !important;
}

.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td,
.folderlist li.selected,
.folderlist li.selected > a {
  background: rgba(34, 211, 238, 0.1) !important;
  color: var(--ly-text) !important;
}

.folderlist li.selected {
  box-shadow: inset 2px 0 0 var(--ly-cyan);
}

.folderlist li.mailbox .unreadcount,
.listing .unreadcount {
  background: var(--ly-cyan) !important;
  color: var(--ly-ink) !important;
  font-weight: 700 !important;
}

.messagelist tr td.subject span.size,
.messagelist tr td.subject span.date,
.messagelist tr td.subject span.fromto,
.messagelist span.attachment span {
  color: var(--ly-muted) !important;
}

.messagelist tr.unread td.subject span.subject a {
  font-weight: 700;
  color: var(--ly-text) !important;
}

.messagelist tr.flagged:not(.deleted) td,
.messagelist tr.flagged:not(.deleted) span.flag {
  color: #fbbf24 !important;
}

.listing li.disabled,
.listing tr.disabled td,
.messagelist tr.deleted td,
.messagelist tr.deleted td a {
  color: #64748b !important;
}

.quota-widget,
.quota-widget .count,
#quotadisplay {
  color: var(--ly-muted) !important;
}

.quota-widget .bar,
.quota-widget .value {
  background: #1f2937 !important;
}

.quota-widget .value {
  background: var(--ly-cyan) !important;
}

.menu.pagenav,
.menu.pagenav .pagenav-text,
.menu.pagenav a {
  color: var(--ly-muted) !important;
  background: var(--ly-panel2) !important;
  border-color: var(--ly-line) !important;
}

.menu.toolbar a,
.header a.button,
.footer a.button {
  color: var(--ly-muted) !important;
}

.menu.toolbar a:hover,
.menu.toolbar a:focus,
.header a.button:hover,
.header a.button.icon:hover,
.menu a:not(.disabled):hover {
  color: var(--ly-cyan) !important;
  background: rgba(34, 211, 238, 0.1) !important;
}

.menu.toolbar a.selected {
  color: var(--ly-cyan) !important;
  background: transparent !important;
}

.btn-primary,
#rcmloginsubmit,
button.btn.btn-primary {
  background: linear-gradient(135deg, #22d3ee, #0ea5e9) !important;
  border: 0 !important;
  color: var(--ly-ink) !important;
}

.btn-secondary,
button.btn.btn-secondary {
  background: var(--ly-panel2) !important;
  border: 1px solid var(--ly-line) !important;
  color: var(--ly-text) !important;
}

.btn-danger,
button.btn.btn-danger {
  background: #7f1d1d !important;
  border: 0 !important;
  color: #fecaca !important;
}

.form-control,
.custom-select,
select.form-control,
input.form-control,
textarea.form-control,
.input-group-text,
.form-control-plaintext,
.propform input,
.propform select,
.propform textarea {
  background: rgba(7, 11, 20, 0.7) !important;
  border-color: var(--ly-line) !important;
  color: var(--ly-text) !important;
}

.form-control:focus,
input.form-control:focus,
.propform input:focus,
.propform select:focus,
.propform textarea:focus {
  border-color: var(--ly-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15) !important;
}

.formcontent,
.propform,
.propform fieldset,
.propform legend,
.form-group,
.col-form-label {
  color: var(--ly-text) !important;
  background: transparent;
  border-color: var(--ly-line) !important;
}

table.propform td,
table.propform th {
  color: var(--ly-text) !important;
  border-color: var(--ly-line) !important;
}

.popover,
.popupmenu,
.ui-dialog,
.ui-widget-content,
.ui-widget-header,
.modal-content,
.popover-header {
  background: var(--ly-panel) !important;
  border-color: var(--ly-line2) !important;
  color: var(--ly-text) !important;
}

.popupmenu .listing li > a,
.popover .menu li a,
.ui-dialog .ui-dialog-title,
.ui-dialog .ui-dialog-content {
  color: var(--ly-text) !important;
}

.popupmenu .listing li > a:hover,
.popover .menu li a:hover {
  background: rgba(34, 211, 238, 0.1) !important;
  color: var(--ly-cyan) !important;
}

.iframe-loader {
  background: rgba(7, 11, 20, 0.8) !important;
}

.attachmentslist,
.attachmentslist li {
  background: var(--ly-panel2) !important;
  border-color: var(--ly-line) !important;
  color: var(--ly-text) !important;
}

#message-header,
#message-content,
#messagebody,
.contact-details,
.contact-header,
#contact-details {
  background: var(--ly-bg2) !important;
  color: var(--ly-text) !important;
  border-color: var(--ly-line) !important;
}

#message-header .header,
#message-header .subject {
  color: var(--ly-text) !important;
}

/* Keep actual email HTML as authored */
.message-htmlpart,
.message-part,
#messagebody .message-htmlpart,
#messagebody .message-parthtml {
  color: inherit;
  background: #fff;
}

body.task-compose #layout-sidebar,
body.task-compose #compose-attachments,
body.task-compose #compose-options {
  background: var(--ly-panel) !important;
  color: var(--ly-text) !important;
}

body.task-compose .recipient-input,
body.task-compose .input-group,
#compose_to,
#compose_cc,
#compose_bcc,
#compose_subject {
  background: rgba(7, 11, 20, 0.7) !important;
  color: var(--ly-text) !important;
  border-color: var(--ly-line) !important;
}

.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-menubar,
.tox .tox-sidebar-wrap,
.tox .tox-editor-header,
.html-editor .editor-toolbar {
  background: var(--ly-panel2) !important;
  border-color: var(--ly-line) !important;
}

.tox .tox-tbtn,
.tox .tox-mbtn,
.html-editor .editor-toolbar a {
  color: var(--ly-muted) !important;
}

.tox .tox-edit-area,
.tox .tox-edit-area__iframe {
  background: #fff !important;
}

#messagestack div,
.ui.alert {
  color: var(--ly-text) !important;
}

.nav-tabs .nav-link {
  color: var(--ly-muted) !important;
  border-color: var(--ly-line) !important;
}

.nav-tabs .nav-link.active {
  color: var(--ly-cyan) !important;
  background: var(--ly-panel2) !important;
  border-color: var(--ly-line) var(--ly-line) var(--ly-panel2) !important;
}

html.iframe #layout,
html.iframe body,
html.iframe .formcontent,
html.iframe #layout-content {
  background: var(--ly-bg2) !important;
  color: var(--ly-text) !important;
}

/* ----- Login ----- */
body.task-login {
  background:
    radial-gradient(900px 500px at 18% 20%, rgba(34, 211, 238, 0.16), transparent 55%),
    radial-gradient(700px 420px at 90% 80%, rgba(14, 165, 233, 0.12), transparent 50%),
    var(--ly-bg) !important;
}

body.task-login::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

body.task-login #layout,
body.task-login #layout-content {
  background: transparent !important;
  border: 0 !important;
}

body.task-login #layout-content.leyou-login {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 24px 48px;
  text-align: left !important;
  position: relative;
  z-index: 1;
}

body.task-login .leyou-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  flex: 0 0 auto;
}

body.task-login #logo {
  position: static !important;
  top: auto !important;
  display: block !important;
  width: 168px;
  max-height: none !important;
  height: auto;
  margin: 0;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.28));
}

body.task-login .leyou-title {
  margin-top: 22px;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ly-text);
  line-height: 1.2;
  white-space: nowrap;
}

body.task-login .leyou-title span {
  color: var(--ly-cyan);
}

body.task-login #login-form {
  position: relative !important;
  top: auto !important;
  margin: 0;
  width: 380px;
  max-width: 380px;
  flex: 0 0 380px;
  padding: 32px 28px 22px;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.72);
  border: 1px solid var(--ly-line2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

body.task-login .leyou-login-heading {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ly-text);
  text-align: left;
}

body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form .form-group {
  display: block;
  width: 100%;
}

body.task-login #rcmloginsubmit {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 10px;
}

body.task-login #login-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: var(--ly-muted);
  font-size: 12px;
  z-index: 2;
  flex: none;
}

@media (max-width: 720px) {
  body.task-login #layout-content.leyou-login {
    flex-direction: column;
    gap: 20px;
  }

  body.task-login .leyou-brand {
    align-items: center;
  }

  body.task-login #logo {
    width: 96px;
  }

  body.task-login .leyou-title {
    font-size: 28px;
    margin-top: 10px;
  }

  body.task-login #login-form {
    margin: 0 auto;
    width: min(380px, 100%);
    flex-basis: auto;
  }
}