@mixin labels_top {
  & {
    .control_group,
    .control-group {
      .input {
        margin: 0 0 5px 0;
      }

      .label,
      .control-label {
        float: none;
        text-align: left;
        display: inline-block;
        width: auto;

        label {
          padding: 0 8px 0 0;
          line-height: 1.8;
        }

        &.help {
          i {
            position: absolute;
            right: -13px;
            top: 2px;
          }

          span {
            left: 60%;;
            top: 27px;
          }
        }
      }
    }

    fieldset {
      legend {
        margin-left: 3px;
      }
    }

    .value {
      padding-top: 2px;
    }

    .required {
      .label,
      .control-label {
        &:after {
          right: 0;
          top: 0;
        }

        &.help {
          i {
            right: -19px;
          }
        }
      }
    }

  }
}

@mixin messages_bottom {
  & {
    .note {
      display: block;
      padding: 10px $input_padding 6px $input_padding;
      margin: 0;
      border: 1px solid $light_border_color;
      border-top-width: 0;
      @include border-radius(0 0 $border_radius $border_radius);
      position: relative;
      top: -10px;
    }

    .hint ~ .note,
    .message ~ .note {
      background: $white_color;
      top: -4px;
      padding-top: 7px;
      border-top-width: 1px;
    }

    .message ~ .hint {
      display: none;
    }

    .hint,
    .message {
      display: block;
      position: relative;
      left: 0;
      @include opacity(1);
      margin: 3px 0 0 0;

      &:before,
      &:after {
        border-width: 0 8px 8px 8px;
        border-color: $transparent_white_color $transparent_white_color $light_box_gradient;
        top: 0;
        left: auto;
        right: 20px;
      }

      &:after {
        top: -1px;
        left: auto;
        border-color: $transparent_white_color $transparent_white_color $light_border_color;
      }

      &:hover {
        left: 0;
      }
    }

    .control_group,
    .control-group{
      input:focus ~ .hint {
        left: 0;
      }
    }

    .success,
    .warning,
    .error {
      .message {
        display: block;
        margin: 3px 0 0 0;

        & ~ .hint {
          margin: 0;
          position: relative;
          top: -2px;
          @include border-radius(0 0 $border_radius $border_radius);

          &:before,
          &:after {
            display: none;
          }
        }
      }
    }
  }
}

.form.labels_top {
  @include labels_top;
}

.form.messages_bottom {
  @include messages_bottom;
}

@media screen and (max-width: 1024px) {
  .form {
    @include labels_top;
  }
}

@media screen and (max-width: 768px) {
  .form {
    @include labels_top;
    @include messages_bottom;
  }
}