/*body {
    background-color: #abd9e9;
}*/


#container {
    /*background: #00618b;*/
    margin: 0 auto;
    font-size: 0;
    border-radius: 0;
    height: 80vh;
    overflow: auto;
}


aside {
    width: 20%;
    background-color: white; /*#3c414a;*/
    display: inline-block;
    vertical-align: top;
    height: 80vh;
}


main {
    width: 80%;
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    height: 80vh;
}


aside header {
    padding: 15px;
}

aside ul {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
}

aside li {
    line-height: 20px;    
}

    aside li:hover, aside li.active {
        /*background-color: #22262e;*/
        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    }

    aside li.standout {
        font-weight: bolder;
    }

h2, h3 {
    margin: 0;
}


aside li img {
    border-radius: 50%;
}


aside li div {
    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
    margin-bottom: 5px;
}


aside li, aside li span {
    font-size: 14px;
    color: black;
    word-break: break-all;
}

[data-letters]:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: #735f87;
    vertical-align: middle;
    margin-right: 1em;
    color: white;
}


main header {
    padding: 5px;
    background-color: transparent;
}

    main header > * {
        display: inline-block;
        vertical-align: top;
    }


    main header img:first-child {
        border-radius: 50%;
    }


    main header img:last-child {
        width: 24px;
        margin-top: 8px;
    }


    main header div {
        margin-left: 10px;
        margin-right: 145px;
    }


    main header h2 {
        margin-bottom: 5px;
    }


    main header h3 {
        color: #7e818a;
    }


#chat {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: scroll;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    height: 65.6vh;
}


    #chat li {
        padding: 5px 30px;
    }


    #chat h2, #chat h3 {
        display: inline-block;
    }


    #chat h3 {
        color: #bbb;
    }


    #chat .entete {
        margin-bottom: 5px;
    }


    #chat .message {
        padding: 10px 20px;
        color: #8b8b8b;
        display: inline-block;
        text-align: left;
        border-radius: 3px;
        position: relative;
        max-width: 90%;
        height: auto;
    }

    #chat .me {
        text-align: right;
    }

    #chat .you .message {        
        background-color: white;
    }

        #chat .you .message::after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: -5px;
            right: auto;
            top: 6px;
            bottom: auto;
            border-style: solid;
            border-width: 9px 7px 9px 0;
            border-color: transparent white;
        }

    #chat .me .message {
        color: white;
        background-color: #099a8c;
    }

        #chat .me .message::before {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
            left: auto;
            right: -5px;
            top: 6px;
            bottom: auto;
            border-style: solid;
            border-color: transparent #099a8c;
            border-width: 9px 0 9px 7px;
        }

.chatlink {
    position: absolute;
    bottom: -2px;
    right: -8px;
}


main footer {
    padding: 20px 30px 10px 20px;
    background-color: white;
}


    main footer textarea {
        resize: none;
        border: 1px solid #bbb;
        display: block;
        width: 100%;
        height: 80px;
        background: #eff3f7;
        border-radius: 0;
        padding: 20px;
        font-size: 13px;
        margin-bottom: 13px;
    }


        main footer textarea::placeholder {
            color: black;
        }

    main footer img {
        height: 30px;
        cursor: pointer;
    }


    main footer a {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
        color: #6fbced;
        vertical-align: top;
        margin-top: 5px;
        display: inline-block;
    }



@media (min-width: 980px) {
    #chat {
        height: 63.6vh;
    }
}

@media only screen and (min-width: 1824px) {
    #chat {
        height: 65.6vh;
    }
}

    @media only screen and (max-width: 767px) {
        aside header {
            padding: 20px 8px;
        }

        #chat {
            height: 61.2vh;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        #chat {
            height: 66vh;
        }
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
        #chat {
            height: 64.35vh;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        #chat {
            height: 39vh;
        }
    }


    @media (min-width: 1024px) and (max-width: 1366px) {
        /*#container, main {
        height: 670px;
    }


    aside ul {
        height: 595px;
    }


    #chat {
        height: 527px;
    }*/
    }