.input-container-email-input {
  width: 400px;
  height: 50px;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: rgb(150, 150, 150);
  outline: none;
  padding-left: 19px;
  font-size: 15px;
  font-weight: normal;
  transition: border-color .2s;
}

.input-container-email-input:hover {
  border-color: black;
}

.input-container-email-input:focus {
  border-color: black;
}

.input-container-email-input.error {
  border-color: red;
}

.input-container-email-input:-webkit-autofill {
  box-shadow: 0 0 0 1000px white inset;
}

.input-container-email-input:not(:placeholder-shown) {
  border-color: black;
}

.input-container-email-input:not(:placeholder-shown):valid {
  border-color: green;
}

.input-container-email-input:not(:placeholder-shown):invalid {
  border-color: red;
}

.input-container-email-label {
  position: absolute;
  color: rgb(150, 150, 150);
  top: 50%;
  transform: translateY(-55%);
  left: 20px;
  font-size: 15px;
  cursor: text;
  transition: top .2s, font-size .2s, color .2s;
}

.input-container-email-input:hover + .input-container-email-label {
  color: black;
}

.input-container-email-input:focus + .input-container-email-label {
  color: black;
  top: 7px;
  font-size: 10px;
}

.input-container-email-input:not(:placeholder-shown) + .input-container-email-label {
  color: black;
  top: 7px;
  font-size: 10px;
}

.input-container-email-input:not(:placeholder-shown):valid + .input-container-email-label {
  color: green;
  top: 7px;
  font-size: 10px;
}

.input-container-email-input:not(:placeholder-shown):invalid + .input-container-email-label {
  color: red;
  top: 7px;
  font-size: 10px;
}