/* 全局滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    /*background-color: #fff;*/
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
::-webkit-scrollbar-thumb{
    background-color: #bfc1c4;
    border-radius: 10px;
}
.chat-interaction,.voice-interaction{
    width:100%;
    height: 100%;
    background:none;
    padding:0 10px;
    border: none;
    min-height: 200px;
}
.voice-interaction{
    overflow:auto;
}
.chatcontent{
    display: block;
    position: relative;
    height: calc(100% - 20px);
    width: 100%;
    overflow: auto;
}
.history-chatcontent,.search-history-chatcontent,.prenext-history-chatcontent{
    height: 100%;
    overflow: auto;
    display: none;
}
.prenext-history-chatcontent1{
    height:calc(100% - 40px);
    width:100%;
    overflow: auto;
}
.loading-state {
    height: 64px;
    line-height: 64px;
    font-size: 12px;
    color: #9499a0;
    text-align: center;
}
/*********************************  横版页签   *************************************/
.chat-nav{
    width:100%;
    padding:0px 5px;
    border-bottom:1px solid #e2e2e2;
    clear:left;
    display:none;
    max-height:112px;
}
.chat-nav .nav-tabs{
    border-bottom:0px;
    width:100%;
    overflow-y: scroll;
}
.chatRecord{
    height: 51px;
    background-color:#f2f3f8;
    border: 1px solid #dddddd !important;
    border-radius: 0px 25px 0px 0px !important;
    border-bottom: none !important;
    margin:1px;
    position: relative;
    cursor: pointer !important;
    width:19%;
    float:left;
}
.recordInfo{
    margin-left:5px;
    width: 80%;
    width:-moz-calc(100% - 35px);
    width:-webkit-calc(100% - 35px);
    width: calc(100% - 35px);
    overflow: hidden;
}
.recordInfo .recordMsg{
    width:100%;
    height: 50%;
    line-height: 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.recordInfo .userId{
    font-weight:bold;
}
.record-base-info .channelType{
    float: left;
    width: 30px;
    padding: 5px 0 0 3px;
    color: #3167af;
}
.record-base-info .channelType .iconfont{
    font-size: 24px;
}
/*********************************  竖版页签   *************************************/
.ver-chat-record {
    height: 80px;
    width: 100%;
    cursor: pointer;
    padding: 5px 0 0 5px;
}

.ver-chat-record-angry{
    border-left: 3px solid #ff3939;
}
.ver-chat-record:hover{
    background-color: #f2f3f8 !important;
}
.record-base-info .star {
    padding: 0 5px;
    float: left;
}
.record-base-info {
    width: 100%;
    height: 100%;
    margin-bottom: 0px !important;
}
.record-base-info .record-msg{
    width: 100%;
    height:50%;
    line-height: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.record-base-info .last-msg{
    width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:12px;
    color: #8f8f91;
    padding: 0 8px;
}
.ver-chat-record .record-base-info .userId{
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ver-chat-record-active .record-base-info .userId{
    font-size:14px;
    font-weight: bold;
    color:#3167af;
}
.ver-chat-record .record-base-info .chatTime{
    color: #8f8f91;
    text-align: right;
    padding-right: 4px;
}
.record-base-info .last-time{
    margin-right: 20px;
    color: #8f8f91;
}
.no-read-msg {
    margin: 5px;
    border-radius: 50%;
    background-color: #10bd41;
    width: 16px;
    height: 16px;
    color: white;
    text-align: center;
    line-height: 16px;
}
.message .chat-h4{
    font-size:14px;
    color:#ccc;
    height:10px;
    line-height:30px;
}
.message p{
    width:90px;
    height:25px;
    line-height:25px;
    text-align:center;
    border:1px solid #eeeef0;
    background-color:#f5f6f8;
    border-radius:0px 15px;
    margin-left:76%;
    cursor:pointer;
    color:black;
    font-size:14px;
}
.toolsType .face img{
    margin-right:12px;
    cursor:pointer;
}
.message .chatBtn{
    width:100%;
    height:35px;
    margin-top: 5px;
}
.chatBtn .chatRight .chatRightLeft{
    margin-right:5px;
}
.chatBtn h6{
    font-size:14px;
    margin:6px 5px 0px;
}
.chat-robot-location{
    position: unset !important;
    width:100% !important;
}
.chat-robot {
    position: fixed;
    right: 0px;
    bottom: 0;
    width: 280px;
    overflow-y: hidden;
    outline: none;
    display: none;
    z-index: 1;
    box-shadow: 0px 0px 0px 2px #eee;
    background: #ffffff;
}
.contentRobotHeader {
    padding: 7px 10px;
    color: #fff;
}
.chat-robot .contentRobot .url{
    float:left;
}
.chat-robot .contentRobot .url .robotResponse{
    height:100%;
    max-height: 350px;
    overflow:auto;
}
.reminder .chatRobotbutton{
    line-height: 20px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    float:left;
    width:100%;
}
.chatRobotbutton span{
    font-weight:normal;
    display:inline-block;
    margin:0px 12px;
    color:#5BB2FF;
    cursor: pointer;
}
.user{
    margin-bottom:0px;
    min-height:70px;
    overflow:hidden;
}
.user .curTime{
    color:#8F8F91;
    text-align: right;
    font-size: 12px;
    height: 23px;
    line-height: 23px;
    font-family: ArialMT;
}
.user .curTime span{
    height: 23px;
    line-height: 25px;
    display: block;
}
/* 聊天消息(左边) */
.user .headPort{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    float: left;
    margin-right: 10px;
    margin-top: -8px;
}
.user .talk_toMe{
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-right: 10px solid #edf8ff;
    border-bottom: 5px solid transparent;
    position: relative;
    top: 10px;
    float: left;
}
.user .talk_fromMe{
    width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-left: 10px solid #fff3e4;
    border-bottom: 5px solid transparent;
    position: relative;
    top: 10px;
    float: right;
}
.user .leftCon,.leftConCoach{
    padding: 8px;
    border-radius: 5px;
    float: left;
    display: inline-block;
    border-left: none;
    max-width: 70%;
    word-break: break-word;
}
.search-history-chatcontent .preNextTip{
    float:right;margin-right: 30px;display: none;
}
.chatContentActiveAudioText{
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border: 2px solid #ccc;
    border-radius: 50%;
    font-size: 14px;
    margin-top: 15px;
    margin-left: 6px;
    color: #ccc;
    cursor: pointer;
}
/* 聊天消息(右边) */
.user .meheadPort{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-left: 10px;
    float: right;
    margin-top: -8px;
}

.user .talk_toMes{
    width:0px;
    height:0px;
    border-top:5px solid transparent;
    border-left:10px solid #fff3e4;
    border-bottom:5px solid transparent;
    position:relative;
    top:20px;
    float:right;
}
.user .rightCon{
    padding:8px;
    border-radius:5px;
    float:right;
    display:inline-block;
    border-right:none;
    max-width:70%;
    word-break: break-word;
}
.preText{
    white-space: pre-wrap;
    word-break: break-word;
    color: #454545;
    font-family: "Microsoft YaHei";
    font-size: 13px;
}
.retract, .extractText{
    width:60px;
    height:23px;
    color:#999;
    font-size:12px;
    border-radius:6px;
    background:#f9faff;
    border:1px solid #dfe0e8;
    display: none;
    user-select: none;
}
.leftExtractText{
    margin-left: 60px !important;
}
.retractTitle{
    font-size: 12px;
    color: #999;
    /* border: 1px solid #f7f8fd; */
    border-radius: 6px;
    text-align: center;
    width: 100%;
    display: block;
    height: 25px;
    line-height:25px;
}

/**
 * 表情
 */
.facebox {
    position: absolute;
    width: 504px;
    height: 194px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 5px;
    z-index: 997;
    display:none;
}
.facelist,.emojiShow{
    float: left;
    width: 500px;
    height: 160px;
    /*overflow-y: auto;*/
    margin-bottom: 0px !important;
}
.facebox .emojiImg{
   width: 50px;
   height: 50px;
   padding: 2px;
   text-align:center;
}
.facelist li {
    float: left;
    width: 35px;
    text-align: center;
    line-height: 35px;
    height: 35px;
    cursor: pointer;
    list-style: none;
}
.facelist li:hover {
    background: #FCFFEF;
    border: 0px solid #f80;
    z-index: 998;
}
ul .facelist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.emojiList{
    width:100%;
    height:30px;
    overflow-x: auto;
    background-color: #f5f6fa;
}
.emojiList .emoji{
    min-width:50px;
    line-height: 30px;
    text-align: center;
    float: left;
    cursor: pointer;
    padding: 0px 5px;
}
.emojiList .emoji.active{
    background-color:#fff;
}
.emojiList .emojiCon{
    float: left;
}

/**************************************************************************************/
/**********************************   聊天图标控制   *********************************/
/**************************************************************************************/
.face div{
    width:32px;
    height:22px;
    margin-top:2px;
    margin-right:5px;
    float:left;
    z-index:1;
}

.buttonHover{
    cursor:pointer;
}

/**************************************************************************************
 *************************************聊天窗口控制**************************************
 **************************************************************************************/
.chatcontent {
    display: none;
}
.chatContentActive {
    display: block;
}
.voicecontent {
    height: 100%;
    overflow: auto;
    display: none;
}
.voiceContentActive {
    display: block;
}
.historychatContentActive {
    display: block;
}
/**************************************************************************************
 *************************************图片放大样式**************************************
 **************************************************************************************/
.preview-img-box{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 111111111111;
}
.img-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background-color: #fff;
    opacity: 0.6;
}
.preview-img{
    position: absolute;
    left: 20vw;
    top: 20vh;
    width: 60vw;
    height: 60vh;
    text-align: center;
    object-fit: contain;
    /* background-color: #fff; */
    /* opacity: 1; */
}
/***************************************************************************************
***************************************交互小结******************************************
****************************************************************************************/
.clientLeft{
    filter: grayscale(100%);/*火狐*/
    -webkit-filter: grayscale(100%);/*chrome*/
    filter: gray; /*IE7-9*/
    color:rgba(149, 149, 150, 1) !important;
}
.interChatDetail-content .el-dialog__body{
    height:450px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}

.global-overflow{
    overflow-y: auto;
    -webkit-overflow-y: auto;
    -ms-overflow-y: auto;
    -o-overflow-y: auto;
}

.star .el-icon-star-on.on{
    color: rgb(247, 186, 42);
    font-size: 16px;
}
.star .el-icon-star-on{
    color: rgb(154, 155, 158);
    font-size: 16px;
}
.chat-div{
    width:100%;
    height:55px;
    padding:0px 20px;
    border-bottom:1px solid #e2e2e2;
    clear:left;
    /*display:none;*/
}
.chat-div .nav-tabs{
    border-bottom:0px;
}
.chatTab{
    height:50px;
    background-color:#f2f3f8 !important;
    border:1px solid #dddddd !important;
    border-radius:0px 25px 0px 0px !important;
    border-bottom:none !important;
    margin-top:5px;
    position:relative;
    cursor:pointer !important;
}
.time{
    margin:0;
}

.phoneAction {
    height:50px;
    padding: 10px;
    float:left;
    line-height:50px;
    color:#3167af;
    cursor:pointer;
    display:none;
    margin-left: 10px;
}
.phoneAction em{
    width: 29px;
    height: 25px;
    margin-top: 3px;
    float: left;
    line-height: 30px;
}
.phoneAction p{
    height: 30px;
    float: left;
    margin-left:5px;
    line-height: 30px;
    text-align:center;
}
.phoneAction p:hover{
    font-weight: bold;
    transform:scale(1.1);
 }
#chatDiv{
    padding:10px 15px;
}

/***********************************************************************************************************************
*********************************************** 竖版电话页签 ************************************************************
***********************************************************************************************************************/
.record-base-info .timeLeft{
    width: calc(100% - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:12px;
    color: #8f8f91;
    margin-left: 10px;
    padding: 0 3px;
}
/***********************************************************************************************************************
***********************************************客户信息模块**************************************************************
***********************************************************************************************************************/
.customerMess{
    width: 100%;
}
#interactionSummsryHidem, .cusHide{
    margin-right:2%;
}
.cusHide, #cusHide ,#interactionSummsryHide{
    width:20px;
    height:20px;
    font-size:12px;
    line-height:20px;
    text-align:center;
    color:#3399ff;
    background-color:#e4e5ec;
    margin-top:7px;
    cursor: pointer;
}
.interactionHistory, .formHistory{
    cursor:pointer;
    color: #3167af;
    font-weight: normal;
    padding: 0 10px 0 5px;
}

.inter{
    width:100%;
    height:30px;
}
.inter span{
    height:30px;
    margin-left:20px;
    line-height:30px;
}
.inter .sidebar-caret{
    width:20px;
    height:20px;
    line-height:20px;
    background:#e4e5ec;
    color:#3167af;
    margin-right:20px;
    margin-top:5px;
}

.rows{
    width:50%;
}
.rows label{
    height:34px;
    line-height:34px;
}

/**
 * 清除交互小结浮动
 */
#phone-interact-summary:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#phone-interact-summary .el-form-item__label, .tool-bar-summary .el-form-item__label {
    font-size: 12px !important;
}

/* 工具栏 + 输入框 */
#tools{
    width:calc(100% - 40px);
    height:100%;
    padding:8px 0px;
    margin:0 auto;
}
.toolsType{
    width:100%;
    height:35px;
    line-height: 35px;
    margin:0px;
}
.toolsType .iconfont{
    font-size:18px;
}
.toolsType li{
    height:30px;
    color:#3167af;
    text-align:center;
    line-height:30px;
    cursor:pointer;
    font-size:13px;
    padding:0px 10px;
}
.message h4{
    font-size:14px;
    color:black;
    height:30px;
    line-height:35px;
}
.message .mess{
    width:100%;
    height:100%;
    font-size:14px;
    border:none;
}
/* 机器人提示(智能助手) */
.reminder {
    /*width: calc(100% - 0px);*/
    /*height:100px;*/
    overflow-y:auto;
    /*background-color:#fff3e4;*/
    /*border-top:1px solid #fee1c5;*/
    display: none;
    float: left;
}
.reminder .url{
    padding:6px 15px;
}
.reminder>.contentRobot{
    background-color: #FEF1E9;
    background: -moz-linear-gradient(top, #FEF1E9, #ffffff);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEF1E9), to(#ffffff));
    background: -o-linear-gradient(top, #FEF1E9, #ffffff);
    border-radius: 7px;
}
.chat-robot .contentRobot{
    height:100%;
    background: #fff;
}
.reminder .carousel-inner span{
    font-weight:bold;
    color:#f57710;
    line-height:30px;
    min-height:56px;
    display:block;
}
.url p{
    font-weight:bold;
    color:#FF8E00;
    line-height:30px;
    min-height:56px;
    width:100%;
    margin: 0;
    padding: 0;
    border: 0;
}
.url a{
    font-weight:bold;
    color:#3167af;
    margin-left:0%;
}
.know{
    width: calc(100% - 0px);
    height:50px;
    margin:13px auto 0px;
    background-color:#f5f6fa;
    border-radius:0px 0px 9px 9px;
}
/* 处理结束 */
#handleOver{
    padding: 10px 0;
}

.client-info-search,.client-info-cancel{
    cursor: pointer;
    color: #3167af;
    display:inline-block;
}
.tab-content > .active {
    display: block !important;
}
.customerMessItem{
    color:black !important;
    display:inline-block;
    font-weight:bold;
    font-size:12px;
    font-family: Arial;
}
.customerMessItemTitle{
    display:inline-block;
    font-size:12px;
    font-family: Arial;
    color: gray;
    font-weight: normal;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
.verifySuccessTip{
    color:blue;
    text-align: center;
}
.verifyFailTip{
    color:red;
    text-align: center;
}
#chatCustomerMess,#phoneCustomerMess{
    border:0 !important;
}
#chatCustomerMess .customerMessItemTitle,#phoneCustomerMess .customerMessItemTitle{
    text-align:right;
    display:inline-block;
    color:gray;
    font-size:12px;
    font-family:Arial;
}

#chatCustomerMess .el-form-item, #phoneCustomerMess .el-form-item {
    margin-bottom: 0px !important;
}
#chatSummaryMess .el-form-item, #phoneSummaryMess .el-form-item {
    margin-bottom: 14px !important;
}
#chatCustomerMess .el-input.is-disabled .el-input__inner, #phoneCustomerMess .el-input.is-disabled .el-input__inner {
    background-color: #fff !important;
    font-family:Microsoft YaHei;
    font-weight:400;
    cursor: auto;
    height: 23px;
    line-height: 23px !important;
    border:none;
}
.formMaking .el-form-item {
    margin-bottom: 10px !important;
}

#chatCustomerMess .el-form-item__label, #phoneCustomerMess .el-form-item__label {
    font-weight: 400 !important;
    color: #8F8F91 !important;
    font-family: "Microsoft YaHei" !important;
}
#chatCustomerMess .row>div,#phoneCustomerMess .row>div{
    padding: 0 !important;
}
.checkChatHistoryDetail .el-dialog__body,.serviceCheckChatHistoryDetail .el-dialog__body{
    height:500px;
    overflow:auto
}
#contactHistoryDialog .el-date-editor .el-range-separator {
    padding: 0;
}
#retractLeft,
#retractCenter1,
#retractCenter2,
#retract {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 9px;
    height: 40px;
    background: transparent no-repeat scroll;
    z-index: 9;
}
#retractLeft{
    left: 0;
}
#retract {
    right: 0;
}
#retractCenter1{
    left:160px;
}
#retractCenter2{
    left: 0;
    margin-left:-8px;
}
#retract.retract-left,#retractLeft.retract-left,#retractCenter1.retract-left,#retractCenter2.retract-left{
    background-image: url(../images/retact-right.png);
}
#retract.retract-right,#retractLeft.retract-right,#retractCenter1.retract-right,#retractCenter2.retract-right{
    background-image: url(../images/retact-left.png);
}
.dial-number-button{
    font-size: 1.7rem;
    font-family: arial;
}
.dial-function-button{
    font-size: 1.5rem;
}

.through-type-choose li{
    width: 50%;
}
.through-dial-content-div{
    height:29px;
    text-align: center;
    color: #949494;
    border-bottom: 1px solid #f5f5f5;
    line-height: 29px;
    cursor:pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.through-dial-content-div>div{
    width: 50%;
    float: left;
}
.through-dial-content-div:hover{
    color:#b30229;
    font-weight: 900;
    background: #fafafa;
}
.through-dial-content-div:active{
    background: #e7effa;
}
.through-dial-content-div:visited{
    background: #e7effa;
}
.through-dial-content-div:link{
    background: #e7effa;
}
.dial-func-button{
    background-color: #6d9acd;
    background:-moz-linear-gradient(top, #6d9acd, #2e66a2);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#6d9acd), to(#2e66a2));
    background:-o-linear-gradient(top, #6d9acd, #2e66a2);
    box-shadow: 0px 0px 3px rgba(225,225,225,0.75) inset;
}
.dial-func-button:hover{
    background-color: #cee381;
    background:-moz-linear-gradient(top, #cee381, #8daa27);
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#cee381), to(#8daa27));
    background:-o-linear-gradient(top, #cee381, #8daa27);
}
.phone-div{
    float: left;
    width: 100%;
}

/***********************************************************************************************************************
**********************************************拨号键盘样式***************************************************************
***********************************************************************************************************************/
.through-dial-page-main {
    box-shadow: 0px 1px 6px rgba(0,0,0,0.70);
    left: 20%;
    z-index: 10;
    position: absolute !important;
    border-radius: 6px;
    background-color: #f0f0f0;
    padding:10px 0;
}
.through-agent-choose li{
    width: 50%;
}

.through-session-choose li{
    width: 100%;
}

.through-type-choose{
    width: 192px;
    margin:0px 8px;
    flex: none !important;
}

.dial-plate {
    width: 208px !important;
    min-height:295px;
    border-radius:5px;
    background-color: #f7f7f7;
    box-shadow: 0px 1px 6px rgba(0,0,0,0.70);
    flex:none !important;
}

.through-agent-choose{
    margin-right: 10px;
    width: 256px;
    border-width: 0 10px 0 8px;
    border-radius: 0 10px 10px 0;
    flex: none !important;
}
.through-session-choose{
    margin-right: 10px;
    width: 200px;
    border-width: 0 10px 0 8px;
    border-radius: 0 10px 10px 0;
    flex: none !important;
}
.through-dial-page-main>div{
    background-color: #f0f0f0;
    box-shadow: none;
    float: left;
    text-align: center;
}
.dial-plate>div.dial-plate-text-div{
    width: 194px;
    height:34px;
    margin:0px 0px 10px;
    border:1px solid #696969;
    border-radius:5px;
}
.dial-plate>div.dial-plate-text-div:hover{
    background:#FFFFFF !important;
}
.dial-plate-text{
    width: 158px;
    height: 32px;
    border: 0px solid #696969;
    outline: none;
    color: #b30229!important;
    font-size: 16px;
    font-weight: bold;
    padding-left: 5px;
    float: left;
    border-radius: 5px 0 0 5px;
}
.dial-plate-delete{
    width: 32px;
    height: 32px;
    float: right;
    background: #bebebe url(../images/delete.png) no-repeat 50%;
    border-radius: 0px 5px 5px 0px;
}
.through-dial-tab-nav{
    margin-bottom:10px;
    list-style: none;
    height: 34px;
    line-height: 34px;
    border-radius: 5px;
    text-align: center;
    background: #bebebe;
    color: #fff;
    font-weight: bold;
}
.through-dial-tab-nav-2{
    width:192px;
}
.through-dial-tab-nav-3{
    width:256px;
}
.through-dial-tab-nav>li{
    float: left;
    border-left: 1px solid #fff;
    color: #fff;
    font-size:13px;
    font-weight:bold;
}
.through-dial-tab-nav>li>a{
    color: #fff;
}
.through-dial-tab-nav>li>a:hover{
    text-decoration:underline;
}
.through-type-choose>.through-dial-tab-nav>li.active>a{
    color: #edd0be !important;
}
.through-dial-tab-content{
    background: #ffffff;
    height: 293px;
    border-radius: 5px;
}
.through-dial-content{
    /*height:100%;*/
    /*overflow: auto !important;*/
}
.through-dial-tab-content .el-scrollbar__wrap{
    overflow-x: hidden !important;
}
.dial-plate>div {
    /*user-select: none;*/
    width: 74px;
    height: 35px;
    margin: 5px;
    padding: 0;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    border-radius: 5px;
    color: #000000;
    background: #ffffff;
    display: inline-block;
    font-size: 12px;
    font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.dial-plate>div i{
    font-style: normal;
}
.dial-plate .number{
}
.dial-plate>div.dial-function-button{
    width: 185px;
}
.dial-plate>div:hover{
    background:#CBDFF5;
}
.chatAndPhone{
    height:100%;
    width:42%;
    border-radius:9px;
}
.chat,.businessShow {
    height: 100%;
    position: relative;
}
.chat {
    width: 100%;
    border-radius:9px;
}
.businessShow{
    display:block;
    width: 57%;
    border-radius:9px;
    background-color:white
}

#ivrList,#msgVoice,#mediaInter,#answerAllText,#knowledgeReply{
    color: #3167af !important;
}
/* 表格样式 */
table th,table td{
    text-align:center;
}
.btn.btn-sm.sendBtn,.btn.btn-sm.editBtn{
    width: 50px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 10px;
    border: 1px solid #e2e2e2;
    background-color: #f5f6fa;
    border-radius: 0px 12px;
    position:absolute;
    top:-17px;
    left:0;
}
.btn.btn-sm.editBtn{
    left:60px;
}
.silent-multi-media .chat-interaction-scroll {
    height: calc(100% - 175px);
    width:100%;
    border:none;
    border-radius: 10px;
    padding:0px;
    overflow-y: auto;
    background: #ffffff;
}
.silent-multi-media .chat-interaction .chatcontent {
    display: block;
}
#demo {
    margin-bottom: 17px !important;
}
.formStyle .el-form-item, #demoitem .el-form-item {
    width: 100%;
    display: inline-block;
    margin-bottom: 10px !important;
}
.collapse-transition{
    -webkit-transition: 0.1s height, 0.1s padding-top, 0.1s padding-bottom;
    transition: 0.1s height, 0.1s padding-top, 0.1s padding-bottom
}
.horizontal-collapse-transition{
    -webkit-transition: 0.1s width, 0.1s padding-left, 0.1s padding-right;
    transition: 0.1s width, 0.1s padding-left, 0.1s padding-right
}
.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow{
    -webkit-transition: 0.1s;
    transition: 0.1s;
    opacity: 0
}
.message .chat-mess,
.last-msg,
.unicode_fontfamily,
.preText{
    font-family:"Segoe UI Emoji"
    /*font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji",  Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,  LastResort,NotoColorEmoji,"Android Emoji",EmojiSymbols;*/
}
.deletedRelationTip{
    text-align: center;
    width: 100%;
    display: block;
    color: #8F8F91;
}
.addFriend{
    color: #326eb4;
    cursor: pointer;
}
.forecastHome {
    background: url(../images/forecastHome.gif) no-repeat;
    background-size: cover;
}

.useropt-left{
    width: 100%;
    float:left;
    padding-left: 70px;
    display: none;
    padding-top:5px;
}
.useropt-right{
    width: 100%;
    float:right;
    padding-right: 70px;
    display: none;
    padding-top:5px;
}
.useropt-left .retract,
.useropt-left .reply{
    float:left;
}
.useropt-right .retract,
.useropt-right .reply{
    float:right;
}
.retract{
    width: 40px;
    height: 23px;
    color: #999;
    font-size: 12px;
    border-radius: 6px;
    background: #f9faff;
    border: 1px solid #dfe0e8;

}
.reply{
    width: 40px;
    height: 23px;
    color: #999;
    font-size: 12px;
    border-radius: 6px;
    background: #f9faff;
    border: 1px solid #dfe0e8;
    margin-right: 5px;

}

/* ===================================================================================================================
                                                    视频弹屏组件
==================================================================================================================== */

.video-screen-div{
    position: absolute;
    z-index:99999999999;
    left:50%;
    top: 50%;
    width: 388px;
    height: 290px;
    margin: -157px 0 0 -235px;
    text-align: center;
    font-family: 微软雅黑;
    background-image:url('../images/bgvideo.png');
}

.video-screen-div .video-screen-top{
    height: 50px;
    padding-top: 18px;
    font-weight: bold;
}

.video-screen-div .video-screen-middle{
    margin-top: 54px;
    height: 116px;
}

.video-screen-div .video-screen-bottom{
    display: inline-block;
    vertical-align: middle;
    font-size:14px;
    color:#eeeeee;
}

.video-screen-div .name{
    font-size: 18px;
    text-align: center;
    cursor: default;
}

.video-screen-div .enable-video{
    width: 69px;
    height: 43px;
    margin: 15px auto;
}

.video-screen-div .videoUpScreen-video {
    background-image: url(../images/video.png);
}

.video-screen-div .videoUpScreen-voice {
    background-image: url(../images/video.png);
}

.video-screen-div .videoUpScreen-cobrower {
    background-image: url(../images/video.png);
}

.video-screen-div .time{
    font-family: Airal Regular;
    font-size: 13px;
}

.video-screen-div .btn{
    cursor:pointer;
    float:left; width:146px;
    height:34px;
    line-height: 34px;
    border-radius:20px;
}

.video-screen-div .btn:hover{
    color:#cbd2fa;
}

.video-screen-div .btn-answer{
    margin-right:10px;
    background-color:green;
}

.video-screen-div .btn-deny{
    background-color:red;
}