.password-strength {
  width: 180px;
  margin-bottom: 20px;

  .table & {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
  }
}

.password-strength>div {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  background-color: @gray-90;
}

.password-strength>.password-strength-label {
  float: left;
  color: @component-form-label-color;
}

.password-green .password-bar,
.password-yellow .password-bar,
.password-red .password-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.password-green {
  .password-bar {
    width: 100%;
    background-color: @status-success;
  }
}

.password-yellow {
  .password-bar {
    width: 50%;
    background-color: @status-warning;
  }
}

.password-red {
  .password-bar {
    width: 25%;
    background-color: @status-danger;
  }
}

.loading {
  max-width: 320px;
  height: auto;
  min-height: 300px;
  padding: 32px;
  margin: auto;
  border-radius: 2px;

  & when not (@powered-by='') {
    background-image: url(@powered-by);
    padding-bottom: 120px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
  }

  @media (min-width: @screen-sm-min) {
    max-width: 400px;
    margin-top: 50px;
  }
}

.init-load {
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 320px;
}

.mainlogo {
  & when not(@extending) {
    background-image: @brand-logo-img;
  }

  width: 100%;
  height: 110px;
  padding-bottom: @brand-logo-height;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  display: block;
}

.mainlogo[src] {
  background: none;
  padding-bottom: 0;
}