body {
	font-family: "Public Sans", sans-serif;
}

:root {--blue:#49b57a;}
.chatbtn{
	display: none;
	position: relative;
	position:fixed;
	bottom:30px;
	right:30px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color:#fff;
	text-align:center;
	line-height:60px;
	background: var(--blue);
	box-shadow:3px 5px 22px rgba(151, 151, 151, 0.4);
	cursor:pointer;
}
.chatbtn p{margin:0px;}
.chatbtn .chaticon i,
.chatbtn .chatclose i{font-size:34px;}
.chatbtn .chatclose {
	/* position: fixed; */
	/* bottom: 30px; */
	/* right: 30px; */
	/* width: 60px; */
	height: 60px;
	display: none;
}
.chatbtn .amount {background: #ff3400;position: absolute; width: 20px;height: 20px;line-height: 20px;border-radius: 48px;top: -4px;right: -2px;font-size: 12px;display: none;}
.chatbtn .amount-act{
	display: block;
	animation: messagetips 1.5s infinite linear;
	-moz-animation: messagetips 1.5s infinite linear;
	-webkit-animation: messagetips 1.5s infinite linear;
	-o-animation: messagetips 1.5s infinite linear;
}

.chatbtn-customize{
	max-width: 200px;
	max-height: 100px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	box-shadow: 0px 0px;
	bottom:0px;
	right:0px;
}
.chatbtn-customize .chaticon-customize{
	background-repeat:no-repeat;

}


.chatbtn-customize .chatclose-customize{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--blue);
}

.chatbtn .amount-customize{
	bottom:55px;
	z-index:1000;
	top:auto;
}

@keyframes messagetips
{
0%   {opacity: 1;}
50%   {opacity: 0;}
100% {opacity: 1;}
}

@-moz-keyframes messagetips
{
0%   {opacity: 1;}
50%   {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes messagetips
{
0%   {opacity: 1;}
50%   {opacity: 0;}
100% {opacity: 1;}
}

@-o-keyframes messagetips
{
0%   {opacity: 1;}
50%   {opacity: 0;}
100% {opacity: 1;}
}


.scroll_main {width:350px;position:fixed;bottom:100px;right:20px;display:block;background-color:#fff;border:1px solid #ddd;border-radius: 8px; overflow: hidden;display:none;}
.scroll_wrap {width:100%;height:350px;position:relative;}
.scroll_wrap .scroll_cont {height:100%;overflow:hidden;}
.scroll_wrap .scroll_cont p{margin:0px}
.scroll_wrap .scroll_cont .chat-time {font-size:12px;text-align:right;color:rgba(255,255,255,.5)}
.scroll_wrap .scroll_cont .me .chat-time{color:#7a7f9a;text-align:left}
.scroll_cont{padding:0px 12px;}
.scroll_cont .bubble {font-size: 14px;position: relative;display: inline-block; clear: both;margin-bottom: 8px;padding: 13px 14px;vertical-align: top;border-radius: 5px;}
.scroll_cont .bubble.you::before {left: -3px;background-color: var(--blue);}
.scroll_cont .bubble:before {position: absolute;top: 19px;display: block; width: 8px;height: 6px;content: '\00a0'; -webkit-transform: rotate(29deg) skew(-35deg);transform: rotate(29deg) skew(-35deg);}
.scroll_cont .bubble.you {float: left;  color:#fff; background-color: var(--blue); align-self: flex-start;-webkit-animation-name: slideFromLeft; animation-name: slideFromLeft;}
.scroll_cont .bubble.you:before {left: -3px;background-color:var(--blue);}
.scroll_cont .bubble.me { float: right;color: var(--dark);background-color: #eceff1;align-self: flex-end; -webkit-animation-name: slideFromRight; animation-name: slideFromRight;}
.scroll_cont .bubble.me:before {right: -3px; background-color: #eceff1;}

.fullscreen  .scroll_main{width:100%;top:0px;right:auto;position:relative;border-radius:0px;display:block}
.fullscreen  .chattop .chattext{display:none;}
.fullscreen  .scroll_wrap {height:380px}
.fullscreen  .chatbtn{display:none;}

.chattop{background:var(--blue);color:#fff}
.chattop .chatheader{height:60px;line-height:60px;position:relative}
.chattop .chatheader .title{padding-left:20px;}
.chattop .chatheader .menu{position:absolute;right:10px;top:0px;opacity:0.8;width:30px;height:30px;cursor:pointer;font-size:17px;text-align:center;}
.chattop .chatheader .menu:hover{opacity:1;}
.chattop .chatheader .menu_sub{box-shadow:3px 0px 6px rgba(151, 151, 151, 0.6);background:#fff;border-radius:5px;position:absolute;width:130px;z-index:1;color:#000;line-height: 25px;padding:5px;top: 48px;right: 9px;display:none;}
.chattop .chatheader .menu_sub span{padding:6px 10px;display:block;font-size:12px;cursor:pointer;border-radius:4px;background:#fff;transition:all 0.1s linear;position:relative}
.chattop .chatheader .menu_sub span:hover{color:#fff;background:var(--blue);}
.chattop .chattext{padding: 5px 20px 20px;font-size: 14px;font-weight: 400;text-align:center}
.chattop .chatheader .menu_sub:before{position: absolute;top:0px;display: block; width:14px;height: 14px;content: '\00a0'; -webkit-transform: rotate(29deg) skew(-35deg);transform: rotate(112deg) skew(-35deg);right:9px;background-color: #fff;}


.conversation-start {position: relative;width: 100%;margin-bottom: 27px;text-align: center;}
.conversation-start span{color:#666;font-size:12px}
.conversation-start span::before,
.conversation-start span::after {position: absolute;top: 13px;display: inline-block;width: 30%;height: 1px;content: '';background-color: var(--light);}
.conversation-start span::before {left:0px;}
.conversation-start span::after {right:0px}


.chatbottom{padding:16px 100px 13px 14px;border-top:2px solid #ddd;position:relative;}
.chatbottom input{border:0px;height:26px;width:100%;min-height:20px;max-height:26px;max-width:100%;}
.chatbottom input:focus {outline: none;}
.chatbottom .chat-input-links {position: absolute;right: 8px;top: 12px;}
.chatbottom .chat-input-links .btn{padding:3px 3px;color:#666;opacity:0.8}
.chatbottom .chat-input-links .btn:hover{opacity:1}
.chatbottom .chat-input-links .btn:focus {box-shadow:0px 0px 0px rgba(151, 151, 151,0);}
.chatbottom .chat-input-links .send{ background: var(--blue);color:#fff;padding:3px 8px;}



.zoom-icon{width: 25px;height: 25px;background: url(../images/zoom.png) no-repeat 0px 0px;position: absolute; right: 32px; top: 6px;overflow: hidden;opacity: 0.6;cursor: pointer;}
.zoom-icon:hover{opacity: 1;}
.zoom-icon.active{background-position: -39px 0px;}

.close-icon{width: 25px;height: 25px;position: absolute;right: 5px;top: 0px;overflow: hidden;opacity: 0.8;cursor: pointer;font-size: 23px;}
.close-icon:hover{opacity: 1;}

.header-bar { cursor: pointer;}