* {
    margin: 0;
    background-repeat: no-repeat;
    font-weight: 400;
    font-family: Poppins;
    font-style: normal;
    font-size: 14px;
    line-height: 1.2;
    color: #1C1C1A;
    box-sizing: border-box;
}

*:after,
*:before {
    background-repeat: no-repeat;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

body {
    overflow-x: hidden;
    position: relative;
}

.zincode {
    position: absolute;
    width: fit-content;
    /* height: 121px; */
    height: 42px;
    z-index: 2;
    bottom: 0px;
    font-size: 11px;
    letter-spacing: .11px;

    /* home page defaults */
    color: white;
    left: 1072px;
    scale: 1.25;
    font-weight: 600;
    /* font-weight: normal; */
    font-style: italic;
}

input,
input:focus {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    outline: none;
}

a,
a:hover {
    text-decoration: none;
}

i {
    font-style: italic !important;
}

b,
strong,
.font-weight-bold,
.font-weight-bold *,
b * {
    font-weight: 700 !important;
}

b,
strong,
span,
i {
    color: inherit;
    font-size: inherit;
}

.font-weight-medium {
    font-weight: 500;
}

button,
button:focus {
    user-select: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

sup {
    color: inherit;
}

.pointer {
    cursor: pointer !important;
}

.bg-white {
    background-color: #FFF;
}

.text-white,
.text-white * {
    color: #FFF !important;
}

.text-cyano {
    color: #0098A5;
}

.text-asthma-light {
    color: #0098A5;
}

.gradient-asthma {
    background: #0098a5;
    /* Old browsers */
    background: -moz-linear-gradient(left, #0098a5 0%, #005b71 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #0098a5 0%, #005b71 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #0098a5 0%, #005b71 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.text-crswnp-light {
    color: #00576C;
}

.gradient-crswnp {
    background: #0098a5;
    /* Old browsers */
    background: -moz-linear-gradient(top, #0098a5 0%, #005b71 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0098a5 0%, #005b71 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0098a5 0%, #005b71 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.text-psa-light {
    color: #00576C;
}

.gradient-psa {
    background: #0098a5;
    /* Old browsers */
    background: -moz-linear-gradient(top, #0098a5 0%, #005b71 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0098a5 0%, #005b71 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0098a5 0%, #005b71 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.text-grey {
    color: #7E726E;
}

body {
    position: relative;
    width: 1920px;
    height: 1080px;
}

.font-size-18 {
    font-size: 18px;
}

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

.font-size-25 {
    font-size: 25px;
}

.font-size-30 {
    font-size: 30px;
}

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

.position-relative {
    position: relative;
}

.standard-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 12px;
    background-color: #FFF;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.standard-section.popup-summary {
    background-color: transparent;
}

.h-100 {
    height: 100%;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.hidden-default {
    display: none;
}

.btn-next-slide {
    position: absolute;
    right: 74px;
    bottom: 25px;
    background-image: url("../img/next-slide-btn.png");
    background-size: contain;
    background-position: right center;
    padding-right: 123px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1;
    font-size: 25px;
    font-weight: bold;
    text-align: right;
}

.btn-next-slide:not(.inactive) {
    animation: bounce 1.5s 3 ease-in-out;
    animation-iteration-count: infinite;
}

.btn-next-slide.small {
    line-height: 57px;
}

.btn-next-slide.inactive {
    opacity: 0.4;
}

.btn-next-slide.inactive.shake {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.select-btn,
.select-btn:focus,
.learn-treatment-response {
    border: 4px solid #005b71;
    color: #005b71;
    background-color: #FFF;
    transition: all .2s ease-in-out;
    font-size: 23px;
    font-weight: bold;
    width: 80%;
    display: block;
    padding: 15px 0 12px 0;
    outline: 0;
    border-radius: 10px;
    line-height: 1;
}

.btn-alert {
    border: 4px solid #005b71;
    color: #005b71;
    background-color: #FFF;
    transition: all .2s ease-in-out;
    font-size: 23px;
    font-weight: bold;
    width: 80%;
    width: 80%;
    display: block;
    padding: 15px 0 12px 0;
    outline: 0;
    border-radius: 10px;
    line-height: 1;
}

.btn-alert:hover {
    background-color: #005b71;
    color: #FFF;
    transition: all .2s ease-in-out;

}

.select-btn.treatment-response {
    max-width: 80%;
    margin: auto;
}

.select-btn.treatment-response-yes-no {
    max-width: 100%;
    padding: 15px 80px;
    width: auto;
    margin: auto;
}

.vertical .select-btn {
    padding: 30px 0 25px 0;
}

.select-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.select-col p {
    color: #7E726E;
    transition: all .2s ease-in-out;
}


.text-select-col.two-row {
    min-height: 90px;
}

.interactive-item .two-row {
    min-height: 110px;
}

.text-select-col.two-row-summary {
    min-height: 42px;
}

.text-select-col.three-row {
    min-height: 108px;
}

.text-select-col.five-row {
    min-height: 150px;
}

.select-col.border-right,
.border-right {
    border-right: 2px solid #2d5967
}

.select-col.selected,
.select-col.selected .select-btn,
.select-btn-crswnp.selected .select-btn {
    color: #FFF;
}

.col-24 {
    flex: 0 0 auto;
    width: 20%;
}

#evaluate-control-1 .col-24,
#evaluate-control-3 .col-24,
#evaluate-severity-1 .col-24,
#evaluate-severity-3 .col-24,
#checklist-1 .col-24,
#checklist-3 .col-24 {
    width: 20%;
    /* border: solid 2px black; */
}

.testone {
    /* background-color: red; */
}

.testone2 {
    /* background-color: yellow; */
}

.correct {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(68, 158, 157, 1) 100%);
    box-shadow: 0 0 10px 0 rgba(0, 91, 113, 0.8);
}

.mb-6 {
    margin-bottom: 20px !important;
}

.col-35 {
    flex: 0 0 auto;
    width: 32.7%;
}

.col-65 {
    flex: 0 0 auto;
    width: 53%;
}

.visibility-hidden {
    visibility: hidden;
}

.info-img {
    height: 25px;
    width: auto;
}

.info-btn {
    cursor: pointer;
}

.five-btns-box img.info-btn {
    cursor: pointer;
    margin-top: 10px;
}

.border-radius {
    border-radius: 15px;
}

.btn-popup {
    position: absolute;
    width: 45px;
    height: 45px;
}

.close-popup {
    position: absolute;
    width: 45px;
    height: 45px;
    z-index: 2;
    /* border: 2px solid black; */
}

#evaluate-control-3 .select-btn,
#evaluate-severity-3 .select-btn,
#checklist-3 .select-btn {
    cursor: auto;
}

.select-col.selected .select-btn,
.select-btn-crswnp.selected .select-btn {
    background: #005B71;
    box-shadow: 0 0 10px 0 rgba(0, 91, 113, 0.8);
}

.popup-section {
    position: absolute;
    top: 2px;
    left: 0;
    width: 1920px;
    height: 1080px;
    z-index: 1;
    background-size: cover;
}

/*
#####################################
#################HOME ##############
#####################################
*/
#home-section {
    background-image: url("../img/home-section.jpg");
}

#home-section .home-btn {
    visibility: hidden;
}

.btn-hp-start {
    position: absolute;
    top: 744px;
    right: 0;
    cursor: pointer;
    overflow: visible;
    line-height: 0;
}

.btn-hp-start>img {
    width: 540px;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* Bottone Pulsante */
.btn-hp-start::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0099a6;
    z-index: 0;
    opacity: 0;

    transform-origin: top right;
    transform: scale(1);

    /* taglia qualsiasi parte che salirebbe sopra il bordo top */
    clip-path: inset(0 0 0 0 round 0);

    animation: btn-pulse 1s ease-out infinite;
}

/* Keyframes */
@keyframes btn-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    70% {
        transform: scale(1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

#home-label {
    max-width: 80%;
    height: auto;
    margin-bottom: 99px;
}

.pt-6 {
    padding-top: 70px;
}

/*
#####################################
################# MENU ##############
#####################################
*/
.btn-menu {
    background-color: rgba(0, 152, 165, 0.50);
    transition: all .2s ease-in-out;
    height: 119px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    cursor: default;
    border-bottom: 5px;
}

.btn-menu span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-image: url(../img/locker-close.png);
    background-size: 25px auto;
    background-position: 5px calc(50% - 2px);
    padding-top: 12px;
    padding-left: 45px;
    font-size: 16px;
    line-height: 1.1;
    height: 100%;
    font-style: italic;
}

.btn-menu.completed {
    background-color: #0098A5;
    cursor: pointer;
}

.btn-menu.completed span {
    background-image: url("../img/locker-open.png");
    color: #FFF;
    font-weight: bold;
    font-style: normal;
}

.btn-menu.active {
    background-color: #005B71;
}

.btn-menu.active span {
    background-image: url("../img/locker-open.png");
    color: #FFF;
    font-weight: bold;
    font-style: normal;
}

.main-menu {
    margin-left: 507px;
    padding-right: 250px;
    flex: 0 0 auto;
    width: 71.2%;
}


/*
#####################################
#################DIAGNOSIS ##############
#####################################
*/

#diagnosis-1 {
    background-image: url("../img/slides/diagnosis-1.jpg");
}

#diagnosis-2 {
    background-image: url("../img/slides/diagnosis-2.jpg");
}

#popup-diagnosis-2-1,
#popup-checklist-3-4-2 {
    background-image: url("../img/popup/popup-diagnosis-2_1.png");
}

#popup-diagnosis-2-2 {
    background-image: url("../img/popup/popup-diagnosis-2_2.png");
}

.btn-popup[popupid="popup-diagnosis-2-1"],
.btn-popup[popupid="popup-checklist-3-4-2"] {
    top: 398px;
    left: 1442px;
    width: 80px;
}

.btn-popup[popupid="popup-diagnosis-2-2"] {
    top: 442px;
    left: 1442px;
    width: 80px;
}

.close-popup[popupid="popup-diagnosis-2-1"],
.close-popup[popupid="popup-diagnosis-2-2"],
.close-popup[popupid="popup-checklist-3-4-2"] {
    top: 215px;
    right: 105px;
}

.popup-video {
    position: absolute;
    z-index: 1;
}

.div-video {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 720px;
    height: 405px;
    z-index: 2;
    background: transparent;
    left: 830px;
}

#div-video-diagnosis-2-1,
#div-video-checklist-3-4-2 {
    top: 405px;
}

#div-video-diagnosis-2-2 {
    top: 360px;
}

.play-btn {
    cursor: pointer;
    position: relative;
    z-index: 2;
    width: 130px;
    height: auto;
}

#video-diagnosis-2-1,
#video-checklist-3-4-2 {
    top: 405px;
    left: 830px;
}

#video-diagnosis-2-2 {
    top: 360px;
    left: 830px;
}

.interactive-box {
    top: 295px;
    left: 550px;
    position: relative;
    width: 1305px;
}

.interactive-box.five-btns-box {
    top: 260px;
    left: 526px;
    position: relative;
    width: 1353px;
}

.interactive-item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    color: white;
    margin: 0 5px;
}

#evaluate-control-1 .interactive-box,
.interactive-box.answers {
    top: 255px;
}

.interactive-box>.row {
    justify-content: space-between;
}

.interactive-box>.row.five-elems {
    justify-content: space-evenly;
    /* background-color: purple; */
}

.interactive-box>.row.vertical {
    gap: 50px;
    justify-content: center;
}

.interactive-box p {
    font-weight: 600;
}

.shadow-box {
    box-shadow: 0px 9px 19px rgba(0, 0, 0, 0.22);
    padding: 60px 80px;
    display: table;
    margin-left: auto;
    margin-right: auto;
    transition: all .2s ease-in-out;
}

.select-btn-crswnp.selected .shadow-box {
    box-shadow: 0px 11px 22px rgba(0, 0, 0, 0.6);
}

/*
#####################################
#################EVALUATE CONTROL ##############
#####################################
*/
#evaluate-control-1 {
    background-image: url("../img/slides/evaluate-control-1.jpg");
}

#evaluate-control-2 {
    background-image: url("../img/slides/evaluate-control-2.jpg");
}

#evaluate-control-3 {
    background-image: url("../img/slides/evaluate-control-3.jpg");
}

.treatment-img {
    max-height: 125px;
    width: auto;
}

#popup-evaluate-control-3-1 {
    background-image: url("../img/popup/popup-evaluate-control-3_1.png");
}

#popup-evaluate-control-3-2 {
    background-image: url("../img/popup/popup-evaluate-control-3_2.png");
}

#popup-evaluate-control-3-3 {
    background-image: url("../img/popup/popup-evaluate-control-3_3.png");
}

.close-popup[popupid="popup-evaluate-control-3-1"] {
    top: 342px;
    right: 316px;
}

.close-popup[popupid="popup-evaluate-control-3-2"] {
    top: 345px;
    right: 315px;
}

.close-popup[popupid="popup-evaluate-control-3-3"] {
    top: 345px;
    right: 313px;
}

/*
#####################################
#################EVALUATE SEVERITY ##############
#####################################
*/
#evaluate-severity-1 {
    background-image: url("../img/slides/evaluate-severity-1.jpg");
}

#evaluate-severity-2 {
    background-image: url("../img/slides/evaluate-severity-2.jpg");
}

#evaluate-severity-3 {
    background-image: url("../img/slides/evaluate-severity-3.jpg");
}

#popup-evaluate-severity-3-1 {
    background-image: url("../img/popup/popup-evaluate-severity-3_1.png");
}

#popup-evaluate-severity-3-2 {
    background-image: url("../img/popup/popup-evaluate-severity-3_2.png");
}

#popup-evaluate-severity-3-3 {
    background-image: url("../img/popup/popup-evaluate-severity-3_3.png");
}

#popup-evaluate-severity-3-4 {
    background-image: url("../img/popup/popup-evaluate-severity-3_4.png");
}

.btn-popup[popupid="popup-evaluate-severity-3-1"] {
    top: 368px;
    left: 586px;
    width: 1200px;
}

.close-popup[popupid="popup-evaluate-severity-3-1"] {
    top: 345px;
    right: 313px;
}

.close-popup[popupid="popup-evaluate-severity-3-2"] {
    top: 217px;
    right: 107px;
}

.close-popup[popupid="popup-evaluate-severity-3-3"] {
    top: 216px;
    right: 107px;
}

.close-popup[popupid="popup-evaluate-severity-3-4"] {
    top: 217px;
    right: 106px;
}


/*
#####################################
#################CHECKLIST ##############
#####################################
*/
#checklist-1 {
    background-image: url("../img/slides/checklist-1.png");
}

#checklist-2 {
    background-image: url("../img/slides/checklist-2.png");
}

#checklist-3 {
    background-image: url("../img/slides/checklist-3.png");
}

#popup-checklist-3-1 {
    background-image: url("../img/popup/popup-checklist-3_1.png");
}

#popup-checklist-3-2 {
    background-image: url("../img/popup/popup-checklist-3_2.png");
}

#popup-checklist-3-3 {
    background-image: url("../img/popup/popup-checklist-3_3.png");
}

#popup-checklist-3-4 {
    background-image: url("../img/popup/popup-checklist-3_4.png");
}

#popup-checklist-3-4-2 {
    background-image: url("../img/popup/popup-diagnosis-2_1.png");
}

#popup-checklist-3-5 {
    background-image: url("../img/popup/popup-checklist-3_5.png");
}

#popup-checklist-3-6 {
    background-image: url("../img/popup/popup-checklist-3_6.png");
}

#popup-checklist-3-7 {
    background-image: url("../img/popup/popup-checklist-3_7.png");
}

#popup-checklist-3-8 {
    background-image: url("../img/popup/popup-checklist-3_8.png");
}

#popup-checklist-3-9 {
    background-image: url("../img/popup/popup-checklist-3_9.png");
}

#popup-checklist-3-10 {
    background-image: url("../img/popup/popup-checklist-3_10.png");
}

#popup-checklist-3-11 {
    background-image: url("../img/popup/popup-checklist-3_11.png");
}

#checklist-3 .btn-popup {
    width: 35px;
    height: 35px;
}

.btn-popup[popupid="popup-checklist-3-1"] {
    width: 300px !important;
    top: 336px;
    left: 1047px;
}

.btn-popup[popupid="popup-checklist-3-4-2"] {
    top: 533px;
    left: 869px;
    width: 158px;
}

.btn-popup[popupid="popup-checklist-3-7"] {
    width: 372px !important;
    top: 645px;
    left: 1012px;
}

.close-popup {
    /* outline: 1px solid blue; */
}

.close-popup[popupid="popup-checklist-3-1"] {
    top: 344px;
    right: 314px;
}

.close-popup[popupid="popup-checklist-3-2"] {
    top: 188px;
    right: 100px;
}

.close-popup[popupid="popup-checklist-3-3"] {
    top: 344px;
    right: 314px;
}

.close-popup[popupid="popup-checklist-3-4"] {
    top: 344px;
    right: 312px;
}

.close-popup[popupid="popup-checklist-3-5"] {
    top: 344px;
    right: 313px;
}

.close-popup[popupid="popup-checklist-3-6"] {
    top: 344px;
    right: 313px;
}

.close-popup[popupid="popup-checklist-3-7"] {
    top: 344px;
    right: 314px;
}

.close-popup[popupid="popup-checklist-3-8"] {
    top: 209px;
    right: 99px;
}

.close-popup[popupid="popup-checklist-3-9"] {
    top: 346px;
    right: 314px;
}

.close-popup[popupid="popup-checklist-3-10"] {
    top: 209px;
    right: 99px;
}

.close-popup[popupid="popup-checklist-3-11"] {
    top: 345px;
    right: 313px;
}

#checklist-1 .interactive-box p {
    font-weight: normal;
    font-size: 17px;
}

#checklist-3 .interactive-box p {
    font-weight: normal;
    font-size: 16px;
}

#checklist-1 .interactive-box p>span,
#checklist-3 .interactive-box p>span {
    font-weight: bold;
    color: #005B71;
}

/* TODO: check */
/* 
#checklist-1 .select-btn,
#checklist-3 .select-btn {
    font-size: 30px;
    padding: 10px;
} */

.second-row {
    margin-top: 9rem;
}

#checklist-1 .second-row,
#checklist-3 .second-row {
    margin-top: 5.8em;
}

/*
#####################################
#################SUMMARY ##############
#####################################
*/
#summary-1 {
    background-image: url("../img/slides/summary-1.png");
}

#summary-2 {
    background-image: url("../img/slides/summary-2.png");
}

.return-home {
    position: absolute;
    right: 55px;
    bottom: 30px;
    background-image: url("../img/start-over-btn.png");
    background-size: contain;
    background-position: right center;
    padding-right: 110px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
}

.return-home.small {
    line-height: 56px;
}

/*
#####################################
#################FOOTER ##############
#####################################
*/

.footer-btns {
    /* background-color: yellow; */
    width: 19.1%;
    position: fixed;
    left: 69px;
    bottom: 35px;
    z-index: 1;
    min-height: fit;
}

.home-btn,
/* .resources-btn, */
.back-btn {
    background-position: top center;
    background-size: contain;
    /* padding-top: 78px; */
    height: 38px;
    text-align: center;
    color: #FFF;
    display: block;
}

.home-btn img,
.back-btn img {
    height: 100%;
}

.home-btn p {
    font-size: 20px;
    margin-left: 10px;
}

.home-button-popup {
    /* background-color: #00576C; */
    vertical-align: middle;
    align-items: center;
    padding: 20px;
    width: 100%;
    margin: auto;
}

/*
#####################################
#################RESOURCE ##############
#####################################
*/
#resources {
    position: absolute;
    top: 160px;
    left: 453px;
    z-index: 1;
    width: 1445px;
    height: 920px;
    background: white;
}

#resources>img {
    position: relative;
    top: 70px;
    left: 45px;
}

#resources-close-btn {
    position: absolute;
    top: 99px;
    right: 78px;
    width: 45px;
    height: 45px;
}


/*
#####################################
#################ALERT ##############
#####################################
*/
.outer-alert {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    z-index: 99;
    max-width: 1920px;
}

.outer-alert.criteria {
    background-color: transparent;
    left: 300px;
    top: 150px;
}

.outer-alert.diagnosis {
    background-color: transparent;
    left: 0;
    bottom: 0;
}

.inner-alert {
    position: relative;
    width: 90%;
    max-width: 1100px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    background-color: #FFF;
    border: 15px solid #005b71;
    padding: 40px 100px 40px 40px;
}

video::-webkit-media-controls-volume-slider {
    display: none;
}

video::-webkit-media-controls-mute-button {
    display: none;
}

video::-webkit-media-controls-fullscreen-button {
    display: none;
}