#login-box {
    margin-top: 20px
}

#chat_box {
    position: fixed;
    right: 0%;
    width: 22%;
    z-index: 9999;
    background-color: #fff;
    bottom: 0;
}

.close-chat {
    margin-top: 1px;
    cursor: pointer;
    color: #fff;
}

.chat_box {
    margin-right: 15px;
    width: 310px;
}

.chat-area {
    height: 310px;
    overflow-y: scroll;
    padding: 10px 0 0 0;
}

#users li {
    margin-bottom: 5px;
}

#chat-overlay {
    position: fixed;
    right: 0%;
    bottom: 0%;
}

.glyphicon-ok {
    color: #42b7dd;
}

.loader {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.chat_input {
    font-size: 12px;
    border: 0;
    padding: 9px 10px 0 10px;
    height: 35px !important;
}

.btn-chat {
    font-size: 13px;
    font-weight: bold;
    background-color: #3490dc;
    color: #fff;
    display: block;
    padding: 8px 15px;
}

.no-more-messages {
    background-color: #b32b2b;
    margin: 3px;
    margin-bottom: 6px;
    padding: 3px;
    font-size: 12px;
    color: #fff;
}

.upload-btn {
    font-size: 19px;
    color: #2b2be6;
}

.emoji-list {
    margin-top: 4px;
}

.emoji-list ul {
    list-style-type: none;
}

.emoji-list ul li {
    display: inline-block;
    margin: 3px;
}

.emoji-list ul li a {
    text-decoration: none;
    font-size: 14px;
}

.panel {
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-color: #3490dc;
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #3490dc;
    border-color: #3490dc;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: #fff;
}
.panel-footer {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
.wrap-input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}
.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
}
.wrap-left-chat{
    display: block;
    width: auto;
}
.wrap-left-chat .avatar{
    margin-right: 1%;
    width: 35px;
    height: 35px;
    float: left;
}
.wrap-right-chat .avatar img,
.wrap-left-chat .avatar img{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}
.messages.msg_sent.text-right {
/*     float: right;
    width: 82%; */
}
.messages.msg_sent.text-left {
    /* float: left; */
    /* width: 82%; */
}
.messages p{
    background-color: #3490dc;
    color: #fff;
    font-size: 13px;
    padding: 7px 15px;
    border-radius: 10px;
    line-height: 15px;
}
.wrap-right-chat {
    /* display: inline-block; */
    /* padding: 5px 10px 5px 10px; */
    display: block;
    width: auto;
}

.wrap-right-chat .avatar {
    margin-left: 1%;
    width: 35px;
    height: 35px;
    float: right;
}
.chat_box{
    display: none;
}
.chat_box.chat-opened{
    display: block;
}
.detail-right .show-user-home-in .chat-area {
    white-space: break-spaces;
}
.wrap-left-in,
.wrap-right-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px 10px 5px 10px;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}
.message-data{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.message-data-time {
    text-align: center;
    font-size: 10px;
    padding: 0;
    line-height: 17px;
    border-bottom: 1px solid #f8f5f5;
    color: #b8b8b8;
}
.wrap-left-chat .wrap-right-in{
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
}
@media (max-width: 767px){
    #chat_box {
    width: 300px;
    margin-right: 5px;
}
.show-user-home-in .chat-area {
    white-space: break-spaces;
}
}