:root {
  --a12-void: #0a0a0f;
  --a12-panel: #111118;
  --a12-panel-soft: #171720;
  --a12-gold: #c6a86a;
  --a12-gold-bright: #d8bd7c;
  --a12-ink: #f7f0df;
  --a12-muted: #b8ab8c;
  --a12-border: rgba(198, 168, 106, 0.24);
}

html,
body,
#layout,
#layout-content,
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content .header,
.popupmenu,
.menu.toolbar,
.listing,
.box,
.uibox,
.iframe,
.popover,
.modal-content {
  background-color: var(--a12-void) !important;
  color: var(--a12-ink) !important;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(198, 168, 106, 0.12), transparent 34%),
    linear-gradient(180deg, #101016 0%, var(--a12-void) 54%) !important;
}

#layout-sidebar,
#layout-menu,
#layout-list {
  border-color: var(--a12-border) !important;
  background: linear-gradient(180deg, #101016 0%, var(--a12-void) 100%) !important;
}

#layout-content .header,
.toolbar,
.menu.toolbar,
.listing thead td,
.listing thead th,
.pagenav {
  background-color: var(--a12-panel) !important;
  border-color: rgba(198, 168, 106, 0.18) !important;
  color: var(--a12-ink) !important;
}

.listing li,
.listing tbody tr,
.messagelist tr,
.contactlist li,
.treelist li,
.folderlist li {
  background-color: transparent !important;
  color: var(--a12-ink) !important;
  border-color: rgba(198, 168, 106, 0.12) !important;
}

.listing li.selected,
.listing tbody tr.selected,
.messagelist tr.selected,
.contactlist li.selected,
.treelist li.selected,
.folderlist li.selected,
.listing li:hover,
.listing tbody tr:hover,
.messagelist tr:hover,
.contactlist li:hover,
.treelist li:hover,
.folderlist li:hover {
  background-color: rgba(198, 168, 106, 0.14) !important;
  color: var(--a12-ink) !important;
}

a,
a:visited,
.text-primary,
.header-title,
.listing .subject a,
.folderlist li.mailbox a,
.treelist li a {
  color: var(--a12-gold) !important;
}

a:hover,
.listing .subject a:hover,
.folderlist li.mailbox a:hover {
  color: var(--a12-gold-bright) !important;
}

button,
.button,
.btn,
input.button,
.ui-button,
.toolbar a.button,
.listing.iconized li a,
.popupmenu li a {
  border-color: rgba(198, 168, 106, 0.28) !important;
  color: var(--a12-ink) !important;
}

button.mainaction,
.button.mainaction,
.btn-primary,
input.button.mainaction {
  background-color: var(--a12-gold) !important;
  border-color: var(--a12-gold) !important;
  color: var(--a12-void) !important;
}

input,
textarea,
select,
.form-control,
.input-group-text,
.custom-select,
.composebody,
.tox,
.tox-edit-area,
.tox-edit-area__iframe {
  background-color: var(--a12-panel-soft) !important;
  border-color: rgba(198, 168, 106, 0.32) !important;
  color: var(--a12-ink) !important;
}

input::placeholder,
textarea::placeholder,
.hint,
.description,
.disabled,
.listing .secondary,
.message-partheaders,
#login-footer {
  color: var(--a12-muted) !important;
}

#login-form {
  background: rgba(17, 17, 24, 0.92) !important;
  border: 1px solid var(--a12-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48), 0 0 80px rgba(198, 168, 106, 0.08) !important;
  padding: 1.25rem !important;
}

.a12-forgot-password {
  margin: 0.35rem 0 0 !important;
  text-align: right !important;
}

.a12-forgot-password a {
  color: var(--a12-gold) !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
}

.a12-forgot-password a:hover,
.a12-forgot-password a:focus {
  color: var(--a12-gold-bright) !important;
  text-decoration: underline !important;
}

#logo {
  display: block !important;
  width: auto !important;
  max-width: min(240px, 72vw) !important;
  max-height: 150px !important;
  object-fit: contain !important;
  margin: 0 auto 1rem !important;
  filter: drop-shadow(0 0 18px rgba(198, 168, 106, 0.26));
}

#layout-sidebar #logo,
#layout-menu #logo,
.task-mail #logo {
  display: block !important;
  width: auto !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  margin: 0.5rem auto 0.55rem !important;
  position: static !important;
  float: none !important;
}

#layout-sidebar .compose,
#layout-sidebar a.compose,
#layout-sidebar .button.compose,
#layout-sidebar .toolbar a.compose {
  clear: both !important;
  margin-top: 0.85rem !important;
  position: relative !important;
  z-index: 2 !important;
}

#layout-sidebar .button.mainaction,
#layout-sidebar a.button.mainaction {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.75rem !important;
}

.task-mail #layout-sidebar .header,
.task-mail #layout-menu .header {
  min-height: 4.25rem !important;
  overflow: hidden !important;
}

#layout-content.selected.no-navbar {
  background:
    radial-gradient(circle at 50% 22%, rgba(198, 168, 106, 0.16), transparent 28%),
    var(--a12-void) !important;
}

.menu a,
.toolbar a,
.button,
.btn {
  border-radius: 6px !important;
}

.badge,
.unreadcount,
.countdisplay {
  background-color: rgba(198, 168, 106, 0.18) !important;
  color: var(--a12-gold-bright) !important;
}

.message,
.notice,
.warning,
.error,
.confirmation {
  background-color: var(--a12-panel) !important;
  border-color: var(--a12-border) !important;
  color: var(--a12-ink) !important;
}