html,
body {
  height: 100%;
  width: 100%;
}

body {
  position: relative;
}

#forgot-password-container {
  display: flex;
}

#forgot-password-banner-header img {
  width: 65%;
}

#forgot-password-banner-footer {
  font-size: 0.75rem;
}

#forgot-password-banner-footer p {
  font-weight: 100;
}

#forgot-password-box {
  padding: 6rem 2rem 0.5rem 2rem;
}

#forgot-password-box-header img {
  width: 50%;
}

#forgot-password-box-body .form-message h5 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.25rem;
}

#forgot-password-box-body .form-message p {
  font-size: 1.1rem;
  line-height: 1.7rem;
}

#forgot-password-box-body form {
  padding: 0.25rem 0 0 0;
}

#forgot-password-box-body form input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

#forgot-password-box-body form .form-check {
  margin-right: 2rem;
  margin-top: 0.5rem;
}

#forgot-password-box-body form .form-check .form-check-input {
  height: 1.3em;
  width: 1.3em;
}

#forgot-password-box-body form .form-check .form-check-label {
  margin-left: 0.4em;
  margin-top: 0.35em;
}

#forgot-password-box-sign-up-link {
  font-size: 0.875rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  body {
    background: #416bd0;
  }

  #forgot-password-container {
    flex-direction: row;
    height: 100%;
  }

  #forgot-password-banner {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 50%;
  }

  #forgot-password-banner-header img {
    display: block;
  }

  #forgot-password-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 50%;
  }

  #forgot-password-box-header img {
    display: none;
  }

  #forgot-password-box-body {
    width: 90%;
  }
}

@media (max-width: 1023px) {
  #forgot-password-container {
    flex-direction: column;
  }

  #forgot-password-banner {
    display: none;
  }

  #forgot-password-banner-header img {
    display: none;
  }

  #forgot-password-box {
    padding: 2.5rem 1rem;
    width: 100%;
  }

  #forgot-password-box-header img {
    display: block;
  }

  #forgot-password-box-body .form-message {
    margin-top: 3rem;
  }
}