:root {
  --brand-primary: #ff3131;
  --brand-primary-hover: #df2020;
}

/* Login logo */
#login-form #logo {
  width: auto;
  max-width: 260px;
  height: auto;
  max-height: 110px;
}

/* Login and primary action buttons */
.btn-primary,
#rcmloginsubmit {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

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

/* Selected navigation items */
#taskmenu a.selected {
  color: var(--brand-primary) !important;
}

:root {
  --brand-primary: #ff3131;
  --brand-primary-hover: #df2020;
}

html body #rcmloginsubmit {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
}

html body #rcmloginsubmit:hover,
html body #rcmloginsubmit:focus {
  background: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}

body.task-login #logo {
  width: 280px !important;
  max-width: 85% !important;
  height: auto !important;
  max-height: none !important;
}


/* White sidebar */
#layout-menu,
#taskmenu {
  background: #fff !important;
  border-right: 1px solid #e5e7eb;
}

/* Menu labels and icons */
#taskmenu a {
  background: transparent !important;
  color: #163a63 !important;
}

#taskmenu a::before {
  color: inherit !important;
}

/* Hover and selected menu */
#taskmenu a:hover,
#taskmenu a:focus {
  background: #f3f4f6 !important;
  color: var(--brand-primary) !important;
}

#taskmenu a.selected {
  background: #fff0f0 !important;
  color: var(--brand-primary) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}

/* Compose remains the primary action */
#taskmenu a.compose {
  background: var(--brand-primary) !important;
  color: #fff !important;
}

#taskmenu a.compose:hover,
#taskmenu a.compose:focus {
  background: var(--brand-primary-hover) !important;
  color: #fff !important;
}

/* Sidebar, logo header, and bottom controls */
html body #layout-menu,
html body #layout-menu .popover-header,
html body #taskmenu,
html body #taskmenu .action-buttons,
html body #taskmenu .special-buttons {
  background: #fff !important;
  background-image: none !important;
}

/* Readable bottom controls */
html body #taskmenu .special-buttons a {
  background: #fff !important;
  color: #163a63 !important;
}

html body #taskmenu .special-buttons a:hover {
  background: #f3f4f6 !important;
  color: var(--brand-primary) !important;
}

html body #taskmenu .special-buttons a.logout {
  color: var(--brand-primary) !important;
}