
.attrToolsPanel {
    position: absolute;
    background: #fff;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
	/**
	top: 10%;
	color: rgba(255, 255, 255, .8);
	color: rgba(26, 26, 26, .8);
    border: 1px solid #ddd;
	**/
	z-index:20;
	transition: all 0.5s;
}
.attrToolsPanelInner{
	width:100%;
	height:100%;
}
.attrToolsTitle{
	width:100%;
	height:30px;
	line-height:30px;
	font-weight:bold;
	/**
	border-bottom: 2px solid #eee;
	color:#666;
	**/
	text-align:center;
	white-space: nowrap;
}
.attrToolsCloseRight,.attrToolsCloseLeft{
	position:absolute;
	
	top:6px;
	cursor:pointer;
}
.attrToolsCloseRight{
	left:10px;
}
.attrToolsCloseLeft{
	right:10px;
}
.attrToolsCloseLeft:hover,.attrToolsCloseRight:hover{font-weight:bold;color:red;}
.tabToolsPanel {
	position:absolute;
	top:18%;
    overflow: hidden;
    padding: 0px 0px;
	/**
	background:#fff;
	border:1px solid #ddd;
	**/
	border-right:0;
}

.tabToolsLabel {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 450;
    margin:0;
    padding:8px 5px;
	color: var(--tools-panel-color);
	font-weight:550;
	letter-spacing:5px;
	writing-mode: vertical-rl;
	cursor:pointer;
	font-size:13px;
	transition: all 0.5s;
}
.tabToolsLabel_ico {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 450;
    margin:0;
    padding:0px 1px;

    color: #666;
	font-weight:550;
	cursor:pointer;
	font-size:13px;
	transition: all 0.5s;
}
.tabToolsLabel_sel{
	background:#0d5eff;
	font-weight:bold;
	color:var(--tools-tab-color);
}

.tabToolsLabel:hover,.tabToolsLabel_ico:hover{font-weight:bold;color:#333;}

.radiusBotLeft{border-bottom-left-radius:6px;}
.radiusTopLeft{border-top-left-radius:6px;}
.radiusBotRight{border-bottom-right-radius:6px;}
.radiusTopRight{border-top-right-radius:6px;}

.attrToolsContent {
    overflow-x: hidden;
	overflow-y: hidden;
	width:100%;
	padding:8px;
    height: calc(100% - 35px);
	text-align:center;
	box-sizing: border-box;
}
.cttPadding_1{padding:30px 2px;padding-bottom:2px;}
.attrToolsContent:hover{
	overflow-y: auto;
}
@keyframes toostabcttanim {
			0% {
				padding-top:180px;
			}

			100% {
				padding-top:0px;
			}
		}
.attrToolsContent_show{
	-webkit-animation: toostabcttanim 0.3s 1 ease-in;
}




.icotoolBttn_Z{float:left;padding:5px;color:var(--tools-panel-color);text-align:center;cursor:pointer;}
.icobttnicoctl_Z{width:100%;padding:2px;border: 1px solid #e9e9e9;}
.icotoolBttn_Z i{font-size:18px;}
.icobttntitle_Z{width:100%;padding:2px;font-size:12px;}
.icotoolBttn_Z:hover {
    color: var(--tools-hover-color);
    font-weight: bold;
}


.attricocontainer{margin-top:5px;margin-right:10px;float:left;width:50px;height:50px;text-align:center;cursor:pointer;}
.attricocontainer img{width:28px;max-height:28px;}
.attricocontainer :hover img{filter: brightness(1.5);}


.attrTable{border-spacing: 0;border-collapse: collapse;font-size:11px;font-family:SimHei;}
.attrTable tr{height:var(--tools-attr-height);}
.attrTable tr:hover{font-weight:bold;color:var(--tools-hover-color);}
.attrTable tr:hover input{font-weight:bold;color:var(--tools-hover-color);border-bottom:1px solid var(--tools-hover-color);}
.attrTable tr:hover select{font-weight:bold;color:var(--tools-hover-color);border-bottom:1px solid var(--tools-hover-color);}
.attrtdcaption{text-align:left;padding:0px 5px;}


/* 针对 Webkit 浏览器（如 Chrome, Safari） */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 针对 Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
input:focus {
  outline: none; /* 移除聚焦时的轮廓 */
  border: none;  /* 如果有边框，去掉它 */
  border-bottom:1px solid var(--tools-hover-color);
}
input[type="color"] {
  float:left;
  border:0px;
  width:var(--tools-colorinput-width);
}
select{
	 outline: none;
}


* {
  scrollbar-width: thin;
  scrollbar-color: #999 rgba(240,240,240,0);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(0,0,0,0.1));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(153, 153, 153, 0.8);
  
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(102, 102, 102, 0.8);
}





._colorBttn{float:left;height:25px;line-height:25px;font-size:12px;cursor:pointer;color:blue;padding:0px 5px;}
._colorBttn:hover{filter: sepia(100%) saturate(500%) hue-rotate(200deg);}
._attrInput,._attrUnitInput,._attrSelInput,._attrSelect{width:var(--tools-input-width);height:25px;margin-left:5px;font-size:12px;border:0px;border-bottom:1px solid var(--tools-input-border);background:transparent;color:var(--tools-panel-color);}
._attrSelect option,optgroup{color:#000000;border:0px;font-size:11px;}

._attrUnitInput{float:left;padding-left:5px;width:var(--tools-ranginput-width);height:20px;padding-top:5px;}
._attrUnit{float:left;padding-left:5px;height:35px;line-height:35px;}

._attrInputRang,._attrUnitInputRang{float:left;width:var(--tools-ranginput-width);height:25px;margin-left:5px;}
._attrSelInput{width:var(--tools-colorinput-width);padding-right:20px;background:url(../images/eve/query.png) no-repeat right center;background-size: 20px 20px;cursor:pointer;}
._attrRangNumber{float:left;width:25px;margin-left:5px;border:0px;font-size:12px;height:25px;line-height:25px;text-align:center;background:transparent;color:var(--tools-panel-color);}

._attrUnitInputRang{width:calc(var(--tools-ranginput-width) - 15px);}
._attrRangUnit{float:left;height:25px;line-height:25px;}

._attrbttn{float:left;margin-left:10px;padding:5px 0px;border-radius:3px;text-align:center;width:var(--tools-colorinput-width);background:#4f5568;cursor:pointer;}



/**风格**/
.tabToolsPanel,.attrToolsPanel {
	background:var(--tools-panel-bg);
	border:1px solid var(--tools-panel-border);
	color: var(--tools-panel-color);
}
.attrToolsPanel {
	top: 0px;
}
.attrToolsTitle{
	border-bottom: 2px solid var(--tools-panel-border);
}

.divdesinertoolspanel{width:100%;height:100%;}
.toolsbttn,.toolsbttnico{float:left;margin-left:8px;margin-bottom:8px;font-size: 18px;padding:3px;}
.toolsbttn{color:var(--tools-panel-color);cursor:pointer;}
.toolsbttn:hover{color:var(--tools-hover-color);font-weight:bold;}

.captionbttncontainer{color:var(--tools-panel-color);margin-bottom:8px;cursor:pointer;}
.toolsbttnico{margin-bottom:0px;padding-bottom:5px;}
.toolspancaption{padding:0px 5px;font-size:11px;}
.captionbttncontainer:hover{color:var(--tools-hover-color);font-weight:bold;}

.toolsbttnsel{border-radius:3px;color:var(--tools-hover-color);font-weight:bold;}