HTML {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}
BODY {width: 100%; height: 100%; margin: 0; padding: 0;}

/* ***************************************************************************************************
PAGE AND CHART CONTAINERS
*/

#PageContainer {width: calc(100% - 2px); height: calc(100% - 2px); margin: 0; padding: 0; border: solid 1px #808080;}

#ChartContainerOuter {
	width: calc(100% - 10px); height: calc(100% - 50px); border: 0; padding: 0;
}

#ChartContainer {
	width: 100%; height: 100%;
}

BODY.NoToolbar #ChartContainerOuter {
	height: 100%;
}




/* ***************************************************************************************************
GENERAL TOOLBAR DEFINITIONS
*/

#Toolbar {
	background: #3AA5C9;
	padding: 10px 0 0 10px;
	height: 40px;
	overflow: hidden;
}

#Toolbar DIV {
	display: inline-block;
}

#Toolbar #Logo {float: right; padding: 0 10px 0 0;}
#Logo IMG {width: 100px; height: 24px;}

BODY.NoToolbar #Toolbar {
	display: none;
}

/* ***************************************************************************************************
COMBO BOXES WITHIN TOOLBAR
*/

.ToolbarCombo {
	background: #F7F7F7;
	border: solid 1px #404040;
}

#ChartBrokers {
	width: 30vw !important;
	max-width: 300px;
	display: none;
	height: 25px !important;
}

#ChartType {
	width: 15vw !important;
	max-width: 150px;
	height: 25px !important;
}

#ChartSymbol {
	width: 15vw !important;
	max-width: 150px;
	height: 25px !important;
}

#TickSpeed {
	width: 15vw !important;
	max-width: 150px;
	height: 25px !important;
}

#SecondsPeriod {
	width: 10vw;
	max-width: 75px !important;
	height: 25px !important;
}

#CandlePeriod {
	width: 10vw;
	max-width: 75px !important;
	height: 25px !important;
}
/* ***************************************************************************************************
RESIZE ELEMENTS - MOSTLY TOOLBAR COMBOS - ON SMALL RESOLUTIONS
*/

@media screen and (max-width: 750px) {
	.ToolbarCombo {
		font-size: 11px;
	}

	#ChartBrokers {
		width: 20vw !important;
		max-width: 200px;
		display: none;
		height: 25px !important;
	}

	#Logo {margin-top: 5px;}
	#Logo IMG {
		width: 75px;
		height: 18px;
	}

	#listBoxChartBrokers .jqx-listitem-element {
		font-size: 11px;
	}
}


/* ***************************************************************************************************
CSS VALUES FOR HTML5 CANVAS
*/

.jqx-chart-title-text {fill: #404040; color: #404040;}

#ThemeTarget_GridLines {color: #F0F0F0;}
 
#ThemeTarget_UpCandle {color: #0000C0;}
#ThemeTarget_DownCandle {color: #C00000;}

/* ***************************************************************************************************
THEME:Black  [OVERRIDE STANDARD COLOURS]
*/

BODY.ThemeBlack #PageContainer {background: black;}
BODY.ThemeBlack #Toolbar {background: #404040!important;}
BODY.ThemeBlack #ThemeTarget_GridLines {color: #404040;}
BODY.ThemeBlack .jqx-chart-title-text {fill: #F0F0F0; color: #F0F0F0;}
BODY.ThemeBlack .jqx-chart-label-text {fill: #F0F0F0; color: #F0F0F0;}
BODY.ThemeBlack .jqx-chart-axis-text {fill: #F0F0F0; color: #F0F0F0;}
BODY.ThemeBlack .jqx-chart-legend-text {fill: #F0F0F0; color: #F0F0F0;}


/* ***************************************************************************************************
 LOADING ANIMATION
*/

#loader {
  color: #3AA5C9;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease;
  animation: load6 1.7s infinite ease;
  position: fixed;
  z-index: 100;
  left: calc(50% - 36px);
  top: calc(50% - 86px);
}
@-webkit-keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}
@keyframes load6 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  5%,
  95% {
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
  10%,
  59% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
  }
  20% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
  }
  38% {
    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
  }
}