main#mainWrapper
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/site-layout/login-background-play-3-2400.jpg") center bottom/cover no-repeat;
padding: 1rem 1rem 3rem;
}

main#mainWrapper.login-pro
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/site-layout/pro-login-background-play-1-2400.jpg") center bottom/cover no-repeat;
}

main#mainWrapper.create-account
{
background: url("https://dh36nblqpps8a.cloudfront.net/assets/site-layout/create-account-background-play-1-2400.jpg") center bottom/cover no-repeat;
}

.sign-in-container
{
max-width: 26rem;
margin: 0 auto;
padding: 1.5rem;
border: .25rem solid #27aae1;
border-radius: .75rem;
background: #fff;
background: linear-gradient(160deg, rgba(252,252,252,.9) 45%, rgba(234,246,252,.9) 90%);
box-shadow: 0 .675rem 1rem -0.375rem rgba(0,0,0,0.25);
}

.sign-in-container .invalid label
{
color: #c00;
}

.sign-in-container .errorMsg
{
opacity: 1;
border-radius: .25rem;
background-color: #fae8e8;
font-size: .875em;
border: .0625rem solid #c00;
padding: .5em;
}

.sign-in-container .invalid .invalidMsg
{
opacity: 1;
border-bottom-left-radius: .25rem;
border-bottom-right-radius: .25rem;
background-color: #fae8e8;
font-size: .875em;
border: .0625rem solid #c00;
padding: .5em;
margin: 0;
display:block;
}

.sign-in-container .invalid input
{
border: .0625rem solid #c00;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: 0;
}

.sign-in-container a:hover
{
color: #27aae1;
}

.sign-in-container form > div:not(:last-of-type)
{
margin-bottom: 1rem;
position: relative;
}

#loginFormHeading
{
font-family: proxima-nova-extra-condensed,sans-serif;
font-weight: 600;
font-style: normal;
color: #005380;
font-size: 2rem;
text-align: center;
line-height: 1;
}

.sign-in-container .login-password p
{
text-align: right;
margin: .25rem 0 0;
font-size: .875rem;
}

.sign-in-container label
{
display: block;
margin-bottom: .1875rem
}

.sign-in-container input[type=submit], .lost-password .login-link > a
{
border: none;
background-color: #005380;
border-radius: .25rem;
font-size: 1.5rem;
margin: 0;
padding: .75rem 1rem;
text-align: center;
line-height: 1;
display: block;
font-family: proxima-nova-extra-condensed,sans-serif;
font-weight: 600;
font-style: normal;
color: #fff;
width: 100%;
cursor: pointer;
}

.sign-in-container input[type=submit]:hover, .lost-password .login-link > a:hover
{
background-color: #adc72e;
color: #5e7f1f;
}

.create-new-account
{
display: block;
text-align: center;
margin-top: 2rem;
}

.create-new-account > div
{
display: flex;
align-items: center;
justify-content: center;
height: 1.5rem;
width: 1.5rem;
background-color: #27aae1;
border-radius: 50%;
margin: auto;
color: #000;
}

.create-new-account > div i
{
color: #fff;
font-size: .675rem;
}

.create-new-account p
{
font-size: 1rem;
padding: 0 1rem;
line-height: 1.4;
margin: 0;
}

.login-disclaimer-links p
{
font-size: .875rem;
text-align: center;
padding: 0 1rem;
line-height: 1.4;
margin: 0;
}

.login-disclaimer-links p::before
{
content: "";
display: block;
max-width: 3rem;
margin: 1.625rem auto;
height: 0.125rem;
background-color: #27aae1;
border-radius: 10rem;
}

.login-disclaimer-links p a
{
text-decoration: underline;
}

.login-disclaimer-links p a:hover
{
text-decoration: none;
}

.nrs-default-form input[type=password], .nrs-default-form input[type=text], .nrs-default-form input[type=email]
{
padding-left: 2rem;
border-radius: .375rem;
}

.login-email > div, .login-password > div
{
position: absolute;
top: 1.05rem;
left: .675rem;
z-index: 1;
color: #27aae1;
font-size: .875rem;
}

/* Pro rules */

.login-pro .sign-in-container
{
border: .25rem solid #666;
background: linear-gradient(160deg, rgba(252,252,252,.9) 45%, rgba(240,240,240,.9) 90%);
}

.login-pro #loginFormHeading
{
color: #333;
}

.login-pro .sign-in-container input[type=submit]
{
background-color: #333;
}

.login-pro .sign-in-container input[type=submit]:hover
{
background-color: #ccc;
color: #222
}

.login-pro .login-email > div, .login-pro .login-password > div
{
color: #333;
}

.login-pro .login-disclaimer-links p::before
{
background-color: #666;
}


/* create account form/page rules */

.create-account .sign-in-container
{
border: .25rem solid #adc72e;
background: rgba(252,252,252,.9);
}

.create-account #loginFormHeading
{
color: #5e7f1f;
}

.create-account .sign-in-container input[type=submit]
{
background-color: #5e7f1f;
}

.create-account .sign-in-container input[type=submit]:hover
{
background-color: #adc72e;
color: #5e7f1f
}

.create-account .login-email > div, .create-account .login-password > div
{
color: #5e7f1f;
}

.create-account .login-disclaimer-links p::before
{
background-color: #adc72e;
}

.create-account .sign-in-container .login-password p a
{
color: #5e7f1f;
}

.create-account .sign-in-container .login-password p a:hover
{
color: #adc72e;
}

/* lost password pages */

.lost-password .sign-in-container form #loginFormHeading
{
text-align: left;
margin-bottom: .75rem;
}

.lost-password .sign-in-container form > p:first-of-type
{
margin-top: 0;
}

.lost-password .support
{
margin-bottom: 0;
font-size: .875rem;
}

.lost-password .support a
{
text-decoration: underline;
}

.lost-password .support a:hover
{
text-decoration: none;
}

.lost-password .support > i
{
color: #27aae1;
}

.lost-password .support::before
{
content: "";
display: block;
max-width: 2rem;
margin: 1.375rem 0 1.125rem;
height: 0.125rem;
background-color: #27aae1;
border-radius: 10rem;
}


@media screen and (min-width: 40rem)
{

	main#mainWrapper
	{
	padding: 6rem 1rem 8rem;
	}

}