.chat-main{
float: left;
width: 270px;
margin-right: 20px;
box-shadow: 0px 4px 10px -5px rgba(0, 0, 0, 0.5);
}
.chat-list{
position: fixed;
bottom: 3px;
right: 16px;
}
.chat-list .list_bubble{ 
    margin-bottom: 15px;
    cursor: pointer;
    animation-direction: alternate;
    animation-name: hysjk879ks;
    animation-iteration-count: 1;
    animation-duration: 200ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.12, .8, .32, 1);
}

@keyframes hysjk879ks {
    0% {
        opacity: 0;
        transform:scale(.1)
    }

    100% {
        opacity: 1;
        transform:scale(1)
    }
}

.chat-header{
background: #ffffff;
padding-top: 8px;
padding-bottom: 3px;
}
.username i{
font-size: 9px;
}
.username h6{
display: inline-block;
font-size: 12px;
font-weight: 600;
}
.options {
	display: inline-block;
}
.options i{
font-size: 18px;
font-weight: normal;
cursor: pointer;
opacity: 0.5;
margin-right: 8px;
}
.options > .hide-chat-box{
	vertical-align: middle;
}
.send-button{
	opacity: 0.7;
	cursor: pointer;
}
.options .live-video{
font-size: 6px;
}
.chats{
height: 260px;
overflow-x: scroll;
overflow-x: hidden;
}
.chats ul li{
list-style: none;
clear: both;
font-size: 13px;
}
.chats .send-msg{
float: right;
}
.chats .receive-msg{
float: left;
}
.bg-gd{
	background: #00B5E2;
}
.receive-msg img.avatar{
border-radius: 100%;
height: 20px;
width: 20px;
margin-bottom: 2px;
}
.username img{
	border-radius: 100%;
	height: 30px;
	width: 30px;
}
.list_bubble img{
border-radius: 100%;
height: 44px;
width: 44px;
box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.5);
}
.receive-msg-img{
display: inline;
}
.msg-avt{
display: inline;
}
.receive-msg .receive-msg-desc{
display: inline-block;
}
.receive-msg .receive-msg-desc p{
background: rgb(240, 242, 245);
}
.message-box textarea{
border: none;
font-size: 13px;
opacity: 0.7;
}
.message-box textarea:focus{
outline: none;
}
.tools i{
color: #a1a1a1;
cursor: pointer;
font-size: 20px;
margin-right: 6px;
}
textarea { resize: none; border: none; }
.chatboxes{
    position: fixed;
    bottom: 0;
    right: 20px;
    z-index: 300000;
    margin-right: 40px;
}
.chat-content{
    background-color: #ffffff;
    box-shadow: inset 0px 13px 2px -12px rgba(0, 0, 0, 0.5);
}
.chat-data{
    overscroll-behavior: contain;
}
.messageBoxTAC {
	min-height: 37px;
	border: none;
	outline: 0px solid transparent;
	max-height: 150px;
	overflow-x: hidden;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow-y: auto;
	background-color: rgb(240, 242, 245);
	border-radius: 20px;
	width: 100%;
	transition-property: all;
	transition-duration: .3s;
	padding: 10px 30px 10px 10px;
}

.messageBoxH {
	align-items: center;
	justify-content: flex-end;
	flex-grow: 1;
}

.messageBoxT {
	margin-right: auto;
	position: absolute;
	left: 16px;
	bottom: 7px;
	transition: all 0.3s ease, transform 0.3s ease 0.01s, visibility 0.3s ease;
}

.messageBoxTH {
	margin-right: auto;
	transition: all 0.3s ease, transform 0.3s ease 0.01s, visibility 0.3s ease;
}

.messageBoxTA {
	width: 196px;
	transition: all 0.3s ease, transform 0.3s ease 0.01s, visibility 0.3s ease;
}

.messageBoxTA.large {
	width: 223px;
}

.messageBoxTA.typing {
	width: 209px;
}

.chidden {
	 display: none !important;
}

.send-button {
	transition: all 0.3s ease, transform 0.3s ease 0.01s, visibility 0.3s ease;
	width: 18px;
}
.smile-button {
	transition: all 0.3s ease, transform 0.3s ease 0.01s, visibility 0.3s ease;
	width: 18px;
	position: absolute;
	right: 28px;
}

.smile-button.typing {
	right: 45px;
}

emoji-picker {
	position: absolute;
	bottom: 48px;
	right: 21px;
}
.tooltip.show {
	z-index: 1000000;
}

.tooltip-inner {
    color: #000;
    background-color: #fff;
    box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.tooltip .arrow:before {
	border-left-color:#fff !important;
	border-bottom-color:#fff !important;
	border-top-color:#fff !important;
}

.rounded {
  border-radius: 1.25rem !important;
}

.rounded-left {
  border-top-left-radius: 1.25rem !important;
  border-bottom-left-radius: 1.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 1.25rem !important;
  border-bottom-left-radius: 1.25rem !important;
}

.rounded-top {
  border-top-left-radius: 1.25rem !important;
  border-top-right-radius: 1.25rem !important;
}

.rounded-right {
  border-top-right-radius: 1.25rem !important;
  border-bottom-right-radius: 1.25rem !important;
}

.inline > p
{
	display: inline-block;
}

[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  position: absolute;
  color: gray;
  background-color: transparent;
  font-weight: 200;
}

.list_bubble.new_message {
	border-radius: 100%;
	height: 44px;
	width: 44px;
	box-shadow: 0px 1px 10px -1px rgba(0, 0, 0, 0.5);
	background-color: white;
	position: relative;
}

.list_bubble.new_message > i {
	margin: 0;
	position: absolute;
	font-size: 24px;
	top: 50%;
	-ms-transform: translateX(58%) translateY(-50%);
	right: 50%;
	transform: translateX(58%) translateY(-47%);
}
.modal {
	z-index: 40000000;
}

.chatmap {
	border-radius: 20px;
	width: 172px;
	height: 172px;
}
#sendImageDZ {
	height: 150px;
}