

button,
input[type="submit"] { border:1px solid #ff5758; background-color:#161616; color:#fff; font-size:22px; font-family:"HKG-Semi-Bold",sans-serif; padding:2px 25px 4px; border-radius:12px; transition:background-color 0.3s ease; }
input[type="submit"] { margin-bottom:12px; }
button:hover,
input[type="submit"]:hover { cursor:pointer; background-color:#452323; }
form { display:block; margin:25px 0 0; }
fieldset { border:0; }

form .field.text,
form .field.password { margin-bottom:10px; }
form .field.text input,
form .field.password input { background-color:rgba(22,22,22,0.8); border:1px solid rgba(153,153,153,0.6); color:#666; font-size:18px; font-family:"HKG-Semi-Bold",sans-serif; border-radius:12px; padding:5px 10px 6px; min-width:300px; }
form .field.text input:focus,
form .field.password input:focus { color:#ccc; }
form .field.checkbox { font-family:'HKG-Light'; }
form .field.checkbox input { appearance:none; margin:0; font:inherit; color:currentColor; width:18px; height:18px; background-color:rgba(22,22,22,0.8); border:1px solid rgba(153,153,153,0.6); border-radius:4px; transform:translateY(0px); display:inline-grid; place-content:center; margin-bottom:12px; }
form .field.checkbox input:before { content:''; position:relative; width:13px; height:12.5px; border-radius:2px; transform:scale(0); transition:0.1s transform ease; box-shadow:inset 16px 16px #ff5758; background-color:CanvasText; transform-origin:center center; clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
form .field.checkbox input:checked { border-color:#ff5758; }
form .field.checkbox input:checked::before { transform:scale(1); }
form .field.text input:focus,
form .field.password input:focus { outline:0; border:1px solid #ff5758; }
form .field.text label,
form .field.password label { display:none; }
form #MemberLoginForm_LoginForm_Email:before { content:'Email'; display:inline; }
form .message { font-family:'HKG-Semi-Bold'; color:#ff5758; margin-bottom:12px; text-wrap:balance; }

.signup { position:relative; justify-content:center; }
.signup h1 { text-align:center; }
.signup > div { flex:1; display:flex; justify-content:center; align-items:center; }
.signup form { display:flex; flex-direction:column; align-items:center; }
.signup form fieldset { max-width:300px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-start; border:0; width:auto; }
.signup form .field.text { margin:0; }
.signup form .field.text:not(.validatedfirstname,.validatedlastname) { flex:0 0 100%; }
.signup form .field.text:not(.password,.email) { flex:1 0 calc(50% - 5px); display:flex; }
.signup form .field.validatedlastname { justify-content:flex-end; }
.signup form .field.text:not(.password,.email) input { min-width:0; width:100%; max-width:150px; }

.container .formBtns { text-align:center; /*max-height:100px;*/ flex:0 0 10%; }
.container .formBtns button { display:block; width:100%; }

.container .forms { position:relative; min-height:290px; flex:0 0 50%; overflow:hidden; }
.container .forms > div { position:relative; top:50%; transform:translateY(-50%); }
.signup,
.container .formBtns .loginBtn { display:none; }

@media screen and (max-width:1282px) {
	button,
	form input[type="submit"] { font-size:20px; }
	form { margin-top:20px; }
	.textField { margin-bottom:18px; }
	.textField input { font-size:20px; }
}

@media screen and (max-width:901px) {
	button,
	form input[type="submit"] { font-size:18px; }
	form { margin-top:16px; }
	.textField { margin-bottom:12px; }
	.textField input { font-size:16px; }
}

@media screen and (max-width:381px) {
	button,
	form input[type="submit"] { font-size:16px; }
	form { margin-top:14px; }
	.textField { margin-bottom:10px; }
	.textField input { font-size:14px; }
}
