.content-chat {
    display: flex;
    flex-direction: column;
}

    .content-chat .avatar {
        border-radius: 50%;
        width: 22px;
        margin-right: 5px;
        cursor: pointer;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .content-chat .conversation-container {
        padding: 5px;
        height: 250px;
        overflow-y: scroll;
        border: solid 1px #ddd;
        margin-top: 10px;
    }

        .content-chat .conversation-container .others {
            width: fit-content;
            max-width: 85%;
            clear: both;
            margin-top: 10px;
            font-family: Poppins400;
            font-size: 11px;
        }

            .content-chat .conversation-container .others .meta {
                font-size: 12px;
                color: gray;
            }

            .content-chat .conversation-container .others .message {
                padding: 10px;
                background-color: #ECEEF0;
                border-radius: 10px;
                border-top-left-radius: 0;
            }

                .content-chat .conversation-container .others .message a {
                    text-decoration: underline !important;
                }

                .content-chat .conversation-container .others .message p {
                    margin-bottom: 0 !important;
                }

        .content-chat .conversation-container .mine {
            float: right;
            width: fit-content;
            max-width: 85%;
            clear: both;
            margin-top: 10px;
            font-family: Poppins400;
            font-size: 11px;
        }

            .content-chat .conversation-container .mine .meta {
                font-size: 12px;
                color: gray;
                text-align: right;
            }

            .content-chat .conversation-container .mine .message {
                padding: 10px;
                background-color: #E6D2FC;
                border-radius: 10px;
                border-bottom-right-radius: 0;
            }

            .content-chat .conversation-container .mine .message a {
                text-decoration: underline !important;
            }

                .content-chat .conversation-container .mine .message p {
                    margin-bottom: 0 !important;
                }

        .content-chat .conversation-container .new {
            border: solid 1px red;
            border-radius: 50%;
            height: 12px;
            width: 12px;
            display: inline-block;
            background: red;
            position: relative;
            top: 2px;
            left: 3px;
        }

    .content-chat .controls {
        margin-top: 10px;
        border: solid 1px #ddd;
        padding: 5px;
    }

        .content-chat .controls .buttons button {
            margin-bottom: 5px;
        }

@media (max-width: 1199px) {
    .content-chat {
        display: block;
    }

        .content-chat .chat-container {
            padding-left: 0;
        }
}