@charset "UTF-8";

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

/* CSS Document */
.bg {
	margin: 0 auto;
	width: 100%;
	min-height: 100vh;
	background: url(../images/bg2.jpg) no-repeat center center;
	background-size: cover;
	padding-top: 0rem;
	padding: 0rem 0.1rem;
	padding-top: 0.05rem;
	box-sizing: border-box;
}

/*.conIn{
	display:flex;
	display: -webkit-flex;}*/
.title {
	width: 100%;
	font-size: 0.08rem;
	box-sizing: border-box;
	color: rgba(14, 253, 255, 1);
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.1rem;
	margin-left: -0.01rem;
	line-height: 0.2rem;
}

.border_bg_leftTop {
	position: absolute;
	left: -0.008rem;
	top: -0.04rem;
	width: 0.37rem;
	height: 0.05rem;
	display: block;
	background: #01279d url(../images/title_left_bg.png) no-repeat;
	background-size: cover;
}

.border_bg_rightTop {
	position: absolute;
	right: -0.01rem;
	top: -0.01rem;
	width: 0.1rem;
	height: 0.1rem;
	display: block;
	background: url(../images/border_bg.jpg) no-repeat;
	background-size: cover;
}

.border_bg_leftBottom {
	position: absolute;
	left: -0.008rem;
	bottom: -0.008rem;
	width: 0.1rem;
	height: 0.1rem;
	display: block;
	background: url(../images/border_bg.jpg) no-repeat;
	background-size: cover;
}

.border_bg_rightBottom {
	position: absolute;
	right: -0.01rem;
	bottom: -0.01rem;
	width: 0.08rem;
	height: 0.08rem;
	display: block;
	background: url(../images/title_right_bg.png) no-repeat;
	background-size: cover;
}

.leftMain {
	width: 81%;
	float: left;
	padding-right: 0.1rem;
	padding-top: 0.1rem;
}

.rightMain {
	width: 19%;
	float: left;
	padding-top: 0.1rem;
}

.leftMain_top {
	width: 100%;
	padding-bottom: 0.1rem;
}

.leftMain_top ul {
	display: flex;
	display: -webkit-flex;
}

.leftMain_top ul li {
	float: left;
	width: 25%;
	padding-right: 0.1rem;
}

.leftMain_top ul li:last-child {
	padding: 0;
}

.leftMain_top ul li .liIn {
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
	width: 100%;
	min-height: 60px;
	position: relative;
	padding: 0.08rem 0.05rem;
}

.leftMain_top ul li .liIn h3 {
	font-size: 0.06rem;
	color: #fff;
	margin-bottom: 0.05rem;
}

.leftMain_top ul li .liIn .shu {
	font-size: 0.09rem;
	color: rgba(14, 253, 255, 1);
	font-family: dig;
	margin-bottom: 0.02rem;
}

.leftMain_top ul li .liIn .shu i {
	font-size: 0.04rem;
	margin-left: 0.06rem;
	font-style: normal;
}

.leftMain_top ul li .liIn .zi {
	font-size: 0.04rem;
	color: #fff;
	position: relative;
	z-index: 10;
}

.leftMain_top ul li .liIn .zi .span1 {
	margin-right: 0.1rem;
}


.leftMain_middle {
	width: 100%;
	padding-bottom: 0.05rem;
	display: flex;
	display: -webkit-flex;
}

.leftMain_middle .leftMain_middle_left {
	width: calc(70% - 20px);
	margin-right: 20px;
	/* padding-right:0.1rem; */
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn {
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
	width: 100%;
	min-height: 60px;
	position: relative;
	padding: 0.08rem 0.05rem;
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
	font-size: 0.08rem;
	color: #fff;
	margin-bottom: 0.05rem;
}

/* Chart header with toggle */
.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.05rem;
	padding-right: 0.1rem;
}

.chart-header h3 {
	margin-bottom: 0 !important;
}

.chart-toggle {
	display: flex;
	gap: 0.02rem;
}

.chart-toggle .toggle-btn {
	background: rgba(14, 253, 255, 0.1);
	border: 1px solid rgba(14, 253, 255, 0.5);
	color: rgba(14, 253, 255, 0.7);
	padding: 0.02rem 0.05rem;
	font-size: 0.05rem;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 2px;
}

.chart-toggle .toggle-btn:hover {
	background: rgba(14, 253, 255, 0.2);
}

.chart-toggle .toggle-btn.active {
	background: rgba(14, 253, 255, 0.3);
	color: #0efdff;
	border-color: #0efdff;
}

.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge {
	min-height: 200px;
}

.leftMain_middle .leftMain_middle_right {
	width: 40%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
	width: 100%;
	min-height: 60px;
	position: relative;
	padding: 0.08rem 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn h3 {
	font-size: 0.08rem;
	color: #fff;
	margin-bottom: 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge {
	min-height: 200px;
}

/*左边中间部分排行榜*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
	width: 100%;
	overflow: hidden;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
	display: flex;
	display: -webkit-flex;
	align-items: center;
	color: #fff;
	font-size: 0.06rem;
	height: 0.18rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
	width: 25%;
	position: relative;
	padding-left: 0.14rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
	width: 0.08rem;
	height: 0.08rem;
	background: #f78cf3;
	border-radius: 1000px;
	display: block;
	position: absolute;
	left: 0.02rem;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_left .bot {
	background: #e7feb8;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_left .bot {
	background: #fdea8a;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_left .bot {
	background: #8ff9f8;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_left .bot {
	background: #d890fa;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_left .bot {
	background: #05d1fc;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
	width: 58%;
	height: 0.08rem;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2000px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
	width: 100%;
	height: 0.08rem;
	background: #f78cf3;
	border-radius: 100px;
	-webkit-animation: widthMove1 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn2 .liIn_line .line_lineIn {
	background: #e7feb8;
	-webkit-animation: widthMove2 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn3 .liIn_line .line_lineIn {
	background: #fdea8a;
	-webkit-animation: widthMove3 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn4 .liIn_line .line_lineIn {
	background: #8ff9f8;
	-webkit-animation: widthMove4 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn5 .liIn_line .line_lineIn {
	background: #d890fa;
	-webkit-animation: widthMove5 2s ease-in-out;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn6 .liIn_line .line_lineIn {
	background: #05d1fc;
	-webkit-animation: widthMove6 2s ease-in-out;
}

@-webkit-keyframes widthMove1 {
	0% {
		width: 0%;
	}

	100% {
		width: 98.5%;
	}
}

@-webkit-keyframes widthMove2 {
	0% {
		width: 0%;
	}

	100% {
		width: 88.5%;
	}
}

@-webkit-keyframes widthMove3 {
	0% {
		width: 0%;
	}

	100% {
		width: 68.5%;
	}
}

@-webkit-keyframes widthMove4 {
	0% {
		width: 0%;
	}

	100% {
		width: 40.5%;
	}
}

@-webkit-keyframes widthMove5 {
	0% {
		width: 0%;
	}

	100% {
		width: 22.5%;
	}
}

@-webkit-keyframes widthMove6 {
	0% {
		width: 0%;
	}

	100% {
		width: 10.5%;
	}
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .num {
	width: 17%;
	font-family: dig;
	padding-left: 0.02rem;
}

/*左边底部*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul {
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	width: 100%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li {
	width: 33.3%;
	text-align: center;
	margin-bottom: 0.05rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu {
	font-size: 0.14rem;
	color: rgba(14, 253, 255, 1);
	font-family: dig;
	padding: 0.12rem 0 0.02rem;
	font-weight: normal;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi {
	font-size: 0.06rem;
	color: #fff;
}

/*右边部分*/
.leftMain_middle .rightMain_top {
	width: 30%;
	padding-bottom: 0.1rem;
}

.leftMain_middle .rightMain_topIn {
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
	width: 100%;
	min-height: 60px;
	position: relative;
	padding: 0.08rem 0.05rem;
}

.leftMain_middle .rightMain_topIn h3 {
	font-size: 0.08rem;
	color: #fff;
	margin-bottom: 0.05rem;
}

.leftMain_middle .rightMain_topIn .biaoge {
	min-height: 200px;
}

.leftMain_middle .rightMain_bottom {
	width: 30%;
}

.leftMain_middle .rightMain_bottomIn {
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
	width: 100%;
	min-height: 60px;
	position: relative;
	padding: 0.08rem 0.05rem;
}

.leftMain_middle .rightMain_bottomIn h3 {
	font-size: 0.08rem;
	color: #fff;
	margin-bottom: 0.05rem;
}

/*右下角表格*/
.leftMain_middle.rightMain_bottomIn .biaoge {
	min-height: 200px;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list {
	overflow: hidden;
	position: relative;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_list {
	overflow: hidden;
	position: relative;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list .biaoge_listIn .ul_listIn {
	-webkit-animation: 14s gundong linear infinite normal;
	animation: 14s gundong linear infinite normal;
	position: relative;
}

@keyframes gundong {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	100% {
		-webkit-transform: translate3d(0, -30vh, 0);
		transform: translate3d(0, -30vh, 0);
	}
}

.leftMain_middle .rightMain_bottomIn .biaoge_list ul {
	display: flex;
	display: -webkit-flex;
	width: 100%;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list .ul_title {
	background: linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.05rem;
	box-sizing: border-box;
}

.righleftMain_middletMain .rightMain_bottomIn .biaoge_list .ul_con {
	border-bottom: 0.008rem solid rgba(14, 253, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.05rem;
	box-sizing: border-box;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list ul li {
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 0.06rem;
	height: 0.2rem;
	line-height: 0.2rem;
	/* 溢出隐藏 ... */
	overflow: hidden;
	/* 文字超出省略号 */
	text-overflow: ellipsis;
	white-space: nowrap;
}

.leftMain_middle .rightMain_bottomIn .biaoge_list ul li:frist-child {
	text-align: left;
}


#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: radial-gradient(circle, #001529, #000a1e);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #00cfff;
	font-family: '微软雅黑', sans-serif;
}

.spinner {
	position: relative;
	width: 0.52rem;
	height: 0.52rem;
}

.spinner .ring {
	box-sizing: border-box;
	position: absolute;
	width: 0.52rem;
	height: 0.52rem;
	border: 0.015rem solid transparent;
	border-top: 0.015rem solid #00cfff;
	border-radius: 50%;
	animation: spin 1.2s linear infinite;
}

.spinner .ring:nth-child(2) {
	width: 0.42rem;
	height: 0.42rem;
	top: 0.05rem;
	left: 0.05rem;
	border-top: 0.015rem solid #00ffea;
	animation-delay: 0.2s;
}

.spinner .ring:nth-child(3) {
	width: 0.31rem;
	height: 0.31rem;
	top: 0.1rem;
	left: 0.1rem;
	border-top: 0.015rem solid #0af;
	animation-delay: 0.4s;
}


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

	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	margin-top: 0.1rem;
	font-size: 0.09rem;
	letter-spacing: 0.01rem;
	color: #00e3ff;
	animation: fade 1.6s infinite alternate;
}


@keyframes fade {
	from {
		opacity: 0.5;
	}

	to {
		opacity: 1;
	}
}

/* #message-tip {
	position: fixed;
	top: 0.14rem;
	right: 0.1rem;
	z-index: 9999;
	background: rgba(0, 204, 255, 0.15);
	border: 0.01rem solid #00cfff;
	border-radius: 0.04rem;
	padding: 0.05rem 0.1rem;
	box-shadow: 0 0 0.1rem #00cfff;
	font-size: 0.06rem;
	color: #00eaff;
	backdrop-filter: blur(0.04rem);
	animation: fadeInDown 0.4s ease-out;
}

.message-hidden {
	display: none;
}

@keyframes fadeInDown {
	from {
		transform: translateY(-0.2rem);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
} */



#message-container {
  position: fixed;
  top: 0.14rem;
  right: 0.1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.message-tip {
  background: rgba(0, 204, 255, 0.15);
  border: 0.01rem solid #00cfff;
  border-radius: 0.04rem;
  padding: 0.05rem 0.1rem;
  box-shadow: 0 0 0.1rem #00cfff;
  font-size: 0.06rem;
  color: #00eaff;
  backdrop-filter: blur(0.04rem);
  animation: fadeInDown 0.3s ease-out;
  transition: opacity 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    transform: translateY(-0.2rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


.flexliIn {
	display: flex;
	justify-content: space-between;
}


/* 根变量，方便统一修改颜色 */
:root {
    --primary-bg: #0a1931; /* 深蓝背景色 */
    --widget-bg: rgba(10, 25, 49, 0.5); /* 卡片背景色，带一点透明 */
    --accent-blue: #00e5ff; /* 主强调色-青色 */
    --text-primary: #ffffff; /* 主要文字颜色-白色 */
    --text-secondary: #a9bada; /* 次要文字颜色-淡灰色 */
    --border-color: rgba(0, 229, 255, 0.2);
    --alert-color: #ff9800; /* 警报标签颜色 */
}

/* 消息中心总容器样式 */
.message-center-widget {
	position: relative;
    /* background-color: var(--widget-bg); */
	border: 0.008rem solid rgba(14, 253, 255, 0.5);
    padding: 0.08rem 0.05rem;
	box-sizing: border-box;
    border-radius: 6px;
    height: calc(100vh - 0.60rem); /* 让它填满右侧空间 86vh */
    display: flex;
    flex-direction: column;
}

/* 标题样式，与您现有样式保持一致 */
.message-center-widget .widget-title {
    font-size: 18px;
    color: var(--text-primary);
    margin: 0 0 0.16rem 0;
    padding-bottom: 10px;
    border-bottom: 0.008rem solid var(--border-color);
    font-weight: 600;
}

/* 消息列表 */
.message-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* 如果内容过多则显示滚动条 */
    flex-grow: 1;
}

/* 自定义滚动条样式 */
.message-list::-webkit-scrollbar {
    width: 6px;
	display: none;
}
.message-list::-webkit-scrollbar-track {
    background: transparent;
}
.message-list::-webkit-scrollbar-thumb {
    background-color: var(--accent-blue);
    border-radius: 3px;
}

/* 单条消息项 */
.message-item {
    display: flex;
    align-items: flex-start;
    padding: 0.08rem 0;
    border-bottom: 0.008rem solid var(--border-color);
    transition: background-color 0.3s ease;
    position: relative;
    cursor: pointer;
}

.message-item:last-child {
    border-bottom: none;
	padding-bottom: 0;
}
.message-item:first-child {
	padding-top: 0;
}


/* 消息状态小圆点 */
/* .message-item::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 15px;
    margin-top: 5px;
    flex-shrink: 0;
} */






.message-content {
    flex-grow: 1;
}

/* 消息标题 */
.message-title {
    font-size: 0.07rem;
    color: var(--text-primary);
    margin: 0 0 0.04rem 0;
    font-weight: 500;
	display: flex;
	align-items: flex-start;
}

.message-icon {
	width: 0.07rem;
	height: 0.07rem;
	margin-right: 0.02rem;
	position: relative;
	top: 0.005rem;
}

/* 消息元数据（时间、来源等）*/
.message-meta {
    font-size: 0.06rem;
    color: var(--text-secondary);
    margin: 0;
}

/* 分类标签通用样式 */
.tag {
    font-weight: bold;
}

/* 不同分类的颜色 */
.alert-tag { color: var(--alert-color); }
.order-tag { color: var(--accent-blue); }
.user-tag { color: #4caf50; } /* 绿色代表用户 */
.device-tag { color: #f44336; } /* 红色代表设备异常 */