:root {
  --form-background: #f2f2f2;
  --input-submit: #04AA6D;
  --input-border: #CCC;
  --input-color: #ffffff;
  --error-text: red;
  --submit-hover: darkgreen;
}
form {
  padding: 1rem;
  background-color: var(--form-background);
  width: 90%;
  border-radius: 10px;
  margin: auto;
}
input[type=text], select, textarea {
  width: 55%;
  padding: .75rem 0;
  padding-left: 5px;
  border: 1px solid var(--input-border);
  border-radius: .25rem;
  font-size: clamp(.75rem, .917rem + .278vw, 1.25rem);
  margin: 1rem 0;
}
input[type=url] {
  width: 55%;
  padding: .75rem 0;
  padding-left: 5px;
  border: 1px solid var(--input-border);
  border-radius: .25rem;
  font-size: clamp(.75rem, .917rem + .278vw, 1.25rem);
  margin: 1rem 0;
}
input[type=password] {
  width: 55%;
  padding: .75rem 0;
  padding-left: 5px;
  border: 1px solid var(--input-border);
  border-radius: .25rem;
  resize: vertical;
  font-size: clamp(.75rem, .917rem + .278vw, 1.25rem);
  margin: 1rem 0;
}
input[type=date] {
  width: 55%;
  padding: .75rem 0;
  padding-left: 5px;
  border: 1px solid var(--input-border);
  border-radius: .25rem;
  font-size: clamp(.75rem, .917rem + .278vw, 1.25rem);
  margin: 1rem 0;
}
label {
  width: 18%;
  padding: .75rem .75rem .75rem 0;
  display: inline-block;
  font-size: clamp(.75rem, .833rem + .556vw, 1.5rem);
  margin: 1rem 0 1rem 12%;
}
input[type=file] {
  text-align: center;
  padding: .75rem .75rem;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  margin-top: 1rem;
  font-size: clamp(.75rem, .583rem + .556vw, 1.25rem);
}
input[type=submit] {
  text-align: center;
  background-color: var(--input-submit);
  color: var(--input-color);
  padding: .75rem .75rem;
  border: none;
  border-radius: .25rem;
  cursor: pointer;
  margin-top: 1rem;
  font-size: clamp(.75rem,.283rem + .556vw, 1.25rem);
}
input[type=submit]:hover {
  background-color: var(--submit-hover);
}
.errorlist {
  color: var(--error-text);
  font-weight: 500;
  font-size: clamp(.75rem,.283rem + .556vw, 1.25rem);
}
.text-red-500 {
  color: var(--error-text);
  font-weight: 500;
  font-size: clamp(.75rem,.283rem + .556vw, 1.25rem);
} 
.alert-success {
  font-size: (.75rem,.283rem + .556vw, 1.25rem);
  font-weight: bold;
  color: darkgreen;
  margin-top: .5rem;
}
.bottom-label {
  margin: 1rem 0 0 12%;
  padding: .75rem 0 0 0;
}
.bottom-input {
  margin: 1rem 0 0 0;
  padding: .75rem 0 0 0;
}
.button-row {
  text-align: center;
}
/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 570px) {
  input[type=text], select, textarea {
    width: auto;
    padding: .75rem 0;
    margin: 1rem 0;
  }
  input[type=password] {
    width: auto;
    padding: .75rem 0;
    margin: 1rem 0;
  }
  input[type=date] {
    width: auto;
    padding: .75rem 0;
    margin: 1rem 0;
  }
  input[type=file] {
    padding: .5rem .5rem;
    margin-top: .75rem;
  }
  input[type=submit] {
    padding: .5rem .5rem;
    margin-top: .75rem;
  }
  label {
    width: auto;
    margin: 1rem 0 1rem 1rem;
  }
  form {
    padding: .75rem 0 1rem .75rem;
  }
  form div {
    text-align: center;
  }
  input[type=url] {
    width: auto;
    padding: .5rem 0;
    margin: .75rem 0;
  }
}