:root {
  --hk-ivory: #f6f0e8;
  --hk-paper: #fffaf4;
  --hk-navy: #13263d;
  --hk-navy-soft: #1d3550;
  --hk-clay: #b96f58;
  --hk-clay-light: #dfa78f;
  --hk-sage: #aab5a2;
  --hk-ink: #172231;
  --hk-muted: #64635f;
  --hk-line: rgba(19, 38, 61, .16);
}

body,
button,
input,
select,
textarea,
.popover {
  color: var(--hk-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: var(--hk-clay);
}

a:hover,
a:focus {
  color: #91503f;
}

/* Login */
body.task-login {
  background:
    radial-gradient(circle at 82% 18%, rgba(170, 181, 162, .26), transparent 26rem),
    linear-gradient(135deg, var(--hk-ivory), var(--hk-paper));
}

body.task-login #layout-content {
  position: relative;
  min-height: 100%;
  background: transparent;
}

body.task-login #layout-content::before,
body.task-login #layout-content::after {
  position: fixed;
  z-index: 0;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgba(185, 111, 88, .34);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body.task-login #layout-content::before {
  top: -15rem;
  left: -9rem;
}

body.task-login #layout-content::after {
  right: -13rem;
  bottom: -16rem;
  border-color: rgba(170, 181, 162, .55);
}

.task-login #logo {
  z-index: 1;
  top: 12vh;
  width: min(430px, 76vw);
  max-width: 430px;
  max-height: none;
}

#login-form {
  z-index: 1;
  top: 16vh;
  max-width: 390px;
  padding: 2rem 2rem 1.5rem;
  border: 1px solid var(--hk-line);
  border-radius: 2px;
  background: rgba(255, 250, 244, .88);
  box-shadow: 0 24px 60px rgba(19, 38, 61, .12);
  backdrop-filter: blur(12px);
}

#login-form .input-group {
  margin-bottom: .85rem;
}

#login-form .input-group-text {
  min-width: 3.3rem;
  justify-content: center;
  border-color: var(--hk-line);
  border-radius: 2px 0 0 2px;
  background: rgba(170, 181, 162, .2);
  color: var(--hk-navy);
}

.form-control,
.custom-select {
  border-color: var(--hk-line);
  border-radius: 2px;
  background-color: #fff;
  color: var(--hk-ink);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--hk-clay);
  box-shadow: 0 0 0 .2rem rgba(185, 111, 88, .18);
}

.btn-primary,
#rcmloginsubmit {
  border-color: var(--hk-clay);
  border-radius: 2px;
  background: var(--hk-clay);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}

.btn-primary:hover,
.btn-primary:focus,
#rcmloginsubmit:hover,
#rcmloginsubmit:focus {
  border-color: var(--hk-navy);
  background: var(--hk-navy);
  color: #fff;
}

#login-footer {
  margin-top: .8rem;
  color: var(--hk-muted);
  font-size: .82rem;
}

/* Main application */
#layout-menu,
#taskmenu,
#layout-menu .popover-header {
  background-color: var(--hk-navy) !important;
}

#layout-menu .popover-header img {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  max-width: 52px;
  max-height: 52px;
  padding: .2rem;
  object-fit: contain;
}

#taskmenu a,
#taskmenu .button {
  color: rgba(255, 250, 244, .9);
}

#taskmenu a:hover,
#taskmenu a.selected,
#taskmenu .button:hover,
#taskmenu .button.selected {
  background-color: var(--hk-navy-soft);
  color: #fff;
}

#taskmenu a.button.compose,
#taskmenu a.button.compose:hover {
  color: var(--hk-clay-light);
}

#layout > div > .header {
  border-color: var(--hk-line);
  background: var(--hk-ivory);
  color: var(--hk-ink);
}

#layout-sidebar,
#layout-list,
#layout-content {
  border-color: var(--hk-line);
  background: var(--hk-paper);
}

#layout-content {
  background: #fff;
}

.listing li,
.listing tbody td,
.messagelist td {
  border-color: rgba(19, 38, 61, .09);
}

.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td {
  background-color: rgba(170, 181, 162, .34) !important;
  color: var(--hk-ink) !important;
}

.listing li:hover,
.listing tr:hover td,
.messagelist tr:hover td {
  background-color: rgba(246, 240, 232, .9);
}

.folderlist li.selected > a,
.folderlist li > a:hover {
  color: var(--hk-navy);
}

.badge,
.listing .unreadcount,
.folderlist .unreadcount {
  background-color: var(--hk-clay) !important;
  color: #fff !important;
}

.searchbar,
.searchbar form,
.searchbar input {
  background-color: #fff;
}

.toolbar a.button:hover,
.toolbar button:hover,
.menu a:hover {
  color: var(--hk-clay);
}

.popover .menu li a:hover,
.popover .menu li a:focus {
  background-color: var(--hk-navy);
  color: #fff;
}

.quota-widget .value {
  background-color: var(--hk-clay);
}

::selection {
  background: rgba(185, 111, 88, .28);
}

@media screen and (max-width: 480px) {
  .task-login #logo {
    top: 8vh;
    width: min(360px, 82vw);
  }

  #login-form {
    top: 11vh;
    width: calc(100% - 2rem);
    padding: 1.5rem 1.2rem 1.2rem;
  }

  html.layout-phone #layout-menu .popover-header img {
    width: auto;
    max-width: 220px;
  }
}