.modalArea{
	visibility:hidden;
	opacity:0;
	position:absolute;
	z-index:10;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:.4s
}
.modalBg{
	width:100%;
	height:100%;
	background-color:rgba(90,90,90,0.6);
}

.modalWrapper{
/*
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:70%;
	max-width:500px;
	padding:10px 30px;
	background-color:#fff
*/
/*
	position:absolute;
	top:39%;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:240px;
	padding:10px 30px;
	background-color:#fff;
	border:1px solid black;
*/
	position:absolute;
	top:170px;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:240px;
	padding:10px 30px;
	background-color:#fff;
	border:1px solid black;
}

.modalContents {
	padding:15px 5px;
}
.modalContents p {
	text-align:left;
	font-size:14.5pt;
	margin-bottom:20px;
}

.closeModal{
	position:absolute;
	top:.5rem;
	right:1rem;
	cursor:pointer
}
.is-show{
	visibility:visible;
	opacity:1
}
/*
button{
	padding:10px;
	background-color:#fff;
	border:1px solid #282828;
	border-radius:2px;
	cursor:pointer
}
*/
#openModal{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}

.pin_input {
	font-size:24pt;
	width:1em;
	text-align:center;
	margin:10px 15px;
	border:2px black solid;
}

#pin_select_table {
	border-spacing: 8px 4px;
}

#pin_select_table td {
	margin: 10px 10px;
	font-size: 16pt;
	padding: 4pt 6pt;
}
#pin_select_table th {
	background-color:#33A453;
	color:white;
	height: 1.5em;
	padding: 1pt 6pt;
}
#pin_select_table th:first-of-type {
	background-color:#fff;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance:textfield;
}