.input{
  color:$secondColor;
  border:solid 1px lighten($thirdColor, 15%);
  line-height:$lineHeight;
  height:$inputHeight;
  padding-left: 5px;
  padding-right: 5px;
  background-color: $contentColor;

  &:focus{
    outline:none;
    border:1px solid lighten($ciColor, 20%);
  }
  &::placeholder {
    color: lighten($secondColor, 20%);
  }

  @extend .smallText;
}
.inputWrapper{
  position: relative;
  display: inline-block;

  .validationMsgBox{
    position: absolute;
    z-index: 9999;
    min-width: 260px;
    margin-left: -$space/2;
    color:$errorColor;
    padding: 3px $space/2 2px $space/2;
    background-color: lighten($errorColor, 50%);
    border:solid 1px lighten($errorColor, 40%);

    @include opacity(1);

    &.hide{
      @include opacity(0);
      margin-left: 0px;
    }

    // small arrow left
    &:after, &:before {
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      @include absolute('' 100% '' '');
    }
    &:after{
      border-right-color: lighten($errorColor, 50%);
      border-width: 3px;
      top: $space - 6px;
      margin-top: -3px;
    }
    &:before{
      border-right-color: lighten($errorColor, 40%);
      border-width: 5px;
      top: $space - 6px;
      margin-top: -5px;
    }
  }
}
