#chat-right-items {
    width: 150px;
    height: calc(100% - 5px);
    right: 0;
    top: 0;
    margin: auto
}

#buffers-container {
    color: black;
    display: block;
    height: 60%
}

.buffer-holder {
    height: 100%;
}


#chat-right-items, #chat-page-messages {
    background-color: white;
}

.buffer-name {
    cursor: pointer;
    max-width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    height: 20px;
    line-height: 25px;
}


.chat-message-remove {
    line-height: 20px;
    width: 15px;
    height: 20px;
    cursor: pointer;
}


#chat-page-messages {
    width: calc(100% - 125px);
    height: calc(100% - 5px);
    padding: 15px;
    margin: auto;
    overflow-y: scroll
}


#active-buffer-info-container {
    display: inline-block;
    width: 60%;
}

#chat-top-header {
    display: flex;
}

#active-buffer-name {
    display: block;
    font-weight: bold;
    margin: 0 0 0 5px;
}

#active-buffer-title {
    display: inline-block;
}

#buffer-join-container {
    display: inline-flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1;
}

.active-buffer {
    font-weight: bold;
}


.buffer-highlighter {
    color: #c07400;
}

.buffer-item {
    display: block;
    vertical-align: middle;
}

.buffer-item > .fa {
    margin-right: 5px;
    font-size: 15px !important;
}


.buffer-notis-indicator {
    cursor: pointer;
    width: 15px;
    margin-right: 3px;
}

.buffer-close {
    float: right;
    margin-right: 2px;
    color: #881114;
    cursor: pointer;
    vertical-align: super;

}

.buffer-close:hover {
    font-weight: bold;
    color: #d64549;
}

.chat-buffer-mod:before {
    content: '@';
}

.reply-stuff {
    width: 80px;
    display: inline-flex;
}

.to-be-replied {
    border-left: 3px black solid;
    filter: brightness(175%);
}

.to-be-replied > .reply-stuff {
    margin-right: 5px;

}


.message-on-highlight {
    font-weight: bold;
    filter: brightness(150%);
}

#chat-page-input {
    height: 60px;
}

#chat-input-buttons {
    width: 200px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
}

#chat-input-buttons > * {
    margin-bottom: 3px;
}


#attachments > * {
    width: 200px;
}

@media only screen and (max-width: 1000px) {
    #chat-page-input {
        height: 100px;
    }
    #chat-input-buttons {
        height: 85px;
    }
}


.message-input-container {
    padding-left: 3px;
    margin: 0 0 3px 2px;
    border-left: 1px solid #30753e;
    width: calc(100% - 300px);
}

.message-on-preview {
    background-color: #2a2b2d !important;
    color: white !important;
}

.reply-to-me {
    border-left: 2px red solid !important;
}

.reply-count {
    padding-left: 5px;
    display: inline-block;
}

.reply-to-msg {
    cursor: pointer;
    align-self: flex-start;
    visibility: hidden;
}

.reply-backlink {
    cursor: pointer;
    margin-right: 10px;
}


.chat-time-stamp {
    flex-basis: 60px;
}

.chat-user {
    flex-basis: 135px;
    width: 135px;
    display: flex;
    justify-content: flex-end;
    height: 20px;
}

#chat-msg-preview {
    max-width: 40vw;
    border: 2px solid black;
}



#chat-msg-preview > .chat-message-container > .message-input-container {
    width: 70%
}

.chat-message-container {
    display: flex;
    border-left: 2px transparent solid;
    line-break: strict;
}


.chat-message-container:hover .reply-to-msg,
.to-be-replied .reply-to-msg
{
    display: inline-block;
    visibility: visible;
}

.chat-message-container:hover {
    filter: brightness(75%);
}


.chat-message {
    display: inline-block;
    margin-left: 5px;
    padding-left: 5px;
    word-wrap: break-word;
    width: 100%;
    white-space: pre-wrap;
}

.chat-messages-container > p {
    margin: 0;
    line-height: 100%;
}



.to-be-replied {
    filter: brightness(175%) !important;
    font-size: 115%;
    top: 5px;
}

#chat-file-input {
    max-width: 250px;
}

.chat-input-group {
    display: inline-flex;
    max-width: 100%;
}

.chat-input-group > input {
    flex: 1;
    background-color: #c6bdb5;
    color: black;
}

.chat-input-group > input:hover:not([disabled~='disabled']) {
    background-color: #89817a;
}

.chat-input-group > input[disabled='disabled'] {
    color: #666060 !important;
}
.msg-attachment {
    display: flex;
    margin-left: 15px;
}

.msg-attachment > audio {
    min-height: 30px
}

.msg-attachment > a > img {
    max-height: 85px;
    max-width: 250px;
    margin-bottom: 2px;
    margin-top: 2px;
}


.attachment-info {
    font-size: smaller;
    align-self: flex-end;
    padding: 3px;
}

@media only screen and (max-width: 1000px) {
    .message-input-container > .chat-message {
        font-size: 30px;
    }

    .chat-user-item {
        font-size: 20px;
    }

    .reply-count {
        display: none;
    }

    .buffer-item {
        font-size: 25px;
    }

    .chat-message-remove {
        font-size: 20px !important;
    }

    #chat-right-items {
        width: 23vw;
    }

    .buffer-name {
        max-width: 70%;
    }

    #chat-users-container > .chat-user-link {
        font-size: 25px;
    }
}