/* Visual hints for input validation */
input.ng-touched.ng-invalid {
  box-shadow: inset 0 -2px 0 #F55F5F;
}

.ng-touched.ng-invalid + .validation-placeholder::after {
  content: 'El campo tiene valores incorrectos';
  color: #FB3B3B;
}

.ng-touched.ng-invalid.ng-invalid-required + .validation-placeholder::after {
  content: 'El campo es requerido';
}

.ng-touched.ng-invalid.ng-invalid-minlength + .validation-placeholder::after {
  content: 'Longitud incorrecta (muy chico)';
}

.ng-touched.ng-invalid.ng-invalid-min + .validation-placeholder::after {
  content: 'Valor inferior al mínimo';
}

.ng-touched.ng-invalid.ng-invalid-maxlength + .validation-placeholder::after {
  content: 'Longitud incorrecta (muy grande)';
}

.ng-touched.ng-invalid.ng-invalid-max + .validation-placeholder::after {
  content: 'Valor superior al máximo';
}

.ng-touched.ng-invalid.ng-invalid-interval + .validation-placeholder::after {
  content: 'Intervalo incorrecto';
}

.ng-touched.ng-invalid.ng-invalid-pattern + .validation-placeholder::after {
  content: 'Formato incorrecto';
}

.ng-touched.ng-invalid.ng-invalid-email_assigned + .validation-placeholder::after {
  content: 'Este email se encuentra asignado';
}

.ng-untouched ~ span.validation-extra {
  display: none !important;
}

span.validation-extra {
  color: #FB3B3B;
  display: none;
}

span.validation-extra.active {
  display: inline;
}

/** Marker for inputs 'hidden-validation' inputs. This marker avoids to manually touch the validation
input in order to make appear the errors messages in his associated silbing validation-placeholder. */
.hidden-validation-input {
  display: none;
}

.hidden-validation-input.ng-invalid + .validation-placeholder::after {
  content: 'El campo tiene valores incorrectos';
  color: #FB3B3B;
}

.hidden-validation-input.ng-invalid.ng-invalid-period + .validation-placeholder::after {
  content: 'Periodo incorrecto';
  font-weight: bold;
}

.hidden-validation-input.ng-invalid.ng-invalid-interval + .validation-placeholder::after {
  content: 'Intervalo incorrecto';
  font-weight: bold;
}