:root{
	--body-bgcolor:#fff;
	--body-border-radius:5px;
	--router-body-bgcolor:#F5F7FA;

	/* 背景颜色 */
	--back-color:#fff;
	/* 背景色 白色 */
	--back-color-white:#fff;
	/* 背景颜色 浅灰色 */
	--back-color-lightGray:#F5F7FA;
	/* 背景颜色 浅灰色1 */
	--back-color-lightGray-1:#F0F2F5;
	/* 背景颜色 浅灰色2 */
	--back-color-lightGray-2:#EBEDF0;
	/* 背景色	深灰色 */
	--back-color-drakGray:#606266;
	/* 背景色 主要 */
	--back-color-primary:#646cff;
	/* 背景色 成功 */
	--back-color-success:#67C23A;
	/* 背景色 警告 */
	--back-color-warning:#E6A23C;
	/* 背景色 错误 */
	--back-color-erorr:#F56C6C;
	/* 背景色 错误1 */
	--back-color-erorr1:#f89898;


	/* 文字颜色 常规 #606266 */
	--text-color:#303133;
	--text-color-h1:#303133;
	--text-color-h2:#676a6e;
	--text-color-h3:#c2c6cc;
	--text-color-type:#fff;
	--text-color-black:black;
	/* 文字颜色 主要 */
	--text-color-primary:#646cff;
	/* 文字颜色 成功 */
	--text-color-success:#67C23A;
	/* 文字颜色 警告 */
	--text-color-warning:#E6A23C;
	/* 文字颜色 错误 */
	--text-color-error:#F56C6C;
	/* 文字颜色 错误 */
	--text-color-error1:#f89898;

	/* 文字大小 */
	--text-size:12px;
	
	/* 背景色：白色 */
	--bgcolor:#fff;
	/* 背景色：白色 */
	--bgcolor-f:#fff;
	/* 背景色：灰色 */
	--bgcolor-f5:var(--back-color-lightGray);

	/* 圆角 */
	--border-radius-5:5px;
	/* 圆角 */
	--border-radius-8:8px;
	/* 圆角 */
	--border-radius-10:10px;

	/* 导航背景色 */
	--nav-bg-color:rgba(255, 255, 255, 0.8);
	--nav-bg-color-1:rgba(255, 255, 255);
	/* 列表下横线 */
	--list-item-border-bottom:#f5f5f5;
	/* 主题状态 */
	--theme-name:day;
	/* 动画效果 */
	--transition:0.5s cubic-bezier(0.1, 0.4, 0.3, 0.8);
}


/* 夜间主题变量 */
.moon {
	/* body背景色 */
  --back-color-lightGray-1:#0D1317;
	/* 模块主体背景色 */
	--back-color: #273138;
	
	/* --back-color-primary:#2f327a; */
	/* 导航背景色 */
	--nav-bg-color:rgba(0, 0, 0, 0.6);
	--nav-bg-color-1:rgba(0, 0, 0);

	/* 主要文字颜色 */
	--text-color:#fff;
	--text-color-h1:#ffffff;
	--text-color-h2:#ffffff;
	--text-color-h3:#bbc3ce;
	--text-color-h4:#a2a9b3;
	--text-color-h5:#878d96;

	/* 列表下横线 */
	--list-item-border-bottom:#1d3242;
	/* 列表鼠标经过颜色 */
	--back-color-lightGray:#38434b;
	/* 主题状态 */
	--theme-name:moon;
	/* 动画效果 */
	--transition:0.5s cubic-bezier(0.1, 0.4, 0.3, 0.8);
}


*{
	font-size:13px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}



html, body{	
	height:100dvh;
	height:100vh;
	height:100%;
	padding:0px;
	margin:0px;
	/* overflow: hidden; */
  background: var(--back-color-lightGray-1);
	transition:background-color var(--transition), color var(--transition);
	/* 移动端：不设置height，font-size失效，必须加上下面两段 */
	-webkit-text-size-adjust: none;
  text-size-adjust: none;
	/* 解决iphone下巴 */
	/* height: -webkit-fill-available;
  min-height: -webkit-fill-available;
	padding-bottom: env(safe-area-inset-bottom);
	scroll-padding-bottom: env(safe-area-inset-bottom); */
}

a{
	color:var(--text-color);
}

#body{
	border-radius: 0;
}

.router-body{
	display: flex;
	background: var(--router-body-bgcolor) !important;
}
.bg-color{
	background: var(--back-color);
}
.body{
	padding:0px;
	flex: 1;
	display: flex;
  border-radius: 5px;
}

.body-5{
	padding:5px;
	flex: 1;
	display: flex;
	border-radius:var(--body-border-radius);
}

.body-8{
	margin:8px;
	flex: 1;
	display: flex;
	border-radius:var(--body-border-radius);
}

.body-10{
	margin:10px;
	flex: 1;
	display: flex;
	border-radius:var(--body-border-radius);
}

.body-15{
	margin:15px;
	flex: 1;
	display: flex;
	border-radius:var(--body-border-radius);
}

.body-20{
	margin:20px;
	flex: 1;
	display: flex;
	border-radius:var(--body-border-radius);
}


/* 背景色 */
.back-color{
	background: var(--back-color) !important;
}
/* 背景色 白色 */
.back-color-white{
	background: var(--back-color-white) !important;
}
/* 背景色 浅灰色 */
.back-color-lightGray{
	background: var(--back-color-lightGray) !important;
}
/* 背景色 深灰色 */
.-back-color-drakGray{
	background: var(---back-color-drakGray) !important;
}
/* 背景色 主要 */
.back-color-primay{
	background: var(--back-color-primary) !important;
}
/* 背景色 成功 */
.back-color-success{
	background: var(--back-color-success) !important;
}
/* 背景色 警告 */
.back-color-warning{
	background: var(--back-color-warning) !important;
}
/* 背景色 错误 */
.back-color-erorr{
	background: var(--back-color-erorr) !important;
}
/* 背景色 错误1 */
.back-color-erorr1{
	background: var(--back-color-erorr1) !important;
}



/* 按钮 背景色 */
.button-color{
	background: var(--back-color) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 白色 */
.button-color-white{
	background: var(--back-color-white) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 浅灰色 */
.button-color-lightGray{
	background: var(--back-color-lightGray) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 深灰色 */
.button-color-drakGray{
	background: var(---back-color-drakGray) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 主要 */
.button-color-primay{
	background: var(--back-color-primary) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 成功 */
.button-color-success{
	background: var(--back-color-success) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 警告 */
.button-color-warning{
	background: var(--back-color-warning) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 错误 */
.button-color-erorr{
	background: var(--back-color-erorr) !important;
	/* transition: filter 0.3s; */
}

/* 按钮 背景色 错误1 */
.button-color-erorr1{
	background: var(--back-color-erorr1) !important;
	/* transition: filter 0.3s; */
}




/* 弹性盒子 布局 */
.flex{
	display: flex;
}
.flex-col{
	display: flex;
	flex-direction: column;
}
.flex-row{
	display: flex;
	flex-direction: row;
}
.flex-col-1{
	display: flex;
	flex:1;
	flex-direction: column;
}
.flex-row-1{
	display: flex;
	flex:1;
	flex-direction: row;
}
/* 填充剩余大小 */
.flex1{
	flex:1;
}
.flex0{
	flex-shrink: 0;
}
/* 弹性盒子 列 */
.fd-col{
	flex-direction: column;
}
/* 弹性盒子 列 反向 */
.fd-col-r{
	flex-direction: column-reverse;
}
/* 弹性盒子 行 */
.fd-row{
	flex-direction: row;
}
.wrap{
	flex-wrap: wrap;
}
.nowrap{
	flex-wrap: nowrap;
}
/* 弹性盒子 列 反向 */
.fd-row-r{
	flex-direction: row-reverse;
}
/* 弹性盒子 主轴 居中对齐 */
.jc-c{
	justify-content: center;
}
/* 弹性盒子 主轴 左对齐 */
.jc-l{
	justify-content: flex-start;
}
/* 弹性盒子 主轴 右对齐 */
.jc-r{
	justify-content: flex-end;
}
/* 弹性盒子 主轴 左右分布对齐 */
.jc-lr{
	justify-content: space-between;
}
/* 弹性盒子 主轴 平均分布对齐 */
.jc-p{
	justify-content: space-evenly;
}
/* 弹性盒子 交叉轴 垂直 对齐 */
.ai-c{
	align-items: center;
	line-height: 1;
}
.ai-c-c{
	justify-content: center;
	align-items: center;
	line-height: 1;
}
/* 弹性盒子 交叉轴 顶部 对齐 */
.ai-t{
	align-items: flex-start;
}
/* 弹性盒子 交叉轴 底部 对齐 */
.ai-b{
	align-items: flex-end;
}


/* 网格 布局 */
.grid{
	display: grid;
}
/* 风格 布局 列 */
.grid-col{
	grid-auto-flow: column;
}
/* 风格 布局 行 */
.grid-row{
	grid-auto-flow: row;
}


/* 高度 100% */
.h100{
	height:100%;
}
.vh100{
	height:100vh;
}
/* 宽度 100% */
.w100{
	width: 100%;
}.vw100{
	width: 100vw;
}
/* 最小宽度 */
.minw{
	min-width: 0px;
}
/* 最小高度 */
.minh{
	min-height:0px;
}



/* padding 填充 */
.p0{
	padding:0px;
}
.p5{
	padding:5px;
}
.p10{
	padding:10px;
}
.p15{
	padding:15px;
}
.p20{
	padding:20px;
}

/* padding-top 填充 */
.pt5{
	padding-top:5px;
}
.pt10{
	padding-top:10px;
}
.pt15{
	padding-top:15px;
}
.pt20{
	padding-top:20px;
}


/* padding-bottom 填充 */
.pb5{
	padding-bottom:5px;
}
.pb10{
	padding-bottom:10px;
}
.pb15{
	padding-bottom:15px;
}
.pb20{
	padding-bottom:20px;
}

/* padding-left 填充 */
.pl5{
	padding-left:5px;
}
.pl10{
	padding-left:10px;
}
.pl15{
	padding-left:15px;
}
.pl20{
	padding-left:20px;
}

/* padding-right 填充 */
.pr5{
	padding-right:5px;
}
.pr10{
	padding-right:10px;
}
.pr15{
	padding-right:15px;
}
.pr20{
	padding-right:20px;
}

/* padding left right 填充 */
.plr5{
	padding-left: 5px;
	padding-right: 5px;
}
.plr10{
	padding-left: 10px;
	padding-right: 10px;
}
.plr15{
	padding-left: 15px;
	padding-right: 15px;
}
.plr20{
	padding-left: 20px;
	padding-right: 20px;
}

/* padding top bottom 填充 */
.ptb5{
	padding-top: 5px;
	padding-bottom: 5px;
}
.ptb10{
	padding-top: 10px;
	padding-bottom: 10px;
}
.ptb15{
	padding-top: 15px;
	padding-bottom: 15px;
}
.ptb20{
	padding-top: 20px;
	padding-bottom: 20px;
}



/* margin 边距 */
.m0{
	margin:0px;
}
.m5{
	margin:5px;
}
.m10{
	margin:10px;
}
.m15{
	margin:15px;
}
.m20{
	margin:20px;
}

/* margin-left 边距 */
.ml5{
	margin-left:5px;
}
.ml10{
	margin-left:10px;
}
.ml15{
	margin-left:15px;
}
.ml20{
	margin-left:20px;
}

/* margin-right 边距 */
.ml5{
	margin-right:5px;
}
.ml10{
	margin-right:10px;
}
.ml15{
	margin-right:15px;
}
.ml20{
	margin-right:20px;
}

/* margin-top 边距 */
.mt5{
	margin-top:5px;
}
.mt10{
	margin-top:10px;
}
.mt15{
	margin-top:15px;
}
.mt20{
	margin-top:20px;
}

/* margin-bottom 边距 */
.mb5{
	margin-bottom:5px;
}
.mb10{
	margin-bottom:10px;
}
.mb15{
	margin-bottom:15px;
}
.mb20{
	margin-bottom:20px;
}

/* Item 间距 */
.gap1{
	gap:1px;
}
.gap2{
	gap:2px;
}
.gap3{
	gap:3px;
}
.gap4{
	gap:4px;
}
.gap5{
	gap:5px;
}
.gap6{
	gap:6px;
}
.gap7{
	gap:7px;
}
.gap8{
	gap:8px;
}
.gap9{
	gap:9px;
}
.gap10{
	gap:10px;
}
.gap15{
	gap:15px;
}
.gap20{
	gap:20px;
}
.gap25{
	gap:25px;
}
.gap30{
	gap:30px;
}

/* Item 列 间距 */
.gap-col-5{
	column-gap:5px;
}
.gap-col-10{
	column-gap:10px;
}
.gap-col-15{
	column-gap:15px;
}
.gap-col-20{
	column-gap:20px;
}
/* Item 行 间距 */
.gap-row-5{
	row-gap: 5px;
}
.gap-row-10{
	row-gap: 10px;
}
.gap-row-15{
	row-gap: 15px;
}
.gap-row-20{
	row-gap: 20px;
}



.flex-c{
	display: flex;
	flex-direction: column;
	height:100%;
}

/* 圆角 */
.radius5{
	border-radius: 5px;
}
.radius5 .radius5{
	border-radius: 5px;
}
.radius6{
	border-radius: 6px;
}
.radius7{
	border-radius: 7px;
}
.radius8{
	border-radius: 8px;
}
.radius9{
	border-radius: 9px;
}
.radius10{
	border-radius: 10px;
}
.radius15{
	border-radius: 15px;
}
.radius20{
	border-radius: 20px;
}

/* 鼠标 图标 */
.pointer{
	cursor: pointer;
}

/* 文字 颜色 */
.text-color-black{
	color:var(--text-color-black);
}
.text-color{
	color:var(--text-color);
}
.text-color-type{
	color:var(--text-color-type);
}
.text-color-primary{
	color:var(--text-color-primary);
}
.text-color-success{
	color:var(--text-color-success);
}
.text-color-warning{
	color:var(--text-color-warning);
}
.text-color-error{
	color:var(--text-color-error);
}
.text-color-error1{
	color:var(--text-color-error1);
}

/* 文字 粗体 */
.font-bold{
	font-weight:bold;
}
/* 文字 大小 */
.font-size-12{
	font-size: 12px;
}
.font-size-13{
	font-size: 13px;
}
.font-size-14{
	font-size: 14px;
}
.font-size-15{
	font-size: 15px;
}

.size-12{
	font-size: 12px;
}
.size-13{
	font-size: 13px;
}
.size-14{
	font-size: 14px;
}
.size-15{
	font-size: 15px;
}
.size-16{
	font-size: 16px;
}
.size-17{
	font-size: 17px;
}
.size-18{
	font-size: 18px;
}
.size-19{
	font-size: 19px;
}
.size-20{
	font-size: 20px;
}
.size-21{
	font-size: 21px;
}
.size-22{
	font-size: 22px;
}
.size-23{
	font-size: 23px;
}
.size-24{
	font-size: 24px;
}
.size-25{
	font-size: 25px;
}

/* 文字 对齐方式 */
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-center{
	text-align: center;
}


/* 标题文字 */
.text-head{
	font-size: 13.5px;
	font-weight:bold;
	color: var(--text-color);
}
/* 内容文字 */
.text-content{
	font-size: 12px;
	color: var(--text-color);
}
.text-norow{
  white-space: nowrap;      /* 强制不换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出部分显示省略号 */
}
.text-row{
	word-break: break-word;
  white-space: normal;
}


.line1{
	line-height: 1;
}
.line11{
	line-height: 1.1;
}
.line12{
	line-height: 1.2;
}
.line13{
	line-height: 1.3;
}
.line14{
	line-height: 1.4;
}
.line15{
	line-height: 1.5;
}
.line16{
	line-height: 1.6;
}
.line17{
	line-height: 1.7;
}
.line18{
	line-height: 1.8;
}
.line19{
	line-height: 1.9;
}
.line2{
	line-height: 2;
}


.bold1{
	font-weight: 100;
}
.bold2{
	font-weight: 200;
}
.bold3{
	font-weight: 300;
}
.bold4{
	font-weight: 400;
}
.bold5{
	font-weight: 500;
}
.bold6{
	font-weight: 600;
}
.bold7{
	font-weight: 700;
}
.bold8{
	font-weight: 800;
}
.bold9{
	font-weight: 900;
}
.bold10{
	font-weight: 1000;
}

.text-indent{
	text-indent: 2em;
}

.list-text-head{
	font-size: 15px;
	color: var(--text-color-h1);
}
.list-text-head-15{
	font-size: 15px;
	color: var(--text-color-h1);
}
.list-text-head-16{
	font-size: 16px;
	color: var(--text-color-h1);
}
.list-text-head-17{
	font-size: 17px;
	color: var(--text-color-h1);
}
.list-text-head-18{
	font-size: 18px;
	color: var(--text-color-h1);
}
.list-text-head-19{
	font-size: 19px;
	color: var(--text-color-h1);
}
.list-text-head-20{
	font-size: 20px;
	color: var(--text-color-h1);
}
.list-text-content{
	font-size: 13px;
	color: var(--text-color-h2);
}
.list-text-content-1{
	font-size: 13px;
	color: var(--text-color-h2);
}
.list-text-type{
	color: var(--text-color-h3);
}
.list-text-date{
	font-size: 13px;
	color: var(--text-color-h3);
}
.list-text-head-link{
	padding: 0 5px;
	/* width: 18px; */
	height: 18px;
	color: #fff;
	background: var(--back-color-primary);
}
.list-text-head-watch{
	color: var(--text-color-h3);
}
.list-text-logo{
  width: 58px;
  height: 58px;
	color: #fff;
  /* background: var(--back-color-lightGray-2); */
	font-size: 30px;
	font-weight:bold;
}
.list-text-a{
	text-decoration: none;
}

.a-noline{
	text-decoration: none;
}



/* 图标大小 */
.icon-size{
	font-size: 15px;
}
.icon-size-12{
	font-size: 12px;
}
.icon-size-13{
	font-size: 13px;
}
.icon-size-14{
	font-size: 14px;
}
.icon-size-15{
	font-size: 15px;
}
.icon-size-16{
	font-size: 16px;
}
.icon-size-17{
	font-size: 17px;
}
.icon-size-18{
	font-size: 18px;
}
.icon-size-19{
	font-size: 19px;
}
.icon-size-20{
	font-size: 20px;
}

/* 按钮	常规	图标大小 */
.icon-size-button{
	font-size: 21px;
}
.icon-size-button-30{
	font-size: 30px;
}
/* 按钮	列表	图标大小 */
.icon-size-table{
	font-size: 17px;
}


.border-top{
	border-top: 1px solid #f5f5f5;
}
.border-bottom{
	border-bottom: 1px solid var(--list-item-border-bottom);
}
.border-bottom:last-child{
	border:none;
}
.border-left{
	border-left: 1px solid #f5f5f5;
}
.border-right{
	border-right: 1px solid #f5f5f5;
}

.opacity01{
	opacity:0.1;	
}
.opacity02{
	opacity:0.2;	
}
.opacity03{
	opacity:0.3;	
}
.opacity04{
	opacity:0.4;	
}
.opacity05{
	opacity:0.5;	
}
.opacity06{
	opacity:0.6;	
}
.opacity07{
	opacity:0.7;	
}
.opacity08{
	opacity:0.8;	
}
.opacity09{
	opacity:0.9;	
}

.overflow-hidden{
	overflow:hidden;
}



/* Element Plus */

/* EL 按钮 边距 */
.el-button.el-button--small{
	margin-left: 0px !important;
}
/* EL 按钮（没有背景色边框） 边距 */
.el-button.is-link{
	margin-left: 0px !important;
}
/* 设置 switch 大小 */
.tableSwitch .el-switch--small .el-switch__core{
	min-width: 16px !important;
}
.tableSwitch .el-switch--small .el-switch__core .el-switch__action{
	height: 10px !important;
  width: 10px !important;
	left: calc(100% - 12px) !important;
}


/* 按钮 */
.button{
  background: var(--back-color-primary);
  border-radius: var(--border-radius-5);
  color: #fff;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
  text-align: center;
	transition: filter 0.3s;
}
.button:hover{
   filter: brightness(95%);
	 box-shadow: 0 0 2px 2px #eee;
}


/* 输入框 */
.input{
  border:1px solid #ddd;
  height: 39px;
  line-height: 39px;
  border-radius: 10px;
  padding: 0 5px;
	outline: 1px solid #eee;
	transition: outline-color 0.3s;
}

.input:focus {
  outline-color: #ddd;
}

/* 文本框 */
.textarea{
  border:1px solid #ddd;
  min-height: 60px;
  border-radius: 10px;
  padding: 8px;
	outline: 1px solid #eee;
	transition: outline-color 0.3s;
}
/* 文本框 选中的样式 */
.textarea:focus {
  outline-color: #ddd;
}
/* 文本框 禁止拖动 */
.textarea-noresize{
	resize: none;
}
/* 文本框 只允许上下拖动 */
.textarea-resize-tb{
	resize: vertical;
}
/* 文本框 只允许左右手动 */
.textarea-resize-lr{
resize: horizontal;
}


/* 块 */
.block-radius-0{
	border-radius: 0px;
  background: var(--back-color);
	transition:background-color var(--transition), color var(--transition);
}
.block-radius-10{
	border-radius: 10px;
  background: var(--back-color);
	transition:background-color var(--transition), color var(--transition);
}






.frosted-glass {
  background-color: var(--nav-bg-color); /* 半透明背景色 */
	backdrop-filter: blur(10px); /* 关键：磨砂模糊效果 */
  -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
	transition:background-color var(--transition), color var(--transition);
}



.top-template{
	position: fixed;
	top: 0px;
	left: 0px;
    width: 100%;
    height: 50px;
	z-index: 999;
}
.tb-top{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 999;
}
.tb-top-nav{
  height: 100%;
	margin: 0 auto;
  width: 950px;
  min-width: 950px;
}
.tb-top-nav-item{
	color:var(--text-color);
  height: 100%;
  text-align: center;
  cursor:pointer;
	transition: all 0.8s ease;
}

.tb-top-nav-item:hover{ 
  color: var(--back-color-primary);
}

.tb-top-nav-item-active{
	color:var(--text-color-primary);
}


.tb-top-nav-item-a{
  font-size: 15px;
}
.logo{
  font-size: 18px;
  height: 100%;
  text-align: center;
  font-weight: 300;
  margin-right: 20px;
  opacity: 0.85;
	color: var(--text-color);
}
.middle-template{
	margin-top: 60px;
}
.tb-bottom{
	margin-top: 50px;
}
.middle-main{
    width: 950px;
    min-width: 950px;
    margin: 0 auto;
}
.middle-left-template{
  width: 680px;
}

.tb-bottom-left-nav{
  padding: 10px;
  background: #fff;
}
.tb-bottom-left-nav-item{
  width: 50px;
  height: 30px;
  cursor: pointer;
}
.tb-bottom-left-nav-item:hover{
  background: var(--back-color-lightGray-1);
}
.tb-bottom-left-nav-item-active{
  background: var(--back-color-lightGray-1);
}
.main-list{
  background: #fff;
  overflow: hidden;
}

.main-list-item{
  transform: scale(1);
  transition: transform 0.2s ease, border-bottom var(--transition);
  border-bottom: 1px solid var(--list-item-border-bottom);
	/* transition:border-bottom var(--transition); */
}
.main-list-item:hover{
  transform: scale(1.01);
  background: var(--back-color-lightGray);
}

.main-list-item:hover .main-list-item-title{
	color:var(--text-color-primary);
}
.main-list-item:last-child{
  border-bottom: none;
}
.bottom-template{
	width: 100%;
  height: 100px;
	background: var(--nav-bg-color-1);
}
.tb-info{
  height: 100px;
	background: var(--nav-bg-color-1);
	width: 950px;
  min-width: 950px;
  margin: 0 auto;
}


.link-textarea{
  width: 100%;
  height: 80px;
  border-radius: 8px;
  border: 1px solid #ccc;
	outline-color:#ccc;
	padding:10px;
}

.link-textarea-logo{
  background: var(--back-color-drakGray);
  border-radius: 100px;
  width: 50px;
  height: 50px;
}

.link-button{
	width: 100px;
}
.stick-object{
	height: 38px;
  background: var(--back-color-primary);
  color: #f5f5f5;
}

.comment-head-logo{
	width: 50px;
  height: 50px;
  background: #ddd;
  border-radius: 100px;
}
.comment-text{
	width: 100%;
	height: 50px;
	border:1px solid #ddd;
	border-radius: 10px;
	padding: 8px;
	resize: vertical;
	outline-color: #ddd;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.reload-spinner {
  animation: spin 1.5s linear infinite;
  transform-origin: center;
  transition: width 1s ease;
}

.fade-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.38s ease;
}

.fade-in.show {
  opacity: 1;
  transform: scale(1);
}

.middle-column-1{
	flex-direction: column;
}

.comment-item-content-head-link{
	cursor: pointer;
	padding:0px 5px;
	background: var(--back-color-primary);
	border-radius: 6px;
	color: #fff;;
}























/* 消息 */
.messageMain{
  position:absolute;
  top:10px;
  left:50%;
  z-index:999;
  display:flex;
  flex-direction: column;
  /* gap: 5px; */
  transition: all 1s ease; 
}
.message{
	text-align: center;
  min-width: 100px;
  position: relative;
  padding: 6px 10px;
  border-radius:5px;
  color:#fff;
  left: -50%; 
  transform: translateX(-50%);
  transition: all 1s ease;
  margin-bottom: 5px;
}
.message-primary{
  background: var(--back-color-primary);
}
.message-success{
  background: var(--back-color-success);
}
.message-warning{
  background: var(--back-color-warning);
}
.message-error{
  background: var(--back-color-erorr);
}
/* 消息 END */