html, body { margin: 0; padding: 0; min-height: 100%; }
body { COLOR: #fff; font-size: 16px; font-family: 'Montserrat', Arial, Sans-serif; line-height: 1; background: url(/gfx/loginBg.png) top left no-repeat #000; background-size: cover; }
h1, h2, h3 { color: #fff; }
	h1,
	h3.fakeH1 { font-size: 42px; line-height: 1.2; margin: 0px 0 20px 0; font-weight: 600; font-family: "Mona-Sans SemiBold Wide", Arial, sans-serif; }
h2 { font-size: 30px; line-height: 1.3; margin: 0 0 25px 0; font-family: "Mona-Sans", Arial, sans-serif; font-weight: 500; }
h3 { font-size: 18px; line-height: 1.4; margin: 25px 0 5px 0; font-family: "Mona-Sans", Arial, sans-serif; font-weight: 500; }
h4 { font-size: 18px; line-height: 1.4; margin: 25px 0 5px 0; font-family: "Mona-Sans Medium Wide", Arial, sans-serif; }

p, li { color: #ffffff95; }

a { text-decoration: none; color: #ffffff95; }
	a:hover { text-decoration: underline; }

.logo img { width: 300px; }

input[type=checkbox] { display: inline-grid; flex-shrink: 0; place-content: center; appearance: none; width: 20px; height: 20px; margin: 0; background: transparent; border-radius: 5px; border: 0.5px solid #80808E; }
	input[type=checkbox]::before { transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); box-shadow: inset 1em 1em #ffffff80; content: ""; display: inline-block; width: 0.75em; height: 0.75em; transform: scale(0); transition: 120ms transform ease-in-out; }
	input[type=checkbox]:checked::before { transform: scale(1); }

select { -webkit-appearance: none; }

.doubleLink { background: url(/gfx/doubleLinkBg.png) no-repeat; width: 392px; max-width: 100%; background-size: contain; display: flex; justify-content: space-between; align-items: center; }
	.doubleLink a { font-size: 14px; font-family: 'Mona-Sans SemiBold', sans-serif; color: #fff; height: 50px; width: 44%; display: inline-flex; justify-content: center; align-items: center; border-radius: 50px; }
		.doubleLink a:first-child { color: #00021D; }
		.doubleLink a:last-child { position: relative; }
	.doubleLink:hover { background: url(/gfx/doubleLinkBgHover.png) no-repeat; background-size: contain; }
	.doubleLink a:first-child:hover { color: #fff; }
	.doubleLink a:last-child:hover { color: #00021D; }


.doubleLinkPurple { background: url(/gfx/doubleLinkBgPurple.png) no-repeat; width: 496px; max-width: 100%; background-size: contain; display: flex; justify-content: space-between; align-items: center; }
	.doubleLinkPurple a { font-size: 14px; text-decoration: none; font-family: 'Mona-Sans SemiBold', sans-serif; color: #fff; height: 50px; width: 48%; display: inline-flex; justify-content: center; align-items: center; border-radius: 50px; font-weight: 600; }
		.doubleLinkPurple a:first-child { color: #00021D; }
		.doubleLinkPurple a:last-child { position: relative; }
	.doubleLinkPurple:hover { background: url(/gfx/doubleLinkBgPurpleHover.png) no-repeat; background-size: contain; text-decoration: none; }
		.doubleLinkPurple:hover a:first-child { color: #fff; }
		.doubleLinkPurple:hover a:last-child { color: #00021D; }


.wrapper { width: 100%; display: flex; justify-content: center; gap: 40px; padding: 60px 0 0 0; }
#mobileLogo { display: none; }
.leftSide { width: 653px; min-height: 590px; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
	.leftSide.small { width: 400px; justify-content: center; align-items: center; }
		.leftSide.small .text { display: none; }
	.leftSide .text { }
	.leftSide h2 { font-size: 22px; font-weight: 500; }
	.leftSide ul { list-style: none; padding: 0; margin: 0; }
		.leftSide ul li { position: relative; padding-left: 15px; margin: 0 0 15px 0; color: #ffffff95; }
			.leftSide ul li::before { content: "•"; position: absolute; left: -5px; top: 10%; transform: translateY(-50%); font-size: 4em; line-height: 1; color: #7C3DFD; }
	.leftSide p { margin: 20px 0 0; color: #ffffff95; line-height: 1.5em; }
		.leftSide p a { color: #fff; text-decoration: none; }
			.leftSide p a:hover { text-decoration: underline; }

.rightSide { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 70px; gap: 90px; width: 610px; min-height: 600px; box-sizing: border-box; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(220px); border-radius: 30px; }
	.rightSide.large { width: 835px; max-width: 100%; }
	.rightSide h1 { text-transform: uppercase; font-size: 28px; text-align: center; }

.login-form { max-width: 100%; margin: auto; color: #fff; }
	.login-form input.user-field { margin: 0 0 15px 0; outline-style: none; outline-width: 0pt; border: none; display: block; width: 100%; color: #ffffff; box-sizing: border-box; padding: 16px 20px; font-size: 16px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
		.login-form input.user-field:focus { border: 0.5px solid #7C3DFD; }
		.login-form input.user-field.last { margin: 0; }
		.login-form input.user-field.error { border: 1px solid #EE2C54; }
		.login-form input.user-field.success { border: 1px solid #07CD3C; }
		.login-form input.user-field::placeholder { color: #ffffff30; }
	.login-form h1 { text-transform: uppercase; text-align: center; margin: 0 0 20px 0; }
	.login-form p { text-align: center; color: #ffffff80; }
	.login-form .loginForm { width: 500px; max-width: 100%; margin: auto; }
	.login-form .login-form-text { margin: 0 0 60px 0; }
	.login-form .label { font-size: 16px; margin: 0 0 7.5px 0; color: #ffffff80; text-align: left; }
		.login-form .label .required { color: #ff0000; font-size: 16px; }
	.login-form .fortgot-password-link { float: right; font-size: 14px; color: #ffffff80; }
	.login-form .terms { margin: 60px 0 20px 0; }
		.login-form .terms .checkboxDiv:first-child { margin: 0 0 21px 0; }
		.login-form .terms .checkboxDiv { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
		.login-form .remember-me label,
		.login-form .terms label { font-weight: lighter; line-height: 1.4; color: #ffffff80; }
		.login-form .terms a { text-decoration: underline; }
		.login-form .terms input { position: relative; top: 2px; }
	.login-form .remember-me { margin: 10px 0; display: block; font-size: 14px; line-height: 1.4; }
	/*		.login-form .remember-me input,
		.login-form .terms input { display: inline-grid; flex-shrink:0; place-content: center; appearance: none; width: 20px; height: 20px; margin: 0 12px 0 0; background: transparent; border-radius: 5px; border: 0.5px solid #80808E; }
			.login-form .remember-me input::before,
			.login-form .terms input::before { transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); box-shadow: inset 1em 1em var(--stroke); content: ""; display: inline-block; width: 0.75em; height: 0.75em; transform: scale(0); transition: 120ms transform ease-in-out; }
			.login-form .remember-me input:checked::before,
			.login-form .terms input:checked::before { transform: scale(1); }
*/
	.login-form .button,
	.buttons .bankIdLink,
	.thankYouDiv .button,
	.leftSide .button { border-radius: 70px; color: #fff; background: #7C3DFD; height: 49px; width: 282px; box-sizing: border-box; padding: 0 25px; font-family: "Mona-Sans SemiBold", sans-serif; color: #fff; font-weight: 600; display: flex; justify-content: center; align-items: center; text-decoration: none; font-size: 14px; line-height: 1.3; box-sizing: border-box; }
		.login-form .button.full {width:100%;}
		.center .button {margin: 5px auto;}
	 	.login-form .button:hover,
		.buttons .bankIdLink:hover,
		.leftSide .button:hover { background: #7C3DFD90; text-decoration: none; }
		.login-form .button.margin { margin: 40px auto 0px auto; }
p.backToLogin { margin: 20px 0 0 0; }
	p.backToLogin a { text-decoration: underline; font-size: 14px; }


.login-info-container { clear: both; width: 50%; overflow: hidden; }
.login-form .error { margin: 10px 0 0 0; line-height: 1.4; color: #EE2C54; }
.login-form .success { margin: 10px 0 0 0; line-height: 1.4; color: #07CD3C; }

.login-form .actions p { border-top: 1px solid #ddd; text-align: center; margin: 30px auto 10px auto; width: 80%; }
	.login-form .actions p span { background: #00021D; padding: 5px 10px; position: relative; bottom: 10px; color: #fff; }

.useShippingCbDiv label { margin: 0 0 0 10px; }

.create-account-container,
.signup-button-wrapper,
.error-message { margin: auto; }
.formColumnHeader { display: flex; justify-content: space-between; align-items: center; margin: 30px 0 40px 0; }
	.formColumnHeader span { color: #ffffff80; }
.formColumn h3 { font-size: 18px; margin: 0; display: flex; justify-content: flex-start; align-items: center; gap: 5px; line-height: 1em; }
	.formColumn h3 img { position: relative; bottom: 2px; }

.formColumn .formColumnBody { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 4%; }
.formColumn .input-row { width: 48%; }
	.formColumn .input-row.full { width: 100%; }
	.formColumn .input-row .label { display: block; color: #ffffff80; margin: 0 0 5px 0; }
	.formColumn .input-row input[type=text],
	.formColumn .input-row select { width: 100%; padding: 15px; color: #ffffff80; box-sizing: border-box; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: none; }
		.formColumn .input-row select option { color: #000; }
.formButtons { overflow: hidden; margin: 50px 0 0 0; }
	.formButtons button,
	.signup-button-wrapper input { background: rgba(255, 255, 255, 0.05); font-size: 16px; padding: 15px 30px; border-radius: 100px; border: none; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; gap: 5px; line-height: 0.5em; }
		.formButtons button.right,
		.signup-button-wrapper input { float: right; background: #7C3DFD; color: #fff; }
		.formButtons button.left { float: left; }
			.formButtons button.left img { transform: rotate(180deg); }
			.formButtons button.left:hover { background: #7C3DFD; color: #fff; }
		.formButtons button.right:hover,
		.signup-button-wrapper input:hover { color: #000; background: #fff; }
			.formButtons button.right:hover img { filter: invert(100%); }

		.formButtons button:disabled { background: rgba(255, 255, 255, 0.05); cursor: default; }
			.formButtons button:disabled:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
		.formButtons button.right:disabled:hover img { filter: invert(0); }

.formColumn .input-field.full label { font-weight: 600; margin: 0 0 0 10px; }
.formColumn .input-field input.error { border: 1px solid #EE2C54; }
.signup-button-wrapper input:disabled { background: rgba(255,255,255, 0.05); color: #fff; cursor: default; }
.signup-button-wrapper input { position: relative; bottom: 46px; padding: 15px 40px; height: 48px; box-sizing: border-box; }

.thankYouDiv p { text-align: center; line-height: 1.5em; }
.thankYouDiv h1 { margin: 40px auto; }
.thankYouDiv p:last-child { margin: 80px 0; }

#popup { display: none; }
	#popup h2,
	#popup p { color: #000; max-width: 800px; }
		#popup p.last { margin: 0; }
	#popup button { background: #00021D; }

#mobileLogo img { width: 100%; height: 100%; object-fit: contain; }

@media screen and (max-width: 1300px) {
	.wrapper { width: 95%; margin: auto; }
}

@media screen and (max-width: 1050px) {
	.wrapper { flex-direction: column; gap: 0; }
	.leftSide,
	.rightSide { min-height: 0; width: auto; max-width: 600px; }
	.leftSide { padding: 40px 0; }
		.leftSide .logo { margin: 0 0 40px 0; }
}

@media screen and (max-width: 650px) {
	form { max-height: none; }
	.wrapper { flex-direction: column-reverse; gap: 20px; padding: 0; }
		.wrapper.height { }
	.leftSide { padding: 20px; display: block; }
		.leftSide p { padding: 0 0 20px 0; }
		.leftSide .logo { display: none; }
		.leftSide.hide,
		.leftSide.small { display: none; }
	.rightSide { padding: 25px; flex-basis: 140%; flex: auto auto; }
		.rightSide.full,
		.rightSide.large { flex-basis: 100%; margin: 0 0 10px 0; position: relative; min-height: 83vh }
		.rightSide .actions { margin: 40px 0 0 0; }
	#mobileLogo { display: block; margin: auto; height: 12vh; padding: 20px 0 0 0; box-sizing: border-box; }

	.rightSide h1 { font-size: 22px; }

	.doubleLinkPurple { background: none; width: auto; display: block; }
		.doubleLinkPurple a { width: auto; display: flex; }
			.doubleLinkPurple a:first-child { background: #7C3DFD; color: #fff; margin: 0 0 10px 0; }
			.doubleLinkPurple a:last-child { background: #fff; color: #000 !important; }
		.doubleLinkPurple:hover { background: none; }
		.doubleLinkPurple a:first-child:hover { background: #7C3DFD; }
		.doubleLinkPurple a:last-child:hover { background: #ffffff; color: #000; }

	.actionButtons { position: absolute; bottom: 20px; left: 40px; width: calc(100% - 80px); }
	.login-form .button, .buttons .bankIdLink, .thankYouDiv .button { width: 100%; }

	.formColumn .input-row { width: 100%; }
	.formButtons.full { margin: 100px 0 0 0; }
		.formButtons.full button,
		.signup-button-wrapper input { width: 100%; float: none; bottom: 110px; }

	.rightSide .buttons.center { height: 60vh; display: flex; justify-content: center; flex-direction: column; gap: 20px; }
}