@slate-color: rgb(39, 43, 48);

.form-signin {
  max-width: 400px;
  padding: 15px;
  margin: 0 auto;
  background-color: lighten(@slate-color, 10%);
  box-shadow: 1px 1px 2px 2px lighten(@slate-color, 20%);
  border-radius: 5px;
  .form-control:focus {
    z-index: 2;
  }
  .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
  }
  input {
    // margin-bottom: 10px;
    &.password {
      margin-bottom: -1px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    &.password2 {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
  .form-input {
    margin-bottom: 10px;
    .errors {
      background-color: softlight(@slate-color, white);
      border: 1px solid transparent;
      border-radius: 4px;
      transition: border-color 1s;

      // hides borders if .errors is empty
      &.active {
        border-color: #666666;
      }
      .error {
        margin: 3px 5px;
        white-space: nowrap; // white-space div align
        overflow: hidden;

        // FIXME: needs rework.
        &.ng-hide-add {
          transition: max-height .5s;
          max-height: 60px;
          display: block!important;

          &.ng-hide-add-active {
            max-height: 0px;
          }
        }
        &.ng-hide-remove {
          transition: max-height .5s;
          max-height: 0px;
          display: block!important;

          &.ng-hide-remove-active {
            max-height: 60px;
          }
        }

        // Message inside the .error div
        &:before {
          content: 'Error:';
          display: inline-block;
          color: #FA3F3C;
          font-weight: 800;
          width: 40px;
          vertical-align: top;
        }
        p {
          display: inline-block;
          white-space: normal; // reset it on children
          margin: 0;
          &:first-child {
            width: 40px;
            vertical-align: top;
          }
          &:last-child {
            width: 316px;
          }
        }
      }
    }
  }
  .form-signin-heading {
    font-weight: 800;
    text-shadow: 2px 2px 4px black;
    margin-bottom: 10px
  }
  .checkbox {
    font-weight: normal;
    margin-bottom: 10px;
  }
}
