/* PROPHET */

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica;
}

.prophet {
	width: 100%;
	height: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	position: relative;
	letter-spacing: 1;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

.prophet .header {
	height: 45px;
	background: #152330;
	color: #aaaaaa;
}

.prophet .header select,
.prophet .header input {
	margin: 5px;
	padding: 9px 12px;
	background: #213040;
	border: 1px solid #222222;
	outline: none;
	vertical-align: top;
	color: #ffffff;
	border-radius: 8px;
	letter-spacing: inherit;
}

.prophet .header input::placeholder {
	color: #aaaaaa;
}

.prophet .header input[type=checkbox] {
	margin: 10px 0 0 5px;
	cursor: pointer;
}

.prophet .header label {
	padding: 7px 0 0 5px;
	display: inline-block;
	cursor: pointer;
}

.prophet .header span {
	padding: 7px 0 0 5px;
}

.prophet .header .group {
	padding: 0 5px;
	vertical-align: top;
	display: inline-block;
}

.prophet .header .group label {
	color: #ffffff;
}

.prophet .footer {
	bottom: 0;
	height: 32px;
	width: 100%;
	background: #152330;
	color: #aaaaaa;
	text-align: right;
	position: absolute;
}

.prophet .footer .scroll {
	top: 0;
	right: 80px;
	bottom: 0;
	left: 5px;
	position: absolute;
}

.prophet .footer .scroll .bar {
	right: 0;
	width: 100%;
	margin: 6px 0;
	height: 18px;
	background: #444444;
	border-radius: 4px;
	position: absolute;
}

.prophet .header .container,
.prophet .footer .container {
	padding: 0 10px;
	display: inline-block;
	vertical-align: top;
}

.prophet .thumbbutton {
	margin: 12px 12px 12px 5px;
	width: 20px;
	height: 20px;
	display: inline-block;
	mask-size: cover;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.prophet .thumbbutton:hover {
	opacity: .6;
}

.prophet .footer .thumbbutton {
	margin: 0;
	padding: 5px 5px;
	display: inline-block;
	width: auto;
}

.prophet .header .thumbbutton.active,
.prophet .footer .thumbbutton.active {
	color: #ffffff;
}

.prophet .workspace {
	top: 45px;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000000;
	position: absolute;
}

.prophet .chart {
	position: absolute;
}

.prophet .chart .body {
	top: 0;
	left: 0;
	bottom: 32px;
	right: 0;
	position: absolute;
}

.prophet .chart canvas {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}

.prophet .chart object {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.prophet .loading {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000000;
	opacity: .4;
	position: absolute;
}

.prophet .loading img {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 32px;
	height: 32px;
	position: absolute;
}