/* Wrapper */
#wrapper { width:100%; height:100%;	}

body { 

	overflow-y: scroll;
	overflow-x: hidden;
	
	/*background: #2a37a3;*/
	/*background: -webkit-linear-gradient(to bottom right, #2a37a3, #10143d) !important;*/
	
	
	/*background: #272e68 !important;*/
}

/* Header */
#header { position:fixed; top:0; left:209px; right:0; height:60px; z-index:6000; min-width:130px; 

/* background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);  FF3.6-15 */
/* background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 100%);  Chrome10-25,Safari5.1-6 */
/* background: linear-gradient(to bottom, #181f5e 0%, #090f41 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.75);
background:black;
/*background:#080e3d;*/
/*background:white;*/
/*border-bottom:1px solid rgba(255,255,255,.15);*/
/*border-bottom:1px solid rgba(0,0,0,.3); */ /* minwidth = 320 - logo width */ }


.menuarea { position:relative; height:60px; text-align:left; display:table; }

/* Side Bar */
#sidebar { position:fixed; top:94px; width:209px; background:rgba(0,0,0,.3); height:100%; z-index:5000;	}
#sidebar a { transition: border-color 0.2s ease, background-color 0.2s ease; }

/* Main Menu Items */
#sidebar ul { margin:0; padding:0; }
#sidebar li { padding:0; border-bottom:1px solid rgba(255,255,255,.1); }
#sidebar li a { color:white; font-weight:bold; display:block; background:rgba(0,0,0,.2); cursor:pointer; padding:0.3em 0.9em; letter-spacing:0.05em; }
#sidebar li a:hover { background:rgba(0,0,0,.3); }
#sidebar li.active a { background:rgba(0,0,0,.7); /* background:#080e3d; */ border-left:0.2em solid #93ff00; /*cursor:default;*/ }
#sidebar li::before { content:none; color:white; }

/* Sub Menu Items */
#sidebar ul.submenu { display:none; }
#sidebar ul.submenu li a { background:rgba(0,0,0,.2); border-left:0; padding:0.6em 1.55em; cursor:pointer; font-weight:normal; color:rgba(255,255,255,.6); }
#sidebar ul.submenu li.active a { background:rgba(0,0,0,.4); /*cursor:default;*/ border-left:0.2em solid #93ff00;  }
#sidebar ul.submenu li.active a:hover { background:rgba(0,0,0,.3); }
#sidebar ul.submenu li a:hover { background:rgba(255,255,255,.05); }
#sidebar ul.submenu li a:before { content:'- '; padding-right:1.3em; }

/* Sub Menu Header Items */
/*#header ul { position: absolute; top: 50%; transform: translateY(-50%); }*/
#header ul { margin-left:0; display:table-cell; vertical-align:bottom; }
#header li { display:inline-block; padding:0; margin-right:1em;  }
#header li:last-child { margin-right:0em; }
#header li a { color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:0.06em; font-size:0.8em; padding:1em 0em 1.6em; margin-top:-1em; display:block; }
#header li a:hover { color:white; }
#header li.active {  border-bottom:2px solid #93ff00;  }
#header li.active a { font-weight:bold; color:white; }
#header li::before { content:""; }

#intro { /*background:#a3005c;*/ 
	background: #530b85; /* 38085a */
	background: linear-gradient(to bottom, #38085a, #530b85);
	padding:1.4em 0.5em; text-align:center; 
}
#intro p { padding:0.4em 0em; color:rgba(255,255,255,.7); font-size:0.9em; }
#intro a { font-size:0.9em; color:white; border-radius:5px; margin-top:0.5em; display:inline-block; padding:0.5em 1em; border:1px solid white; }
#intro a:hover { background:rgba(255,255,255,.1); }

/* Date
#header p { text-align:right; text-transform:uppercase; margin-top:1.5em; color:white; }
 */

#content { 
	
	/* Celestial */
	/*background: #1D2671;
	background: -webkit-linear-gradient(to right, #1D2671, #7a0a66);
	background: linear-gradient(to right, #1D2671, #7a0a66);
	*/
	
	/*background: -webkit-linear-gradient(to bottom right, #2a37a3, #10143d) !important;*/

	background: #1d289e;
	background: -webkit-linear-gradient(to right, #1d289e, #101875);
	background: linear-gradient(to right, #1d289e, #101875);

	position:relative;
	margin-left:209px; /* Width of sidebar */
	min-height:100%;
	padding-top:84px; /* Height of header 72 */
	padding-bottom:3.5em; /* Height of footer */

}

#logo {
	position:fixed;
	background:white;
	width:209px; /* Width of sidebar */
	height:94px; /* Height of header 60 */
	/*padding:1.1em 22px;*/
	z-index:7000;
	text-align:center;
	/*border-bottom:2px solid #9b0045;*/
}
#logo img { 
	display:inline-block;
	width:209px;
	/*max-height:100%;*/
	/*max-width:100%;*/
	/*fill:white;*/
	/*max-width: 158px;
    margin: 34px 0;*/
}
#footer { 
	position:absolute; bottom:0;
	width:100%;
	height:3.5em;
	color:rgba(255,255,255,.4);
	font-size:0.7em;
	white-space:nowrap;
}
#footer .row { padding-top:8px; }
#footer .row div:last-child { text-align:right; }
#footer a { color:rgba(255,255,255,.5); }

.box { 
	border-top:1px solid black; 
	background:rgba(255,255,255,.2); 
	padding:20px;
	min-height:300px;
}
.mw { max-width:1480px; margin:0 auto; }

/*
.dbox { text-align:center; margin:0 0 1px 1px; background:rgba(0,0,0,.2); }
.dbox { width:100%; display:inline-block; }
*/

.icon { display:inline-block; width:2.6em; height:2.6em; padding-right:0.7em; vertical-align:middle; }
.icon { fill:white; }

#header .icon { float:right; padding-top:1em; width:3em; height:3em; padding-right:0; display:none; }

/*.big-chart .dbox { background:rgba(0,0,0,.3); }*/

/* Mobile only */
.mob-only { display:none; }
.heading p { padding:20px 0px; /* text-align:center; */ }

/*#header span { text-align:right; display:inline-block; padding:1.2em 0 0 0; }*/

/*.headbar { display:none; }*/
.headbar { position:relative; padding:0.6em 1em; background:rgba(0,0,0,.15); /* border-bottom:1px solid rgba(255,255,255,.05); */ /* font-size:1em; */ margin-bottom:20px; text-align:left; font-family: 'OpenSansSemiBold', Helvetica, Arial, sans-serif; }

.headbar .icon { background:rgba(0,0,0,0); width:1.8em; display:block; padding:0; position:absolute; right:0em; top:-0.05em; fill:rgba(255,255,255,1); cursor:pointer; }
.headbar .icon:hover { fill:rgba(255,255,255,.4);  }

.profile { position:absolute; right:0; top:12px; border-radius:50%; width:35px; height:35px; border:1px solid rgba(255,255,255,.3); }
.username { position:absolute; right:60px; top:37px; }

/* Circular Key & Bar */
.key { display:inline-block; width:1em; height:1em; border-radius:50%; margin-right:1em; }
.bar { display:inline-block; width:90%; height:0.8em; border-radius:0.8em;  }

/* Colours & Glow Colours */
.color1 { background:rgba(147,255,0,1); } /* Green #93ff00 */
.glow1 { box-shadow: 0px 0px 1em 0em rgba(147,255,0,1); }
.color2 { background:rgba(100,210,225,1); } /* Blue #64d2ff */
.glow2 { box-shadow: 0px 0px 1em 0em rgba(100,210,225,1); }
.color3 { background:rgba(255,0,145,1); } /* Pink #ff0091 */
.glow3 { box-shadow: 0px 0px 1em 0em rgba(255,0,145,1); }
.color4 { background:rgba(255,155,40,1); } /* Orange #ff9b28 */
.glow4 { box-shadow: 0px 0px 1em 0em rgba(255,155,40,1); }
.color5 { background:rgba(255,240,40,1); } /* Yellow #fff028*/
.glow5 { box-shadow: 0px 0px 1em 0em rgba(255,240,40,1); }
.color6 { background:rgba(255,45,55,1); } /* Red #ED1C24 */
.glow6 { box-shadow: 0px 0px 1em 0em rgba(255,45,55,1); }

/* Empty */
.empty { background:rgba(255,255,255,.15); width:100%; }

/* Basic White Glow */
.glow { box-shadow: 0px 0px 1em 0em rgba(255,255,255,.6); }

/* Highlight Key */
.h::after { content:''; display:block; background: radial-gradient(rgba(255,255,255,1) 5%, transparent 55%); border-radius:50%; width:100%; height:100%;  }

/* Highlight Bar */
.hb::after { content:''; display:block; 
/*background: linear-gradient(transparent 20%, rgba(255,255,255,1) 50%, transparent 80%); */


background: linear-gradient(transparent 15%, 
	rgba(255,255,255,.4) 40%, 
	rgba(255,255,255,1) 50%, 
	rgba(255,255,255,.4) 60%, 
	transparent 85%);

width:100%; height:100%; 
}


.hby::after { content:''; display:block; 
background: linear-gradient(90deg, transparent 15%, 
	rgba(255,255,255,.4) 40%, 
	rgba(255,255,255,1) 50%, 
	rgba(255,255,255,.4) 60%, 
	transparent 85%); 
position:absolute; margin:4px 0px; height:auto; bottom:0; top:0; left:0; right:0; 
}

/* Chart Legend */
.chart-legend { text-align:center; background:rgba(0,0,0,0); /*border-top:1px solid rgba(255,255,255,.1);*/ padding:0em 1em 1em 1em; }
.chart-legend ul { margin-left:0; }
.chart-legend li { display:inline-block; padding-right:1.2em; color:rgba(255,255,255,1); cursor: pointer; 
	 -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.chart-legend li:hover { color:rgba(255,255,255,.6); }
.chart-legend li.hidden { text-decoration:line-through; }
.chart-legend li::before { padding:0; content: ""; }
.chart-legend li span { display:inline-block; width:1em; height:1em; border-radius:50%; margin-right:0.6em; position:relative; top:0.1em; }
.chart-legend li:last-child { padding-right:0px; }


/*
.chart-legend { list-style: none; padding-left:0; }
.chart-legend li { display: inline-block; cursor: pointer; padding: 0 5px; }
.chart-legend li.hidden { text-decoration:line-through; }
.chart-legend li span { border-radius: 5px; display: inline-block; height: 10px; margin-right: 10px; width: 10px; }
*/

.chart-holder { width:100%; }
.chart-holder .inner { position:relative; /*padding:0px 1.5em 20px; */ }
.chart-holder .inner canvas { width:100%; min-width:0 }

.circle canvas { min-height:182px; max-height:182px; }
.long canvas { /*max-height:182px;*/ min-height:182px; max-height:182px; max-width:100%; }
.small .inner { padding:0 10px; }
.small canvas { min-height:255px; max-height:255px; max-width:200px; margin:0 auto; }

.vsmall .inner { padding:10px 20px; }


.split { text-align:left; }


.ksubmenu { position:absolute; right:0em; top:2.4em; width:240px; display:none; font-size:0.9em; }
.ksubmenu * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.ksubmenu .inner { background:rgba(0,0,0,.8); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75); text-align:left; border-radius:0.4em; overflow:hidden; padding:0 !important; }
.subt { padding:0.5em 0.8em; background:black; border-bottom:1px solid rgba(255,255,255,.2); color:white; font-weight:bold; text-transform:uppercase; }
.ksubmenu a { padding:0.5em 0.8em; display:block; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,1); }
.ksubmenu a::before { content: '▶'; padding-right:0.6em; font-size:0.6em; vertical-align:top; line-height:2.2em; }
.ksubmenu a:hover { color:white; background:rgba(0,0,0,.3); }
.ksubmenu .xtra { padding:0.5em 0.8em; color:rgba(255,255,255,.6); font-size:1em; }

/* Progress Bar */
/* .prog-bar { padding:6px 20px 14px; display:block; width:100%; }
.prog-lbl { padding-bottom:3px; }
*/
/*
.prog-bar-lbl { display:inline-block; padding:0px 0px 0px 10px; text-align:center; vertical-align:top; position:relative; }
.prog-bar-lbl b { position:absolute; top:-5px; right:0; }
*/

/* Unique rule for 1400 mw + logo width */
@media only screen and (max-width: 1700px) {
	#header .mw { padding:0 40px; } /* Needs to be included if logo color is different */
	#footer .mw { padding:0 20px; }
	.heading p { padding:16px 20px; }

	.profile { top:26px; }

	#content { padding-top:94px; }

	.headbar { font-size:0.9em; }

	#header { height:94px; }
	.menuarea { height:94px; }

	/* Reduce font sizes here */
	.chart-legend li { font-size:0.9em; }
	.prog-lbl { font-size:0.9em; }

}

/* Tablet */
@media only screen and (max-width: 1200px) {



	#intro { display:none; }

	/* Hide Submenu Text */
	#sidebar ul li a span { display:none; }

	/* #header span { display:none !important; } */

	/* #header li { font-size:0.8em; } */

	
	/* Make Sidebar Narrower */
	#sidebar { width:64px; }
	#content { margin-left:64px; padding-top:94px; }

	/*#logo { width:190px; }*/
	
	/*#header { height:94px; }
	.menuarea { height:94px; padding-left:0.6em; text-align:left; }*/
	
	.long { flex: 1 0 100%; }

	.circle { flex: 1 0 25%; }
	.circle canvas { max-width:100%; margin:0 auto; }

	.small { flex: 1 0 25%; min-height:182px; }
	.small canvas { margin:0 auto; }

	.vsmall { flex: 1 0 25%; }

	.vbar, .hbar { flex: 1 0 25%; }

	.split { flex: 1 0 100%; }

	#header {
		box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.75);
	}
}

/* Mobile */
@media only screen and (max-width: 767px) {

	/* Reduce logo size */
	#logo { width:142px; height:64px; }
	#logo img { width:142px; }

	.menuarea { height:64px; }

	.mob-only { display:block; }

	.profile { display:none; }
	.username { display:none; }

	.chart-legend li { font-size:1em; }
	.prog-lbl { font-size:1em; }
	
	/* Add some more margin between charts here */
	.column { margin:1px 1px;	}

	/* Decrease the chart padding */
	.chart-holder .inner { padding:0 6px 20px; }

	.long { flex: 1 0 100%; }
	.circle { flex: 1 0 100%; }
	
	.small { flex: 1 0 100%; }
	.vbar, .hbar { flex: 1 0 100%; }
	.hbar .inner, .vbar .inner { padding:0em 2em 2em; }
	.vsmall { flex: 1 0 33%; }
	.vsmall .inner { padding:0 0px; }


	/*.headbar { text-align:center; }*/

	#content { margin-left:0px; padding-top:64px; }
	#sidebar { display:none; min-width:320px; top:64px; }
	#sidebar ul.submenu { display:block; }
	#header ul { display:none; }
	#sidebar ul li a span { display:inline-block; }
	#header .icon { display:inline-block; }

	#sidebar li a { background:rgba(0,0,0,.4); }

	.menu-open { overflow:hidden; }
	.menu-open #sidebar {
		overflow:auto;
		height:calc(100% - 64px);
		display:block; width:100%; background: #1D2671;
		opacity:.98;
		background: #1d289e;
		background: -webkit-linear-gradient(to right, #1d289e, #101875);
		background: linear-gradient(to right, #1d289e, #101875);
	}

	.profilearea { width:100%; }

	#header {
		left:0px;
		box-shadow: 0px 0px 80px 0px rgba(0,0,0,0.75);
		height:64px;
	}

	#header .mw { padding:0 10px; }
	#logo { box-shadow:0px 0px 80px 0px rgba(0,0,0,0) !important; }

}