.chatfax {position: absolute;color:#333;height:100%;width:100%;background:#f5f5f557;font-size:14px;font-family:Arial,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.chatfax td{border:1px solid #e5e5e5;position:relative}
.chatfax td svg{height:24px;color:#333;padding:5px 5px}
.chatfax form{font-family:Arial,sans-serif}
.chatfax textarea,.chatfax input{width:100%;vertical-align:middle;height:100%;border:none;margin:0px;padding:0px;font-family:Arial,sans-serif;box-sizing:border-box}
.chatfax input.dou{display:inline-block;border:1px solid #eee;width:60px;width:80px;padding:6px}
.chatfax textarea{padding:5px}

.chatfax .left {width: 40px;}
.chatfax .left a{height: 100%;display: inline-block;}
.chatfax .right {flex: 1;flex-shrink: 0;}
.chatfax .uset-intro {font-size:12px;margin:0px 10px;}
.chatfax .uset-intro span{display: inline-block;margin-right:3px;vertical-align: middle;line-height: 20px;}
.chatfax .uset-intro .name {max-width: 140px;font-weight: bold;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chatfax .list {height: 100%; position: absolute;    top: 0px;    bottom: 0px;    left: 0;    right: 0;    overflow-y: auto;  overflow-x: hidden;  display: flex;    flex-direction: column-reverse;}
.chatfax .list li{display: flex;justify-content: space-between;padding:5px;margin-bottom:10px;word-break:break-all;word-wrap:break-word}
.chatfax .list li i{display:block;width: 40px;flex-shrink: 0;position:relative;font-size:12px;font-weight:bold}
.chatfax .list li a.mention {color:#5c9bf3}
.chatfax .list li .left img{width:36px;height:36px;vertical-align:top;border-radius:4px;margin-right:10px;cursor:pointer;}
.chatfax .list li p{min-width: 0;position:relative;display:inline-block;max-width:240px;margin:0px 50px 0px 10px;padding:10px;text-align:left;border-radius:4px;white-space: pre-wrap;-webkit-line-clamp: 2;background:#fff;word-break:break-all;word-wrap:break-word}
.chatfax .list li .offbeat{margin-left:46px;margin-top:5px;font-size:10px;font-weight:normal}
.chatfax .list li p b{display:block;position:absolute;width:16px;height:16px;top:6px;right:-26px;cursor:pointer;font-size:12px}
.chatfax .list li p b i{color:#ccc}
.chatfax .list li p b.revoke{position:absolute;width:20px;top:10px;left:-20px;cursor:pointer;font-size:12px}
.chatfax .list li p b.revoke i{color:#ccc}
.chatfax .list li p b.addf{top:40px}
.chatfax .list li.cahtuser {text-align:right}
.chatfax .list li.cahtuser a{text-decoration:none}
.chatfax .list li.cahtuser p{position:relative;margin-right:10px;margin-left: 50px;background:#9AEA6F}
.chatfax .list li p img.face{height:28px;vertical-align:middle}
.chatfax .list li p img.game{height:48px;vertical-align:middle}
.chatfax .list li p.nobg{background:none;padding: 0px;}
.chatfax .list li p.normal{white-space: nowrap;}
.chatfax .list li p.emoji {font-size:48px;left: -20px;}

.chatfax .list li p span{position:absolute;background-color:rgba(0,0,0,0.6);width:100%;height:100%;right:0;top:0;font-size:18px;text-align:center;color:#fff;text-shadow:0 1px 0 #000}
.chatfax .list li.time{text-align:center;display: block;font-size:10px;color:#a7a7a7;margin-bottom:0px}

.chat-image {display: block;max-width:200px;max-height:120px;vertical-align:middle}
.chat-video {display: block;max-width:250px;max-height:150px;vertical-align:middle}

audio {max-width: 240px;}

.chatfax .intro {text-align: center;margin: 0px 20px;}
.chatfax .intro span{font-size:12px;padding: 10px 20px;display: inline-block;background: #fff;word-break: break-all;word-wrap: break-word;border-radius:4px;}
.chatfax .upload{position:absolute;width:100%;height:100%;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer}

.chat-title {display:flex;justify-content: space-between;align-items: center;height:100%;}

.chat-tips{color:#a7a7a7;font-size:12px;transition:opacity 1s ease-out;max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-close {width: 40px;  height: 40px;  line-height: 40px;  text-align: center;cursor:pointer}
.chat-name{display:inline-block;font-weight: bold;margin-right:10px;padding:0px;font-size:14px;max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.line-num{cursor:pointer;color: #8383839c;font-size: 12px;margin-right:10px;}
.input-status {color: #8383839c;font-size: 12px;}
.chatfax .dropbtn {padding:0px 15px;}
.chatfax .dropdown-content {left: 0px;}
.chatfax .dropdown-content a{padding:0px}
.chatfax .dropdown-content li {cursor:pointer}

.chatfax .gold {display:inline-block;padding:15px;width:160px;border-radius:4px;background:#eb9519;white-space: nowrap;position: relative;}
.chatfax .gold s{text-decoration: none;display: inline-block;}
.chatfax .gold .icon{color:#fff;font-size:20px;line-height:36px;width:36px;height:36px;border:2px solid #fff;border-radius:100%;text-align:center}
.chatfax .gold .num , .gold .txt{color:#fff;position:absolute;left:80px;width:100px;height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chatfax .gold .num{font-size:14px;font-weight:bold}
.chatfax .gold .txt{top:36px;font-size:12px;font-weight:normal}

.title-left{display:flex;align-items: baseline;gap:0px;}
.title-right{display:flex;	align-items: baseline;	margin-left:auto;	gap:6px;}

.face-panel{display:none;background:#fff;padding:10px;bottom:0px}
.face-close {position:absolute;right:5px}
.face-close i{color:#fff}
.face-menu{margin:10px;padding-bottom:10px;border-bottom:1px solid #e5e5e5}
.face-menu span{background:#64a2f7;color:#fff;display:inline-block;padding:5px 10px;border-radius:4px}
.face-list {display: flex; flex-wrap: wrap; justify-content: space-evenly;height:200px;overflow-y:scroll}
.face-list img{height:32px;margin:2px}
.doutu-list {display: none; flex-wrap: wrap; justify-content: space-evenly;height:200px;overflow-y:scroll}
.doutu-list img{height:60px;width:60px;margin:2px}

.invite-call {position: fixed;z-index: 99999;background:#000000b5;color:#fff;font-size:14px;bottom:80px;left: 50%; transform: translateX(-50%);width:230px;text-align: center;padding:20px;border-radius:10px;}
.invite-call img {width:160px;height:160px;border-radius:50%}
.invite-call p {margin:5px 0px;}
.invite-call button {padding:7px 20px;color:#fff;border:0px;border-radius:4px;margin:5px;background:#ffa6009a;}
.invite-call .but1 {background: #f44336;}
.invite-call .but2 {background: #00c853;}

.call-box-0{position:fixed;top: 50%; left: 50%;width:100%;height:100%;background:#000;display:flex;align-items:center;justify-content:center;border-radius: 10px;z-index: 99999;transform: translate(-50%, -50%);}
.call-box-0 iframe{width:100%;height:100%;border:none;display:block;border-radius: 10px;}

.call-box-1{position:fixed;top: 50%; left: 50%;width:320px;height:360px;background:#000;display:flex;align-items:center;justify-content:center;border-radius: 10px;z-index: 99999;transform: translate(-50%, -50%);}
.call-box-1 iframe{width:100%;height:100%;border:none;display:block;border-radius: 10px;}

.view{position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);width:100%;height:100%;z-index:99999;text-align:center;display:table}
.view img{box-shadow:-2px 0px 20px #000;max-width: 95vw;max-height: 95vh;width: auto;height: auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff}
.view video{box-shadow:-2px 0px 20px #000;	max-width: 95vw;max-height: 95vh;width: auto;height: auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

@media (min-width: 361px) {
  .call-box-0 {
      width: 360px;
      left: 50%;
  }
}

@media (min-height: 641px) {
  .call-box-0 {
      height: 640px;
      top: 50%;
  }
}


.chatfax .line-user {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}


.loader {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0,0,0,0.2);
	border-top-color: #000;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.chat-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	pointer-events: none;
}

.button{background:#1E9FFF;border:1px solid #fff;text-align:center;color:#fff;padding:10px 20px;font-size:14px;line-height:20px;border-radius:10px}

.chat-video::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAABHcEwAAAAAAAA5OTkAAAB/f3/19fXOzs6ysrLk5OT///8P0uRtAAAAEXRSTlOAEgE0SXhnAB5VkECq9dfF52B47JgAAAE+SURBVEjHpZbhkoMgDITXEGiitcr7v+wpc9eRQihy+0/bb2JISBaPT5E41uABH5SdUPEHfDzLEpApLNJERD0Kec1DXRFhGGKpIuQCTAVHJTIxmuLpE5kUX6QTXRH6TpzMFekh3kxCiNElpjfi0Cn3h0joRYL8IoxucUJIfD8CSVH0BgE9kVtB4OVAluL1a24wy4GUxxXj1jg0gqCCxPVpHwBcFYlxtyAHNpAYjZQYaiJxraakCDZSTynAt5AjpeLrqmWMmV49Fc6RHR1xrsD6nAugmX7c5kr6jUOuV0YbpdytUloNs9oNY7Tl1mhLqja/fWPC2BUbuMgD4+JWGH8stGOO0Z3RRykK3RmwNDzGR5bFwErqY/LFR9SzXv+/xEesQjIkRh94w5AkX2XYHtspEdXNFVHLj53fl1m48vcfDEsZ4mf/bygAAAAASUVORK5CYII=) no-repeat 50% 50%}


.ico{font-size:22px;color:#666}
.chat-record-btn{display:inline-block;margin:10px;padding:10px 15px;color:#fff;background: #81818191;cursor:pointer;border-radius:4px;font-size:12px}

.cta,.ctb,.ctr,.ctg,.ctc{text-align:center;color:blue;margin:5px;padding: 10px 20px;font-size: 12px;}
.ctb{color:blue}
.ctr{color:red}
.ctg{color:green}
.ctc{color:#666;font-size:12px;margin:5px}
.cti{text-align:center;}

.quote-td{font-size:12px;text-align:center}
.quote-close{position:absolute;right:10px;top:10px;color:#ffff00;font-size:14px;z-index:2}
.quote-close i.icon{font-size:20px}
.quote-text img{max-height:60px}
.quote-panel td{padding:10px 5px;height:10px;background-color:#666;color:#fff}
.quote-panel,.chat_camera{display:none}
.quote {display:block;box-sizing:border-box;margin-bottom: 10px;padding:10px;font-size:12px;background-color:#ededed;padding:5px}

.voice-panel{display:none;position:relative}
.voice-panel td{position:relative}
.recordBtn{position:absolute;top:0px;height:100%;width:100%; text-align: center; padding: 10px;cursor:pointer;user-select:none;display:none}
.controls{display:none;text-align:center;padding:10px 0px}
.controls button{margin:0 10px;padding:8px 16px;border:none;border-radius:6px;font-size:14px}
.playBtn{background:#007aff;color:white}
.sendBtn{background:#34c759;color:white}
.cancelBtn{background:#ff3b30;color:white}
.waveform{width:100%;height:60px;display:none;background:#f2f2f2;border-radius:8px}
.audioPlayer{display:none;width:100%}
.voice-block{display:inline-block}
.voice-btn{display:inline-block;background-color:#9eea6a;color:#000;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer;user-select:none;position:relative;margin:10px 0}
.voice-btn.playing::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:red;animation:blink 1s infinite}
.voice-loading {display:none;position:absolute;width:100%;height:100%;border-radius:10px;line-height:30px;padding-top:20px;left:0px;top:0px;z-index:99999;text-shadow:0 1px 0 #fff;background-color:rgba(0,0,0,0.1);text-align:center;box-sizing:border-box}

.chat-keyboard-btn{display:none}

.voicem {display:inline-flex;align-items:center;min-width:40px;user-select:none;}
.voicem s{font-weight:normal;font-size:18px;margin-right:10px;text-decoration:none;width:18px}

.icon-volume{font-family:"FontAwesome" !important;display:inline-block;font-weight:normal;font-size:18px;text-decoration:none;animation:changeIcon 1s steps(1) infinite}
@keyframes changeIcon{0%{content:"\f026"}
33%{content:"\f027"}
66%{content:"\f028"}
100%{content:"\f026"}
}
.icon-volume::before{content:"\f001";animation:changeIcon 1s steps(1) infinite}
.icon-volume::before{font-family:"FontAwesome";display:inline-block;font-size:18px;content:"\f026"}
.icon-step-1::before{content:"\f026"}
.icon-step-2::before{content:"\f027"}
.icon-step-3::before{content:"\f028"}

.more-panel{display:none;}
.more {display: flex;justify-content: space-around;}
.more input {cursor:pointer;}
.more li{cursor:pointer;user-select:none;position:relative;text-align: center;}
.more li span{display: inline-block;font-size: 12px;margin-left:6px;}

.show{opacity:1 !important;visibility:visible !important}

.ctc.stop::after {
    content: '' !important;           /* 清空三个点 */
    animation: none !important;
}