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






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

    .fullpage-bg{ 
	  background-color:#2D2D2D;
	}

	
	//Main 
	   .layout-left,
	   .layout-right,
	   .layout-main
	  {
		background-color: #2D2D2D;
		 
	  }
    
    //Button
	button{
		background-color:  #333333;
		background-image: url($spriteimg);
		&:hover
		{ 
			background-color: #00498F;
		}
		&.button-selected
		{
			background-color: #000000;
		}
		
	}

	.chart-date-axis{ 
	  background-color:#2D2D2D;
	}

	.legend-buttons a span {
	  background-image: url($spriteimg);
	  opacity:0.2;
	} 
	 
	 .legend-study-description{ 
	   color:#BDDDFD
	  }
	 .legend-description{ 
	   color:#2F94F9;
	 }
	 .legend-title{ 
	   color:#cccccc;
	 }
	 .legend-study-params{ 
	  color:#cccccc;
	 }
	 .legend-value{ 
	     color:#aaaaaa;
	 }

  }
}

// *********************************** MENU   ******************************************************

prochart{
 .#{$layout}.#{$template}
{  
	 
	.chart-menu{
	 li { 
	   a { 
	      color: #bbbbbb;
	   }
	 }
	  background-color: #111111;
	  >ul{ 
		> li{
			color: #bbbbbb;
			>a{ 
		    	color: #bbbbbb;
			}
			&:hover{ 
			 background-color: #00498F;
			 >a{ 
			    color:#ffffff;
			  }
			}
			>a.menu-selected{ 
			  background-color: #00498F;
   		      color:#ffffff;
			}
			>a:hover { 
					 background-color: #00498F;
					 color: #FFFFFF;
				}
			>ul{
				        background-color: #111111;
					    border: 1px solid #333333;
						box-shadow-cobackground-color: #000000;
						>li{ 
	
								color: #ffffff;
								&:hover{ 
									color: #FFFFFF;
									}
							    }
                             
			 
					  }
              > .mn-item-sub-group,     
              > .mn-item-group{ 
			       	    background-color: #2D2D2D;
	                    border-color: #111111;
						box-shadow: 5px 5px 5px #000000;
   					    >ul >li{ 
								color: #ffffff;
		   					    &:hover{ 
									background-color: #000000;
									}
			  }
       
            }
		   }
 
	   }



	  .mn-item-sub-group,     
       { 
		background-color: #F0F0F0;
		position:absolute;
		z-index: 99;
        border: 1px solid #333333;
		box-shadow: 5px 5px 5px #888888;
		display: none;
		left: 0;
		min-width: 100px;
		padding: 10px 0;
		position: absolute;
		top: 29px;
						   
			>ul >li{ 
				line-height: 26px;
				height:26px;
 				margin:0px 5px;
				padding:0 4px;
				white-space: nowrap;
				font-size: 11px;
				color: #333333;
				float:none;
				&:hover{ 
					background-color: #FFFFFF;
					}
                &.favorites-style
				{
					min-width:120px;
					overflow: hidden;
					padding:0px 0px;
					line-height:30px;

				}
				&.mn-item-image{ 
					height:92px;
					}
				}
		 }
 
	    
		 
 
 
	    a.mn-item-link:before{ 
		    background-image:url(#{$customimage}) !important;
		   
		}

      .chart-menu-icons
	  { 
	    button
		{
		   padding-left: 30px;
           background-color: rgba(0, 0, 0, 0);
		   float: left;

		}
	  }  
	   
	}
 
	 
	 //group possition 
	 .a-bottom {
	    .mn-array{ 
		   border-color: transparent  transparent    #333333  ;
			> div{ 
			 border-color: transparent  transparent #333333  ;
			}
		}
	 }

	 .a-left{
	    .mn-array{ 
		   border-color: transparent  transparent  transparent #333333 ;
			> div{ 
			 border-color: transparent  transparent   transparent #333333  ;
			} 
		}
	 }


	 .a-right {
	    .mn-array{ 
		  border-color: transparent #333333 transparent  transparent  ;
			> div{ 
			 border-color: transparent  #F7F7F7  transparent transparent   ;

			} 
		}
	 }


	  .a-top {
	    .mn-array{ 
		   border-color:  #333333 transparent  transparent   ;
		  
			> div{ 
			 border-color:    #333333  transparent  transparent  transparent ;
			} 
		}
	 }
	
	 




	.chart-menu{ 
	  .mn-item { 
	    &.hide-item{ 
		  display: none;
		} 
       &.hide-more-item{ 
		 display: none;
		 }
   	   }
	} 

	.chart-menu.dir-rtl {  
	      > ul >li{ 
		     float: right;
		     .mn-item-group {
			    right: 0px;
			    left:inherit;
			 } 
		   } 

		  .mn-more { 
		     .mn-more-items { 
			   right: inherit;
			   left:0px;
			   .tlb-array{ 
			    //left:5px;
			    &.a-border { 
		         left:4px;
	             }
	            } 
			 }
		  }
		    
		 }
    .chart-menu.dir-rtl  {
	    direction: rtl;

		.mm-item-group{
		  &.mm-item-favorites{ 
		    .mn-item-favorite{ 
			   margin-right:8px;
			   margin-left:0px;
			   span{ 
				  left: inherit;
				  right:0px;
			   }
			}
		  }
			.mn-item-link{ 
			  padding-left:0px;
			  width:100%;
			  span{ 
			      display: none;
				  pointer-events:none;
			   }
			}
		  &.mm-item-icons{ 
		   .mn-item-link{
		       padding-right:25px;
			   padding-left:0px;
		      span{ 
			      display: inherit;
				  top:4px;
				  left:inherit;
				  right:0px;
			   }
		    }
		  }
     
		} 
		} 
	
 }
}


// *********************************** HEADER     ******************************************************
prochart{
 .#{$layout}.#{$template}
{  
.chart-header{
		 background-color:#2D2D2D;
		 
		//Symbol in header
 		.search-symbolics{ 
			  background-image:  url($spriteimg) !important; 

		}
		.search-symbolics-subpoint{ 
		   border-bottom-color: rgba(0, 0, 0, 0);
		   border-left-color:  #4F96FF;
		   border-top-color:   rgba(0, 0, 0, 0);
		}

		.symbol-title{
			color:  #9CCDFC;
			 text-shadow:none;
		}  
		.header-timeframe {
			color:  #4F96FF;
		}
		.header-lastupdate {
			color:  #9CCDFC ;
			font-weight:bold;
		}
		.header-communic		  {
			background-color:rgba(0, 0, 0, 0);
			background-image: url($spriteimg) !important; 
			 
		}
		//Search 
		.chart-header-search{
		   .chart-header-search-input {  
		      .chart-header-search-input-text{ 
			     color: #9CCDFC;
				 border:#000000 1px solid;
				 background-color:#2D2D2D;
 
				 &.search-open{ 
				  					 
				 }

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

			  } 
		   }
		   
		   .chart-header-search-output { 
			 background-color:#2D2D2D;
			 border:#333333 1px solid;
			 box-shadow: 5px 5px 5px #000000;

			 ul.search-output-list {  
			   li { 
			       
				   &.search-not-found { 
				      color:#ffffff;
				   }
				   border-bottom:1px dotted #000000;
						a{
						 color: #ffffff !important;
						  span{
							   color: #bbbbbb;
						  }
						  &:hover span  
							{
							  color: #9CCDFC;
					      }
					 
						}
											 
					   
						button{
						  background-color:#2D2D2D;
						 } 
			   }
			 }
		   }


		   .search-properties-tabs-labels { 
			background-color:#00498F;//#dddddd;
			
		     a.search-properties-tabs-label{ 
				 color: #dddddd;
			     &.active {  
			        color: #ffffff;
					font-weight: bold;
					background-color: #2D2D2D;
					 
			     }     
			 } 
			
		   }

		   .search-properties-filters{ 
			   border-bottom:1px solid #000000;
		       ul.search-properties-filters-list{ 
			     
			     li.search-properties-filter { 
				
				  span{ 
				
				   color:#777777;
				   
				    }
				  > a{  
				       color:#9CCDFC;
					
				    } 
                    .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);
				
					} 
					
					.filter-down-point{ 
					    border-right-color: rgba(0, 0, 0, 0);
						border-top-color:  #9CCDFC;
						border-left-color:  rgba(0, 0, 0, 0);
					
					}
					  
					 ul.search-properties-filter-values{ 
						background-color:#000000;
						border:1px solid #000000;
						box-shadow: 5px 5px 5px #000000;
						li{ 
							 a{ 
								color:#dddddd;
							
							 }
							 &:hover{
							   background-color:#2d2d2d;
							 }
 

						} 
			    
			   
					  }
				 }

			   }
			 
		   }


		}
	}
	}
}



// *********************************** Toolbar     ******************************************************
prochart{
 .#{$layout}.#{$template}
 {
  ul.toolbar-adv { 
    background-color:#222222;
	 li span.toolbar-adv-space { 
	   background-color:#9CCDFC;
	 }
	 .tlb-item-group .tlb-button-groups{ 
	   background-color:#222222;
	 }

	 .a-right > .tlb-array > div{ 
	    border-right-color:#222222;
	 }

	 .sub-point{ 
	   border-right-color:#9CCDFC;
	 }

  }

 


  }
}



// Zoom Toolbox
prochart{
 .#{$layout}.#{$template}
 {
     #zoom-buttons { 
	  border-width:0px;
	}
  }
 } 

// *********************************** DATE RANGE ******************************************************
prochart{
 .#{$layout}.#{$template}
	 {
		 //Date range
		  .zoom-date-range{
			   .date-end,
			   .date-start
			   {
				color: #9CCDFC;
				font-size: 9px;
				font-weight: bold;
				padding: 2px;
				text-align: right;
			   }
			}
	}
}

// Change image sprite
prochart{
 .#{$layout}.#{$template}
 {
   .icon-button, .icon-item {
     span{ 
	   background-image:url(#{$customimage}) !important;
	 }
   }
 
 }
}

//Dialogs Change image sprite
.chart-ui-dialog.#{$template}{
  button.eye-orange,
  button.favorite { 
   background-image:url(#{$customimage}) !important;
  }
  .main-sprite-image{
	  background-image: url(#{$customimage}) !important; 
  }
}




