/*
    Form validation styles
    delval.xyz | @josedvm95
*/

/* Para mejorar cómo se ve el error del formulario */

input[type=email]{
  -webkit-appearance: none;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Estos son los estilos para nuestros campos inválidos */
input:invalid{
  border-color: #900;
  background-color: #FDD;
}

input:focus:invalid {
  outline: none;
}

/* Estos son los estilos para nuestros mensajes de error */
.error {
  width  : 100%;
  padding: 0;

  font-size: 80%;
  color: #900;
  border-radius: 0 0 5px 5px;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.error.active {
  padding: 0.3em;
}