.form-layout {
  background-color: #F6F7F8;
  border: 1px solid #D6D9DC;
  border-radius: 10px;
  margin-top: 10px;
  padding: 10px;
  width: 100%;
}

/*----------------------------------------------------------------------------------------------------
 * Input, Selection, and Textarea
 *----------------------------------------------------------------------------------------------------*/
.form-field input,
.form-field select,
.form-field textarea {
  background-color: white;
  border: 1px solid #D6D9DC;
  border-radius: 3px;
  padding: 7px;
  width: 400px;
}
.form-field textarea {
  min-height: 200px;
}
@media only screen and (max-width: 699px) {
  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Button, Submit, and Reset
 *----------------------------------------------------------------------------------------------------*/
.form-field button,
.form-field input[type='button'],
.form-field input[type='reset'],
.form-field input[type='submit'] {
  background-color: #5995DA;
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-size: 125%;
  font-weight: bold;
  margin: 0 auto;
  padding: 7px 50px;
  width: auto;
}
.form-field button:hover,
.form-field input[type='button']:hover,
.form-field input[type='reset']:hover,
.form-field input[type='submit']:hover {
  background-color: #76AEED;
}
.form-field button:active,
.form-field input[type='button']:active,
.form-field input[type='reset']:active,
.form-field input[type='submit']:active {
  background-color: #407FC7;
}
@media only screen and (max-width: 699px) {
  .form-field button,
  .form-field input[type='button'],
  .form-field input[type='reset'],
  .form-field input[type='submit'] {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Form Field
 *----------------------------------------------------------------------------------------------------*/
.form-field {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-bottom: 20px;
}
@media only screen and (max-width: 699px) {
  .form-field {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Form Labels
 *----------------------------------------------------------------------------------------------------*/
.form-field label:first-child,
.form-field .form-label:first-child {
  margin-right: 20px;
  min-width: 150px;
  text-align: right;
  width: 150px;
}
.form-field label,
.form-field .form-label:first-child {
  margin-top: 7px;
}
@media only screen and (max-width: 699px) {
  .form-field label:first-child,
  .form-field .form-label:first-child {
    margin-bottom: 15px;
    margin-right: 0;
    min-width: auto;
    text-align: left;
    width: auto;
  }
  .form-field label,
  .form-field .form-label {
    margin-top: 0;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Output
 *----------------------------------------------------------------------------------------------------*/
.form-field div[data-field] {
  padding: 7px;
}
@media only screen and (max-width: 699px) {
  .form-field div[data-field] {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Extra information
 *----------------------------------------------------------------------------------------------------*/
.form-info-rt {
  width: 90%;
}
.form-info-dn {
  color: #555;
  font-size: 90%;
  margin-top: 10px;
  width: 100%;
}
@media only screen and (max-width: 699px) {
  .form-info-rt {
    width: 100%;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Groups
 *----------------------------------------------------------------------------------------------------*/
.form-block {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/*----------------------------------------------------------------------------------------------------
 * Example Customization
 *----------------------------------------------------------------------------------------------------*/
.form-block[data-name='satDinner'] .form-radio-item {
  width: 15%;
}
@media only screen and (max-width: 699px) {
  .form-block[data-name='satDinner'] .form-radio-item {
    width: 30%;
  }
}

/*----------------------------------------------------------------------------------------------------
 * Errors
 *----------------------------------------------------------------------------------------------------*/
.form-error {
	color: red;
	padding-bottom: 5px;
}