//UI Main
$logoimg:"logo.png";
$spriteimg:"img-sprite.png";
$template:"mycustomtemplate";
$customimage:"custom-gui.png"; 
$layout:"layout1"; 

//Prochart
prochart{
 .#{$layout}.#{$template}
{  
	
	&.htmlchart{
	  background-color:#000000; 
	} 
	

    .fullpage-bg{ 
	  background-color:#000000;
	}

	
	//Sprite images
	   .main-sprite-image{
		   background-image: url($spriteimg) !important; 
	    }

		// icon button
		.icon-button-caption,
		.icon-button { 
		   background-image:none !important;
		   position: relative;
		   overflow: hidden;
		   span{ 
		    background-image: url($spriteimg)  !important; 
		    			 
		   }
		}
 
         
        .icon-item{ 
		   background-image:none !important;
		   position: relative;
		   overflow: hidden;
		   span{ 
		     background-image: url($spriteimg)  !important; 
		  
		   }
		} 



	//Main 
	   .adv-svgchart-inner
	  {
		border-color: #222222;
		background-color: #2D2D2D;
		.adv-svgchart-zone 
		{
		  .adv-svgchart-zone-left{
					  }
		  .adv-svgchart-zone-right
		  {
		   
		  }
		}
	  }
	
   			
		
	 //Button
		button{
			background-color:  #333333;
			background-image: url($spriteimg);
			&:hover
			{ 
			   background-color: #00498F;
			}
			&.button-selected
			{
			  background-color: #000000;
			}
		
		}

		.chart-sprite{ 
			background-image: url($spriteimg) !important;
			background-repeat: no-repeat;
		}

		button{
			background-color: #000000;
			background-image: url($spriteimg) !important;
			background-repeat: no-repeat;
			&:hover
			{ 
			   background-color: #000000;
			}
			&.button-selected
			{
			  background-color: #000000;
			}
           &.disabled:hover,
		   &.disabled{ 
		      background-color: #999999;
		   }
		   		   
		}


	//Header
	.chart-header{
		 background-color:#000000;
		 border-bottom:1px solid #222222;
		//Symbol in header
 		#search-symbolics{ 
		// display: block;
		// float: left;
		// width:16px;
		// height:20px;
		//  margin-top:10px;
		//  margin-right:4px;
		  background-image: url("img-sprite.png") !important; 
		//  background-position: -22px -4736px;

		}
		#search-symbolics-subpoint{ 
		// display: block;
		// float: left;
	     border-bottom: 10px solid rgba(0, 0, 0, 0);
		 border-left: 7px solid #4F96FF;
		 border-top: 10px solid rgba(0, 0, 0, 0);
		 //margin-top:10px;
		}

		#symbol{
			color:  #9CCDFC;
			 text-shadow:none;
		}  
		#timeframe {
			color:  #4F96FF;
		}
		#spanLastUpdate {
			color:  #9CCDFC ;
			font-weight:bold;
		}
		#communic {
			background-color:rgba(0, 0, 0, 0);
			background-image: url("img-sprite.png") !important; 
			 .ComOff {
					}
			 .ComOn {
					}
		}
		//Search 
		.chart-header-search{
             
		   .chart-header-search-input {  
		   	 
			 //box-shadow: 5px 5px 5px #888888;
		      .chart-header-search-input-text{ 
			     color: #9CCDFC;
				 //font-size: 26px;
				 //font-weight: bold;
			 	 //line-height: 36px;
				 //height:36px;
				 //padding-left:5px;
				 //padding-right:5px;
				 border:#000000 1px solid;
				 //transition: width 0.3s;
				 //-webkit-transition: width 0.3s;
				 //-moz-transition: width 0.3s;
				 //min-width:80px;
				// width:80px;
				 background-color:#2D2D2D;
 
				 &.search-open{ 
				    //width:450px;
					 
				 }

				 &:-webkit-input-placeholder,
				 &:-moz-placeholder,
				 &:-moz-placeholder,
				 &:-ms-input-placeholder{
				  color: #333333;
				 }

			  } 
		   }


		   .chart-search-preload { 
		    //position: absolute;
			//width:20px;
			//height:20px;
			//top:12px;
			//left:435px;
		   }

		   .chart-header-search-output { 
		     //position: absolute;
		     //top:40px;
		     //left:0px;
			 background-color:#2D2D2D;
			// min-height:120px;
			 border:#333333 1px solid;
			 //z-index:500;
			// width:450px;
			// padding:5px;
			// padding-bottom:10px;
			 box-shadow: 5px 5px 5px #000000;
			// transition: height 0.3s;
			// -webkit-transition: height 0.3s;
			//  -moz-transition: height 0.3s;
			 ul.search-output-list {  
			   li { 
			       //cursor: pointer;
				   //padding: 0px;
				   //margin:0px;
				   //overflow: hidden;
				   //font-size:12px;
				   //height:22px;
				   &.search-not-found { 
				      color:#ffffff;
				   }
				   border-bottom:1px dotted #000000;
						a{
						 color: #ffffff !important;
						 //float:left;  
						 //display:block;
						// margin-left: 10px;
						 //text-decoration:none;
						 //width:380px;
						 //overflow: hidden;
						  span{
							   color: #bbbbbb;
							// line-height: 22px;
							// padding-right:20px;
						  }
						  &:hover span  
							{
							  color: #9CCDFC;
							//  text-decoration:none;
							}
					 
						}
						
						 
					   
						button{
						  background-color:#2D2D2D;
						  //height:22px;
						  //width:30px;
						 } 
			   }
			 }
		   }

		   .search-main-properties-tabs{ 
		      .search-main-properties { 
			     //display: none;
                 //max-height:450px;
			     //overflow-y: auto;
			  &.active {  
			      //display: block;
			    }   
			  }
		   }

		   .search-properties-tabs-labels { 
		     //height:24px;
			 //line-height:24px;
			background-color:#00498F;//#dddddd;
			 //overflow: hidden;
			 //margin-bottom:5px;
			 //position: relative;
		     a.search-properties-tabs-label{ 
			     //font-size:12px;
				 color: #dddddd;
				 //text-decoration:none;
				 //line-height:24px;
				 //height:24px;
				 //padding: 0px 10px;
				 //display: block;
				 //float:left;
			     &.active {  
			        color: #ffffff;
					font-weight: bold;
					background-color: #2D2D2D;
					 
			     }     
			 } 
			
		   }

		   .search-properties-filters{ 
		       //background-color:#F7F7F7;
			   //height:18px;
			   //line-height:18px;
			   //padding:2px;
			   border-bottom:1px solid #000000;
			   //margin:4px 0px;
		       ul.search-properties-filters-list{ 
			     
			     li.search-properties-filter { 
				  //float: left;
				  //margin-right:10px;
				  //position: relative;
				  span{ 
				   //font-size:12px;
				   color:#777777;
				    //display: block;
					//float: left;
				    }
				  > a{  
				       color:#9CCDFC;
					   //font-size:12px;
					   //display: block;
					   //float: left;
					   //margin:0px 4px;
					   //text-decoration:none;
					   //font-weight: bold;
				    } 
                    .filter-up-range 
					{
						border-right: 7px solid rgba(0, 0, 0, 0);
						border-bottom: 7px solid #000000;
						border-left: 7px solid rgba(0, 0, 0, 0);
						//display: none;
						//position: absolute;
						//left: 5px;
						//bottom: -4px;
						//z-index: 99;
					} 
					
					.filter-down-point{ 
					    border-right: 3px solid rgba(0, 0, 0, 0);
						border-top: 3px solid #9CCDFC;
						border-left: 3px solid rgba(0, 0, 0, 0);
						//display: block;
						//position: absolute;
						//left: 0px;
						//top:7px;
						//z-index: 99;
					
					}
					  
					 ul.search-properties-filter-values{ 
						//position: absolute;
						//top:20px;
						//left:20px;
						background-color:#000000;
						border:1px solid #000000;
						//z-index:200;
						//max-height:259px;
						//width:100px;
						//overflow-x:hidden;
						//overflow-y:auto;
						//display: block;
						//padding:5px;
						box-shadow: 5px 5px 5px #000000;
						li{ 
							 //padding:2px 5px; 
							 a{ 
								//font-size:12px;
								color:#dddddd;
								//text-decoration:none;
								//display: block;
								//width:80px;
								//overflow: hidden;
								//white-space: nowrap;
								
							 }
							 &:hover{
							   background-color:#2d2d2d;
							 }
 

						} 
			    
			   
					  }
				 }

			   }
			 
		   }


		}
	}

	//Menu 
	.chart-menu{
	  background-color: #111111;
	  >ul{ 
		> li{
			color: #bbbbbb;
			
			&:hover { 
					 background-color: #00498F;
					 color: #FFFFFF;
					 //Sub menu in hover  
					 >ul
					 {
							 background-color:  #333333;
							 >li{ 
									color:  #bbbbbb;
									
									&:hover{ 
									  background-color: #00498F;
									  color:#ffffff;
									  }
									&.favorites-style
									{
						
									  div
									  {
																  
										  &.kII1
										  {
											background-color: #333333;
											border-right: 1px dotted #222222;
											button
											{
											   background-color: rgba(0, 0, 0, 0);
											}
										   }
										  &.KII2
										  {
										 
										   button
										   {
											 background-color: rgba(0, 0, 0, 0);
											
										   }
										   span
										   {
										  
										   }
										  } 
									   }
									}
								 }
						   
					  }
					}
					//Sub menu hide
					 >ul{
							border: 1px solid #222222;
							box-shadow: 5px 5px 5px #000000;
							
							
						 }
			&.localization-items
			{
			  
			   >ul{
				  
				   >li{ 
									 
					} 
				}              
			
			}         
		   }
		   #chart-type
		   {
			.favorites-style
			{
			
			}
		   }
	   }
	  .chart-menu-icons
	  { 
		button
		{
		
		   background-color: rgba(0, 0, 0, 0);
		   
		}
	  }  
	}
	
	//Toolbar
	ul.toolbar
	{
		background-color: #222222;
		li
		{
		  float: left;
		  span.label
		  {
			color: #777777;
			
		  }
		  div.tooolbar_inner 
		  {
		  
		  }
		}
	}
	
	//Toolbox
	ul.toolbox{
	  li 
	  {
	   float:left;
	   span.label
		  {
			color: #777777;
			
		  }
		  &.sub 
		  {
			position: relative;
			.sub-right-range 
			{
				border-bottom: 7px solid rgba(0, 0, 0, 0);
				border-right: 7px solid #111111;
				border-top: 7px solid rgba(0, 0, 0, 0);
				
			}
			.sub-point 
			{
				border-right: 4px solid  #9CCDFC;
				border-top: 4px solid rgba(0, 0, 0, 0);
				
			}
			&:hover
			{
			  >ul 
			  {
				background-color: #222222;
				border: 1px solid #111111;
				
			  }
			}
			  >ul
			{
			  
				>li 
				{
				  
				  &:hover
				   {
					  >button 
					  {
					   background-color: #00498F;
					   color:#ffffff;
					  }
				   }
					   >button
					   {
						background-color: rgba(0, 0, 0, 0);
						color:#bbbbbb;
					  }
				}
			}
		  }
	   }
	 }
	








	//Chart 

	div.AdvChartBox{
	 background:none;
	}

	.AdvPanel 
	{ 
	  background-color:#2D2D2D;
	  .AdvPricePanelSSS
		{
			//background-image:url($logoimg) ;
			background-position: 5% 90%;
			background-repeat:no-repeat;
		 
		}


	  .AdvPanelTitle{
		  .AdvStudyLbl{
			color:#6666F6;
		  }
		  .AdvStudyValue{
			color:#F6F6F6;
		  }

	  }
	   svg.AdvPriceBackground
	  {
		background-color: #2C2C2C;
	  }
	  svg.AdvChartCanvas
	  {
		fill: #2D2D2D;
		background-color:#2D2D2D;
		line.ADVChartGridLine.Horizontal
		{
		  fill: none;
		  stroke: #222222;
		}
		line.ADVChartGridLine.Vertical
		{
		  fill: none;
		  stroke: #222222;
		}
		path.ADVRTLine
		{
		  //stroke-dasharray: 2, 5;
		  //stroke-linecap: round;
		  //stroke-width: 1;
		}
		rect.ADVDateAxis{
		  fill: #2D2D2D;
		}
		text.ADVDateAxisLabels{
		fill:#4F96FF;
		}

	  }
	  .AdvChartDrawing 
	  { 
	   fill: #2D2D2D;
	  }
	  text.ADVPriceAxisLabels
		   {
			 fill:#4F96FF;
			}

	  .AdvChartVAxis{
		   background-color:#2D2D2D;
		   rect.ADVPriceAxis
		   {
			fill: #2D2D2D;
			text.ADVPriceAxisLabels
			{
			 fill:#4F96FF;
			}
		   }
	  }
	  svg.AdvPriceAnnotation
	  {
	  
	  }
	   //Crosshair
	   line.ADVHCrosshairLine,
	   line.ADVVCrosshairLine
		{
			stroke: #ffffff;
			stroke-width:1px;
			stroke-dasharray: 1,10;
		}


	}

	//Line : chart types 
	.AdvPanel{
	   
	   
	   //Candle body Down
		.indicator.price.cs.down,
		rect.ADVCandleBodyDown {
			fill: #FF0000;
			stroke: #EA0000;
		}

		//Candle body Up
		.indicator.price.cs.up,
		rect.ADVCandleBodyUp {
			fill:  #00FF00;
			stroke: #00CF00;
		}


		line.ADVCandleShadowDown {
			stroke: #EA0000;
			fill: #EA0000;
		}

		line.ADVCandleShadowUp {
			fill:  #00CF00;
			stroke: #00CF00;
		}


		rect.ADVCandleBodyUpHollow {
			stroke: #00CF00;
			fill: #333333;
		}


		polyline.ADVOhlcDown {
			stroke: #EA0000;
		}

		polyline.ADVOhlcUp {
			stroke: #00CF00;
		}


		
		line.ADVLine {
			fill: #8cd1ff;
			stroke: #8cd1ff;
		 }


		rect.ADVCandleBodyFlat {
			fill: #DDDDDD;
			stroke: #DDDDDD;
		}

		polygon.ADVArea
		{
			fill: #000000; 
			stroke: #8888FF;
			stroke-width: 1px;
			fill-opacity: 0.4;
			stroke-opacity: 0.8;
		}
 
		circle.AdvDrawingHandle{
			fill: #000000;
			stroke: #FF0000;
		}


	}


	//Zoom
	.adv-svgchart-zoom 
	 {
		
		&.zoom-on-bottom-page{ 
		  background-color:#444444;
		}


		#svgZoomChart 
		{
		  background-color:  #444444;
		  border-color:  #444444;
			
			.AdvStudy
			{
				.AdvBarGroup
				{
				  line.ADVZoomLine 
				  {
				   stroke:  #A5B9D1;
				   fill: none;
				  }
				  polygon.ADVZoomAreaStroke{
					fill:  #36414E;
					stroke: #36414E
				  }
				}
			}
		
		rect.ADVZoomOutOfRange
		{
			fill: #333333;
			fill-opacity: 0.6;
			stroke: #444444;
			
		}    
		}

		//Zoom rect
		.zoom-chart-container{
		  position: relative;
		  width:820px;
		  margin-left:10px;
		
			//rect
			.zoom-rect-left,.zoom-rect-right
			 {
			   position: absolute;
			   height:30px;
			   top:0px;
			   border:1px solid #444444;
			   opacity:0.6;
			   background-color:#333333;
			 }
			  	  	  	  	  		  .zoom-rect-left
			  {
			   left:0px;
			   //margin-left:10px; 
			   //margin-right:0px;
			  }
			  	  	  	  	  		  .zoom-rect-right
			  {
			   //margin:10px;
			   //margin-right:10px;
			   right:0px;
			  }

		  }



		//Slider 
		.slider-zoom
		{
		 
		  .ui-rangeSlider {
			 
			 .ui-rangeSlider-container{
				background: #444444;
				border-top-color:  #333333;
				border-bottom-color:  #222222;
			   -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(34,34, 34,0.5);
			   -moz-box-shadow: inset 0px 4px 6px -2px RGBA(34,34,34,0.5);
				box-shadow: inset 0px 4px 6px -2px RGBA(34, 34,34,0.5);
  
			}


			.ui-rangeSlider-arrow {
				background-color: #222222; 
				border-top-color:   #333333;
				border-bottom-color:  #000000;
				
			}
			.ui-rangeSlider-leftArrow {
				border-left-color:  #222222;
				.ui-rangeSlider-arrow-inner 
				{
				 border-right-color: #000000;
				 &:hover{
					border-right-color:#8cd1ff;
				  }
				 }
			
			}
			.ui-rangeSlider-rightArrow {
				border-right-color:   #222222;
				.ui-rangeSlider-arrow-inner 
				{
				 border-left-color: #000000 ;
				 &:hover{
					border-left-color:#8cd1ff;
				  }
				 }
			}

			.ui-rangeSlider-label {
				background-color:#8cd1ff;
				box-shadow: 0 1px 0 #51B9FF;
				color: #20262F;
			}

			.ui-rangeSlider-label-inner {
				border-top-color:   #8cd1ff;
 
			}

			.ui-rangeSlider-bar {
				background-color:   #8cd1ff;
				border-color:  #51B9FF;
			}

		  }
		}
		//Date range
		.zoom-date-range{
		 
		   #date-end,
		   #date-start
		   {
			color: #bbbbbb;
			
		   }
		}
	}

	//Zoom tool 
	#zoom-buttons {
	 
	  &:hover 
		 {
			  background-color: rgba(238,238,238,0.1);
			  opacity:0.6;
			  filter:alpha(opacity=60);
			   border: 1px solid #f0f0f0; 
		 } 
	}

 } 
}   

//#region Panels *************************************
prochart{
 .#{$layout}.#{$template}
	{  
		

	//Panels ***
	.chart-pane-price { 
	 // position: relative;
	//  overflow: hidden;
	}


	.chart-pane-signal {
	  //background-color: Aqua;

	  &.pane-signal { 
	  
	  }
	  .chart-pane-alert{
	     //position: absolute;
		 //pointer-events:none;
		 //z-index:999;
		 //transition: background-color 0.4s ease;
		 //transition: border 0.4s ease;
		 &.flash{ 
		   background-color: rgba(255,205,59, 0.1);
		 }
	  }
	} 

	



    .chart-controlpanel{ 
	 //position: absolute;
	// z-index:30;
	// pointer-events:none ;
	   .controlpanel-buttons {
	     // vertical-align: middle;
		  font-zize:0px;
		 // text-align: right;

	      a { 
		    //display: inline-block;
			//cursor:pointer;
			//pointer-events:auto ;
   		    &.controlpanel-button-selected{ 
				    span{ 
				     opacity: 1;
				    }
				    
		    }
			&.controlpanel-up{
			//width:11px;
			//height:8px;
			}
			&.controlpanel-down{
			//width:11px;
			//height:8px;
			}
			&.controlpanel-window{
			//width:10px;
			//height:10px;
			}
			span{ 
				 // display: block;
				  background-image: url("img-sprite.png");
				   opacity: 0.3;
			  &.controlpanel-up-icon{
				 // margin-top:0px;
				 // margin-left:1px;
			  }
			  &.controlpanel-down-icon{
				 // margin-top:0px;
				 // margin-left:1px;
			  }
			  &.controlpanel-window-icon{
			 // margin-top:0px;
			  //margin-left:1px;
			  }

			}
			&:hover{ 
			  //background-color:rgba(153,153,153,0.5);
			 // background-color:rgba(240,240,240,0.9);
			   span { 
			   opacity: 1;
			  }
			} 
		}
		 &:after {
		   clear: both;
		 }
	   }

	} 

	.chart-pane-legend-signal,
	.chart-pane-legend-study,
	.chart-pane-legend-plugin,
	.chart-pane-legend-price{ 
	   //font-size:12px;
	   //line-height:20px;
	  // z-index:70;
	  color: #dddddd;
	   .legend-title{ 
	     color: #dddddd;
	   }
	   .legend-description{  
	    //font-weight: bold;
		//font-size:16px;
		color: #9CCDFC;
		&.legend-compare-description { 
		  color: #dddddd;
		  //font-size:12px;
		  //font-weight: bold;
		}
	   }

	   .legend-study-params{ 
	    // font-style: italic;
	   }

	   .legend-study-values{ 
	     // display: inline-block;
		 // vertical-align: middle;
	   }
	   .legend-value{ 
	   // min-width:42px;
		//display: inline-block;
		//font-weight: bold;
	   }

	   
	   .legend-buttons{
	     // vertical-align: middle;
		 // display: inline-block;
	      a { 
		   // display:  inline-block;
			//cursor:pointer;
			//pointer-events:auto ;
			&.legend-button-visible{
				//width:18px;
				//height:10px; 
				&.legend-visible-off{ 
				   .legend-visible-icon{ 
				     //opacity: 1;
				    }
				    
				  }
				}
			&.legend-button-properties{width:13px;height:10px;}
			&.legend-button-close{width:12px;height:10px;}
			span{ 
			  //display: block;
			  background-image: url("img-sprite.png");
			  opacity: 0.3;
			}
			&:hover{ 
			  //background-color:rgba(240,240,240,0.9);
			   span { 
			   opacity: 1;
			  }
			} 
		}
		 &:after {
		   clear: both;
		 }
	   }
	}
	
	.chart-pane-legend-study { 
	  .legend-study { 
	     display: inline-table;
	  }
	}




	.chart-pane-study{ 
	  position: relative;
	  overflow: hidden;
	}

	

	.chart-pane-main{ 
	  position: absolute;
	  overflow: hidden;
	}

	.chart-pane-legend{ 
    	position: absolute;
		pointer-events:none;
	}

	.chart-pane-splitter{ 
		position: relative;
	
		.chart-pane-splitter-inner { 
			//position: absolute;
			//height:6px;
			//top: -3px;
			//z-index:30;
			//transition: all ease-in 0.1s;
		} 

		&.draggable-split-h {
		 .chart-pane-splitter-inner{ 
			background: rgba(255,153,255,0.3);  
		 } 
	 }

	}

	

	.chartpane{ 
	 border-bottom:2px solid #000000;
	 //position: relative;
	}


	.chart-date-axis { 
	  // position: absolute;
	   border-top:0px solid #000000;
	   background-color:#333333;
	   //overflow: hidden;
	}

	.chart-price-zoom { 
	  //position: absolute;
	  // pointer-events:none;
	  //z-index:40;
	  button{
	     //pointer-events:all;
	  }
	}

	.chart-price-axis { 
	  //position: absolute;
	  border-left:2px solid #000000;
	  //overflow: hidden;
	}



	



	}
}

//#endregion Panels *********************************

//Chart
prochart{ 
   .#{$layout}.#{$template} { 
      .AdvPanel { 
	    circle.AdvDrawingHandle { 
		 fill: #4F96FF;
         stroke:  #6AB5FF;
		}
	  }

	  rect.AdvChartTransformBK
	{
		 fill:#222222;
		 fill-opacity:0.3;
	}

   }
}
 
 
 //Dialogs
 .chart-ui-dialog.#{$template}{
	 
	  color: #333333;
	  background-color:#444444;
	  border:2px solid #111111;
	  box-shadow:2px 2px 5px #000000;
	  //Common
	  ul {
	    
	  }	

	  //Buttons
	  button.eye-orange,
	  button.favorite {
			background-color:rgba(0, 0, 0, 0);
			background-image: url($spriteimg) !important; 
			opacity: 0.7;
			&.star-button{
			 opacity: 1;
			}
			&:hover
			{ 
			   opacity: 1;
			}
	   }
    
	//Forms zize
	#dlg-indicators{
	   } 
	#dlg-indicator { 
	  
    }


//Content
  .adv-dialog-content
   {
      color:#eeeeee;

	  a {
		color:  #62AEFB;
		 
	  }
	
	  
	  //Systems
	  .dialog-systems-save,
	   .dialog-systems{
			 background-color: #444444;
			 
			
			div#dialog-main-page{
			 padding-left: 15px;
			 .dialog-main-page-title{
				 background-color: #444444;
				 border:1px dotted #111111;
			    >ul{
				   margin:2px;
				   >li.title_level {
					 float: left;
					 margin-left: 10px;
					 &.active  
					 {
						> a{
							color: #fefefe;
						
						}
					 }
					 &:hover
					 {
					   >a span {color:#C6E1FD;} 
					 }

					 >a{ 
							 
					   }
					 > span{
						   color: #C6E1FD;
							 
						}
					} 
				 }
			  }
			 .dialog_level{
	
				.main-properties{
				  ul.favorite-systems-list{
					  
				   }
				  ul.favorite-systems-list,
				  ul.systems-list{
					li.li-system{
					   //cursor: pointer;
					   border-top:1px  dotted #000000;
					   &:hover a span
						{
						  color: #C6E1FD;
						}
					   a{
						 color: #dddddd !important;
						 
						 span{
							// color: #2d71ce;
							  
						  }
					   }
					   span{ 
					      
					   }
					   button.favorite
					   {
					 
					  }
					   
					}
				  }
				}
				.property-page-button {
					  
					 background-color: #F7F7F7;
					 
				 }
			 } 
		  }
	   }

	   .dialog-systems-save{
	     border:none;
		    ul.systems-list
			{
					li.li-system
					{
					   cursor: auto !important;
					   border-top:1px  dotted #000000;
					   button.favorite
					   {
					     
					   }
					}
			}
	   }

 
	  
	  //Indicators
	   .dialog-indicators-browser{
		 
		 >ul >li{
			 
		 }
	   }
	   .dialog-indicators{
			border-left: 1px dotted #111111;
			 
			div#dialog-main-page{
			 
			 .dialog-main-page-title{
				 background-color: #444444;
				 border:1px dotted #111111;
				 >ul{
				  
				   >li.title_level {
					 
					 &.active  
					 {
						> a{
							color: #fefefe;
							 
						}
					 }
					 &:hover
					 {
					   >a span {color:#C6E1FD;} 
					 }

					 >a{ 
							 
					   }
					 > span{
						   color: #C6E1FD;
							 
						}
					} 
				 }
			  }
			 .dialog_level{
				/*.properties-tabs{
					font-size: 13px;
					font-weight: bold;
					margin: 12px 0 5px;
					a.properties-tabs-label{
						margin: 0 10px 10px;
						padding: 0;
						color: #2D71CE;
						border-bottom: 1px dashed #2D71CE;
						margin: 0 10px 10px;
						&.active{
							border-bottom: medium none;
							color: #333333;
							cursor: default;
						}
					}
				}*/
				.main-properties{
				  ul.favorite-indicators-list{
					  
				   }
				  ul.favorite-indicators-list,
				  ul.indicators-list{
					li.li-indicator{
					   
					   &:hover a span
					    {
					      color: #C6E1FD;
   					    }
					   a{
						 color: #dddddd !important;
						 
						 span{
						    // color: #2d71ce;
							 
						  }
					   }
					   button.property-favorite{ }
					   button.add-favorite{ }
					}
				  }
				}
				.property-page-button {
					 background-color: #F7F7F7;
					 border-radius: 3px 3px 3px 3px;
					 border: 1px solid #DDDDDD;
					   
				 }
			 } 
		  }
	   }

      //Properties page
	   .properties-tabs
	   {
			 
			.properties-tabs-label
	 		{
			   //border-bottom: 1px dashed #9CCDFC;
				 
				&.active
				{
				    
					color: #9CCDFC;
					 
				}
			 }
	    }
      
	  //
	  .common-property-page td{
	   
	  }

	  //Main Properties Block
	   .main-properties
	   {
	     table.property-page {
		      
			 td{ 
			    
				input[type=checkbox]{
				//background-color:#606060;
				//border:1px solid #000;
				//color:#FF0000
				}

			   .property-page-button {
					 background-color:  #4FA7FF;
					 border: 1px solid  #6AB5FF;
					 &.active
					 {
					    background-color:  #1C8DFF; 
						border: 1px solid  #6AB5FF;
						color: #ffffff;
					 } 
				 }
               .button-font-italic ,
			   .button-font-bold {
					display: block;
					height: 16px;
					width: 16px;
					margin: auto;
					position: relative;
					top: 3px;
				} 

				.dialog-text-input {
			   	     color: #dddddd;
					 background-color: #666666;
                     border: 1px solid #B2B5B8;
				 }

				 .text-input-long 
				 {
					 border: 1px solid #B2B5B8;
					
				 }

				 .dialog-spinner {
					 background-color: #666666;
                     border: 1px solid #B2B5B8;
					
				 }

				  .datespinner {
					
				 }
 
 
				 select.dialog-select {
					 background-color: #666666;
                     border: 1px solid #B2B5B8;
					 color:#dddddd;

					
					
				 }
 
                  .lineselect {
					
				 } 
				 
				 .param-input,    
				 .param-spinner {
					
					 border:none;
					 color: #dddddd; 
					 background-color: #666666; 
				   }
   
				   .param-input {
					  border: 1px solid #B2B5B8; 
					 
				   } 

			   }
		   }
		}
     
	  //Indicators buttons
	  #indicator-buttons {
		
        }
		 
      
	  //Trade 
	  .common-trade-details 
	   {
		

		table.common-property-page 
		{
			width: 100%; 
			td
			{
			    #order-id,
				#order-status,
				#order-symbol,
				#order-type 
				{
					color: #000000;
					background-color: #f7f7f7;   
					
				}

				#order-id 
				{
					color: #b2b5b8;
					
				}

				#order-type.orderbuy {
					color: #008000;
				}

				#order-type.ordersell {
					color: #dc143c;
				}

			}
		}
    	}
	}
}

//Color in Dialog //Spectrum
.chart-ui-dialog.#{$template}{

    .main-sprite-image{
		  background-image: url("img-sprite.png") !important; 
	 }


	.sp-replacer {
		border: solid 2px #333333;
		background: #fff;
		color: #333;


		.sp-range-box 
		{
		background-color: #333333;
		border-left: 1px solid #fff;  
		border-top: 1px solid #fff;
		border-bottom-right:2px;  

		    .sp-range 
			{
			border-left: 3px solid transparent;
			border-bottom: 3px solid #aaaaaa;
			border-right: 3px solid transparent;
		    }

  	    }

	  &:hover,
	  &.sp-active {
		background-color:#666666;
		color: #333;
		.sp-range-box 
		{  
		border-left: 1px solid #666666;  
		border-top: 1px solid #666666;  
		 
		}
	}


	}
	
	.sp-replacer.sp-disabled {
		cursor:default;
		border-color: #555555;
		color: #555555;
		opacity: 0.1;
	}





}


//jQuery UI
.chart-ui-dialog.#{$template}
{
	.ui-dialog-titlebar
		  {
		   border:1px solid #111111;
		   background-color:#222222;
		   color:#dddddd;
		  }

		  .ui-widget-content{
		   background-color:#444444;
		  } 

	  .ui-widget input, 
	  .ui-widget select, 
	  .ui-widget textarea, 
	  .ui-widget button{
	    background-color:#333333;
		color:#eeeeee; 
	  }

	  span.ui-spinner{
	   background:#666666;
	  }

	 //Slider
	.slider-border {
		background: url($customimage) repeat top left; 
  	   background-position:-10px -39px; 
		 .ui-slider-handle {
				background: url($customimage) repeat top left; 
				background-position:-10px -10px; 
		 }
		 &.ui-slider-horizontal{
		  
		 }
	 }


    .slider-coloropaciry 
	 {
	    background: url($customimage) repeat top left; 
		border: 1px solid #222222;
		height:8px;
		&.ui-slider-horizontal{
		    
		 }
		 .ui-slider-handle {
			    background: url($customimage) repeat top left; 
				background-position:-10px -10px; 
				top:-5px;
		 }
		 .gradient 
				{
					 
				}
	} 

	/*Sprite Images*/
	.custom-gui{
	     background:url($customimage) top left no-repeat ; }
		 .button-font-italic{ width:16px; height:16px; background-position:-10px -186px; }
	     .button-font-bold{ width:16px; height:16px; background-position:-10px -212px; }
	  	 
    .ui-button { 
	     background:none;
	     background-color:#409FFF;
		 border:1px solid #6AB5FF;
		 color:#ffffff;
		 &:hover{
		    background-color:#1C8DFF;
		 }

		 &.ui-spinner-button{ 
		   background-color:#efefef;
		   border:1px solid #dddddd;
		 }
	}

	
	  .ui-dialog-buttonpane {
	    border-top-color:#222222;
	  }


}


//Main
 @mixin chart_preload_container
   {
    .chart-preload-container
		{
		 .chart-preload{
		    background:#000000;
		    color:#1C8DFF;
			opacity:0.2; 
			top:0px; 
			left:0px; 
			z-index:230; 
		  }
		}
    }

prochart{
 .#{$layout}.#{$template}
   {
   //Preload
     @include chart_preload_container
   }
} 

.chart-ui-dialog.#{$template}
{
	//Preload
		 @include  chart_preload_container
	  
}



