/* *--------------------------------------------------------------------
STILE GENERICO */

/* * ROOT */
:root{
    /* ? COLORI */
    --bg-upper-part--bg-color:#009688;
    --bg-lower-part--bg-color: linear-gradient(to bottom,
    #dddbd1,
    #d2dbdc);
    --primary-color:black;
    --aside--bg-color:#8ad3f1;
    --small-text--color:grey;
    --main--bg-color:white;
    --personal-messages--bg-color:#d5f9ba;
    --account-info--bg-color:#f3eeea;
    --contact-hover--bg-color:#e9ebeb;
    --account-info-icon--color:rgb(182, 178, 178);


    /* ? DIMENSIONI */
    --bg-upper-part--height:15vh;
    --bg-lower-part--height:calc(100vh - var(--bg-upper-part--height));
    --main--width:80%;
    --main--height: 95vh;


    /* ? OTHER */
    --main--position:absolute;
    --translate-to-center:translate(-50%,-50%);
    --background--display:block;
}



/* * TAG HTML */
body{
    color: var(--primary-color);
    font-family: 'Lato';
    min-width: 680px;
    overflow: hidden;
}



/* * CLASSI */
.my-small-text{
    font-size: 0.8rem;
    color: var(--small-text--color);
}

.my-btn:focus,
.my-input:focus{
    outline: none;
    box-shadow: none;
}





/* *--------------------------------------------------------------------
STILE SPECIFICO */

/* * SEZIONE DELLO SFONDO */
#background{
    display: var(--background--display);
}

#background .my-upper-part{
    background-color: var(--bg-upper-part--bg-color);
    height: var(--bg-upper-part--height);
}

#background .my-lower-part{
    background: var(--bg-lower-part--bg-color);
    height: var(--bg-lower-part--height);
}



/* * MAIN */
main{
    transform: var(--translate-to-center);
    position: var(--main--position);
    top:50%;
    left: 50%;
    width: var(--main--width);
    height: var(--main--height);
    background-color: var(--main--bg-color);
}

main img{
    width: 48px;
    height: 48px;
}

main .my-account-info{
    background-color: var(--account-info--bg-color);
    cursor: pointer;
}

main .my-account-info .my-icon{
    font-size: 1.3rem;
    color: var(--account-info-icon--color);
}

main .my-account-info .my-icon:hover{
    color: var(--small-text--color);
}

main .my-hidden-options{
    background-color: var(--main--bg-color);
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

main .my-hidden-options .my-hidden-option:hover{
    background-color: var(--contact-hover--bg-color);
}

main .my-hidden-options.my-active{
    display: block;
}

/* ? ASIDE */
#contacts-container aside{
    background-color: var(--aside--bg-color);
}

#contacts-container aside .my-small-text{
    cursor: pointer;
}

#contacts-container aside .my-small-text:hover{
    font-weight: bold;
}

#contacts-container aside .my-icon{
    color: var(--aside--bg-color);
    background-color: var(--main--bg-color);
}


/* ? NAVBAR */
#contacts-container nav form button:hover{
    background-color: var(--bg-upper-part--bg-color);
}


/* ? AREA CONTATTI */
#contacts li{
    cursor: pointer;
}

#contacts li:hover{
    background-color: var(--contact-hover--bg-color);
}

#contacts li:active{
    filter: brightness(80%);
}


/* ? AREA DELLA CHAT */
#chat-area .my-account-info .my-hidden-options.position-absolute{
    z-index: 3;
}

#chat-messages{
    background-image: url('../assets/img/mine.jpg');
}

#chat-messages .my-message-container{
    margin: 0.5rem;
}

#chat-messages .my-message-container .my-message{
    font-size: 0.8rem;
    width: 40%;
    cursor: text;
}

#chat-messages .my-message-container .my-message.my-personal-message{
    background-color: var(--personal-messages--bg-color);
    float: right;
}

#chat-messages .my-message-container .my-message.my-contact-message{
    background-color: var(--main--bg-color);
    float: left;
}

#chat-messages .my-message-container .my-message .my-icon{
    cursor: pointer;
}

#chat-messages .my-message-container .my-message .my-icon.my-angle-down{
    visibility: hidden;
}

#chat-messages .my-message-container .my-message:hover .my-icon.my-angle-down{
    visibility: visible;
}

#chat-messages .my-message-container .my-message .my-hidden-options.position-absolute{
    top: 75%;
    right: 0;
    z-index: 2;
}

#chat-messages .my-message-container .my-message .my-date{
    font-size: 0.6rem;
}

#chat-messages .my-message-container .my-message .my-date.position-absolute{
    z-index: 1;
    right: 5%;
    bottom: 0;
}

#input-send-message{
    background-color: var(--account-info--bg-color);
}

#input-send-message-area .my-icon{
    color: var(--small-text--color);
    font-size: 1.3rem;
    cursor: pointer;
}










/* ?--------------------------------------------------------------------
RESPONSIVENESS */

@media screen and (max-width:768px){
    :root{
        /* ? DIMENSIONI */
        --main--width: 100%;
        --main--height: 100vh;


        /* ? OTHER */
        --main--position:static;
        --translate-to-center:none;
        --background--display:none;
    }
}