.scneir {
	position: fixed;
	top:55%;
	left:50%;
	transform: translate(-50%, -50%);
	text-align:center;
	z-index: 700; /* 确保在最上层 */
}
.scneir .scimgs {
	line-height:45px;
	font-size:1.9rem;
	height:45px;
	color:#9353d3;
	text-align:center;
}
.scneir .scinfos {
	line-height:35px;
	font-size:1.2rem;
	height:35px;
	color:var(--scnei-color);
	text-align:center;
	font-weight:bold;
	margin-top:15px;
}
.scneir .scdwens {
	line-height:30px;
	font-size:0.8rem;
	height:30px;
	color:var(--scwen-color);
	text-align:center;
}
.scneir .scfans {
	line-height:50px;
	font-size:1rem;
	height:50px;
	color:var(--scwen-color);
	text-align:center;
	display:inline-block;
	width:120px;
	border-radius:18px;
	margin-top:15px;
	cursor:pointer;
	background-color:var(--scwbg-color);
}
.scneir .scfans:hover {
	border-radius:18px;
	border-radius:15px;
	background-color:var(--scwbgh-color);
}
.scneir .scxuns {
	line-height:50px;
	font-size:1rem;
	height:50px;
	color:#ffffff;
	text-align:center;
	display:inline-block;
	background-color:#9353d3;
	width:200px;
	border-radius:15px;
	margin-top:15px;
	margin-left:15px;
	cursor:pointer;
}
/* 角色卡片网格 */
 
/* 角色卡片网格布局 */
.charactersc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin-top: 10px;
}
/* 角色卡片样式 */
.charactersc-card {
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	background-color: var(--card-bg);
	box-shadow: var(--card-shadow);
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 10px;
}
.charactersc-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--hover-shadow);
}
.charactersc-avatar {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.charactersc-card:hover .charactersc-avatar {
	transform: scale(1.05);
}
.charactersc-avatar-container {
	height: 220px;
	overflow: hidden;
	position: relative;
	background-color: #f0f0f0;
}
.charactersc-avatar-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #e0e0e0;
	color: #999;
	font-size: 2rem;
}
.charactersc-info {
	background:var(--card-bg);
	padding:5px 0 0 0;
}
.charactersc-mess {
	position: absolute;
	top:5px;
	right:5px;
	width:60px;
	z-index:9;
	border-radius:18px;
	height:23px;
	line-height:23px;
	background:var(--danzi-color);
	font-size: 0.75rem;
	text-align:center;
	color:var(--dzwen-color);
}
.charactersc-mess i {
	font-size: 0.5rem;
}
.charactersc-sming {
	width:90%;
	margin-left:5%;
}
.charactersc-name {
	font-weight: 600;
	font-size: 1.02rem;
	margin-bottom:6px;
	color: var(--text-color);
}
.charactersc-description {
	color: var(--text-secondary);
	font-size: 0.85rem;
	margin-bottom: 5px;
	flex: 1;
	/* 多行截断兼容写法 */
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2; /* ✅ 添加标准属性 */
	overflow: hidden;
	text-overflow: ellipsis;
	/* 增强兼容性（如在 Firefox 中） */
    display: box; /* Old spec fallback */
	box-orient: vertical;
 max-height: calc(1.5em * 2); /* 假设每行 1.2em，高度限制为3行 */
	line-height: 1.5em;
}
.charactersc-creator {
	display: flex;
	align-items: center;
}
.charactersc-creator-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #e0e0e0;
	margin-right: 8px;
}
.charactersc-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.85rem;
}
.charactersc-stats {
	margin-left:5%;
	width:60%;
	margin-bottom:10px;
}
.charactersc-del {
	margin-right:5%;
	width:28px;
	height:28px;
	line-height:28px;
	font-size: 0.8rem;
	margin-bottom:10px;
	color: #f64683;
	cursor:pointer;
	border-radius:8px;
	text-align:center;
}
.charactersc-del:hover {
	background-color: #fdd0df;
}
.charactersc-stats a {
	text-decoration: none;
	color: var(--text-lneiw);
	font-size: 0.8rem;
	display:block;
	width:100%;
	height:28px;
	line-height:28px;
	background-color: var(--scdelbg-color);
	border-radius:8px;
	text-align:center;
}
.charactersc-stats a:hover {
	color: var(--texth-lneiw);
	background-color: var(--scdel-color);
}

/* 响应式设计 */
@media (max-width: 992px) {
 .charactersc-grid {
 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
 @media (max-width: 768px) {
 .charactersc-card {
 margin-bottom: 1rem;
}
	 /* 调整角色卡片网格在移动端的显示 */
    .charactescr-grid {
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: 10px;
 margin-top: 10px;
}
    
    /* 调整角色卡片在移动端的显示 */
    .charactersc-avatar-container {
 height: 180px;
}
 .charactersc-info {
 padding:5px 2px 0 2px;
}
 .charactersc-name {
 font-size: 0.8rem;
 margin-bottom: 5px;
}
 .charactersc-description {
 font-size: 0.7rem;
 margin-bottom: 8px;
 -webkit-line-clamp: 2;
 line-clamp: 2;
 max-height: calc(1.5em * 2);
}
 .charactersc-meta {
 font-size: 0.75rem;
}
}
.loginnei {
	position: fixed;
	top:45%;
	width:400px;
	height:280px;
	background-color:var(--btnbg-color);
	border-radius:15px;
	left:50%;
	transform: translate(-50%, -50%);
	text-align:center;
	z-index: 700; /* 确保在最上层 */
}
.loginnei .loginimg {
	line-height:80px;
	width:80px;
	font-size:1.9rem;
	height:80px;
	color:var(--sclogin-color);
	text-align:center;
	margin:35px auto 0 auto;
	background-color:var(--btnbg-color);
	border-radius:80px;
	border:2px solid #9151d2;
	box-shadow: 0 0 20px 10px rgba(124, 58, 237, 0.2);
}
.loginnei .logininfo {
	line-height:35px;
	font-size:1.2rem;
	height:35px;
	color:var(--scnei-color);
	text-align:center;
	font-weight:bold;
	margin-top:30px;
}
.loginnei .loginxun {
	line-height:45px;
	font-size:1rem;
	height:45px;
	color:#ffffff;
	text-align:center;
	background-color:#9353d3;
	width:90%;
	border-radius:15px;
	cursor:pointer;
	margin:30px auto 0 auto;
}


 @media (max-width: 576px) {
 .charactersc-grid {
 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 gap: 8px;
}
 .scneir {
 position: fixed;
 top:45%;
 left:50%;
 z-index: 700; /* 确保在最上层 */
}
.scneir .scdwens {
 line-height:22px;
font-size:0.8rem;
height:auto;
color:var(--scwen-color);
text-align:center;
}
 .scneir .scfans {
 line-height:50px;
font-size:1rem;
height:50px;
color:var(--scwen-color);
text-align:center;
width:120px;
border-radius:18px;
cursor:pointer;
background-color:var(--scwbg-color);
margin:15px auto 15px auto;
}
.scneir .scfans:hover {
 border-radius:18px;
border-radius:15px;
background-color:var(--scwbgh-color);
}
.scneir .scxuns {
 line-height:50px;
font-size:1rem;
height:50px;
color:#ffffff;
text-align:center;
background-color:#9353d3;
width:200px;
border-radius:15px;
margin-top:15px;
cursor:pointer;
margin:0 auto;
}
 .loginnei {
 top:40%;
width:300px;
height:220px;
}
.loginnei .loginimg {
 line-height:70px;
width:70px;
font-size:1.7rem;
height:70px;
color:#9353d3;
text-align:center;
margin:25px auto 0 auto;
border-radius:70px;
}
.loginnei .logininfo {
 line-height:30px;
font-size:1rem;
height:30px;
margin-top:15px;
}
.loginnei .loginxun {
 line-height:40px;
 font-size:1rem;
 height:40px;
 color:#ffffff;
 text-align:center;
 background-color:#9353d3;
 width:90%;
 border-radius:15px;
 cursor:pointer;
 margin:15px auto 0 auto;
 }
}
.container-fluids{
	width:100%;
	padding-right:0.5rem;
    padding-left:0.5rem;
	margin-right:auto;
	margin-left:auto
}
.chathui{ width:35px; height:35px; text-align:center; line-height:35px;font-size:1.05rem !important; color:var(--chathui-color); cursor:pointer; margin-right:0.2rem;}
.chathui:hover{ background-color:var(--chathuibg-color); border-radius:8px;}
.chatti{font-size:0.85rem !important; color:var(--texts-color) !important;}

.chatbq  {  text-align:right;}
.chatbq .btnw {
	font-size:1.1rem; margin:0;
	padding:0; float:right;
	width:30px; height:30px;
	border:0;
	font-weight:400;
	line-height:30px;
	color:var(--btnwz-color);
	background-color:var(--sidebar-bg);
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer; margin-right:5px;
}
.chatbq .chatstar {
	color:#f5a584;
}
.chatbq .chatzan {
	color:#17c964;
}
.chatbq .btnw:hover {
	background-color:var(--chathuibg-color);
	border-radius:8px;
}
.chatbq .btne { float:right;
	font-size:1.1rem; margin:0;
	padding:0;
	width:30px; height:30px;
	border:0;
	font-weight:400;
	line-height:30px;
	color:var(--jkwen-color); 
	background-color:var(--chat-bte);
	border-radius:30px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width:1px;
    height:1px;
    background-color:none;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
 
    border-radius:1px;
    background-color:var(--chat-bwen);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 1px;
    background-color:var(--chat-bwen);
}

/* 卡片和容器样式 */
 
.card-bodywn {padding:20px; }
.chat-wen{ position:relative;padding-top:15px; padding-bottom:100px;text-align:center;width:100%; margin-bottom:55px; }
.chat-wen .chat-img{width:35%; margin:0 auto; text-align:center; }
.chat-wen .chat-img img{width:90%;border-radius: 12px;box-shadow:0 15px 20px rgba(147,83,211, 0.8);
	transition: box-shadow 0.3s ease; }

.chat-wen .chat-neir{ position:absolute; bottom:0; left:10%; width:80%; z-index:8;background-color:var(--chat-bwens);border-radius: 8px;box-shadow:var(--chat-shadow); height:165px; }
.chat-wen .chat-neid{ text-align:center; line-height:45px; font-weight:600; height:45px;color:var(--scnei-color); padding-top:10px; }

.chat-wen .chat-ninfo{ text-align:left;width:96%; height:100px; overflow-y:scroll; margin-left:2%;}
.chat-wen .chat-nti{ text-align:left; color:#a873dc;font-size:1rem; padding-bottom:8px;}
.chat-wen .chat-nms{ text-align:left; color:var(--chat-nms);font-size:0.86rem; line-height:22px;padding-bottom:8px;}



.chat-bubble{ background-color:var(--chat-bubble); border-radius:0 10px 10px 10px; padding-bottom:15px; max-width:70%;}
.chat-bubble .chat-dhti{font-size:0.8rem !important; color:var(--chat-dhti); text-align:left; padding:15px 20px 5px 20px;}
.chat-bubble .chat-dhnei{font-size:1.1rem !important; color:var(--jkwen-color); text-align:left; padding:5px 20px; line-height:25px;}
.chat-bubble .chat-dhneis{font-size:1.1rem !important; color:var(--jkwen-color); text-align:left; padding:5px 20px; line-height:25px; }
.chat-bubble .chat-dhjian{font-size:0.8rem !important; color:var(--kuwen-color); text-align:left; margin:10px 20px; line-height:25px;background-color:var(--chat-dhjian); border-radius:10px; padding:15PX;}

.chat-bubbleu{ background-color:var(--chat-bubble); border-radius:10px 0 10px 10px; padding-bottom:10px; max-width:70%;}
.chat-bubbleu .chat-dhtiu{font-size:0.8rem !important; color:var(--chat-dhti); text-align:left; padding:10px 20px 5px 20px;}
.chat-bubbleu .chat-dhneiu{font-size:1rem !important; color:var(--jkwen-color); text-align:left; padding:5px 20px; line-height:25px;}

.card-footers{background-color:var(--footers-bg); padding:10px 0; position:relative;}

.card-footers #chatForm {
	width:70%;
	margin:5px auto 10px auto;
	position:relative;
}
.card-footers .form-controln {
	display:block;
	width:100%;
	text-indent:42px;
	height:55px;
	line-height:45px;
	font-size:1rem;
	font-weight:400;
	color:var(--kuwen-color);
	background-color:var(--biaosbg-color);
	border:2px solid var(--bors-bg);
	border-radius:15px;
}


.card-footers .btnmw{
 position:absolute;
 top:5px;
 right:10px;
 z-index: 700; /* 确保在最上层 */
 font-size:1.35rem;  
	padding:0;
	width:40px; height:40px;
	border:0;
	font-weight:400;
	line-height:40px;
	color:var(--jkwen-color);
	background-color:var(--biaosbg-color);
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.card-footers .btnmw:hover{
	background-color:var(--borswz-bg);
}


.card-footers .btnmt{
 position:absolute;
 top:10px;
 right:10px;
 z-index: 700; /* 确保在最上层 */
 font-size:0.9rem;  
	padding:0;
	width:80px; height:35px;
	border:0;
	font-weight:400;
	line-height:35px;
	color:#ffffff;
	background-color:#9353d3;
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.card-footers .btnmt:hover{
	background-color:#a974d8;
}


.card-footers .btnmd{
 position:absolute;
 top:10px;
 left:10px;
 z-index: 700; /* 确保在最上层 */
 font-size:1.1rem;  
	padding:0;
	width:35px; height:35px;
	border:0;
	line-height:35px;
	color:var(--sdeng-color);
	background-color:var(--sdeng-bg);
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.card-footers .btnmd:hover{
	background-color:var(--sdengh-bg);color:var(--sdengh-color);
}

 
.card-footers .tandui{
 position:absolute; display:none;
 bottom:50px;
 left:10px;
 z-index: 700; /* 确保在最上层 */
	width:235px; 
	border-radius:8px;
	text-align:left;
	padding:6px 6px 1px 6px;
	border:1px solid #e5e5e5;
	background:var(--card-bg);
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
	box-shadow: 0 1px 5px 2px rgba(200,200,200, 0.5);
}

.card-footers .tandui .tanhui{
	line-height:35px; margin-bottom:5px; 
	border-radius:8px;
	text-align:left;
	text-indent:15px;
	font-size:0.9rem;  
	background:var(--duihua-bg);
	cursor:pointer;
	color:var(--duihua-color);
}
.card-footers .tandui .tanhui:hover{
	background-color:var(--duihuah-bg);
}


.card-footers .tandui1,.card-footers .tandui2{
 position:absolute; display:none;
 bottom:30px;
 left:5px;
 z-index: 9900; /* 确保在最上层 */
	width:320px; 
	border-radius:8px;
	text-align:left;
	padding:5px 5px 3px 5px;
	border:1px solid #e5e5e5;
	background:var(--card-bg);
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
	box-shadow: 0 1px 5px 2px rgba(200,200,200, 0.5);
}
.card-footers .tanqi .tanti{
	line-height:28px; 
	text-align:left;
	text-indent:10px;
	font-size:0.8rem;  
	color:var(--text-color);
}
.card-footers .tanqi .tanhui{
	line-height:28px; margin-bottom:2px; 
	border-radius:8px;
	text-align:left;
	text-indent:10px;
	font-size:0.8rem;  
	background:var(--duihua-bg);
	cursor:pointer;
	color:var(--duihua-color);
}
.card-footers .tanqi .tanhui:hover{
	background-color:var(--duihuah-bg);
}


.btnb{
 
 font-size:0.9rem;  
	width:100%; height:35px;
	border:1px solid #9353d3;
	font-weight:400;
	line-height:35px;
	color:#9353d3;
	background-color:#ffffff;
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.btnb:hover{
	background-color:#9353d3;
	color:#ffffff;
}

.liaolist{
	padding:0 0.8rem; background-color:#ffffff;
}

.liaoimg{float:left; margin:0;}
.liaonei{float:left; margin:0; padding-left:8px;font-size:0.9rem;  height:25px;line-height:25px;color:var(--wlogin-color);}
	
.liaodel{float:right; margin:0; padding-right:8px;font-size:0.8rem;  
 height:25px;
	line-height:25px;
	color:var(--dels-color); border:0; background:var(--delsbg-color);}
.dishide{display:none;}


.card-footers .chat-infow{
 position:absolute;
 top:12px;
 right:20px;
 z-index: 702; /* 确保在最上层 */
}
.card-footers .chat-infow .yuci{
  font-size:0.9rem;  
  height:25px;
  line-height:25px;
  color:var(--texts-color);
}
.card-footers .chat-infow .yuci span{
	font-weight:600;
  color:var(--jkwen-color);
}
.card-footers .btnew{
  width:90px; text-align:center; border-radius:5px;
  margin:5px 0 5px 0; height:30px; line-height:30px; 
  background-color:#9353d3;
  color:#ffffff;
  display:block;
  z-index: 1; cursor:pointer; 
  font-size:0.9rem;
}
.card-footers .btnew:hover{
  background-color:#a974d8;
}

.chevron-up{ background-color:var(--chat-bubble); border-radius:5px; width:30px; height:30px; line-height:30px; text-align:center;font-size:0.9rem; color:var(--texts-color); position:absolute; right:10px; bottom:150px; z-index:8; cursor:pointer;box-shadow:var(--chevron-shadow);  }
.chevron-down{ background-color:var(--chat-bubble); border-radius:5px; width:30px; height:30px; line-height:30px; text-align:center;font-size:0.9rem; color:var(--texts-color); position:absolute; right:10px; bottom:110px; z-index:8; cursor:pointer;box-shadow:var(--chevron-shadow);  }

.col-md-9w {
	flex:0 0 auto;
width: calc(100% - 330px);  
}
.col-md-9q {
 width: 100%;  
}
.col-md-3w{
	flex:0 0 auto; background-color:var(--col-mdbg); 
width:322px;  margin-left:8px;
}

.character-bg {
	height: 220px;
	overflow: hidden;
	position: relative;
	border-radius:8px 8px 0 0;
}
.character-bg img{
	width:100%;
	border-radius:8px 8px 0 0;
}

.character-bg .fuceninfo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex: 1;
	display: flex;
	background:linear-gradient(180deg, var(--fbian-color), var(--fbiany-color) );
	flex-direction: column;
	padding: 12px;
	flex-grow: 1;
}
.character-bg .fuceninfo .fucenti{
	position: absolute;
	top: 150px;
	left:15px;
	z-index:8;
	text-align:left;
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--jkwen-color);
}
.character-bg .fuceninfo .fucenimg{
	position: absolute;
	top: 182px;
	left:15px;
	z-index:8;
	text-align:left;
	font-size: 0.85rem;
	color:var(--fuce-color);
	
}


.character-bg .chatxt {
	position: absolute;
	top: 180px;
	right:95px;
	z-index:8;
}
.character-bg .chatxt a{
	display:block;
	font-size:0.7rem;  
	width:80px; height:30px;
	border:0;
	font-weight:400;
	line-height:30px;
	color:var(--fuww-color);
	background-color:var(--chatxt-bg);
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.character-bg .chatxt a:hover{
	background-color:var(--chatxt-hbg);
}

.character-bg .chatxq {
	position: absolute;
	top: 180px;
	right: 10px;
	z-index:8;
}
.character-bg .chatxq a{
	display:block;
	font-size:0.7rem;  
	width:80px; height:30px;
	border:0;
	font-weight:400;
	line-height:30px;
	color:var(--fuww-color);
	background-color:var(--chatxt-bg);
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
}
.character-bg .chatxq a:hover{
	background-color:var(--chatxt-hbg);
}


.card-headerw{
	font-size:0.9rem;  
    height:30px;
	line-height:30px;
	color:#a872db; margin-bottom:10px;
	text-align:left;
	padding:5px 15px; text-align:left;
}
.card-headerw i{
	font-size:0.8rem;  
}
 #xianyouc{
	display:none;
 }
 
 .bg-whites {
	background-color:var(--sidebar-bg);
 }
 
@media (max-width:768px) {
 .col-md-9w {
  width: 100%;  
 }
 .col-md-3w{
	display:none;
 }	
 #xianneir{
	display:none;
 }
 #xianyouc{
	display:block;
 }
 #youcenei{
	display:none;
 }
 .chat-infow{
	display:none;
 }
 
 
 .chat-wen .chat-ninfo{ width:88%;  margin-left:6%;}
 .chat-wen .chat-nti{font-size:0.95rem; }
 .chat-wen .chat-nms{ font-size:0.8rem; line-height:22px;}
 
 .card-footers #chatForm {
	width:92%;
	margin:10px auto 10px auto;
}
 .card-footers .form-controln {
	text-indent:42px;
	height:55px;
	line-height:45px;
	font-size:1rem;
 }

 .card-footers .btnmw{
   position:absolute;
   top:5px;
   right:10px;
   z-index: 700; /* 确保在最上层 */
   font-size:1.35rem;  
	padding:0;
	width:40px; height:40px;
	border:0;
	font-weight:400;
	line-height:40px;
	border-radius:5px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;
 }
 


 .card-footers .btnmt{
   position:absolute;
   top:10px;
   right:10px;
   z-index: 700; /* 确保在最上层 */
   font-size:0.9rem;  
	padding:0;
	width:80px; height:35px;
	border:0;
	font-weight:400;
	line-height:35px;
 }
 
}

.rechat {
	padding:15px 15px;
}
.rechatleft {
	float:left;
  width:35%;  background-color:var(--sidebar-bg);  box-shadow:var(--chevron-shadow); min-height:210px; border-radius:10px;
}
.rechatleft .rechatbt{
	padding:15px 15px;
}
.rechatleft .rechatbt .rechatti{
	float:left; font-size:1.8rem; margin-top:5px;color:var(--zise-color);
}
.rechatleft .rechatbt .rechatwi{
	float:left; margin-left:10px;  
}
.rechatleft .rechatbt .rechatwi .rechatwz{
	font-size:1.1rem; line-height:28px; font-weight:bold; text-align:left;
}
.rechatleft .rechatbt .rechatwi .rechatdq{
	font-size:0.8rem; line-height:22px; color:var(--btnwz-color);text-align:left;
}
.rechatleft .rechatbt .rechatpn{
  border-bottom:1px solid var(--bors-bg); height:85px; 
}
.rechatleft .rechatbt .rechatpw{
  height:85px; 
}
.rechatleft .rechatbt .rechatnei{
	float:left;  margin-top:15px; width:49%; border-right:1px solid var(--bors-bg); margin-bottom:10px; 
}
 .rechatleft .rechatbt .rechatneis{
	float:left;  margin-top:15px; width:49%;
}

.rechatleft .rechatbt .rechatns{
	font-size:0.9rem; line-height:22px; text-align:center;color:var(--btnwz-color);
}
.rechatleft .rechatbt .rechatnm{
	font-size:1.35rem; line-height:32px; text-align:center;color:var(--zise-color); font-weight:bold;
}

.rechatright{
  float:left;
   width:64%;  margin-left:1%; 
}
.rechatright .rechaty01{
	background-color:var(--sidebar-bg);box-shadow:var(--chevron-shadow);border-radius:10px; width:100%; padding-bottom:12px; 
}
.rechatright .rechatbt{
	padding:15px 15px 0 15px;
}
.rechatright .rechatbt .rechatti{
	float:left; font-size:1.1rem;color:var(--zise-color);line-height:28px;
}
.rechatright .rechatbt .rechatwi{
	float:left; margin-left:10px;font-size:1.1rem; line-height:28px; font-weight:bold; text-align:left;  
}
 
.rechatright .rechaty01 .userlist ul{
 width:100%; padding:0;
}
.rechatright .rechaty01 .userlist ul li{
 width:23%; margin-right:1.8%; float:left; list-style:none ; text-align:center; border:2px solid var(--bors-bg); background-color:var(--scwbg-color); border-radius:8px; padding:10px 0; cursor:pointer; margin-bottom:15px; position:relative;
}
.rechatright .rechaty01 .userlist ul .uxuanz{
  border:2px solid var(--wlogin-color); background-color:var(--jueshow-color);  
}
.rechatright .rechaty01 .userlist ul li .uming{
  text-align:center; line-height:22px;font-size:0.85rem; color:#ffffff; position:absolute; right:-10px; top:-10px; z-index:8; background-color:var(--wlogin-color); border-radius:8px;  width: 70px; height:22px;   
}
.rechatright .rechaty01 .userlist ul li .ufeiy{
  text-align:center; line-height:22px;font-size:1.1rem; color:var(--text-color); font-weight:bold; padding-top:8px; padding-bottom:10px;   
}
.rechatright .rechaty01 .userlist ul li .ucisu{
  text-align:center; line-height:20px;font-size:0.85rem; color:var(--text-color); 
}
.rechatright .rechaty01 .userlist ul li .ujues{
  text-align:center; line-height:20px;font-size:0.85rem; color:var(--zise-color); 
}
.rechatright .rechaty01 .userlist ul li .ukefu{
  text-align:center; line-height:20px;font-size:0.85rem; color:var(--zise-color); padding-bottom:8px; 
}

.rechatright .rechaty02{
	background-color:var(--sidebar-bg);box-shadow:var(--chevron-shadow);border-radius:10px; width:100%;  margin-top: 10px;
}

 
.rechatright .payinfo{
 width:46%;text-align:center;  border:2px solid var(--bors-bg); background-color:var(--scwbg-color); border-radius:8px; padding:5px 10px 10px 10px; cursor:pointer; margin:15px 15px 5px 0; position:relative; float:left; 
}

.rechatright .payxuan{
border:2px solid var(--zise-color); background-color:var(--alibg-color);  
}

.rechatright .ptu02{
	display:none;
}


.rechatright .payinfo .payimg{
	float:left; padding-left:5px; padding-top:5px;
}
.rechatright .payinfo .payimg img{
  width:40px; height:40px; border-radius:10px;
}
.rechatright .payinfo .paynei{
	float:left; padding-left:10px;
}
.rechatright .payinfo .paywen{
	font-size:0.9rem; line-height:25px; text-align:left;
}
.rechatright .payinfo .paywbi{
	font-size:0.75rem; line-height:20px; color:var(--btnwz-color);text-align:left;
}
.rechatright .payinfo .paydui{
	float:right; margin-left:10px; width:55px; height:25px; line-height:25px; text-align:center;border-radius:8px;border:1px solid #ff71d7;color:#ff71d7;font-size:0.9rem;   
}
.rechatright .payinfo .paytuis{
	 width:20px; height:20px; line-height:20px; text-align:center;border-radius:20px;color:#ffffff;font-size:0.75rem;  background-color:#9353d3; position:absolute; right:-10px; top:-10px; z-index:5;
}
.rechatright .rechaty02 .paysms{
	 text-align:center; color:#f5a524;font-size:0.9rem;  line-height: 25px; 
}

.rechatright .queren{
	 text-align:center; color:#ffffff;font-size:1.1rem; line-height: 45px; width:100%; background-color:#9353d3;   border-radius:8px;  cursor:pointer; margin:10px 0 6px 0; 
}
.rechatright span{
	font-weight:bold;
}
.rechatright .payxie{
	 text-align:center; color:var(--btnwz-color);font-size:0.9rem;  line-height: 25px; text-align:center; 
}
.rechatright .payxie a{
	 text-align:center; color:var(--zise-color);font-size:0.9rem;  line-height: 25px; 
}
.rechatleft .rechatbts{
	padding:10px 15px;
}
.rechatright .paycz{
 background-color:var(--sidebar-bg);box-shadow:var(--chevron-shadow);border-radius:10px; width:100%;  margin-top: 10px; margin-bottom:15px;
}
.rechatright .paycw{
	font-size:1.1rem; line-height:25px; text-align:left; padding:8px 15px;
}
.rechatright .paycw i{
	font-size:0.8rem; color:var(--zise-color); 
}
.rechatright .paycli{
	font-size:0.9rem; line-height:25px; text-align:left; padding:2px 35px 18px 35px;color:var(--btnwz-color);   
}
.card-headers{ padding:0 5px 0 2px;}
@media (max-width:768px) {
 .rechatleft {
  width:100%;   
 }
 .rechatright{
   width:100%; margin-left:0; margin-top:10px;  
 }
 .payzfu{
	 width:100%; position:fixed; left:0; bottom:0; height:60px; z-index:9999;background-color:var(--sidebar-bg); 
 }
 .rechatright .payinfo{
  width:90%;  margin:10px 0 5px 5%; 
 }
}

@media (max-width:480px) {
 .rechatleft {
	 display:none;
 }
 .rechatright{
   width:100%; margin-left:0; margin-top:0;  
 }
 .rechatright .rechaty01 .userlist ul li{
 width:48%; margin-right:1.5%; float:left; list-style:none ; text-align:center; border:2px solid var(--bors-bg); background-color:var(--scwbg-color); border-radius:8px; padding:10px 0; cursor:pointer; margin-bottom:15px;
}
 .rechatright .rechaty01 .userlist ul li .uming{
  font-size:0.8rem;  
}
.rechatright .rechaty01 .userlist ul li .ufeiy{
  line-height:22px;font-size:0.95rem;  
}
.rechatright .rechaty01 .userlist ul li .ucisu{
  line-height:20px;font-size:0.75rem;  
}
.rechatright .rechaty01 .userlist ul li .ujues{
  line-height:20px;font-size:0.75rem;  
}
.rechatright .rechaty01 .userlist ul li .ukefu{
   line-height:20px;font-size:0.75rem; 
} 
.content-area{
	width: 100%;
    margin-right: 0%; 
 }
 .container-fluids{
	padding-right:0;
    padding-left:0;
 }
 
 
 .chat-bubble{ padding-bottom:10px; max-width:75%;}
.chat-bubble .chat-dhti{font-size:0.8rem !important;  padding:10px 10px 5px 10px;}
.chat-bubble .chat-dhnei{font-size:1.05rem !important;  padding:5px 10px; line-height:25px;}
.chat-bubble .chat-dhneis{font-size:1.05rem !important;  padding:5px 10px; line-height:20px;}
.chat-bubble .chat-dhjian{font-size:0.75rem !important;margin:5px 10px; line-height:20px; padding:8PX;}

.chat-bubbleu{ padding-bottom:5px; max-width:75%;}
.chat-bubbleu .chat-dhtiu{font-size:0.75rem !important; padding:5px 10px 5px 10px;}
.chat-bubbleu .chat-dhneiu{font-size:0.95rem !important; padding:5px 10px; line-height:20px;}
 .card-bodywn {padding:10px 6px; }
}

.card-headerwu{
 font-size:1.3rem;color:#ffffff; height:50px; background-color:var(--zise-color); text-align:left; line-height:50px; text-indent: 18px; border-radius:12px 12px 0 0;
}
.card .btnwu {
	font-size:1rem; 
   height:42px;
   width:100px;
   border:0;
	border-radius:8px;
	font-weight:400;
	line-height:42px;
	color:#ffffff;
	background-color:var(--zise-color);
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;  
}
.fuceng{position:relative;}
.fuceng .uptu{position:absolute; right:0; top:85px; z-index:5; display:none;font-size:1rem; 
   height:42px;
   width:100px;
   border:0;
	border-radius:8px;
	font-weight:400;
	line-height:42px;
	color:#ffffff;
	background-color:var(--zise-color);
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	cursor:pointer;   }
.jucontent-center{ margin:15px auto; width:100%;}	
@media (max-width:560px) {	
.card-headerwu{
 font-size:1.1rem;  
 }
 .jucontent-center{ margin-top:50px;  }	
}


.helpnei{
  width:99%;  background-color:var(--sidebar-bg);  box-shadow:var(--chevron-shadow);  border-radius:5px;  margin:10px 0.5% 0 0.5%;
}
.helpnei .helpti{
 font-size:0.95rem; margin-top:5px;color:var(--texts-color); text-align:center; line-height:38px;
}
.helpnei .helpti i{
 font-size:0.9rem; 
}

.helpnei .helpin{
 width:31.3%; margin-right:1%; margin-left:1%; float:left; list-style:none ; text-align:center;  margin-bottom:15px;  
}
.helpnei .helpin .helpinti{
  font-size:1.1rem;color:var(--zise-color);line-height:28px; padding-bottom:5px;
}
.helpnei .helpin .helpinxi{
  font-size:0.9rem;color:var(--texts-color);line-height:23px;
}

.helpnei .helpin .helpinxi i{
  font-size:0.7rem; 
}
.helpnei .helpin .helpinimg{
	 border-radius:15px; width:100%; margin-top:15px;
}
.helpnei .helpin .helpinimg img{
	 border-radius:15px; width:100%;
}

@media (max-width:560px) {	

 .helpnei .helpti{
 font-size:0.8rem;  color:var(--texts-color); text-align:center; line-height:23px;  
 padding:10px 15px; 
}
.helpnei .helpti i{
 font-size:0.7rem; 
}
 .helpnei .helpin{
  width:96%; margin-right:2%; margin-left:2%;  list-style:none ; text-align:center;  margin-bottom:15px;  
 } 
}