form.userform {
  box-sizing: border-box;
  margin: 1em 0;
  /*
  <div id="userform-progress" class="userform-progress" aria-hidden="false" style="">
    <p>Page <span class="current-step-number">1</span> of <span class="total-step-number">2</span></p>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="2"></div>
    </div>
    <nav aria-label="Pages in this form">
      <ul class="step-buttons">
        <li class="step-button-wrapper current viewed" data-for="EditableFormStep_527ba">
          <button class="step-button-jump js-align" data-step="1" style="left: 0%; margin-left: 0px;">1</button>
        </li>
        <li class="step-button-wrapper" data-for="EditableFormStep_a5e78">
          <button class="step-button-jump js-align" disabled="" data-step="2" style="left: 100%; margin-left: -40px;">2</button>
        </li>
      </ul>
    </nav>
  </div>
  <h2 class="progress-title">First Page</h2>
  */
}
form.userform *, form.userform *:before, form.userform *:after {
  box-sizing: inherit;
}
form.userform fieldset.userformsgroup {
  padding: 10px;
}
form.userform fieldset.userformsgroup.nolabel {
  padding: 0;
  border: 0;
  margin: 0;
}
form.userform .Actions,
form.userform .field {
  float: none;
  margin: 1em 0;
}
form.userform label,
form.userform label.left,
form.userform legend,
form.userform legend.left {
  display: block;
  font-weight: bold;
  float: none;
}
.required form.userform label:after, .requiredField form.userform label:after, .required
form.userform label.left:after, .requiredField
form.userform label.left:after, .required
form.userform legend:after, .requiredField
form.userform legend:after, .required
form.userform legend.left:after, .requiredField
form.userform legend.left:after {
  content: ' *';
  color: #f00;
  font-weight: bold;
}
form.userform label.required:after {
  content: ' *';
  color: #f00;
}
form.userform .requiredField legend:after {
  content: ' *';
  color: #f00;
  font-weight: bold;
}
form.userform .checkboxset.requiredField label:after {
  display: none;
}
form.userform input,
form.userform textarea {
  font: normal 12px/18px "Lucida Sans", "Lucida Grande", Trebuchet, "Trebuchet MS", Arial, sans-serif;
  padding: 0.5em;
  margin: 0;
}
form.userform input.text,
form.userform input[type="text"],
form.userform textarea {
  color: 0;
  padding: 0.5em;
  border: 1px solid #b8b8b8;
  width: 100%;
}
form.userform textarea {
  padding-top: 0.5em;
}
form.userform .checkbox label,
form.userform .checkboxset label,
form.userform .optionset label {
  display: inline-block;
  font-weight: normal;
}
form.userform .checkbox input[type='radio'],
form.userform .checkbox input[type='checkbox'],
form.userform .checkboxset input[type='radio'],
form.userform .checkboxset input[type='checkbox'],
form.userform .optionset input[type='radio'],
form.userform .optionset input[type='checkbox'] {
  display: inline-block;
  margin-right: 0.35em;
  margin-left: 0.1em;
  margin-top: 0.2em;
}
form.userform ul.checkboxset, .typography form.userform ul.checkboxset,
form.userform ul.optionset, .typography
form.userform ul.optionset {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}
form.userform ul.checkboxset li, .typography form.userform ul.checkboxset li,
form.userform ul.optionset li, .typography
form.userform ul.optionset li {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 0.3em;
}
form.userform .userformsgroup.nolabel {
  border: 0;
  padding: 0;
  margin: 0;
}
form.userform .userformsgroup > .middleColumn {
  display: table;
  width: 100%;
  width: calc(100% + (2 * 10px));
  border-spacing: 10px 0;
  border-spacing: 10px 0;
  table-layout: fixed;
  margin-left: -10px;
  margin-right: -10px;
}
form.userform .userformsgroup > .middleColumn > .field {
  margin-bottom: 1em;
  padding: 0;
  display: table-cell;
  vertical-align: top;
}
form.userform .userformsgroup > .middleColumn > .field .dropdown {
  width: 100%;
}
form.userform .dropdown.full-width {
  width: 100%;
}
form.userform .message {
  font-weight: bold;
  color: 0;
}
form.userform .message.error, form.userform .message.required, form.userform .message.validation {
  color: #f00 !important;
}
form.userform .message.error *, form.userform .message.required *, form.userform .message.validation * {
  color: #f00 !important;
}
form.userform .message.good {
  color: #ff0 !important;
}
form.userform .message.good * {
  color: #ff0 !important;
}
form.userform .message.box, form > form.userform .message {
  border: 2px solid currentColor;
  padding: 0.5em 1em;
}