html {
    height: 100%;
    color: #666666;

}

body {
    color: #666666;
    height: 100vh;


}

.noto-sans {
    font-family: "Noto Sans", serif;

}

.blue-text {
    color: #0057a4 !important;
}

.gray-text {
    color: #666666;
}

.bg-light-blue {
    background-color: #f6f7fb;
}

.fs-27 {
    font-size: 27px;
}

.fs-40 {
    font-size: 40px;
}

.fs-20 {
    font-size: 20px;
}

.fs-10 {
    font-size: 10px;
}

footer {
    background-color: #f2f2f2;
}


#background {
    background-image: url('img/background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.answer {
    display: block;
    background-color: #ffffff;
    border-radius: 45px;
    border: 1px solid #c5cce6;

}

.answer:hover {
    box-shadow: 5px 5px 10px #c5cce6;
}

#next {
    background-color: #ffffff;
    border: none;
    position: absolute;
    bottom: 100px;
    right: 100px;
    border-radius: 45px;

}

#next:hover {
    box-shadow: 5px 5px 10px #c5cce6;
}

#finalizar {
    background-color: #ffffff;
    border: none;
    position: absolute;
    bottom: 100px;
    right: 100px;
    border-radius: 45px;

}

#finalizar:hover {
    box-shadow: 5px 5px 10px #c5cce6;
}

.answer.selected {
    background-color: #0057a4;
    color: white !important;
    border: 1px solid #0057a4;
}


#answersContainer {
    display: flex;
    flex-direction: column;
    /* Stack the buttons vertically */
    align-items: center;
    /* Center the buttons horizontally */
    width: 100%;
}

.question-image {
    max-width: 100px;
    /* Set max width for the image */
    margin-right: 20px;
    /* Add space between image and text */
}




.question-container {
    display: flex;
    align-items: center;
    /* Aligns image and text vertically */
    margin-bottom: 20px;
    justify-content: flex-start;

    /* Aligns content t*/
}

#diagnosisImageContainer {
    display: none;
}

#TreatmentContainer {
    display: none;
}



#questions-header {
    display: none;
}


#referencias-mobile {
    display: none;
}

#footer-img {
    display: none;
}

#reiniciar {

    background-color: #ffffff;
    border: 1px solid #0057a4;
    border-radius: 45px;
    color: #0057a4;

}

@media (max-width: 480px) {

    #footer-img {
        display: block;
    }


    #answersContainer {
        min-height: 48vh;
    }

    #treatmentContainer {
        min-height: 48vh;
    }

    body {
        background-color: #fafbfd;
        min-height: 100vh;
    }

    #next {
        position: relative;
        bottom: 10px;

        right: -25vw;
    }

    /* Styles for smartphones */
    .fs-27 {
        font-size: 16px;
    }

    .fs-20 {
        font-size: 15px;
    }

    .fs-40 {
        font-size: 16px;
    }

    #background {
        background-image: none;
    }


    .question-container {
        margin-bottom: 0;
    }

    #questions-footer {
        display: block;
        /* position: fixed; */
        bottom: 0;
        z-index: 0;

    }

    #questions-header {
        display: block;
        position: absolute;
        top: 0;
        z-index: 0;

    }


    #referencias-mobile {
        background-color: #fafbfd;
        display: block;
    }

    #diagnosisImageContainer {
        padding: 0 !important;
        margin-top: 150px !important;
    }

    #treatmentContainer {
        padding: 0 !important;
        margin-top: 150px !important;
    }

    #diagnosisImageContainer {
        min-height: 45vh;
    }

    footer {
        background-color: #fafbfd;
        margin-top: 20px;
    }

}

@media (min-width: 480px) and (max-width: 768px) {

    #footer-img {
        display: block;
    }


    body {
        background-color: #fafbfd;
        min-height: 100vh !important;
    }

    #questions-header {
        position: absolute;
        top: 0;
        z-index: 0;
    }

    #questionContainer {
        margin-top: 200px !important;
    }

    #referencias-mobile {
        display: block;
    }



    #background {
        background-image: none;
    }

    #next {
        position: relative;
    }

    .question-container {
        margin-bottom: 0;
    }

    #questions-footer {
        display: block;
        /* position: fixed; */
        bottom: 0;
        z-index: 0;

    }

    #questions-header {
        display: block;
        position: absolute;
        top: 0;
        z-index: 0;

    }



}