body {
    font-family: "Helvetica Neue", "Luxi Sans", "Segoe UI", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Logo";
    margin: 0;
    padding: 0;
}

#app {
    height: 100vh;
    margin: 0 auto;
	overflow:hidden;
	width:100%;
}

.material-main{
	margin:0px auto;
	overflow:hidden;
	background:#f5f5f5;
}

.left{
	width:215px;
	float:left;
	height:100%;
	overflow:auto;
	position:relative;
}
.right{
	overflow:auto;
	height:100%;
	position:relative;
}

/*右侧*/
.right-main{
	background:#fff;
	margin:30px 65px 30px 30px;
	padding:20px 30px;
	border-radius:8px;
	box-shadow: 0 2px 20px #ddd;
	-webkit-box-shadow: 0 2px 20px #ddd;
	overflow:hidden;
}

/*列表*/
.right-content{
	overflow:hidden;
}


/*素材列表*/
.show-material-list{
	overflow:hidden;
}
.material-list-item{
	overflow:hidden;
	padding:15px 10px;
	border-top:1px solid #eee;
}
.CU-list-render-action-col{
	padding: 0px 15px;
}
.material-list-item .link img{
	width:14px;
	margin-right:3px;
}
.material-list-item .link a:hover{
	color:#3855d5;
	text-decoration:underline;
}
.show-material-list .material-list-item:last-child{
	border-bottom:none !important
}
.material-list-item .left{
	width:165px;
	height:97px;
	float:left;
	text-align:left;
}
.material-list-item .left img{
	width:150px;
	max-height:100%;
	border-radius:5px;
	background:#f5f5f5;
}
.material-list-item .cont{
	overflow:hidden;
	padding-right:10px;
}
.material-list-item .question{
	overflow:hidden;
	color:#333;
	font-size:15px;
	line-height:23px;
	margin: 8px 0px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	position:relative;
	
}
.material-list-item .title{
	overflow:hidden;
	color:#555;
	font-size:16px;
	line-height:23px;
	padding-bottom: 8px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	position:relative;
	font-weight:600;
}
.material-list-item .content{
	color:#222;
	font-size:16px;
	line-height:24px;
	/*max-height:69px;*/
	font-weight:500;
	overflow:hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	margin-bottom:25px;
	position:relative;
}
.material-list-item .ligther{
	color:#555 !important;
	font-size:14px !important;
}
.material-list-item .is-collis{
	color: #3855d5;
	cursor: pointer;
	font-size: 14px;
}
.material-list-item .collis{
	background: #fff;
	position: absolute;
	right: 0;
	top: 48px;
}
.material-list-item .nocollis{
	position: none;
	margin-left:5px;
}
.material-list-item .is-collis img{
	width:19px;
}

.material-list-item .is-qcollis{
	color: #3855d5;
	cursor: pointer;
	font-size: 14px;
}
.material-list-item .qcollis{
	background: #fff;
	position: absolute;
	right: 0;
	top: 23px;
}
.material-list-item .noqcollis{
	position: none;
	margin-left:5px;
}
.material-list-item .is-qcollis img{
	width:19px;
}

.material-list-item .statues{
	margin-top:10px;
	overflow:hidden;
	line-height: 22px;
}
.creater{
	color:#888;
	font-size: 14px;
	margin-right: 10px;
}
.assistant-label{
	margin-top:6px;
	overflow:hidden;
	line-height: 22px;
}
.material-list-item .statu{
	border-radius: 20px;
	cursor: default;
	font-family: PingFangSC-Medium;
	font-size: 12px;
	line-height: 12px;
	margin-right: 8px;
	padding: 4px 8px;
	text-align: center;
	color: rgb(61, 150, 129);
	background-color: rgba(61, 150, 129, 0.05);
}
.material-list-item .statu0{
	color: rgb(153, 103, 167) !important;
	background-color: rgba(153, 103, 167, 0.05) !important;
}
.material-list-item .statu1{
	color: #13ce66 !important;
	background-color: #e7faf0 !important;
}
.material-list-item .statu2{
	background-color: #fff8e6 !important;
    color: #ffba00 !important;
}
.material-list-item .statu3{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu4{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}

.material-list-item .statu5{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu6{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu7{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu8{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu9{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu10{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu11{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu12{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu13{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu14{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu15{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu28{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.material-list-item .statu img{
	width:15px;
	margin-left:3px;
}
.material-list-item .bottom{
	margin-top:5px;
	padding:5px 0px;
	overflow:hidden;
}
.material-list-item .bottom-left{
	width:50px;
	float:left;
	overflow:hidden;
	color:#777;
	font-size:14px;
	line-height:20px;
	vertical-align:middle;
}
.material-list-item .bottom-right{
	overflow:hidden;
	text-align:right;
}
.material-list-item .bottom-nums{
	max-width:382px;
	min-width:150px;
	float:left;
	overflow:hidden;
	color:#777;
	font-size:14px;
	line-height:22px;
	vertical-align:middle;
	margin-left:20px;
}
.material-list-item .bottom-nums span{
	margin-left:5px;
}
.material-list-item .bottom .item{
	color: #3855d5;
	margin-right: 20px;
	cursor:pointer;
	line-height:22px;
}
.material-list-item .bottom .disabled{
	color: rgba(0, 0, 0, 0.25);
	cursor: not-allowed;
}
.material-list-item .imgs-url{
	overflow:hidden;
	padding-top:10px;
}
.material-list-item .imgs-url .imgs{
	width:155px;
	overflow:hidden;
	float:left;
	margin-right:15px;
	margin-bottom:10px;
	cursor:pointer;
	border-radius:5px;
	position:relative;
}
.material-list-item .imgs-url .imgs img{
	max-width:100%;
	max-height: 100%;
}
.material-list-item .album{
	width:145px !important;
	height:145px !important;
}
.material-list-item .album img{
	max-width:100%;
	max-height: 100%;
}
.material-list-item .play{
	position:absolute;
	width:100%;
	height:100%;
	top: 0px;
	bottom:0px;
	left:0px;
    right: 0px;
	z-index:1;
	cursor:pointer;
	border-radius: 8px;
	text-align:center;
	background:rgba(0, 0, 0, 0.1) none repeat scroll 0 0 !important;
	filter:Alpha(opacity=0); 
	background:#fff;
	display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中，如果也需要水平居中的话 */
}
.material-list-item .play img{
	width:35px !important;
	text-align:center !important;
}

.show-comment-wrap{
	overflow-y:auto;
	overflow-x:hidden;
	/*width:395px;*/
	height:100%;
	/*float:left;*/
	border-right:1px solid #e3e3e3;
}
.show-comment-list{
	overflow:hidden;
}
.show-comment-list .comment-list-item{
	overflow:hidden;
	border-bottom:1px solid #eee;
	display: grid;
	grid-template-columns: 85px  0.7fr 1.8fr 0.7fr 0.7fr 1fr 0.7fr 0.7fr 0.7fr 1.4fr 280px;
	padding: .5rem 2rem;
}
.show-comment-list .comment-list-item:hover{
	background:#f5f5f5;
}
.show-comment-list .active{
	background:#eaf0f7;
}
.show-comment-list .cont{
	color:#333;
	font-size:16px;
	line-height:22px;
	max-height:44px;
	overflow:hidden;
	-webkit-box-orient: vertical;
	position:relative;
	text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}
.show-comment-list .label{
	margin-top:8px;
	overflow:hidden;
}
.show-comment-list .label span{
	border-radius: 20px;
	display:inline-block;
	cursor: default;
	font-family: PingFangSC-Medium;
	font-size: 13px;
	line-height: 13px;
	margin-right: 8px;
	padding: 4px 8px;
	text-align: center;
	color: rgb(61, 150, 129);
	background-color: rgba(61, 150, 129, 0.05);
}
.statu0{
	color: rgb(153, 103, 167) !important;
	background-color: rgba(153, 103, 167, 0.05) !important;
}
.statu1{
	color: #13ce66 !important;
	background-color: #e7faf0 !important;
}
.statu2{
	background-color: #fff8e6 !important;
    color: #ffba00 !important;
}
.statu3{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}
.statu4{
	background-color: #ffeded !important;
    color: #ff4949 !important;
}

.show-comment-list .time{
	margin-top:8px;
	overflow:hidden;
	line-height:21px;
	color:#777;
	font-size:14px;
}
/*内容*/
.show-comment-content{
	overflow:hidden;
	overflow-y:auto;
	overflow-x:hidden;
	height:100%;
}
.show-comment-content .comment-content{
	overflow:hidden;
	padding:25px 35px;
	max-width:680px;
}

.comment-content .content{
	color:#333;
	font-size:16px;
	line-height:24px;
	font-weight:500;
	overflow:hidden;
	margin-bottom:10px;
	position:relative;
	margin-top:10px;
}
.comment-content .statues{
	margin-top:10px;
	overflow:hidden;
	line-height: 22px;
}
.comment-content .statu{
	border-radius: 20px;
	cursor: default;
	display:inline-block;
	font-family: PingFangSC-Medium;
	font-size: 14px;
	line-height: 14px;
	margin-right: 8px;
	padding: 4px 8px;
	text-align: center;
	color: rgb(61, 150, 129);
	background-color: rgba(61, 150, 129, 0.05);
}
.comment-content .time{
	margin-top:10px;
	overflow:hidden;
	line-height:22px;
	color:#777;
	font-size:15px;
}
.comment-content .dynamic{
	overflow:hidden;
	line-height:22px;
	color:#555;
	margin-top:5px;
	font-size:15px;
}
.comment-content .author{
	overflow:hidden;
	line-height:22px;
	color:#555;
	font-size:15px;
}

.comment-qrcode{
	overflow:hidden;
	padding:20px 50px;
}
.comment-qrcode .qrcode{
	overflow:hidden;
}
.comment-qrcode .qrcode-item{
	padding:0px;
	overflow:hidden;
	float:left;
}

.comment-qrcode .qrcode-img{
	padding:0px;
	width:215px;
	height:215px;
	overflow:hidden;
}
.comment-qrcode .qrcode-img img{
	width:100%;
}
.comment-qrcode .tishi{
	overflow:hidden;
	line-height:22px;
	color:#666;
	font-size:15px;
	padding:5px 20px;
	font-weight:600;
}
.comment-qrcode .extra{
	overflow:hidden;
	line-height:22px;
	color:#777;
	font-size:13px;
	padding:5px 20px;
}

.layui-m-layerchild{
	overflow:auto;
}
.layui-m-layerchild h3{
	height:48px !important;
	line-height:48px !important;
}
/* 消息创建时间样式 - 独立样式不影响其他元素 */
   .message-add-time {
	   padding: 4px 0 0;
	   font-size: 12px;
	   color: #999;
	   text-align: left;
	   line-height: 1.4;
   }