/* LeveLJS */

.level {
	width: 100%;
	height: 100%;
	position: relative;
	background: #fff;
	margin-bottom: 20px;
}


.level-drop {
	position: absolute;
	background: rgba(0,0,0, .8);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	z-index: 999;
}


/* Level Wrappers */

.level-wrapper {
	position: absolute;
}

.right-wrapper {
	right: 3%;
	top: 5%;
	height: 79%;
	display: table;
}

.bottom-wrapper {
	left: 6%;
	bottom: 3%;
	width: 74%;
	display: table;
}

.central-wrapper {
	left: 8%;
	top: 10%;
	width: 70%;
	height: 70%;
}


/* Level */

.right-level, .bottom-level, .central-level {
	position: relative;
	/*overflow: hidden;*/	
	background: #adadad;
}

.right-level {
	height: 100%;
	width: 2px;
}

.right-level .level-drop {
	left: -4px;
}


.bottom-level {
	width: 100%;
	height: 2px;
}

.bottom-level .level-drop {
	bottom: -5px;
}



.central-level {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #e4e4e4;
}

.central-level .axis-x, .central-level .axis-y, .right-level .axis, .bottom-level .axis {
	position: absolute;
	background: #b9b9b9;
	z-index: 9;
}

.central-level .axis-x {
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0px;
}

.central-level .axis-y {
	height: 100%;
	width: 1px;
	left: 50%;
	top: 0px;
}


.right-level .axis {
	width: 16px;
	height: 1px;
	top: 50%;
	left: -7px;
}

.bottom-level .axis {
	height: 16px;
	width: 1px;
	left: 50%;
	top: -7px;
}

.bottom-level span.value, .right-level span.value {
	position: absolute;
	font-size: 12px;
}


.bottom-level span.value {
	left: 46%;
	top: 9px;
}

.right-level span.value {
	right: -25px;
	top: 44%;
}



.arrow-wrapper {
	position: absolute;
	bottom: 14%;
	font-size: 24px;
	right: 14%;
}

.arrow-wrapper .fa-arrow-up {
	color: green;
}

.arrow-wrapper .fa-arrow-down {
	color: blue;
}