body {
    font-family: Tahoma;
    margin: 0;
}

.sfondo {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0.2vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    /*align-items: center;
    align-content: center;
    justify-content: center;*/
}


/*Registrazione.php*/

/*Titolo e sottotitolo*/
.titolotest {
    margin: 0px;
    /* font-family: Tahoma; */
    font-size: 5vw;
    height: 10vw;

    display: flex;
    /* background-color: white; */
    justify-content: center;
    align-items: center;
    /* -webkit-text-stroke-width: 3px; */
    /*-webkit-text-stroke-color: black;**/
}

.sottotitolotest {
    margin: 0.5vw;
    /* font-family: Tahoma; */
    font-size: 3vw;
    padding: 0px 3vw; /*MODIFICA I PIXEL*/

    display: flex;
    /* background-color: white; */
    /* justify-content: center; */
    /* align-items: center; */
}


/*Genere ed età*/
.containerinfo {
    display: flex;
    /* flex-direction: row; */
    justify-content: space-around;
    /* align-items: flex-start; */
    /* align-content: center; */
    gap: 0px 30px; /*MODIFICA I PIXEL*/
    /* flex-wrap: wrap; */
}

.genere {
    padding: 0px 2vw 0px 2vw; /*MODIFICA I PIXEL*/
    font-size: 2.2vw;
}

input[type="radio"] {
    width: 1.2vw;
    height: 1.2vw;
    /* border: 0.1vw solid black; */
}

.eta {
    height: 3vw;
    padding: 0px 2vw 0px 2vw; /*MODIFICA I PIXEL*/
    font-family: Tahoma;
    font-size: 2.2vw;
}

#tx{
    padding: 0px;
    width: 10vw;
    height: 2vw;
    font-size: 1.8vw;
    border: 0.1vw solid black;
}


/*Button inizio test*/
.iniziotest {
    display: flex;
    /* background-color: white; */

    /* flex-direction: row; */
    justify-content: center;
    /* align-items: stretch; */
    /* align-content: center; */
    padding: 4.3vw 0vw;
}

button#buttonInizioTest {
    height: 16vw;
    width: 21vw;
    /* padding: 0px; */
    font-family: Tahoma;
    font-size: 4vw;
    cursor: pointer;
    border-radius: 2vw;
}


/*Test.php*/

/*Progressbar e percentuale di completamento*/
.ProgressbarEpercentuale{
    /* margin-top: 0px; */
}

.percentualeProgressbar{
    margin-top: 0.25vw;
    font-size: 1.5vw;
}


/*Barra di avanzamento*/
.progressbar {
    height: 1.5vw;
    background-color: #647c81;
    border-radius: 2vw;
    border-style: solid;
}

.progressbar-fill {
    height: 100%;
    background-color: #DEEBEE;
    border-radius: 2vw;
}

.progressbar > span {
    margin: auto;
    color: black; /* Colore del testo */
    font-size: 1.8vw;
}


/*Avvio e pausa*/

.contenitoremusica {
    display: flex;
    /* background-color: white; */
    /* flex-direction: row; */
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    margin: 0.25vw 0px 0.25vw 0px; /*MODIFICA I PIXEL*/
}

#buttonPlayPause {
    width: 18vw;
    height: 12vw;
    border-width: 1px;
    border-style: solid;
    border-radius: 2vw;
    /* background-color:white; */
    cursor: pointer;
}

.play {
    /* height: 10.7vw; */
    /* width: 16.5vw; */
}

.pause {
    /* height: 10.7vw; */
    /* width: 16.5vw; */
}


/*Emozioni*/

.containeremo {
    display: flex;
    /* background-color: white; */
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    gap: 0px 30px;
    flex-wrap: wrap;
}

.containeremo > div {
    margin: 10px 0px 5px 0px; /*MODIFICA I PIXEL*/
    padding: 6px 0px 0px 0px; /*MODIFICA I PIXEL*/
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    width: 16.7vw;
    height: 19.7vw;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-radius: 2vw;
}

.emozione {
    font-size: 1.6vw;
}

div.emozione {
    width: 15vw;
    height: 15vw;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
}

div#felicita {
    background-image: url('../images/felicita.png');
}

div#felicita.selezionato_felicita {
    background-size: contain;
    background-color: white;
}

div#tristezza {
    background-image: url('../images/tristezza.png');
}

div#tristezza.selezionato_tristezza {
    background-size: contain;
    background-color: white;
}

div#paura {
    background-image: url('../images/paura.png');
}

div#paura.selezionato_paura {
    background-size: contain;
    background-color: white;
}

div#rabbia {
    background-image: url('../images/rabbia.png');
}

div#rabbia.selezionato_rabbia {
    background-size: contain;
    background-color: white;
}


/*Confidenza e successivo*/

.confidenzaEsuccessivo {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


/*1. Successivo*/

.contenitoresuccessivo {
    align-content: center;
    height: 12vw;
}

input#successivo {
    height: 4.5vw;
    width: 35vw;
    padding: 0px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2vw;
    font-size: 2vw;
    filter: grayscale(100%);
    cursor: not-allowed;
}


/*2. Confidenza*/

.preslider {
    /* margin-left: 9vw; */
    width: 35vw;
    cursor: pointer;
    /* background-color: white; */
    flex-direction: row;
    font-size: 1.6vw;
    height: 12vw;
}

.preslider > p {
    text-align: center;
}

.slidecontainer {
    align-content: center;
    /* width: 100%; */
    /* align-items: center; */
    height: 8vw;
}

.slider {
    -webkit-appearance: none;
    width: 97%;
    height: 1.5vw;
    border-radius: 5px;
    background-color: #DEEBEE;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    /*margin-left: 0.3vw;*/
    /* -webkit-appearance: none; */
    appearance: none;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background-color: #647c81;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
}

.pipeEconfidenza{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    width: 98%;
    /* margin-right: 0.5vw; */
    /* margin-left: 0.5vw; */
}

.confidenza{
    font-size: 1.8vw;
    display: block;
}

.pipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* align-content: center; */
    width: 3vw;
}


/*Fine.php*/

/*Fine test*/
.finetest{
    margin: 0px;
    font-family: Tahoma;
    font-size: 5vw;
    height: 10vw;
    padding-top: 16vw;

    display: flex;
    background-color:white;
    justify-content: center;
    align-items: center;
    -webkit-text-stroke-width: 0.3vw;
    -webkit-text-stroke-color: #647c81;
}
.gatto{
    display: flex;
    justify-content: center;
}

.gattoImm{
    border-width: 1px;
    border-style: solid;
    border-radius: 2vw;
    width: 20vw;
}


/*Pagina di errore*/
/*Fine test*/
.finetesterrore{
    margin: 0px;
    font-family: Tahoma;
    font-size: 5vw;
    height: 10vw;
    padding-top: 16vw;

    display: flex;
    background-color:white;
    justify-content: center;
    align-items: center;
    -webkit-text-stroke-width: 0.3vw;
    -webkit-text-stroke-color: #647c81;
}


/* Applica se la proporzione dello schermo è più larga di 16:9 (es. 21:9) */
@media screen and (min-aspect-ratio: 16/9) {
    /*Registrazione.php*/

    /*Titolo e sottotitolo*/
    .titolotest{
        font-size: 4vw;
        height: 8vw;
    }

    .sottotitolotest{
        font-size: 2vw;
        padding: 0px 5vw;
    }


    /*Button inizio test*/
    button#buttonInizioTest {
        height: 14vw;
        width: 18vw;
        font-size: 3vw;
    }


    /*Test.php*/
    /*Barra di avanzamento*/
    .progressbar {
        height: 1.2vw;    
    }

    .progressbar > span {
        /* font-size: 1.45vw; */
    }


    /*Avvio e pausa*/
    .contenitoremusica>div {
        /* width: 16vw; */
        height: 11.2vw;
    }

    #buttonPlayPause {
        width: 14.4vw;
        height: 9.6vw;
    }

    .play {
        /* height: 8.56vw; */
        /* width: 13.2vw; */
    }

    .pause {
        /* height: 8.56vw; */
        /* width: 13.2vw; */
    }


    /*Emozioni*/
    .containeremo>div {
        width: 13.4vw;
        height: 15.8vw;
    }

    div.emozione {
        width: 13vw;
        height: 13vw;
        background-size: 64%;
    }

    /*Confidenza e successivo*/
    .confidenzaEsuccessivo {
        height: 9.6vw;

    }


    /*1. Successivo*/
    .contenitoresuccessivo {
        margin: 0px 18vw 0px 0px;
        height: 9.6vw;
    }

    input#successivo {
        height: 3.6vw;
        width: 24vw;
        font-size: 1.6vw;
    }


    /*2. Confidenza*/
    .preslider {
        width: 28vw;
        font-size: 1.3vw;
        /* height: 9.6vw; */
        margin: 0vw 1vw 1vw 18vw;
    }

    .slidecontainer {
        height: 6.4vw;
    }  

    .slider {
        height: 1.2vw;
    }

    .slider::-webkit-slider-thumb {
        width: 2vw;
        height: 2vw;
    }

    .confidenza{
        font-size: 1.44vw;
    }

    .pipe {
        width: 2.4vw;
    }
    
    
    /*Fine.php*/
    
    /*Fine test*/
    .finetest{
        padding-top: 8vw;
    }


    /*Pagina di errore*/
    .finetesterrore{
        padding-top: 8vw;
    }
}


/*Orientamento verticale*/
@media (orientation: portrait) {
    /*Registrazione.php*/

    /*Titolo e sottotitolo*/
    .titolotest{
        font-size: 10vw;
        height: 15vw;
    }

    .sottotitolotest{
        font-size: 4vw;
        /*padding: 0px 3vw;*/ /*MODIFICA I PIXEL*/
    }


    /*Genere ed età*/
    .containerinfo {
        margin-top: 1vw;
        flex-direction: column;
        align-items: center;
        gap: 0px;
    }

    .genere {
        margin-top: 6vw;
        margin-bottom: 1vw;
        height: 6vw;
        padding: 1vw 4vw 0px 4vw; /*MODIFICA I PIXEL*/
        border-width: 1px;
        font-size: 3.5vw;
    }

    #rd {
        width: 3vw;
        height: 3vw;
    }

    .eta {
        height: 6vw;
        padding: 1vw 4vw 0px 4vw; /*MODIFICA I PIXEL*/
        border-width: 1px;
        font-size: 3.5vw;
    }

    #tx{
        padding-top: 0.5vw;
        margin-bottom: 0.5vw;
        width: 14vw;
        height: 4vw;
        font-size: 3vw;
    }


    /*Button inizio test*/
    button#buttonInizioTest {
        height: 26vw;
        width: 38vw;
        font-size: 6vw;
        border-width: 1px;
    }


    /*Test.php*/
    /*Progressbar e percentuale di completamento*/
    .progressbar {
        /* width: 100%; */
        height: 2vw;
        /* border-radius: 2vw; */
    }


    /*PROGRESSBARR*/
    .progressbar > span {
        margin: auto;
        /* color: black; */
        /* font-size: 3.5vw; */
    }

    .ProgressbarEpercentuale{
        margin-top: 1vw;
    }

    .percentualeProgressbar{
        font-size: 2.5vw;
    }


    /*Avvio pausa*/
    .contenitoremusica > div {
        height: 16vw;
    }

    #buttonPlayPause {
        width: 20vw;
        height: 14vw;
    }


    /*Emozioni*/
    .containeremo {
        flex-direction: column;
    }
 
    .containeremo > div {
        flex-direction: row;
        justify-content: space-between;
        width: 30%;
        height: auto;
        padding: 2vh;
    }

    .emozione {
        font-size: 3.5vw;
    }

    div#felicita {
        height: 10vw;
        width: 12vw;
    }

    div#tristezza {
        height: 10vw;
        width: 12vw;
    }

    div#paura {
        height: 10vw;
        width: 12vw;
    }

    div#rabbia {
        height: 10vw;
        width: 12vw;
    }

    /*Confidenza e successivo*/
    .confidenzaEsuccessivo{
        flex-direction: column;
        align-items: center;
        height: 33vw;
    }

    input#successivo {
        width: 50vw;
        height: 10vw;
        font-size: 3vw;
        display: flex;
    }

    .preslider {
        width: 50vw;
        font-size: 2.28vw;
        /* height: 20vw; */
    }

    .slidecontainer {
        height: 11.43vw;
    }

    .slider {
        height: 2.14vw;
        margin-left: 0.5vw;
        
    }

    .slider::-webkit-slider-thumb {
        width: 3.57vw;
        height: 3.57vw;
    }

    .confidenza {
        font-size: 2.57vw;
    }
    
    .pipe {
        width: 4.28vw;
    }


    /*Fine.php*/
    
    /*Fine test*/
    .finetest{
        font-size: 10vw;
        height: 15vw;
        padding-top: 20vw;
        -webkit-text-stroke-width: 0.5vw;
    }

    .gatto{
        margin-top: 10vw;
    }

    .gattoImm{
        border-width: 1px;
        border-radius: 3vw;
        width: 50vw;
    }


    /*Pagina di errore*/
    .finetesterrore{
        font-size: 8vw;
        height: 10vw;
        padding-top: 25vw;
        margin-left: 2vw;
        -webkit-text-stroke-width: 0.4vw;
    }

}