html,
html.dark-mode {
  color-scheme: dark;
  background: #08080b !important;
  scrollbar-color: #7a01e6 #17171d;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-track,
html:not(.touch) ::-webkit-scrollbar-track {
  background: #17171d !important;
}

html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb,
html:not(.touch) ::-webkit-scrollbar-thumb {
  background: #7a01e6 !important;
}

body,
html.dark-mode body,
body.task-login {
  background: #08080b !important;
  color: #ffffff !important;
}

#layout,
#layout-content,
#layout-list,
#layout-sidebar,
#layout > div > .header,
#layout > div > .footer,
.header,
.footer,
.listbox,
.listing,
.records-table,
.messagelist,
.message-part,
#message-header,
#message-content,
.popup,
.popover,
.menu,
.ui.alert,
.formcontent,
#login-form,
.propform,
.searchbar,
.folderlist,
.contactlist,
.scroller,
.content,
.iframe-wrapper,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: #101014 !important;
  color: #ffffff !important;
  border-color: #292932 !important;
}

#layout-menu,
html.dark-mode #layout-menu,
html.dark-mode.layout-phone #layout-menu,
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: #08080b !important;
  color: #ffffff !important;
  border-color: #292932 !important;
}

a,
.listing a,
.messagelist a,
html.dark-mode a {
  color: #d7c2e3;
}

a:hover,
#layout-menu a.selected,
#layout-menu a:hover,
li.selected,
tr.selected,
.folderlist li.selected,
.messagelist li.selected,
html.dark-mode #layout-menu a.selected {
  background: #1a1024 !important;
  color: #ffffff !important;
}

input,
select,
textarea,
.form-control,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background: #17171d !important;
  color: #ffffff !important;
  border: 1px solid #292932 !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7a01e6 !important;
}

button,
.button,
.btn,
.btn-primary,
a.button.mainaction,
html.dark-mode button,
body.task-login button,
body.task-login .button {
  background: #7a01e6 !important;
  border-color: #7a01e6 !important;
  color: #ffffff !important;
}

button:hover,
.button:hover,
.btn:hover,
a.button.mainaction:hover {
  background: #9b45f5 !important;
  border-color: #9b45f5 !important;
}

.button.icon,
a.button.icon,
#layout-menu a {
  background: transparent !important;
  color: #ffffff !important;
}

#layout-menu a.selected,
#layout-menu a:hover {
  color: #9b45f5 !important;
}

.quota-widget,
.quota-text,
#quotadisplay {
  color: #a1a1aa !important;
}

.quota-widget .bar,
.quotabar {
  background: #17171d !important;
}

.quota-widget .value,
.quotabar .value {
  background: linear-gradient(90deg, #7a01e6, #9b45f5) !important;
}

.unread,
.messagelist span.subject {
  color: #ffffff !important;
}

.muted,
.hint,
.footer,
html.dark-mode #layout > div > .footer {
  color: #a1a1aa !important;
}

#messagestack div,
html.dark-mode #messagestack div,
.ui.alert.boxinformation,
html.dark-mode .ui.alert.boxinformation {
  background: #17171d !important;
  color: #ffffff !important;
  border-color: #7a01e6 !important;
}

.astral-upsell {
  position: fixed;
  right: 18px;
  bottom: 16px;
  z-index: 40;
  max-width: 280px;
  padding: 12px 14px;
  background: #101014;
  border: 1px solid #7a01e6;
  border-radius: 12px;
  box-shadow: 0 16px 40px #0009;
}

.astral-upsell a {
  display: inline-block;
  margin-bottom: 4px;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
}

.astral-upsell span {
  display: block;
  color: #a1a1aa;
  font-size: 12px;
  line-height: 1.4;
}

body.task-login .astral-upsell {
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  text-align: center;
}

@media (max-width: 720px) {
  .astral-upsell {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}