/** {
    box-sizing: border-box;
}

body {
    background: #e9ebee;
    font-family: "Roboto", sans-serif;
}

h1,
h3,
p,
hr {
    margin: 0;
}*/

/* Main Contacts */
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

.chat_box {
    background: #fff;
    width: 27rem;
    position: fixed;
    bottom: 0;
    right: 100px;
    border-radius: 10px 10px 0 0;
    border: #ccc 1px solid;
}

.chat_header {
    padding: 0.5rem;
    cursor: pointer;
    background-color: #29b5bd;
    border-radius: 10px 10px 0 0;
    border: #ccc 1px solid;
    color: #fff;
}

.chat_box hr {
    margin: 0px;
}

.chat_heading, .message_heading {
    font-size: 16px;
    /* line-height: 30px; */
    margin: 7px 20px 5px 20px;
}

    .chat_heading::after {
        content: '\f086';
        font-family: FontAwesome;
        font-size: 21px;
        position: absolute;
        top: 12px;
        left: 31px;
        color: #ffffff;
    }

.chat_content {
    height: 40rem;
    padding: 1rem;
    overflow: auto;
}

    .chat_content::-webkit-scrollbar-track {
        padding: 2px 0;
        background-color: #bebebe;
    }

    .chat_content::-webkit-scrollbar {
        width: 10px;
    }

    .chat_content::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #662d91;
    }

    .chat_content .user {
        display: grid;
        grid-template-columns: 14% 76% 10%;
        align-items: center;
        cursor: pointer;
        margin-bottom: 15px;
        border-bottom: 0.5px solid rgba(119, 119, 119, 0.63);
        padding-bottom: 15px;
    }

        .chat_content .user:last-child {
            border-bottom: 0;
        }

.unreadCount {
    padding: 5px 5px;
}

.user i {
    font-size: 16px;
    border: 1px solid #777777;
    padding: 8px;
    margin-left: 8px;
    border-radius: 50%;
    text-align: center;
    height: 36px;
    width: 36px;
}

.user_icon {
    width: 1.5rem;
    border-radius: 50%;
}

.username {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
}

    .username span {
        padding-top: 5px;
        display: block;
        font-size: 12px;
    }

.fa-circle {
    font-size: 0.5rem;
    color: #52de97;
    justify-self: end;
}

/* Message box */

.message_box {
    background: #44b4e4;
    width: 15rem;
    position: fixed;
    bottom: 0;
    right: 22rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

.message_header {
    display: grid;
    grid-template-columns: 15% 75% 10%;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
}

.messages {
    height: 20rem;
    overflow: auto;
}

.user_icon_small {
    width: 1rem;
    border-radius: 50%;
}

.p1 {
    display: grid;
    width: 90%;
    margin: 1rem 1rem 1rem 0.5rem;
    grid-template-columns: 10% 90%;
    align-items: center;
}

    .p1 p {
        background: #e9ebee;
        padding: 5px 10px;
        border-radius: 1rem;
    }

.p2 {
    display: grid;
    justify-items: end;
    margin: 1rem 1rem 0rem 1rem;
}

    .p2 p {
        background: #1877f2;
        color: #fff;
        border-radius: 1rem;
        padding: 5px 10px;
        margin-bottom: 0.2rem;
    }

.input_box {
    display: grid;
    grid-template-columns: 90% 10%;
    align-items: center;
    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
    border-top: 1px solid #000;
}

.message_input {
    border: none;
    width: 95%;
    resize: none;
    outline: none;
}

.fa-location-arrow {
    font-size: 1.3rem;
    cursor: pointer;
}

.new_messages {
    margin-top: 0;
}