input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  font-family: 'Play', sans-serif;
  font-size: 11px;
  min-width: 50px;
  width: 145px;
  padding: 0.5rem;
  transition: border-color 0.5s ease-out;
}
input:optional {
  border-color: gray;
}
input:required:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

.input-code {
  font-family: 'Play', sans-serif;
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  width: 57px;
  min-width: 12px;
  padding: 0.5rem;
  transition: border-color 0.5s ease-out;

}

.input-radio {
  font-family: 'Play', sans-serif;
  border: 2px solid;
  min-width: 10px;
  font-size: 1rem;
  width: 10px;

  transition: border-color 0.5s ease-out;
}