.invalid {
  border: 2px solid red !important;
  /* outline-color: red !important; */
}
.checkmark.invalid{
  border: 1px solid red !important;
}
.invalid input[type=checkbox] {
  border: 1px solid #c00;
  -moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
}

/*
  Style the validation errors.

  By default, `ValidForm` inserts the `.validation-error` div
  _before_ the input. So we abs position in the top right.

  Why insert before? It is nicer on the user than inserting
  after the input and moving elements down the page.
*/
.form-group {
  position: relative;
}
.form-group .validation-error {
  position: absolute;
  right: 0;
  top: 1px;

  color: red;
  font-size: 14px;
}