html body {
  background: #d0d0d5;
  background: linear-gradient(0deg, #d0d0d5 0%, #e5e5e8 100%);
  height: initial;
  min-height: 100%;
}

/* Override custom color schemes */
body .dialog-off-canvas-main-canvas,
body .mm-page {
  background: none;
}
body #auth_box .region-content p,
body #auth_box .region-content div {
  color: #222222;
}
body #auth_box input.form-text,
body #auth_box input.form-email {
  background-color: #fff;
}

/* Override betterlogin CSS */
body #auth_box {
  width: 400px;
  max-width: 100%;
  font-family: unset;
}
body #auth_box.register {
  width: 600px;
}
#the_logo img {
  max-width: 250px;
  max-height: 100px;
}
body #auth_box .region-content {
  padding: 0;
  margin: 0;
}
body #auth_box #middle_part {
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0, 50%);
}
body #auth_box .region-status .messages {
  margin: 0;
}
body #auth_box h2.title {
  font-size: revert;
}
body #auth_box input[type="text"],
body #auth_box input[type="email"],
body #auth_box input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px #ccc solid;
}
body #auth_box .back_link {
  padding: 0;
}
[dir='rtl'] #auth_box input[type="submit"] {
  float: left;
}

/* Override simple_password_reveal CSS */
#edit-password-grouping {
  margin: -1em 0 0 0;
}
#auth_box .form-item-simple-password-reveal-checkbox {
  margin-bottom: 0;
}

/* Tweak CSS for persistent_login checkbox */
#auth_box .form-item-persistent-login {
  margin-top: 0;
}

/* Add support for Drupal inline form errors. Mimic Claro. */
body #auth_box input[type="text"].error,
body #auth_box input[type="email"].error,
body #auth_box input[type="password"].error {
  border: 2px solid #dc2323;
  outline-color: #dc2323;
}
body #auth_box div.form-item--error-message {
  color: #dc2323;
  margin-block: calc(6rem / 16);
  font-size: 0.79rem;
  font-weight: normal;
  line-height: calc(17rem / 16);
  margin-top: 0;
  padding: 1px 5px;
}
body #auth_box div.form-item--error-message:before {
  content: none;
}
body #auth_box div.form-item--error-message strong {
  font-weight: normal;
}

/* Responsive betterlogin CSS for mobile portrait only */
@media screen and (max-width: 480px) {
  body #auth_box {
    padding: 10px 0;
  }
  body #auth_box #top_part {
    margin: 0 20px;
  }
  body #auth_box #the_logo {
    padding: 15px 0;
  }
  body #auth_box #middle_part {
    margin: 0 20px;
    padding: 20px;
  }
  body #auth_box #bottom_part {
    margin: 0 20px;
    padding: 10px;
  }
}