.graph-tooltip {
	position: absolute;
	z-index: 999;
	background-color: #fff;
	border-radius: 3px;
	padding: 7px 17px 9px 17px;
	font-size: 0.85em;
	border: 1px solid rgba(0,0,0,0.3);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.07);
	pointer-events: none;
}

	.graph-tooltip table td {
		padding: 0;
		box-shadow: none;
		white-space: nowrap;
	}

	.graph-tooltip .tooltip-heading {
		font-size: 1.2em;
	}

	.graph-tooltip .tooltip-right {
		text-align: right;
		padding-left: 10px;
	}

	.graph-tooltip .tooltip-subheading {
		font-size: 0.75em;
		opacity: 0.5;
	}

	.graph-tooltip b {
		font-weight: bold;
	}

@media (prefers-color-scheme: dark) {

	.graph-tooltip {
		background-color: #1a1a1a;
		color: #ddd;
	}

}

.graph-container {
	margin-top: 20px;
	position: relative;
	z-index: 1;
	min-height: 300px;
	height: 500px;
}

	.graph-container .graph {
		height: 100%;
	}


svg text {
	fill: #333;
}

svg g.tick line,
svg path.domain {
	stroke: #333;
}

@media (prefers-color-scheme: dark) {

	svg text {
		fill: #ddd;
	}

	svg g.tick line,
	svg path.domain {
		stroke: #ddd;
	}

}


li.metric-strength-green:before,
li.metric-strength-yellow:before,
li.metric-strength-red:before {
	top: 0;
	bottom: 0;
	margin: auto;
	height: calc(100% - 4px);
}
li.metric-strength-green:before { background: #6cbc2b; }
li.metric-strength-yellow:before { background: #e6c229; }
li.metric-strength-red:before { background: #db6024; }