st-form {
  font-size: var(--st-form-font-size, 16px);
  line-height: var(--st-form-line-height, 1.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: left; }
  st-form * {
    margin: 0;
    padding: 0;
    box-sizing: border-box; }
  st-form form {
    position: relative;
    background-color: var(--st-form-background-color, #F6F7F8);
    border: var(--st-form-border-size, 1px) solid var(--st-form-border-color, #D6D9DC);
    border-radius: var(--st-form-border-radius, 3px);
    width: var(--st-form-width, 100%);
    padding: var(--st-form-padding, 10px 10px 40px 10px);
    margin: var(--st-form-margin, 0 0 40px 0); }
    st-form form.st-form-errors {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: shake;
      animation-name: shake; }
  st-form .st-validation-icon {
    visibility: hidden;
    position: relative;
    left: -20px; }
  st-form .st-form-row {
    margin-bottom: var(--st-form-row-margin-bottom, 0px);
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    /* Inputs */
    /* Select Elements */
    /* Textarea */
    /* Checkboxes */ }
    st-form .st-form-row input[type='text'],
    st-form .st-form-row input[type='email'],
    st-form .st-form-row input[type='number'],
    st-form .st-form-row select {
      background-color: var(--st-form-input-background-color, #FFFFFF);
      border: 1px solid var(--st-form-input-border-color, #D6D9DC);
      border-radius: var(--st-form-input-border-radius, 3px);
      width: var(--st-form-input-width, 100%);
      padding: var(--st-form-input-padding, 7px);
      font-size: var(--st-form-input-font-size, 14px); }
    st-form .st-form-row [type='text'].st-touched:invalid,
    st-form .st-form-row [type='email'].st-touched:invalid,
    st-form .st-form-row [type='tel'].st-touched:invalid,
    st-form .st-form-row [type='number'].st-touched:invalid,
    st-form .st-form-row select.st-touched:invalid {
      border: 1px solid var(--st-form-input-invalid-border-color, #D55C5F);
      color: var(--st-form-input-invalid-color, #D55C5F);
      box-shadow: none; }
    st-form .st-form-row select {
      -webkit-appearance: none; }
    st-form .st-form-row textarea {
      font-family: "Roboto", "Arial", sans-serif;
      font-size: var(--st-form-input-font-size, 14px);
      border: 1px solid #D6D9DC;
      border-radius: var(--st-form-input-border-radius, 3px);
      min-height: 200px;
      margin-bottom: 10px;
      padding: 7px;
      resize: none; }
    st-form .st-form-row .instructions {
      color: #999999;
      font-size: 14px;
      margin-bottom: 30px; }
    st-form .st-form-row .st-checkbox-label {
      display: inline-block;
      margin: var(--st-checkbox-label-margin, 2px 0 0 0); }
      st-form .st-form-row .st-checkbox-label > input {
        margin-right: 5px; }
  st-form .st-form-options-row {
    border: none;
    margin: var(--st-form-options-row-margin, 10px 0 20px 0);
    display: flex;
    flex-direction: column; }
    st-form .st-form-options-row .st-radio-label, st-form .st-form-options-row .st-checkbox-label {
      display: flex;
      font-size: var(--st-form-radio-label-font-size, 14px);
      padding: var(--st-form-radio-label-padding, 0); }
    st-form .st-form-options-row input[type='radio'], st-form .st-form-options-row input[type='checkbox'] {
      flex: none;
      margin: var(--st-form-radio-margin, 2px 8px 0 0); }
  st-form .st-muted-text {
    color: #66788a; }

@media only screen and (min-width: 700px) {
  st-form form {
    width: var(--st-form-width-desktop, 560px);
    padding: var(--st-form-padding-desktop, 20px 70px 50px 50px); } }

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0); } }