*{
    margin: 0;
    padding: 0;
}

#app{
    width: 100%;
    height: 100%;
}

/*引用字库*/
@font-face { font-family:'electronicFont'; src: url("font/DS-DIGIT.TTF"); }

body{
    width: 100%;
    height: 100%;
    overflow: auto;
    color: #fff;
}
.public-bg{
    background: rgba(12,26,63,0.5);
    z-index: 999;

}

.public-title{
    width: calc(100% - 20px);
    height: 30px;
    position: relative;
    top: 0;
    left: 5px;
    color: white;
    padding-left: 16px;
    line-height: 30px;
    font-size: 1rem;
}
.public-title:before{
    width: 4px;
    height: 20px;
    top: 5px;
    position: absolute;
    content: "";
    background: #2997e4;
    border-radius: 2px;
    left: 5px;
}

.content-body{
    width: 100%;
    height: 100%;
    background: #0d325f;
    /*background-image: url("../image/bg1.jpeg");*/
    background-size: 100% 100%;
    position: absolute;
    min-height: 600px;  /* 降低最小高度要求 */
    min-width: 1200px;  /* 降低最小宽度要求 */
}

.header{
    height: 70px;
    width: 100%;
    position: relative;
    z-index: 999;
    /*    border: 1px solid red;*/
}
.header .header-left{
    /*width: 25%;*/
    float: left;
    line-height: 70px;
    position: relative;

}
.header .header-left span{
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    letter-spacing:2px;
    padding: 0 20px;
}
.header .header-time{
    width: 18%;
    line-height: 70px;
    float: right;
    text-align: right;
    padding-right: 20px;
}
.header .header-time1{
    width: 25%;
    line-height: 70px;
    float: left;
    text-align: right;
    /*padding-right: 20px;*/
}
.header .header-time span{
    color: #ffffff;

}
.content{
    width: 100%;
    height: calc(100% - 75px);
    position: absolute;
    z-index: 999;
}
.content .content-con{
    height: 100%;
}
.content .content-con .left-body{
    width: 20%;  /* 减少左侧宽度 */
    height: 100%;
    float: left;
    margin:0 0.3%;
    min-width: 180px;  /* 降低最小宽度 */
    z-index: 999;
    overflow-y: auto;
    overflow-x: hidden;
}
.left-body .left-top{
    width: 100%;
    height: 30%;  /* 减少高度 */
    min-height: 200px;  /* 降低最小高度 */
    min-width: 180px;  /* 调整最小宽度 */
    z-index: 999;
}
.left-body .left-top .top-body{
    width: 100%;
    height: calc(100% - 30px);
}
.left-body .left-top .top-body .top-left{
    float: left;
    width: 50%;
    height: 100%;
}
 .top-left-title{
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
}
 .top-left-title h6{
    color: #bad0e2;
}
.top-left-title span{
    margin-top: 30px;
    display: inline-block;
    color: #2aa4f1;

/*    height: 80px;
    line-height: 80px;*/
}
 .top-left-title span b{
    font-size: 30px;
     letter-spacing:5px;
}
.top-left-title img{
    width: 80%;
}
.left-body .left-top .top-body .top-right{
    float: left;
    width: 50%;
    height: 100%;
}
.left-body .left-con{
    width: 100%;
    height: 25%;  /* 减少高度 */
    margin-top: 2%;
    min-height: 150px;  /* 降低最小高度 */
    min-width: 180px;  /* 调整最小宽度 */
}
.title-nav{
    width: 100%;
    height: calc(100% - 30px);
}
.left-body .left-bottom{
    width: 100%;
    height: 28%;  /* 减少高度 */
    margin-top: 2%;
    min-height: 120px;  /* 降低最小高度 */
    min-width: 180px;  /* 调整最小宽度 */
}

.left-body .left-con-bottom{
    width: 100%;
    height: 63%;
    margin-top: 2%;
    min-height: 531px;
    min-width: 216px;
    z-index: 999;
}

.center-body{
    width: 56%;  /* 增加中间区域宽度 */
    height: 100%;
    margin:0 0.3%;
    float: left;
    z-index: -10;
    /*border: 1px solid red;*/
}
.center-body .map{
    width: 100%;
    height: 100%;
}
.right-body{
    width: 20%;  /* 进一步减少宽度 */
    height: 100%;
    float: right;
    margin:0 0.5% 0 0.3%; 
    min-width: 160px;  /* 进一步降低最小宽度 */
    padding-right: 15px;  /* 减少右侧内边距 */
    overflow-y: auto;
    overflow-x: hidden;
}

.right-body .right-top{
    width: 100%;
    height: 16%;
    margin-top: 1%;  /* 减少顶部边距 */
    min-height: 100px;  /* 降低最小高度 */
    min-width: 160px;  /* 调整最小宽度 */
    z-index: 999;
}

.right-body .right-top-b{
    width: 100%;
    height: 20%;  /* 减少高度 */
    min-height: 120px;  /* 降低最小高度 */
    min-width: 160px;  /* 调整最小宽度 */
    z-index: 999;
}

.title-nav .top5-ul{
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    padding: 10px;
}
.title-nav .top5-ul ul{
    width: 100%;
    height: 100%;
}
.title-nav .top5-ul ul,li{
    list-style: none;
}
.title-nav .top5-ul ul>li{
    width: 100%;
    height: 20%;
    color: #ffffff;
    line-height: 68px;
    justify-content: center;
}
.title-nav .top5-ul ul li span{
    margin-left: 3%;
    font-size: 14px;
}
.title-nav .top5-ul ul li span:nth-child(1){
    color:  #EB6841;
    font-style: oblique;
    /*width: 10%;*/
    /*#20a8fe
            #EB6841
            #3FB8AF
            #FE4365
            #FC9D9A*/
    display: inline-block;
    text-align: center;
    font-size: 20px;
}

.title-nav .top5-ul ul li span:nth-child(2){
    width: 10%;
    display: inline-block;
    text-align: center;

    height: 30px;
    line-height: 30px;
/*    height: 100%;*/
    /*line-height: 100%;*/
    vertical-align: center;
    border-radius: 5px;
    color: #ffffff;
}
.title-nav .top5-ul ul li:nth-child(1) span:nth-child(2),.title-nav .top5-ul ul li:nth-child(2) span:nth-child(2)
,.title-nav .top5-ul ul li:nth-child(3) span:nth-child(2){
    background: #d89346;
}
.title-nav .top5-ul ul li:nth-child(4) span:nth-child(2)
,.title-nav .top5-ul ul li:nth-child(5) span:nth-child(2){
    background: #1db5ea;
}
.title-nav .top5-ul ul li span:nth-child(3){
    /*width: 15%;*/
    display: inline-block;
    text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(4){
    /*width: 15%;*/
    display: inline-block;
    text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(5){
    /*width: 20%;*/
    display: inline-block;
    text-align: center;
}
.title-nav .top5-ul ul li span:nth-child(6){
    display: inline-block;
    text-align: center;
}
.right-body .right-con{
    width: 100%;
    height: 29%;
    margin-top: 2%;
    min-width: 216px;
    min-height: 239px;
    z-index: 999;
}
.right-body .right-bottom{
    width: 100%;
    height: 29%;
    margin-top: 2%;
    /*min-width: 216px;*/
    min-height: 239px;
    z-index: 999;
}

.header .menu{line-height: 70px; width: 12.5%}
.header .menu ul{ font-size: 0;}

.header .menu li{ display: inline-block; position: relative;margin: 15px 0px;;}
.header .menu li a{ display: block; font-size: 1.3rem; color: #fff; line-height: 40px; padding: 0 10px; }
.header .padding-left{padding-left:  18%}

/*.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: "";  border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;}*/
.menu li a{ position:relative;}
/*
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4;  content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;}
*/


.header .menu li a:hover{ color: #f4e925;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color:  #f4e925; opacity: 1;}

.clearfix:after, .clearfix:before {display: table;content: " "}
.clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}

.leidanav{margin-top: -5px;}
.leidanav li{float: left; width: 20%; text-align: center; border-left: 1px solid rgba(255,255,255,.1)}
.leidanav2 li{ width: 33.3333%}
.leidanav3 li{ width: 25%}
.leidanav li:first-child{border-left: none;}
.leidanav span{font-size: 12px; opacity: .6}

.leidanav p{font-size: 18px; color: #26a6ff }

.echarts-top {
    height: 100%;
}
.pssnav span{
    color: #fff;
    font-size: 1rem;
}
.pssnav {
    /*height: 20px;*/
    /*line-height: 20px;*/
    text-align: center;
    padding-top: 1.2rem;
}

.pssnav p{
    text-align: center;
    font-size: 1.1rem;
}

.pdf .grid-content{
    font-size: 1rem;
    color: #fff;
}
.pdf .pdf-row{
    margin-top: 1.1rem;

}

.text-w{color: #ffe400 !important}
.text-d{color: #ff6316 !important}
.text-s{color: #14e144 !important}
.text-b{color: #07e5ff !important}
.pdf-row{
    padding: 10px;
    height: 100%;
}

#pdf_chart{
    height: 100%;
}
.pdf-chart-row {
    height: 100%;
}


.center-body .center-top{
    width: 100%;
    height: 22%;
    z-index: 999;
}

.center-body .center-con{
    width: 100%;
    height: 35%;
    margin-top: 0.8%;
}

.center-body .center-bottom{
    width: 100%;
    height: 77.8%;
    margin-top: 0.815%;
    /*position: relative;*/
    /*background-image: url("../image/bg2.jpg");*/
}
#container {
    position: absolute;
    z-index: 1;
    top: 0px;
    /*padding: 10px;*/
    height: 100%;
    min-height: 666.7px;
    width: 100%;
}
#container2 {
    position: absolute;
    z-index: 1;
    top: 0px;
    /*padding: 10px;*/
    height: 100%;
    min-height: 666.7px;
    width: 100%;
}

/*#echart_vib_health{
    height: 80%;
}*/

.center-bottom-col-left {
    height: 100%;
    margin-right: 0.5%;
}
.center-bottom-col-right {
    height: 100%;
    margin-left: 0.5%;
}
.ftechart{
    height: 100%;
}
.center-bottom-row,.center-bottom-col {
    height: 100%;
}

.weather{height: 100%; width: 30%;}

.center-body .num{height: 100%; width: 40%;}
.center-body .num{padding-right: 0rem; padding-left: 1.5rem}
.center-body .numbt{ font-size: 1.3rem; color: #fff; height: 30%; padding-top: 1rem; clear: both }
.center-body .numtxt{ color: #fef000; font-size: 4rem; font-family: arial; /*border-top: 1px solid rgba(255,255,255,.1);border-bottom: 1px solid rgba(255,255,255,.1);*/ padding: 10px 0; font-weight: 400; letter-spacing: 2px;}

.zb1,.zb2,.zb3{float: left; width: 33.3333%; height: 100%;}
.boxall{ padding:0 15px;   position: relative;  z-index: 10; height: 100%;}
.zb1,.zb2,.zb3{float: left; width: 50%; height: 100%; color: #fff}
#zb1,#zb2,#zb3,#zb4{height: calc(100% - 30px); }

.center-body .zhibiao{height: 100%; width: 45%;}
.center-body .zhibiao span{ padding-top: 20px; display: block; text-align: center; color: #fff; font-size: 16px;}
.zb1 span,.zb2 span,.zb3 span{
    color: #a29e9e;
    font-weight: normal;
    font-size: .9rem;
}

.top-title{
    width: 100%;
    height: 100%;
    /*padding: 30px;*/
    box-sizing: border-box;
    text-align: center;
}

.top-title img{
    width: 5rem;
    /*height: 100%;*/
    /*height: 2rem;*/
}

.top-title span{
    margin-top: 30px;
    display: inline-block;
    color: #2aa4f1;

    /*    height: 80px;
        line-height: 80px;*/
}
.top-title span b{
    font-size: 30px;
    letter-spacing:5px;
}
.top-left-title img{
    width: 80%;
}

.dashboard5-top-1 {
    position: absolute;
    left: 0.2rem;
    top: 0.2rem;
    width: 40%;
}

.temper{ border: 1px solid rgba(103,144,255,.1);  height: 100%; padding:.15rem; position: relative; margin-bottom: .25rem; z-index: 10;}
/*.temper:before,
.temper:after{ position:absolute; width: .9rem; height: .9rem; content: "";  border-top: 3px solid #3486da; top: -2px;}
.temper:before,.boxfoot11:before{border-left: 3px solid #3486da;left:-2px;}
.temper:after,.boxfoot11:after{border-right: 3px solid #3486da; right: -2px;}*/

.boxfoot11{ position:absolute; bottom: 0; width: 100%; left:0;}
/*
.boxfoot11:before,
.boxfoot11:after{ position:absolute; width: .9rem; height: .9rem;  content: "";border-bottom:3px solid #3486da; bottom:-2px;}
*/

.alltitle1{ font-size:1rem; font-weight: 400; color: #cccccc; text-align: center; letter-spacing: 2px; line-height: 1.2rem;margin-top: 0.6rem}

.alltitle2{ font-size:1rem; font-weight: 600; color: #ffffff; text-align: center; letter-spacing: 2px; line-height: 1.0rem;margin-top: 0rem}


.temper img{
    width: 0.9rem;
    height: 0.9rem;
}


.work_h, .work_min, .work_seq{
    /*display: block;*/
    display: flex; /* 使span成为flex容器 */
    align-items: center; /* 垂直居中（如果需要） */
    justify-content: center; /* 水平居中（如果需要） */
    background-image: url("../image/data_bg.png");
    background-position: 50% 50%;
    /*background-size: cover;*/
    height: 100%;
    width: 13%;
    /*float: left;*/
    vertical-align: middle;
    margin-left: 1px;
    color: #ff0e29;
    text-align: center;
    font-size: 2.2rem;
    font-family: data_Number;
    background-repeat: no-repeat;
    background-size: 100%;
    /*padding-top: 5px;*/
}
.work_min {
    color: #2D3335;
}
.work_seq {
    background: none;
    width: 6%;
}
#work_hour {
    height: calc(70% - 1rem );
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 水平开始位置，如果需要可以改为center等 */
}

/* 顶部大指标 */
.big-index-1 { position: absolute; left: 50%; top: 4rem; line-height: 1; min-width: 818px; height:calc(5rem + 12px); overflow: hidden;}
.big-index-1 li {transition: all 0.1s ease;  cursor: pointer; position: relative; display: inline-block; overflow: hidden; width: 115px; height:calc(4.2rem + 7px); padding: 10px 0 0 10px; background: none; margin-right: 16px;}
.big-index-1 li strong { display: block; color: rgb(24,255,186, 0.8);font-family:'electronicFont'; font-size: 3rem; font-weight: normal; padding-top: 2px}
.big-index-1 li p { display: block; color: #a29e9e; font-size:1rem; padding-bottom:4px;}
.big-index-1 li .animation-1 { -webkit-animation-iteration-count: infinite;   -webkit-animation-name:bounceInLeft1 ; -webkit-animation-duration: 9000ms; position: absolute; left: 12px; bottom:1px; height: 6px;  width: 345px; background: url(../image/bg04bigindex.png) 0 0 repeat-x;}
.big-index-1 li .animation-2 {position: absolute; right:0; top:1px; height: 16px;  width: 15px; background: none;}
.big-index-1 li .animation-3 {position: absolute; right:-1px; bottom:-1px; height: 4px;  width: 4px; background: url(../image/bg03bigindex.png) 50% 50% no-repeat;}
/*.big-index-1 li:hover .animation-2 { background: url(../image/bg02bigindex_.png) 0 0 no-repeat;}*/
.big-index-1 li:hover .animation-3 {  background: url(../image/bg03bigindex_.png) 50% 50% no-repeat;}
.big-index-1 li:hover .animation-1 {-webkit-animation-iteration-count: infinite;   -webkit-animation-name:bounceInRight1 ; -webkit-animation-duration:4000ms;}
.big-index-1 li:hover .animation-2, .big-index-1 li:hover .animation-3{ -webkit-animation:flash .2s .2s ease both; -moz-animation:flash .2s .2s ease both;}

.big-index-1 li strong span {color: #fff;font-family:'arial'; font-size: 14px; font-weight: normal;}

@-webkit-keyframes bounceInLeft1{
    0%{-webkit-transform:translateX(-115px)}
    100%{-webkit-transform:translateX(0)}
}


.header .head-row{ width: 100%; height: 100%}

.header .head-row a{ display: block; font-size: 1.3rem; color: #fff; line-height: 40px; padding: 0 10px; text-decoration: none;  }

 .head-row a{ position:relative;}


.header .head-row a:hover{ color: #f4e925;}
.head-row a:hover:before,
.head-row a:hover:after
{border-color:  #f4e925; opacity: 1;}
.head-row-title{
    color: #daf9ff;
    font-weight: bold;
    font-size: 2rem;
    letter-spacing:2px;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.head-row-col{
    text-align: center;
    vertical-align: middle;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}


.park table{ width: 100%; text-align: center;}
.park  table th{ font-size: .9rem; background: rgba(0,0,0,.1);}
.park table td{ font-size: .9rem; color: rgba(255,255,255,.6);}
.park table th,table td{ border-bottom:1px solid rgba(255,255,255,.1); padding: .5rem 0;}

.pss300-right{
    float: right;
    padding-right: 5px;
    font-size: .9rem;
    color: #a29e9e;
}

.pss300-right span{
    font-size: .9rem;
    color: rgb(24,255,186, 0.8);
}

.pdf-div {
    text-align: center;
    font-size: 12px;
}
.pdf-div div{
    /*padding-bottom: 5px;*/
    color: #a29e9e;
    font-size: .9rem;
}
.pdf-div img {
    /*padding-top: 5px;*/
}
.pdf-div-tit{
    color: #a29e9e;
    font-size: .9rem;
}
.pdf-row{
    height: 33.3%;
    display: flex; /* 使span成为flex容器 */
    align-items: center; /* 垂直居中（如果需要） */
}

.pss-park-tb th {
    color: #a29e9e;
    font-weight: normal;
}

.pss-park-tb td {
    color: #a29e9e;
    font-weight: bold;
}

.pss-park-tb td span{
    color: #a29e9e;
    font-weight: normal;
}

#time {
    font-size: 1.2rem;
    color: #daf9ff;
}

/* 胎压监测仪表盘样式 */
.tpms-dashboard {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.tpms-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tpms-item:last-child {
    border-bottom: none;
}

.tpms-station {
    font-size: 14px;
    color: #00d8ff;
    font-weight: bold;
}

.tpms-value {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin: 0 10px;
}

.tpms-unit {
    font-size: 12px;
    color: #888;
}

/* 电压电流实时数据样式 */
.electricity-data {
    height: 100%;
    padding: 10px;
}

.electricity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 10px;
}

.electricity-label {
    font-size: 12px;
    color: #00d8ff;
    min-width: 60px;
}

.electricity-value {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    margin: 0 8px;
}

.electricity-unit {
    font-size: 10px;
    color: #888;
}

.electricity-progress {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-left: 8px;
}

.electricity-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00d8ff, #00ff88);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* 功率因数图表容器 */
.power-factor-chart {
    height: 100%;
    width: 100%;
}

/* 状态指示灯样式 */
.status-indicators {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
    height: calc(100% - 40px);
    align-items: center;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    min-width: 60px;
}

.status-item span {
    font-size: 10px;
    color: #ccc;
    margin-top: 4px;
    text-align: center;
}

/* 温度热力图样式 */
.temperature-heatmap {
    height: 100%;
    width: 100%;
    padding: 10px;
}

.heatmap-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 10px;
    color: #ccc;
}

.heatmap-gradient {
    width: 100px;
    height: 8px;
    background: linear-gradient(90deg, #0066ff, #00ff88, #ffff00, #ff6600, #ff0000);
    border-radius: 4px;
}