/**
 * @file
 * CSS for form components.
 */




/**
 * ===== FORM =====
 */
button,
form,
fieldset,
input,
legend,
option,
select,
textarea {
  font-family: "Fira Sans", sans-serif;
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.6;
}




/**
 * ===== FORM =====
 */
form {}




/**
 * ===== FIELDSET =====
 */
fieldset {}
legend {
  display: block;
  font-weight: 700;
  padding: 0.25rem 0;
}

summary {
  display: block;
  font-weight: 700;
  padding: 0.25rem 0;
}


/**
 * ===== LABEL =====
 */
label {
  display: block;
  font-weight: 700;
  padding: 0.25rem 0;
}




/**
 * ===== INPUT =====
 */
input {
  background-color: var(--custom-color-0-3);
  border: 3px solid var(--custom-color-1-1);
  border-width: 0 0 3px 0;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0.2em 0.2em 0.1em 0.2em ;
}
input:focus {
  background-color: #FFFFCC;
}
input.error {
  background-color: #fcf4f2;
  border-color: var(--custom-color-6-1);
}




/**
 * ===== SELECT =====
 */
select {
  background-color: var(--custom-color-2-2);
  border: 1px solid var(--custom-color-1-3);
  border-width: 0 0 1px 0;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0.2em 0.2em 0.1em 0.2em ;
}
select:focus {
  background-color: #FFFFCC;
}




/**
 * ===== TEXTAREA =====
 */
textarea {
  background-color: var(--custom-color-2-2);
  border: 1px solid var(--custom-color-1-3);
  border-width: 0 0 1px 0;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0.2rem 0.2rem 0.1rem 0.2rem ;
  width: 100%;
}
textarea:focus {
  background-color: #FFFFCC;
}