UnitHealthbar {
	position: relative;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	//background-color: blue;
	transition: width 0.25s ease-out, opacity 0.25s ease-out;
	//overflow: visible;
	//transform: skew(-20deg, 0deg);

	.container {
		position: relative;
		top: 30%;
		height: 50%;
		width: 100%;
		color: white;
		align-items: center;
		//align-items: flex-start;
		justify-content: flex-start;
		//padding-left: 32px;
		//padding: 64px 0px 0px 32px;
		//padding-top: 64px;
		flex-direction: column;
		//overflow: visible;
		//background-color: white;

		.health {
			transition: opacity 0.25s ease-out;
		}

		.healthbar {
			position: relative;
			background-color: rgba(0, 0, 0, 0.8);
			width: 100%;
			height: 40px;
			//border-radius: 15px;

			.heathbardelta {
				position: absolute;
				top: 1px;
				left: 1px;
				bottom: 1px;
				margin-right: 1px;
				background-color: rgba(255, 255, 255, 1);
				transition: right 0.6s linear;
				//opacity:0.8;
				//border-radius: 15px;
			}

			.heathbarfill {
				position: absolute;
				top: 0;
				left: 0;
				right: 100%;
				//background: linear-gradient(90deg, rgba(230, 50, 50, 1) 0%, rgba(255, 100, 100, 1) 100%);
				background-color: rgba(255, 55, 55, 1);
				height: 40px;
				transition: right 0.1s ease-out;
				//opacity:1;
				//border-radius: 15px;
			}
		}

		.armor_text {
			//position: absolute;
			position: relative;
			//left: -60px;
			//top: 16px;
			font-family: 'Inter-Black';
			//font-family: Nunito;
			font-weight: 800;
			//text-align: right;
			//align-items: flex-start;
			font-size: 70px;
			//text-shadow: 2px 2px 4px black;
			text-stroke: 18px black;
			margin-top: 20px;
			flex-shrink: 0;
			//text-anchor: middle;
			//background-color: blue;
			//overflow: visible;
		}
	}
}