.chat {
    margin-top: -10px;
}
.chat .online-panel {
    min-height: 40px;
}
.chat .online-panel img {
    border-radius: 100%;
}
#members  {
    display: inline-block;
}
#members .offline {
    opacity: 0.3;
}
.chat.blocked .chat-messages {
    opacity: 0.25;
}
.chat.blocked .controls.footer {
    display: none;
}
.chat .chats ul {
    padding: 0px;
}
.chat .chats .top-label {
    font-size: 1.5em;
}
.chat .chats .contact {
    border-top: 2px solid #ddd;
}
.chat .chats .contact > a {
    display: inline-block;
    padding: 9px 10px;
    width: 100%;
    height: 100%;
}
.chat .chats .contact.active,
.chat .chats .contact > a:hover {
    background: #eee;
}
.chat .chats .contact > a:active {
    /* background: #ddd; */
}
.chat .chats .contact.last {
    border-bottom: 2px solid #ddd;
}
.chat .chats .contact img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #ddd;
    margin-right: 5px;

}
.chat .chats .contact.unread {
    background: #f5f5f5;
}
.chat .chats .contact .unread-count {
    padding: 0px 3px;
    margin-top: 5px;
    float: right;
    background: #ccc;
    color: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
}
.chat .chats .contact .fa-ban {
    color: #ee6655;
    float: right;
    margin-top: 8px;
}

.chat .input-box {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    margin-top: -3px;
    padding: 10px 15px 10px 15px;
    border: 1px solid #ccc;
    border-top: 1px solid #ddd;
    border-radius: 4px;
}
.chat .input-box::placeholder {
    color: #bbb;
}
.chat .input-box:focus {
}
.chat-messages {
    padding: 10px;
    height: 505px;
    border: 1px solid #ccc;
    border-bottom: 0px;
    overflow-y: scroll;
    position: relative;
    background: url('/assets/img/chat_bg.jpg');

}
.chat-messages .tstamp {
    color: #ccc;
    font-size: 10px;
    font-weight: bold;
    padding: 7px;
    vertical-align: bottom;
}

.chat-message {
    display: inline-block;
    width: 100%;
}
.chat-message.separator {
    margin-top: 2em;
}
.chat-message.from-user .inner-wrapper {
    text-align: right;
}
.chat-message .balloon {
    max-width: 100%;
    overflow: hidden;
    display: inline-block;
    padding: 10px 20px 10px 20px;
    min-width: 60px;
    background: #fff;
    border-radius: 8px;
    border-bottom: 1px solid #d6cfc9;
    margin-bottom: 2px;
    text-align: left;
}
.chat-message .balloon img.chat-img{
    margin-top: 10px;
    margin-bottom: 5px;
    max-width: 200px;
    max-height: 200px;
    border-radius: 5px;
    border: 1px solid #eee;
}
.chat-message.from-user .balloon {
}
.chat-message.to-user .balloon {
}
.chat-message .chat-user {
    vertical-align: top;
    margin-top: -20px;
}
.chat-message .chat-user {
    z-index: 500;
    position: absolute;
}
.chat-message.to-user .chat-user {
    left: 10px;
}
.chat-message.from-user .chat-user {
    right: 5px;
}
.chat-message .chat-user img {
    margin-right: 5px;
    border-radius: 100%;
    border: 1px solid #ccc;
}
.chat-message a {
    display: inline-block;
}

/*  Emoticons {{{ ============================================================ */
.chat .controls .emojis-toggle {
    font-size: 2em;
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.chat .controls .emojis-toggle i {
    color: #aaa;
}
.chat .ei {
    margin-left: 2px;
    margin-right: 2px;
    height: 28px;
    display: inline-block;
}
.emoticons-popup {
    text-align: center;
}
.emoticons-popup img {
    cursor: pointer !important;
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 2px;
    padding: 4px;
    -webkit-transition: all 0.15s ease;
    -moz-transition:    all 0.15s ease;
    -ms-transition:     all 0.15s ease;
    -o-transition:      all 0.15s ease;

}
.emoticons-popup img:hover {
    padding: 1px;
}
.chat .popover-content {
    min-width: 280px;
    min-height: 255px;
}
/* }}} Emoticons ============================================================ */


.chat-blocked-message {
    display: inline-block;

    margin-right: 10px;
    background: #ee6655;
    border: 1px solid #dd5544;
    color: #fff;
    padding: 3px 12px;
    border-radius: 5px;
    font-weight: bold;
}

.list-chats li.contact {
    position: relative;
}

.chat .settings-btn {
    margin-top: -5px;
    margin-right: -10px;
}
.chat .settings-btn button {
    padding: 5px;
}
.chat .settings-btn:hover i {
    color: #999;
}
.chat .settings-btn i {
    font-size: 1.8em;
    color: #aaa;
}
.chat .settings-btn i:hover {
}
.chat .name-mobile {
    overflow: hidden;
}


.chat-notifications .notification {
    width: 100%;
    height: 100%;
    display: inline-block;
    border-bottom: 1px solid #dcdee1;
    position: relative;
}
.chat-notifications .notification:hover {
    color: #333 !important;
    background: #eee;
}
.chat-notifications .notification .unread-count {
    padding: 0px 5px;
    font-size: 11px;
    margin-top: -2px;
    margin-left: 3px;
}
.chat-notifications .notification .from-user {
    float: left;
    margin-right: 10px;
}
.chat-notifications .notification .from-user img {
    width: 55px;
    height: 55px;
}
.chat-notifications .notification .info {
    display: inline-block;
    overflow: hidden;
}
.chat-notifications .time-ago {
    position: absolute;
    right: 10px;
    color: #aaa;
}
.chat-notifications .chat-message {
    margin-top: 5px;
    color: #777;
}
.chat-notifications .no-notifications {
    text-align: center;
    padding-top: 20px;
}


@media screen and (max-width: 991px) {
    .chat .chats .contact {
        text-align: center;
    }
}