:root {
  --techbela-red: #e41f27;
  --techbela-red-hover: #bd1820;
  --techbela-gray: #838c94;
}
body.task-login #logo {
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto 34px !important;
  object-fit: contain;
}
body.task-login #login-footer { color: #838c94; }
#layout-menu #logo {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
}
.btn-primary, .btn.btn-primary, button.mainaction, input.button.mainaction,
.ui-dialog .ui-dialog-buttonpane button.mainaction {
  background-color: #e41f27 !important;
  border-color: #e41f27 !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,
button.mainaction:hover, button.mainaction:focus {
  background-color: #bd1820 !important;
  border-color: #bd1820 !important;
}
.btn-primary:focus, button.mainaction:focus,
.form-control:focus, .custom-select:focus {
  border-color: #e41f27 !important;
  box-shadow: 0 0 0 .2rem rgba(228,31,39,.18) !important;
}
a { color: #c51b23; }
a:hover { color: #a41b21; }
#taskmenu a.selected, #taskmenu a:hover,
#taskmenu .selected a, .menu a:not(.disabled):hover {
  color: #e41f27 !important;
}
#taskmenu a.compose { color: #e41f27 !important; }
.listing li.selected > a, .listing li.selected > div > a,
.listing tr.selected td, .listing tr.selected td a {
  background-color: #fce8e9 !important;
  color: #911920 !important;
}
.listing li.selected > a { box-shadow: inset 3px 0 #e41f27; }
.listing li.selected .unreadcount,
.custom-control-input:checked ~ .custom-control-label::before,
.page-item.active .page-link, .progress-bar {
  background-color: #e41f27 !important;
  border-color: #e41f27 !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active { color: #c51b23 !important; }
html.dark-mode a { color: #ff767b; }
html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .listing tr.selected td a {
  background-color: #45262a !important;
  color: #ffe4e5 !important;
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.compose { color: #ff767b !important; }
@media (max-width: 480px) {
  body.task-login #logo { width: 280px !important; }
}