/*========================================================
                  livechat module
=========================================================*/

.chat-window-button{position: fixed;right: 1rem; bottom: 0px;z-index: 5;padding: 0.8rem 2rem;font-size: 1.2rem;border-top-right-radius: 6px;border-top-left-radius: 6px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);min-width:8rem;border:0px;background: rgba(0, 0, 0, 0.8);color: #fff;}
.chat-window-button:hover{background: #000; }
.chat-window-button.active{display: none;}
.chat-window-button.tip{background-color:green;}
.chat-window-button i{margin-right: 0.5rem;}

.chat-window {position: fixed;right:20px;bottom:20px;height:0px;overflow:hidden;z-index:19;-moz-transition: 0.3s ease;-o-transition: 0.3s ease;-webkit-transition: 0.3s ease;transition: 0.3s ease;box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);}
.chat-window.active{height:auto;}

.chat-window .chat-title{background: rgba(48, 48, 48, 0.9);display: flex;justify-content: space-between;padding: 1.2rem 1.2rem;font-size:1.3rem;color: #fff;border-top-right-radius: 6px;border-top-left-radius: 6px;}
.chat-window .chat-title div i{margin-right: 5px;cursor: pointer;}
.chat-window .chat-title .chat-services{display:none;margin-right:15px;}
.chat-window .chat-title .chat-services.active{display:inline;}
.chat-window .chat-title .chat-status{margin-left:15px;}
.chat-window .chat-content{background: rgba(255, 255, 255, 1);color:#000;position:relative;}

.chat-bubble{display:none;position:absolute;bottom:125%;right:0;background-color: #fff;color:#000;border-radius: 10px;padding: 10px;width: 250px;text-align:left;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}
.chat-bubble.active{display:block;}
.chat-bubble:after{content: "";position: absolute;border-width: 10px;border-style: solid;bottom: -20px;right: 20px;border-color:#f2f2f2 transparent transparent transparent;}

.chat-tip{position:absolute;top:0;left:0;right:0;line-height:20px;}
.chat-tip .success{background-color:#5cb85c;color:#FFF;padding:5px 10px;}
.chat-tip .danger{background-color:#f0ad4e;color:#FFF;padding:5px 10px;}

.chats-connect{display:none;flex-flow: column;align-items: center;width:375px;height:500px;}
.chats-connect.active{display: flex;}
.chats-connect>div{display: flex;flex-flow: column;align-items: center;text-align: center;}
.chats-connect .t0{padding:3rem 0rem 1rem;width:100%;}
.chats-connect .t0 i{font-size:5rem;line-height:6rem;}
.chats-connect .t1{padding-top:1rem;width: 90%;}
.chats-connect .t3{width:80%;margin-top:2rem;}
.chats-connect .t2{padding:1rem 0rem 3rem;width: 100%;}
.chats-connect .t2 button{padding: 1rem 1.5rem;background: #ff8b00;color: #fff;border-radius: 4px;margin-top:2rem;width: 50%;border:0px;}
.chats-connect .t2 button:hover{background: #ff981d;}

.chats{display:none;flex-direction:column;width:375px;height:500px;}
.chats.active{display:flex;}

.chats .services{padding:5px;background-color:whitesmoke;position:absolute;right:0px;left:0px;top:0px;display:none;}
.chats .services.active{display:block;}
.chats .services .title{text-align:center;font-weight:bold;margin-top:5px;}
.chats .services ul{margin:0px;padding:0px;text-align:center;}
.chats .services ul li{display:inline-block;margin:10px;}
.chats .services ul li em{display:block;width:40px;height:40px;border-radius:50%;background:#fff;cursor:pointer;line-height:40px;}
.chats .services ul li em:hover{background-color:#0178ee;}
.chats .services ul li em img{height:100%;border-radius:50%;padding:1px;}
.chats .services > i{position:absolute;cursor:pointer;top:0px;padding:15px;}
.chats .services > i.fa-times{right:0px;}

.chats .messages-more{text-align:center;line-height:30px;cursor: pointer;}
.chats .messages-more:hover{background-color:#EEE;}
.chats .messages{flex-grow:1;overflow-y:auto;font-size:1.1rem;padding:10px;background-color:#fefefe;}
.chats .messages > div{margin:20px 0px;}
.chats .messages > div span{padding:10px;border-radius:10px;display:inline-block;max-width:80%;word-break: break-all;}
.chats .messages > div span img{max-height:100px;max-width:150px;}
.chats .messages > div.text-left span a,.chats .messages > div.text-left span a:visited{color:#000;}

.chats .messages > div span .playsound{border:0px;background-color:unset;}
.chats .messages > div .text-right span .playsound{color:#FFF;}
.chats .messages > div span k{display:inline-block;min-width:80px;text-align:right;font-size:0.8rem;}
.chats .messages > div span audio{display:none;}
.chats .messages > div span video{max-width:100%;}

.chats .messages .text-left span{background-color:#F1F3F5;color:#000;}
.chats .messages .text-right span{background-color:#88AA3D;color:#FFF;text-align:left;}
.chats .messages .text-right span a,
.chats .messages .text-right span a:visited{color:#FFF;}
.chats .messages > div>em{background-color:#0178ee;height: 20px;width:20px;border-radius: 50%;line-height: 20px;display: inline-block;margin-right: 10px;text-align: center;color: #FFF;}
.chats .messages > div.unread>em{background-color:#ccc;}
.chats .messages > div>i{height: 30px;width:30px;line-height: 30px;display: inline-block;margin-right: 5px;margin-left:0px;text-align: center;color: #FFF;}
.chats .messages > div.text-right>i{margin-left:5px;margin-right:0px;}
.chats .messages > div>i>img{border-radius:50%;width:100%;height:100%;}

.chats .sender .sound{background-color:#CCC;color:black;height:38px;}
.chats .sender .sound.active{background-color:#4caf50;color:white;}
.chats .sender.a #button_message{display:none;}
.chats .sender.a #sound{display:none;}
.chats .sender.m #button_sound{display:none;}
.chats .sender.m #message{display:none;}
.chats .sender.m #send{display:none;}
.chats .sender .btn:focus,
.chats .sender .btn:active:focus,
.chats .sender .btn.active:focus,
.chats .sender .btn.focus,
.chats .sender .btn:active.focus,
.chats .sender .btn.active.focus {outline: 0px;outline-offset: 0px;}

.chats .sender{margin:5px;}

@media (min-width: 768px) {
	.chats .messages::-webkit-scrollbar {width:2px;height:6px;}
	.chats .messages::-webkit-scrollbar-thumb {border-radius: 10px;background:#CCC;height:200px;}
	.chats .messages::-webkit-scrollbar-track {border-radius: 0;background:#f5f6f8;}
	.chats .messages{scrollbar-width:thin;scrollbar-color: rgba(0,0,0,0.5) #f5f6f8;}
}
@media (max-width: 767px) {
	.chat-window-button{right:0.5rem; bottom:6rem;border-radius: 50%;height:4.4rem;width:4.4rem;min-width: unset;text-align: center;padding:0px;}
	.chat-window-button i{font-size: 1.5em;margin:0px;}
	.chat-window-button span{display: none;}
	.chat-window{left:0;right:0;top:0;bottom:0;}
	.chat-window{display:flex;flex-direction: column;}
	.chat-window .chat-content{flex-grow:1;display:flex;flex-flow: column;}
	.chat-window .chat-content .chats{flex-grow:1;height:100px;}
	.chats-connect{width:auto;}
	.chats{width:auto;}
}