:root{
	--tools-panel-bg:#262b33;
	--tools-panel-border:#1d2126;
	--tools-panel-color:#eee;
	--tools-attr-height:32px;
	--tools-tab-bg:#333;
	--tools-tab-color:#ffffff;
	--tools-hover-color:#2C58A6;
	
	--tools-input-border:#666;
	--tools-input-width:105px;
	--tools-colorinput-width:85px;
	--tools-ranginput-width:80px;
	
	--tools-scroll-bg:#262b33;
	--tools-scroll-bar:#1d2126;
	
}

html,body{width:100%;height:100%;overflow:hidden;}
*{margin:0px;padding:0px;}

.panelPoint {
    position: absolute;
    width:6px;
	height:6px;
	background:rgb(0, 255, 0);
	opacity:1;
	z-index:12;
}
.panelSelStyle{
	position: absolute;
	left:0px;
	top:0px;
	opacity:1;
	border:1px dashed rgb(0, 255, 0);
	width:100%;
	height:100%;
}
.labeltext{position:absolute;box-sizing: border-box;cursor:pointer;font-size:12px;line-height:20px;text-align:left;display: flex; justify-content: center; align-items: center;}
.miniborderwin{position:absolute;box-sizing: border-box;cursor:pointer;font-size:12px;text-align:left;display: flex; justify-content: center; align-items: center;}
.tabledata{position:absolute;box-sizing: border-box;cursor:pointer;font-size:12px;text-align:left;display: inline-block; vertical-align: top;transform: translate3d(0, 0, 0); /* 启用 GPU 加速 */}
.tabledata thead {
            position: sticky;
            top: -1px;
            z-index: 10;
			will-change: transform; /* 提前告知浏览器该元素会发生变化 */
			  margin: 0; /* 确保没有额外的外边距 */
            padding: 0; /* 防止内边距影响 */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 给表头添加阴影效果，提升视觉层次感 */
        }
._tableContainer{overflow:hidden;width:100%;height:100%;}


.tableDataView{width:100%;border-collapse:collapse;}
.tableDataView tr{height:25px;}
.componentimage{position:absolute;cursor:pointer;background-size:100% 100% !important;
	background-position: center; /* 图像居中显示 */
    background-repeat: no-repeat; /* 不重复图像 */}
	
	
	
	
	
	
.divfield{
				float:left;
				color: #3f58aa;
				float: left;
				margin-top: 15px;
				margin-left: 15px;
				letter-spacing: 1px;
				font: 12px/25px Microsoft YaHei;
				border-radius: 2px;
				width:150px;
				
				border: 1px solid #666;
				cursor: pointer;
				overflow:hidden;
			}
.divfield:hover{border:1px solid #ddd;}
.titlebar{width:100%;overflow:hidden;border-bottom:1px solid #666;color:#fff;}
.divtitle{float:left;margin-left:15px;height:35px;line-height:35px;font-weight:bold;}
.fieldwinpanel{padding: 5px 10px;padding-bottom:10px;}	
.divFieldItem{width:100%;overflow:hidden;}
.divFieldItem:hover{color:#ddd;}

.divSortDragTip{border:1px solid #666;color:#fff;}




/**********弹窗********************/

.yl_divToolsWin{position:absolute;font-family:SimHei;font-size:13px;top:100px;right:700px;width:600px;height:300px;background:#fff;box-shadow: rgb(51, 51, 51) 0px 0px 15px;border: 1px solid gray;z-index:100;}
.yl_toolsWinTitle{padding:0px 10px;height:28px;line-height:28px;font-weight:bold;background:#f4f4f8;border-bottom:1px solid #c9c9c9;font-family: arial, "pingfang sc", "Microsoft YaHei";color: black;}
.yl_toolsWinClose{float:right;padding: 0px 10px;cursor:pointer;}
.yl_toolsWinClose:hover{color:red;font-weight:bold;}
.yl_toolsWinCtt{margin:5px;width:calc(100% - 10px);height:calc(100% - 68px);overflow:auto;}
.yl_toolsWinBttnPanel{height:30px;line-height:30px;padding-right:5px;}
.yl_toolsWinBttn{float:right;margin-right:10px;height:24px;line-height:24px;font-size:12px;padding:0px 15px;border-radius:3px;cursor:pointer;}
.yl_toolsBttnOk{background:#0d5eff;border:1px solid #0d5eff;color:#fff;}
.yl_toolsBttnCancle{border:1px solid #ddd;color:#000;}
.yl_toolsBttnOk:hover{opacity:0.9;}
.yl_toolsBttnCancle:hover{color:red;}

.yl_toolsWinCheckPanel {
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    color: #757575;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.yl_toolsWinCheck{
    position: relative;
	box-sizing: border-box;
	    outline: none;
		    border: 0px #c8e0f6 solid;
    color: #c8e0f6;
    padding: 0px;
    margin: 0px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}
.yl_toolsWinCheckPanel label {
    padding-left: 10px;
    cursor: pointer;
}
.yl_toolsWinLeftMenu{
	float:left;
	width:106px;
	height:100%;
	border-right:1px solid #f4f4f8;
}
.yl_toolsWinLeftTitle{
	height:25px;
	background:#f4f4f8;
}

.yl_toolsWinLeftMenu input{margin-top:3px;width:80px;height:16px;border:1px solid #ddd;}
.yl_toolsWinLeftTitle span{padding:0px 6px;font-size:16px;cursor:pointer;}
.yl_toolsWinLeftTitle span:hover{color:blue;}
.yl_toolsWinLeftLabel{height:25px;line-height:25px;padding-left:10px;cursor:pointer;}
.yl_toolsWinLeftLabel:hover{font-weight:bold;}
.yl_toolsWinLeftLabelSel{color:#0d5eff;font-weight:bold;}


.yltoolsAddBttn{float:left;font-size:20px;cursor:pointer;padding:0px 10px;}
.yltoolsAddBttn:hover{color:blue;font-weight:bold;}

.yl_toolsWinRightCtt{
   float:right;
   width:calc(100% - 108px);
   height:100%;
}
.yl_toolsWinCttTable{
	width:100%;
	border-collapse: collapse;
}

.ylwinicoset{padding:0px 5px;cursor:pointer;}
.ylwinicoset:hover{color:blue;}


.yl_toolsWinCttTable td,.yl_toolsWinCttTable th{text-align:center;font-weight:normal;height:25px;line-height:25px;}
.yl_toolsWinCttTable th{background:#f4f4f8;}

.addfieldwinbody{margin:15px;width:calc(100% - 30px);}
.addfieldwinbody tr{height:35px;}
.divaddfieldbttn{width:60px;text-align:center;}

.divdesinertoolspanel,.divdesinerpanel,.divdesinercontainer{position:absolute;background:#262b33;}
.divdesinertoolspanel button{margin-right:10px;}
.divdesinertoolspanel{top:0px;height:30px;}
.divdesinercontainer{top:32px;height:calc(100% - 32px);background-image:url(../images/attr/bg.png);overflow:hidden;}

.divdesinerpanel{left:0px;top:0px;width:1707px;height:791px;background:transparent;background-size:100% 100%;
    background-repeat: no-repeat;}

#attr_dev_sel option{font-size:12px;}


.divselrect{position:absolute;border:1px solid rgb(56, 123, 233,0.5);z-index:12;background:rgba(56, 123, 233,0.3);}



.toolsbttn{float:left;color:#ffffff;font-size: 13px;margin-left:20px;cursor:pointer;padding:8px;}
.toolsbttn:hover{color:#0d5eff;font-weight:bold;}


.divpicnamelist{display: inline-block;width:calc(100% - 45px);height:80px;border:1px solid #3d434d;margin-bottom:15px;font-weight:bold;padding:15px;cursor:pointer;transition: all 0.5s;}
.divpicnamelist img{width:100%;height:50px;margin-bottom:15px;}
.divpicnamelist:hover{border:1px solid #ccc;color:#ccc;}
	
	
@font-face {
    font-family: 'DigitalClock';
    src: url('../fonts/DS-DIGIT.TTF') format('truetype');
}

@font-face {
    font-family: 'ddjbt';
    src: url('../fonts/DingTalkJinBuTi.ttf') format('truetype');
}
	
	
/*********************卡片****************************/
.yltCardContainer,.yltCardPanel{box-sizing: border-box;}




/************************表格********************************/
.yltDivTable {
      width: 100%;
	  height:100%;
      border-collapse: collapse;
      position: relative;
    }

    .yltdivtable-row {
      display: flex;
    }

    .yltdivtable-header {
      font-weight: bold;
      position: sticky; /* 使表头固定 */
      top: 0; /* 固定在顶部 */
      z-index: 1; /* 确保表头在内容之上 */
    }
    .yltdivtable-cell {
      flex: 1;
      padding: 0px 5px;
      text-align: center;
    }

    /* 动画滚动数据行 */
    .yltdivtable-body {
      display: block;
      overflow-y: hidden; /* 启用垂直滚动 */

	  scrollbar-width: thin;
	  /**scrollbar-color: #888 #f0f0f0;**/
	  scrollbar-color: rgba(136,136,136,0.4) transparent;
    }
	
	/* WebKit */
	.yltdivtable-body::-webkit-scrollbar {
	  width: 8px;
	}
	.yltdivtable-body::-webkit-scrollbar-track {
	  /**background: #f0f0f0;**/
	  background: transparent; /* 可以改成渐变背景也行 */
	}
	.yltdivtable-body::-webkit-scrollbar-thumb {
	 /** background-color: #888;**/
	  background: linear-gradient(to bottom, rgba(136,136,136,0.6), rgba(136,136,136,0.2));
	  border-radius: 4px;
	}
	.yltdivtable-body::-webkit-scrollbar-thumb:hover {
	  background: linear-gradient(to bottom, rgba(136,136,136,0.9), rgba(136,136,136,0.4));
	}
	
	
	
    .yltdivtable-body-content {
      /**animation: scrollRows 10s linear infinite;**/
	  animation-name: scrollRows;
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
	  animation-play-state: running;
    }
	
	.yltdivtable-body-content:hover {
		animation-play-state: paused;
	}

    /* 循环滚动动画 */
    @keyframes scrollRows {
      0% {
        transform: translateY(0); /* 从初始位置开始 */
      }
      100% {
        transform: translateY(-100%); /* 完全滚动过去 */
      }
    }
	
/***********************************液位图**********/
.yltTank {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tankLiquid{
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  transform: translateY(100%);
  animation: moveTankLiquid 2s ease-out forwards;
}

@keyframes moveTankLiquid {
      0% {
        transform: translateY(100%);
      }
      100% {
        transform: translateY(0); /* 目标位置，比如完成 65% */
      }
    }



.tankLiquid::before,
.tankLiquid::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 200%;
  height: 30px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 40% 60% 60% 40% / 50%;
  animation: wave 2s ease-in-out infinite;
}

.tankLiquid::after {
  top: -12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50% 40% 40% 60% / 50%;
  animation: wave 1s ease-in-out infinite reverse;
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.tankLabel{
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  text-shadow: 0 1px 2px #ffffff;
}
/****************************************进度条*****************************/
.yltProgress {
      width: 100%;
      height:100%;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }
.progress-bar {
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
	  transform: translateX(-100%);
	  animation: moveProgress 2s ease-out forwards;
}
 @keyframes moveProgress {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0); /* 目标位置，比如完成 65% */
      }
    }
.progress-label {
      position: absolute;
      width: 100%;
      text-align: center;
      z-index: 2;
      font-weight: bold;
	  top: 50%;
	  transform: translateY(-50%);
	  text-shadow: 0 1px 2px #ffffff;
    }
	
/**********************窗体***********************************/
.homeminwin{
		width:100%;
		height:100%;
		box-sizing: border-box;
		position: relative;
		
	}
	.t_line_box {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.t_line_box i{
		position: absolute;
	}
	.l_t_line{
		width: 5px;
		height: 24px;
		left: -3px;
		top: -3px;
	}
	.t_l_line{
		height: 5px;
		width: 26px;
		left: -3px;
		top: -3px;
	}
	.t_r_line{
		height: 5px;
		width: 26px;
		right: -3px;
		top: -3px;
	}
	.r_t_line{
		width: 5px;
		height: 24px;
		right: -3px;
		top: -3px;
	}
	.l_b_line{
		width: 5px;
		height: 24px;
		left: -3px;
		bottom: -3px;
	}
	.b_l_line{
		height: 5px;
		width: 26px;
		left: -3px;
		bottom: -3px;
	}
	.r_b_line{
		width: 5px;
		height: 24px;
		right: -3px;
		bottom: -3px;
	}
	.b_r_line{
		height: 5px;
		width: 26px;
		right: -3px;
		bottom: -3px;
	}
	.wintitle_cc,.wintitle_ct,.wintitle_cb,.wintitle_lt,.wintitle_lb{
		letter-spacing:0.5px;
		padding:0px 25px;
		box-sizing: border-box;
		
	}
	.wintitle_cc{
		position: absolute;
		top: 0%;
		left:50%;
		text-align:center;
	}
	.wintitle_cc{
		transform:translate(-50%,-50%);
		background-image: radial-gradient(160% 100% at 50% 0%, hsla(0, 0%, 100%, .05) 50%, hsla(0, 0%, 100%, 0) 52%);
	}
	
	.wintitle_ct{
		text-align:center;
	}
	
	.wintitle_lt{
		padding:0px 5px;
		text-align:left;
	}
	.wintitle_cb,.wintitle_lb{
		float:left;
		height:100%;
		
	}
	.wintitle_cb{
		text-align:center;
	}
	.wintitle_lb{
		text-align:left;
		
	}
	.divtitlecon{ display: flex; width:100%;box-sizing: border-box;}
	.divtitlespc{flex: 1;height:100%;box-sizing: border-box;}
	.divtitletwospc{flex: 1 1 0;height:100%;box-sizing: border-box;}
	.divtitlecontent{box-sizing: border-box;width:100%;}
	
	
	
	/**************排名*************************/
	
	.yl-rank-container {
      width: 100%;
	  box-sizing: border-box;
      padding: 20px;
      border-radius: 10px;

    }

    .yl-rank-title {
      text-align: center;
      margin-bottom: 30px;
    }

    .yl-rank-item {
      position: relative;
      cursor: pointer;
    }

    .yl-rank-label {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      transition: color 0.3s;
    }

    .yl-rank-item:hover .yl-rank-label,
    .yl-rank-item:hover .yl-rank-score {
      color: #ffcc33;
    }

    .yl-rank-bar-wrapper {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #2e4c6d;
    }

    .yl-rank-bar {
      height: 100%;
      border-radius: 6px;
      transition: width 13s ease-out;
      position: relative;
	  transform-origin: left;
	  transform: scaleX(1);
	   animation: yl-bar-move 3s linear 1;
	 
      z-index: 1;
    }
	
	@keyframes yl-bar-move {
      0% {transform: scaleX(0);}
      100% {transform: scaleX(1);}
    }

    .yl-rank-particles {
      position: absolute;
      top: 0;
      left: 0;
	  width:100%;
      height: 100%;
      z-index: 0;
      animation: yl-particles-move 6s linear infinite;
    }

    @keyframes yl-particles-move {
      0% { width: 0%; opacity:0;}
      50% { width: 100%;  opacity:1;}
	  100% { width: 0%; opacity:0; }
    }

    .yl-rank-score {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      z-index: 3;
    }