.joystick-hline {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #ffffff;
	width: 100%;
	height: 2px;
	transform: translate(-50%, -50%);
}
.joystick-vline {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #ffffff;
	width: 2px;
	height: 100%;
	transform: translate(-50%, -50%);
}
.joystick-box {
	display: block;
	position: absolute;
	width: 150px;
	height: 150px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
	border: 2px solid #ffffff;
	border-radius: 10px;
	overflow: visible;
}
.joystick-dot {
	position: absolute;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
}
.joystick-dot-inner1 {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	background: radial-gradient(circle, #ff4d4d, #b30000);;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}