.cummon_form input, textarea{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: whitesmoke;
  border-color: var(--violet);
}

.cummon_form button {
  width: 100%;
  background-color: var(--violet);
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cummon_form button[type=submit]:hover {
  background-color: var(--turquoise);
}

.cummon_form ul, .helptext{
  font-size: 12px;
  opacity: 80%;
}

.errorlist{
  color: red;
}

.cummon_form p{
  display: flex;
  flex-direction: column;
}

.cummon_form img{
  align-self: start;
}
/*###########################*/

/* simple answer form */
.simple_answer_form{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.simple_answer_form button {
  width: 100%;
  background-color: var(--violet);
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.simple_answer_form input{
  width: 100%;
  padding: 12px 20px;
  margin: 2px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: whitesmoke;
  border-color: var(--violet);
}

/*###########################*/

/* radio 4 choices form */

.choices_form{
  width: 100%;
}

.form_radio_btn {
  display: flex;
}
.form_radio_btn input[type=radio] {
  display: none;
}
.form_radio_btn label {
  background-color: whitesmoke;
  margin: 5px 0;
  width: 100vw;
  display: inline-block;
  cursor: pointer;
  padding: 14px 20px;
  border: 1px solid var(--violet);
  border-radius: 4px;
  user-select: none;
}
 
/* Checked */
.form_radio_btn input[type=radio]:checked + label {
  background: var(--turquoise);
}
 
/* Hover */
.form_radio_btn label:hover {
  background: var(--turquoise);
  transition: background 0.5s ease;
}

.choices_form button[type=submit]:hover {
  background-color: var(--turquoise);
}

.choices_form button {
  width: 100%;
  background-color: var(--violet);
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}


/*###########################*/
/*file input form*/

.file_input{
  display: flex;
  flex-direction: column;
}

.file_input input{
  margin: 5px 0 0 0;
}

.file_input button {
  width: 100%;
  background-color: var(--violet);
  color: black;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}