Health {
	position: absolute;
	right: 80px;
	top: 22px;
	border-radius: 10px;
	border: 1px solid #000;
	width: 100px;

	.healthbar {
		height: 5px;
		background-color: #1BFC6B;
		border-radius: 10px;
	}

	&.hide {
		display: none;
	}
}

MenuButton {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 20px;
	top: 6px;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	background-color: rgba(#000, 0.7);
	pointer-events: all;
	cursor: pointer;

	&.draggingcamera {
		pointer-events: none;
	}

	.circle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 25px;
		height: 25px;
		border-radius: 100%;
		border: 1px solid white;
	}

	.dot {
		width: 3px;
		height: 3px;
		margin: 1px;
		border-radius: 100%;
		background-color: white;
	}
}

rootpanel {
	background-color: rgba(#333, 0);
	transition: background-color 0.2s ease-in;
	pointer-events: none;


	&.devcamera {
		display: none;
	}
}


InventoryBar {
	position: absolute;
	width: 100%;
	bottom: 6px;
	justify-content: center;
	align-items: flex-end;
}

InventoryIcon {
	display: flex;
	width: 60px;
	height: 60px;
	margin: 0px 3px;
	font-family: Calibri;
	justify-content: center;
	align-items: center;
	background-color: rgba(#000, 0.7);
	pointer-events: all;
	cursor: pointer;

	&.draggingcamera {
		pointer-events: none;
	}

	.item-name {
		padding: 5px;
		color: white;
		font-size: 13px;
		opacity: 0.7;
		mix-blend-mode: lighten;
		text-align: center;
	}

	.slot-number {
		font-size: 13px;
		color: white;
		position: absolute;
		left: 1;
		top: -2;
	}

	.border {
		position: absolute;
		width: 60px;
		height: 60px;
		border: 6.1px solid #5A8EE9;

		&.hide {
			display: none;
		}
	}

	&.active {
		border: 6px solid #5A8EE9;
	}

	&.hide {
		display: none;
	}
}