@keyframes shake {
  0% {
    transform: translateY(-30px);
  }
  10% {
    transform: translateY(-25px);
  }
  20% {
    transform: translateY(-20px);
  }
  30% {
    transform: translateY(-15px);
  }
  40% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-5.5px);
  }
  70% {
    transform: translateY(-3.5px);
  }
  80% {
    transform: translateY(-2px);
  }
  90% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0px);
  }
}

.b-form-item {
  //width: 424px;
  //height: 60px;
  margin: 20px 0;
  position: relative;

  .b-form-item-error {
    user-select: none;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 12px;
    color: #F12525;
    background: rgba(255, 231, 231, 0.68);
    padding: 0 6px;
    line-height: 22px;
    height: 22px;
    border-radius: 4px;

    &.error-show {
      opacity: 1;
      transition: opacity .5s;
      animation-name: shake;
      animation-duration: .5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 1;
    }

    &.error-hide {
      //display: none;
      opacity: 0;
      transition: opacity .5s;
    }
  }

  .b-form-item-label {

    &.b-form-item-label-top {

    }

    &.b-form-item-label-left {

    }

    &.b-form-item-label-right {

    }
  }
}