.login-container,.pin-container,.new-user-container,.purchase-container{
	--color: hsl(var(--primary-dark-hsl), .6);
	background-color: var(--color);
	box-shadow: 0 0 15px 0 var(--color);
	border-radius:20px;
	display:none;
}
.login-container,.new-user-container,.purchase-container{
	width:80%;
	max-width:600px;
	padding: 40px 30px;
}
.new-user-container,.purchase-container{
	margin-top:2.5rem;
	margin-bottom:2.5rem;
}
.purchase-container{
	/*display:block;*/
}
.pin-container{
	padding: 30px;
	width:300px;
}
.login-title,.pin-title,.purchase-title{
	margin:0;
	color:white;
	text-align:center;
	font-size:3.5rem;
	font-weight:normal;
}
.purchase-container p{
	color:white;
	font-size:2rem;
	font-weight:normal;
}
.form{
	display:flex;
	flex-direction: column;
	gap:20px;
	margin-top: 40px;	
}

.input-group{
	display:flex;
	flex-direction: column;
	gap: 7px;
}

.input-group label{
	color: white;
	font-weight: lighter;
}

.input-group input{
	font-size: 2.25rem;
	padding: .5em;
	background-color: hsl(var(--primary-light-hsl), .3);
	border: none;
	outline: none;
	border-radius: .25em;
	color: white;
	font-weight: lighter;
}
.new-user-container .input-group input{
	font-size:1.5rem;
}

.input-group.success input{
	box-shadow: 0 0 0 1px hsl(var(--success-hsl));
}
.input-group input:valid{
	box-shadow: 0 0 0 1px hsl(var(--success-hsl));
}

.input-group.error input{
	box-shadow: 0 0 0 1px hsl(var(--error-hsl));
}
.input-group input:invalid{
	box-shadow: 0 0 0 1px hsl(var(--error-hsl));
}

.input-group input:focus{
	box-shadow: 0 0 0 1px hsl(var(--primary-hsl));
}

.input-group .msg{
	display: none;
	font-size: .75rem;
}

.input-group.error .msg{
	color: hsl(var(--error-hsl));
	display: block;
}

.input-group.success .msg{
	color: hsl(var(--success-hsl));
	display: block;
}

.login-button,.forgot-button,.register-button{
	margin-top:1rem;
	padding: .5em 1em;
	font-size: 2.25rem;
	font-weight: lighter;
	color:white;
	background-color: hsl(var(--primary-hsl), .25);
	border: 1px solid hsl(var(--primary-hsl));
	border-radius: .25em;
	outline: none;
	cursor: pointer;
}

.login-button:hover,
.login-button:focus,
.forgot-button:hover,
.forgot-button:focus,
.register-button:hover,
.register-button:focus{
	background-color: hsl(var(--primary-hsl), .4);
}
.show{
	display:block;
}
.hide{
	display:none;
}
.question{
	display:inline-block;
	width:1.4rem;
	height:1.4rem;
	text-align:center;
	cursor:pointer;
	background-color:blue;
	outline-color:white;
	outline-width:2px;
	outline-style:double;
	border-radius:50px;
	color:white;
	font-size:1.2rem;
}
.userinfo{
	text-align:center;
	height:50px;
	border:0px solid white;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}
.userinfo>img{
	width:50px;
	height:50px;
	cursor:pointer;
}
.not-registered,.forgot{
	flex:1;
	color:white;
	font-size:1.5rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	cursor:pointer;
	height:100%;
}
.not-registered{
	text-align:left;
	align-items:start;
	padding-left:10px;
}
.forgot{
	text-align:right;
	align-items:end;
	padding-right:10px;
}
.display-none{
	display:none;
}
.input-pin{
	user-select:none;
/*	margin:40px;*/
	text-align:center;
}
.copyright-notice{
	font-size:1rem;
	color:silver;
	font-style:italic;
	text-align: center;
}
.input-pin span{
	display:inline-block;
	color:transparent;
	width:50px;
	height:50px;
	background-size:cover;
	background-position:center;
	margin:2px;
	cursor:pointer;
}
.pin-number-0{
	background-image:url("/images/numpad0s.png");
}
.pin-number-1{
	background-image:url("/images/numpad1.png");
}
.pin-number-2{
	background-image:url("/images/numpad2.png");
}
.pin-number-3{
	background-image:url("/images/numpad3.png");
}
.pin-number-4{
	background-image:url("/images/numpad4.png");
}
.pin-number-5{
	background-image:url("/images/numpad5.png");
}
.pin-number-6{
	background-image:url("/images/numpad6.png");
}
.pin-number-7{
	background-image:url("/images/numpad7.png");
}
.pin-number-8{
	background-image:url("/images/numpad8.png");
}
.pin-number-9{
	background-image:url("/images/numpad9.png");
}
.pin-number-c{
	background-image:url("/images/numpadback.png");
}
.pin-number-e{
	background-image:url("/images/numpadout.png");
}