.field{
  position: relative;
  text-align: left;
}

.field-label{
  position: relative;
  margin: 0;
  display: block;

  color:  #333c4c;
  line-height: 16px;
  font-size: 16px;
  font-weight: 400;

  transform: translateY(24px);
  transition: transform 0.3s, color 0.3s;
  transform-origin: 0 50%;
}

.field-input{
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  padding: 8px 0;

  line-height: 16px;
  font-family: Roboto;
  font-size: 16px;

  background: transparent;
  border: none;
  -webkit-appearance: none;
  outline: none;

  border: none !important;
  border-bottom: 1px solid #757575 !important;
  background: transparent !important;
  box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;
    color: black !important;
}

.field::after{
  /*background-color: $color;*/
  transform: scaleX(0);
  transition: transform 0.3s;
}

.has-label .field-label{
  transform: translateY(0) scale(0.75);
}

.is-focused .field-label{
  color: #333c4c !important;
}
.field.is-focused::after{
  transform: scaleX(1);
}