/*
 * @Author: LiJie
 * @Date: 2019-09-19 14:59:15
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2020-10-30 17:45:17
 */
:root {
  --robot: url('../images/robot.png') no-repeat;
  --avatarRobot: url('../images/pc/avatarRobot.png') no-repeat;
  --agent:url('../images/pc/agent.png') no-repeat;
  --client:url('../images/pc/client.png') no-repeat;
}

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 14px;
  border: none;
  box-sizing: border-box;
}

li {
  list-style: none;
}

img,
video {
  object-fit: contain;
}

html,
body {
  height: 100%;
  width: 100%;
  min-width: 360px;
  overflow: hidden;
  font-size: 12px;
  line-height: 12px;
  /* color: #fff; */
  /* min-height: 320px; */
  /* max-width: 640px;
	max-height: 960px; */
}

#tips {
  position: absolute;
  top: 30px;
  left: 25%;
  width: 50%;
  height: 30px;
  color: #f56c6c;
  line-height: 30px;
  font-size: 12px;
  text-align: center;
  background: #fef0f0;
  border: 1px solid #fde2e2;
  z-index: 20;
  display: none;
}

#num {
  height: 40px;
  line-height: 40px;
  color: #ED3D49;
  text-align: center;
  font-size: 20px;
}
#asr-so {
  height: 40px;
  /* line-height: 40px; */
  color: #ED3D49;
  text-align: center;
  font-size: 15px;
}
.preview-box {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: black;
}

.preview-box img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.preview-box video {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.header {
  display: flex;
  align-items: center;
  margin: auto;
  width: 100%;
  height: 40px;
  padding: 0 25px;
  background-color: #fff;
}

.header .back {
  display: inline-block;
  width: 1px;
  height: 17px;
  margin: 0 20px;
  background: #D4D4D4;
}

.header .close {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 14px;
}

.header .head-logo {
  display: inline-block;
  width: 86px;
  height: 19px;
}
.header .head-logo img {
  /* width: 100%; */
  height: 100%;
}
.notice-content{
	margin-top: 10px;
}
#noticePage{
	display: none;
	position: absolute;
	top: 55px;
	background-color: rgb(255, 255, 255);
	z-index: 99;
	width: 100%;
	height: auto;
}
.bottom-btn-box{
	text-align: center;
	margin: 10px;
}
.notice-button{
	height: 30px;
	width: 75px;
	background-color: #458ce8;
	color: #fff;
	border-radius: 6px;
}

.main {
  width: 100%;
  height: 100%;
  padding: 15px 25px;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  /* overflow: hidden; */
}

#chatView .main-logo {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 10px 10px 0 0;
  position: relative;
}

/* 新增转人工点击按钮 样式 */
 .people {
  display: inline-block;
  position: relative;
  left: 195px;
  top: 35px;
  width: 52px;
  height: 23px;
  font-family: PingFangSC-Medium;
  font-size: 11px;
  line-height: 23px;
  color: #FFFFFF;
  text-align: center;
  background: #D7000F;
  border-radius: 30px;
  border-radius: 30px;
  cursor: pointer;

}

.main-logo .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 114px;
  height: 100%;
  background: #E50113;
  border-radius: 10px 10px 0 0;
}
.main-logo .logos img {
  width: 25px;
  height: 17px;
  margin-right: 10px;
}
.main-logo .logos span {
  color: #fff;
  font-size: 14px;
}
#chatView {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
}
#chatView .main-title {
  width: 100%;
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  padding: 0 10px;
  color: #333;
  text-align: left;
  background: #f8f8f8;
}
.main .view {
  display: none;
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  text-align: center;
  background-color: #FFFFFF;
}

/* .view:first-child {
	display: block;
} */

/* *********** view ************* */
.view .btn-box button {
  width: 100px;
  height: 30px;
  margin: 0 10px;
  border-radius: 15px;
  color: #fff;
  border: none;
  outline: none;
}

.view .btn-box .cencel-btn {
  background-color: #cdd0d9;
}

.view .btn-box .submit-btn {
  background-color: #458ce8;
}

/****** biz-view ******/
.biz-view .biz-form {
  position: relative;
  top: 20%;
  left: 20%;
  height: 50%;
  width: 60%;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 0px 4px #919296;
}

.biz-view .biz-title {
  height: 50px;
  width: 100%;
  font-size: 1.2em;
  line-height: 50px;
}

.biz-view .biz-menu {
  height: calc(100% - 120px);
  width: 100%;
  overflow-y: scroll;
}

.biz-view .biz-form .biz-box {
  padding: 0 20%;
  text-align: left;
}

.biz-view .biz-form .biz-box .biz-label {
  height: 30px;
  width: 100%;
  line-height: 30px;
  vertical-align: middle;
}

.biz-view .biz-form .biz-box input {
  vertical-align: middle;
}

.biz-view .biz-form .biz-btn-box {
  padding: 20px 0;
}

.biz-view .biz-form .biz-btn {
  width: 110px;
  height: 30px;
  color: #fff;
  border-radius: 15px;
  background-color: #458ce8;
  border: none;
  outline: none;
}

/****** chat-view ******/
.chat-view {
  /*********** 滑动模块 ***********/
  /*********** 输入栏 ***********/
  /*********** 表情 工具栏 ***********/
  /******* 表情  ********/
}

.chat-view .sucker{
  width: 100%;
  padding: 6px 0px 0px 0px;
  white-space: nowrap;
  overflow: auto;
  z-index: 199;
  background-color: white;
  height: 50px;

}
.chat-view .sucker li{
  padding: 8px 12px;
  color: #79797a;
  border-radius: 20px;
  display: inline-block;
  margin: 0 5px;
  background: #eff2f1;
  box-shadow: 0 0 6px #bccaca;
}

.chat-view .chat-box {
  width: 100%;
  height: calc(100% - 320px);
  overflow: auto;
  background-color: #fff;
}

.chat-view .chat-box1 {
  width: 100%;
  height: calc(100% - 262px) !important;
  overflow: hidden;
}
.chat-view .chat-box2 {
  width: 100%;
  height: calc(100% - 266px) !important;
  overflow: hidden;
}

.chat-view .history-box {
  z-index: 10;
  margin-top: 10px;
}

.chat-view .history-box .history {
  color: #A5A6A7;
  height: 20px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.chat-view .scroll {
  padding: 10px 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
}

.chat-view .scroll::-webkit-scrollbar {
  display: none;
}

.chat-view .scroll .retract {
  float: left;
  display: none;
  height: 40px;
  width: 100%;
  text-align: center;
  color: #000;
}

.chat-view .system-msg,
.chat-view .robot-msg,
.chat-view .agent-msg {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  width: calc(100vw - 60px);
  height: auto;
  color: black;
  text-align: left;
}

.chat-view .client-msg {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  width: calc(100vw - 300px);
  height: auto;
  color: #333;
  text-align: right;
}

.chat-view .msg-header {
  margin: 5px 35px 5px 35px;
  text-align: inherit;
  font-size: 1em;
  color: #b8b8b8;
  /* background-color: #3caf19; */
}

.chat-view .system-msg .system,
.chat-view .robot-msg .robot,
.chat-view .agent-msg .robot {
  /* background: var(--robot); */
  background: url('../images/avatarRobot.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 15px;
}

.chat-view .robot-msg .agent,
.chat-view .agent-msg .agent {
  background: url('../images/agent.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 15px;
}

.chat-view .system-msg .text,
.chat-view .robot-msg .text,
.chat-view .robot-msg .list,
.chat-view .agent-msg .text,
.chat-view .agent-msg .list ,
.chat-view .judge-box .judge-content,
.chat-view .solve-box .solve-content{
  background-color: #FFE6E6;
  border-radius: 5px;
}

.chat-view .robot-msg .read,
.chat-view .agent-msg .read {
  padding-left: 5px;
}

.chat-view .client-msg .client {
  background: url('../images/pc/client.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 15px;
}

.chat-view .client-msg .client::before {
  content: '';
  width:0;
  height:0;
  border: 5px solid transparent;
  border-left-color: #f4f4f4;
  position: absolute;
  top: 8px;
  left: -6px;
}

.chat-view .client-msg .clients::before {
  content: '';
  width:0;
  height:0;
  border: 5px solid transparent;
  /* border-left-color: #d7000f; */
  position: absolute;
  top: 8px;
  left: -6px;
}

.chat-view .robot-msg .robot::before,
.chat-view .agent-msg .agent::before {
  content: '';
  width:0;
  height:0;
  border: 5px solid transparent;
  border-right-color: #FFE6E6;
  position: absolute;
  top: 8px;
  right: -5px;
}

.chat-view .client-msg .text,
.chat-view .client-msg .list,
.chat-view .client-msg .fileContent {
  text-align: left;
  background: #f4f4f4;
  border-radius: 5px;
}

.chat-view .client-msg .read {
  padding-right: 5px;
}

.chat-view .client-msg .fileContent {
  padding: 10px;
}

.chat-view .client-msg .fileContent a {
  color: white !important;
}

.chat-view .avatar {
  float: inherit;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  position: relative;
}

.chat-view .msg-box {
  float: inherit;
  margin: 5px;
  min-width: 30px;
  max-width: calc(100% - 40px);
  height: auto;
  text-align: inherit;
}

.chat-view .msg-box .text {
  display: inline-block;
  position: relative;
}

.chat-view .msg-box video {
  background-color: #000;
}

.chat-view .msg-box a:link {
  color: #458ce8;
}

.chat-view .msg-box a:visited {
  color: #c0c4c9;
}

.chat-view .msg-box a:hover {
  color: #458ce8;
}

.chat-view .msg-box a:active {
  color: #458ce8;
}

.chat-view .list .list-title {
  min-width: 260px;
  width: 100%;
  padding: 10px 10px 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2em;
  /*background: url("../images//chat_bg.png") no-repeat center;*/
  /* background: #ED3D49; */
  background-size: 100% 100%;
  color: #333;
}

.chat-view .list .list-title span{
  float: right;
  font-weight:normal;
  font-size: 1em;
  line-height: 1em;
  cursor: default; 
  color: #ED3D49;
}

.chat-view .list .list-title span img{
  height: 1em;
  margin-right: 5px;
}

.chat-view .list ul {
  padding: 0 10px 10px;
}

.chat-view .list ul li {
  display: flex;
  font-size: 14px;
  line-height: 2em;
  color:#D7000F;
  word-wrap: break-word;
  word-break: break-all;
  list-style-type: disc;
  list-style-position: inside;
  cursor: pointer;
  position: relative;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  list-style:none;
}
.chat-view .list ul li .list-text {
  line-height: 2em;
}

.chat-view .list ul li::before{
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  margin: 0.9em 4px 0 0;
  background: #D7000F;
  /* border-bottom: 1px solid #458ce8; */
}

.chat-view .text {
  display: none;
  /* padding-top: 10px; */
  max-width: 100%;
  height: auto;
  min-height: 20px;
  line-height: 20px;
  font-size: 1em;
  border-radius: 5px;
}

.chat-view .text-content {
  padding: 5px 10px;
  line-height: 20px;
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}
.chat-view .rich-text{
	display: none;
	padding: 10px;
	max-width: 100%;
	height: auto;
	min-height: 20px;
	line-height: 20px;
	font-size: 1em;
	border-radius: 5px;
	min-width: 380px;
	width: 100%;
	background: #fff;
}
.rich-text .rich-box{
	display: inline-block;
	box-sizing: border-box;
}
.rich-text .description-box{
	width: 55%;
}
.description-box .rich-title{
	font-weight: bold;
	line-height: 5.125rem;
}
.rich-text .img-box{
	width: 39%;

}
#__previewImage-container .previewImage-box .previewImage-item {
  line-height: 100vh;
}
.chat-view .text-content table,
.chat-view .text-content table tr th,
.chat-view .text-content table tr td {
  height: 30px;
  text-align: center;
  border: 1px solid #000;
}

.chat-view .text .emoji {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.chat-view .text .solved-box, .chat-view .list .solved-box{
  display: none;
  height: 40px;
  min-width: 230px;
  line-height: 40px;
  text-align: center;
  border-top: 1px solid #f3f3f5;
}

.chat-view .solved-box .solved {
  border-right: 1px solid #f3f3f5;
}
.chat-view .solved-box .solved,
.chat-view .solved-box .unsolved {
  display: inline-block;
  width: 49%;
  /* height: 30px; */
  /* margin: 5px; */
  text-align: center;
  /* border-radius: 5px; */
  outline: none;
}

.chat-view .solved-box .solved,
.chat-view .solved-box .unsolved {
  color: #333333;
  /* background-color: #f3f3f5; */
  cursor: pointer;
}
.chat-view .judge-box {
  display: none;
}
.chat-view .judge-box .judge-content{
  width: 300px;
	padding: 10px;
}
.chat-view .judge-box .solve-box {
  background: #FFE6E6;
  width: 350px;
  margin-left: -30px;
  margin-top: 10px;
}
.judge-box .judge-title{
	text-align: center;
	margin: 10px;
}
.judge-box .bottom{
	text-align: center;
}
.judge-box .sbm-btn{
  height: 28px;
  width: 100px;
  background-image: linear-gradient(133deg, #FF695A 0%, #D7000F 100%);
  color: #fff;
  line-height: 28px;
  border-radius: 28px;
  text-align: center;
  margin: 20px auto 0px;
}

.chat-view .solved-box .solved-text {
  float: left;
  width: 40px;
  height: 40px;
  color: #b8b8b8;
  text-align: center;
  line-height: 40px;
}

.solved-box .processed .solved-text {
  color: #d7000f;
  /* background-color: #3167af; */
}

.chat-view .solved-box .solved-icon {
  float: left;
  margin: 10px 0;
  margin-left: 30%;
  width: 20px;
  height: 20px;
}

.chat-view .solved-box .solved .solved-icon {
  background: url("../images/like.png") no-repeat center;
  background-size: 100% 100%;
}

.solved-box .solved.processed .solved-icon {
  background: url("../images/like1.png") no-repeat center;
  background-size: 100% 100%
}

.chat-view .solved-box .unsolved .solved-icon {
  background: url("../images/hate.png") no-repeat center;
  background-size: 100% 100%;
}

.solved-box .unsolved.processed .solved-icon {
  background: url("../images/hate1.png") no-repeat center;
  background-size: 100% 100%
}


.chat-view .imgZoom {
  display: none;
  min-width: 20px;
  max-width: 160px;
  height: auto;
}

.chat-view .voice {
  display: none;
  max-width: 100%;
  height: 40px;
  min-height: 30px;
}

.chat-view .video {
  display: none;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  min-height: 30px;
}

.chat-view .read {
  /* display: none; */
  height: 20px;
  line-height: 20px;
  color: #A5A6A7;
}

.chat-view .slider {
  display: none;
  width: 100%;
  height: 40px;
  text-align: left;
  background-color: #f1f2f3;
}

.chat-view .slider ul {
  height: 100%;
  width: 100%;
  padding: 5px;
  white-space: nowrap;
  overflow-x: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.chat-view .slider ul::-webkit-scrollbar {
  display: none;
}

.chat-view .slider ul li:first-child {
  padding: 0 10px;
}
.lint {
  color: #D7000F;
}
.chat-view .slider ul li {
  display: inline-block;
  margin: 0 5px;
  height: 30px;
  padding: 0 10px;
  color: #79797a;
  border-radius: 20px;
  line-height: 30px;
  /* background: #f7f7f7; */
  background-color: white;
  /* box-shadow: 0 0 5px #cecece; */
  cursor: pointer;
}

/* 转文字部分************ */
.chat-view .asr-record{
  width: 100%;
  height: 150px;
  /* border: 1px solid #ebf1f1; */
  background-color: #FFF;
  position: absolute;
  bottom: 42px;
  left: 0;
  z-index: 20;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}

.chat-view .asr-record img{
  width: 150px;
  height: 64px;
  /* margin-top: -20px; */
}

.chat-view .asr-record .icon-jianpan1{
  width: 50px;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #8c909d;
}

.chat-view .asr-record .icon-AddCircle-1{
  /* width: 5px;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #8c909d; */
}

.chat-view .asr-record .go-asr{
  width: 100%;
  height: 30px;
  line-height: 29px;
  flex: 1;
  background-color: #e7e7e7;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  margin-top: 4px;
  color: #333333;
}

.chat-view .input-bar {
  width: 100%;
  /* height: 40px; */
  /* line-height: 20px; */
  border: 1px solid #ebf1f1;
  position: relative;
  /* position: sticky;
  bottom: 0;
  left: 0; */
  z-index: 21;
  display: flex;
  /* background-color: pink; */
}

/* 语音输入框切换部分************ */
.chat-view .asr-input-box{
  width: 100%;
  /* height: 40px; */
  /* line-height: 24px; */
  display: flex;
}


.chat-view .asr-input-box .icon-yuyin1{
  width: 50px;
  height: 40px;
  line-height: 40px;
  font-size: 35px;
  color: #8c909d;
}

.chat-view .asr-input-box .icon-jianpan1{
  width: 50px;
  height: 40px;
  line-height: 40px;
  font-size: 25px;
  color: #8c909d;
}

.chat-view .asr-input-box .icon-AddCircle-1{
  /* width: 5px;
  height: 35px;
  line-height: 40px;
  font-size: 30px;
  color: #a7a9b1; */
}

.chat-view .asr-input-box .text-input,
.chat-view .asr-input-box #textBox{
  width: 100%;
  height: 30px;
  line-height: 24px;
  margin-top: 4px;
  background-color: #f0f0f0;
  flex: 1;
  margin-right: 10px;
  font-size: 16px;
  /* text-align: center; */
}
.chat-view .asr-input-box #textBox {
  display: none;
  overflow: auto;
  text-align: left;
  color: #000;
}

.chat-view .asr-input-box .mask-layer{
  opacity: 0.2;
  width: 71%;
  height: 30px;
  line-height: 29px;
  position:fixed;
  right: 36px;
  bottom: 7px;
  background-color: pink;
  border-radius: 3px;
  margin-top: 4px;
}

.chat-view .asr-input-box .press-speak{
  width: 100%;
  height: 30px;
  line-height: 29px;
  flex: 1;
  background-color: #f0f0f0;
  /* border: 1px solid #e6e6e6; */
  border-radius: 3px;
  margin-top: 4px;
  color: #333333;
  margin-right: 10px;
  user-select: none;
}


.chat-view #emojiIcon,
.chat-view #moreIcon,
.chat-view #sendIcon {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.chat-view .emoji-icon {
  float: left;
  background: url("../images/emotion.png") no-repeat;
  background-size: 100% 100%;
}

.chat-view .more-icon {
  float: right;
  line-height: 30px;
  font-size: 25px;
  color: #8c909d;
  /* background: url("../images/more.png") no-repeat;
  background-size: 100% 100%; */
}

.chat-view .send-icon {
  float: right;
  display: none;
  background: url("../images/send.png") no-repeat;
  background-size: 100% 100%;
}


.chat-view .input-box input.text-input {
  display: block;
  margin: 0 15px;
  width: calc(100% - 30px);
  height: 100%;
  line-height: 30px;
  background: white;
  border-radius: 4px;
}

.chat-view .input-box input.text-input:focus {
  outline: none;
}

.chat-view .tools-view,
.chat-view .emoji-view {
  width: 100vw;
  height: 180px;
  background: #fff;
  border: 1px solid #ebf1f1;
  vertical-align: middle;
}

.chat-view .tools-view ul {
  width: 100%;
  height: 100%;
  text-align: center;
}

.chat-view .tools-view ul li {
  float: left;
  width: 25%;
  height: 50%;
  padding: 15px;
}

.chat-view .tools-view .tools-icon {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  text-align: center;
}

.chat-view .tools-view .file-input,
.msg-bottom .msg-tips .file-input {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.chat-view .tools-view #imageIcon {
  background: url("../images/tools/image.png") no-repeat;
  background-size: 100% 100%;
}

.chat-view .tools-view #audioIcon {
  background: url("../images/tools/audio1.png") no-repeat;
  background-size: 100% 100%;
}

.chat-view .tools-view #videoIcon {
  background: url("../images/tools/video1.png") no-repeat;
  background-size: 100% 100%;
}

.chat-view .tools-view #fileIcon {
  background: url("../images/tools/file.png") no-repeat;
  background-size: 100% 100%;
}

.chat-view .tools-view #webrtcIcon {
  background: url("../images/tools/video.png") no-repeat center;
  background-size: 100% 100%;
}

.chat-view .tools-view #joint {
  background: url("../images/tools/joint.png") no-repeat center;
  background-size: 100% 100%;
}

.chat-view .tools-view #lmsgIcon {
  background: url("../images/tools/more5.png") no-repeat center;
  background-size: 100% 100%;
}

.chat-view .tools-view #evalIcon {
  background: url("../images/tools/more6.png") no-repeat center;
  background-size: 100% 100%;
}

.chat-view .emoji-view .emoji-box {
  margin: 10px 0;
  width: 100vw;
  height: 160px;
}

.chat-view .emoji-view .emoji-list {
  float: left;
  width: 100%;
  height: 80%;
  overflow: auto;
}

.chat-view .emoji-view .emoji-list li {
  float: left;
  margin: auto;
  /* width: 10%; */
  /* margin-bottom: 5px; */
  text-align: center;
  cursor: pointer;
}

.chat-view .emoji-view .emoji-list li img {
  width: 30px;
  padding: 5px;
}

.chat-view .emoji-view .emoji-list li img:hover {
  border: 1px solid #ccc;
}

.crv .chat-box {
  width: 100%;
  height: calc(100% - 80px);
  overflow: hidden;
}

.crv .chat-box1 {
  width: 100%;
  height: calc(100% - 260px);
  overflow: hidden;
}

.crv .chat-box2 {
  width: 100%;
  height: calc(100% - 260px);
  overflow: hidden;
}

/****** eval-view ******/
.eval-view{
	padding-top: 50px;
}
.eval-view .eval-title {
  margin: 50px 0 30px 0;
  font-size: 1.5em;
}

.star-box {
  width: 300px;
  margin: auto;
}
.starWords{
	display: inline-block;
	height: 40px;
	line-height: 40px;
	overflow: hidden;
}
.judge-content .star-box ul {
	 width: 70%;
	 /* height: 40px;
	 text-align: center; */
	 display: inline-block;
	 overflow: hidden;
}

.judge-content .star-box ul li {
  margin: 5px;
  list-style: none;
  /* width: 32px; */
  height: 32px;
}

.judge-content .star-box ul li img {
  width: 22px;
  height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

.judge-box .solve-box {
  padding: 10px;
}

.solve-box ul li {
  display: flex;
  width: 30%;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-right: 10px;
}

.solve-box ul li img {
  width: 30px;
  height: 30px;
  margin: 10px 0;
}

.solve-box #star-list {
  display: flex;
}


/* .star-box ul li.light {
  background-position: 0 -35px;
} */

.eval-view .eavl-text-box {
  /* display: none; */
  padding: 20px 10%;
}

.eval-view .eavl-text-box textarea {
  padding: 5px;
  height: 80px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D0e2e2;
}

.eval-view .solution-box {
  margin: 30px 0;
}

.eval-view .solution-box button {
  margin: 0 15px;
  width: 100px;
  height: 30px;
  border-radius: 15px;
  color: #484848;
  border: 1px solid #458ce8;
  outline: none;
}

.eval-view .solution-box .selected {
  color: #fff;
  background-color: #458ce8;
}

/****** lmsg-view ******/
.lmsg-view{
	background-color: #FFFFFF;
}
.lmsg-view .lmsg-title {
  padding: 50px 10% 20px;
  width: 100%;
  line-height: 15px;
  text-align: left;
}

.lmsg-view .lmsg-form {
  padding: 0px 10%;
  width: 100%;
}

.lmsg-view .lmsg-form .input-group {
  margin: 20px 0;
  width: 100%;
  text-align: left;
}

.lmsg-view .lmsg-form .input-group input {
  padding: 0 5px;
  height: 30px;
  width: calc(100% - 50px);
  border: 1px solid #D0e2e2;
}

.lmsg-view .lmsg-form .point {
  color: #f76e4e;
  font-weight: bolder;
  width: 10px;
  height: 100%;
}

.lmsg-view .lmsg-form .text-desc {
  margin: 10px 0;
}

.lmsg-view .lmsg-form .lmsgText {
  padding: 5px;
  height: 80px;
  width: calc(100% - 13px);
  border-radius: 3px;
  border: 1px solid #D0e2e2;
}

/* ********* preview-image *********** */
.preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 200;
}

.preview-image img {
  width: 100%;
  height: 100%;
}

/* ********* EAlert *********** */
.alert-view {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  font-size: 1.2em;
  text-align: center;
  background-color: rgba(138, 136, 136, 0.6);
  z-index: 100000000;
}

.alert-view .alert-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 40vw;
  min-width: 200px;
  min-height: 150px;
  max-width: 400px;
  max-height: 300px;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.alert-view .alert-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 1.5em;
  font-weight: bold;
  background-color: #458ce8;
  color: #fff;
}

.alert-view .alert-msg,#alertInfo {
  width: 100%;
  padding: 15px 10px;
  height: calc(100% - 100px);
  line-height: 1.2em;
  border-top: 1px solid #dce4e4;
  border-bottom: 1px solid #dce4e4;
}
.alert-view .alert-btn-box {
  width: 100%;
  height: 50px;
  line-height: 50px;
}

.alert-view .alert-btn-box>div {
  /* float: left; */
  display: none;
  height: 50px;
  width: 48%;
  line-height: 50px;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  color: #458ce8;
}
.alert-view .alert-btn-box .inbtn{
	display: inline-block;

}
.alert-view .alert-btn-box .canclebtn{
	border-left: 1px solid #dce4e4;
}
.alert-view .alert-btn-box .alert-cencel-btn {
  display: none;
  border-left: 1px solid #dce4e4;
}
#alertInfo .a-name{
	width: 15%;
	display: inline-block;
}
.alert-view .alert-title-info {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #458ce8;
    text-align: left;
    padding-left: 16px;
}
#alertInfo .alertInput{
	height: 40px;
	width: 66%;
	border: 1px solid #d8d8d8;
	margin: 10px;
	box-sizing: border-box;
}
.readfont{
	color: #ff3939;
}
#readTips{
	display: none;
}
#InfoBox .alert-btn-box .inbtn{
	background-color: #237ae4;
	color: #fff;
	border-radius: 6px;
	width: 98px;
	height: 38px;
	line-height: 38px;
	font-size: 15px;
}
#InfoBox #alertInfo{
	height: calc(100% - 120px);
	border-bottom: none;
}
.msg-bottom {
  width: 100%;
  height: 260px;
  background-color: #FFFFFF;
  border-radius: 12px;
}
.msg-bottom .msg-tips {
  width: 100%;
  height: 40px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.msg-bottom .msg-tips img:nth-child(1) {
  margin-right: 10px;
}

.msg-bottom .msg-tips span {
  font-size: 14px;
  color: #333;
}

/* .msg-bottom .chat-tools {
  height: 40px;
  padding-left: 10px;
  background-color: #FFFFFF;
} */

.msg-bottom .chat-tools ul li {
  float: left;
  width: 30px;
  height: 30px;
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
}

.msg-bottom .chat-tools ul #emojiIcon {
  margin: 5px 5px 0 0 !important;
}

.msg-bottom .msg-send-box {
  height: 220px;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.msg-send-box .input {
  width: 100%;
  font-size: 15px;
  height: 180px;
  border: none;
  outline: none;
  padding: 10px 20px;
  line-height: 24px;
  box-sizing: border-box;
  resize: none;
}

.msg-bottom .btnbox {
  width: 100%;
  height: 40px;
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}

.msg-bottom .btnbox .btnbox-left {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 12px;
}

.msg-bottom .btnbox .btnbox-right {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 12px;
}

.btnbox .btnbox-left img {
  margin-right: 5px;
}

.msg-bottom .btnbox button {
  width: 60px !important;
  height: 25px !important;
  outline: none;
  line-height: 25px;
  color: #fff;
  border-radius: 6px;
  background-image: linear-gradient(133deg, #FF695A 0%, #D7000F 100%);
}

.msg-bottom .btnbox #exit {
  margin: 0 20px;
}


.msg-bottom .chat-tools ul li input {
  display: none;
}

.resource-content {
  padding: 10px;
  border-radius: 6px;
  background: #999999;
  display: none;
}

.agent-msg .resource-content {
  float: left;
}

.client-msg .resource-content {
  float: right;
}

.erCode-container {
  position: absolute;
  bottom: 110px;
  width: 140px;
  left: 45px;
  box-shadow: 0px 0px 4px #919296;
  cursor: pointer;
  z-index: 999;
  background-color: #fff;
}

.erCode-container .item {
  height: 25px;
  line-height: 25px;
  text-align: center;
}

.erCode-container .item.selected {
  background: #3AB2B3;
  color: #fff;
}

.qrcode-content {
  position: absolute;
  bottom: 110px;
  left: 50px;
  height: 110px;
  width: 110px;
  display: none;
  box-shadow: 0px 0px 4px #8c909d;
  padding: 5px;
  background: #fff;
  z-index: 999;
}

@media (max-width: 767px) {

  .webrtc-view {
    height: 30%;
    top: 40px;
  }

  .main.mobil-main {
    margin-top: calc(30% + 40px);
    height: calc(70% - 40px);
  }

}

.maskModal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  display: none;
}
.link_a{
	text-decoration: none;
	color: #79797a;
}
/* 禁止复制css
*{
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
允许复制
input {
    -webkit-user-select:auto;
} */