#quizStyle{padding:0;margin:0 auto;align-items:center;justify-content:center;background-color:transparent;}
#quizStyle fieldset{height:auto;padding:1em;margin:1em auto;border-radius:0.6em;border:1px solid #ddd;background-color:var(--theme-ui-colors-white);align-items:center;justify-content:center;text-align:center;}
#quizStyle .set{margin:0 auto;padding:0 4em;}
#quizStyle.pix-plate fieldset{height:auto;}
#quizStyle.pix-plate .set fieldset{margin-bottom:2em;padding-bottom:2em;border-bottom:1px solid #ccc;border-radius:0;display:block;box-shadow:none;text-align:left;}
#quizStyle.pix-plate .set{padding:4em;text-align:left;}
#quizStyle.pix-plate fieldset legend{font-size:1.2em;}

#quizStyle fieldset legend{font-size:1.4em;line-height:1.4;display:contents;font-weight:700;color:var(--theme-ui-colors-black);text-align:center;display:block;position:relative;}
#quizStyle input[type="radio"],#quizStyle button{display:none;}
#quizStyle label{line-height:1.6;border-radius:50px;}
#quizStyle label small{display:block;}
#quizStyle .answers{margin:1em auto 0 auto;}
#quizStyle .answer{vertical-align:top;}
#quizStyle .answer.inline{display:inline-block;}
#quizStyle .answer__item{padding:0.6em 1em 0.6em 2.2em;margin:0 0.4em 0.4em 0;line-height:1.4;background:#f1f3f4;position:relative;cursor:pointer;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;display:flex;align-items:center;justify-content:center;vertical-align:top;}
#quizStyle .answer__item:before{width:12px;height:12px;border:1px solid var(--theme-ui-colors-black);border-radius:50%;left:0.6em;position:absolute;display:block;content:'';}
#quizStyle0000 .answer__item:hover{background:#fbcddb;border-color:transparent;}
#quizStyle :valid .answer__item--is-correct{background-color:rgba(113,207,146,1);color:var(--theme-ui-colors-white);border-color:transparent;}

#quizStyle .answer__reveal-text{display:none;margin:1em auto 0 auto;}
#quizStyle .answer__reveal-text figure{width:70%;}
#quizStyle .answer__reveal-text figure img{width:100%;}
#quizStyle :valid .answer__reveal-text{padding:1em;border-radius:0.6em;text-align:left;display:block;background:#f9f9f9;}

#quizStyle :checked + .answer__item{color:var(--theme-ui-colors-white);background:var(--theme-ui-colors-secondary);border-color:transparent;}
#quizStyle :checked + .answer__item:before{border:2px solid var(--theme-ui-colors-white);content:'';background-image:url(https://interactive.zaobao.com/lib/imgs/icon-tick-white.svg);}

#quizStyle :checked + .answer__item--is-correct{background-color:rgba(113,207,146,1);color:var(--theme-ui-colors-white);border-color:transparent;border-color:transparent;}
#quizStyle :checked + .answer__item--is-correct:before,#quizStyle :valid .answer__item--is-correct:before{background-image:url(https://interactive.zaobao.com/lib/imgs/icon-tick-white.svg);border:1px solid var(--theme-ui-colors-white);}

#quizStyle :checked + .answer__item:before,#quizStyle :checked + .answer__item--is-correct:before,#quizStyle :valid .answer__item--is-correct:before{width:20px;height:20px;margin:0 0.6em 0 0;display:inline-block;border-radius:50%;background-repeat:no-repeat;background-position:0;background-size:100%;content:'';}

#quizStyle :checked + .answer__item .answer__icon{display:inline-block;}

#quizStyle :valid{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
#quizStyle :valid + .answer__item{pointer-events:none;}

form{counter-reset:quiz-score;}

#quizStyle :checked + .answer__item--is-correct{counter-increment:quiz-score;}
#quizStyle .score{font-size:2.4em;padding-bottom:0.3em;line-height:1;display:block;counter(quiz-score, decimal) "/" attr(data-question-count);}
#quizStyle .score:before{padding-right:0.1em;font-weight:900;content:counter(quiz-score);}
#quizStyle .score:after{margin-left:0.1em;content:"/ " attr(data-question-count);font-weight:300;}

#quizStyle #score{width:40%;padding:3em 1em;display:block;color:var(--theme-ui-colors-white);position:fixed;height:auto;margin:0;vertical-align:bottom;border-radius:0.6em;background:#1654fc;z-index:10000000;top:50%;left:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);box-shadow:0 0 4em rgba(0,0,0,0.3);}
#quizStyle #score:before{content:'ä½ ç­”å¯¹';font-size:1.2em;margin-bottom:0.2em;}
#quizStyle #score a{color:var(--theme-ui-colors-white)!important;padding-bottom:0.1em;border-bottom:1px solid var(--theme-ui-colors-white);}
#quizStyle .message,#quizStyle #score{display:none;}
#quizStyle:valid .message,#quizStyle:valid #score{display:block;}
#quizStyle #score .alert-msg{font-size:1.2em;background:var(--theme-ui-colors-white);color:var(--theme-ui-colors-black);padding:1em;border-radius:0.4em;display:table;margin:auto;}
#quizStyle #score .alert-msg a{color:var(--theme-ui-colors-main)!important;font-weight:bold;}

@media (max-width:800px) and (orientation:portrait){
#quizStyle fieldset{padding:0;height:auto;display:block;}
#quizStyle fieldset .set{padding:1.6em;}
#quizStyle fieldset legend{font-size:1.2em;line-height:1.4;}
#quizStyle .package{display:block;}
#quizStyle.pix-plate .set{padding:2em;}
#quizStyle .img.circle{position:relative;}
#quizStyle .img.circle img{width:80%;margin:-10% auto 0 auto;}
#quizStyle .score:before,#quizStyle .score:after{font-size:1em;}
#quizStyle #score{width:80%;}
}

#QuizList{padding:0;margin:0 auto;list-style:none;}
#QuizList .quiz-group li{width:100%;padding:0;margin:0;list-style-position:inside;counter-increment:custom-counter-name;position:relative;}
#QuizList .quiz-group li:before,#QuizList .quiz-group li:after{top:1em;font-size:1em;line-height:1;z-index:1;display:inline-block;position:absolute;}
#QuizList .quiz-group li:before{right:2.4em;font-weight:bold;color:var(--theme-ui-colors-main);content:counter(custom-counter-name);content:counter(custom-counter-name);text-align:right;}
#QuizList .quiz-group li:after{right:1em;content:"/ " attr(data-section-total);opacity:0.5;}
#QuizList fieldset{margin:4px auto!important;padding:3em 0 2em 0;}
#QuizList :checked + .answer__item{background-color:var(--theme-ui-colors-error);}
#QuizList :valid .answer__item--is-correct{background-color:var(--theme-ui-colors-main);}

@media (min-width:200px) and (max-width:800px) and (orientation:portrait){
#QuizList fieldset{padding:2em 0 0 0;border-radius:0.4em;}
#QuizList fieldset .set{padding:1em;}
#quizStyle .answer__reveal-text figure{width:100%;}
#quizStyle #score{padding:2em 1em;}
}

.close{position:absolute;right:0.4em;top:0.4em;width:30px;height:30px;padding:0.6em;opacity:1;border-radius:50%;border:1px solid var(--theme-ui-colors-white);background-color:var(--theme-ui-colors-white);background-size:100%;background-position:center;background-repeat:no-repeat;background-image:url(/imgs/icon-close.svg);}

.icon-alert,.icon-query{width:28px;height:28px;margin-right:0.4em;display:inline-flex;align-items:center;justify-content:center;background:var(--theme-ui-colors-main);color:var(--theme-ui-colors-white);position:relative;font-style:normal;animation:blinker 1s step-end infinite;border-radius:50%;}
.icon-alert:before,.icon-query:before{font-size:0.9em;font-weight:900;}
.icon-alert:before{content:'!';}
.icon-query:before{content:'?';}

.blink-hard{animation:blinker 1s step-end infinite;}
.blink-soft{animation:blinker 1.5s linear infinite;}
@keyframes blinker{
50%{opacity:0;}
}

.alert{padding:1.4em 1.4em 0.4em 1.4em;margin:0 auto -1px auto;background:#fff3f6;border-radius:0.4em;border:1px solid var(--theme-ui-colors-main);}
.caution{padding:1.4em 1.4em 0.4em 1.4em;background:#fff;border-radius:0.4em;border:1px solid var(--theme-ui-colors-main);}

.poll-avg{text-align:center;}
.poll-avg h4{margin-bottom:1em;color:var(--theme-ui-colors-secondary);font-weight:700;}
.poll-set{column-gap:1em;flex-flow:row wrap;display:flex;justify-content:start;}
.poll-set .group-detail{width:48%;font-size:0.85em;display:flex;flex-direction:column-reverse;margin:0 0 0.4em 0;padding:0 0 0.4em 0;border-bottom:1px solid #ccc;}
.poll-set .group-detail dt{font-weight:500;}
.poll-set .group-detail dd{font-size:2em;font-weight:900;}
.poll-set .group-detail:nth-child(1) dd{color:var(--theme-ui-colors-main);}

@media (min-width:200px) and (max-width:800px){
.poll-set{display:block;}
.poll-set .group-detail{width:100%;flex-direction:row-reverse;align-items:center;justify-content:start;}
.poll-set .group-detail dt{font-size:0.9em;text-align:left;}
.poll-set .group-detail dd{font-size:1.4em;width:20%;margin-right:0.6em;text-align:right;display:block;}
}