/**

 * Dark theme for Highcharts JS

 * @author Torstein Honsi

 */



// Load the fonts

Highcharts.createElement('link', {

	href: '//fonts.googleapis.com/css?family=Unica+One',

	rel: 'stylesheet',

	type: 'text/css'

}, null, document.getElementsByTagName('head')[0]);



Highcharts.theme = {

	colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",

		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],

	chart: {

		backgroundColor: {

			linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },

			stops: [

				[0, '#2a2a2b'],

				[1, '#3e3e40']

			]

		},

		style: {

			fontFamily: "'Unica One', sans-serif"

		},

		plotBorderColor: '#606063'

	},

	title: {

		style: {

			color: '#E0E0E3',

			textTransform: 'uppercase',

			fontSize: '20px'

		}

	},

	subtitle: {

		style: {

			color: '#E0E0E3',

			textTransform: 'uppercase'

		}

	},

	xAxis: {

		gridLineColor: '#707073',

		labels: {

			style: {

				color: '#E0E0E3'

			}

		},

		lineColor: '#707073',

		minorGridLineColor: '#505053',

		tickColor: '#707073',

		title: {

			style: {

				color: '#A0A0A3'



			}

		}

	},

	yAxis: {

		gridLineColor: '#707073',

		labels: {

			style: {

				color: '#E0E0E3'

			}

		},

		lineColor: '#707073',

		minorGridLineColor: '#505053',

		tickColor: '#707073',

		tickWidth: 1,

		title: {

			style: {

				color: '#A0A0A3'

			}

		}

	},

	tooltip: {

		backgroundColor: 'rgba(0, 0, 0, 0.85)',

		style: {

			color: '#F0F0F0'

		}

	},

	plotOptions: {

		series: {

			dataLabels: {

				color: '#B0B0B3'

			},

			marker: {

				lineColor: '#333'

			}

		},

		boxplot: {

			fillColor: '#505053'

		},

		candlestick: {

			lineColor: 'white'

		},

		errorbar: {

			color: 'white'

		}

	},

	legend: {

		itemStyle: {

			color: '#E0E0E3'

		},

		itemHoverStyle: {

			color: '#FFF'

		},

		itemHiddenStyle: {

			color: '#606063'

		}

	},

	credits: {

		style: {

			color: '#666'

		}

	},

	labels: {

		style: {

			color: '#707073'

		}

	},



	drilldown: {

		activeAxisLabelStyle: {

			color: '#F0F0F3'

		},

		activeDataLabelStyle: {

			color: '#F0F0F3'

		}

	},



	navigation: {

		buttonOptions: {

			symbolStroke: '#DDDDDD',

			theme: {

				fill: '#505053'

			}

		}

	},



	// scroll charts

	rangeSelector: {

		buttonTheme: {

			fill: '#505053',

			stroke: '#000000',

			style: {

				color: '#CCC'

			},

			states: {

				hover: {

					fill: '#707073',

					stroke: '#000000',

					style: {

						color: 'white'

					}

				},

				select: {

					fill: '#000003',

					stroke: '#000000',

					style: {

						color: 'white'

					}

				}

			}

		},

		inputBoxBorderColor: '#505053',

		inputStyle: {

			backgroundColor: '#333',

			color: 'silver'

		},

		labelStyle: {

			color: 'silver'

		}

	},



	navigator: {

		handles: {

			backgroundColor: '#666',

			borderColor: '#AAA'

		},

		outlineColor: '#CCC',

		maskFill: 'rgba(255,255,255,0.1)',

		series: {

			color: '#7798BF',

			lineColor: '#A6C7ED'

		},

		xAxis: {

			gridLineColor: '#505053'

		}

	},



	scrollbar: {

		barBackgroundColor: '#808083',

		barBorderColor: '#808083',

		buttonArrowColor: '#CCC',

		buttonBackgroundColor: '#606063',

		buttonBorderColor: '#606063',

		rifleColor: '#FFF',

		trackBackgroundColor: '#404043',

		trackBorderColor: '#404043'

	},



	// special colors for some of the

	legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',

	background2: '#505053',

	dataLabelsColor: '#B0B0B3',

	textColor: '#C0C0C0',

	contrastTextColor: '#F0F0F3',

	maskColor: 'rgba(255,255,255,0.3)'

};



// Apply the theme

Highcharts.setOptions(Highcharts.theme);

