.graph-key {
	border-color: var(--table-border-colour);
	border-collapse: collapse;
	text-align: center;
	font-size: 90%;
}
.graph-key tr td,
.graph-key tr th {
	border-style: solid;
}
.graph-key tr td:first-child,
.graph-key tr th:first-child {
	border-style: solid solid solid none;
}
.graph-key tr td:last-child,
.graph-key tr th:last-child {
	border-style: solid none solid solid;
}
.graph-key tr:first-child td,
.graph-key tr:first-child th {
	border-style: none solid solid;
}
.graph-key tr:first-child td:first-child,
.graph-key tr:first-child th:first-child {
	border-style: none solid solid none;
}
.graph-key tr:first-child td:last-child,
.graph-key tr:first-child th:last-child {
	border-style: none none solid solid;
}
.graph-key tr:last-child td,
.graph-key tr:last-child th {
	border-style: solid solid none;
}
.graph-key tr:last-child td:first-child,
.graph-key tr:last-child th:first-child {
	border-style: solid solid none none;
}
.graph-key tr:last-child td:last-child,
.graph-key tr:last-child th:last-child {
	border-style: solid none none solid;
}
.graph,
.chart {
	background: transparent;
	border-left: 1px dotted var(--text-colour);;
	border-bottom: 1px dotted var(--text-colour);;
	padding: 20px 20px 20px 0;
	margin:10px 0 60px 70px;
}
.chart {
	padding: 20px 20px 0 0;
}
.graph polyline{
	fill: none;
	stroke-width: 2;
}
.graph polyline:last-child {
	stroke: var(--graph-yellow);
}
.graph polyline:nth-last-child(2) {
	stroke: var(--graph-red);
}
.graph polyline:nth-last-child(3) {
	stroke: var(--graph-white);
}
.graph polyline:nth-last-child(4) {
	stroke: var(--graph-green);
}
.chart .bar:nth-child(5n) {
	fill: var(--graph-red);
}
.chart .bar:nth-child(5n+1) {
	fill: var(--graph-green);
}
.chart .bar:nth-child(5n+2) {
	fill: var(--graph-white);
}
.chart .bar:nth-child(5n+3) {
	fill: var(--graph-blue);
}
.chart .bar:nth-child(5n+4) {
	fill: var(--graph-yellow);
}
.chart .chart__label {
	font-size:10px;
}
.chart__label--tall{
	fill: var(--primary-bg-colour);
}
.graph .datapoint {
	fill: var(--graph-yellow);
}
.graph .datapoint.local {
	fill: var(--graph-white);
}
.graph .datapoint.overseas {
	fill: var(--graph-green);
}
.graph-container {
	position: relative;
}
.graph-container__y-axis__label {
	position: absolute;
	width: 60px;
	text-align: right;
	font-size: 80%;
}
.graph-container__y-axis__label--top {
	bottom: calc(100% + 1em - 60px);
}
.graph-container__y-axis__label--middle {
	bottom: calc(50% + 1em);
}
.graph-container__y-axis__label--bottom {
	bottom: calc(0% + 1em + 60px);
}
.graph-container__x-axis__label {
	position: absolute;
	bottom: calc(60px - 1em);
	text-align: right;
	font-size: 80%;
}
.graph-container__x-axis__label--early {
	left: calc(0% + 1em + 60px)
}
.graph-container__x-axis__label--mid {
	left: calc(50% + 1em);
}
.graph-container__x-axis__label--late {
	left: calc(100% + 1em - 60px);
}

/*For Bokeh graphs for Wychurst data*/
 .bokehGraph {
	 max-width: 100%;
	 overflow: hidden; /*Bokeh deals with overflow itself*/
 }