@mixin paged-mobile($width, $columns) {
  $grid-padding: 20px;
  $label-columns: $columns / 3;
  $field-columns: $columns - $label-columns;

  .panel {
    @include container($columns);
    @include tablemix($columns, $label-columns, $field-columns);

    padding-top: $grid-padding;
  }

  // Reduce table width of scale questions on small screens
  @media (max-width: 420px) {
    .horizontal.item.scale {
      table {
        table-layout: fixed;
        td.last p {
          position: absolute;
          right: 20px;
          max-width: 5rem;
          text-align: right;
        }
      }
    }
  }

  tr {
    border: 1px solid #aaa;
  }

  .item {
    @include span-columns($columns omega);
    margin-bottom: 18px;
  }

  .item.horizontal,
  .item.vertical {
    &.radio,
    &.check_box {
      .option {
        @include span-columns($columns omega);
        .radiocheckwrapper { @include span-columns(1); }
        .labelwrapper { @include span-columns($columns - 1 omega); }

        &.show_values {
           .value { @include span-columns(1); }
           .labelwrapper { @include span-columns($columns - 2 omega); }
        }

        // .subquestions {
        //   @include pre(1);
        //   @include span-columns(23-$label-columns);

        //   .item {
        //     @include span-columns(23-$label-columns);
        //     input { width: auto; }
        //   }
        // }
      }

    }

    &.string,
    &.textarea {
      input, textarea { @include span-columns($columns omega) }
      .sized { width: auto; }
    }

    &.integer.slider,
    &.float.slider {
      .slider { @include span-columns($columns omega); }

      .labels {
        position: relative;
        height: 2em;
        padding-top: 4px;
        padding-bottom: 4px;
        div {
          text-align: center;
          width: 400px;
          margin-left: -200px;
          position: absolute;
        }
        .first, :first-child {
          text-align: left;
          margin-left: 0;
        }
        .last, :last-child {
          text-align: right;
          right: 0;
        }
      }
    }
  }

  .progress-bar {
    @include span-columns($columns omega);
    margin-left: -$grid-padding;
    margin-right: -$grid-padding;
    padding: 1.5em $grid-padding;

    .progress-wrapper {
      .progress-slider {
        background-position: 0 3px;
        display: inline-block; zoom: 1; *display: inline; // IE7 Hack
        .progress-stop {
          margin: 0 2px;
          width: 8px;
          height: 8px;
        }
        &.long-list {
          display: none;
        }
      }
    }
  }

  .buttons {
    @include span-columns($columns omega);
    margin-left: -$grid-padding;
    margin-right: -$grid-padding;
    padding: 1.5em $grid-padding;
    border-bottom: 1px dotted #d0d0d0;

    .back  { @include span-columns($columns / 2); }
    .prev  { @include span-columns($columns / 2); }
    .next  { @include span-columns($columns / 2 omega); text-align: right; }
    .abort { display: none; }
    .print { display: none; }
    .print { @include span-columns($columns);           text-align: right; }
    .save  { @include span-columns($columns / 2 omega); text-align: right; }
  }
}