.btn-box-tool {
    background: transparent none repeat scroll 0 0;
    color: #97a0b3;
    font-size: 12px;
    padding: 5px;
    line-height:1;
}
.chat__head .btn-box-tool{
	color:#fff;
}
.cf {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}
#draggablePanelList li:first-child {
    left: unset !important;
    right: 272px;
    z-index: 99;
}
.show-me {
 
    right:0px !important; 
    position:fixed !important; 
}
.show-me2 {
 
    right:320px !important;
}

.chat .title {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    color: white;
    height: 100px;
    text-align: center;
    font-size: 8vw;
    font-weight: 600;
}

.button.js-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
 
    -webkit-appearance: none;
    font-size: 1rem;
    line-height: 1.2;
    border-radius: 3px;
    border: 3px solid #343436;
    background: #343436;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    cursor: pointer;
    text-align: center;
    font-weight: normal;
    padding: 10px 16px;
    padding-left: 30px;
    outline: 0;
    
    &:before {
        position: absolute;
        top: 0;
        left: 10px;
        bottom: 0;
        margin: auto;
        width: 10px;
        height: 10px;
        background: #53DD6C;
        content: "";
        border-radius: 100px;
    }

    &:hover {
        background: #4d4d50;
    }
    
    &:active {
        bottom: 17px;
    }
}

.chat {
    position: fixed;
      background-color: #E31D49;
    bottom:  0px;max-height: 500px;
    right:  -270px;
    height: 100%;
    width: 270px;box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
}
.messageInput__button:hover , .messageInput__button:focus { background-color: transparent !important; border:0px !important}
.m__msg { line-height: 20px; }
 #chat_loader{
 width: 100px;

display: block;

text-align: center;

background:
#eee;

margin: auto;

padding: 5px 10px;
 }
.chat__human {
    display: block;
    width: 100%;
    padding: 4px 10px !important;
    color: #7b7b7b;
    transition: 0.3s;
    cursor: pointer;
    
    &:nth-child(odd) {
        background: darken(#28282B, 2%);
    }
    
    &:hover {
        background: darken(#191919, 5%);
    }
    
    > * {
        display: inline-block;
        vertical-align: middle;
    }
}

.chat__avatar {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 100px;
    margin-right: 5px;
    float:left;
}

 .chat__name{ display: block;font-weight:600;

width: calc(100% - 50px);

float: left;line-height: 1.5;}
  
.chat__users {
    
 font-size: 12px;
letter-spacing: .5px;
font-weight: 400;
color:
#fff;
padding: 7px 15px !important;
line-height: 13px;
}
.conversation  .input-group-btn{
	   width:50px !important; 
	   font-size: 14px;
}
.conversation__header { display:table; }
.conversation__header .name { display:table-cell; }
.conversation__header .close-msg { display:table-cell; }
.conversation {
     
   /* position: absolute;
    bottom:  0px;
 
     right: 271px; */ 
    
    max-height:100vh;
    height:100%;
     box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.3);
   z-index:2000 ;
}
.conversation__header{
  background-color: #E31D49;
}
.conversation__header::after {
    background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0px, transparent) repeat scroll 0 0;
}
.conversation__header {
   display: block;
    height: 3rem;
    line-height: 3rem;
    position: absolute;
    width: 100%;
}
.inputer{ font-size:15px; } 
.conversation__header .name{
 
   font-weight: 400;

display: inline-block;

margin-left: 3rem;

width: calc(100% - 70px);

overflow: hidden;

text-align: left;

text-overflow: ellipsis;

white-space: nowrap;

color:
#fff;

line-height: 48px;

position: relative;

margin-left: 15px;

font-weight: 600; 
}
.close-msg {
  color: #fff;
    display: inline-block;
    font-weight: 400;
    margin-left: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width:  50px ;
    z-index: 10;
}
.conversation
{
 -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    animation-name: showWrapper;
    border-color: currentcolor;
    border-image: none;
    border-radius: 0.5rem;
    border-style: none;
    border-width: medium medium 0;
   
    box-shadow: 0 1.5rem 2rem rgba(0, 0, 0, 0.3);
  
    opacity: 1;
    
     
    transform: none;
    visibility: visible;
    z-index: 1000;
}
.conversation__msg {
    padding: 5px 10px;
    color: white;
    list-style-type: none;
    font-size: 12px;
    
    span {
        background: white;
        color: black;
        display: table;
        padding: 10px 20px;
        border-radius: 100px;
        float: left;
    }
}

.right {
    float: right !important;
    background: #0ebeff !important;
    color: white !important;
}

.input {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: lighten(black, 4%)
        ;
    border: 0;
    outline: 0;
    transition: 0.3s;
    color: white;
    
    &:focus {
      background: lighten(black, 7%)
        ;  
    }
}

.close-msg {
    float: right;
    font-size: 20px;
    margin-top: -4px;
}
 
.chat li.chat__human .sup {
	line-height: 2;
    margin-top: 3px;
    vertical-align: middle;
    position:absolute; 
    left:7px;font-size:8px;top:0px; 
}
.chat li.chat__human{
	margin-bottom:0px !important; 
	color: #fff; 
}
.clor-red{ color:red; }
.clor-green{ color:green; }
span.smlabel{
		font-size: 9px;
		line-height: 0.9;
		padding: 2px 3px;
		position: absolute;
	 
		text-align: center;
		 
}
@keyframes blink {
to { color: red; }
}
#chatter-btn {
color: green ;
animation: blink 1s steps(2, start) infinite;
color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin-right: 5px;
}

.span-sec-chet .footer {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 -0.1rem 0.5rem rgba(0, 0, 0, 0.15);
    display: block;
    position: relative;
    width: 100%;
    z-index: 10;
}

.span-sec-chet .messageInput {
    background: #fff none repeat scroll 0 0;
    border: medium none;
    display: block;
    margin-right: 0.5rem;
}

.span-sec-chet  .messageInput__wrapper {
    display: table-row;
}

 .span-sec-chet .messageInput__input{
     border: none;
    overflow: auto;
    outline: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
 }
 span.loading button i { font-size:20px; color:#fff; }
 span.loading   { cursor:pointer; z-index:3333;width:100%; text-align:center; }
 .messageInput__button  i { font-size:30px;   color: #eee; }
.span-sec-chet .messageInput__input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    display: block;
    font-size: 1rem;
    height: 1.9rem;
    line-height: 1.7rem;
    overflow-y: auto;
    padding: 1rem 0 1.2rem 1rem;
    resize: none;
    width: 100%;
    font-size:15px; 
}
.chat  .chat__head { cursor:pointer; }

.span-sec-chet .messageInput__buttonWrapper {
   
    padding-bottom: 0.75rem;
       position: absolute;
    vertical-align: bottom;
    width: 30px;
     right: 8px;
    top: 12px;
}

.span-sec-chet .messageInput__button {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0.3rem;
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.08rem;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

.messageInput__content {
 
    vertical-align: middle;
      width: calc(100% - 27px);
}
.messageInput__container {
   display: table ;
   width:100%; 
} 


.avatar_image img {
    border: medium none;
    height: 2rem;
    width: 2rem;
}
.avatar_image img {
    border-radius: 50%;
    display: block;
}
.span-sec-chet .msg_group { display: table ; width:100%; margin-bottom:3px;  } 
.span-sec-chet .msg_row {
   display: table-row;
}
.span-sec-chet .message___text {
		margin-left:5px;
}
 
.large_div_msg{
		display: table-cell;
		vertical-align: middle;
		width: calc(100% - 27px);
}
.small_div_msg{
		display: table-cell;
		vertical-align: top;
		width: 27px;
}
html .m__msg {
    padding: 5px 10px;
}
.message___text {
    background-color: #eee;
    border: medium none;
    box-shadow: 0 0.1rem 0.1rem 0 rgba(32, 34, 40, 0.05);
    color: rgba(0, 0, 0, 0.8);
   
    overflow: hidden;
    overflow-wrap: break-word;
    transition: border-radius 0.3s ease-in 0s;
    white-space: pre-line;
      border-radius: 0.3rem 12px 12px ;  
      float:left;
}
.m__msg {
    padding: 0.9rem 1.1rem;
}


.message___text.msg_right{
    border: 1px solid #eee;
    border-radius: 1.4rem 0.3rem 1.4rem 1.4rem;
   
}
.message___text.msg_right {
    background:
#eee none repeat scroll 0 0;

border-radius: 12px 0.3rem 12px 12px;

float: right;

margin-right: 5px;
}
.small_div_msg .avatar_image.avatar_right{
    float: right;
    text-align: right;
}
 

.cnv.active .conversation__header  {
		background: #e31d49; 
	}
	.chat__wrapper { position:absolute; z-index:1;width:100%; bottom:0px; }
	.conversation__header .close-msg { cursor:pointer;line-height:48px; }
	.messageInput__content .emojionearea,.messageInput__content  .emojionearea.form-control { top:-8px;left:<?php echo $windowWidth-2;?>px; }
	.messageInput__content .emojionearea .emojionearea-editor { max-height:86px;min-height:86px !important ;}
	.messageInput__content .emojionearea.focused { box-shadow: unset ; }
	.messageInput__content .emojionearea  { border: 0px ; width:98%; }
	 span.online_status blink { position:absolute; color:red;
			position: absolute;
			color: red;
			padding: 2px;
			background: #fff;
			border-radius: 50px;
			height: 14px;
			font-size: 10px;
			line-height: 12px;
			top: 5px;
		  }
	 #draggablePanelList li {  position: absolute;
			bottom: 0!important; 
			padding: 0!important; 
			margin: 0!important; 
			position: absolute;
    
			
			 }
	 
	ul#draggablePanelList {   bottom:  0px;
	height: 396px !important; 
	position: absolute !important; 

	width: 100% !important; }
    
	ul#draggablePanelList li { float:left; }
	.chat.Off #draggablePanelList{ display:none !important; } 
	.chat.Off {
	position fixed ; 
	bottom: 0px; 
	height:30px;
	top:unset; 
	width:206px; 
	}

	.chat  #show_up_user_dive{ display:none;  ; } 
	.chat.Off #show_up_user_dive{ display:inline-block ;    line-height: 19px; } 
	.chat.Off #hide__chat{ display:none ; } 
	.chat.Off {
		display:block !important; 
		 
	}
	.chat.Off .chat__wrapper{ display:none; } 


	.messageGroup__innerWrapper {
		display: table-row;
	}
 
.messageGroup__innerWrapper > div {
    display: table-cell;
}

.message {
    display: table;
    margin-bottom: 0.125rem;
    table-layout: fixed;
    width: 100%;
}

.message__content {
    display: table-row;
    overflow: hidden;
    width: 100%;
}

.message__textContainer {
    display: table-cell;
    max-width: 100%;
    vertical-align: top;
}
.message__innerContainer {
    border-radius: 0.3rem 1.4rem 1.4rem;
}
.message__innerContainer {
    background-color: #fff;
    border: medium none;
    box-shadow: 0 0.1rem 0.1rem 0 rgba(32, 34, 40, 0.05);
    color: rgba(0, 0, 0, 0.8);
    float: left;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
    transition: border-radius 0.3s ease-in 0s;
    white-space: pre-line;
}
.span-sec-chet .messageInput__buttonWrapper{ top:30px;}
.message__text {
    padding: 0.9rem 1.1rem;
}

<!-- St -->

.messageGroup {
    margin-top: 1rem;
    width: 100%;
}


.messageGroup__time {
    color: #a4aab3;
    display: block;
    font-size: 0.75rem;
    padding: 0.5rem;
    text-align: center;
}

.messageGroup__wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
} 

.messageGroup__innerWrapper {
    display: table-row;
}

 
.messageGroup__innerWrapper > div {
    display: table-cell;
}
.messageGroup__authorName--customer {
    clear: both;
    text-align: right;
}
.messageGroup__authorName {
    color: #a4aab3;
    display: none;
    font-size: 0.8rem;
    line-height: 1.2rem;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messageGroup__innerWrapper {
    display: table-row;
}
 
.messageGroup__innerWrapper > div {
    display: table-cell;
}

.messageGroup__innerWrapper > div:first-child {
    width: 2.3rem;
}

.message {
    display: table;
    margin-bottom: 0.125rem;
    table-layout: fixed;
    width: 100%;
}

.message__content {
    display: table-row;
    overflow: hidden;
    width: 100%;
}

.message--customer .message__textContainer {
    float: right;
}
.message__textContainer {
    display: table-cell;
    max-width: 100%;
    vertical-align: top;
}
 
.messageGroup .message--customer .message__innerContainer {
    border: 1px solid #427fe1;
    border-radius: 1.4rem 0.3rem 1.4rem 1.4rem !important; 
    margin-left: 2.3rem;
}
.message--customer .message__innerContainer {
    background: #3e7ce4 none repeat scroll 0 0;
    color: #fff;
    float: right;
     border-radius: 1.4rem 0.3rem 1.4rem 1.4rem !important; 
}
.messageGroup .avatar {
    display: table-cell;
    padding-right: 0.3rem;
    vertical-align: top;
    width: 20px;
}
 
.messageGroup .avatar__image {
    border: medium none;
    height: 2rem;
    width: 2rem;
}
.avatar__image {
    border-radius: 50%;
    display: block;
}
 
.chat-box-div .panel-body{
	 -moz-box-direction: normal;
    -moz-box-orient: vertical;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: background-color 0.5s ease-in 0s;
    width: 100%;
}
.chat-box-div .panel-body::after {
   
    content: "";
    display: block;
    height: 20%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    touch-action: none;
    z-index: 9;
}
ul#draggablePanelList li:nth-of-type(1n+4) {display: none;}

 
.emojionearea .emojionearea-editor {
    display: block;
    height: auto;
    min-height: 8em;
    max-height: 15em;
    overflow: auto;
    padding: 6px 24px 6px 12px;
    line-height: 1.42857143;
    font-size: inherit;
    color: #555;
    background-color: transparent;
    border: 0;
    cursor: text;
    margin-right: 1px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.chat__users{ padding: 15px 20px; }
.chat .btn-box-tool { padding: 5px 14px;line-height: 13px;}
.msg_group .tim {
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;color:#bbb;
}
.chat__wrapper { background:#fff; }
.chat li.chat__human{ color: var(--black-color) !important; }
html .chat li.chat__human {  border-bottom:1px solid #eee; position:relative;  }
.inputer2 { border:0px !important; }
span.tim {
    display: block;
    color: #eee;
}
.gIWLsD {
    display: block;
    flex: 1 1 0%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px; font-size: 12px;  
    color: #666;
    line-height: 1.5;
}
 .bnyDRG,.JAijx,.fGCqcx { line-height:17px; }
	.popover   .show_express_interest_accept , .popover   .show_express_interest_reject  { padding:5px 10px !important; margin-top:0px !important; margin-right:5px !important; }  
	.popover { z-index:11111  !important;opacity:1 !important; width:380px !important;max-width:380px  !important; border:0px !important; background:
transparent  !important;

padding: 10px  !important;

box-shadow: unset; }.popover-content{ box-shadow:rgba(0, 0, 0, 0.25) 0px 6px 12px; background:#fff; border-radius:5px; }
.iSPpRN {
   
}.lokrPs::after {
    content: "";
    display: none;
    position: absolute;
    right: 0px;
    top: -1px;
    width: 40px;
    height: 40px;
    border-radius: 0px 3px 0px 0px;
  
}
.popover a { font-weight:600; }
.kVVHrZ {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
    background: 
rgb(255, 255, 255) none repeat scroll 0% 0%;
padding: 3px;
display: block;
border: 1px solid
    rgb(223, 224, 227);
}.bICwSD {
    flex: 1 1 0%;
    margin: 0px 0px 0px 9px;
}.jIWdGr {
    display: inline-block;
    font: bold 12px / 20px arial;
    color: 
    rgb(0, 188, 213);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 3px 0px;
    text-decoration: none;
}.hZNDXk {
    margin: 0px;
    padding: 0px;
    list-style: outside none none;
    font: 11px / 16px arial;
    color: 
    rgb(114, 114, 125);
}.fGCqcx {
    width: 100%;
}.JAijx {
    display: inline-block;
    vertical-align: middle;
    width: 110px;
    color: 
    rgb(153, 153, 153);
}.bnyDRG {
    display: inline-block;
    vertical-align: middle;
    padding: 0px 0px 0px 4px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}.hNXWGc {
    display: flex;
    -moz-box-pack: start;
    justify-content: flex-start;
    margin: 10px 0px;
}.giJAtP {
    display: inline-block;
    font: bold 12px arial;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid 
rgb(0, 188, 213);
color:
rgb(255, 255, 255);
margin-left: 0px;
background:
    rgb(0, 188, 213) none repeat scroll 0% 0%;
}.ekoWzC {
    display: inline-block;
    font: bold 12px arial;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    border: 0px solid rgb(0, 188, 213);
    color: 
    rgb(149, 149, 157);
    margin-left: 5px;
    background: rgb(241, 241, 242) none repeat scroll 0% 0%;
}
.lokrPs {
    display: flex;
    align-items: flex-start;
    
   
    background: 
rgb(255, 255, 255) none repeat scroll 0% 0%;
border-radius: 5px;
box-shadow:
rgba(0, 0, 0, 0.25) 0px 6px 12px;
padding: 10px 8px 8px;
z-index: 5;
border-top: 0px solid
    rgb(255, 90, 96);
    transform: translateX(-10px) translateY(-50%);
   
}.lcBTXz {
    width: 125px;
    height: 167px;    object-fit: contain;object-position: top;
}
.jIYDsh {
    display: inline-block;
    margin-left: -10px;
      background-position: left -106px;
    width: 10px;
    height: 20px;
    position: fixed;
    right: 245px;
    margin-top: -10px;
}
.fa-blink {
  animation: blinker 1s linear infinite;
  color:red; 
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.gThDy {
    display: flex;
    position: fixed;
    right: 5px;
    z-index: 1;
    bottom: 0;
}
.gThDy button {
   border: 1px solid #03a84e;
   background-color:#03a84e;
   color:#fff;
   width: 60px;
   height: 60px;
   display: block; 
   border-radius: 50%;
}
.gThDy button i{
font-size: 32px !important;
text-align: center!important;
cursor: pointer!important;
}
span.smlabel.notempty {
	background : #03A84E; 
}
.messageInput__innerContainer.lay::before {
    content: '';
    position: absolute;
    background: 
    rgba(255,255,255,0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
span.smlabel {
     
    right: 5px;
    color:#fff;padding:5px;z-index:2;
    top: 10px;
}
html .messageInput__button .fa.fa-send{ font-size:20px !important; }
.inputer2 {
    padding: 10px !important;
    line-height: 1.5!important;
}
span.loading button { background: #eee!important;
    width: 50px!important;
    margin: auto!important;
    color: #000!important;
    padding: 0px;
    marg: 15px !important;
    margin-bottom: 15px !important; }
span.loading button i { color: #000 !important; } 
#messengerNotify .fa-envelope-o::before{ content:unset !important; }
#messengerNotify  { background-color: transparent;border:0px;    }
#messengerNotify    { background-image:url('../img/icon.gif');background-repeat:no-repeat; background-size:contain; background-color:transparent;   }
#messengerNotify.fa-blink    { animation:unset !important; background-image:url('../img/icon-gold.gif');    }
.gThDy {
  
    bottom:15px;
}
@-webkit-keyframes openbox {
  0% {
    height: 0px;
    
  }
  100% {
    height: 100%;
  
  }
}

@keyframes openbox {
  0% {
    height: 0px;
   
  }
  100% {
    height: 100%;
    
  }
} 
.show-me { 
 -webkit-animation: openbox 0.25s ease-in ; 
  animation: openbox 0.25s ease-in; 
 }
 
#messengerNotify.fa-blink::before {

    content: 'new';
    position: absolute;
    top: -9px;
    right: 0;
    background: 

    #000;
  
    padding: 5px 4px;
  
    border-radius: 10px;
        border-bottom-right-radius: 10px;
    vertical-align: top;
    left: -97px;
    width: auto;
    animation: blinker 1s linear infinite;
    width: 39px;
    margin: auto;
        margin-top: auto;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
    vertical-align: top;
 
    border-bottom-right-radius: 0;
    line-height: 1;

}