@charset "UTF-8";
.survey {
  position: fixed;
  margin: 0;
  padding: 0;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體";
  font-size: 16px; }
  .survey.hide {
    opacity: 0; }
  .survey .surveyWrapper {
    position: relative;
    width: 320px;
    height: auto;
    margin: 0 auto;
    padding: 0; }
    .survey .surveyWrapper .surveyTab {
      background-color: #0095f3;
      padding: 4px 16px; }
      .survey .surveyWrapper .surveyTab a {
        text-decoration: none;
        color: #efefef;
        font-size: 1em; }
    .survey .surveyWrapper .surveyContent .closebtn {
      position: absolute;
      top: 8px;
      right: 20px;
      font-size: 2em;
      color: #818181;
      font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體" !important; }
    .survey .surveyWrapper .surveyContent a.closebtn {
      display: block;
      padding: 8px;
      text-decoration: none;
      font-size: 1.5em;
      -webkit-transition: .3s;
      -o-transition: .3s;
      transition: .3s; }
    .survey .surveyWrapper .surveyContent .iframe {
      width: 320px;
      height: 480px;
      overflow-y: scroll;
      overflow-x: hidden;
      margin: 0;
      -webkit-box-shadow: 0px 1px 5px #a0a0a0;
      box-shadow: 0px 1px 5px #a0a0a0; }

.red {
  color: #ff0000; }

.blue {
  background: #0094F2;
  color: white; }

.api-survey {
  background-color: transparent; }
  .api-survey .surveyWrapper {
    width: 400px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .api-survey .surveyWrapper .surveyContent {
      background-color: #fff;
      padding: 40px 20px 20px;
      height: 520px;
      overflow: hidden;
      -webkit-box-shadow: 0px 1px 5px #a0a0a0;
      box-shadow: 0px 1px 5px #a0a0a0; }
      .api-survey .surveyWrapper .surveyContent .title {
        font-size: 0.9em; }
      .api-survey .surveyWrapper .surveyContent #survey-form {
        background-color: #fff; }
        .api-survey .surveyWrapper .surveyContent #survey-form .section-hr {
          width: 100%;
          padding: 1em 0; }
          .api-survey .surveyWrapper .surveyContent #survey-form .section-hr .hr-line {
            display: block;
            height: 1px;
            border: 0;
            border-top: 0.5px solid #999;
            width: 100%;
            margin: 0 auto; }
        .api-survey .surveyWrapper .surveyContent #survey-form .des {
          font-size: 0.8em; }
        .api-survey .surveyWrapper .surveyContent #survey-form .question {
          height: 100%;
          border-bottom: 1px solid #999;
          padding-bottom: 1em;
          margin-bottom: 2em; }
          .api-survey .surveyWrapper .surveyContent #survey-form .question p {
            line-height: 1.6em; }
          .api-survey .surveyWrapper .surveyContent #survey-form .question.vertical .q-box .option {
            display: block; }
          .api-survey .surveyWrapper .surveyContent #survey-form .question .q-title {
            line-height: 1.6em; }
          .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box {
            width: 100%; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .word {
              color: #818181; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option {
              line-break: none; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option .option_list {
                vertical-align: top;
                display: inline-block;
                width: 300px;
                line-height: 1.6em; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option input[type="checkbox"],
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option input[type="radio"] {
                display: inline-block;
                position: relative;
                top: 1px;
                width: auto !important; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option input[type="text"] {
                display: inline;
                margin-left: 4px;
                min-height: 2em; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .option p {
                display: inline;
                margin: 0 4px;
                word-break: break-word;
                font-size: 0.9em; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select {
              position: relative;
              padding: 5px 7px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              height: 34px;
              width: 200px;
              border: 1px solid #D9D9D9;
              border-radius: 4px;
              margin: 28px 0 17px;
              cursor: pointer; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select span {
                color: #626262;
                font-size: 1em; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select .arrow {
                position: absolute;
                top: 13px;
                right: 9px;
                background: url(https://uploadandpray.asus.com/surveys/admin/images/icon/arrow-d.png) no-repeat;
                width: 10px;
                height: 8px; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select.active .arrow {
                background: url(https://uploadandpray.asus.com/surveys/admin/images/icon/arrow-d-blue.png) no-repeat; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select .select-options {
                width: 200px;
                border: 1px solid #D9D9D9;
                border-radius: 4px;
                -webkit-box-shadow: 0px 1px 6px #adadad;
                box-shadow: 0px 1px 6px #adadad;
                background: white;
                z-index: 2;
                top: 8px;
                left: -8px;
                position: relative;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding: 10px 0; }
                .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select .select-options span {
                  color: #7D7D7D;
                  display: block;
                  line-height: 35px;
                  padding: 0 10px;
                  -webkit-transition: 0.2s;
                  -o-transition: 0.2s;
                  transition: 0.2s;
                  cursor: pointer; }
                  .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .select .select-options span:hover {
                    background: #e9e9e9; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row {
              width: 100%;
              display: table;
              table-layout: fixed;
              padding: 0;
              -webkit-box-sizing: border-box;
              box-sizing: border-box; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row:first-child {
                color: #626262;
                font-size: 0.8em; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row:nth-child(odd) {
                background-color: white; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row .col {
                display: table-cell;
                text-align: left;
                height: 50px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                line-height: 32px;
                vertical-align: top; }
                .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row .col .option .labelword {
                  display: none; }
              .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .q-table .row .tb-question {
                text-align: left;
                padding: 0;
                line-height: 19px;
                word-break: break-word; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .table5 .col {
              width: 15%; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .table5 .tb-question {
              width: 25%; }
            .api-survey .surveyWrapper .surveyContent #survey-form .question .q-box .textarea {
              width: 100%;
              height: 4em; }
        .api-survey .surveyWrapper .surveyContent #survey-form [data-type="4"] .q-box label.option p {
          padding: 0;
          margin: 0;
          display: inline-block; }
        .api-survey .surveyWrapper .surveyContent #survey-form #pagenav .survey-alert-text {
          font-weight: 600;
          color: #ff0000;
          padding-bottom: 1em; }
        .api-survey .surveyWrapper .surveyContent #survey-form #survey-submit:disabled {
          background: #818181; }

#noticebox {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 40vw;
  margin: auto;
  background: white;
  height: 90px;
  width: 400px;
  overflow: hidden;
  z-index: 100;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 12px #bfbebe;
  box-shadow: 0 2px 12px #bfbebe;
  cursor: pointer;
  font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體"; }
  #noticebox .content {
    width: 100%;
    height: 100%;
    background: white;
    padding: 10px 10px 10px 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    #noticebox .content.icon-close {
      float: right;
      width: 10px;
      height: 10px;
      position: relative;
      top: 0px;
      right: 0px;
      cursor: pointer;
      background: url(https://uploadandpray.asus.com/surveys/admin/lbox/images/icon/close-gray.png) no-repeat; }
    #noticebox .content.word {
      color: #5c5c5c;
      font-weight: 600;
      margin-top: 15px; }
      #noticebox .content.word img {
        float: left;
        margin-right: 10px;
        margin-top: 15px; }

#survey-alert {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: white;
  height: 280px;
  width: 500px;
  overflow: hidden;
  z-index: 100;
  -webkit-box-shadow: 0px 1px 5px #a0a0a0;
  box-shadow: 0px 1px 5px #a0a0a0;
  font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體"; }
  #survey-alert .content {
    width: 100%;
    height: 100%;
    background: white;
    padding: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center; }
    #survey-alert .content p {
      width: 100%;
      display: inline-block;
      margin: 0; }
    #survey-alert .content .icon-close-black {
      float: right;
      width: 28px;
      height: 28px;
      position: relative;
      top: -20px;
      right: -20px;
      cursor: pointer;
      background: url(https://uploadandpray.asus.com/surveys/admin/lbox/images/icon/close-black.png) no-repeat; }
    #survey-alert .content .title {
      font-size: 30px;
      color: black;
      text-align: center; }
    #survey-alert .content .word {
      color: #b5b5b5;
      margin: 20px 0 24px;
      font-size: 20px; }
    #survey-alert .content .btn {
      font-size: 1em;
      border-radius: 4px;
      border: none;
      letter-spacing: 1px;
      cursor: pointer;
      color: white;
      background: #0094f2;
      font-size: 20px;
      padding: 8px 16px;
      font-family: "Segoe UI", "微軟正黑體", "Microsoft JhengHei", "Arial", "新細明體"; }

#start-alert {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: -moz-linear-gradient(left, #0088f4 0%, #39b9fc 100%);
  background: -webkit-linear-gradient(left, #0088f4 0%, #39b9fc 100%);
  background: -webkit-gradient(linear, left top, right top, from(#0088f4), to(#39b9fc));
  background: -o-linear-gradient(left, #0088f4 0%, #39b9fc 100%);
  background: linear-gradient(to right, #0088f4 0%, #39b9fc 100%); }
  #start-alert .m-logo {
    position: relative;
    float: left;
    height: 18px;
    width: 100px;
    background: url(https://uploadandpray.asus.com/surveys/admin/lbox/images/logo-w.png) no-repeat;
    background-size: auto 18px;
    display: block;
    top: 37px;
    left: 27px; }
  #start-alert .icon-close {
    float: right;
    width: 28px;
    height: 28px;
    position: relative;
    top: 30px;
    right: 30px;
    cursor: pointer;
    background: url(https://uploadandpray.asus.com/surveys/admin/lbox/images/icon/close-s.png) no-repeat;
    background-size: auto 28px; }
  #start-alert .start-container {
    position: relative;
    margin-top: 140px;
    text-align: center;
    padding: 0 12% 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    #start-alert .start-container img {
      width: 31%; }
    #start-alert .start-container .title {
      font-size: 2.4em;
      color: white;
      margin-top: 16px; }
    #start-alert .start-container .des {
      max-height: 320px;
      font-size: 1.3em;
      line-height: 35px;
      margin-top: 18px;
      color: white;
      text-align: center;
      word-wrap: break-word;
      overflow: hidden; }
    #start-alert .start-container #startsurvey {
      border: 1px solid white;
      color: white;
      background: transparent;
      padding: 15px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: absolute;
      bottom: 5%;
      left: 0;
      margin: auto;
      right: 0;
      width: 92%;
      font-size: 1.2em;
      text-align: center;
      cursor: pointer;
      height: 60px; }

.lightbox {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  display: none;
  left: 0;
  top: 0;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.75);
  overflow-x: hidden;
  opacity: 0; }
  .lightbox .surveyWrapper {
    margin-top: 10%; }
    .lightbox .surveyWrapper .surveyTab {
      display: none; }

.lightbox--show {
  display: block;
  opacity: 1; }

.survey--fadeIn {
  opacity: 1.0; }

.survey--fadeOut {
  opacity: 0; }

.survey--left {
  left: -999px;
  top: 120px; }
  .survey--left .surveyWrapper .surveyTab {
    position: absolute;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    right: 0;
    top: 0;
    -webkit-box-shadow: -1px -1px 5px #a0a0a0;
    box-shadow: -1px -1px 5px #a0a0a0; }
  .survey--left--show {
    left: -4px; }

.survey--right {
  right: -999px;
  top: 120px; }
  .survey--right .surveyWrapper .surveyTab {
    position: absolute;
    padding: 8px 4px;
    width: 18px;
    left: -26px;
    top: 0;
    -webkit-box-shadow: -1px 1px 5px #a0a0a0;
    box-shadow: -1px 1px 5px #a0a0a0; }
  .survey--right--show {
    right: -4px; }

.survey--bottom--left {
  left: 0;
  bottom: 0px; }
  .survey--bottom--left .surveyTab {
    width: 7em; }
  .survey--bottom--left--show {
    bottom: 480px; }
  .survey--bottom--left .surveyWrapper .surveyContent .closebtn {
    top: 28px; }

.survey--bottom--right {
  right: 0;
  bottom: 0px; }
  .survey--bottom--right .surveyTab {
    width: 32%; }
  .survey--bottom--right--show {
    bottom: 480px; }
  .survey--bottom--right .surveyWrapper .surveyContent .closebtn {
    top: 28px; }

.survey--easeInBack {
  -webkit-transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  -o-transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045); }

.survey--easeOutQuint {
  -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1); }

.survey--easeInOutExpo {
  -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  transition: all 600ms cubic-bezier(1, 0, 0, 1); }

/*black style*/
.login-panel-black .api-survey .surveyWrapper .surveyContent{
  text-align: left;
  color: black;
}

.login-panel-black .surveyContent p, .login-panel-black .surveyContent input, .login-panel-black .surveyContent h1, .login-panel-black .surveyContent h2, .login-panel-black .surveyContent h3, .login-panel-black .surveyContent h4{
  color: black;
}

.login-panel-black .af-form .surveyContent input, .login-panel-black .af-form .surveyContent select{
  border: 1px solid #b4b4b4;
  background: white;
}

.login-panel-simply .af-form .surveyContent input[type="checkbox"]:not(:checked), .login-panel-simply .af-form .surveyContent input[type="checkbox"]:checked{
  left: 0;
}

.login-panel-black .surveyContent .pagination .pages .page a.enable{
  color: #bfbfbf;
}

.login-panel-simply.login-panel-black .surveyContent a:hover{
  color: white;
}

@media only screen and (max-width: 500px) {
  #survey-alert {
    width: 100%; }
  .survey .surveyWrapper .surveyTab a {
    font-size: 1.2em; }
  .survey .surveyWrapper .surveyContent {
    padding: 40px 20px; }
    .survey .surveyWrapper .surveyContent a.closebtn {
      right: 8px; }
  .api-survey .surveyWrapper {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .api-survey .surveyWrapper .surveyTab {
      top: 20%; }
    .api-survey .surveyWrapper .surveyContent {
      background-color: #FFFFFF;
      width: 100vw;
      height: 100vh;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      .api-survey .surveyWrapper .surveyContent #survey-form {
        background-color: #FFFFFF; }
  .survey--left,
  .survey--right,
  .survey--bottom--left,
  .survey--bottom--right {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%; }
  .survey--right .surveyWrapper .surveyTab {
    left: -30px; } }

@media only screen and (max-width: 400px) {
  #survey-alert {
    width: 100%; }
  .survey .surveyWrapper .surveyContent {
    padding: 40px 20px; }
  .api-survey .surveyWrapper {
    width: 100%; }
    .api-survey .surveyWrapper .surveyTab {
      top: 64px; }
    .api-survey .surveyWrapper .surveyContent {
      width: 100%; } }