/* TABLE OF CONTENT
0. BOOTSTRAP CODES
1. HTML & BODY
2. WELCOME IMAGE
3. WELCOME TEXT
4. CHANGE LANGUAGE BUTTON
5. QUESTION TEXT
6. GET STARTED BUTTON
7. START BUTTON
8. RETAKE THE QUIZ BUTTON
9. CHOICE OF ANSWER BUTTON
10. QUESTION COUNT
11. TRUTH OR MYTH OPTIONS
12. ANSWER EXPLANATION
13. RESPONSE FOR TRUTH OR MYTH
14. QUIZ RESULT BUTTONS
15. SPEAK TO DOCTOR BUTTON
16. CTA FLOATING BUTTON
17. SHARE BUTTONS
18. REFERENCE
19. ENDING SHORT TEXT
20. HIDDEN FOR TOGGLING
21. EMAIL PAGE
*/
/* 0. BOOTSTRAP CODES */
html{font-size:14px;box-sizing:border-box;overflow: auto;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;margin-right:auto;margin-left:auto}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-ms-flex-order:-1;order:-1}.order-last{-ms-flex-order:13;order:13}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-ms-flex-order:-1;order:-1}.order-md-last{-ms-flex-order:13;order:13}.order-md-0{-ms-flex-order:0;order:0}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-ms-flex-order:-1;order:-1}.order-lg-last{-ms-flex-order:13;order:13}.order-lg-0{-ms-flex-order:0;order:0}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}
/* 1. HTML & BODY */
html {
background: #fff;
}
body {
width: 100%;
margin: 0 auto;
font-family: 'Open Sans',sans-serif;
font-size: 16px;
color: #353535;
line-height: 1.5em;
}
.mobile-only{
display: none;
}
.desktop-only{
display: block;
}
@media (max-width: 768px){
.mobile-only{
display: block;
}
.desktop-only{
display: none;
}
}
.container-body {
padding-bottom: 10px;
text-align: center;
}
/* 2. WELCOME IMAGE */
.welcome-img {
display: block;
margin: 0px auto;
width: 39%;
}
@media(max-width: 576px) {
.welcome-img {
width: 75%;
padding-bottom: 0;
padding-top: 10px;
}
}
/* 3. WELCOME TEXT */
h1 {
font-size: 28px;
margin: 0 0 11px;
color: #3c3c3c;
padding-top: 30px;
text-align: left;
font-weight: 100;
}
@media(max-width: 576px) {
h1 {
font-size: 28px;
padding: 30px 15px 0;
line-height: 1.3em;
}
}
h2 {
font-size: 22px;
margin: 15px 0;
}
.start-inst-vac {
font-size: 18px;
margin-bottom: 25px;
}
/* 4. CHANGE LANGUAGE BUTTON */
.bahasa-button,
.en-button {
background: #4575CB;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
height: 56px;
margin: 10px;
padding: 15px 50px;
transition: all .35s ease-in;
text-decoration: none;
display: inline-block;
}
@media(max-width: 576px) {
.bahasa-button {
margin-left: 8px;
font-size: 17px;
}
}
/* 5. QUESTION TEXT AND IMAGE */
.question-image {
width: 25%;
margin-top: 10px;
}
@media(max-width: 576px) {
.question-image {
width: 60%;
}
}
h4 {
font-size: 40px;
font-weight: 100;
margin: 15px 0 25px;
line-height: 1.5em;
padding-top: 20px;
text-align: center;
}
@media(max-width: 576px) {
h4 {
font-size: 24px;
margin-top: -40px;
line-height: 1.5em;
font-weight: normal;
}
}
h5 {
font-size: 14px;
margin: 10px 0 5px;
}
h6,
.description-quiz {
font-size: 22px;
font-weight: 100;
line-height: 1.5em;
margin-bottom: 20px;
margin-top: 0;
text-align: left;
}
@media(max-width: 576px) {
h6 {
font-size: 16px;
line-height: 23px;
/* padding: 0 20px 0; */
}
}
@media(max-width: 576px) {
.description-quiz{
font-size: 16px;
line-height: 23px;
padding: 0 20px 0;
}
}
strong { font-weight: bold; }
em { font-style: italic; }
ul { list-style-type: circle; }
ol { list-style-type: decimal; }
ol li { list-style-type: decimal; margin-left: 20px; }
/* 6. GET STARTED BUTTON */
.button {
width: auto;
padding: 18px 50px;
color:#ffffff;
background-color: #5DC7F6;
border: none;
font-size: 20px;
height: 56px;
border-radius: 5px;
box-shadow: 0 3px 6px #00000029;
text-decoration: none;
margin-left: 33px;
margin-top: 0px;
}
@media(max-width: 576px) {
.button {
margin-left: 8px;
font-size: 17px;
padding: 18px 25px;
}
}
.button:hover {
background-color: #5DC7F6;
}
/* 7. START BUTTON */
.startQuiz {
margin-top: 40px;
}
/* 8. RETAKE THE QUIZ BUTTON */
/* .tryButton {
float: none;
margin: 20px 0;
width: auto;
padding: 18px 50px;
color:#ffffff;
background-color: #5DC7F6;
border: none;
font-size: 20px;
height: 56px;
border-radius: 5px;
box-shadow: 0 3px 6px #00000029;
text-decoration: none;
margin-left: 30px;
margin-top: 0px;
} */
/* 9. CHOICE OF ANSWER BUTTON */
.truth-myth-input {
display: none;
}
.truth-myth-button {
background-color: #fff;
border: 1px;
border-radius: 4px;
box-shadow: 0 2px 14px #00000029;
color: #3c3c3c;
display: block;
margin: 0px auto;
margin-bottom: 10px;
padding: 20px;
text-align: center;
width: 45%;
}
@media(max-width: 576px) {
.truth-myth-button {
width: 97%;
font-size: 17px;
line-height: 23px;
/* padding: 10px 20px; */
margin: -6px 0;
margin-left: 7px;
}
}
.truth-myth-button--selected {
background-color: #5DC7F6;
border: none;
border-radius: 4px;
box-shadow: 0 2px 14px #00000029;
color: #fff;
display: block;
margin: 0px auto;
margin-bottom: 10px;
padding: 20px;
text-align: center;
width: 45%;
}
@media(max-width: 576px) {
.truth-myth-button--selected {
width: 97%;
font-size: 17px;
line-height: 23px;
/* padding: 10px 20px; */
margin: -9px 0;
margin-left: 7px;
}
}
/* clearfix */
.quizArea, .quizResults {
zoom: 1;
}
.quizArea:before, .quizArea:after, .quizResults:before, .quizResults:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
.quizArea:after, .quizResults:after {
clear: both;
}
/* 10. QUESTION COUNT */
.questionCount {
font-size: 20px;
font-style: italic;
}
@media(max-width: 576px) {
.questionCount {
font-size: 12px;
}
}
.questionCount span {
font-weight: bold;
}
ol.questions {
margin-top: 20px;
margin-left: 0;
}
/* 11. TRUTH OR MYTH OPTIONS */
ol.questions li {
margin-left: 0;
font-size: 20px;
padding-right: 50px;
display: inline;
line-height: 1.5em;
margin-bottom: 30px;
text-align: center;
}
ul.answers {
margin: 0;
}
@media(max-width: 576px) {
ul.answers {
margin: 0 40px 14px 0;
}
}
/* 12. ANSWER EXPLANATION */
ul.responses li {
margin: 20px 115px 10px;
}
@media(max-width: 576px) {
ul.responses li {
margin: 0 0 10px
}
}
/* 13. RESPONSE FOR TRUTH OR MYTH */
ul.responses li h6 span {
display: block;
font-weight: bold;
font-size: 28px;
}
@media(max-width: 576px) {
ul.responses li h6 span {
font-size: 22px;
}
}
.complete ul.answers li.correct, ul.responses li.correct h6 span {
padding-bottom: 15px;
color: #6C9F2E;
}
ul.responses li.incorrect h6 span {
padding-bottom: 15px;
color: #B5121B;
}
/* 14. QUIZ RESULTS BUTTONS */
.quizResults h3 {
font-size: 27px;
margin: 0;
padding-bottom: 10px;
padding-top: 20px;
margin-top: 7%;
}
}
.quizResults h3 span {
font-weight: normal;
font-style: italic;
}
.quizResultsCopy {
clear: both;
margin-top: 20px;
}
/* 15. SPEAK TO DOCTOR BUTTON */
/* .speak-button {
background: #d65858;
border-radius: 4px;
color: #fff;
display: inline-block;
height: 56px;
padding: 18px 50px;
width: auto;
font-size: 20px;
}
@media(max-width: 576px) {
.speak-button {
width: 100%;
border: none;
border-radius: 0;
font-size: 13px;
margin: 0;
padding: 1px 10px;
}
} */
/* 16. CTA FLOATING BUTTON */
.ask-button {
box-shadow: 0 2px 7px #000000c4;
background: #d65858;
width: 95%;
border-radius: 15px;
margin: 0 auto;
display: flex;
height: 45px;
bottom: 0px;
margin-top: 7px;
color: #fff;
font-weight: 700;
text-align: center;
text-decoration: none;
z-index: 3;
margin-bottom: 4px;
align-items: center;
text-align: center;
justify-content: center;
}
.float-button {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
z-index: 20;
width: 100%;
}
.hc-vac-disclaimer {
color: #2e5aa9;
font-weight: bold;
font-size: 20px;
text-align: left;
}
@media (max-width: 768px) {
.hc-vac-disclaimer {
font-size: 14px;
}
}
@media(max-width: 576px) {
.ask-button {
width: 100%;
border: none;
border-radius: 0;
font-size: 12px;
display: flex;
margin: 0;
padding: 11px;
justify-content: center;
align-items: center;
}
.float-button {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
z-index: 20;
width: 100%;
}
.padding-mobile {
padding: 0;
}
}
/* 17. SHARE BUTTONS */
.vaccine-share-text {
font-size: 20px;
font-weight: 600;
text-align: left;
}
.quiz-share {
background-size: cover;
height: 40px;
margin: 10px;
width: 146px;
cursor: pointer;
}
.quiz-share-icon-fb{
background-image: url('./img/Facebook.png');
}
.quiz-share-icon-wa{
background-image: url('./img/WhatsApp.png');
}
.quiz-share-icon-tw{
background-image: url('./img/Twitter.png');
}
.quiz-share-icon-wrapper{
display: flex;
}
@media (max-width: 576px) {
.quiz-share-icon-wrapper{
display: inline-flex;
}
.quiz-share-icon-fb {
background-image: url('./img/fb.png');
width: 42px;
}
.quiz-share-icon-wa{
background-image: url('./img/wa.png');
width: 42px;
}
.quiz-share-icon-tw{
background-image: url('./img/tw.png');
width: 42px;
}
}
.result-desktop-only{
color: #fff;
display: flex;
font-size: 16px;
font-weight: 600;
margin-top: 20px;
width: 100%;
justify-content: center;
}
/* button.forum{
align-items: center;
background-color: var(--lightblue);
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
display: flex;
justify-content: center;
}
button.consult-doc{
background-color: var(--darkblue);
border-radius: 4px;
} */
/* .result-desktop-only button{
border: none;
padding: 15px 17px;
width: 50%;
} */
button.consult-doc, button.forum{
background: #fff;
border: none;
border-radius: 4px;
box-shadow: 0px 2px 12px #d4d2d2;
font-size: 14px;
font-weight: bold;
height: 85px;
margin: 15px;
outline: none;
padding: 10px;
width: 198px;
display: flex;
}
.result-desktop-only button{
border: none;
padding: 15px 17px;
width: 35%;
}
button.consult-doc p, button.forum p{
font-size: 14px;
text-align: center;
margin-bottom: 0px;
}
@media (max-width:768px){
button.consult-doc p, button.forum p{
font-size: 12px;
}
}
.consult-img{
padding-right: 5px;
}
/* 18. REFERENCE */
.reference-title-head {
font-size: 20px;
font-weight: 600;
line-height: 28px;
text-align: left;
}
.reference-text-link {
align-items: center;
color: #3c3c3c;
display: flex;
margin-bottom: 5px;
text-decoration: none;
font-size: 14px;
text-align: left;
}
.references{
padding-bottom: 10px;
}
@media(max-width: 576px) {
.references {
margin-left: 0;
text-align: left;
}
}
.external-link-svg svg {
align-items: center;
display: flex;
margin-left: 5px;
width: 15px;
}
.soalan-link-svg-fill {
fill: #41c0f1;
}
/* 19. ENDING SHORT TEXT */
.quiz-short-text {
font-size: 20px;
line-height: 1.5em;
text-align: left;
}
@media(max-width: 576px) {
.quiz-short-text {
font-size: 17px;
/* padding: 0 50px; */
line-height: 1.5em;
}
}
/* 20. HIDDEN FOR TOGGLING */
/* BASE QUIZ STYLES */
/* These styles ensure that the necessary elements are hidden for toggling */
.startQuiz,
.nextQuestion,
.backToQuestion,
.questions li.question,
.questions li.question .responses,
.questions li.question .responses .correct,
.questions li.question .responses .incorrect,
.quizResults {
display: none;
}
/* If response messages are disabled or only shown on quiz completion,
nextQuestion button IS checkAnswer button - so it must be displayed */
.nextQuestion.checkAnswer {
display: block;
}
ol.questions,
ul.answers,
ul.responses,
ol.questions li,
ul.answers li,
ul.responses li {
list-style-type: none;
}
/* Accessibility */
.quizName span:first-child {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* 21. EMAIL PAGE */
/* 1.1 color definition */
:root{
--darkblue:#4575CB;
--lightblue:#5DC7F6;
--backgroundblue:#FAFBFF;
--textgrey:#666;
--textblack:#3c3c3c;
--shadow1:#00000029;
--disablegrey:#989EAF;
--warningred:#F66565;
}
/*
_ _ ____
/\ | | | | | _ \
/ \ | | ___ _ __| |_ | |_) | _____ __
/ /\ \ | |/ _ \ '__| __| | _ < / _ \ \/ /
/ ____ \| | __/ | | |_ | |_) | (_) > <
/_/ \_\_|\___|_| \__| |____/ \___/_/\_\
11. Alert Box
*/
.alert-container {
padding: 20px;
background-color: white;
color: var(--textblack);
display:none;
min-height:1%;
min-width:1%;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
transition: all 0.5s ease-in;
box-shadow: var(--shadow1) 0 3px 6px;
padding: 20px;
z-index:1000;
}
.alert-text{
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
text-align: center;
}
.alert-text p{
margin-bottom: 10px;
font-size:24px;
}
.alert-btn-primary{
color:#fff;
background-color: var(--lightblue);
border: var(--lightblue) 1px solid;
}
.alert-btn-secondary{
color:var(--disablegrey);
background-color:#fff;
border: var(--disablegrey) 2px solid;
}
.alertlogo{
background-image: url('../img/Alert.png');
background-repeat: no-repeat;
background-size: cover;
height: 50px;
width: 120px;
margin: 20px auto;
}
.alert-btn-holder{
margin: 40px;
}
.alert-btn-holder button{
margin:0 40px;
padding: 15px 0;
border-radius: 4px;
font-weight: 600;
font-size:16px;
width: 181px;
}
.alert-overlay{
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
background-color:#000000aa;
z-index:100;
}
@media (max-width: 576px) {
.alertlogo{
height: 62px;
width: 72px;
}
.alert-text p{
font-size: 14px;
}
.alert-btn-holder{
margin:20px;
}
.alert-btn-holder button{
margin: 0;
padding: 10px 0;
font-size:12px;
width: 136px;
}
}
/*
_ _ _ _____
| | | (_) | __ \
| | ___ __ _ __| |_ _ __ __ _ | |__) |_ _ __ _ ___
| | / _ \ / _` |/ _` | | '_ \ / _` | | ___/ _` |/ _` |/ _ \
| |___| (_) | (_| | (_| | | | | | (_| | | | | (_| | (_| | __/
|______\___/ \__,_|\__,_|_|_| |_|\__, | |_| \__,_|\__, |\___|
__/ | __/ |
|___/ |___/
12. Loading Page
*/
.loading-container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
justify-content: center;
align-items: center;
transition: all 0.5s ease-in;
padding: 20px;
z-index:1000;
}
.loading-title{
font-size:40px;
}
.loading-subtitle{
font-size:24px;
}
.loading-background{
width:400px;
margin:20px auto
}
/* loading animation */
.loading-animation svg{
height:200px;
}
@media (max-width:576px) {
.loading-title{
font-size:24px;
}
.loading-subtitle{
color: var(--textgrey);
font-size: 12px;
line-height: 24px;
margin-top: 10px;
}
.loading-background{
width: 60%;
}
.loading-animation svg{
height:100px;
margin-bottom:0;
}
}
/*
______ _ _ _____
| ____| (_) | | __ \
| |__ _ __ ___ __ _ _| | | |__) |_ _ __ _ ___
| __| | '_ ` _ \ / _` | | | | ___/ _` |/ _` |/ _ \
| |____| | | | | | (_| | | | | | | (_| | (_| | __/
|______|_| |_| |_|\__,_|_|_| |_| \__,_|\__, |\___|
__/ |
|___/
*/
/* 13. email page */
.email-title-desc{
color: var(--textblack);
}
.email-container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-evenly;
list-style: none;
margin: 0;
margin-top: 10px;
padding: 0;
text-align: center;
}
.email-title{
font-size: 40px;
}
.email-desc{
font-size: 16px;
}
.email-form-container input{
background: none;
border: none;
caret-color: var(--disablegrey);
color: var(--darkblue);
font-size: 40px;
outline: none;
text-align: center;
width: 100%;
}
.email-form-container input::placeholder{
color: var(--disablegrey);
}
.email-form-container input:focus-visible{
border: unset;
}
.invalid-msg{
color: var(--warningred);
}
.invalid-msg a{
color: var(--warningred);
font-weight: 600;
text-decoration: none;
}
.submit-email-btn{
background-color: var(--disablegrey);
border: 1px solid var(--disablegrey);
border-radius: 4px;
color: var(--textgrey);
font-size: 16px;
font-weight: 600;
height: 50px;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
}
.email-agree{
color: var(--textblack);
font-size: 12px;
line-height: 23px;
margin: 0 auto;
width: 250px;
}
.email-seperator{
border: 1px solid #ddd;
fill: var(--disablegrey);
margin: 0 auto;
margin: 10px auto;
width: 60%;
}
@media (max-width: 576px){
.email-title{
font-size: 24px;
}
.email-desc{
font-size: 14px;
}
.email-form-container input{
font-size: 24px;
}
.invalid-msg{
font-size: 14px;
}
}
/*
______ _ _ _____
| ____| (_) | | __ \
| |__ _ __ ___ __ _ _| | | |__) |_ _ __ _ ___
| __| | '_ ` _ \ / _` | | | | ___/ _` |/ _` |/ _ \
| |____| | | | | | (_| | | | | | | (_| | (_| | __/
|______|_| |_| |_|\__,_|_|_| |_| \__,_|\__, |\___|
__/ |
|___/
*/
/* email page */
.email-title-desc{
color: var(--textblack);
}
.email-container{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-evenly;
list-style: none;
margin: 0;
margin-top: 10px;
padding: 0;
text-align: center;
}
.email-title{
font-size: 40px;
}
.email-desc{
font-size: 16px;
}
.email-form-container input{
background: none;
border: none;
caret-color: var(--disablegrey);
color: var(--darkblue);
font-size: 40px;
outline: none;
text-align: center;
width: 100%;
}
.email-form-container input::placeholder{
color: var(--disablegrey);
}
.email-form-container input:focus-visible{
border: unset;
}
.invalid-msg{
color: var(--warningred);
}
.invalid-msg a{
color: var(--warningred);
font-weight: 600;
text-decoration: none;
}
.submit-email-btn{
background-color: var(--disablegrey);
border: 1px solid var(--disablegrey);
border-radius: 4px;
color: var(--textgrey);
font-size: 16px;
font-weight: 600;
height: 50px;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
}
.email-agree{
color: var(--textblack);
font-size: 12px;
line-height: 23px;
margin: 0 auto;
width: 250px;
}
.email-seperator{
border: 1px solid #ddd;
fill: var(--disablegrey);
margin: 0 auto;
margin: 10px auto;
width: 60%;
}
@media (max-width: 576px){
.email-title{
font-size: 24px;
}
.email-desc{
font-size: 14px;
}
.email-form-container input{
font-size: 24px;
}
.invalid-msg{
font-size: 14px;
}
}
/* email page end */
.hero-result {
background-color:#E9EFFD;
color: #fff;
margin-top: 50px;
border-top-left-radius: 22px;
border-top-right-radius: 22px;
/* background-image: url(https://doc-cdn.s3.ap-southeast-1.amazonaws.com/health-center/nc-quiz-low-border-ds.png); */
background-size: cover;
background-repeat: no-repeat;
}
.vacc-quiz-banner{
height: 280px;
}
.redoQuiz{
text-decoration: none;
}
.quizcolor{
color: #4D76C5;
}
.quizScore{
background: #fff;
color: #000;
border-radius: 8px;
padding: 13px !important;
}
.result-opt {
background-color: #F4F8FC;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-bottom: 50px;
text-align: center;
}
.res-redo {
margin: 16px 14px;
display: inline-block;
}
.nic-share-mb {
height: 15px;
margin-right: 7px;
}
.result-under-cta {
box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
padding: 5px;
color: #000;
display: inline-block;
background-color: #E9EFFD;
border-radius: 8px;
margin-bottom: 5%;
width: 64%;
text-align: left;
text-decoration: none;
}
.result-under-cta img {
float: left;
margin-right: 18px;
}
.result-under-cta span:nth-child(1) {
font-size: 10px;
}
.result-under-cta span:nth-child(2) {
font-weight: bold;
}
.result-under-cta p:nth-child(4) {
color: #0071EB;
font-weight: bold;
margin: 5px 0;
}
.result-under-cta-2 {
box-shadow: 1px 1px 3px 0 rgb(0 0 0 / 10%);
padding: 5px;
color: #000;
display: inline-block;
background-color: #FFDBA1;
border-radius: 8px;
margin-bottom: 5%;
width: 64%;
text-align: left;
text-decoration: none;
}
.result-under-cta-2 img {
float: left;
margin: 0 28px;
}
.result-under-cta-2 p:nth-child(2) {
font-weight: bold;
margin: 5px 0;
}
.result-under-cta-2 p:nth-child(3) {
color: #0071EB;
font-weight: bold;
margin: 5px 0;
}
.nicotine-res-cta-1 {
display: inline-block;
vertical-align: top;
}
.nicotine-res-cta-2 {
display: inline-block;
width: 60%;
text-align: left;
}
.language-cta {
color: #0071EB;
font-weight: bold;
}
.language-cta-2 {
color: #0071EB;
font-weight: bold;
text-decoration: underline;
}
.result-under-cta:hover,.result-under-cta:visited,.result-under-cta:focus{
color: #000;
text-decoration: none;
}
.result-under-cta-2:hover,.result-under-cta-2:visited,.result-under-cta-2:focus{
color: #000;
text-decoration: none;
}
.nic-res-sidebar p{
margin: 0;
}
.share-result{
bottom: 7px;
position: relative;
}
.language-desc {
color: #000;
/* font-size: 18px; */
/* line-height: 27px; */
margin: 20px auto;
}
.language-instr {
margin-right: 20px;
}
.nic-land-tick {
width: 2%;
}
.nic_info{
vertical-align: top;
}
.language-disclaimer {
font-size: 20px;
text-align: left;
width: 50%;
margin-top: 0;
}
.language-cta {
color: #0071EB;
font-weight: bold;
}
.vacc-quiz-main-banner{
float: right;
height: 253px;
position: relative;
top: 0px;
}
.language-cta-2 {
color: #0071EB;
font-weight: bold;
text-decoration: underline;
}
.container-body{
background: #F3F6FF;
}
.quizArea{
text-align: left;
}
@media (min-width: 576px){
.nic-res-sidebar {
text-align: right;
}
}
@media (min-width: 576px){
.res-share {
margin: 16px 14px;
display: inline-block;
}
}
@media(max-width: 576px){
.result-under-cta{
width: 100%;
}
.result-under-cta-2{
width: 100%;
}
.nicotine-res-cta-2 {
width: 94%;
}
.nic-share-icon {
display: inline-block !important;
}
.vacc-other-info{
width: 50% !important;
}
.quizScore{
width: 50%;
font-size: 17px !important;
margin: 0 auto !important;
}
.vacc-quiz-banner-1{
display: none;
}
.vacc-quiz-banner-2{
height: 222px;
margin-top: 27px;
}
.share-result{
font-size: 14px;
bottom: 0;
}
.nic-share-nospace {
padding: 0;
padding-top: 18px;
}
.result-opt{
margin-bottom: 10px;
}
.vacc-quiz-main-banner{
float: none;
height: 144px;
}
.language-desc {
margin: 0;
width: auto;
display: flex;
font-size: 14px;
line-height: 23px;
margin-top: 25px;
}
.language-instr {
display: block;
margin: 0;
width: 32%;
}
.nic-land-tick {
width: 30%;
display: block;
margin: 0 auto;
margin-bottom: 11%;
}
.nic_info {
text-align: center;
display: block;
}
.language-disclaimer{
font-size: 16px;
text-align: left;
width: 98%;
}
.bahasa-button, .en-button{
display: inline-flex;
width: 41%;
text-align: center;
align-items: center;
justify-content: center;
}
.breadcrumbs-cont{
margin-top: 0 !important;
}
}
.breadcrumbs-cont{
width: 100% !important;
text-align: left !important;
padding-top: 24px !important;
}