@import url('https://fonts.googleapis.com/css?family=Lato');



.dblock {

    display: block;

}



.dnone,

div#bh-toggle-message-list {

    display: none;

}



div#bh-toggle-message-list .btml-reply-indicator svg {

    color: #999999;

    fill: #999999;

}



div#bh-toggle-message-list .btml-wrap {

    position: absolute;

    width: 270px;

    max-height: 307px;

    z-index: 999;

    display: -webkit-box;

    top: 60px;

    right: 0;

    box-shadow: 0px 13px 30px #0000000f;

    border-radius: 2px;

    -webkit-border-radius: 2px;

}



.btml-msg-list ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}



.btml-msg-list ul li a {

    display: -webkit-inline-box;

    padding: 10px;

    border-bottom: 1px solid #eeeeee;

    text-decoration: none;

}



.btml-msg-list ul li a,

.btml-msg-list .btml-profile-info {

    width: 100%;

}



div#bh-toggle-message-list .btml-right h4,

div#bh-toggle-message-list .btml-right p {

    padding: 0;

    margin: 0;

}



div#bh-toggle-message-list .btml-r-datetime {

    position: absolute;

    right: 0;

    top: 0;

    text-align: right;

}



div#bh-toggle-message-list .btml-reply-indicator svg {

    width: 10px !important;

    -moz-transform: scaleX(-1);

        -o-transform: scaleX(-1);

        -webkit-transform: scaleX(-1);

        transform: scaleX(-1);

}



.tn-mc,

.btml-msg-counter.msg-counter {

    width: 14px;

    height: 14px;

    font-size: 10px;

    padding: 0;

    position: absolute;

    top: 0;

    right: 0;

    line-height: 14px;

}



.tn-mc.msg-counter-menu {

    line-height: 14px !important;

    right: -10px;

    top: -3px;

    color: #ffffff;

}



li.li-message a > p:first-child {

    position: relative;

}



.tn-mc.msg-counter {

    top: -4px;

    right: -10px;

}



.btml-profile-info .btml-left.pull-left {

    position: relative;

}



.btml-msg-list ul li a:hover {

    background-color: #fcfcfc

}



div#bh-toggle-message-list .btml-right {

    position: relative;

}



div#bh-toggle-message-list .user-online-indicator {

    margin-top: 4px;

}



.btml-r-datetime > div,

div#bh-toggle-message-list .btml-right h4,

div#bh-toggle-message-list .btml-right p {

    color: #000000;

    font-size: 11px;

    font-family: 'Lato', sans-serif;

}



div#bh-toggle-message-list .btml-right > div.btml-r-info {

    margin-left: 45px;

    margin-right: 40px;

}



div#bh-toggle-message-list .btml-right p {

    color: #6e6e6e;

}



div#bh-toggle-message-list .btml-right h4 {

    font-weight: bold;

    margin-bottom: 2px;

    display: -webkit-box;

}



div#bh-toggle-message-list .btml-r-info > p {

    white-space: nowrap;

    width: 165px;

    overflow: hidden;

    text-overflow: ellipsis;

}



div#bh-toggle-message-list .btml-inner-wrap {

    overflow-y: scroll;

    background-color: #fff;

    border-radius: 2px;

    -webkit-border-radius: 2px;
    width:100%;

}



div#bh-toggle-message-list .btml-inner-wrap::-webkit-scrollbar-track

{

    border-radius: 10px;

    background-color: #F5F5F5;

}



div#bh-toggle-message-list .btml-inner-wrap::-webkit-scrollbar

{

    width: 6px;

    background-color: #F5F5F5;

}



div#bh-toggle-message-list .btml-inner-wrap::-webkit-scrollbar-thumb

{

    border-radius: 10px;

    background-color: #d3d3d3;

}



.chat-window {

    bottom:0;

    right: 0;

    position:fixed;

    float:right;

    margin-left:10px;

    z-index: 99999;

    width: initial;

}



span.icon_close svg {

    width: 13px;

    fill: #c0c0c0;

    margin-bottom: -2px;

}



.chat-window .panel-footer {

    background-color: #fff;

    border-top: 0;

}



.chat-window .panel-footer textarea {

    border: none;

    overflow: auto;

    outline: none;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

    max-width: 230px;

    height: 28px;

    min-height: 28px;

    max-height: 100px;



}



.chat-window .actn-btn:hover {

    cursor: pointer;

}



.chat-window .panel {

    border-radius: 5px 5px 0 0;

    margin-bottom: 0;

    background-color: transparent;

    border-color: transparent;

    box-shadow: 0px 13px 30px #00000038;

    border: 0;

    float: left;

    width: 280px;

    margin-left: 5px;

}



.chat-window .icon_minim {

    padding: 0px 10px;

    top: 4px;

    line-height: 12px;

    font-weight: 900;

}



span.icon_close svg {

    width: 13px;

}



.chat-panel-wrapper {

    display: -webkit-box!important;

    display: -ms-flexbox!important;

    display: flex!important;

    -webkit-box-align: end!important;

    -ms-flex-align: end!important;

    align-items: flex-end!important;

}





.chat-window a.attach-img-a svg {

    margin-bottom: -10px;

    margin-right: 10px;

    fill: #999999;

}



.attach-img-wrap {

    display: -webkit-inline-box;

    line-height: 25px;

}



button#btn-chat svg {

    fill: #ffffff;

    width: 15px;

    display: -webkit-box;

    margin: auto;

}



button#btn-chat {

    padding: 0;

    width: 30px;

    height: 30px;

    border-radius: 30px;

    -webkit-border-radius: 30px;

    border: 0;

    background-color: #f3225d;

}



.chat-window .icon_minim,

.panel-heading.top-bar span.fa,

.glyphicon-remove.icon_close {

    color: #c0c0c0;

}



.chat-window .msg_container_base {

    background: #f6f6f6;

    margin: 0;

    padding: 0 10px 10px;

    max-height:300px;

    overflow-x:hidden;

}



.chat-window .top-bar {

    background: #ffffff;

    color: #000000;

    padding: 10px;

    position: relative;

    overflow: hidden;

    border-bottom: 1px solid #e6e6e6 !important;

}



.chat-window .msg_receive{

    padding-left:0;

    margin-left:0;

}



.chat-window .msg_sent{

    padding-bottom:20px !important;

    margin-right:0;

}



.chat-window .messages-box {

    background: white;

    padding: 10px;

    border-radius: 4px;

    -webkit-border-radius: 4px;

    max-width:100%;

}



.messages.msg_receive .messages-box {

    background-color: #d4def5

}



.chat-window h3.panel-title {

    font-size: 14px;

    line-height: 20px;

    display: -webkit-inline-box;

}



.user-online-indicator {

    width: 7px;

    height: 7px;

    display: block;

    -webkit-border-radius: 15px;

    margin-left: 4px;

    margin-top: 7px;

}



.user-online-indicator.uoi-online {

    background-color: #48cf3a;

}



.user-online-indicator.uoi-offline {

    background-color: #cdcdcd;

}



.chat-window .messages-box > p {
	font-size: 13px;
	margin: 0 0 0.2rem 0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: inline-block;

}



.chat-window .messages > time {

    font-size: 10px;

    color: #999999;

    margin-top: 3px;

}



.chat-window .msg_container {

    padding: 10px;

    overflow: hidden;

    display: flex;

}



.chat-window img {

    display: block;

    width: 100%;

}



.chat-window .avatar {

    position: relative;

    padding: 0;

    width: 10.666667%;

}



/* .chat-window .base_receive > .avatar:after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 0;

    height: 0;

    border: 5px solid #FFF;

    border-left-color: rgba(0, 0, 0, 0);

    border-bottom-color: rgba(0, 0, 0, 0);

} */



.chat-window .base_sent {

    justify-content: flex-end;

    align-items: flex-end;

}



.chat-window .base_sent > .avatar:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 0;

    border: 5px solid white;

    border-right-color: transparent;

    border-top-color: transparent;

    box-shadow: 1px 1px 2px rgba(black, 0.2); // not quite perfect but close

}



.chat-window .msg_sent > time{

    float: right;

}



.chat-window .msg_container_base::-webkit-scrollbar-track

{

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.09);

    background-color: #F5F5F5;

}



.chat-window .msg_container_base::-webkit-scrollbar

{

    width: 12px;

    background-color: #F5F5F5;

}



.chat-window .msg_container_base::-webkit-scrollbar-thumb

{

    background-color: #d3d3d3;

}



.chat-window .btn-group.dropup{

    position:fixed;

    left:0px;

    bottom:0;

}





@media (max-width: 601px) {

    .chat-window {

        display: none;

    }

}