@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');
.floatingBtn
{
    width: 55px; height: 55px;	
	background-image: url('../../images/whatsapp_logo.svg');
	background-repeat:no-repeat;
	background-size:30px;
	background-position:center;
    background-color: #ffd5ff;	
	border-radius: 100%;	
    box-shadow: 0 7px 16px 0 rgba(0,0,0,.35);    
	position: fixed;
    bottom: 15px; right: 15px; z-index: 950;	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
	font-family:'Inter', sans-serif;
}
.activeFloatingBtn { transform: translate3d(0,150%,0); }
.floatingBtn span{
	font-family:'Inter', sans-serif;
	font-size:12px; 
	background:#fff;
	color:#000;
	width:150px;
	padding:5px;
	border-radius:2px;
	text-align:center;	
	position: absolute;
    top: 12px; left: -170px; z-index: 1;	
}
.floatingBtn span.mainText{width:162px;}
.floatingBtn .floatingBtn span{width:max-content;}

/*
	======================
*/
.floatingOverlay {
    position:fixed; top:0; right:0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
}


/*
	======================
*/
.floatingPanel{    
	font-family:'Inter', sans-serif;
	border-radius: 2px;
    background-color:#FCFAF7;    
	box-shadow: 0 0 15px 0 rgba(0,0,0,.25);
    position: fixed;
    bottom: 15px; right: 15px; z-index: 1000;    
	width: 100%; max-width: 320px;
    height: auto;	
    overflow: hidden;	
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    transform-origin: bottom right;	
    transform: scale(0,0);
    opacity: 0;	
}
.activefloatingPanel{
    transform: scale(1,1);
    opacity: 1;}

.floatingPanel h5{
	background-color: #2db742;
	margin:0px; padding:15px;
	color:#fff;
}
.floatingPanel h5 strong{display:block; font-family:'Inter', sans-serif; font-size:16px; font-weight:600;}
.floatingPanel h5 span{display:block; font-family:'Inter', sans-serif; font-weight:400; font-size:12px;}
.floatingPanel h5 a.close{
	position: absolute;
    top: 15px; right: 15px; z-index: 1;
	width:16px; hight:16px;
}
.floatingContent{padding:15px; }
.floatingContent h4{font-family:'Inter', sans-serif; font-size:15px; font-weight:400; color:#333; margin:0px 0px 15px; text-align:center;}
.floatingContent .information{font-size:13px; line-height:120%; display:block; margin-bottom:8px; text-align:center; font-weight:500; color:#.floatingContent h4;}
.floatingContent .qrCodeDiv{
	display:flex; align-items:center; justify-content:space-between; gap:5px;
	background: #FBFFFC;
	border:2px solid #D8F5E4; border-radius:10px;
	padding:10px;
	box-shadow:0 12px 30px rgba(34,197,94,.08);
	margin-bottom:12px;
 }
 .floatingContent .qrCodeDiv .qrCodeDiv-left{width:calc(100% - 111px);}
.floatingContent .qrCodeDiv .qrCodeDiv-left h3{font-size:17px; color:#192B4F; margin-bottom:12px; font-family:'Open Sans', sans-serif;}
.floatingContent .qrCodeDiv .qrCodeDiv-left p{font-size:12px; line-height:1.2;}
.floatingContent .qrCodeDiv .qr-divider{
  width:1px;
  height:90px;
  border:1px dashed #d8e8de;
  align-self:stretch;
}
.floatingContent .qrCodeDiv span{font-size:14px; line-height:120%; display:flex; margin-bottom:8px; justify-content:center;}
.floatingContent .qrCodeDiv span.QrCodeImage{width:90px; height:90px; margin:auto;}
.floatingContent ul, .floatingContent ul li{list-style-type:none; margin:0px; padding:0px;}
.floatingContent ul li a{
	/*background:rgba(0,0,0,0.03);*/
	background:#fff;
	border-left:2px solid #2db742;
	padding:12px;
	border-radius:8px;
	display:flex; gap:8px;
	color:#192B4F; text-decoration:none;
	position:relative;
	margin:12px 0px;	
	-webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
	box-shadow:0px 0px 10px rgba(0,0,0,0.1);
}
.floatingContent ul li a.offline{pointer-events: none; border-color:rgba(0,0,0,0.2)}
.floatingContent ul li a.offline:after{
	opacity:0.5;
	filter:grayscale(100%);
}

.floatingContent ul li a .pic{
	width:44px; height:44px; display:flex; z-index: 1;
}
.floatingContent ul li a .pic img{width:44px; height:44px; border-radius:100%;}
.floatingContent ul li a .user{font-family:'Inter', sans-serif; font-size:15px; font-weight:400; display:block;}
.floatingContent ul li a .role{font-family:'Inter', sans-serif; color:#4A5568; font-size:12px; display:block;}
.floatingContent ul li a p{font-family:'Inter', sans-serif; color:#f5a623; font-size:12px; display:block; margin:0px;}
.floatingContent ul li a:after{
	content:" ";
	width:24px; height:24px;
    overflow:hidden;	
	background:url('../../images/whatsapp_logo_green.svg') no-repeat;
	background-size:18px;
	background-position:center;    
	position: absolute;
    top:22px; right:12px; z-index: 1;
}
.floatingContent .chatWithTeam{display:flex; align-items:center; gap:4px}
.floatingContent .chatWithTeam span:first-child{flex:1; height:1px;  background:#4A5568;}
.floatingContent .chatWithTeam span:nth-child(2){font-size:13px; line-height:120%; color:#4A5568;}
.floatingContent .chatWithTeam span:last-child{flex:1; height:1px;  background:#4A5568;}
.floatingContent .wa-footer {
	display: block;
	text-align:center;
	background:#F7F3EC;
	padding:12px;	
}
.floatingContent .wa-footer p{color:#4A5568; font-size:13px;}
.floatingContent .wa-footer strong {
  color: #25D366;
}