InfoPanel {
	position: absolute;
	width: 296px;
	left: 8px;
	bottom: 16px;
	//top: 10px;
	align-self: flex-end;
	pointer-events: none;
	justify-content: flex-start;
	flex-direction: column-reverse;
	gap: 10px;
	font-family: "Cal Sans";
	//background-color: red;
	z-index: 999;
	padding: 8px;
	background-image: url("/textures/ui/panel/info_panel.png");
	background-position: center;
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.bar_container {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		overflow: visible;
		mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		//background-color: yellow;
		background-color: #00000077;
	}

	.dash_bar_container {
		position: relative;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		overflow: visible;
		mask-image: url("/textures/ui/panel/info_panel_dash_mask.png");
		mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		gap: 1px;
	}

	.info_dash_container {
		width: 100%;
		//flex-direction: column-reverse;
		flex-direction: row;
		align-items: center;
		//gap: 8px;
	}

	.dash {
		position: relative;
		flex-shrink: 1;
		width: 100%;
		height: 28px;
		background-color: #0005;
	}

	.info_bar {
		position: relative;
		width: 100%;
		overflow: hidden;
		height: 28px;
		//background-color: #00000099;
		//border: 1px solid blue;
		align-items: center;
		//border-left: 2px solid #fff;
		//border-right: 2px solid #fff;
		flex-shrink: 1;

		.info_bar_overlay {
			position: absolute;
			left: 0px;
			width: 100%;
			height: 100%;
		}

		.xp_transition_on {
			transition: all 0.2s ease-in-out;
		}
	}

	.data_container {
		width: 100%;
		height: 100%;
		flex-direction: row-reverse;
	}

	.info_bar_label {
		position: absolute;
		color: #fff;
		font-size: 16px;
		align-items: center;
		font-weight: bolder;
		//width: 100%;
		left: 0px;
		justify-content: flex-start;
		padding-left: 5px;
		padding-top: 1px;
		text-stroke: 5px black;
		opacity: 0.7;
	}

	.data {
		position: relative;
		color: #ffffffaa;
		font-size: 16px;
		align-items: center;
		//left: 0px;
		padding-right: 5px;
		padding-top: 1px;
		text-stroke: 5px black;
		opacity: 0.9;
		//letter-spacing: 1px;
	}
	//.data_center {
	//    position: absolute;
	//    color: #ffffff88;
	//    font-size: 26px;
	//    align-items: center;
	//    justify-content: center;
	//left: 0px;
	//    width: 100%;
	//    padding-left: 5px;
	//    padding-top: 1px;
	//    text-stroke: 3px #00000099;
	//    opacity: 0.9;
	//}

	.armor_icon {
		position: absolute;
		width: 48px;
		height: 48px;
		left: 285px;
		bottom: 76px;
		//background-color: #FF446699;
		background-image: url(textures/ui/shield2.png);
		aspect-ratio: 1;
		background-size: cover;
		background-repeat: no-repeat;

		> .armor_text {
			position: relative;
			//left: 1px;
			width: 100%;
			height: 100%;
			text-align: center;
			align-items: center;
			align-content: center;
			justify-content: center;
			color: #eee;
			//font-family: 'Inter-Black';
			font-size: 28px;
			//text-shadow: 0px 2px 1px #000000ff;
			text-stroke: 5px black;
			//background-color: rgba(0,0,0,0.2);
		}
	}
}