/*!* 隐藏传统滚动条，使用覆盖式 *!*/
/*::-webkit-scrollbar {*/
/*  width: 8px; !* 垂直滚动条宽度 *!*/
/*  height: 8px; !* 水平滚动条高度 *!*/
/*}*/
/*::-webkit-scrollbar-track {*/
/*  background: transparent; !* 滚动条轨道透明 *!*/
/*}*/
/*::-webkit-scrollbar-thumb {*/
/*  background: rgba(0, 0, 0, 0.2); !* 滚动条滑块颜色 *!*/
/*  border-radius: 4px; !* 滑块圆角 *!*/
/*}*/
/*::-webkit-scrollbar-thumb:hover {*/
/*  background: rgba(0, 0, 0, 0.3); !* 悬停时颜色加深 *!*/
/*}*/


/*!* 针对Firefox的滚动条（需Firefox 64+） *!*/
/** {*/
/*  scrollbar-width: thin; !* 滚动条宽度：thin（细）或 none（隐藏） *!*/
/*  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; !* 滑块颜色 + 轨道颜色 *!*/
/*}*/

/*     !**Define the toolbar styles*!*/
/*    .x-btn-inner{*/
/*		background-position:0 0;*/
/*		background-repeat:no-repeat;*/
/*		font-size:13px;*/
/*		font-weight:bold;*/
/*		color:#474665;*/
/*		padding-left: 40px ;*/
/*		}*/
/*		*/
/*	.node {*/
/*		background-image:url(../images/node.png);*/
/*		}*/
/*	.link {*/
/*		background-image:url(../images/link.png);*/
/*		}*/
/*	.zoomin {*/
/*		background-image:url(../images/zoomin.png);*/
/*		}*/
/*	.zoomout{*/
/*		background-image:url(../images/zoomout.png);*/
/*		}*/
/*	.pan {*/
/*		background-image:url(../images/pan.png);*/
/*		}*/
/*	.tools {*/
/*		background-image:url(../images/tools.png);*/
/*		}*/
/*	.links {*/
/*		background-image:url(../images/links.png);*/
/*		}*/
/*	.help {*/
/*		background-image:url(../images/help.png);*/
/*		}*/
/*	.filter {*/
/*		background-image:url(../images/find.png);*/
/*	}*/
/*	.remove {*/
/*		background-image:url(../images/delete.png);*/
/*	}*/
/*	*/
/*	.zoomslider {*/
/*	   	 background-image: url(../images/ticks.gif);*/
/*	   	 background-repeat:no-repeat;*/
/*	   	 background-position:0 20px;*/
/*	   	 background-color:transparent;*/
/*	}*/
/*!** following were moved from original d3ext.html *!	*/
/*	*/












.form-bg{
    background: url(../images/login_bg.png) no-repeat;
    background-size:100% 100%;
}

/**default style for path**/
path{
  fill: none;
  /** stroke:grey; */
}

marker {
	stroke-width:2px;
}
marker .decreases {
  fill: blue;
}
.decreases{
  stroke: blue ;
    stroke-width: 2px;
}

marker .beinguptaken {
  fill: lightsalmon;
}
.beinguptaken 
 {
  fill:none;
  stroke:lightsalmon;
  stroke-width: 2px;
  /**stroke-dasharray: 0,2 1; */
}
marker .inhibits {
  fill: lightgreen;
}
.inhibits
{
	stroke-width: 2px;
    stroke: lightgreen;
}
marker .stimulats {
  fill: mediumpurple;
}
.stimulats 
 {
  stroke-width: 2px;
  fill:none;
  stroke:mediumpurple;
}
marker .other_line {
  fill: #999900;
}
.other_line
 {
  stroke-width: 2px;
  fill:none;
  stroke:#999900;
}

marker .associatedwithreducedrisk{fill: #999900;}
marker .phosphorylates_activates{fill: #999900;}
marker .physicalassociation{fill: #999900;}
marker .directinteraction{fill: #999900;}
marker .methylation{fill: #999900;}
marker .colocalization{fill: #999900;}
marker .phosphorylation{fill: #999900;}
marker .ubiquitination{fill: #999900;}
marker .acetylation{fill: #999900;}
marker .covalentbinding{fill: #999900;}
marker .palmitoylation{fill: #999900;}
marker .disulfidebond{fill: #999900;}
marker .enzymaticreaction{fill: #999900;}
marker .sumoylation{fill: #999900;}
marker .dephosphorylation{fill: #999900;}
marker .proteincleavage{fill: #999900;}
marker .cleavage{fill: #999900;}
marker .neddylation{fill: #999900;}
marker .demethylation{fill: #999900;}
marker .gtpasereaction{fill: #999900;}
marker .dnaelongation{fill: #999900;}
marker .deacetylation{fill: #999900;}
marker .atpasereaction{fill: #999900;}
marker .phosphotransfer{fill: #999900;}
marker .geneticinequality{fill: #999900;}
marker .rnacleavage{fill: #999900;}
marker .glycosylation{fill: #999900;}
marker .adpribosylation{fill: #999900;}
marker .transglutamination{fill: #999900;}
marker .putativeselfinteraction{fill: #999900;}
.associatedwithreducedrisk{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylates_activates{stroke-width: 2px;fill:none;stroke:#999900;}
.physicalassociation{stroke-width: 2px;fill:none;stroke:#999900;}
.directinteraction{stroke-width: 2px;fill:none;stroke:#999900;}
.methylation{stroke-width: 2px;fill:none;stroke:#999900;}
.colocalization{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.ubiquitination{stroke-width: 2px;fill:none;stroke:#999900;}
.acetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.covalentbinding{stroke-width: 2px;fill:none;stroke:#999900;}
.palmitoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.disulfidebond{stroke-width: 2px;fill:none;stroke:#999900;}
.enzymaticreaction{stroke-width: 2px;fill:none;stroke:#999900;}
.sumoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.dephosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.proteincleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.cleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.neddylation{stroke-width: 2px;fill:none;stroke:#999900;}
.demethylation{stroke-width: 2px;fill:none;stroke:#999900;}
.gtpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.dnaelongation{stroke-width: 2px;fill:none;stroke:#999900;}
.deacetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.atpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphotransfer{stroke-width: 2px;fill:none;stroke:#999900;}
.geneticinequality{stroke-width: 2px;fill:none;stroke:#999900;}
.rnacleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.glycosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.adpribosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.transglutamination{stroke-width: 2px;fill:none;stroke:#999900;}
.putativeselfinteraction{stroke-width: 2px;fill:none;stroke:#999900;}


/**  association shouldn't have arrow
 marker .association {
  fill: grey;
}
*/
.association{
  stroke-width: 2px;
  /** stroke-dasharray: 5,1 5,1; */
  stroke:grey;
}
marker .physical_interaction {
  fill: olive;
}
.physical_interaction {
	stroke-width: 2px;
    stroke: olive ;
}

.phosphorylates_activates {
  stroke-width: 2px;
  fill:none;
  stroke:green;
  /** stroke-dasharray: 0,2 1; */
	
}
marker .activates {
  fill: dodgerblue;
}
.activates {
	  stroke-width: 2px;
  /**stroke-dasharray: 4,5 2; */
  stroke:dodgerblue;
}
marker .regulates {
  fill: brown;
}
.regulates {
      stroke-width: 2px;
  /** stroke-dasharray: 4,5 2; */
  stroke:brown;
}

marker .predicted {
  fill: grey;
}

.predicted {
  stroke-width: 1px;
  fill:none;
  stroke:grey;
  /**stroke-dasharray: 0,2 1; */
}


marker .pathway {
  fill: lightpink;
}
.pathway { 
  stroke-width: 2px;
  /** stroke-dasharray: 1,2 3; */
  stroke:lightpink;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.loaded {
   stroke-dasharray: none
}
circle.unloaded {
}

circle.small {
  
}

circle.gene {
  fill: #91c1e8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.metabolite {
  fill: #339933;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.protein {
  fill: #0a56c8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.disease {
  fill: #d7791b;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.species {
  fill: #8570EE;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}


.state-selected {  	
  	fill:yellow;
  	stroke:yellow;
}
path.state-selected {   
    stroke:yellow;
    stroke-width:2;
    stroke-color:yellow;
    fill:none
}
.state-highlight {
    background-color:#ffff9c !important
}
circle.state-highlight {
    stroke:#ffff9c;  
    fill: #ffff9c;
    fill-opacity:0.2;
    stroke-width:4px;    
}
path.state-highlight {
    stroke:#ffff9c;      
    stroke-width:4px;
}

.state-error {   
    color:red    
}

/**  HTML forms **/
input.filterByNetwork {
	margin-left:30px
}
input[type=text],select{
  font-size:1.1em;
  padding:3px
} 


#infopanel th {
  color:#5f6b87;
  font-weight:bold;
  padding:5px;
}
#infopanel td {
  padding:5px;
}

.mined-entity {
    padding: 0px 2px;        
}
.clickable {
	cursor:pointer;	
	color: #132C99
}
.clickable:hover {
	text-decoration:underline;
	
}
.bio-term {
  
  color:darkblue;
  font-style:italic;
}


#uploadbox {
    padding:20px;
    border:5px dashed #AAA;
    margin:5px 0px;
}
#uploadbox.hover {
    border:5px dashed #3d4253;    
}

#previewSummary span {
    padding:0px 5px;
}


/** Ext Overrides */
/** necessary to apply row style in the grid */
.x-grid-row .x-grid-cell {
  background-color: Transparent !important;
}

.network-spinner {
	color:#3d4253;		
}

.x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div {
	border-style: dotted;
    border-color: #FFAB68; 
    background-color: #E6FFA2 !important 
}
.x-form-item-label-top {
  margin: 10px 0px 5px 0px;
  font-weight:bold
}
.x-form-field {
  font-size:large
}






textarea {
  font-size:1.2em;
  padding:4px;
}

.precon-form div {
  margin-top:8px; margin-bottom:8px;
}




/**  Vote window */
  
.vote-summary {
  height:24px;
  
}
.vote-up {
  background: url(/ext/resources/images/thumb-upx24.png) no-repeat;
  padding-left:28px;
}
.vote-down {
  background: url(/ext/resources/images/thumb-downx24.png) no-repeat;
  padding-left:28px;
}
.vote-comments {
  padding:5px 15px;
}

.date-time {
  color: #666;
}
.custom-font {
    font-size: 12px;
}

.modern-button {
    background-color: #007bff; 
    color: white; 
    border-radius: 4px; 
    padding: 8px 16px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease;      /**Define the toolbar styles*/
    .x-btn-inner{
		background-position:0 0;
		background-repeat:no-repeat;
		font-size:13px;
		font-weight:bold;
		color:#474665;
		padding-left: 40px ;
		}
		
	.node {
		background-image:url(../images/node.png);
		}
	.link {
		background-image:url(../images/link.png);
		}
	.zoomin {
		background-image:url(../images/zoomin.png);
		}
	.zoomout{
		background-image:url(../images/zoomout.png);
		}
	.pan {
		background-image:url(../images/pan.png);
		}
	.tools {
		background-image:url(../images/tools.png);
		}
	.links {
		background-image:url(../images/links.png);
		}
	.help {
		background-image:url(../images/help.png);
		}
	.filter {
		background-image:url(../images/find.png);
	}
	.remove {
		background-image:url(../images/delete.png);
	}
	
	.zoomslider {
	   	 background-image: url(../images/ticks.gif);
	   	 background-repeat:no-repeat;
	   	 background-position:0 20px;
	   	 background-color:transparent;
	}
/** following were moved from original d3ext.html */	
	














/**default style for path**/
path{
  fill: none;
  /** stroke:grey; */
}

marker {
	stroke-width:2px;
}
marker .decreases {
  fill: blue;
}
.decreases{
  stroke: blue ;
    stroke-width: 2px;
}

marker .beinguptaken {
  fill: lightsalmon;
}
.beinguptaken 
 {
  fill:none;
  stroke:lightsalmon;
  stroke-width: 2px;
  /**stroke-dasharray: 0,2 1; */
}
marker .inhibits {
  fill: lightgreen;
}
.inhibits
{
	stroke-width: 2px;
    stroke: lightgreen;
}
marker .stimulats {
  fill: mediumpurple;
}
.stimulats 
 {
  stroke-width: 2px;
  fill:none;
  stroke:mediumpurple;
}
marker .other_line {
  fill: #999900;
}
.other_line
 {
  stroke-width: 2px;
  fill:none;
  stroke:#999900;
}

marker .associatedwithreducedrisk{fill: #999900;}
marker .phosphorylates_activates{fill: #999900;}
marker .physicalassociation{fill: #999900;}
marker .directinteraction{fill: #999900;}
marker .methylation{fill: #999900;}
marker .colocalization{fill: #999900;}
marker .phosphorylation{fill: #999900;}
marker .ubiquitination{fill: #999900;}
marker .acetylation{fill: #999900;}
marker .covalentbinding{fill: #999900;}
marker .palmitoylation{fill: #999900;}
marker .disulfidebond{fill: #999900;}
marker .enzymaticreaction{fill: #999900;}
marker .sumoylation{fill: #999900;}
marker .dephosphorylation{fill: #999900;}
marker .proteincleavage{fill: #999900;}
marker .cleavage{fill: #999900;}
marker .neddylation{fill: #999900;}
marker .demethylation{fill: #999900;}
marker .gtpasereaction{fill: #999900;}
marker .dnaelongation{fill: #999900;}
marker .deacetylation{fill: #999900;}
marker .atpasereaction{fill: #999900;}
marker .phosphotransfer{fill: #999900;}
marker .geneticinequality{fill: #999900;}
marker .rnacleavage{fill: #999900;}
marker .glycosylation{fill: #999900;}
marker .adpribosylation{fill: #999900;}
marker .transglutamination{fill: #999900;}
marker .putativeselfinteraction{fill: #999900;}
.associatedwithreducedrisk{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylates_activates{stroke-width: 2px;fill:none;stroke:#999900;}
.physicalassociation{stroke-width: 2px;fill:none;stroke:#999900;}
.directinteraction{stroke-width: 2px;fill:none;stroke:#999900;}
.methylation{stroke-width: 2px;fill:none;stroke:#999900;}
.colocalization{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.ubiquitination{stroke-width: 2px;fill:none;stroke:#999900;}
.acetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.covalentbinding{stroke-width: 2px;fill:none;stroke:#999900;}
.palmitoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.disulfidebond{stroke-width: 2px;fill:none;stroke:#999900;}
.enzymaticreaction{stroke-width: 2px;fill:none;stroke:#999900;}
.sumoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.dephosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.proteincleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.cleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.neddylation{stroke-width: 2px;fill:none;stroke:#999900;}
.demethylation{stroke-width: 2px;fill:none;stroke:#999900;}
.gtpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.dnaelongation{stroke-width: 2px;fill:none;stroke:#999900;}
.deacetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.atpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphotransfer{stroke-width: 2px;fill:none;stroke:#999900;}
.geneticinequality{stroke-width: 2px;fill:none;stroke:#999900;}
.rnacleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.glycosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.adpribosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.transglutamination{stroke-width: 2px;fill:none;stroke:#999900;}
.putativeselfinteraction{stroke-width: 2px;fill:none;stroke:#999900;}


/**  association shouldn't have arrow
 marker .association {
  fill: grey;
}
*/
.association{
  stroke-width: 2px;
  /** stroke-dasharray: 5,1 5,1; */
  stroke:grey;
}
marker .physical_interaction {
  fill: olive;
}
.physical_interaction {
	stroke-width: 2px;
    stroke: olive ;
}

.phosphorylates_activates {
  stroke-width: 2px;
  fill:none;
  stroke:green;
  /** stroke-dasharray: 0,2 1; */
	
}
marker .activates {
  fill: dodgerblue;
}
.activates {
	  stroke-width: 2px;
  /**stroke-dasharray: 4,5 2; */
  stroke:dodgerblue;
}
marker .regulates {
  fill: brown;
}
.regulates {
      stroke-width: 2px;
  /** stroke-dasharray: 4,5 2; */
  stroke:brown;
}

marker .predicted {
  fill: grey;
}

.predicted {
  stroke-width: 1px;
  fill:none;
  stroke:grey;
  /**stroke-dasharray: 0,2 1; */
}


marker .pathway {
  fill: lightpink;
}
.pathway { 
  stroke-width: 2px;
  /** stroke-dasharray: 1,2 3; */
  stroke:lightpink;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.loaded {
   stroke-dasharray: none
}
circle.unloaded {
}

circle.small {
  
}

circle.gene {
  fill: #91c1e8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.metabolite {
  fill: #339933;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.protein {
  fill: #0a56c8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.disease {
  fill: #d7791b;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.species {
  fill: #8570EE;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}


.state-selected {  	
  	fill:yellow;
  	stroke:yellow;
}
path.state-selected {   
    stroke:yellow;
    stroke-width:2;
    stroke-color:yellow;
    fill:none
}
.state-highlight {
    background-color:#ffff9c !important
}
circle.state-highlight {
    stroke:#ffff9c;  
    fill: #ffff9c;
    fill-opacity:0.2;
    stroke-width:4px;    
}
path.state-highlight {
    stroke:#ffff9c;      
    stroke-width:4px;
}

.state-error {   
    color:red    
}

/**  HTML forms **/
input.filterByNetwork {
	margin-left:30px
}
input[type=text],select{
  font-size:1.1em;
  padding:3px
} 


#infopanel th {
  color:#5f6b87;
  font-weight:bold;
  padding:5px;
}
#infopanel td {
  padding:5px;
}

.mined-entity {
    padding: 0px 2px;        
}
.clickable {
	cursor:pointer;	
	color: #132C99
}
.clickable:hover {
	text-decoration:underline;
	
}
.bio-term {
  
  color:darkblue;
  font-style:italic;
}


#uploadbox {
    padding:20px;
    border:5px dashed #AAA;
    margin:5px 0px;
}
#uploadbox.hover {
    border:5px dashed #3d4253;    
}

#previewSummary span {
    padding:0px 5px;
}


/** Ext Overrides */
/** necessary to apply row style in the grid */
.x-grid-row .x-grid-cell {
  background-color: Transparent !important;
}

.network-spinner {
	color:#3d4253;		
}

.x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div {
	border-style: dotted;
    border-color: #FFAB68; 
    background-color: #E6FFA2 !important 
}
.x-form-item-label-top {
  margin: 10px 0px 5px 0px;
  font-weight:bold
}
.x-form-field {
  font-size:large
}






textarea {
  font-size:1.2em;
  padding:4px;
}

.precon-form div {
  margin-top:8px; margin-bottom:8px;
}




/**  Vote window */
  
.vote-summary {
  height:24px;
  
}
.vote-up {
  background: url(/ext/resources/images/thumb-upx24.png) no-repeat;
  padding-left:28px;
}
.vote-down {
  background: url(/ext/resources/images/thumb-downx24.png) no-repeat;
  padding-left:28px;
}
.vote-comments {
  padding:5px 15px;
}

.date-time {
  color: #666;
}
.custom-font {
    font-size: 12px; /* 调整为你需要的字体大小 */
}

.modern-button {
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    border-radius: 4px; /* 圆角边框 */
    padding: 8px 16px; /* 内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: all 0.3s ease; /* 过渡效果 */
}

.modern-button:hover {
    background-color: #0056b3; /* 悬停时更深的蓝色 */
    cursor: pointer;
}

.modern-button.x-btn-default-small {
    background-color: #007bff !important; /* 强制覆盖默认样式 */
    color: white !important;
    border: none !important;
}

/* 确保文本框内的文本也继承相同的字体大小 */
.custom-font .x-form-text {
    font-size: inherit;
}

.scrollable-container {
    overflow-y: auto; /* 确保有竖向滚动条 */
    height: 100%; /* 设置高度为100% */
    box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
     /**Define the toolbar styles*/
    .x-btn-inner{
		background-position:0 0;
		background-repeat:no-repeat;
		font-size:13px;
		font-weight:bold;
		color:#474665;
		padding-left: 40px ;
		}
		
	.node {
		background-image:url(../images/node.png);
		}
	.link {
		background-image:url(../images/link.png);
		}
	.zoomin {
		background-image:url(../images/zoomin.png);
		}
	.zoomout{
		background-image:url(../images/zoomout.png);
		}
	.pan {
		background-image:url(../images/pan.png);
		}
	.tools {
		background-image:url(../images/tools.png);
		}
	.links {
		background-image:url(../images/links.png);
		}
	.help {
		background-image:url(../images/help.png);
		}
	.filter {
		background-image:url(../images/find.png);
	}
	.remove {
		background-image:url(../images/delete.png);
	}
	
	.zoomslider {
	   	 background-image: url(../images/ticks.gif);
	   	 background-repeat:no-repeat;
	   	 background-position:0 20px;
	   	 background-color:transparent;
	}
/** following were moved from original d3ext.html */	
	














/**default style for path**/
path{
  fill: none;
  /** stroke:grey; */
}

marker {
	stroke-width:2px;
}
marker .decreases {
  fill: blue;
}
.decreases{
  stroke: blue ;
    stroke-width: 2px;
}

marker .beinguptaken {
  fill: lightsalmon;
}
.beinguptaken 
 {
  fill:none;
  stroke:lightsalmon;
  stroke-width: 2px;
  /**stroke-dasharray: 0,2 1; */
}
marker .inhibits {
  fill: lightgreen;
}
.inhibits
{
	stroke-width: 2px;
    stroke: lightgreen;
}
marker .stimulats {
  fill: mediumpurple;
}
.stimulats 
 {
  stroke-width: 2px;
  fill:none;
  stroke:mediumpurple;
}
marker .other_line {
  fill: #999900;
}
.other_line
 {
  stroke-width: 2px;
  fill:none;
  stroke:#999900;
}

marker .associatedwithreducedrisk{fill: #999900;}
marker .phosphorylates_activates{fill: #999900;}
marker .physicalassociation{fill: #999900;}
marker .directinteraction{fill: #999900;}
marker .methylation{fill: #999900;}
marker .colocalization{fill: #999900;}
marker .phosphorylation{fill: #999900;}
marker .ubiquitination{fill: #999900;}
marker .acetylation{fill: #999900;}
marker .covalentbinding{fill: #999900;}
marker .palmitoylation{fill: #999900;}
marker .disulfidebond{fill: #999900;}
marker .enzymaticreaction{fill: #999900;}
marker .sumoylation{fill: #999900;}
marker .dephosphorylation{fill: #999900;}
marker .proteincleavage{fill: #999900;}
marker .cleavage{fill: #999900;}
marker .neddylation{fill: #999900;}
marker .demethylation{fill: #999900;}
marker .gtpasereaction{fill: #999900;}
marker .dnaelongation{fill: #999900;}
marker .deacetylation{fill: #999900;}
marker .atpasereaction{fill: #999900;}
marker .phosphotransfer{fill: #999900;}
marker .geneticinequality{fill: #999900;}
marker .rnacleavage{fill: #999900;}
marker .glycosylation{fill: #999900;}
marker .adpribosylation{fill: #999900;}
marker .transglutamination{fill: #999900;}
marker .putativeselfinteraction{fill: #999900;}
.associatedwithreducedrisk{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylates_activates{stroke-width: 2px;fill:none;stroke:#999900;}
.physicalassociation{stroke-width: 2px;fill:none;stroke:#999900;}
.directinteraction{stroke-width: 2px;fill:none;stroke:#999900;}
.methylation{stroke-width: 2px;fill:none;stroke:#999900;}
.colocalization{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.ubiquitination{stroke-width: 2px;fill:none;stroke:#999900;}
.acetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.covalentbinding{stroke-width: 2px;fill:none;stroke:#999900;}
.palmitoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.disulfidebond{stroke-width: 2px;fill:none;stroke:#999900;}
.enzymaticreaction{stroke-width: 2px;fill:none;stroke:#999900;}
.sumoylation{stroke-width: 2px;fill:none;stroke:#999900;}
.dephosphorylation{stroke-width: 2px;fill:none;stroke:#999900;}
.proteincleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.cleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.neddylation{stroke-width: 2px;fill:none;stroke:#999900;}
.demethylation{stroke-width: 2px;fill:none;stroke:#999900;}
.gtpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.dnaelongation{stroke-width: 2px;fill:none;stroke:#999900;}
.deacetylation{stroke-width: 2px;fill:none;stroke:#999900;}
.atpasereaction{stroke-width: 2px;fill:none;stroke:#999900;}
.phosphotransfer{stroke-width: 2px;fill:none;stroke:#999900;}
.geneticinequality{stroke-width: 2px;fill:none;stroke:#999900;}
.rnacleavage{stroke-width: 2px;fill:none;stroke:#999900;}
.glycosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.adpribosylation{stroke-width: 2px;fill:none;stroke:#999900;}
.transglutamination{stroke-width: 2px;fill:none;stroke:#999900;}
.putativeselfinteraction{stroke-width: 2px;fill:none;stroke:#999900;}


/**  association shouldn't have arrow
 marker .association {
  fill: grey;
}
*/
.association{
  stroke-width: 2px;
  /** stroke-dasharray: 5,1 5,1; */
  stroke:grey;
}
marker .physical_interaction {
  fill: olive;
}
.physical_interaction {
	stroke-width: 2px;
    stroke: olive ;
}

.phosphorylates_activates {
  stroke-width: 2px;
  fill:none;
  stroke:green;
  /** stroke-dasharray: 0,2 1; */
	
}
marker .activates {
  fill: dodgerblue;
}
.activates {
	  stroke-width: 2px;
  /**stroke-dasharray: 4,5 2; */
  stroke:dodgerblue;
}
marker .regulates {
  fill: brown;
}
.regulates {
      stroke-width: 2px;
  /** stroke-dasharray: 4,5 2; */
  stroke:brown;
}

marker .predicted {
  fill: grey;
}

.predicted {
  stroke-width: 1px;
  fill:none;
  stroke:grey;
  /**stroke-dasharray: 0,2 1; */
}


marker .pathway {
  fill: lightpink;
}
.pathway { 
  stroke-width: 2px;
  /** stroke-dasharray: 1,2 3; */
  stroke:lightpink;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.loaded {
   stroke-dasharray: none
}
circle.unloaded {
}

circle.small {
  
}

circle.gene {
  fill: #91c1e8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.metabolite {
  fill: #339933;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.protein {
  fill: #0a56c8;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.disease {
  fill: #d7791b;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
circle.species {
  fill: #8570EE;
  stroke: #333;
  stroke-width: 1px;
  fill-opacity:0.5;
  /** stroke-dasharray: 1,1 */
}
text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}


.state-selected {  	
  	fill:yellow;
  	stroke:yellow;
}
path.state-selected {   
    stroke:yellow;
    stroke-width:2;
    stroke-color:yellow;
    fill:none
}
.state-highlight {
    background-color:#ffff9c !important
}
circle.state-highlight {
    stroke:#ffff9c;  
    fill: #ffff9c;
    fill-opacity:0.2;
    stroke-width:4px;    
}
path.state-highlight {
    stroke:#ffff9c;      
    stroke-width:4px;
}

.state-error {   
    color:red    
}

/**  HTML forms **/
input.filterByNetwork {
	margin-left:30px
}
input[type=text],select{
  font-size:1.1em;
  padding:3px
} 


#infopanel th {
  color:#5f6b87;
  font-weight:bold;
  padding:5px;
}
#infopanel td {
  padding:5px;
}

.mined-entity {
    padding: 0px 2px;        
}
.clickable {
	cursor:pointer;	
	color: #132C99
}
.clickable:hover {
	text-decoration:underline;
	
}
.bio-term {
  
  color:darkblue;
  font-style:italic;
}


#uploadbox {
    padding:20px;
    border:5px dashed #AAA;
    margin:5px 0px;
}
#uploadbox.hover {
    border:5px dashed #3d4253;    
}

#previewSummary span {
    padding:0px 5px;
}


/** Ext Overrides */
/** necessary to apply row style in the grid */
.x-grid-row .x-grid-cell {
  background-color: Transparent !important;
}

.network-spinner {
	color:#3d4253;		
}

.x-grid-row-selected .x-grid-cell, .x-grid-row-selected .x-grid-rowwrap-div {
	border-style: dotted;
    border-color: #FFAB68; 
    background-color: #E6FFA2 !important 
}
.x-form-item-label-top {
  margin: 10px 0px 5px 0px;
  font-weight:bold
}
.x-form-field {
  font-size:large
}






textarea {
  font-size:1.2em;
  padding:4px;
}

.precon-form div {
  margin-top:8px; margin-bottom:8px;
}




/**  Vote window */
  
.vote-summary {
  height:24px;
  
}
.vote-up {
  background: url(/ext/resources/images/thumb-upx24.png) no-repeat;
  padding-left:28px;
}
.vote-down {
  background: url(/ext/resources/images/thumb-downx24.png) no-repeat;
  padding-left:28px;
}
.vote-comments {
  padding:5px 15px;
}

.date-time {
  color: #666;
}
.custom-font {
    font-size: 12px; 
}

.modern-button {
    background-color: #007bff;
    color: white;
    border-radius: 4px; 
    padding: 8px 16px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    transition: all 0.3s ease; 
}

.modern-button:hover {
    background-color: #0056b3; 
    cursor: pointer;
}

.modern-button.x-btn-default-small {
    background-color: #007bff !important; 
    color: white !important;
    border: none !important;
}

.custom-font .x-form-text {
    font-size: inherit;
}

.scrollable-container {
    overflow-y: auto; 
    height: 100%;
    box-sizing: border-box; 
}

}

.modern-button:hover {
    background-color: #0056b3; 
    cursor: pointer;
}

.modern-button.x-btn-default-small {
    background-color: #007bff !important; 
    color: white !important;
    border: none !important;
}


.custom-font .x-form-text {
    font-size: inherit;
}

.scrollable-container {
    overflow-y: auto; 
    height: 100%;
    box-sizing: border-box;
}

/* 所有菜单中的按钮文本左对齐 */
/* 通用左对齐，留出图标空间 */
.menu-item-left .x-btn-inner {
    text-align: left !important;
    padding-left: 20px !important;     /* 为图标留空间 */
    padding-right: 8px !important;
    white-space: nowrap !important;
}

/* === Font Awesome 按钮基础样式 === */

.fa-btn {
    font-family: 'FontAwesome' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === 设置图标内容：使用 ::before === */

.fa-btn {
    font-family: 'FontAwesome' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    width: 1em;
    text-align: center;
}

.x-menu-item .fa-btn::before {
    display: inline-block;
}

.fa-btn::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    font-size: 14px !important;
    color: #333; /* 可选：设置图标颜色 */
    margin-right: 2px;
}

/* === 具体图标定义 === */

.fa-btn.fa-question::before {
    content: '\f059'; 
}

.fa-btn.fa-cog::before {
    content: '\f013'; 
}

.fa-btn.fa-plus::before {
    content: '\f067'; 
}

.fa-btn.fa-minus::before {
    content: '\f068'; 
}

.fa-btn.fa-book::before {
    content: '\f02d'; 
}

.fa-btn.fa-line-chart::before {
    content: '\f201'; 
}

.fa-btn.fa-bar-chart::before {
    content: '\f080'; 
}

.fa-btn.fa-save-svg::before {
    content: '\f1c9'; 
}

.fa-btn.fa-select-region::before {
    content: '\f0b2'; 
}

.fa-btn.fa-folder-open::before {
    content: '\f07c'; 
}

.fa-btn.fa-plus-square-o::before {
    content: '\f196'; 
}

.fa-btn.fa-minus-square-o::before {
    content: '\f146'; 
}

.fa-btn.fa-sticky-note-o::before {
    content: '\f249'; 
}

.fa-btn.fa-graduation-cap::before {
    content: '\f19d'; 
}

.fa-btn.fa-share-alt::before {
    content: '\f1e0'; 
}

.fa-btn.fa-bolt::before {
    content: '\f0e7'; 
}

.fa-btn.fa-list-ul::before {
    content: '\f0ca'; 
}

.fa-btn.fa-th-list::before {
    content: '\f00b'; 
}

.fa-btn.fa-play-circle-o::before {
    content: '\f01d'; 
}

.fa-btn.fa-pause-circle-o::before {
    content: '\f28b'; 
}

.fa-btn.fa-circle-o::before {
    content: '\f10c'; 
}

.fa-btn.fa-arrows-h::before {
    content: '\f07e'; 
}

.fa-btn.fa-sitemap::before {
    content: '\f0e8'; 
}

.fa-btn.fa-object-group::before {
    content: '\f247'; 
}

/* 可选：悬停时颜色变化 */
.fa-btn:hover::before {
    color: #007acc;
}

/* 强制隐藏 iconEl */
.menu-item-no-icon-gap .x-menu-item-icon,
.menu-item-no-icon-gap > .x-menu-item-link > img.x-menu-item-icon {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
}

/* 确保文本不被推后 */
.menu-item-no-icon-gap .x-menu-item-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* 强制菜单项无左 padding/margin */
.menu-item-no-icon-gap {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 如果父容器有 flex 布局，重置对齐 */
.menu-item-no-icon-gap .x-menu-item-link {
    display: flex;
    align-items: center;
}

.text-primary { color: #007bff; } /* 蓝色 */
.text-success { color: #28a745; } /* 绿色 */
.text-warning { color: #ffc107; } /* 黄色 */
.text-info { color: #17a2b8; } /* 蓝绿色 */
.text-danger { color: #dc3545; } /* 红色 */
.text-secondary { color: #6c757d; } /* 灰色 */
.text-muted { color: #6c757d; } /* 淡灰色 */

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}

.badge-success {
    color: #fff;
    background-color: #28a745; /* 绿色 */
}

.badge-warning {
    color: #212529;
    background-color: #ffc107; /* 黄色 */
}

.badge-danger {
    color: #fff;
    background-color: #dc3545; /* 红色 */
}

.fa-button {
    font-family: "FontAwesome", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.x-form-item td {
    vertical-align: middle !important;
}
.x-form-item-label {
    line-height: 18px !important;
    display: inline-block;
}