html,
body {
  background: #0d1117 !important;
  color: #d7dde4;
}

body,
button,
input,
select,
textarea {
  color: #d7dde4;
}

a,
#layout a,
.menu a,
.toolbar a.button,
.folderlist li.mailbox a {
  color: #93d7a5;
}

a:hover,
a:focus,
.menu a:hover,
.toolbar a.button:hover {
  color: #b9f0c6;
}

#layout,
#layout-menu,
#messagestack,
.popover,
.ui-widget-content,
.ui-dialog,
.searchbar form,
#message-header,
#layout > div > .header,
#layout > div > .footer,
#layout-sidebar,
#layout-list,
#layout-content,
.formcontent,
.content,
.scroller,
.records-table thead td,
.records-table thead th,
.listing thead td,
.listing thead th,
.listing,
.records-table,
.listing tbody td,
.records-table tbody td,
ul.treelist li,
.folderlist li,
.contactlist li,
.messagelist tr,
#mailview-top,
#mailview-bottom,
#composeheaders,
#messagebody,
.boxfooter,
.footer,
.header {
  background-color: #11161d !important;
  color: #d7dde4 !important;
  border-color: #26303a !important;
}

#layout-sidebar,
#layout-list,
#layout > div > .header,
#layout > div > .footer,
#layout-content,
#message-header,
.searchbar form,
.records-table thead td,
.records-table thead th,
.listing thead td,
.listing thead th {
  border-color: #26303a !important;
}

.listing tr:hover td,
.listing li:hover,
.records-table tbody tr:hover td,
ul.treelist li.selected > a,
.folderlist li.selected > a,
.contactlist li.selected > a,
.messagelist tr.selected td,
.records-table tbody tr.selected td {
  background-color: #1f2d25 !important;
  color: #edf6ef !important;
}

button.btn,
a.button,
.btn,
input.button.mainaction,
button.button.mainaction,
a.button.mainaction {
  background: #1f7a40 !important;
  border: 1px solid #2b9a53 !important;
  color: #f4fff7 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

button.btn:hover,
a.button:hover,
.btn:hover,
input.button.mainaction:hover,
button.button.mainaction:hover,
a.button.mainaction:hover {
  background: #279a52 !important;
  border-color: #32b361 !important;
}

button.btn:before,
a.button:before,
.btn:before,
.menu a:before,
.folderlist li a:before,
.messagelist td.subject span.msgicon.status:before,
.contactlist td.contact:before,
.searchbar form:before,
.searchbar a:before {
  color: #93d7a5 !important;
}

#layout-content.selected.no-navbar {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh;
  padding: 0 1rem !important;
  background: transparent !important;
}

#logo {
  width: 92px;
  height: auto;
  margin: 0 0 1.3rem;
  filter: none;
}

#login-form {
  width: 320px;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#login-form table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

#login-form td.title {
  width: 48px;
  min-width: 48px;
  background: #1f2430;
  border: 1px solid #37404d;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  position: relative;
  vertical-align: middle;
}

#login-form td.title label {
  display: none;
}

#login-form tr:first-child td.title::before,
#login-form tr:nth-child(2) td.title::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  opacity: 0.9;
}

#login-form tr:first-child td.title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2f4f8'%3E%3Cpath d='M12 12c2.76 0 5-2.24 5-5S14.76 2 12 2 7 4.24 7 7s2.24 5 5 5Zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5Z'/%3E%3C/svg%3E");
}

#login-form tr:nth-child(2) td.title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2f4f8'%3E%3Cpath d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Zm-6 8.73V18a1 1 0 1 0 2 0v-1.27a2 2 0 1 0-2 0ZM10 8V6a2 2 0 1 1 4 0v2h-4Z'/%3E%3C/svg%3E");
}

#login-form td.input {
  background: #2b303d;
  border: 1px solid #3b4453;
  border-radius: 0 3px 3px 0;
  padding: 0;
}

#login-form .form-control,
#rcmloginuser,
#rcmloginpwd {
  height: 36px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #edf1f5 !important;
  box-shadow: none !important;
}

.form-control {
  background: #182029 !important;
  border: 1px solid rgba(147, 215, 165, 0.15) !important;
  border-radius: 6px !important;
  color: #edf1f5 !important;
  box-shadow: none !important;
}

#login-form .form-control:focus,
.form-control:focus {
  border-color: #4c9f63 !important;
  box-shadow: 0 0 0 1px rgba(76, 159, 99, 0.25) !important;
}

#login-form .formbuttons {
  margin-top: 0.9rem;
}

#login-form #rcmloginsubmit {
  width: 100%;
  height: 38px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

#login-footer {
  text-align: center;
  margin-top: 0.95rem;
  color: #8f9ba8;
  font-size: 0.82rem;
}

#login-footer a {
  color: #93d7a5;
}

/* hard-center login viewport */
body.task-login #layout-content.selected.no-navbar {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 0 1rem !important;
}

/* hard override: center login by positioning form directly */
body.task-login #layout-content.selected.no-navbar {
  position: relative !important;
  min-height: 100vh !important;
  height: 100vh !important;
  padding: 0 !important;
}

body.task-login #logo {
  position: fixed !important;
  left: 50% !important;
  top: calc(50% - 96px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 1100;
}

body.task-login #login-form {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 320px !important;
  max-width: calc(100vw - 24px) !important;
  z-index: 1100;
}

/* when redeem is open, hide login visuals */
body.task-login #layout-content.selected.no-navbar.invite-open #logo,
body.task-login #layout-content.selected.no-navbar.invite-open #login-form {
  display: none !important;
}

/* logo alignment above centered login form */
body.task-login #logo {
  width: 126px !important;
  height: auto !important;
  left: 50% !important;
  top: calc(50% - 145px) !important;
  transform: translateX(-50%) !important;
  z-index: 1101 !important;
}

/* final logo placement: bigger and clearly above form */
body.task-login #logo {
  width: 168px !important;
  height: auto !important;
  left: 50% !important;
  top: calc(50% - 215px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 1102 !important;
  pointer-events: none !important;
}

/* keep form centered and below logo */
body.task-login #login-form {
  top: calc(50% + 18px) !important;
}

/* bigger logo requested */
body.task-login #logo {
  width: 220px !important;
  height: auto !important;
  left: 50% !important;
  top: calc(50% - 250px) !important;
  transform: translateX(-50%) !important;
  z-index: 1102 !important;
}

body.task-login #login-form {
  top: calc(50% + 30px) !important;
}

/* keep large logo, move it down closer to form */
body.task-login #logo {
  width: 220px !important;
  top: calc(50% - 185px) !important;
}

body.task-login #login-form {
  top: calc(50% + 24px) !important;
}