*{margin: 0; padding: 0;}
.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}
body{font-size: 15px; background-color: #c4c4c4; font-family: "Microsoft YaHei","宋体", Arial, "新宋体";}

*{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* 修改滚动条轨道的样式 */
::-webkit-scrollbar {
width:5px;
}

/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2);
border-radius:10px;
}

/* 修改滚动条轨道的背景色 */
::-webkit-scrollbar-track {
background-color:none;
}

/* 修改滚动条轨道的样式 */
::-ms-scrollbar {
width:2px;
}

/* 修改滚动条滑块的样式 */
::-ms-scrollbar-thumb {
background-color:#333;
border-radius:10px;
}
a{text-decoration:none; color:inherit;}

/*消息*/
.sendFileContentView{width:180px;height:auto;overflow:hidden;text-align:center;}
.sendFileContentPictureView{float:left;width:35%;height:60px;text-align:center;}
.sendFileContentPicture{margin-top:5px;width:50px;height:50px;border-radius:5px;/*border:1px solid #ccc;box-sizing:border-box;*/}
.sendFileContentItemView{float:left;width:65%;height:60px;line-height:20px;color:black;}
.sendFileContentItem1{padding-left:5px;height:20px;font-size:14px;font-weight:bold;text-align:left;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.sendFileContentItem2{padding-left:5px;height:20px;font-size:11px;color:grey;text-align:left;}
.sendFileContentItem3{height:20px;color:red;text-align:right;font-size:12px;}

.clearfix::after{ content:""; display:block; clear:both;}
.service{min-width:250px;max-width: 640px;/*width: 100%;*/height: 100%; position: fixed; left: 0; right: 0; margin:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;background:#ededed}

.pc-service{width: 372px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}

.msg-head{height: 30px; background:white; box-shadow:1px 1px 2px 1px #e2e2e2; color: #333; font-size: 17px; text-align: center; position: relative;border-radius:0 0 20px 20px;}
.msg-head a{width: 40px; height: 40px; line-height: 40px; position: absolute; left: 2px; text-decoration: none; color: #353535;}
.msg-head a i{font-size: 22px;}
.msg-head .tha{height: 20px; line-height:22px;font-size:14px;font-weight:bold;}
.msg-head .thb{height:20px; line-height:20px; font-size:12px;}
.msg-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; background-color: #ededed; padding: 10px 10px 25px 10px; line-height: 1.3; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: auto;} 
.msg{margin-bottom: 10px;/* 初始状态：完全透明 */  opacity: 0;  /* 定义动画 */  animation: fadeIn 0.5s ease-in-out forwards;}
.msg:last-of-type{margin-bottom: 16px}
.msg .img1{width:45px; height: 45px; float: left;}
.msg .img2{display: none;}
.msg .content{max-width: 66%;min-height:38px; float: left; border: 1px solid #f1eded; border-radius: 5px; background-color: #fff; margin: 6px 0 0 12px; padding: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-align: justify;white-space:pre-wrap;word-break: break-all;overflow-wrap: break-word;word-wrap: break-word;}
.content .indicate{width: 0; height: 0; border: 12px solid; border-color: transparent; position: absolute; top: 5px;}
.contentBS{ box-shadow: rgb(225 225 225) 3px 2px 2px 1px; }
.msg .content .left-indicate{border-right-color: #fff;  left: -20px;}
.msg .content .right-indicate{display: none;}
.msg.on .img1{display: none;}
.msg.on .img2{float: right; width:45px; height: 45px; display: block; }
.msg.on .content{float: right; margin: 6px 12px 0 0; background-color: #20c0c0;color:white;word-break: break-all;overflow-wrap: break-word;word-wrap: break-word;}
.msg.on .content .left-indicate{display: none;}
.msg.on .content .right-indicate{border-left-color: #20c0c0; right: -20px; display: block;}
.msg-box p{margin-top: -6px}
input, textarea{border: none;} 
input:focus, textarea:focus{outline: none; outline-offset: 0;}
.msg-post{height: 50px; background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px; -webkit-box-sizing: border-box; box-sizing: border-box;border-radius:15px 15px 0 0;box-shadow:1px -1px 2px 1px #ccc;}
.msg-post textarea{resize: none; font-size: 15px; line-height: 2; padding: 3px 37px 3px 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #ccc; border-radius: 10px;border:1px solid grey;box-sizing:border-box;overflow:auto;/*overflow:hidden;*/}
.msg-post textarea:focus{border: 1px solid #ccc;box-shadow:0px 0px 3px 1px rgba(0,145,250,0.8);}
.msg-post label{position: absolute; right: 73px; bottom: 5px; height: 38px; line-height: 38px;}
.msg-post label .iconfont{font-size: 36px; color: #090c84; vertical-align: -1px;}
.msg-post input[type="file"]{display: none;}
.msg-post input[type="button"]{padding: 0 12px; font-size: 15px;height:35px; margin:0 5px; border-radius: 15px; color: #fff; cursor: pointer;box-shadow:2px 2px 0 2px black;box-sizing:border-box;background:linear-gradient(to bottom right,white,#0679c7,#202080);}
.msg-post input[type="button"]:focus{background:grey;}
.msg-post .back{width: 50px; line-height: 38px; text-align: center; background-color: #35ace0; border-radius: 3px;}
.msg-post .back a{text-decoration:none; color:inherit;}

.service-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; font-size: 14px; background-color: #fff; overflow-y: auto; vertical-align: baseline;}
.user-box{padding: 10px 10px 0;}
.user-box a{text-decoration:none; color:inherit;}
.user-list{height: 46px; background-color: #f2f2f2; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; border-radius: 5px;}
.user-list img{width: 46px;}
.user-list .user{margin-left: 6px; padding-top: 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0;}
.user-list .user .name{height: 23px; line-height: 23px; font-size: 17px; color: #333;}
.user-list .user .name .ison{margin-left: 6px; font-size: 13px; color: #860808; vertical-align: 1px;}
.user-list .user .last-msg{height: 20px; line-height: 20px; color: #808080; padding-left: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-list .data{width: 82px; text-align: right;}
.user-list .data .time{height: 27px; line-height: 27px; color: #555;}
.user-list .data .num{ width: 20px; height: 17px; border-radius: 8px; background-color: red; color: #fff; text-align: center; line-height: 19px;margin-left: 62px;}
.foot{height: 38px; background-color: #e3e3e3; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 0;}
.foot > div{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 1px; margin-right: 6px; background-color: #0679c7; border-radius: 5px; color: #fff; text-align: center; line-height: 38px;}
.foot a{display: block; height: 100%; text-decoration:none; color:inherit;}

.pc-main{width: 1014px; height: 100%; position: fixed; left: 0; right: 0; margin:auto;}
.pc-left{width: 372px; height:100%; float: left; border:1px solid #afafb7; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pc-right{width: 642px; height:100%; float: left; border:1px solid #afafb7; -webkit-box-sizing: border-box; box-sizing: border-box;}

.addLink{z-index:10;position:absolute;bottom:50px;right:0px;width:50px;height:30px;line-height:30px;border-radius:10px 0 0 0;background:royalblue;color:white;text-align:center;}


.sendPictureButton{margin-top:3px;width:40px;height:30px;}

/* 定义关键帧动画 */  
@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}