body { background-color: #fff; }

p { color: #565966 }
p.help-text { font-size: 0.75rem; }

/* ————————————————————————————————

          LOGIN WRAPPER

———————————————————————————— */

.login--wrapper {
  animation: fadeIn 1s 1 both;
  display: flex;
  flex: 0 1 auto;
  min-height: 100vh; }

.login-flex { display: flex; }

  @media (max-width: 768px) { .login--wrapper { flex-direction: column; } }

.login--wrapper--forms {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2.5rem 4rem 2.5rem 2.5rem; }

  @media (max-width: 768px) { .login--wrapper--forms { order: 2 } }
  @media (max-width: 1130px) { .login--wrapper--forms { padding-right: 2.5rem } }

.login--wrapper--forms h1 { font-family: Plex Regular, Helvetica, Arial, sans-serif; }

.login--wrapper--aside {
  box-shadow: 0 0 2.5rem 0 rgba(21,22,36,0.32);
  flex: 1.618; /* Yes, Golden ratio. */
  min-height: 100vh; /* This is needed to make sure that the item is in fact 100vh */}

  @media (max-width: 768px) {
    .login--wrapper--aside {
      background-image: none;
      display: none; }
  }

/* ————————————————————————————————

        LOGIN FOOTER

———————————————————————————— */

.login--wrapper--footer {
  display: flex;
  flex-direction: column;
  margin-top: auto; }

.footer__content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding-top: 1rem; }


.footer__content a { color: #565966 }

.footer__content a:hover {
  color: #151624;
  text-decoration: none; }

.footer__content p { font-size: .75rem; }

.footer__logo {
  height: 0.875rem;
  margin-right: 0.875rem; }

.footer__byline { margin-right: 0.5rem; /* Make sure there are a little space between the byline and the help links */ }

  @media (max-width: 375px) {
    .footer__logo,
    .footer__byline { display: none; }
  }

.footer__help {
  display: flex;
  flex: 1;
  justify-content: flex-end; }

  /* Stretch the help links to be one line */
  @media (max-width: 1155px) {
    .footer__help {
      flex: 1 1 100%;
      justify-content: flex-start;
      margin-top: 0.5rem; }
  }

.footer__help i { margin-right: .251rem; }

/* Add a middot between help links */
.footer__help a:after {
  content: '·';
  padding: 0 .5rem; }

/* Hide the middot on the last link */
.footer__help a:last-child:after { display: none; }


/* Don't color the middot when hovering the corresponding link */
.footer__help a:hover:after { color: #565966 }


/* ————————————————————————————————

          LOGIN FORM

———————————————————————————— */

.login--box--form {
  animation: fadeIn 1s 1 both;
  margin-top: 16vh; }

.login--box--form--sso { text-align: center; }

.login--box--form--email input { width: 100%; }

/* Submit area */
.login--box--submit {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem 0; }

.login--box--submit--links,
.login--box--submit--info {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex: 1;
  font-size: 0.75rem;
  padding-right: 2rem; }

.login--box--submit--toggle { font-size: 0.875rem; }

  @media (max-width: 1130px) {
    .login--box--submit--links,
    .login--box--submit--info {
      flex: 100%;
      margin-bottom: 1.5rem;
      order: 2;
      padding-right: 0; }
  }

.login--box--submit--links a,
.login--box--submit--info p { margin: 0.125rem 0; }

/* Lists on login */
.login--box--submit--info ul {
  color: #565966;
  list-style: disc inside;
  margin-bottom: 1rem; }

.login--box--submit--info ul li { padding: 0.125rem 0;  }

/*Needed for IE to adapt the text to the width of the container*/
.login--box--submit--info p  { align-self: stretch; }

/* Align terms label and checkbox for public sign up */
.login--box--submit--info label {
  display: flex;
  font-family: Plex Regular, Helvetica, Arial, sans-serif; }

.login--box--submit--info input[type="checkbox"] {
  flex-shrink: 0;
  height: .875rem;
  margin: 0.1rem .5rem 0 0;
  width: .875rem; }

.login--box--submit--info i {
  margin-right: 0.25rem;
  position: relative;
  top: 0.125rem; }

.login--box--submit .button { margin-left: 0 }

    @media (max-width: 1130px) { .login--box--submit .button {
      margin-bottom: 1rem;
      order: 2; }
    }

    @media (max-width: 425px) { .login--box--submit .button { width: 100% } }


/* ————————————————————————————————

          SIGNUP

———————————————————————————— */

/* SIGN UP CALL TO ACTION */
.signup--cta {
  align-items: center;
  border-bottom: 1px solid #C0C3CC;
  display: flex;
  margin-top: auto; /* align this element to the bottom of the container */
  padding: 1rem 0; }

.signup--cta.hide { display: none }

.signup--cta--text {
  flex: 1;
  font-size: 0.875rem;
  margin-right: 1rem; }

  @media (max-width: 1130px) { .signup--cta--text { font-size: 0.75rem; } }

/* Signup inputs */
.signup--inputs {
  flex-wrap: wrap;;
  display: flex; }

.signup--input-fname { margin-right: 2rem; }

.signup--input-fname,
.signup--input-lname { flex: 1; }

.signup--input-email { flex: 100%;}

  @media (max-width: 1130px){
    .signup--inputs  input {
      flex: 100%;
      margin-right: 0 }
  }

/* Social signup buttons */
.login--box--form--signup--social {
  display: flex;
  justify-content: center;}

/* Hide signup buttons. Because we use flexbox.*/
.login--box--form--signup--social.hide { display: none }

.signup-buttons-wrapper {
  flex: 0 1 22rem;
  display: flex;
  flex-direction: column;}

.button.button-social,
.button-light.button-social {
  text-align: center;
  line-height: 3rem;
  height: 3rem; /* 32 / 14 */
  margin-bottom: 1rem }

.signup-buttons-wrapper .help-text { text-align: center; }

/* Hide SSO login button */
.button-social.hide { display: none; }


/* ————————————————————————————————

    ACTIVATION PAGE

———————————————————————————— */
.login--box--form--activation input[type="password"] { width: 100% }


/* ————————————————————————————————

    CUSTOM LOGIN INPUTS

———————————————————————————— */

input[type="text"],
/* input[type="email"], /* Currently not used in markup, due to browser rules disallowing UTF-8 chars in the local part of emails (which is valid and in use, particularly in Asia) */
input[type="password"] {
  display: flex;
  margin-bottom: 1rem;
}

input.error { border-color: #F0286B}


/* ————————————————————————————————

      ERRORS & SUCCESS

———————————————————————————— */

.login--message {
  animation: fadeIn 1s 1 both;
  border-radius: .25rem;
  box-sizing: border-box;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.5em;
  margin-bottom: 1rem;
  padding: .5rem 1rem;
  width:100%; }

.login--message p {color: #fff }

.login--message a {
  color: #fff;
  text-decoration: underline; }

.login--message-error   { background-color: #F0286B; }
.login--message-success { background-color: #28D28C; }