/* Tablet media WIDTH under: 768px. */
@media only screen and (min-width: 0px) and (max-width: 768px) {
    
    html{
        width: 100vw;
        height: 90vh;
    }

    #main-wrapper{
        margin-top: 1vh;
        /*max-height: 95vh;*/
        max-width: 100vw;
    }

    .loginInformation {
        max-height: 85px;
        padding-top: 15px;
        margin-bottom: 15px;
        overflow-y: hidden;
    }

    img.chatTitle {
        max-width: 95vw;
        max-height: 7vh;
        margin-bottom: 20px;
    }

    #utilisateur{
        /*max-height: 48px;*/

    }

    #message{
    /*height: 50vh;*/
    height: 45vh;
    }

    #myDiv{
        /*width: -webkit-fill-available;*/
        width:100vw;
        padding: 15px;
    }
    
    img.logo {
        max-width: 90%;
        max-height: 40px;
    }    

}


/* Tablet media HEIGHT under: 825x. */
@media only screen and (min-height: 0px) and (max-height: 825px) {
    
    p{
        margin: 0px;
    }

    #utilisateur{
        margin: 0px;
        height: auto;
    }

    img.chatTitle {
        /*display: none;*/
        /*max-width: 70vh;*/
    }

    .loginInformation{
        padding-top: 0px;
        margin-bottom: 5px;
    }

    #message{
        height: 48vh;
        padding: 5px, 0px;
    }

    #myDiv{
        width: 100%;
    }

    .buttonList img{
        height: 24px;
        width: 24px;
    }

}


/* Tablet media HEIGHT under: 700px. */
@media only screen and (min-height: 0px) and (max-height: 700px) {
    
    img#LoginPic {
        display: none;
        margin: 0px;
    }

    .loginInformation {
        display: none;
    }

    #utilisateur{
        min-height: 25px;
    }


    .message img{
        height: 20px;
        width: 20px;
    }


}



/* Tablet media HEIGHT under: 540px. */
@media only screen and (min-height: 0px) and (max-height: 540px) {

    img.chatTitle {
        display: none;
    }

    .utilisateur-avatar-img{
        width: 32px;
        height: 32px;
    }

    #message{
        min-height: 100px;
    }

    .imgBox{
        height: 46px;
    }
    
}


/* Tablet media HEIGHT under: 480px. */
@media only screen and (min-height: 0px) and (max-height: 480px) {

    .utilisateur .usr img{
        display: none;
    }

    .imgBox{
        height: 18px;
    }

    .imgBox span{
        display: none;
    }


}

@media only screen and (min-height: 0px) and (max-height: 440px) {

        #message{
        height: 37vh;
    }

}


/* Tablet media HEIGHT under: 330px. */
@media only screen and (min-height: 0px) and (max-height: 330px) {


    #message{
        height: 30vh;   
        min-height: 80px;
    }

}

/* Tablet media HEIGHT under: 290px. */
@media only screen and (min-height: 0px) and (max-height: 290px) {

    header.Header{
        display: none;
    }

    .buttonList{
        display: none;
    }

    img{
        display: none;
    }


}