form + hr {
  margin: 1em 0;
}


/* -------------------------------------------------------------------------------------------------
Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
--------------------------------------------------------------------------------------------------*/
form.formtastic.notification_preferences fieldset > ol > li fieldset ol {
  width: 100%;
  margin: 0;
  padding: 24px 0 0 0;
}

form.formtastic {
  text-align: left; /* overriding legacy_theme text-align: center*/
  max-width: 1100px;
  fieldset[data-behavior~=toggle-inputs] {
      border: 1px dashed $border-color;
      background-color: rgba(0,0,0,0.05);

      &.packed {
        border-color: transparent;
        background-color: transparent;

        legend {
          color: $link-color !important;
        }
      }

      legend {
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 0;
        width: auto;
      }
  }

  fieldset > ol > li fieldset ol {
    z-index: 1000;
    position: relative;
  }

  p.instruction { margin: 10px 0;  }

  fieldset > ol > li label {
    font-weight: bold;
    width: 24%;
    padding-right: 1%;
  }

  legend {
    .helpButton {
      vertical-align: middle;
    }

    i.fa {
      display: inline-block;

      &.fa-caret-right {
        width: 5px;
        padding-left: 2px;
      }
      &.fa-caret-down {
        width: 7px;
      }
    }
  }

  legend:not(.label) {
    padding: 4px 0;
    width: 99%;
    margin-bottom: 15px;
    font-size: 14px;
  }
}


div.wide_form form.formtastic fieldset > ol > li label {
  display: block;
  width: 100%;
}


form.formtastic fieldset > ol > li.text textarea {
  width:90%;
  padding: 10px;
}

form.formtastic fieldset > ol > li.text textarea#account_plan_description {
  width:50%;
}

form#message-form.formtastic fieldset > ol > li.text textarea {
  width:500px;
}

form.formtastic fieldset > ol > li.boolean label input {
  margin:0 0.5em 0 0;
}

form.web_hook fieldset > ol > li.boolean label {
  font-weight: normal;
}

form.web_hook table > tbody > tr > td {
    width: 20%;
}

form.web_hook table > tbody > tr > td > fieldset > ol > li.boolean label {
  padding-left: 5px;
}

form.formtastic fieldset > ol > li.boolean label {
  padding-left:26%;
}

form#new_post.formtastic fieldset > ol > li.boolean label {
  padding-left:0;
}

form.formtastic {
  // strange center aligning fixed by moving buttons bit left
  fieldset.buttons {
    position: relative;

      ol {
        position: relative;
        right: 0;
      }
    }
  }



/* Special rules for special forms */
div#form_settings_overview { padding: 10px 48px; }
div#overview_setting_bubble { padding: 10px 48px; }
div#form_settings_overview form.formtastic fieldset.buttons ol { position:relative; left:-103px; }
form#message-form fieldset > ol > li label { width: 15%; }

form.formtastic div#edit_new_thread fieldset.inputs { width: 100%; }
form.formtastic div#edit_new_thread  textarea { width: 97%; }

form.formtastic fieldset > ol > li {
 overflow: hidden;
}

form.formtastic fieldset > ol > li.text textarea {
  border: 1px solid #C8C8C8;
  color: #333;
}

form.formtastic fieldset.inputs input[type='text'],
form.formtastic fieldset.inputs input[type='tel'],
form.formtastic fieldset.inputs input[type='email'],
form.formtastic fieldset.inputs input[type='url'],
form.formtastic fieldset.inputs input[type='password'] {
  border: 1px solid #C8C8C8;
  color: #333;
  padding: 3px;
  width: 50%;
  min-width: 300px;
  max-width: 60%;
  padding: 5px;
}

form.formtastic fieldset.inputs input:disabled, form.formtastic fieldset.inputs input[readonly="readonly"] {
  border: none;
  background: rgba(0, 0, 0, 0.05);
}

form.formtastic fieldset.inputs input[readonly="readonly"] {
  color: rgba(0, 0, 0, 0.45);
}

form.formtastic fieldset.inputs input[type="submit"] {
  width: auto;
}

form.formtastic fieldset.inputs { margin: 0px; }

form.formtastic fieldset > ol > li.password input {
  max-width: none;
}



form.formtastic fieldset.buttons ol {
  float: right;

  li { padding-right: 0; }
}

/*Hack to show buttons in fancybox panel.*/
div#fancybox-outer form.formtastic fieldset.buttons ol {
  left: 0px;
}

form.formtastic fieldset.buttons {
  margin-top:0px;
  padding-left: 0;
  li { margin-bottom: 0; }
}


fieldset.buttons li.link { height: 19px;}

fieldset.buttons li.link a {
  position: relative;
  top: 10px;
}

form.formtastic fieldset > ol > li.price   input,
form.formtastic fieldset > ol > li.numeric input {
  max-width:10%;
}

form.formtastic fieldset {
  margin: 20px 0;
}

form.formtastic fieldset  > ol > li {
  margin-bottom: 10px;
}


.dashboard_bubble form.formtastic fieldset > ol > li.boolean label {
  padding-left:0;
}


form.formtastic fieldset > ol > li p.inline-hints {
  margin-left: 25.7%;
  margin-top: 0;
  width: 50%;
  min-width: 300px;
  max-width: 60%;
}

form.formtastic fieldset > ol > li p.inline-errors:first-letter {
  text-transform: capitalize;
}


/*** FancyBox Adjustmets  ***/
/****************************/

#fancybox-inner form.formtastic fieldset > ol > li label {
  float: none;
  text-align: left;
}

#fancybox-inner form.formtastic fieldset > ol > li p.inline-hints {
 margin: 0;
}

#fancybox-inner form.formtastic fieldset.buttons {
  padding: 0;
}


form.formtastic fieldset > ol li.text > textarea.source_code {
  width: 80em;
}

form.formtastic strong small {
  font-size: 80%;
}

div#usage-rules form.formtastic fieldset > ol > li fieldset {
	padding-top: 0 !important;
}


/*** Message Reply Adjustmets  ***/
/*********************************/

form.message.reply fieldset.inputs {
  padding: 3px;
  background: #EEE;
  border-radius: 3px;
}

div.messageContent + h3 {
  margin: 20px 0 0 0;
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #CCC;
}

/*** Forum Post Adjustmets  ***/
/******************************/

#forum .post + form.post {
  clear: left;
}

.ui-widget a {
  outline: none;
}


.help-button-constrainer {
  position: relative;
  padding-top: 12px;
}
