body{color:#666;width:100%;background:#f5f5f5;font-size:14px;font-family:Arial,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body,ul,li,u,i,p{margin:0px;padding:0px;list-style-type:none;font-style:normal;text-decoration:none}
a{text-decoration:none;color:#666666}
*:focus{outline:none}
input{padding:10px;border:1px solid #ccc;width:100%;box-sizing:border-box;margin-bottom:10px;border-radius:5px;vertical-align:middle}
.chatfax{color:#333;height:100vh}
.chatfax td{border:1px solid #e5e5e5;position:relative}
.chatfax td svg{height:24px;color:#333;padding:5px 5px}
.chatfax td.tit{background:linear-gradient(to bottom,#fff 0%,#eee 100%)}
.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 ul{height:100%;overflow-y:scroll}
.chatfax ul li{padding:5px;margin-bottom:10px;word-break:break-all;word-wrap:break-word}
.chatfax ul li i{display:block;position:relative;color:#333;font-size:12px;font-weight:bold}
.chatfax ul li a{color:#85c17b}
.chatfax ul li i img{width:36px;height:36px;vertical-align:top;border-radius:4px;margin-right:10px}
.chatfax ul li p{position:relative;display:inline-block;max-width:240px;margin-left:46px;margin-top:10px;padding:10px;text-align:left;border-radius:4px;font-family:Arial,sans-serif;background:#fff;word-break:break-all;word-wrap:break-word}
.chatfax ul li .offbeat{margin-left:46px;margin-top:5px;font-size:10px;font-weight:normal}
.chatfax ul li p b{display:block;position:absolute;top:8px;right:-20px;cursor:pointer;font-size:12px}
.chatfax ul li p b i{color:#ccc}
.chatfax ul li p b.revoke{position:absolute;width:20px;top:10px;left:-20px;cursor:pointer;font-size:12px}
.chatfax ul li p b.revoke i{color:#ccc}
.chatfax ul li p b.addf{top:40px}
.chatfax ul li.user{text-align:right}
.chatfax ul li.user a{text-decoration:none}
.chatfax ul li.user i img{margin-left:5px}
.chatfax ul li.user p{position:relative;margin-right:50px;background:#9AEA6F}
.chatfax ul li.user .offbeat{margin-right:50px;font-size:10px;font-weight:normal}
.chatfax ul li p img.face{height:28px;vertical-align:middle}
.chatfax ul li p img.game{height:48px;vertical-align:middle}
.chatfax ul li p.nobg{background:none}
.chatfax ul li p img.image{max-width:200px;max-height:120px;vertical-align:middle}
.chatfax ul li p video{max-width:250px;max-height:150px;vertical-align:middle}
.chatfax ul 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;line-height:100px;text-shadow:0 1px 0 #000}
.chatfax ul li.time{text-align:center;font-size:10px;color:#a7a7a7;margin-bottom:0px}
.chatfax .face_list{display:none;background:#fff;padding:10px;bottom:0px}
.chatfax .upload{position:absolute;width:100%;height:100%;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer}
.chatfax #face_menu{margin:10px;padding-bottom:10px;border-bottom:1px solid #e5e5e5}
.chatfax #face_menu span{background:#64a2f7;color:#fff;display:inline-block;padding:5px 10px;border-radius:4px}
.chatfax #face1{display:none;height:200px;overflow-y:scroll}
.chatfax #face1 img{height:28px;margin:2px}
.chatfax #face2{display:none;height:200px;overflow-y:scroll}
.chatfax #face2 img{height:60px;width:60px;margin:2px}
.chatfax #line{color:#2d72d2}
.chatfax #face_close{position:absolute;right:5px}
.chatfax #face_close i{color:#fff}
.sgins{position:absolute;left:46px;top:20px;font-size:12px;font-weight:normal}
.sgins1{position:absolute;right:50px;top:20px;font-size:12px;font-weight:normal}
.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:100%;max-height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff}
.view video{box-shadow:-2px 0px 20px #000;max-width:50%;max-height:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.button{background:#1E9FFF;border:1px solid #fff;text-align:center;color:#fff;padding:10px 20px;font-size:14px;line-height:20px;border-radius:10px}
.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%}
.edit{display:none;position:absolute;max-width:150px;background:#fff;padding:30px 20px;top:50%;left:50%;text-align:center;transform:translate(-50%,-50%);box-shadow:0px 0px 10px #666;border-radius:4px}
.edit .face{position:relative;display:inline-block}
.edit img{border-radius:10px}
.edit input{border:1px solid #eee;padding:10px;margin:20px 0px}
h1{display:inline-block;margin:0px 10px;padding:0px;font-size:14px;color:#666}
#full,#small,#close{display:none;position:absolute;top:10px;right:10px;cursor:pointer}
#close{display:block}
#full:hover,#small:hover{color:#1a73e8}
#menu{display:inline-block;margin-left:10px}
.dropdown{position:relative;display:inline-block}
.dropbtn{position:relative;padding:5px;border:none;cursor:pointer;font-size:14px;border-radius:5px;margin-left: 5px;}
.dropdown-content{display:none;position:absolute;z-index:1000;width:110px;background-color:#f9f9f9;left:0px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)}
.dropdown-content a,.dropdown-content li{position:relative;color:black;font-size:14px;padding:10px 20px;text-decoration:none;display:block}
.dropdown-content a:hover,.dropdown-content li:hover{background-color:#f1f1f1}
.dropdown:hover .dropbtn{background-color:#eee}

.ico{font-size:22px;color:#666}
.red{color:#ff0000}
.b_record{display:inline-block;margin:10px;padding:10px 15px;background:#eee;border:1px solid #ccc;cursor:pointer;border-radius:4px;font-size:12px}
#cmenu{position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;z-index:999}
#cmenu li{border-bottom:1px solid #ccc;padding:10px;cursor:pointer}
#cmenu li:hover{background-color:#eee}
#cmenu .ico{font-size:16px}
.cta,.ctb,.ctr,.ctg,.ctc{text-align:center;color:blue;margin:20px}
.ctb{color:blue}
.ctr{color:red}
.ctg{color:green}
.ctc{color:#666;font-size:12px}
.msgnum{display:none;position:absolute;z-index:9999;top:10px;padding:5px;right:30px;line-height:16px;font-size:12px;border:1px solid #ccc;background:#fff;border-radius:4px}
.msgnum a{display:block;margin:10px 5px;padding-right:20px}
.msgnum i{position:absolute;width:16px;height:16px;text-align:center;right:5px;border-radius:100%;background:red;color:#fff}
.msgnum img{height:16px;width:16px;margin-right:5px;border-radius:100%;vertical-align:middle}
.msgnum div{text-align:center;background:#eee;color:#333;padding:5px;cursor:pointer;border-radius:4px}
.rainbow-text{background:linear-gradient(45deg,#ff5e5e,#ebeb02,#6d62fb,#3cdd1f,#ff00f7,#fb00ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.rainbow1{background:linear-gradient(135deg,red,orange,yellow,green,blue,indigo,violet);background-size:300% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:rainbowMove 2s linear infinite}
@keyframes rainbowMove{0%{background-position:100% 0}
100%{background-position:0% 100%}
}#line{cursor:pointer}
#luser{display:none;position:absolute;padding:10px;z-index:999;left:100px;background:#fff;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2)}
#logs{position:relative;display:inline-block}
#ino{position:absolute;top:14px;right:40px;color:#a7a7a7;font-size:12px;transition:opacity 2s ease-out}
#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}
.msg_tips{position:absolute;left:50%;top:50%;margin-left:-124px;z-index:19891045;text-align:center;background-color:#666;box-shadow:0 10px 30px 0 rgba(68,74,102,.5)!important;text-align:center;color:#fff;border-radius:5px;padding:12px 24px;text-align:center;line-height:24px;font-size:14px;min-width:200px;transition:all .1s ease-in}
.msg_tips{animation:3s opacity 0s infinite;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes opacity{0%{opacity:0;transform:translateY(0)}
50%{opacity:1;transform:translateY(-30px)}
75%{opacity:1;transform:translateY(-30px)}
100%{opacity:0;transform:translateY(-60px)}
}.newmsg{position:fixed;display:none;font-size:12px;left:10px;bottom:80px;z-index:99999;padding:5px;background:#ff0000;color:#fff;box-shadow:0 0 5px 0 rgba(64,60,67,.16);opacity:1;animation:breathe 2s infinite ease-in-out;border-radius:8px}
.newmsg b{display:block;font-size:18px;text-align:center}
@keyframes breathe{0%{opacity:1}
50%{opacity:0.6}
100%{opacity:1}
}.rainbow2{background:linear-gradient(135deg,#FFD700,#FFCC00,#FFB300,#FF9900,#CC8400,#B57700);background-size:300% 100%;color:transparent;background-clip:text;-webkit-background-clip:text;animation:rainbowMove 2s linear infinite}
@keyframes rainbowMove{0%{background-position:100% 0}
50%{background-position:0% 100%}
100%{background-position:100% 0}
}.gold{display:inline-block;padding:15px;width:160px;border-radius:4px;background:#eb9519}
.gold .icon{color:#fff;font-size:20px;line-height:36px;width:36px;height:36px;border:2px solid #fff;border-radius:100%;text-align:center}
.gold .num,.gold .txt{color:#fff;display:inline-block;position:absolute;left:80px;width:100px;height:20px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gold .num{top:26px;font-size:14px;font-weight:bold}
.gold .txt{top:48px;font-size:12px;font-weight:normal}
.tooltip-container{position:absolute;left:-20px;top:10px;z-index:999}
.tooltip{position:absolute;top:30px;left:10px;background-color:#555;color:white;padding:10px;border-radius:5px;font-size:14px;text-align:center;min-width:100px}
.tooltip::after{content:'';position:absolute;top:-20px;left:20px;border-width:10px;border-style:solid;border-color:transparent transparent #555 transparent}
.signrw{color:#fff;background:#e9aa1e;padding:2px;font-size:10px;border-radius:2px;font-weight:normal}
#pMenu{position:absolute;display:none;background-color:#fff;padding:10px;border:1px solid #ccc;box-shadow:0 2px 4px rgba(0,0,0,.2);border-radius:5px;z-index:99998}
#pMenu button{display:block;width:100%;padding:5px;background:#fff;color:#000;padding:5px 10px;border:none;font-size:14px;text-align:right}
#pMenu button:hover{background:#e0e0e0}
#quote-td{font-size:12px;text-align:center}
#quote-text-del{position:absolute;right:10px;top:10px;color:#ffff00;font-size:14px;z-index:99998}
#quote-text-del i.icon{font-size:20px}
#quote-text img{max-height:60px}
.quote{display:inline-block;box-sizing:border-box;width:100%;font-size:12px;color:#000;background-color:#ededed;padding:5px;border-bottom:1px solid #e5e5e5}
#tools td{padding:10px 5px;height:10px;background-color:#666;color:#fff}
#tools{display:none}
#voice{display:none;position:relative}
#voice td{position:relative}
#recordBtn{position:absolute;top:0px;height:100%;width:100%;align-items:center;justify-content:center;cursor:pointer;user-select:none;background:#fff;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}
#keyboard_show{display:none}
@keyframes blink{0%{opacity:1}
50%{opacity:0.3}
100%{opacity:1}
}.voicem{display:inline-flex;align-items:center;min-width:40px;user-select:none;color:#666}
.voicem s{font-weight:normal;font-size:18px;color:#666;margin-right:10px;text-decoration:none;width:18px}
#keydown{font-size:12px}
.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{display:none;position:absolute;z-index:1000;width:39px;background-color:#f4f4f4;right:0px;bottom:47px}
.more li{cursor:pointer;user-select:none;position:relative;border:1px solid #e5e5e5;width:37px;height:37px;background-color:#f5f5f5;margin:1px;display:flex;align-items:center;justify-content:center}
#new-mask{display:none;position:fixed;z-index:9998;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
#new-popup{display:none;position:fixed;z-index:9999;top:50%;left:50%;width:300px;transform:translate(-50%,-50%);background:#fff;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,0.3)}
#new-popup .new-title{padding:12px;font-weight:bold;background:#f5f5f5;border-bottom:1px solid #ddd;text-align:center;color:#666;border-radius:4px}
#new-popup .new-content{padding:15px}
#new-popup .new-buttons{display:flex;justify-content:space-between;padding:10px 15px;border-top:1px solid #eee}
#new-popup .new-buttons button{width:48%;padding:10px;font-size:14px;border:none;border-radius:4px;cursor:pointer}
#new-popup .new-confirm{background:#64a2f7;color:white}
#new-popup .new-cancel{background:#64a2f7;color:white}
body.dark-mode{background:#121212;color:#e0e0e0}
body.dark-mode .chatfax ul{background:#121212}
body.dark-mode a{color:#90caf9}
body.dark-mode a:hover{color:#ffcc80}
body.dark-mode .chatfax td,body.dark-mode .chatfax ul li p{background:#1e1e1e;color:#e0e0e0;border-color:#333}
body.dark-mode .chatfax ul li.user p{background:#2e7d32;color:#fff}
body.dark-mode .chatfax td.tit{background:linear-gradient(to bottom,#1e1e1e 0%,#2a2a2a 100%)}
body.dark-mode .chatfax ul li i{color:#ccc}
body.dark-mode .chatfax ul li .offbeat{color:#999}
body.dark-mode .button{background:#3949ab;border-color:#555}
body.dark-mode .dropdown-content{background-color:#2a2a2a;color:#e0e0e0}
body.dark-mode .dropdown-content a:hover{background-color:#3a3a3a}
body.dark-mode .ico{color:#ccc}
body.dark-mode .b_record{background:#2e2e2e;border-color:#555;color:#eee}
body.dark-mode .edit{background:#2a2a2a;color:#ddd;box-shadow:0px 0px 10px #444}
body.dark-mode .voice-btn{background:#4caf50;color:#fff}
body.dark-mode #waveform{background:#333}
body.dark-mode .tooltip{background:#444}
body.dark-mode .tooltip::after{border-color:transparent transparent #444 transparent}
body.dark-mode .msg_tips{background-color:#333}
body.dark-mode .newmsg{background:#c62828;color:#fff}
body.dark-mode .quote{background-color:#2a2a2a;color:#ccc;border-bottom-color:#444}
body.dark-mode #pMenu{background-color:#2a2a2a;border-color:#555}
body.dark-mode #pMenu button{background:#2a2a2a;color:#eee}
body.dark-mode #pMenu button:hover{background:#3a3a3a}
body.dark-mode .chatfax textarea,body.dark-mode .chatfax input{background-color:#2a2a2a;color:#e0e0e0}
body.dark-mode .more{background-color:#333333}
body.dark-mode .more li{border:1px solid #333333;background-color:#1e1e1e}
#vipText{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;font-weight:bold;color:red;z-index:999;animation:heartBeat 3.5s ease-in-out infinite}
.show{opacity:1 !important;visibility:visible !important}
canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}
#waveform{position:relative}
@keyframes heartBeat{0%{transform:translate(-50%,-50%) scale(1)}
14%{transform:translate(-50%,-50%) scale(1.5)}
28%{transform:translate(-50%,-50%) scale(1)}
42%{transform:translate(-50%,-50%) scale(1.5)}
70%{transform:translate(-50%,-50%) scale(1)}
100%{transform:translate(-50%,-50%) scale(1)}
}