:root {
  --error-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
}


form {
  width: 100%;
  margin: 0 auto;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

textarea {
  height: 100px;
}

button {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

style attribute {
    --form-button-justify-self: center;
    --form-background-color: rgb(252, 252, 252);
    --form-border-width: 0px;
    --form-border-color: #1d1e20;
    --form-border-radius: 20px;
    --form-padding: 20px;
    --input-fill-color: rgb(255, 255, 255);
    --input-fill-color--hover: rgb(255, 255, 255);
    --label-text-color: rgb(26, 26, 26);
    --label-text-size: 16px;
    --input-text-color: rgba(16, 87, 125, 0.92);
    --input-text-color--hover: rgb(26, 26, 26);
    --input-text-size: 16px;
    --input-height: auto;
    --input-border-color: rgb(250, 170, 1);
    --input-border-color--hover: rgb(128, 138, 153);
    --input-border-width: 1px;
    --input-border-radius: 8px;
    --form-spacing: var(--formSpacing);
    --grid-item-inner-padding: var(--gridItemInnerPadding);
    --grid-item-inner-background: var(--gridItemInnerBackground);
}

.form {
  padding: 10px 20px;
}

.form h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  text-align: center;
  margin-bottom: 10px;

}

.form-field {
  margin-top: 12px;
}

.form-field label {
  display: block;
  color: #777;
  margin-bottom: 5px;
}

.form-field.error input,
.form-field.error select,
.form-field.error textarea {
  border-color: var(--error-color);
  margin-top: 10px;
}

.form-field.success input,
.form-field.success select,
.form-field.success textarea {
  border-color: var(--success-color);
}

.form-field small {
  color: var(--error-color);
  font-size: 0.7em;
  font-family: 'Open Sans', sans-serif;
}


.form-field input, 
.form-field select,
.form-field textarea {
  width: 100%;
  height: auto;
  padding: 16px;
  background-color: white;
  border-color:  rgb(41, 51, 70);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  outline: none;
  transition: color ease .2s,border-color ease .2s,background-color ease .2s;
}


.input, input:hover,
.input, text:hover,
.input, textarea:hover,
.input, select:hover {
    border-color:  rgb(19, 196, 196);
}