/** HUDs **/

.hud {
	width: 300px;
	height: 180px;
	margin: 0 auto;
	top: 16px;
	left: 16px;
	position: absolute;
	border: 4px solid #000;
	opacity: 0.8;
	background-color: #ab9d86;
	text-align: center;
	z-index: 2;
	transition-duration: 0.2s
}

.hud:hover {opacity: 1}

.mini_hud {
	height: 180px;
	margin: 0 auto;
	top: 16px;
	left: 16px;
	right: 16px;
	position: absolute;
	text-align: left;
	z-index: 2
}

.hud .nickname {
	margin: 8px;
	font-size: 18px;
	font-style: italic;
	cursor: default
}

.health_info, .mana_info {text-align: left}

.enemy_health {
	top: 0;
	right: 0;
	position: absolute;
	text-align: right
}

.health_info, .mana_info, .shield_info, .enemy_health_info {
	margin: 0 10px;
	font-size: 16px;
	cursor: default
}

.hud progress, .mini_hud progress {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 276px;
	height: 20px;
	margin: 8px;
	border: 4px solid #000;
	opacity: 1
}
/* Progress bar style */
.hud progress {background-color: rgba(0, 0, 0, 0.2)}
.hud progress::-webkit-progress-bar {background-color: rgba(0, 0, 0, 0.2)}
.hud progress::-webkit-progress-value {transition-duration: rgba(0, 0, 0, 0.2)}
.hud progress::-moz-progress-bar {transition-duration: rgba(0, 0, 0, 0.2)}
.mini_hud progress {background-color: rgba(255, 255, 255, 0.1)}
.mini_hud progress::-webkit-progress-bar {background-color: rgba(255, 255, 255, 0.1)}
.mini_hud progress::-webkit-progress-value {background-color: rgba(255, 255, 255, 0.1)}
.mini_hud progress::-moz-progress-bar {background-color: rgba(255, 255, 255, 0.1)}
/* Progress value style */
.health_value, .enemy_health_value {color: #ca302d}
.health_value::-webkit-progress-value {background-color: #ca302d !important}
.health_value::-moz-progress-bar {background-color: #ca302d !important}
.enemy_health_value::-webkit-progress-value {background-color: #ca302d !important}
.enemy_health_value::-moz-progress-bar {background-color: #ca302d !important}
.enemy_health_value {
	-webkit-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg)
}
.mana_value {color: #0f056b}
.mana_value::-webkit-progress-value {background-color: #0f056b !important}
.mana_value::-moz-progress-bar {background-color: #0f056b !important}

.shield_value {color: #676767}