/* KIL TRADEMASTER branding for the Roundcube Elastic skin. */
:root {
  --ktm-green: #0b4d32;
  --ktm-green-dark: #083d27;
  --ktm-gold: #d4a017;
  --ktm-soft: #f0f4f2;
}

a,
a:hover {
  color: var(--ktm-green);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--ktm-green);
  border-color: var(--ktm-green);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ktm-green-dark);
  border-color: var(--ktm-green-dark);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(11, 77, 50, .18);
}

.form-control:focus {
  border-color: var(--ktm-green);
  box-shadow: 0 0 0 .2rem rgba(11, 77, 50, .14);
}

/* Login screen */
body.task-login {
  background: radial-gradient(circle at 82% 12%, rgba(212, 160, 23, .2), transparent 28%),
    linear-gradient(145deg, var(--ktm-green-dark), var(--ktm-green) 68%, #176545);
  overflow: auto;
}

body.task-login #layout {
  min-height: 100%;
  height: auto;
  overflow: visible;
}

body.task-login #layout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  background: transparent;
}

body.task-login #logo {
  position: static;
  top: auto;
  display: block;
  width: min(76vw, 260px);
  height: auto;
  max-height: none;
  margin: 0 auto 1.4rem;
  padding: .85rem 1.1rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(2, 28, 17, .16);
  opacity: 1;
}

html.dark-mode body.task-login #logo {
  opacity: 1;
}

body.task-login #login-form {
  position: static;
  top: auto;
  width: min(100%, 380px);
  max-width: none;
  margin: 0;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 20px 50px rgba(2, 28, 17, .2);
}

body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-text {
  background: #e7f2eb;
  border-color: #cbded1;
  color: var(--ktm-green);
}

body.task-login #login-form .form-control,
html.dark-mode body.task-login #login-form .form-control {
  background: #f8fbf9;
  border-color: #cbded1;
  color: #20382b;
}

body.task-login #login-form .form-control::placeholder,
html.dark-mode body.task-login #login-form .form-control::placeholder {
  color: #65786a;
}

body.task-login #login-form .form-control:focus,
html.dark-mode body.task-login #login-form .form-control:focus {
  border-color: var(--ktm-green);
  box-shadow: 0 0 0 .2rem rgba(11, 77, 50, .18);
}

body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #rcmloginsubmit {
  background: var(--ktm-green);
  border-color: var(--ktm-green);
  color: #fff;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus,
html.dark-mode body.task-login #rcmloginsubmit:hover,
html.dark-mode body.task-login #rcmloginsubmit:focus {
  background: var(--ktm-green-dark);
  border-color: var(--ktm-green-dark);
  color: #fff;
}

body.task-login #login-footer,
body.task-login #login-footer > div {
  color: #536259;
  background: transparent;
}

/* Inbox and other signed-in screens */
#layout-menu {
  background: var(--ktm-green-dark);
}

html body #layout-menu .popover-header {
  background: #fff !important;
  border-right: 1px solid #dbe5de;
}

#layout-menu .popover-header img {
  width: 74px;
  max-width: 74px;
  max-height: 56px;
  object-fit: contain;
  padding: .1rem;
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus {
  background-color: #176545;
  color: #fff;
}

#taskmenu a.compose,
#taskmenu a.compose:hover,
#taskmenu a.compose:focus {
  color: #f2c357;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
  background: var(--ktm-soft);
}

.listing li.selected,
.listing tr.selected td {
  background-color: #e7f2eb;
}

.listing li.selected > a,
.listing tr.selected td a,
.menu.toolbar a.selected {
  color: var(--ktm-green);
}

html.dark-mode #layout-menu {
  background: var(--ktm-green-dark);
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  background-color: #176545;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background-color: rgba(27, 105, 69, .45);
}

@media (max-width: 480px) {
  body.task-login #layout-content {
    min-height: 100dvh;
    padding: 1.25rem .9rem;
  }

  body.task-login #login-form {
    padding: 1.3rem;
  }
}