.r42-ui.login {
  margin-top: 0 !important;

  --sm-page-background: #fbfbfb;
  --sm-error: #ff6421;
  --sm-border-radius: .1875rem;
  --sm-border-radius-xl: .5rem;
  --sm-fontWeight-normal: 400;
  --sm-fontWeight-semibold: 500;
  --sm-space-2: .5rem;
  --sm-space-6: 1.5rem;
  --sm-fontSizes-xs: 0.875rem;
  --sm-fontSizes-sm: 1rem;

  --border-color: #ccc;

  --gray-100: #F4F4F4;
  --gray-200: #D4D4D4;
  --gray-500: #808080;
  --gray-600: #636363;
  --gray-800: #2B2B2B;

  --orange-200: #FFC1A6; 
}

.r42-ui.login .login-input {
  height: 48px !important;
}

.r42-ui.login .btn {
  transition: background-color .1s ease;
  margin-right: 0;
  border-radius: var(--sm-border-radius) !important;
  font-weight: var(--sm-fontWeight-semibold) !important;
  font-size: var(--sm-fontSizes-sm) !important;
  height: 3rem;
  width: 100% !important;
}

.r42-ui.login .btn-primary {
  --bs-btn-bg: var(--gray-800);
  --bs-btn-border-radius: var(--sm-border-radius);
  --bs-btn-border-color: var(--gray-800);
  --bs-btn-hover-bg: var(--gray-600);
  --bs-btn-hover-border-color: var(--gray-600);
  --bs-btn-active-border-color: var(--gray-600);
}

.r42-ui.login .alert {
  --bs-alert-border-radius: var(--sm-border-radius);
  margin-top: var(--sm-space-6);
}

.r42-ui.login .alert-primary {
  --bs-alert-color: var(--gray-800);
  --bs-alert-bg: var(--orange-200);
  --bs-alert-border-color: var(--sm-error);
  --bs-alert-link-color: var(--gray-800);
}

.r42-ui.login {
  background: var(--sm-page-background);
  color: var(--gray-800);
}

.r42-ui.login a {
  color: var(--gray-800);
  text-decoration: underline;
}

.r42-ui.login a:hover {
  text-decoration: none;
}

.r42-ui.login .login-header {
  padding: var(--sm-space-6) var(--sm-space-6) 0;
  margin-bottom: var(--sm-space-6);
  text-align: center;
}

.r42-ui.login .login-header img {
  height: 2.25rem;
}

.r42-ui.login .login-content {
  padding: 0 var(--sm-space-6) var(--sm-space-6);
}

.r42-ui.login .login-body {
  width: 560px;
  border: 0;
  box-shadow: 0 6px 10px 0 rgba(29, 29, 29, .05), 0 2px 6px 0 rgba(29, 29, 29, .05);
  border-radius: var(--sm-border-radius-xl);
}

.r42-ui.login #loginButton {
  background-color: var(--bs-btn-bg);
}

.r42-ui.login #loginButton:hover {
  background-color: var(--bs-btn-hover-bg);
}

.r42-ui.login .form-control:focus {
  border-color: var(--border-color);
}

.r42-ui.login .form-control {
  background-color: transparent;
  border-radius: var(--sm-border-radius) !important;
}

.r42-ui.login .form-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.r42-ui.login .form-group ~ .form-group { 
  margin-top: var(--sm-space-6);
}

.r42-ui.login .login-body h2 {
  font-size: 1.44rem !important;
  font-weight: var(--sm-fontWeight-normal) !important;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  text-align: center;
  margin-bottom: var(--sm-space-6);
}

.r42-ui.login .login-footer {
  color: var(--gray-500);
  font-size: var(--sm-fontSizes-xs);
  margin-top: 0.875rem;
}

.r42-ui.login .login-footer a {
  color: var(--gray-500);
  text-decoration: underline;
  font-weight: var(--sm-fontWeight-normal);
}

.r42-ui.login .login-footer a:hover {
  text-decoration: none;
}

.r42-ui.login .login-footer a b {
  font-weight: inherit;
}