/* #################################
    Quiz Index Custom StyleSheet
#################################### */

/* ======== Quiz Content Container ======== */
.quiz-pano-wrapper {
    width: 38rem;
    margin: auto;
    padding-top: .8rem;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

/* quiz pano contents */
.quiz-pano-contents {
    padding: 1rem 0;
    display: flex;
    flex-flow: column wrap;
}
.quiz-title {
    margin: 0;
    font-size: 35px;
}
.quiz-descriptions {
    font-size: 12px;
    color: #656464;
}
.quiz-pano-read-more-button {
    width: 95px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
/* quiz pano image wrapper */
.quiz-pano-image-wrapper {
    width: 20rem;
    display: flex;
    align-items: center;
}
.quiz-pano-image-wrapper img { width: 100%; }

/* Quiz Question And Answer Block */
.quiz-questions-answers-wrapper {
    width: 100%;
    padding: 1rem 0;
    background-color: #DAFDEC;
}
/* quiz title details block */
.quiz-title-details-block {
    width: 38rem;
    margin: auto;
    display: flex;
    color: #656464;
    font-size: 12px;
    flex-flow: row wrap;
    justify-content: space-between;
}
/* quiz progress bar */
.custom-quiz-progress-bar {
    width: 38rem;
    height: 8px;
    margin: auto;
    display: flex;
    background: #058248;
}
/* quiz questions and possible answers block */
.quiz-questions-answers-block {
    width: 38rem;
    margin: 1rem auto;
}
.question-text { width: 34rem; }
.quiz-question-answers-content { margin-bottom: 1rem; }
.quiz-question-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-size: 14px;
}
.question-number-indicator {
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
}
.quiz-possible-answers-wrapper {
    width: 34.5rem;
    margin: auto;
}
.possible-answers-row {
    height: 40px;
    margin-bottom: .8rem;
    padding: 0 .8rem;
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.possible-answers-custom-radio {
    margin-right: .5rem;
    transform: scale(1.2);
    accent-color: #058248;
    cursor: pointer;
}
.answers-text {
    font-size: 12px;
    color: #656464;
    cursor: pointer;
}

/* override default row styling when answer is correct */
.possible-answers-row:has(img[src*="scam-and-phishing/checked.png"]) {
    border: 1px solid #198754;
    background-color: #f0fdf4;
}
.possible-answers-row:has(img[src*="scam-and-phishing/checked.png"]) .answers-text {
    color: #198754;
}

/* incorrect answer */
.possible-answers-row:has(img[src*="quiz/in-correct.png"]) {
    border: 1px solid #dc3545;
    background-color: #fff0f0;
}
.possible-answers-row:has(img[src*="quiz/in-correct.png"]) .answers-text {
    color: #dc3545;
}

/* show result button */
.show-result-submit-button {
    width: 130px;
    height: 35px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    border: none;
}
.srsb-disabled-mode { background-color: #80808091 !important; }

/* icons before/after answer */
.preview-answer-icons {
    margin-right: .3rem;
    display: flex;
    align-items: center;
}
.preview-answer-icons img { width: 1.1rem; }

/* result section */
.quiz-result-wrapper {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

/* ##################
    Media Queries
#################### */

/* ===== Mobile View (up to 424px) ===== */
@media only screen and (max-width: 424px) {
    .quiz-pano-wrapper {
        width: 20rem;
        flex-flow: column-reverse;
        align-items: center;
    }
    .quiz-pano-image-wrapper,
    .quiz-pano-contents {
        width: 18rem;
    }
    .quiz-title {
        width: 18rem;
        font-size: 23px;
    }
    .quiz-title br { display: none; }
    .quiz-pano-read-more-button {
        width: 85px;
        height: 30px;
    }
    .quiz-descriptions { font-size: 13px; }
    .quiz-title-details-block,
    .custom-quiz-progress-bar {
        width: 19rem;
    }
    .quiz-title-details-block { font-size: 13px; }
    .quiz-questions-answers-block { width: 20rem; }
    .question-number-indicator {
        width: 25px;
        height: 25px;
        margin-left: .5rem;
    }
    .question-text {
        width: 17rem;
        font-size: 12px;
    }
    .quiz-possible-answers-wrapper { width: 18rem; }
    .possible-answers-row {
        height: 40px;
        padding: 0 .4rem;
    }
    .answers-text { font-size: 12px; }
}

/* ===== Small Tablet (425px - 499px) ===== */
@media only screen and (min-width: 425px) and (max-width: 499px) {
    .quiz-pano-wrapper { flex-flow: column-reverse; }
    .quiz-pano-wrapper { width: 26rem; }
    .quiz-pano-image-wrapper,
    .quiz-pano-contents {
        width: 24rem;
    }
    .quiz-title {
        width: 23rem;
        font-size: 29px;
    }
    .quiz-descriptions { font-size: 15px; }
    .quiz-title-details-block,
    .custom-quiz-progress-bar {
        width: 24rem;
    }
    .quiz-title-details-block { font-size: 15px; }
    .quiz-questions-answers-block { width: 25rem; }
    .question-number-indicator {
        width: 30px;
        height: 30px;
    }
    .question-text {
        width: 20.5rem;
        font-size: 14px;
    }
    .quiz-possible-answers-wrapper { width: 22.5rem; }
    .answers-text { font-size: 13px; }
}

/* ===== Tablet (500px - 767px) ===== */
@media only screen and (min-width: 500px) and (max-width: 767px) {
    .quiz-pano-wrapper { flex-flow: column-reverse; }
    .quiz-pano-wrapper,
    .quiz-pano-image-wrapper,
    .quiz-pano-contents,
    .quiz-questions-answers-block {
        width: 29rem;
    }
    .quiz-title {
        width: 25rem;
        font-size: 35px;
    }
    .quiz-descriptions { font-size: 20px; }
    .quiz-pano-read-more-button {
        width: 120px;
        height: 45px;
        font-size: 16px;
    }
    .quiz-title-details-block { font-size: 18px; }
    .quiz-title-details-block,
    .custom-quiz-progress-bar {
        width: 29rem;
    }
    .question-text {
        width: 25.5rem;
        font-size: 18px;
    }
    .quiz-question-wrapper { font-size: 16px; }
    .question-number-indicator {
        width: 35px;
        height: 35px;
    }
    .possible-answers-custom-radio {
        margin-right: .8rem;
        transform: scale(1.4);
    }
    .answers-text { font-size: 16px; }
    .quiz-possible-answers-wrapper { width: 26.5rem; }
    .possible-answers-row {
        height: 48px;
        margin-bottom: 8px;
    }
    .show-result-submit-button {
        width: 150px;
        height: 45px;
        font-size: 15px;
    }
}

/* ===== Medium Laptop (768px - 1023px) ===== */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .quiz-pano-wrapper,
    .quiz-title-details-block,
    .custom-quiz-progress-bar {
        width: 45rem;
    }
    .quiz-title { font-size: 42px; }
    .quiz-descriptions,
    .quiz-title-details-block,
    .answers-text,
    .show-result-submit-button {
        font-size: 14px;
    }
    .quiz-pano-read-more-button {
        width: 105px;
        height: 35px;
        font-size: 14px;
    }
    .quiz-pano-image-wrapper { width: 24.5rem; }
    .quiz-questions-answers-block { width: 43rem; }
    .question-number-indicator {
        width: 35px;
        height: 35px;
        margin-right: .8rem;
    }
    .quiz-question-wrapper { font-size: 16px; }
    .quiz-possible-answers-wrapper { width: 37rem; }
    .possible-answers-custom-radio {
        margin-right: .8rem;
        transform: scale(1.5);
    }
    .show-result-submit-button {
        width: 135px;
        height: 40px;
        margin: 1.5rem auto .6rem auto !important;
    }
}

/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */
    @media only screen and ( min-width: 1024px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 50rem;
        }
        .quiz-title { font-size: 44px; }
        .quiz-pano-image-wrapper { width: 28.5rem; }
        .quiz-pano-contents { padding: 2rem 0; }
        .quiz-questions-answers-block { width: 47rem; }
        .quiz-possible-answers-wrapper { width: 41rem; }
    }

    @media only screen and ( min-width: 1200px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 58.5rem;
        }
        .quiz-title { font-size: 50px; }
        .quiz-descriptions, 
        .quiz-title-details-block, 
        .answers-text, 
        .show-result-submit-button {
            font-size: 15px;
        }
        .quiz-pano-image-wrapper { width: 34.5rem; }
        .quiz-pano-read-more-button {
            width: 115px;
            height: 40px;
            font-size: 15px;
        }
        .quiz-pano-contents { padding: 4rem 0; }
        .quiz-questions-answers-block { width: 56rem; }
        .quiz-question-wrapper { font-size: 19px; }
        .question-number-indicator {
            width: 40px;
            height: 40px;
            margin-right: 1rem;
        }
        .question-text { width: 51rem; }
        .quiz-possible-answers-wrapper { width: 49rem ; }
        .possible-answers-custom-radio {
            margin-right: 1rem;
            transform: scale(1.8);
        }
        .possible-answers-row { padding: .5rem .8rem; }
        .show-result-submit-button {
            width: 160px;
            height: 45px;
        }
    }

    @media only screen and ( min-width: 1280px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 60.5rem;
        }
        .quiz-questions-answers-block { width: 58rem; }
        .quiz-possible-answers-wrapper { width: 51rem; }
        .quiz-questions-answers-block { margin: 2rem auto; }
    }

    @media only screen and ( min-width: 1366px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 67.5rem;
        }
        .quiz-title { font-size: 55px; }
        .quiz-descriptions, 
        .quiz-title-details-block, 
        .answers-text, 
        .show-result-submit-button {
            font-size: 16px;
        }
        .quiz-pano-read-more-button {
            width: 135px;
            height: 45px;
            font-size: 16px;
        }
        .quiz-pano-image-wrapper { width: 43.5rem; }
        .quiz-pano-contents { padding: 7rem 0; }
        .quiz-questions-answers-block { width: 64rem; }
        .question-number-indicator {
            width: 45px;
            height: 45px;
        }
        .question-text { width: 57rem; }
        .quiz-question-wrapper { font-size: 21px; }
        .quiz-possible-answers-wrapper { width: 56rem; }
        .show-result-submit-button {
            width: 165px;
            height: 50px;
        }
    }

    @media only screen and ( min-width: 1680px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 80.5rem;
        }
        .quiz-title { font-size: 75px; }
        .quiz-descriptions, 
        .quiz-title-details-block, 
        .answers-text, 
        .show-result-submit-button {
            font-size: 21px;
        }
        .quiz-descriptions { margin: 2rem 0; }
        .quiz-pano-read-more-button {
            width: 165px;
            height: 55px;
            font-size: 21px;
        }
        .quiz-pano-image-wrapper { width: 46.5rem; }
        .quiz-question-wrapper { font-size: 26px; }
        .quiz-questions-answers-block { width: 78rem; }
        .question-number-indicator {
            width: 55px;
            height: 55px;
            margin-right: 1.5rem;
        }
        .quiz-question-wrapper { font-size: 30px; }
        .question-text { width: 70rem; }
        .quiz-possible-answers-wrapper { width: 68rem; }
        .possible-answers-custom-radio {
            margin-right: 1.5rem;
            transform: scale(2.5);
        }
        .possible-answers-row {
            margin-bottom: 20px;
            padding: 1.2rem 1.5rem;
        }
        .show-result-submit-button {
            width: 230px;
            height: 70px;
        }
        .show-result-submit-button { margin: 2.5rem auto 1.6rem auto !important; }
    }

    @media only screen and ( min-width: 1920px ){
        .quiz-pano-wrapper, 
        .quiz-title-details-block, 
        .custom-quiz-progress-bar {
            width: 90rem;
        }
        .quiz-title { font-size: 83px; }
        .quiz-descriptions, 
        .quiz-title-details-block, 
        .answers-text, 
        .show-result-submit-button {
            font-size: 24px;
        }
        .quiz-pano-read-more-button {
            width: 190px;
            height: 65px;
            font-size: 24px;
        }
        .quiz-pano-image-wrapper { width: 52.5rem; }
        .quiz-questions-answers-block { width: 86rem; }
        .question-number-indicator {
            width: 65px;
            height: 65px;
            margin-right: 1.5rem;
        }
        .question-text { width: 75rem; }
        .quiz-possible-answers-wrapper { width: 75rem; }
        .possible-answers-custom-radio {
            margin-right: 2rem;
            transform: scale(3);
        }
        .possible-answers-row { padding: 1.5rem 1.8rem; }
        .show-result-submit-button {
            width: 270px;
            height: 80px;
        }
    }