.variation-b {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #999999;
  //height: 100%;
  line-height: 1.5;
  background-color: transparent;
  margin: 0 0 0 0;
  color: #777777;
  // if ab test supports form style: there is another branch called
  // forms-forms-forms that has a variation on the styles below.
  // They need a lot of cleaning. Consider not using default formtastic styles



  $brand-blue: #008CEB;
  $brand-orange: #ff7314;


  @mixin internal-potato-button($color, $bgcolor, $border-color) {
    @include border-radius(6px);

    display: inline-block;
    background-color: transparent;
    font-weight: bold;
    line-height: 14px;
    background: none;
    @include text-shadow(none);
    vertical-align: top;

    margin-top: 0.10em;

    padding: 12px;

    border: 1px solid $border-color;
    color: $brand-blue;
    text-decoration: none;

    cursor: pointer;

    &.big {
      font-size: 18px;
    }

    &:focus {
      border: 1px solid $brand-blue;
    }

    &:hover {
      border-color: $brand-blue;
    }

  }


  .less-important-button {
    @include internal-potato-button( black, lighten(black, 80%), lighten(black, 65%));
    @include single-text-shadow(none);
  }


  .important-button, .formtastic .important-button {
    @include internal-potato-button($important-button-color, $important-button-bg-color, $border-color);
  }

  .disabled-button {
    @include internal-potato-button( lighten(black, 80%), white, lighten(black, 85%));
    @include single-text-shadow(none);
    cursor: default;
  }

  .button.next, a.next {
    float: right;
    margin-bottom: 1em;
    clear: both;
  }

  .confirm-or-cancel {

    .button.next, a.next {
      clear: none;
    }

    .button.cancel, a.cancel {
      float: left;
      margin-top: 2.5em;
    }

  }


  .dangerous-button, .formtastic .dangerous-button {
    @include internal-potato-button(white, darken($delete-color, 10%), $delete-color );
  }


  .formtastic .buttons {
    button, input[type='submit'] {
       height: auto;
    }
  }

  form.formtastic .button-bar fieldset {
    margin: 0;
  }

  // Lame but functional, improvements welcomed.
  form.formtastic .button-bar, .button-bar {
    height: 40px;
    position: relative;

    .important-button, .less-important-button, .dangerous-button {
      @include box-sizing(content-box);

      font-size: 100%;

      margin: 0;
      height: 1.3em;
      line-height: 15px;
    }

    & > fieldset {
      margin: 0;

      &.buttons:first-child {
        position: absolute;
        left: 0px;
        text-align: left;
        padding-left: 0;

        & > ol > li {
          margin-right: 0.5em;
        }
      }

      &.buttons:last-child {
        position: absolute;
        width: 65%;
        right: 0px;
        text-align: right;
        padding-right: 0;
        color: green;

        & > ol > li {
          margin-left: 0.5em;
        }

      }

      & > ol > li { display: inline-block; }
    }
  }






  input, textarea {
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #999999;
  }

  body {

  }

  form + hr {
    margin: 1em 0;
  }




  form + hr {
    margin: 1em 0;
  }



  /* -------------------------------------------------------------------------------------------------
  Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
  --------------------------------------------------------------------------------------------------*/
  form.formtastic {
    font-size: 14px;
  }

  @media (min-width: 800px) {

    form.formtastic {
      font-size: 16px;
    }
  }


  @media (min-width: 1000px) {

    form.formtastic {
      font-size: 18px;
    }
  }



  form.formtastic {
    text-align: left; /* overriding legacy_theme text-align: center*/
    //border: 1px solid $border-color;
    //@include border-radius(6px);
    select {
      margin-top: 10px;
    }


    textarea:focus, input:focus{
      outline: 0;
    }

    //max-width: 1100px;

    fieldset[data-behavior~=toggle-inputs] {



        &.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;
      padding: 0 0 0 0;
    }

    p {
      font-size: 14px;
      line-height: 2;
      margin-bottom: 0;
      padding-top: 3px;
    }

    fieldset > ol > li label {
      width: 32.8%;
      text-align: right;
      margin-right: 2.2%;
      line-height: 2;
      padding-top: 3px;
      padding-right: 0 !important;
      cursor: pointer;
      //color: $brand-blue;

    }

    legend {


      .helpButton {
        vertical-align: middle;
      }

      i.fa {
        display: inline-block;

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

    fieldset {
      //border-top: 1px dotted $border-color;
      //@include border-radius(6px);
      border-left: 12px solid lighten($border-color, 7%);
      margin: -17px 0 0 0;
      padding: 0 0 24px 0;
      //max-width: 1200px;


      &.inputs, &.buttons {
        $blue: $brand-blue;
        //border-color: lighten($border-color, 7%);

        legend {
          //color: $blue;
        }

        input[type='text'],
        input[type='tel'],
        input[type='email'],
        input[type='url'],
        input[type='password'] {
          color: $blue;

          &:hover, &:focus {
            border-color: $blue;
          }
        }
      }


      &.inputs.step-1 {
        $blue: $brand-blue;
        border-color: $blue;
        //color: $blue;

        legend {
          color: $blue;
        }


        input[type='text'],
        input[type='tel'],
        input[type='email'],
        input[type='url'],
        input[type='password'] {
          color: $blue;

          &:hover, &:focus {
            border-color: $blue;
          }
        }
      }

      &.inputs.step-2 {
        $green: #829a3c;
        border-color: $green;
        //color: $green;

        legend {
          color: $green;
        }

        input[type='text'],
        input[type='tel'],
        input[type='email'],
        input[type='url'],
        input[type='password'] {
          color: $green;

          &:hover, &:focus {
            border-color: $green;
          }
        }
      }

      fieldset {
        //border-top: 1px dotted $border-color !important;
        margin: 0 0 0 24.9%;
        padding: 0 0 0 0;
        margin-bottom: 0;

        ol li {
          margin: 0 0 0 0;
        }

        label {
          text-align: left !important;
        }

        fieldset {
          border-left: none;
          padding-top: 0;
          margin: 0 0 0 0 !important;
          legend {
            padding: 0 0 0 0;
          }
          border-top: none;
          padding-left: 0;
          margin-left: 0;
        }
      }
    }

    fieldset > ol > fieldset legend {
      margin-left: 3.2%;
    }

    fieldset > ol > li fieldset legend,
    fieldset > ol > li fieldset legend.label label {
      position: static;
      width: auto;
      float: none;
      margin: 0 0 0 0 !important;
      padding: 3px 0 3px 0;
      font-style: normal;
    }

    legend {
      color: $font-color;
      //border: 1px solid $border-color;
      color: darken($border-color, 15%);
      //border-left: 12px solid lighten($border-color, 8%);
      padding: 3px 0 3px 0;
      margin-left: 0;
      text-indent: 24px;
      width: 100%;
      display: block;

      //@include border-radius(12px);
      //margin-bottom: 15px;
      font-size: 20px;
      text-transform: lowercase;
      //font-style: italic;
      white-space: nowrap;
      font-variant: small-caps;

      span {

        padding: 0 6px 3px 6px;
        background-color: transparent;
        white-space: nowrap;
        position: relative;
        top: 5px;
        left: -20px;
      }


      &.label {
        padding: 0 0 0 0;
        text-indent: 0;
        width: auto;
        border-top: none;
        //margin-left: 5.2%;
      }



    }



    label {

      //text-align: right;
    }
  }


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


  form.formtastic fieldset > ol > li.text textarea {
    padding: 12px;
  }

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

  form.formtastic fieldset > ol > li.boolean label {
    //padding-left: 21.9%;
    //width: 100% - 21.9%;
    //margin-left: 24.9%;
    padding: 0 0 0 0;
    margin-left: 21.8%;
    width: 100% - 21.8%;
    //max-width: 200px;
    text-align: left;
    float: none;
  }

  form.formtastic fieldset > ol > li.boolean label input {
    margin: 0 2.7% 0 0;
    //width: 4%;
    //min-width: 10px;
    line-height: 2;
  }

  form.formtastic fieldset > ol > li.radio fieldset ol li label {
    //padding-left: 21.9%;
    //width: 100% - 21.9%;
    text-align: left;
    float: none;
    margin-left: 5.2%;
    width: 100% - 5.2%;
    //margin-left: -2.4%;
    //padding-left: 30%;
    //width: 100% - 30%;
  }

  form.formtastic fieldset > ol > li.radio fieldset ol li label input {
    margin: 0 3.7% 0 0;
    line-height: 2;
  }

  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#new_post.formtastic fieldset > ol > li.boolean label {
    padding-left:0;
  }

  form.formtastic fieldset.buttoned {
    border-bottom: 1px solid lighten($border-color, 7%);

    li:last-child {
      padding-top: 24px;
    }
  }

  form.formtastic fieldset.buttons {
    //width: 70%;
    position: relative;
    max-width: 90%;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 24px;
    //max-width: 500px;
    border-top: none;
    border-bottom: 1px solid lighten($border-color, 7%);
    padding-top: 0;
    margin-top: 0;

    li {
      padding: 0 0 0 0;
      margin: 0 0 0 0;
    }

    li.link {
      font-size: 20px;
      text-transform: lowercase;
      white-space: nowrap;
      font-variant: small-caps;
      position: absolute;
      top: 8px;
      left: 95px
    }
  }


  /* 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.formtastic div#edit_new_thread fieldset.inputs { width: 100%; }
  form.formtastic div#edit_new_thread  textarea { width: 97%; }

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

  form.formtastic fieldset > ol > li.text textarea {
    border: none;
    //border-left: 1px solid $border-color;
    //border-bottom: 1px solid $border-color;
    color: $brand-blue;
    line-height: 2;
    //height: 24px * 5;
    padding: 0 0 0 0;
    //@include transition(0.2s background-color ease-out);
    //background-color: white;
    max-width: 400px;
    @include background-image(linear-gradient(white, white 23px, $border-color 23px, $border-color 24px, white 24px));

    background-size: 100% 24px;
    line-height: 24px;
    font-family: Arial, Helvetica, Sans-serif;
    //padding: 8px;

    &:hover, &:focus, &:focus:hover {
      @include background-image(linear-gradient(white, white 23px, $brand-blue 23px, $brand-blue 24px, white 24px));
      background-size: 100% 24px;
      background-color: transparent;
    }

    &:focus {
      @include background-image(linear-gradient(white, white 23px, $border-color 23px, $border-color 24px, white 24px));
      background-size: 100% 24px;
    }

  }

  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'] {
    color: $font-color;
    padding: 3px 0 3px 0;
    height: 2em;
    width: 65%;
    max-width: 400px;
    border: none;
    border-bottom: 1px solid $border-color;
    color: $brand-blue;
    background-color: transparent;
    @include transition(0.2s border-color ease-out);

    &:hover, &:focus {
      border-color: $brand-blue;
    }
  }

  form.formtastic fieldset.inputs .error input[type='text'],
  form.formtastic fieldset.inputs .error input[type='tel'],
  form.formtastic fieldset.inputs .error input[type='email'],
  form.formtastic fieldset.inputs .error input[type='url'],
  form.formtastic fieldset.inputs .error input[type='password'],
  form.formtastic fieldset.inputs .error input:focus[type='text'],
  form.formtastic fieldset.inputs .error input:focus[type='tel'],
  form.formtastic fieldset.inputs .error input:focus[type='email'],
  form.formtastic fieldset.inputs .error input:focus[type='url'],
  form.formtastic fieldset.inputs .error input:focus[type='password'] {
    border: none;
    border-bottom: 1px solid $error-color;
    @include box-shadow(none);
  }


  form.formtastic fieldset.inputs input:disabled, form.formtastic fieldset.inputs input[readonly="readonly"] {
    color: $font-color !important;
    opacity: 1;
    //border-bottom: none;
    border-color: $border-color;
    &:hover, &:focus {
      border-color: $border-color;
    }

  }



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


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





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





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

  form.formtastic fieldset  > ol > li {
    margin: 12px 0 12px 0;
    min-height: 24px;
    padding: 0 0 0 0;

    fieldset  > ol > li {
      margin: 0 0 0 0 !important;
      padding: 0 0 0 0 !important;
    }
  }

  form.formtastic fieldset  > ol > li.commit {
    margin: 0 0 0 0;
    float: right;
  }

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



  form.formtastic p,
  form.formtastic .right-hint,
  form.formtastic fieldset > ol > li p.inline-hints,
  form.formtastic fieldset > ol > li p.inline-errors
  {
    //margin: 12px 0 0 25.1%;
    font-style: italic;
    margin: 0 0 0 34.9%;
    padding: 6px 0 0 0;
    max-width: 400px;
    clear: both;
    font-size: 14px;
    height: 0;
    overflow: hidden;
    // We delay animation, because it moves the submit button away from under the
    // cursor when submitting. Beware of Safari, other browsers work with 0.05s.
    $delay: 0.1s;
    @include transition(0.3s color ease-out $delay, 0.3s height ease-out $delay);
    line-height: 18px;

  }

  form.formtastic fieldset > ol > li.error p.inline-errors {
    height: 24px;
    overflow: visible;
    clear: both;
    color: $error-color;
  }

  form.formtastic fieldset > ol > li *:focus + p.inline-hints,
  form.formtastic fieldset > ol > li *:focus + strong + p.inline-hints,
  form.formtastic fieldset.inputs .error input[type='text']:focus + p.inline-hints,
  form.formtastic fieldset.inputs .error input[type='tel']:focus + p.inline-hints,
  form.formtastic fieldset.inputs .error input[type='email']:focus + p.inline-hints,
  form.formtastic fieldset.inputs .error input[type='url']:focus + p.inline-hints,
  form.formtastic fieldset.inputs .error input[type='password']:focus + p.inline-hints {
    color: darken($border-color, 25%);
    height: 24px;
    overflow: visible;
    clear: both;
  }


  form.formtastic fieldset > ol > li.error p.inline-hints {
    display: none;
  }

  form.formtastic fieldset > ol > li p.inline-errors {
    color: $error-color;
  }


  form.formtastic .right-hint {
    color: $font-color;
    padding-top: 24px;
    font-style: italic;
  }

  form.formtastic fieldset > ol > li.boolean p.inline-hints {
    border-top: 1px dotted $border-color;
    margin-top: 3px;
  }

  form.formtastic fieldset fieldset p,
  form.formtastic fieldset fieldset .right-hint,
  form.formtastic fieldset fieldset > ol > li p.inline-hints {
    margin: 0 0 0 7.9%;
  }

  form.formtastic fieldset fieldset > ol > li p.inline-hints {
    margin: 0 0 0 8%;
  }



  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;
  }


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

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

  .ui-widget a {
    outline: none;
  }


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


  // Placeholders
  form.formtastic {

    abbr {
      display: none;
    }
  }



  // specific

  .domain strong {
    margin-left: -80px;
  }

  p.inline-hints.fucked-up {
    margin-top: -24px;
  }

  form.formtastic fieldset ol li.error.hidden + li.hidden,
  form.formtastic fieldset ol li.error.hidden {
    display: block;
  }

  form.formtastic fieldset ol li#account_subdomain_input,
  form.formtastic fieldset ol li#account_self_subdomain_input {
    input {
      //text-align: right;
      //text-indent: -80px;
      //padding-right: 25%;
      //margin-left: 80px;
      //width: 30%;
    }

    .inline-hints {
      color: darken($border-color, 35%);
      height: auto;
      overflow: visible;
      clear: both;
    }
  }



  ::-webkit-input-placeholder {
    color: $font-color;
    opacity: 0.25;
    font-weight: normal;
  }

  :-moz-placeholder {
    color: $font-color;
    opacity: 0.25;
    font-weight: normal;
  }
  ::-moz-placeholder {
    color: $font-color;
    opacity: 0.25;
    font-weight: normal;
  }

  :-ms-input-placeholder {
    color: $font-color;
    opacity: 0.25;
    font-weight: normal;
  }
}
