@import "bootstrap-loader.less";
@import "variables.less";
@import "shared.less";
@import "footer.less";
@import "header.less";
@import "icons.less";


body {
  color: @textColor;
  @media only screen and (max-width : 600px) {
     padding: 0px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    @grayLight !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    @grayLight !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    @grayLight !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    @grayLight !important;
}
.modal {
  display: none;
  width: 400px;
  background: #fff;
  padding: 15px 30px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 10px #000;
  -moz-box-shadow: 0 0 10px #000;
  -o-box-shadow: 0 0 10px #000;
  -ms-box-shadow: 0 0 10px #000;
  box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAB9VBMVEUAAAAAAAALCwsAAAAODg4AAAAODg4AAAAAAAABAQEAAAAAAAAHBwcBAQEBAQGRkZEBAQEFBQUAAAC6uroAAAAAAAADAwMGBgZLS0s3NzcDAwMDAwMLCwsAAAAAAAAnJyfs7Oz+/v6cnJysrKx/f393d3dycnJeXl5ZWVlFRUUqKioSEhL7+/v7+/ukpKQGBgYAAAAJCQlERET8/Pz09PTq6ur39/fw8PDExMTz8/Pr6+ve3t7U1NSoqKjZ2dnOzs4tLS0bGxuMjIzr6+vz8/OlpaUNDQ0AAAAaGhoAAAACAgIhISF1dXXGxsYAAAC6urrIyMg8PDyjo6MAAAAKCgplZWWMjIw3NzeZmZlmZmYXFxd3d3cmJibl5eXg4OClpaWioqK+vr67u7uVlZXS0tJqampgYGA9PT0xMTEiIiIMDAz7+/vw8PDm5ubp6eni4uLOzs7Ozs6tra37+/v19fVdXV2goKBVVVXj4+Pv7++cnJy/v796enopKSkZGRnz8/Pk5OSenp7x8fF3d3fv7++Hh4cSEhLLy8sqKiqJiYlPT08/Pz8wMDAdHR2urq47OztiYmIAAAA2NjampqaamppdXV0aGhqrq6t8fHxoaGgiIiKhoaEkJCRQUFAqKio/Pz90dHQnJydZWVmkpKSbm5v////5+flqIleRAAAApXRSTlPzAAUIAwsQGREwFyvzPVH5XiAd+3RJRxT29Z5mNjIjDP79+vn4+Pf29vX08+PQr4diJhz+/v79/fz7+/r6+vn29PTU0bGNjIyGg353clpaT0s3NTEuJCMgHh4ZFQ/9/Pr6+fn59/f29fX08+rl3drYzsrKx8bFxMPCv7+zsbGuqKGcmpmJg4N/dm1taWNjYV9aWVdRSEg+PDw8OiwsKSUhHR0WDAsExChHAAACSklEQVQoz32SVXvbMBSGNcl2DLObpEnaJm3KXZmZV4YVVqYxMzMzMzN+/Z07cp21u9l34cfSq8OHrfOkKArn/Pcv+tBv4pZ5kIvMxbmZmYmJ6u9zi5mCK2sxwZ+fxm+fAqns5vi8Rg887Jouzb/rkSxrC0jXZquXyIGHuapNj5Wipq2QkYpy6lE2Uq2pfAVzoU+PZaOxk3lKawVGZjXBJVaE9u11KXLXs79avwt49UMTCmGuLrzvQaNHPW3DactUucIUoX95ivpiGTVVkgP5JYwdbMa9r7ogrPo+XMd2ut8HJDG2vw5tdMjHhSmfypmiBd6UQdp1LhNPqwNy6LAxG28DGmc85fNz1DKpDcRrgWQ3jXY8qEoRhDdvwlaW4AnKdqB3yiS8QLjFK7gBMr6rnejN8KmM+z4+RMMKzQKyE3w37qS7OP3xIRTLbIgm7yX/ebIzTXjk4Wfn3ZtUGVfGT6ZDIbpfuM5N4+UNNJfIWvNkVkVJ0lUHLjmGKTO3Ive7qdZ/VIDS4bCVImRb7Ce3gIK1NLUG5ZU2tUU21XCGy72EPdtlnAg5httUocdt/wDxlj0lLizsAI4P+u04jUQO1LQisYHLR4Hl9tzc1ibg8MWKWMQdqLsOwclw7G707DG4OnIyOhgLTwZpHbxlChoRf6gvevVcV9eZK9H+kD9iBHXBE6uoBy3bqQwNVfT1VwyFKh3bCuoqX11kzYwbdtgZ9ftHnbBtxE1tdZHpgVB1M1BlGRkZhlUVMHVVEExg1wMXQnUlBJeWHv6v/gCCYZD/NvwmYAAAAABJRU5ErkJggg==') no-repeat 0 0;

}

.modal-spinner {
  display: none;
  width: 64px;
  height: 64px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -32px;
  margin-top: -32px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
}
html.no-touch {
  .btn-survey {
    &.answered {
      #gradient > .vertical(@darkGreen, @green);
    }
    &:hover {
      #gradient > .vertical(@darkGreen, @green);
    }
  }
}

#assessment {
  margin-left: 0px;
  min-height: 500px;
  margin: 0 auto !important;
  display: block;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%;
  .content {
    max-width: 800px;
    margin: 0 auto;
  }
  @media only screen and (min-width : 601px) {
    padding:10px;
  }
  background-repeat: no-repeat;
  background-position: center;

  // Webkit
  ::-webkit-keyframes .button-bar-stripes {
      from  { background-position: 15px 0; }
      to    { background-position: 0 0; }
  }

  // Firefox
  ::-moz-keyframes .button-bar-stripes {
        from  { background-position: 15px 0; }
        to    { background-position: 0 0; }
  }

  // IE9
  ::-ms-keyframes .button-bar-stripes {
      from  { background-position: 15px 0; }
      to    { background-position: 0 0; }
  }

  ::keyframes .button-bar-stripes {
      from  { background-position: 15px 0; }
      to    { background-position: 0 0; }
  }

  .loading-button {
        #gradient > .striped(@green);
        .background-size(15px 15px);
        -webkit-animation: button-bar-stripes 2s linear infinite;
        -moz-animation: button-bar-stripes 2s linear infinite;
        -ms-animation: button-bar-stripes 2s linear infinite;
        animation: button-bar-stripes 2s linear infinite;
        background-position: -10px 30px;
        background-color: @green !important;
  }

.icon-checkmark {
  &:before{
    content:"";
  }
  &:after {
    content: "\e368";
    font-size: 20px;
    position: absolute;
    right: 0px;
    color: @green;
    top:3px;
  }
}
.icon-cancel {
  &:before{
    content:"";
  }
  &:after {
    content: "\e366";
    font-size: 20px;
    position: absolute;
    right: 0px;
    color: @red;
    top:3px;
  }
}

.icon-question {
  &:before{
    content:"";
  }
  &:after {
    content: "\e35c";
    font-size: 20px;
    position: relative;
    right: 0px;
    color: @blue;
    top:0px;
  }
  cursor: ponter;
  color: #555;
  text-decoration: none !important;
}

button.icon-question {
    border-width: 0px;
    background: none;
    vertical-align: text-bottom;
}

.errorPage {
    font-size: 30px;
    .box-sizing(border-box);
    line-height: 30px;
    margin: 0 auto;
    display: table;
    padding: 50px !important;
    .alert;
    .alert-error;
}

.track {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    width: 100%;
    color: black;
}
.content-box-bottom {
    background-repeat: no-repeat;
    height: 21px;
}
.navigation-box.previous {
    border-top-left-radius: 0px;
    border-top-right-radius: 110px;
    left: 0px;
    div {
        padding-right: 18px;
    }
}



.navigation-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #c9c9c9;
    bottom: 0px;
    display: table;
    cursor: pointer;
    .transition(0.4s);
    border: 0;
    padding: 0;

    div {
        /* padding-top: 52px;*/
        padding-top: 22px;
        font-size: 80px;
        font-family: arial;
        text-shadow: rgba(0, 0, 0, 0.08) 1px 1px 5px;
        color: rgba(255, 255, 255, 0.76);
        .transition(0.2s);
        @media only screen and (min-width : 601px) {
            &:hover {
                color: #ffffff;
                text-shadow: rgba(0, 0, 0, 0.58) 1px 1px 12px;
            }
        }
    }
    @media only screen and (min-width : 601px) {
        &:hover {
            background-color: @textColor;
        }
        &:focus-visible {
            background-color: @textColor;
            outline-width: 0;
        }
    }

}
  .progress {
      position: relative;
      border-color: #f5f5f6;
      border-width: 1px;
      @media only screen and (max-width : 600px) {
        margin-bottom: 10px !important;
      }
  }

  .progress .bar {
      background-color: #00cf9a;
      background-image: none;
  }

  .pace .pace-activity {
      position: absolute;
      top: 30%;
      right: 50%;
  }


    #DOS {
    display: none;
    }
    #AIO{
        display: none;
    }
    .item-dialog {
      .data-entry {

      }
    }


    .chzn-drop {
      height: 130px !important;
    }

    .chzn-results {
      height: 100px !important;
    }

    select {
      margin-bottom: 0px;
    }

    .content {
        transition:visibility 0s linear 0.5s,opacity 0.5s linear;
        .text-mainquestion {
            font-size: 33px;
            line-height: 45px;
            text-shadow: rgba(0, 0, 0, 0.17) 1px 1px 5px;
        }
    }

    .javascript-message {
      p {
        display: table;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        .alert;
        .alert-error;
      }
    }

    .box-actions {
        bottom: 0px;
        padding: 10px 0px 10px 0px;
        background-color: #F1F1F1;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top: 1px #E6E6E6 solid;
        box-shadow: #000000 0px -5px 19px -13px;
        margin-top: 40px;
    }


    .name-container {
        margin-left: 0px;
        *zoom: 1;
        text-align: center;
        height: 60px;
        @media only screen and (max-width : 600px) {
            height: 40px;
        }
        .name {

            line-height: 60px;
            font-size: 40px;
            color: #333333;
            @media only screen and (max-width : 600px) {
                font-size: 24px !important;
                line-height: 40px;
            }
        }

    }

     #survey {
        margin-left: 0px !important;
        .border-radius(5px);
        background-color: white;
        border: 1px #ccc solid;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 12px;
        margin-bottom: 40px;
        min-height: 260px;
        .makeRow();

        .items {
            select:focus:required:invalid {
                color: @gray;
                &:focus {
                    /* border: 1px solid #bbb;*/
                    border: 1px #ccc solid;
                    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 12px;
                }
            }
        }

        .items a {
            color: #005d8c;
        }

        .asterisk {
          color: #c54141 !important;
          font-weight: bold;
        }
        .stem-title {
            line-height: 40px;
        }
        .stem-count {
          display: none;
        }
        &.pif1 {

        }
        &.pif2 {
          .sub-item {
            .divider{
             border-bottom: 1px dotted #ccc;
             margin: 10px 0px 10px 0px;
             .noitem-stem {
              display: none
             }
            }
          }
        }
        &.conclusion {
          .page {
            padding-bottom: 0px;
            .instructionView-container, .instructionListen-container {
              display: none !important;
            }

            .item-button {
              display: inline-table !important;
              width: 100% !important;
              text-align: center;
              margin-bottom: 15px;
            }
            .item-button a {
                color: #ffffff !important;
            }
            .clickhere-container {
              text-align: center;
              text-decoration: underline;
            }
            .consultant_will_contact_you-container {
              width: 50% !important;
              margin: 0 auto;
              text-align: center;
            }
            .qscored-container {
              font-size:25px;
              text-align: center;
              color: @textColor;
              margin: 30px 0px 40px 0px
            }
            .bidnumber-container {
              background-color: #eaeaea;
              padding: 0px 10px 10px 10px;
              .box-sizing(border-box);
              text-align: center;
              width: 50% !important;
              margin: 0 auto;
              margin-top: 0px;
              margin-bottom: 20px;
            }
            .birkmanid-container {
              background-color: #eaeaea;
              padding: 10px 0px 0px 10px;
              text-align: center;
              width: 50% !important;
              margin: 0 auto;
            }
            .item-noitem {
              .box-sizing(border-box);
            }
          }
        }
        &.pif3-completed {

            ul li {
               margin-top: 10px;
               font-weight: bold;
            }

            .stem-title {
               font-size:13px !important;

               margin-bottom: 10px;
               display: table;
            }

            .additonal-container .item-stem {
              margin-top: 0px !important;
            }

            .page span, .page label {
              color: #333;
              font-size:13px !important;
            }


            .email1-container, .email2-container {
              width: 60% !important;
              padding-left: 10px
            }

            .email1-container .data-entry, .email2-container .data-entry {
              text-align: left !important;
            }
        }
        &[class*="pif0"] {
          .page {
            .items {
                .item {
                    .data-entry {
                      text-align: center;
                    }
                  }
                }
              }
        }
        &[class*="pif1"] {
          .page {
            .items {
                .item {
                    .data-entry {
                      text-align: center;
                    }
                  }
                }
              }
        }
         &[class*="pif2"] {
          .page {
            .items {
                .item {
                    .data-entry {
                      text-align: center;
                    }
                  }
                }
              }
        }
        &[class*="xpif"] {
          .page {
            .items {
                .item {

                    &.item-noitem {
                      font-weight: bold;
                      margin: 0 auto;
                      text-align: center;
                      color: black;
                      margin-top: 15px;
                    }

                    .data-entry {
                      text-align: center;
                    }
                  }
                }
              }
        }
        &[class*="pif3"] {
          .stem-title-style-pif3 {
            font-weight: bold;
            font-size: 18px !important;
          }
          .top-bar {
            .name {
              /*display: none !important;*/
            }
          }
          .navigation-box {
            display: none;
          }
          .page {
            .btn-survey {
              &.error {
                  position: absolute;
                  right: 15px;
                  font-size: 12px;
                  padding: 3px 7px;
                  top: 19px;
              }
            }
            .btn-survey2 {
              &.skip {
                  position: absolute;
                  right: 35px;
                  font-size: 12px;
                  padding: 13px 17px;
                  top: 29px;
              }
            }


            .item-reorder {
                .navigation-box {
                  display: none;
                }
                .data-entry {
                  ul {
                    width: 100% !important;
                    margin-left: 0px !important;
                  }
                  .most-least {
                    .line {
                       height: 100% !important;
                    }
                    height: 100%  !important;
                    width: 100px  !important;
                    overflow: hidden  !important;
                    .least {
                      bottom: 0px !important;
                    }
                  }
                }
            }
            // First level of items
            & > .items {

              & li.item {
                display: list-item;
              }
              & .item {
                margin: 10px 0px 10px 0px;
                display: table;
                .item-stem {
                  display: block;
                  width: 100%;
                  text-align: left;
                  margin: 0 auto;
                  font-weight: bold;
                  .stem-title {

                  }
                }
                &.item-checkbox {
                  .checkbox-option {
                    text-align: left;
                    input {
                      height: 15px;
                      width: 15px;
                      vertical-align: bottom;
                    }
                  }
                }
                &.item-range {
                  padding-top: 20px;
                  padding-bottom:10px;
                  .data-entry {
                   .content {
                    display: block;
                    height: 20px;
                   }
                  }
                }
                &.item-radio {
                  .data-entry {
                    .radio-group {
                      display: block !important;
                      text-align: left;
                    }
                  }
                }
                &.item-text {
                  .item-stem {
                    font-weight: normal !important;
                  }
                  .data-entry {
                    text-align: right !important;
                    padding-right: 30px;
                    .box-sizing(border-box) ;


                    display: table;
                    width: 100%;
                    text-align: left !important;
                    margin-left: 0px;
                    input {
                      margin-bottom: 0px;
                    }
                  }
                  .item-stem {
                    display: inline-table;
                    float: left;
                    margin-top: 0px !important;

                    max-width: 50%;


                  }
                }
                &.item-map {
                  img {
                    cursor: crosshair;
                    width: 100%;
                  }
                  .item-stem {
                    position: relative;
                  }
                  .map-pin {
                    background-color: rgb(0, 255, 214);
                    width: 3px;
                    height: 3px;
                    position: absolute;

                    position: absolute;
                    }
                }
                &.item-rating {
                  table {
                      width: 100%;
                      thead {
                          .stem-title {
                              .stem-title-style-pif3;
                          }
                          .sub-stems {
                              text-align: center;
                              line-height: 15px;
                              font-size: 13px;
                              padding: 10px;
                              vertical-align: bottom;
                          }
                      }

                      tbody {
                          &.data-entry {
                            text-align: left !important;
                            tr {
                              td {
                                position: relative;
                                font-family: arial;
                                .icon-checkmark, .icon-cancel {
                                    position: absolute;
                                    right: 0px;
                                    top: 0px;
                                }
                              }
                            }

                          }
                          &:nth-child(odd) {
                              tr {
                                background-color: #eaeaea;
                                td {
                                  &:not(:first-child)  {
                                    background-color: #eaeaea;
                                  }
                                }
                              }
                          }
                          &:nth-child(even) {
                              tr {
                                background-color: #ffffff;
                                td {
                                  &:not(:first-child)  {
                                    background-color: #ffffff;
                                  }
                                }
                              }
                          }
                          td {
                              &.stem {
                                  padding: 5px;
                              }
                              &.option {
                                  text-align: center;
                                  input {
                                      width: 20px;
                                      height: 20px;
                                  }
                              }
                          }
                      }

                    }
                }
                &.item-textarea {
                  .item-stem {
                    span {
                      display: inline-table;
                    }
                  }
                  .data-entry {
                    padding-right: 25px;
                    textarea {
                      width: 100%;
                      float:left;
                      .box-sizing(border-box);
                    }
                  }
                }
                &.item-label {
                  display: table;
                  .item {
                    display: table;
                  }
                }
                // 2nd level of items
                & .sub-items {
                  .item-stem {
                    font-weight: normal !important;
                  }
                  .item-radio {
                      float: left;
                      text-align: left;
                      .item-stem {
                        display: inline-table;
                      }
                      .data-entry {
                        text-align:left;
                        display: block;
                        width: 100%;
                        .radio-group {
                          display: block;
                          width: 100%;
                          margin-right: 5px;
                        }
                      }
                    }
                }
                & > .stem-count {
                  display: inline-table !important;
                }
                &.en-US_email1-container .item-stem span, &.en-US_email2-container .item-stem span {
                  font-weight: lighter !important;
                }
              }
            }
          }

        }

        .page {
          min-height: 175px;
          background-repeat: no-repeat;
          background-position: 50%;
          &.loading {
            .items {
                opacity: 0.4;
            }
          }
          & > .items {
              @media only screen and (max-width : 600px) {
                padding: 5px;
              }
              @media only screen and (min-width : 601px) {

              }
              .item {
                  .placeholder {
                    text-align: center !important;
                  }

                  .sub-item {
                  .item-dropdownBig {
                    .box-sizing(border-box);
                    .data-entry {
                      .input-search-wrap {
                        display: table;
                        width: 100%;
                        padding: 0px 35px 0px 35px;
                        .box-sizing(border-box);
                        .input-search {
                          width: 100%;
                          .box-sizing(border-box);
                          height: 30px;
                        }
                      }
                      .input-list-wrap {
                        display: table;
                        width: 100%;
                        padding: 0px 35px 0px 35px;
                        .box-sizing(border-box);
                      }
                     }
                   }
                    .pre-highlight {
                      padding: 10px 0px 10px 0px;
                      .box-sizing(border-box);
                      border: 1px transparent solid;
                    }
                    .highlight {
                      background-color: #eaeaea;
                      padding: 10px 0px 10px 0px;
                      .box-sizing(border-box);
                      border: 1px #ccc solid;
                    }
                  }
                  &.item-radio {
                      .radio-group {
                          display: inline-block;
                          margin-bottom: 9px;
                          margin-right: 9px;
                          label {
                            font-family: arial !important;
                          }
                      }
                  }
                  &.item-checkbox {
                      .checkbox-option {
                          display: inline-block;
                          margin-bottom: 9px;
                          margin-right: 9px;
                          label {
                            font-family: arial !important;
                          }
                      }
                  }
                  &.item-checkbox {

                  }
                  &.item-noitem {
                    &.confidential-container, &.pif2_confidential-container {
                      color: #c54141;
                      margin-bottom: 10px;
                      text-align: center;
                      @media only screen and (max-width : 600px) {
                         line-height: 12px;
                          margin-bottom:5px;
                      }
                      div {
                        padding-top: 0px !important;
                      }
                    }
                  }

                  .data-entry {
                       select {
                          .formElementMargin;
                          @media only screen and (max-width : 600px) {
                              width: 80%;
                          }
                      }
                  }
              }
              .sub-items {
                .item {
                  margin: 10px 0px 10px 0px;
                }
              }
          }
        }
        &.interest {
            .items {
              min-height: 150px;
              padding-top: 20px;
              .item-noitem {
                span {
                    font-size: 20px;
                    margin: 10px;
                    display: table;
                }
              }
            }
            .stem-title {
              font-size: 27px;
              margin-top: 20px;
              display: block;
            }
        }
        &.trueOrFalse {
          .page {
            min-height: 150px;
            padding-top: 20px;
            .items {
              .item{
                .item-label {
                  @media only screen and (max-width : 600px) {
                    padding: 10px 20px 10px 20px;
                  }
                  @media only screen and (min-width : 601px) {
                    padding: 50px 20px 50px 20px;
                  }
                  min-height: 100px;
                }
                &.item-radio {
                  .navigation-bottom {

                  }
                }
                &.item-noitem {
                    span {
                        font-size: 20px;
                        margin: 10px;
                        display: table;
                    }
                }
              }
            }
          }
          .stem-title {
            font-size: 30px;
          }
        }
        .intro-content {
          display: table;
          padding: 20px;
          width: 100%;
          .box-sizing(border-box);
          font-size: 20px;
        }
        .page {
            .userSelect(none);
            padding-bottom: @bottomNavigationHeight;
            position: relative;
            .items {
                margin-left: 0px;
                margin: 0 auto;
                padding: 10px;
                .item {
                    @itemWidth: 798px;
                    span {
                      line-height: normal !important;
                    }
                    .data-entry {
                        position: relative;
                        margin: 0 auto;
                        &:after {
                            clear: both;
                        }
                        input {
                            text-align: center;
                            vertical-align: baseline;
                            @media only screen and (max-width : 600px) {
                                &[type="text"] {
                                    width: 80%;
                                }
                            }
                        }

                        label {
                            display: inline;
                            font-size:13px;
                        }
                    }
                    .item-stem {
                        text-align: center;
                        span {

                        }
                    }

                    width: 100%;

                    &.item-radio {
                      display: block;
                      color:@textColor;
                    }


                    &.item-reorder {
                        .stem-title {
                            display: inline;
                        }
                      .interest-placeholder {
                          opacity: 0.5;
                          background-color: @green !important;
                          background-image: none !important;
                          height: 70px !important;
                          .transition(all 350ms linear);
                          margin-bottom: 5px;
                          border-radius: 10px;
                        }
                      .grabbed {
                          opacity: 1 !important;
                          background-color: #5095bb !important;
                          color: white !important;
                      }

                      .instruction div {
                          margin-top: 5px;
                          margin-bottom: 5px;
                          font-size: 20px;
                          font-weight: bold;
                          position: inherit;
                          .box-sizing(border-box);
                          @media only screen and (max-width : 600px) {
                              margin-left: 0px;
                          }
                          @media only screen and (min-width : 601px) {
                              margin-left: 175px;
                              margin-right: 175px;
                          }

                      }
                      .instruction p {
                          font-size: 18px;
                          position: inherit;
                          .box-sizing(border-box);
                          text-align: center;
                      }
                      .instruction ul {
                          list-style: circle;
                      }
                      .instruction li {
                          font-size: 17px;
                      }

                      ul {
                          position: inherit;
                          list-style: none;
                          .box-sizing(border-box);
                          @media only screen and (max-width : 600px) {
                            margin-left: 0px;
                          }
                          @media only screen and (min-width : 601px) {
                            margin-left: 175px;
                            margin-right: 175px;
                          }
                            li.interest-item {
                                ms-touch-action: none;
                                touch-action: none;
                                .box-sizing(border-box);
                                background-color: #F1F1F1;
                                display: table;
                                cursor: move;
                                color: rgb(51, 36, 36);
                                text-shadow: white 0px 1px 10px;
                                margin-bottom: 7px;
                                padding: 0 10px 0 50px;
                                width: 100%;
                                &.ui-sortable-helper {
                                  width: 90% !important;
                                  background-image: none !important;
                                  left: 5%;
                                  border: 1px #555 solid ;
                                }
                                height: 40px;
                                .border-radius(10px);

                                font-size: 17px;
                                box-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px;
                                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMAgHEmJfLb5Y4AAAAgSURBVCjPY6ATMBJEAipAAUVkASEMAQwto+5A00IfAACZrgzHVEqu/gAAAABJRU5ErkJggg==');
                                background-repeat: no-repeat;
                                background-position: 15px;
                                .transition(background-color 350ms linear);
                                text-align: center;
                                span {
                                    margin-top: 12px;
                                    display: block;
                                }
                                &:hover {
                                  opacity: 1 !important;
                                  background-color: #5095bb;
                                  color: white;
                                  text-shadow: black 0px 1px 10px;
                                  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAU0lEQVRYhe3UMQrAIBBE0Y/HE+/fGSToOZJKYmHKTZP/YMFudhEGJD0KcABX8FQg7xY4Pwif02ZoWhZY39G2WQUYxF/fefkCyR6wByR7wB6Q/ukGPHLwi9CjDYcAAAAASUVORK5CYII=');
                                }
                            }
                        }
                        .data-entry {
                            display: table;
                            width: 100%;
                            position: relative;
                            background-repeat: no-repeat;
                            background-position: right;
                            margin-top: 15px;
                            margin-bottom: 30px;
                            .most-least {
                              position: absolute;
                              height: 100%;
                              width: 150px;
                              top: 5px;
                              right: 15px;
                              font-size: 12px;
                              overflow: hidden;
                              .most {
                                position: absolute;
                                top: 0px;
                                right: 0px;
                                color: @textColor;
                                /* font-size: 12px; */
                                text-transform: uppercase;
                                background-color: #FFFFFF;
                                width: 150px;
                                z-index: 1;
                                text-align: center;
                              }
                              .line {
                                background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAMgCAYAAAAJOrOEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABR0RVh0Q3JlYXRpb24gVGltZQA5LzcvMTPslKjZAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAAGJJREFUWIXt0EEOgDAIRNGByFW5/w10Y9q4MdW0yuJ39QKEDLXM3CXJdb7NzHSp3LRGKtNbrfJu4cKo7j514Ze/uq5VLU+1qI9m/r2iz0TEcFQAAAAAAAAAAAAAAAAAAJTCAfgCCUMohwM5AAAAAElFTkSuQmCC');
                                background-repeat: repeat-y;
                                background-position: center;
                                position: absolute;
                                right: 0px;
                                width: 150px;
                                height: 95%;
                              }
                              .least {
                                position: absolute;
                                bottom: 5px;
                                right: 0px;
                                color: #555555;
                                /* font-size: 12px; */
                                text-transform: uppercase;
                                background-color: #FFFFFF;
                                width: 150px;
                                z-index: 1;
                                text-align: center;
                                padding-top: 10px;
                              }
                            }
                            .header{
                                display: table;
                                width: 100%;

                                 .name-column {
                                    float:left;
                                    width: 300px;
                                    text-align: right;
                                }
                                .column {
                                    float:left;
                                    width: 50px;
                                    text-align: center;
                                    &.title {
                                        font-family: Tahoma;
                                        color: @darkBlue;
                                        font-size: 18px;
                                        margin-bottom: 5px;
                                    }
                                }
                            }

                            .radios {
                                display:table;
                                width: 100%;
                                .radio-row {
                                    display: table;
                                    width: 100%;
                                    margin: 10px 0px 10px 0px;
                                    .name-column {
                                        float:left;
                                        width: 300px;
                                        text-align: right;
                                        label{
                                            font-size:18px;
                                        }
                                    }

                                    .column {
                                        float:left;
                                        width: 50px;
                                        text-align: center;
                                    }
                                    &:hover {
                                         .name-column {
                                            font-weight: bold;
                                            color:@green;
                                         }
                                    }
                                }
                            }


                        }
                    }

                }

                .birthyear, .postcode .postcode-CAN {
                    width: 100px;
                    text-transform: uppercase;
                }
            }
        }
        .btn-survey {
            display: inline-block;
            margin-bottom: 0;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border: 0px;
            color: #ffffff;
            background-color: @darkBlue;
            padding: 11px 19px;
            font-size: 17.5px;

            &.answering {
                #gradient > .vertical(@darkGreen, @green);
                opacity: 0.35;
            }

            &.valid {
              #gradient > .vertical(@darkGreen, @green);
            }
            &.error {
                .btn-danger;
                &:hover {
                  #gradient > .vertical(@btnDangerBackgroundHighlight, @btnDangerBackgroundHighlight);
                }
            }

            &.disabled {
                opacity: .2;
                cursor: not-allowed;
                #gradient > .vertical(@darkGray, @gray);
                &:hover {
                    #gradient > .vertical(@darkGray, @gray);
                }
            }
        }
       .btn-survey2 {
            margin-left: 30px;
            display: inline-block;
            margin-bottom: 0;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            .box-shadow(inset 0 1px 0px rgba(255,255,255,.2));
            .border-radius(4px);
            border: 1px solid #cccccc;
            border-bottom-color: #b3b3b3;
            color: #ffffff;
            border-color: #006ea3 #006ea3 #003a56;
            background-color: #da4f49;
            padding: 2px 8px;
            font-size: 12px;
            &.skip {
                .btn-danger;
                &:hover {
                  #gradient > .vertical(@btnDangerBackgroundHighlight, @btnDangerBackgroundHighlight);
                }
            }

            &.answering {
                #gradient > .vertical(@darkGreen, @green);
                opacity: 0.35;
            }

            &.valid {
              #gradient > .vertical(@darkGreen, @green);
            }
            &.error {
                .btn-danger;
                &:hover {
                  #gradient > .vertical(@btnDangerBackgroundHighlight, @btnDangerBackgroundHighlight);
                }
            }

            &.disabled {
                opacity: .2;
                cursor: not-allowed;
                #gradient > .vertical(@darkGray, @gray);
                &:hover {
                    #gradient > .vertical(@darkGray, @gray);
                }
            }

        }

        .question {
            font-size: 33px;
            line-height: 45px;
            text-shadow: rgba(0, 0, 0, 0.17) 1px 1px 5px;
        }
        .top-bar {
            margin-left: 0px;
            *zoom: 1;
            min-height: 41px;
            background-color: #444444;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            box-shadow: 0 2px 2px #CECECE;
            display: table;
            width: 100%;
            @media only screen and (min-width : 601px) {
              padding: 12px 5px 7px 14px;
            }
            @media only screen and (max-width : 600px) {
                padding: 14px 5px 8px 16px;
            }





            .box-sizing(border-box);
            .name {
                display: inline-table;
                color: #FFF;
                text-shadow: black 1px 2px 11px;

                @media only screen and (min-width : 601px) {
                  font-size: 23px;
                }
                @media only screen and (max-width : 600px) {
                    font-size: 21px;
                }
            }
        }
        .navigation-bottom {
            background-color: #F1F1F1;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            border-top-color: #E6E6E6;
            border-top-style: solid;
            border-top-width: 1px;
            padding-bottom: 10px;
            padding-left: 0;
            padding-right: 0;
            padding-top: 10px;
            text-align: center;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
            .blocker {
                width: 100%;
                height: 65px;
                display: table;
                position: absolute;
                top: 0px;
            }
        }

    }

    @media only screen and (max-width : 600px) {
//        .navigation-box {
//            width: auto;
//            height: auto;
//            background-color: transparent;
//            div {
//              color: #333333;
//            }
//        }

        .most-least {
            display: none !important;
        }
        #assessment .survey .page .items .item.item-reorder ul {
          margin-right: 0px;
          margin-left: 0px;
        }
    }

    .offscreen {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
    }

    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap; /* added line */
        border: 0;
    }

    #survey #consentPage {
        .btn-survey a {
            color: #ffffff !important;
        }
        .item {
            margin: 10px 0;
        }

        .items a {
            color: #005d8c;
        }

        .items ul {
            margin: 0 25px (18px / 2) 25px;
        }

        .items span {
            font-weight: bold;
            //margin: 0 auto;
            //text-align: center;
            color: black;
            //margin-top: 15px;
        }

        label {
            display: inline;
            margin-left: 5px;
        }
    }
}