input {
  width: 200px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 0px;
  margin-bottom: 0px;
}

input[type="checkbox"] {
  width: auto;
}

/* Style the submit button */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
}

input:disabled {
  background-color: #ccc;
  color: white;
  cursor: not-allowed;
}
/* Style the container for inputs */

.container {
  /* padding-top: 20px; */
  margin: 50px 20px 0px;
 /* Adjusted to account for fixed topnav */
}

.subContainer {
  background-color: #f1f1f1;
  padding: 20px;
  position: relative;
}

/* The message box is shown when the user clicks on the password field */
#dialog_password_validation, #message, #message2 {
  width: 300px;
  background: #f1f1f1;
  color: #000;
  padding: 5px 20px;
  margin: 8px;
  transition: opacity 0.2s, height 0.3s;
  opacity: 0;
  visibility: hidden;
  height: 0px;
  overflow: hidden;
}

#dialog_password_validation.show, #message.show, #message2.show {
    opacity: 1;
    visibility: visible;
    height: auto;
}

#dialog_password_validation p, #message p, #message2 p {
    margin: 0px;
    padding: 0px 35px;
    font-size: 18px;
}

.dialog {
  display:none;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -7px;
  content: " \2714";
}

/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -7px;
  content: " \2716";
}