JumperHeightBar {
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	transition: all 1s ease-out;
	transition: opacity .1s linear;

	&.open {
		opacity: 0;
	}

	.bar {
		position: absolute;
		flex-direction: column-reverse;
		background-color: #000000;
		width: 8px;
		height: 80%;
		bottom: 5%;
		left: 8%;
		align-content: center;
		align-items: center;

		.flag {
			position: absolute;
			top: -48px;
			right: -29.5px;
			background-image: url("ui/hud/flag.png");
			background-size: 100%;
			width: 48px;
			height: 48px;
		}

		.heightbar {
			position: absolute;
			height: 100%;
			border-bottom: 4px solid #000000;
			border-top: 4px solid #000000;
			width: 20px;
		}

		.heightbarpos {
			position: absolute;
			width: 20px;
			height: 0%;
			border-top: 4px solid white;

			.heighttext {
				left: 10px;
				bottom: 11px;
				text-shadow: 3px 3px #c73920;
				color: #FFFFFF;
				width: 200px;
				font-family: "Press Start 2P";
				font-size: 20px;
				flex-shrink: 0;
			}
		}

		.maxheightbarpos {
			position: absolute;
			width: 20px;
			height: 0%;
			z-index: 10;

			.maxheighttext {
				right: 170px;
				bottom: 9px;
				color: #c73920;
				width: 200px;
				text-align: right;
				font-family: "Press Start 2P";
				font-size: 14px;
				flex-shrink: 0;
				padding-right: 20px;
			}
		}


		.maxheightotherbarpos {
			position: absolute;
			width: 20px;
			height: 0%;
			border-top: 4px solid #fab003;
			z-index: 1;
			opacity: 0.2;

			.maxheightothertext {
				right: 35px;
				bottom: 18px;
				flex-shrink: 0;
				padding-right: 20px;
				max-height: 32px;
				width: 32px;
				z-index: 1;
				background-size:contain;
				aspect-ratio: 1;
			}
		}
	}
}