body {
  padding: 15px;
  font-size: 12px;
  background: #253746;
}

.question-text {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

a { text-decoration: none!important; }

    #app {
        margin: 10%;
        margin-top: 2%;
        background: white;
        padding: 20px;
        float: left;
        width: 80%;
        box-shadow: 12px 15px 8px 5px #00000087;
    }

    #app * {
        /* font-size: 2.5vw; */
        font-size: 1.8vw;
    }

    #app h5 {
        font-size: 1.8vw;
    }



    @media only screen and (max-width: 768px) and (min-width: 200px) {
        #app {
            margin: 0%;
            width: 100%;
        }
        #app * {
            /* font-size: 3.5vw; */
            font-size: 4.5vw;
        }
        #app h5 {
            font-size: 4.5vw;
            line-height: 6vw;
        }
        #app .terms * {
            font-size: 3vw !important;
        }
        .logo {
            width: 30%;
        }
        .mobile-only {
            display: block !important;
        }
        .desktop-only {
            display: none !important;
        }
    }
    @media (min-width: 769px) and (max-width: 1440px) {
        #app h5 {
            font-size: 3vw;
        }
    }
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
    /*.en *{
        font-size: 1em;
    }*/

    .question_title {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .btnn {
        padding: 13px;
        box-shadow: 0px 0px 4px 5px #f1f1f1;
        cursor: pointer;
        width: 90%;
        /* margin-left: 5%; */
        border-radius: 0px;
        text-align: center;
        font-size: 1.5em;
        transition: background 0.2s linear;
        transition: box-shadow 0.2s linear;
        background-color: #66cbe8;
    }

    .btnn a { color:#000; text-decoration:none; }

    .startnowbtn a { color:#fff; }
    .reset a { color:#fff; }
    .getresult a { color:#fff; }
    .getresult a { color:#fff; }

    .btm .btnn {
        float: left;
        margin-top: 20px;
        border-radius: 20px;
        color:#000;
    }

    .btnn.reset {
        background: #ffb813;
        color: #fff;
        border-radius: 20px
    }

    .btnn.lang {
        float: right;
        width: 10vw;
        font-size: 1em;
        margin-left: 5px;
    }

    .roww.btm {
        float: left;
        width: 100%;
        display: flex;
        margin-bottom: 30px;
    }

    .roww.btm .coll {
        float: left;
        width: 33%;
        margin: 0px;
        flex: 1;
        text-align: center;
    }

    .center {
        text-align: center;
    }


    .btnn.clicked {
        padding: 10px;
        background: #d3e0e4;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
    }

    #myProgress {
        width: 100%;
        background-color: whitesmoke;
        border-radius: 10px;
    }

    #myBar {
        width: 1%;
        color: transparent;
        height: 20px;
        background-color: #01a9e7;
        border-radius: 10px;
        color: white;
        line-height: 21px;
        font-size: 14px;
    }

    .question-choice { background-color: #f1f1f1;  border-radius: 8px; }
    .question-choices a { color:#000; text-decoration:none; }

    .btnn:hover,
    .question-choice:hover {
        background: #d3e0e4;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
    }

    .question-choices {
        float: left;
        width: 100%;
    }
   



    .question {
        float: left;
        width: 100%;
    }

    .result {
        float: left;
        width: 100%;
        margin-top: 20px;
    }

    .question-choice {
        cursor: pointer;
        padding: 10px;
        box-shadow: 0px 4px 1px 1px #cbcbcb;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
        font-size: 25px;
        transition: background 0.5s linear;
        transition: box-shadow 0.5s linear;
    }

    .question-choices .clicked {
        color: #253746;
        background: #d3e0e4;
        box-shadow: 1px 1px 1px 1px #cbcbcb;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .center {
        text-align: center;
    }

    .date1choice {
        margin-top: 10px;
    }

    .date1choice .times:hover {
        background: #cbcbcb;
    }

    .date1choice span {
        float: left;
        width: 90%;
        cursor: pointer;
    }

    .date1choice .checkboxx {
        width: 10%;
    }

    .bannerbar .langbar {
        float: left;
        width: 100%;
    }

    .banner {
        width: 100%;
    }

    .progress {
        float: left;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
        background: transparent;
    }

.question-text {
        font-weight: bold;
        font-size: 20px !important;
        color: #fff;
    }
@media(min-width: 768px) {
    .question-text {
        font-weight: bold;
        font-size: 32px !important;
        color: #fff;
    }
}

    .question-text { background-color: #3c29f7; padding: 10px 30px; border-radius: 10px; }

    .statement * {
        text-align: left;
    }

    .btnn.getresult,
    .btnn.submit {
        background: #30986a;
        color: white;
    }

   .btnn.submit a { color: #fff;  text-decoration: none;}

    .statement {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .event_detail {
        float: left;
        width: 100%;
    }

    .event_detail,
    .event_detail * {
        float: left;
        width: 100%;
    }

    .event_detail .coll {
        width: 30%;
    }

    .event_detail .roww {
        margin-top: 10px;
    }

    .question-result h1 {
        padding-top: 20px;
    }

    .question-result h1 * {
        font-size: 40px !important;
    }

    .roww .coll.full {
        width: 100%;
    }


    .event_detail .coll.data {
        width: 70%;
    }

    input {
        outline: 0;
        border-width: 0 0 2px;
        border-color: grey;
    }

    input:focus {
        border-color: green
    }

    .terms * {
        font-size: 1.5vw !important;
    }

    .logo {
        width: 20%;
    }

    .powered {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        font-size: 18px !important;

    }

    body div {
        -webkit-touch-callout: none;
        /* iOS Safari */
        -webkit-user-select: none;
        /* Safari */
        -khtml-user-select: none;
        /* Konqueror HTML */
        -moz-user-select: none;
        /* Firefox */
        -ms-user-select: none;
        /* Internet Explorer/Edge */
        user-select: none;
        /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }

    .block {
        float: left;
        width: 100%;
    }

    .intro {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* .intro .center {
        margin: 50px;
        line-height: 4vw;
    } */

    .question-result .reference {
        text-align: left;
        font-size: 16px !important;
        margin-top: 40px;
        /*color: grey;*/
    }

    .startnowbtn {
        color: white;
        background: #20a570;
    }
   

   .title-box h2 { background-color: #17354a; padding: 10px; text-align: center; color: #fff; margin-bottom: 0; margin-top: 30px;}
   .form-box h3 { font-size:24px !important; margin-top:30px; color:#138cff; }
   .form-box { background-color: #f1f1f1; padding: 30px 15px; }
   .form-box .title { width: 18%; float: left; padding-top: 8px; }
   .form-box .input-box { width: 82%; float: left; }
   @media(min-width: 768px) {
   .form-box .title { width: 12%; float: left; padding-top: 8px; }
   .form-box .input-box { width: 88%; float: left; }
}
   .form-box ol li { font-size: 20px !important; padding: 10px 0; }
   /*add shi*/
   .form-box ul li { font-size: 20px !important; padding: 10px 0; }
   .form-box .checkbox label { font-size: 20px !important; color: #ff3a3a; }
   .form-box a { color: #000; text-decoration: none; }
   .form-box .btnn { width: 100%; margin-left: 0; margin-top: 30px; border-radius: 20px;}

   .welcome-box .btm a { color:#000; text-decoration:none; }
   .welcome-box .photo { padding:30px 0 0; }
   .welcome-box h3 { text-align:center; margin-top:0;margin-bottom:50px; }
  .add-text { font-size:18px !important; line-height:24px; }
 @media(min-width: 768px) {
   .add-text { font-size:24px !important; line-height:28px; }
}


.end-text ul li { margin:5px 0 ; font-size:22px !important; }


/*-------------------- add by power 2019.8.14 --------------------------*/
.end-text ul li{
    font-size: 28px !important;
}

.btnn{
    /*width: 94%;*/
    /*margin-left:3%;*/
}

.question_title{
    margin-top: 0px;
}

.form-control{
    height: auto;
}

@media (min-width: 768px){
    .form-box .title {
        width: 15%;
    }
    .form-box .input-box {
        width: 85%;
    }
}

.form-box .title{
    width: 24%;
}

.form-box .input-box {
    width: 76%;
}

.yzm-input{
    width: 40%;
    display: inline-block;
}

.yzm-logo img{
    width: 26%;
    height: 78px;
    margin-bottom: 16px;
}

#captcha-div-class{
    padding-bottom: 130px;
}

@media only screen and (max-width: 600px) and (min-width: 200px) {
    .yzm-logo img{
        width: 45%;
        height: 35px;
        margin-bottom: 6px;
    }

    #captcha-div-class{
        padding-bottom: 60px;
    }

}

@media (min-width: 768px){
    .add-text {
        font-size: 20px !important;
        line-height: 28px;
    }
}

/*.glaucoma-time{*/
    /*margin-bottom: 40px;*/
/*}*/

/*.glaucoma-time p{*/
    /*font-size: 30px;*/
/*}*/

/*.glaucoma-time p input{*/
    /*height:44px;*/
    /*vertical-align:text-top;*/
    /*margin-top:0;*/
/*}*/



.lang * { font-size:2.5vw!important; }
@media(max-width:768px){
    .lang * { font-size:5vw!important; }
}
.agree-checkbox { display:flex; align-items:center; }


.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Presbyopia Vue quiz — aligned with myopia Orbis look */
.quiz-shell {
  float: left;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}
.quiz-lang {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}

/* Welcome / form typography helpers (from myopia home) */
.quiz-shell .font1618 { font-size: 18px !important; }
.quiz-shell .font1820 {
  margin: 50px 50px 10px;
  font-size: 1.75vw !important;
  text-align: center;
}
.quiz-shell .description2{
  margin: 15px 50px;
  color: #333;
  font-size: 22px !important;
}
.quiz-shell .description2 span{
  font-size: 18px !important;

}

.quiz-shell .description2 b{
  font-size: 18px !important;
}
.quiz-shell .description3 {
  font-size: 22px !important;
  text-align: justify;
}
.quiz-shell .text-1 {
  margin-top: 0;
  text-align: center;
  font-size: 36px !important;
  font-style: italic;
}
.quiz-shell .startnowbtn {
  /* width: 22%; */
  width: 32%;
  margin: 0 auto 55px;
  display: block;
}
.quiz-shell .email-box { margin-bottom: 60px; }
.quiz-shell .agree-checkbox {
  display: flex;
  align-items: flex-start;
  margin: 16px 50px;
}
@media (max-width: 768px) {
  .quiz-shell .description2{
    margin: 10px;
  }
  .quiz-shell .description2 span{
    font-size: 16px !important;
  }
  .quiz-shell .description2 b{
    font-size: 16px !important;
  }
  .quiz-shell .description3 { font-size: 20px !important; }
  .quiz-shell .startnowbtn {
    width: 36%;
    margin-bottom: 30px;
  }
  .quiz-shell .font1618 { font-size: 16px !important; }
  .quiz-shell .font1820 {
    font-size: 26px !important;
    margin-left: 10px;
    margin-right: 10px;
  }
  .quiz-shell .text-1 { font-size: 18px !important; }
  .quiz-shell .email-box { margin-bottom: 35px; }
  .quiz-shell .agree-checkbox { margin: 16px 10px; }
}
@media (min-width: 1200px) {
  .quiz-shell .logo-img { width: 50%; }
}
/* #app .quiz-app,
#app .quiz-app * {
  font-size: inherit;
  box-sizing: border-box;
} */
.quiz-app {
  float: left;
  width: 100%;
  background: transparent;
  padding: 0;
  position: relative;
  animation: quiz-boot-fade-in 0.35s ease-out;
}
.quiz-welcome .quiz-title {
  margin: 0 50px 10px;
  text-align: center;
  font-size: 36px !important;
  /* font-style: italic; */
  font-style: normal;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}
.quiz-welcome .quiz-subtitle {
  margin: 15px 50px;
  color: #333;
  font-size: 36px !important;
  text-align: justify;
  line-height: 1.6;
}
.quiz-welcome .quiz-body,
.quiz-consent,
.quiz-disclaimer {
  margin: 15px 50px;
  color: #333;
  font-size: 22px !important;
  text-align: justify;
  line-height: 1.6;
}

/* End / thank-you screen (match subject_end visual) */
.quiz-end {
  float: left;
  width: 100%;
  text-align: center;
  margin: 60px 0;
  padding: 0 20px;
}
.quiz-end-title {
  margin: 0 0 18px;
  color: #000;
  font-size: 36px !important;
  font-weight: bold;
  font-style: normal;
  line-height: 1.5;
}
.quiz-end-message{
  margin: 0 0 16px;
  font-size: 32px !important;
  font-weight: bold;
  line-height: 1.4;
}
.quiz-end-message i{
  font-size: 32px !important;
}
.quiz-end-spam ,.quiz-end-footer,.quiz-end-link{
  margin: 0 0 28px;
  color: #000;
  font-size: 18px !important;
  font-weight: normal;
  line-height: 1.5;
}
.quiz-end-more ,.quiz-end-spam span{
  margin: 0 0 8px;
  color: #000;
  font-size: 20px !important;
  font-weight: bold;
  line-height: 1.5;
}
.quiz-end-link span{
  font-size: 22px !important;
  line-height: 1.5;
}
.quiz-end-link .fw-bold{
  font-weight: bold;
}
.quiz-end-link a {
  color: #000;
  text-decoration: none;
  font-weight: normal;
}
.quiz-end-link a:hover {
  color: #01A9E7;
  text-decoration: underline;
}
.quiz-field {
  display: block;
  text-align: center;
  margin: 0 auto 14px;
  font-size: 18px !important;
  color: #333;
}
.quiz-field span {
  font-weight: bold;
  display: inline;
  margin-right: 8px;
  font-weight: normal;
  font-size : 1.8vw !important;
}
@media (max-width: 1200px) {
  .quiz-field span {
    font-size: 2.5vw !important;
  }
}
@media (max-width: 768px) {
  .quiz-field span {
    font-size: 4.5vw !important;
  }
}
.quiz-field input:focus { border-color: green; }
.quiz-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 16px 50px;
  color: #333;
  font-size: 18px !important;
  font-weight: normal;
  cursor: pointer;
}
.quiz-check input { margin-top: 4px; flex-shrink: 0; }
.quiz-btn {
  display: block;
  width: 22%;
  margin: 0 auto 55px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 4px 5px #f1f1f1;
  cursor: pointer;
  text-align: center;
  font-size: 1.5em !important;
  color: #fff;
  background: #20a570;
  transition: background 0.2s linear, box-shadow 0.2s linear;
}
.quiz-btn:hover {
  background: #d3e0e4;
  color: #000;
  box-shadow: 1px 1px 1px 1px #cbcbcb;
}
.quiz-btn.ghost {
  background: #66cbe8;
  color: #000;
  border-radius: 20px;
}
.quiz-btn.submit,
.quiz-nav .quiz-btn:not(.ghost) {
  background: #30986a;
  color: #fff;
  border-radius: 20px;
}
.quiz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.quiz-error {
  color: #c0392b;
  margin: 10px 50px;
  font-size: 18px !important;
  text-align: center;
}
.quiz-boot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 40px 16px;
  animation: quiz-boot-fade-in 0.35s ease-out;
}
@keyframes quiz-boot-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}
.quiz-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 36px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  max-width: 90%;
}
.quiz-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #d3e0e4;
  border-top-color: #20a570;
  border-radius: 50%;
  animation: quiz-spin 0.8s linear infinite;
}
.quiz-loading-text {
  margin: 0;
  color: #333;
  font-size: 18px !important;
  text-align: center;
  line-height: 1.4;
}
@keyframes quiz-spin {
  to { transform: rotate(360deg); }
}
.quiz-app.is-submitting .quiz-option,
.quiz-app.is-submitting .btnn {
  pointer-events: none;
}
.quiz-progress {
  float: left;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  background: transparent;
}
.quiz-progress-wrap {
  width: 100%;
  background-color: whitesmoke;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.quiz-progress-bar {
  width: 1%;
  height: 20px;
  background-color: #01a9e7;
  border-radius: 10px;
  color: #fff;
  line-height: 21px;
  font-size: 14px !important;
  text-align: center;
  transition: width 0.25s ease;
}
.quiz-progress-text {
  color: #567;
  margin-bottom: 8px;
  font-size: 14px !important;
  text-align: center;
}
.quiz-part {
  text-align: center;
  color: #333;
  /* font-size: 1.1em !important; */
  margin: 10px 0 8px;
}
.quiz-q-title {
  font-weight: bold;
  font-size: 20px !important;
  color: #fff;
  background-color: #3c29f7;
  padding: 10px 30px;
  border-radius: 10px;
  margin: 0 0 24px;
  line-height: 1.45;
  text-align: center;
}
.quiz-q-image {
  margin: 0 0 16px;
  text-align: center;
}
.quiz-q-image img {
  max-width: 100%;
  max-height: 500px;
  height: auto;
}
.quiz-options {
  float: left;
  width: 100%;
  display: grid;
  gap: 0;
}
#app .quiz-option {
  cursor: pointer;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  line-height: 1.45;
  color: #000;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 2px 1px 1px #cbcbcb;
  transition: background 0.5s linear, box-shadow 0.5s linear;
}
.quiz-option.active,
.quiz-option:hover {
  color: #253746;
  background: #d3e0e4;
  box-shadow: 1px 1px 1px 1px #cbcbcb;
}
.quiz-nav {
  float: left;
  width: 100%;
  display: flex;
  margin-top: 20px;
  margin-bottom: 30px;
  gap: 0;
}
.quiz-nav .quiz-btn {
  width: 90%;
  margin: 20px auto 0;
  float: none;
}
.quiz-nav .coll {
  float: left;
  width: 33%;
  margin: 0;
  flex: 1;
  text-align: center;
  padding: 0px 10px;
}
.quiz-logo {
  margin: 15px 50px;
  text-align: center;
}
.quiz-logo img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .quiz-q-title { font-size: 32px !important; }
}
@media (max-width: 768px) {
  .quiz-welcome .quiz-title {
    margin: 0 auto 10px;
    font-size: 3.5vw !important;
  }
  .quiz-welcome .quiz-subtitle,
  .quiz-welcome .quiz-body,
  .quiz-consent,
  .quiz-disclaimer {
    margin: 10px;
    font-size: 16px !important;
  }
  .quiz-end {
    margin: 36px 0;
    padding: 0 12px;
  }
  .quiz-end-title {
    font-size: 18px !important;
  }
  .quiz-end-message ,.quiz-end-message i{
    font-size: 22px !important;
  }
  .quiz-end-spam {
    font-size: 15px !important;
    margin-bottom: 22px;
  }
  .quiz-end-more,
  .quiz-end-link {
    font-size: 16px !important;
  }
  .quiz-field {
    margin: 0 auto 14px;
    font-size: 16px !important;
  }
  .quiz-field input {
    min-width: 160px;
    font-size: 16px !important;
  }
  .quiz-check {
    margin: 16px 10px;
    font-size: 16px !important;
  }
  .quiz-btn {
    width: 36%;
    margin-bottom: 30px;
  }
  .quiz-error { margin: 10px; }
  .quiz-option { font-size: 4.5vw !important; }
/*   .quiz-nav {
    flex-direction: column-reverse;
  } */
  .quiz-nav .coll {
    width: 100%;
  }
  .quiz-nav .coll.is-empty {
    display: none;
  }
  .quiz-nav .quiz-btn {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  .quiz-logo { margin: 15px 10px; }
}
@media (min-width: 1200px) {
  .quiz-logo img { width: 50%; }
}
/* #app .quiz-end-link a, */
#app .quiz-body a{
    font-size: 18px;
    color: #333;
    text-decoration: underline !important;
}

button{
  border: none;
}
#app .check-btn{
  background-color: #30986a;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  font-size: 22px;
}
.btnn{
  font-size: 1.3vw !important;
}
@media (max-width: 1200px) {
  .btnn {
    font-size: 2.5vw !important;
  }
}
@media (max-width: 768px) {
  #app .check-btn{
    font-size: 18px;
  }
  .btnn {
    font-size: 3.5vw !important;
  }
}