/*
 * The High Risk Family Adult project.
 * Copyright 2022 DSP, inc.  All rights reserved.
 * Authors:
 *   imacat.yang@dsp.im (imacat), 2022/9/27
 */
/* index.css: The style sheet for the High Risk Family Adult project */

body {
    margin: 0;
    padding: 0;
}
.d-none {
    display: none;
}
.pages {
    position: absolute;
    width: 100%;
    height: 100%;
}
@media (min-width: 340px) {
    .content {
        width: 91.67%;
    }
}
@media (min-width: 1024px) {
    .content {
        width: 50%;
    }
}
#page-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgb(212, 97, 71);
    background-color: rgba(0, 0, 0, 0.5);
}

/** The cover background */
#cover-bg {
    position: absolute;
    z-index: -1;
}
.cover-bg-circle {
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.63, 0.63);
}
#cover-bg-circle-1 {
    width: 30rem;
    height: 30rem;
    left: 70%;
    top: 10%;
    background-color: rgb(254, 196, 144);
}
#cover-bg-circle-2 {
    width: 70rem;
    height: 70rem;
    left: 70%;
    top: 10%;
    border: 6rem solid rgb(247, 247, 247);
}
#cover-bg-circle-3 {
    width: 30rem;
    height: 30rem;
    left: 0;
    top: 30%;
    background-color: rgba(254, 196, 144, .2);
}
#cover-bg-circle-4 {
    width: 60rem;
    height: 60rem;
    left: 5%;
    top: 83%;
    border: 6rem solid rgb(247, 247, 247);
}
#cover-bg-circle-5 {
    width: 60rem;
    height: 60rem;
    left: 90%;
    top: 100%;
    border: 6rem solid rgb(247, 247, 247);
}

/** The cover page */
#page-cover {
    text-align: center;
}
#page-cover h1 {
    color: rgb(26, 32, 44);
}
.btn.btn-action {
    font-size: 1.6rem;
    padding: 0 3rem;
    margin: 0 1rem;
    border: 0;
    color: white;
    background-color: rgb(212, 97, 71);
}
.btn.btn-action:hover {
    color: white;
    background-color: rgb(218, 121, 99);
}
.btn.btn-action[disabled] {
    color: white;
    background-color: rgb(212, 97, 71);
}
#footer-dsp a {
    font-size: 1.8rem;
    font-weight: 500;
    color: rgb(49, 130, 206);
    text-decoration: none;
}
#footer-dsp a img {
    transform: scale(0.63, 0.63);
}
#cover-failed-loading-survey {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
}

/** The survey */
#survey-bg {
    position: fixed;
    left: 0;
    top: -16%;
    z-index: -1;
    color: rgb(247, 247, 247);
    font-size: 24rem;
    font-weight: 800;
}
.survey-question-canvas {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    padding: 2rem;
    background-color: white;
}
.btn-actions {
    text-align: right;
}
.option-group {
    margin: 1rem;
}
.option-item {
    color: rgb(26,32,44);
    background-color: rgb(251, 235, 229);
    padding: 0.7rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}
#page-survey .option-item {
    cursor: pointer;
}
.option-item:hover {
    background-color: rgb(240, 184, 161);
}
.option-item input[type="checkbox"] {
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
    accent-color: rgb(198, 74, 46);
}
#btn-prev-question {
    font-size: 1.6rem;
    padding: 0 3rem;
    margin: 0 1rem;
    border: 0;
    color: inherit;
    background-color: rgba(237, 242, 247);
}
#btn-prev-question:hover {
    color: inherit;
    background-color: rgb(226, 232, 240);
}

/** The result page */
#result-score {
    margin-top: 5rem;
}
#result-score ul {
    margin: 0;
    padding: 0;
}
#result-score p {
    margin: 0;
    padding: 0;
}
#result-score ul li {
    list-style: none;
}
#risk-score {
    font-size: 120px;
}
@media (min-width: 340px) {
    #risk-score {
        font-size: 120px;
    }
}
@media (min-width: 1024px) {
    #risk-score {
        font-size: 160px;
    }
}
.risk-red {
    color: rgb(238, 64, 53);
}
.risk-orange {
    color: rgb(255, 166, 33);
}
.risk-blue {
    color: rgb(3, 121, 207);
}
.risk-green {
    color: rgb(123, 192, 67);
}