/* Verdict Attorneys branding for the Roundcube Elastic skin. */
:root {
  --verdict-blue: #2436f2;
  --verdict-blue-dark: #1c2bd6;
  --verdict-navy: #0b1263;
  --verdict-soft: #f0f2ff;
}

a,
a:hover {
  color: var(--verdict-blue-dark);
}

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

.btn-primary:hover,
.btn-primary:focus {
  background: var(--verdict-blue-dark);
  border-color: var(--verdict-blue-dark);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(36, 54, 242, .18);
}

.form-control:focus {
  border-color: var(--verdict-blue);
  box-shadow: 0 0 0 .2rem rgba(36, 54, 242, .14);
}

/* Login screen */
body.task-login {
  background: radial-gradient(circle at 82% 12%, rgba(165, 177, 255, .3), transparent 28%),
    linear-gradient(145deg, var(--verdict-navy), #1825b7 58%, var(--verdict-blue));
  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(82vw, 320px);
  height: auto;
  max-height: none;
  margin: 0 auto 1.4rem;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(4, 8, 58, .22);
  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(4, 8, 58, .26);
}

body.task-login #login-form .input-group-text,
html.dark-mode body.task-login #login-form .input-group-text {
  background: #e9ecff;
  border-color: #d3d9fb;
  color: var(--verdict-navy);
}

body.task-login #login-form .form-control,
html.dark-mode body.task-login #login-form .form-control {
  background: #f9faff;
  border-color: #d3d9fb;
  color: #202540;
}

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

body.task-login #login-form .form-control:focus,
html.dark-mode body.task-login #login-form .form-control:focus {
  border-color: var(--verdict-blue);
  box-shadow: 0 0 0 .2rem rgba(36, 54, 242, .18);
}

body.task-login #rcmloginsubmit,
html.dark-mode body.task-login #rcmloginsubmit {
  background: var(--verdict-blue);
  border-color: var(--verdict-blue);
  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(--verdict-blue-dark);
  border-color: var(--verdict-blue-dark);
  color: #fff;
}

body.task-login #login-footer,
body.task-login #login-footer > div,
html.dark-mode body.task-login #login-footer,
html.dark-mode body.task-login #login-footer > div {
  color: #5a6279;
  background: transparent;
}

/* Inbox and other signed-in screens */
#layout-menu,
html.dark-mode #layout-menu {
  background: var(--verdict-navy);
}

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

#layout-menu .popover-header img {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: cover;
  object-position: left center;
  padding: 0;
  opacity: 1;
}

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

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

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

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

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

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background-color: rgba(50, 64, 173, .55);
}

@media (min-width: 481px) and (max-width: 1024px) {
  #layout-menu .popover-header img {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    padding: 0;
  }
}

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

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

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