.sidebar-chat {
    font-family: 'Source Sans Pro', sans-serif;
}

/* .chat-history {
    display: block;
    overflow: scroll;
    height: 380px;
    background: #f7f7f7;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 4px 4px 0 0;
    border: 1px solid #dfdfdf;
    border-bottom: 0;
} */

.chat-history {
    display: flex;
    overflow: scroll;
    height: 380px;
    background: #fafafa;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 4px 4px 0 0;
    border: 1px solid #dfdfdf;
    border-bottom: 0;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    padding-bottom: 5px;
}

.sidebar-chat-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.chat-field-container {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
}

#sidebar-chat textarea {
    width: 100%;
    height: 4rem;
    overflow: auto;
}

.chat-quoted-text {
    display: block;
    padding: 10px;
    background: #f3f3f3;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    position: relative;
    display: none;
}

/* .chat-quoted-text::after {
    position: absolute;
    top: -7px;
    right: -7px;
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z' fill='rgba(231,76,60,1)'/%3E%3C/svg%3E");
    background-size: contain;
    content: '';
    background-repeat: no-repeat;
} */

.chat-clear-quote {
    position: absolute;
    top: -7px;
    right: -7px;
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z' fill='rgba(231,76,60,1)'/%3E%3C/svg%3E");
    background-size: contain;
    content: '';
    background-repeat: no-repeat;
}

.chat-clear-quote:hover {
    cursor: pointer;
}

span.chat-quoted-author {
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 5px;
}


#sidebar-chat button {
        display: block;
        padding: 5px 10px;
        border-radius: 4px;
        background: #0ec55d;
        color: #fff;
        font-weight: 600;
        font-family: 'Saira Semi Condensed', sans-serif;
        margin-top: 15px;
        cursor: pointer;
}

#sidebar-chat-submit:hover {
    background: #069a47;
}


/* CHAT ITEMS ------------------------------------------- */

.chat-item {
    background: #e7e7e7;
    border-radius: 6px;
    margin: 10px;
    padding: 10px 10px 5px 10px;
    margin-right: 30px;
}

.chat-author {
    font-weight: 600;
    flex-grow: 1;
}

.chat-item--content {
    margin: 10px 0;
}

.chat-item--timestamp {
    font-size: 0.7rem;
    color: #686868;
}

.chat-author--logo {
    width: 20px;
    height: 20px;
    background: #000;
    margin-right: 8px;
    border-radius: 4px;
}

.chat-item--meta {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.chat-reply, .chat-like {
    height: 20px;
    width: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 5px;
}

.chat-reply {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0H24V24H0z'/%3E%3Cpath d='M11 20L1 12l10-8v5c5.523 0 10 4.477 10 10 0 .273-.01.543-.032.81-1.463-2.774-4.33-4.691-7.655-4.805L13 15h-2v5zm-2-7h4.034l.347.007c1.285.043 2.524.31 3.676.766C15.59 12.075 13.42 11 11 11H9V8.161L4.202 12 9 15.839V13z'/%3E%3C/svg%3E");
}

.chat-like {
    /* display: none; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M14.6 8H21a2 2 0 0 1 2 2v2.104a2 2 0 0 1-.15.762l-3.095 7.515a1 1 0 0 1-.925.619H2a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h3.482a1 1 0 0 0 .817-.423L11.752.85a.5.5 0 0 1 .632-.159l1.814.907a2.5 2.5 0 0 1 1.305 2.853L14.6 8zM7 10.588V19h11.16L21 12.104V10h-6.4a2 2 0 0 1-1.938-2.493l.903-3.548a.5.5 0 0 0-.261-.571l-.661-.33-4.71 6.672c-.25.354-.57.644-.933.858zM5 11H3v8h2v-8z'/%3E%3C/svg%3E");
}

.chat-reply:hover, .chat-reply:focus, .chat-like:focus, .chat-like:hover {
    cursor: pointer;
    border-bottom: 2px solid #000;
}

.chat-item--quote {
    background: #e0e0e0;
    padding: 10px;
    /* border: 1px solid #9b9b9b; */
    margin-top: 10px;
    border-radius: 4px;
    position: relative;
    /* display: none; */
}

.current-user .chat-item--quote {
    background: #61dafa;
}


div.chat-item--quote-author {
    width: 100%;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.chat-item--quote::after {
    position: absolute;
    top: 7px;
    right: 6px;
    display: block;
    overflow: hidden;
    height: 20px;
    width: 20px;
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0H24V24H0z'/%3E%3Cpath d='M21 3c.552 0 1 .448 1 1v14c0 .552-.448 1-1 1H6.455L2 22.5V4c0-.552.448-1 1-1h18zM10.962 8.1l-.447-.688C8.728 8.187 7.5 9.755 7.5 11.505c0 .995.277 1.609.792 2.156.324.344.837.589 1.374.589.966 0 1.75-.784 1.75-1.75 0-.92-.711-1.661-1.614-1.745-.16-.015-.324-.012-.479.01v-.092c.006-.422.092-1.633 1.454-2.466l.185-.107-.447-.688zm4.553-.688c-1.787.775-3.015 2.343-3.015 4.093 0 .995.277 1.609.792 2.156.324.344.837.589 1.374.589.966 0 1.75-.784 1.75-1.75 0-.92-.711-1.661-1.614-1.745-.16-.015-.324-.012-.479.01 0-.313-.029-1.762 1.639-2.665z' fill='rgba(30,30,30,1)'/%3E%3C/svg%3E");
}

.chat-item.current-user {
    background: #a7d6f1;
    margin-left: 30px;
    margin-right: 10px;
}

.chat-item--footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.chat-item--likes {
    font-size: 12px;
    font-weight: 600;
}

#online-users span {
    margin-top: 10px;
    display: inline-block;
    margin-right: 10px;
}

.chat-author--logo.freeza, .chat-item--liked-by .freeza {
    background: url('https://media.graphcms.com/qeZh0xVOQjSnCTdH3910');
    background-size: contain;
}

.chat-author--logo.bunter, .chat-item--liked-by .bunter {
    background: url('https://media.graphcms.com/QZQfdYBSTh2M0UQgGDyI');
    background-size: contain;
}

.chat-author--logo.boothy, .chat-item--liked-by .boothy {
    background: url('https://media.graphcms.com/qwOr8EChQtSpEGIvDIVq');
    background-size: contain;
}

.chat-author--logo.keirs, .chat-item--liked-by .keirs {
    background: url('https://media.graphcms.com/W153JoEJS4OLEQfvxo8e');
    background-size: contain;
}

.chat-author--logo.densley, .chat-item--liked-by .densley {
    background: url('https://media.graphcms.com/WJhBf46Tx2As9A3Mig5w');
    background-size: contain;
}

.chat-author--logo.draga, .chat-item--liked-by .draga {
    background: url('https://media.graphcms.com/EPyx2IFtQfeBqm2ZLQtv');
    background-size: contain;
}

/* ---------- CHAT STYLE v2 --- */

.chat-history {
    background: #f3f4f5;
}

.chat-item.current-user {
    background: #b4efff;
    border: 1px solid #70a2ca;
}

.chat-item {
    background: #fff;
    border: 1px solid #ccc;
    margin: 5px 30px 5px 10px;
}


/* ---------- LIKES ----- */

.chat-item--liked-by span {
    background: #61dafa;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    width: 12px;
    font-size: 10px;
    align-items: center;
    border-radius: 10px;
    height: 12px;
    margin-left: -3px;
}

.chat-item--liked-by {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 10px;
}

.chat-item--likes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


/* ------- CHAT ADD ONS ------ */

#chat-controls--add-link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.364 15.536L16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414zm-2.828 2.828l-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z'/%3E%3C/svg%3E");
}

.chat-controls--addons {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;
}

.chat-controls {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.chat-link-container {
    border: 1px solid #ccc;
    border-top: 0;
    padding: 10px;
    display: none;
}

.chat-link-container.active {
    display: block;
}

input#sidebar-chat-link {
    width: 100%;
}

input#sidebar-chat-link-name {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #ccc;
    width: 100%;
}

.chat-item--link {
    margin-bottom: 10px;
}

.chat-link-error {
    margin-top: 10px;
    color: #1f4fa7;
    background: #ffd1d5;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1px solid #ee1c24;
    color: #ee1c24;
}