/*
 * wploadgraph stylesheet
 */

.wploadgraph h1 {
	padding-top: 1em;
}
.wploadgraph h3 {
	padding-top: 1em;
	margin-bottom: 8px;
}
.wploadgraph form {
}

.wploadgraph-dashboard {
}

.wploadgraph-dashboard form {
}
.wploadgraph-dashboard #wplg-tabs {
	position: relative;
	width: 64em;
}
.wploadgraph-dashboard #wplg-tabs ul {
	position: absolute;
	left: 0;
	top: 0;
	width: 151px;
	margin: 0;
}
.wploadgraph-dashboard #wplg-tabs li {
	list-style: none;
	width: 100%;
	font-weight: normal;
}
.wploadgraph-dashboard #wplg-tabs li a {
	display: block;
	padding: 8px;
	text-decoration: none;
	color: #454545;
	border: 1px solid #bbb;
	border-radius: 8px 0 0 8px;
	background: #ddd;
}
.wploadgraph-dashboard #wplg-tabs .ui-tabs-active a {
	background: #fff;
	border-right: 1px solid white;
}
.wploadgraph-dashboard #wplg-tabs .ui-tabs-active a:focus {
	border-right: 1px solid transparent;
	box-shadow: none;
}
.wploadgraph-dashboard #wplg-tabs .ui-tabs-panel {
	width: 750px;
	border: 1px solid #ccc;
	background-color: white;
	margin: 0 1em 0 150px;
	overflow: auto;
}
.wploadgraph-dashboard .wplg-commons-container {
	display: flex;
	flex-direction: row;
	padding: 1em;
}
.wploadgraph-dashboard .wplg-commons-container div {
	width: 100%;
}
.wploadgraph-dashboard .wplg-button {
	padding: 2px 1em;
	border: 1px solid #aaa;
	border-radius: 8px;
	text-decoration: none;
	background-image: linear-gradient(to bottom, #fff 0%, #f0f0f0 30%, #e0e0e0 70%, #d0d0d0 100%);
	color: #444;
}
.wploadgraph-dashboard .wplg-button:hover {
	box-shadow: 0 0 16px 0px #888;
	background: #fff;
	color: #000;
	border: 1px solid black;
}
.wploadgraph-dashboard .wplg-button-selected {
	color: #eef;
	background-image: linear-gradient(to bottom, #8ad 0%, #68b 30%, #469 70%, #247 100%);
}
.wploadgraph-dashboard .wplg-commons-container a {
	display: block;
	margin: 0px 25% 8px 25%;
}

.wploadgraph-dashboard .tooManyEvents {
	margin: 2em 0 0 0;
	border: 1px solid maroon;
	background-color: #f0e0d0;
	padding: 1em;
	color: maroon;
}

.wploadgraph-canvas-wrap {
	position:relative;
	border:1px solid #ccc;
	background-color:white;
	margin:0 1em 0 0;
}

#wploadgraph-chartjs-tooltip {
	background-color: rgba(0,0,0,0.8);
	border-radius: 8px;
	color: #ddd;
	padding: 1em;
	font: bold 12px "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
#wploadgraph-chartjs-tooltip td {
	padding: 5px;
	max-width: 30em;
}
#wploadgraph-chartjs-tooltip {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	transition: 0.5s all;
	margin: 19px 0 0 -31px;
	font-size: 14px;
}
#wploadgraph-chartjs-tooltip::after {
	content: "";
	position: absolute;
	opacity: 0.75;
	top: 0;
	left: 2em;
	border-width: 8px;
	border-style: solid;
	border-color: transparent transparent black transparent;
	margin-left: -6px;
	margin-top: -16px;
}
#wploadgraph-chartjs-tooltip span {
	font-weight: normal;
	color: white;
}