@import "paged/mobile";
@import "paged/desktop";

.hidden { display: none;}

.paged {
  .noVisibleQuestions { display: none;}

  .hide {
    margin:  0 !important;
    outline: none !important;
  }

  .hide > * {
    display: none !important;
  }

  // grid setup
  $column-width: 2em;
  $gutter-width: 0.5em;
  $grid-padding: 0;
  $blueprint-grid-outer-width: $column-width + 2*$gutter-width;

  // configure widths for responsive design
  $desktop-width:   35em;
  $desktop-columns: 20;
  $mobile-width:    24em;
  $mobile-columns:  12;

  // set default number of columns to smallest supported style
  // the number of columns will be enlarged for larger screens
  $total-columns: $mobile-columns;

  .panel {
     background: white;
   }

  @include paged-mobile($mobile-width, $mobile-columns);
  @include paged-desktop($desktop-width, $desktop-columns);

  .panel {
    margin-bottom: 2em;
    @include box-shadow(0 0 6px rgba(0, 0, 0, 0.3));

    h1 {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 1.2em;
      z-index: 400;
    }

    hr { height: 8px; border: 0; background: #ddd; }

    .progress-bar {
      height: 25px;
      .progress-wrapper {
        text-align: center;
        .progress-slider {
          height: 8px;
          text-align: center;
          border: 1px solid #ccc;
          padding: 0;
          border-radius: 6px;
          overflow: hidden;
          padding: 1px;
          .progress-stop {
            height: 8px;
            line-height: 8px;
            width: 6px;
            background: #fff;
            font-size: 6px;
            text-indent: -1234em;
            display: block;
            float: left;
            text-align: center;
            margin: 0;
            &.first-child { width: 8px; border-radius: 5px 0 0 5px; }
            &.last-child  { width: 8px; border-radius: 0 5px 5px 0; }
            &.active      { background: #999; }
            &.current     {
              border-radius: 0 5px 5px 0;
              &.first-child {
                border-radius: 5px;
              }
            }
          }
        }
        .progress-details {
          color: #999;
          font-size: 9px;
          margin: 4px 0 0 0;
          display: block;
        }
      }
    }

    .buttons {
      border-top: 1px dotted #d6d6d6;
      background: #f3f3f3;
    }

    .item {
      &.hidden{ display:none; }

      &.errors {
        outline: 1px solid red;
        padding: 0.4em;
        .error {
          background: #ffaaaa;
          color: #550000;
          outline: 1px solid red;
          padding: 0.3em;
          margin-bottom: 0.3em;
        }
      }

      .main {
        font-weight: bold;
        em {
            font-style: italic;
        }
      }

      .text {
        @include text;
      }

      .description-and-fields {
        .description { @include text; }
      }

      &.horizontal {
        .main {
          margin-bottom: 1em;
        }
      }

      &.radio, &.check_box {
        .inner-title {
          margin-top: 1.5em;
          margin-bottom: 1.5em;
          font-weight: bold;
        }

        .option {
          .labelwrapper {
            p { display: inline; }
          }

          &.show_values {
            .value { text-align: center; }
          }

        }
      }

      &.scale {
          td {
              border: 0;
              text-align: center;
          }

          .option, .description {
              &.optionwidth1{width:20%}
              &.optionwidth2{width:20%}
              &.optionwidth3{width:20%}
              &.optionwidth4{width:20%}
              &.optionwidth5{width:20%}
              &.optionwidth6{width:(100%/6)}
              &.optionwidth7{width:(100%/7)}
              &.optionwidth8{width:(100%/8)}
              &.optionwidth9{width:(100%/9)}
              &.optionwidth10{width:(100%/10)}
              &.optionwidth11{width:(100%/11)}
              &.optionwidth12{width:(100%/12)}
          }

      }
    }

    // @include tablemix($total-columns, $label-columns, $field-columns);
  }
}