.level-panel{
	position: absolute;
	z-index: 3;
	right: 1%;

	height: 100%;
	top: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
}

.level-panel .wrapper{
	border-radius: 2vw;
	background: rgba(0,0,0,0.8);
	border: white solid 0.2vw;
	padding: 25% 2%;
	position: relative;
	width: 4vw;
	height: 33vw;

	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.level-panel .wrapper .level-point{
	position: inherit;
	display: inline-block;
	height: 7%;
	width: 2vw;
	border-radius: 2vw;
	transition: 1s;
	background: #1fcdff;
}

.level-panel .wrapper p{
	display: block;
	color: white;
	position: absolute;
	top: 90%;
	right: 143%;
	font-size: 1.5vw;
	line-height: normal;
	width: 12vw;
	text-align: right;
	pointer-events: none;
}

.level-panel .wrapper p.silver-level{
	top: 68%;
}

.level-panel .wrapper p.gold-level{
	top: 7%;
}




.level-panel.horizontal{
	top: 84%;
	right: 49%;
}

.level-panel.horizontal .label{
	color: white;
	margin: 0 0 1% 3%;
	font-size: 2vw;
}

.level-panel.horizontal .wrapper{
	width: 49vw;
	height: 2vw;
	padding: 4% 2%;
	justify-content: flex-start;
	align-items: center;
}

.level-panel.horizontal .wrapper .level-point{
	height: 2vw;
	width: 100%;
	position: inherit;
}