/* MerchantPro branding delta for Roundcube 1.7.2 Elastic. */
:root {
  --merchantpro-brand: #6464f3;
  --merchantpro-brand-hover: #5858dc;
  --merchantpro-brand-disabled: #654bfb;
  --merchantpro-menu: #13181c;
}

#layout-menu .popover-header img {
  max-height: 28px;
  max-width: 60px;
  padding: 0.25rem;
}

#rcmdraglayer {
  background-color: var(--merchantpro-menu);
}

.btn-primary,
html.dark-mode .btn-primary {
  color: #fff;
  background: var(--merchantpro-brand);
  border-color: var(--merchantpro-brand);
}

.btn-primary:focus,
html.dark-mode .btn-primary:focus {
  color: #fff;
  background: var(--merchantpro-brand-hover);
  border-color: var(--merchantpro-brand-hover);
  box-shadow: 0 0 0 0.2rem rgba(100, 100, 243, 0.5);
}

.btn-primary:hover,
html.dark-mode .btn-primary:hover:not(:disabled) {
  color: #fff;
  background: var(--merchantpro-brand-hover);
  border-color: var(--merchantpro-brand-hover);
}

.btn-primary.disabled,
.btn-primary:disabled,
html.dark-mode .btn-primary.disabled,
html.dark-mode .btn-primary:disabled {
  color: #fff;
  background: var(--merchantpro-brand-disabled);
  border-color: var(--merchantpro-brand-disabled);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
html.dark-mode .btn-primary:not(:disabled):not(.disabled):active,
html.dark-mode .btn-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background: var(--merchantpro-brand);
  border-color: var(--merchantpro-brand);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
html.dark-mode .btn-primary:not(:disabled):not(.disabled):active:focus,
html.dark-mode .btn-primary:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(100, 100, 243, 0.53);
}

.ui-slider .ui-slider-handle.ui-state-active {
  border-color: var(--merchantpro-menu);
}

html.layout-small .popover-header::before,
html.layout-phone .popover-header::before {
  background-color: var(--merchantpro-menu);
}

.task-login #logo {
  max-width: 256px;
}

#login-form::before {
  display: block;
  margin-block: -15px 10px;
  color: #6c757d;
  content: "Sign in to access the MerchantPro Email Service.";
  font-size: 14px;
  line-height: 2;
}

#login-footer,
#taskmenu .about {
  display: none !important;
}