/*
WARNING: IF YOU HAVE COME HERE TO ADD STYLING TO THE TENANT PORTAL, STOP.
THIS FILE WAS CREATED AS A BANDAID FOR A PROBLEM, AND SHOULD BE DEPRECATED (EVENTUALLY).
TENANT PORTAL RELATED STYLING SHOULD BE ADDED TO THE APPROPRIATE PLACE WITHIN EITHER:
- TEMPLATE REPO
OR
- PAYPROP_WWW /SRC (IF YOU'RE USING FET)

BEFORE WRITING ANY NEW STYLES - CHECK THAT A UTILITY CLASS DOES NOT ALREADY EXIST.

THANKS :)
*/


/**
* Password form fields and controls
**/
body.password-set input[disabled] {
  background-color: #e9ecef12;
}

body.password-set button {
  transition: all 0.3s ease;
}

body.password-set button[disabled] {
  cursor: auto;
  background: #C7C7CC;
  border-color: #C7C7CC;
}

body.password-set label {
  opacity: 1;
  transition: opacity 0.3s ease;
}

body.password-set label.disabled {
  opacity: 0.3;
}


/**
* Password strength feedback
**/
body.password-set #passwordStrengthFeedback {
  font-size: 0.8em;
  color: #696969;
  position: absolute;
  bottom: -21px;
  left: 0px;
}

body.password-set #passwordStrengthFeedback .passwordStrength {
  font-weight: bold;
}

body.password-set #passwordStrengthFeedback .passwordStrength[data-pwstrength="0"] {
  color: #A71629;
}

body.password-set #passwordStrengthFeedback .passwordStrength[data-pwstrength="1"] {
  color: #A71629;
}

body.password-set #passwordStrengthFeedback .passwordStrength[data-pwstrength="2"] {
  color: #FF9500;
}

body.password-set #passwordStrengthFeedback .passwordStrength[data-pwstrength="3"] {
  color: #23A423;
}

body.password-set #passwordStrengthFeedback .passwordStrength[data-pwstrength="4"] {
  color: #23A423;
}

/**
Custom login shake
*/
@-webkit-keyframes loginShake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
  }
}

@keyframes loginShake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.loginShake {
  -webkit-animation-name: loginShake;
  animation-name: loginShake;
}

.animated.loginShake {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}