#numpad-back {
	background: rgba(0, 0, 0, 0.7); transition:0.3s; left: 0px; top: 0px; width: 100%; height: 100vh; visibility: hidden; position: fixed; opacity: 0;
}
.show#numpad-back {
	visibility: visible; opacity: 1;
}
#numpad-wrap {
	font-family: "Arial", sans-serif;
}
#numpad-display {
	font-family: "Arial", sans-serif;
}
#numpad-wrap {
	background: rgb(242, 242, 242); margin: 0px auto; padding: 10px; border: 1px solid rgb(204, 204, 204); border-image: none; top: 50%; position: relative; max-width: 320px; transform: translateY(-50%);
}
#numpad-display {
	padding: 5px; width: 100%; text-align: center; font-size: 2em; margin-bottom: 10px; z-index: 1000; box-sizing: border-box;
}
#numpad-btns {
	flex-flow:row wrap; display: flex;
}
.numpad-btn {
	background: rgb(68, 68, 68); padding: 10px; border: 1px solid rgb(170, 170, 170); border-image: none; width: 25%; text-align: center; color: rgb(255, 255, 255); font-size: 1.5em; box-sizing: border-box;
}
.numpad-btn.zero {
	width: 50%;
}
.numpad-btn.zeroN {
	width: 75%;
}
.numpad-btn.ninja {
	display: none;
}
.numpad-btn.ng {
	background: rgb(51, 51, 51);
}
.numpad-btn.cx {
	background: rgb(178, 48, 37); border: 1px solid rgb(199, 61, 50); border-image: none;
}
.numpad-btn.ok {
	background: rgb(31, 168, 58); border: 1px solid rgb(31, 199, 45); border-image: none;
}
.numpad-btn:hover {
	cursor: pointer;
}