/*
	通讯模块样式
	@author lixiaodi lixiaodiAngel@gmail.com
	@function 即时通讯监听、私聊窗口初始化
*/
@charset "utf-8";
.my-chat-box {
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 9;
}
.my-chat-box.singleChat {
    position: fixed;
    right: initial;
    bottom: initial;
    width: 100%;
    top: 0;
    height: 100%;
}
.my-chat-box.singleChat .shade {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    padding-top: 70px;
}
.my-chat-box .my-chat-box-Frame {
    width: 574px;
    height: 446px;
    background-color: #f4f6f8;
    position: relative;
    z-index: 7;
    box-shadow:0 1px 4px 0 rgba(0,0,0,0.50);
	border-radius:3px;
}
.my-chat-box.singleChat .my-chat-box-Frame {
    width: 797px;
    height: auto;
    margin: 0 auto;
}
.my-chat-box-Frame .my-chat-box-left {
    display: inline-block;
    width: 185px;
    height: 100%;
    vertical-align: top;
}
.my-chat-box-Frame .my-chat-box-right {
    display: inline-block;
    width: 389px;
    height: 100%;
    vertical-align: top;
}
.singleChat .my-chat-box-Frame .my-chat-box-right {
    width: 100%;
}
.my-chat-box-Frame .my-chat-box-left-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 12px;
    box-shadow:0 1px 1px 0 rgba(0,0,0,0.10);
}
.my-chat-box-Frame .my-chat-box-right-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 16px;
    padding-right: 20px;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
}
.singleChat .my-chat-box-Frame .my-chat-box-right-title{
    text-align: center;
    padding-left: 36px;
}
.my-chat-box-Frame .my-chat-box-right-title .current-contact-name{
    font-size: 18px;
    color: #444444;
    font-family: SimHei;
}
.my-chat-box-left-title input.search-contacts-input {
    border: 1px solid rgba(59,104,184,0.30);
    border-radius: 3px;
    width: 162px;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
}
.my-chat-box-right-title .close-chatBox {
    cursor: pointer;
    font-size: 28px;
    color: rgb(59,104,184);
    /*font-weight: bold;*/
}
.my-chat-box-Frame .my-chat-box-left-mainContent {
    width: 100%;
    height: 350px;
}
.my-chat-box-Frame .my-chat-box-right-mainContent {
    width: 100%;
    height: 350px;
    background-color:#ebeff3;
    position: relative;
}
.singleChat .my-chat-box-Frame .my-chat-box-right-mainContent {
    height: 433px;
}
.my-chat-box-Frame .my-chat-box-footer {
    width: 100%;
    height: 45px;
    line-height: 45px;
    box-shadow:0 -1px 1px 0 rgba(0,0,0,0.10);
}
.singleChat .my-chat-box-Frame .my-chat-box-footer {
    height: 90px;
    line-height: 90px;
}
.my-chat-box-Frame .my-chat-box-footer>a {
    font-size: 14px;
    color: #3b68b8;
    padding-left: 50px;
}
.my-chat-box-Frame .my-chat-box-footer>input {
    margin-left: 8px;
    border: 1px solid #3b68b8;
    border-radius: 3px;
    width: 302px;
    height: 28px;
    padding-left: 10px;
}
.singleChat .my-chat-box-Frame .my-chat-box-footer>input {
    width: 659px;
    height: 40px;
    margin-left: 26px;
    margin-right: 20px;
}
.my-chat-box-Frame .my-chat-box-footer .send-localPic,.my-chat-box-Frame .my-chat-box-footer .send-faceBag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
    position: relative;
}
.singleChat .my-chat-box-Frame .my-chat-box-footer .send-localPic,.singleChat .my-chat-box-Frame .my-chat-box-footer .send-faceBag{
    margin-left: 15px;
}
.my-chat-box-Frame .my-chat-box-footer .send-localPic input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.my-chat-box-Frame .my-chat-box-footer .send-localPic i{
    background-image: url(https://iplaymtg.oss-cn-beijing.aliyuncs.com/static/images/personal/uploadImgLogo_hover_style.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 18px;
    height: 18px;
}
.my-chat-box-Frame .my-chat-box-footer .send-faceBag i{
    background-image: url(https://iplaymtg.oss-cn-beijing.aliyuncs.com/static/images/personal/faceLogo_hover_style.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    width: 20px;
    height: 20px;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list {
	width: 100%;
    height: 100%;
    overflow: hidden;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list:hover{
    overflow: auto;
}
.my-chat-box-contacts-list .loading-tip {
    text-align: center;
    padding: 10px;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li{
	padding: 10px 12px;
	overflow: hidden;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li:hover {
    background-color: #ebeff3;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li.active{
    background-color: #ebeff3;
}
li.chatBox-contact-item+li.chatBox-contact-item {
    border-top: 1px solid #e1e6f0;
}
li.chatBox-contact-item .contactHeadImg {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    float: left;
}
li.chatBox-contact-item .contactHeadImg>img {
    width: 100%;
    height: 100%;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li .contact-info-area {
    padding-left: 38px;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li .contact-info-name {
    font-size: 14px;
    color: #444444;
    max-width: 124px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-chat-box-Frame ul.my-chat-box-contacts-list>li .contact-info-foot {
    font-size: 12px;
    color: #646464;
}
.my-chat-box-Frame ul.my-chat-box-chatingBoard {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    padding: 17px 0;
}
.my-chat-box-Frame ul.my-chat-box-chatingBoard.shield {
    height: 312px;
}
.singleChat .my-chat-box-Frame ul.my-chat-box-chatingBoard.shield {
    height: 395px;
}
.my-chat-box-Frame ul.my-chat-box-chatingBoard li {
    overflow: hidden;
    margin-bottom: 20px;
    padding: 0 17px;
    cursor: default;
}
.my-chat-box-Frame .remind-tip-txt {
    text-align: center;
    padding: 10px;
}
/*用户接收的消息*/
ul.my-chat-box-chatingBoard li.leftMsg>div {
    float: left;
}
ul.my-chat-box-chatingBoard li.leftMsg .userHeadImg {
    width: 30px;
    height: 31px;
    border-radius: 100%;
    overflow: hidden;
}
.singleChat ul.my-chat-box-chatingBoard li.leftMsg .userHeadImg {
    width: 42px;
    height: 42px;
}
ul.my-chat-box-chatingBoard li.leftMsg .userHeadImg>img {
    width: 100%;
    height: 100%;
}
ul.my-chat-box-chatingBoard li.leftMsg .txtMsg {
    padding-top: 5px;
    margin-left: 10px;
    max-width: 241px;
    word-break: break-all;
    padding: 11px;
    background-color: #ffffff;
    font-size: 12px;
    color: #525252;
    line-height: 1.7;
    border:1px solid #e3e3e3;
    box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);
    border-radius:5px;
}
.singleChat ul.my-chat-box-chatingBoard li.leftMsg .txtMsg {
    max-width: 449px;
    font-size: 16px;
    padding: 5px 11px;
}
ul.my-chat-box-chatingBoard li.leftMsg .imgMsg {
    padding-top: 5px;
    margin-left: 10px;
    max-width: 241px;
    word-break: break-all;
    padding: 11px;
}
.singleChat ul.my-chat-box-chatingBoard li.leftMsg .imgMsg{
    max-width: 449px;
}
ul.my-chat-box-chatingBoard li.leftMsg .imgMsg>img {
    max-width: 100%;
}

/*用户发出的消息*/
ul.my-chat-box-chatingBoard li.rightMsg>div {
    float: right;
}
ul.my-chat-box-chatingBoard li.rightMsg .userHeadImg {
    width: 30px;
    height: 31px;
    border-radius: 100%;
    overflow: hidden;
}
.singleChat ul.my-chat-box-chatingBoard li.rightMsg .userHeadImg {
    width: 42px;
    height: 42px;
}
ul.my-chat-box-chatingBoard li.rightMsg .userHeadImg>img {
    width: 100%;
    height: 100%;
}
ul.my-chat-box-chatingBoard li.rightMsg .txtMsg {
    padding-top: 5px;
    margin-right:10px;
    max-width: 241px;
    word-break: break-all;
    padding: 11px;
    background-color: #87cab3;
    font-size: 12px;
    color: #525252;
    line-height: 1.7;
    border:1px solid #6db79e;
    box-shadow:0 1px 1px 0 rgba(0,0,0,0.25);
    border-radius:5px;
}
.singleChat ul.my-chat-box-chatingBoard li.rightMsg .txtMsg{
    max-width: 449px;
    font-size: 16px;
    padding: 5px 11px;
}
ul.my-chat-box-chatingBoard li.rightMsg .imgMsg {
    padding-top: 5px;
    margin-right: 10px;
    max-width: 241px;
    word-break: break-all;
    padding: 11px;
}
.singleChat ul.my-chat-box-chatingBoard li.rightMsg .imgMsg{
    max-width: 449px;
}
ul.my-chat-box-chatingBoard li.rightMsg .imgMsg>img {
    max-width: 100%;
}
/*表情包样式*/
.my-chat-box-Frame .face_bag {
    position: absolute;
    bottom: 34px;
    right: -17px;
    background: #ffffff;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
    border-radius: 3px;
    width: 380px;
}
.singleChat .my-chat-box-Frame .face_bag {
    width: 521px;
}
.my-chat-box-Frame .facebag-area {
    width: 100%;
}
.my-chat-box-Frame .facebag-series {
    overflow: hidden;
    padding: 5px 15px;
    border-bottom: 1px solid rgb(213,213,213);
}
.my-chat-box-Frame .facebag-series>ul>li {
    float: left;
    font-size: 14px;
    margin-right: 20px;
    color: rgb(120,120,120);
    cursor: pointer;
    height: 30px;
    line-height: 30px;
}
.my-chat-box-Frame .facebag-series>ul>li.active {
    color: rgb(59,104,184);
}
.my-chat-box-Frame .facebag-series>ul>li.active:after {
    content: '';
    position: absolute;
    border-top: 2px solid rgb(59,104,184);
    width: 100%;
    bottom: -5px;
    left: 0;
}
.my-chat-box-Frame .facebag-images {
    clear: both;
    overflow: auto;
    padding: 10px 10px 10px 15px;
    height: 165px;
}
.singleChat .my-chat-box-Frame .facebag-images {
    height: 231px;
}
.my-chat-box-Frame .facebag-images>img {
    float: left;
    display: inline-block;
    width: 78px;
    height: 78px;
    cursor: pointer;
    margin-right: 6px;
    margin-bottom: 16px;
}
.singleChat .my-chat-box-Frame .facebag-images>img {
    width: 89px;
    height: 89px;
}
/*历史消息*/
.my-chat-box-Frame .history-line {
    text-align: center;
    font-size: 12px;
    color: #b7c8d7;
    padding-bottom: 15px;
}
.my-chat-box-Frame .check-history-msg {
    text-align: center;
    color: rgb(59,104,184);
    padding-bottom: 15px;
    cursor: pointer;
}
/*屏蔽*/
.my-chat-box-Frame .unfold-logo {
    width: 15px;
    height: 15px;
    margin-right: 25px;
    margin-top: 18px;
    background-image: url(https://iplaymtg.oss-cn-beijing.aliyuncs.com/static/images/tools/cards/common/unfold_blue.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    cursor: pointer;
}
.my-chat-box-Frame .unfold-logo>div {
    position: absolute;
    border: 1px solid #e1e6ec;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.25);
    background-color: #f4f6f8;
    border-radius: 3px;
    width: 86px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    top: 23px;
    right: 3px;
    z-index: 3;
    cursor: pointer;
}
.my-chat-box-Frame .confirmShieldFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.50);
    border-radius: 3px;
}
.my-chat-box-Frame .confirmShieldFrame>div {
    position: relative;
    left: 249px;
    top: 136px;
    background-color: white;
    border-radius: 5px;
    width: 254px;
    height: 131px;
    padding: 10px;
}
.my-chat-box-Frame .confirmShieldFrame .confirm-txt {
    text-align: center;
    padding-top: 30px;
    font-size: 14px;
    color: #444444;
    height: 70px;
}
.my-chat-box-Frame .confirmShieldFrame .confirm-footer {
    margin-top: 7px;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 14px;
}
.my-chat-box-Frame .confirmShieldFrame span.cancel-shieldFrame {
    float: left;
    background: #f1f1f1;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.50);
    border-radius: 3px;
    width: 82px;
    height: 27px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
}
.my-chat-box-Frame .confirmShieldFrame span.confirm-shieldFrame {
    float: right;
    background: #3b68b8;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.50);
    border-radius: 3px;
    width: 82px;
    height: 27px;
    color: white;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
}
.my-chat-box-Frame .my-chat-box-right-mainContent .user-in-black {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background-color: #e2e6ea;
    padding-left: 17px;
    font-size: 14px;
    color: #444444;
    z-index: 2;
}
.my-chat-box-Frame .my-chat-box-right-mainContent .user-in-black>span {
    color: rgb(59,104,184);
    cursor: pointer;
}