/*------------------------------------------------*/
/*---------------[FORM ELEMENTS]------------------*/
/*------------------------------------------------*/


.dark-content span.register_error_message, .dark-content span.error_message {
	background-image: url(../images/left-arrow.png);
	background-size: auto 15px;
	background-position: 5px;
	background-repeat: no-repeat;
	background-color: #f70016;
	height: 15px;
	margin-bottom: 5px;
	padding: 3px;
	padding-left: 20px;
	padding-right: 10px;
	font-weight: bold;
	font-size: .8em;
	display: none;
}

.dark-content span#dob_error_message, .dark-content span#dob_age_error_message, .dark-content span#country_error_message { position: absolute;}
.dark-content span#invalid_login_error_message{ position:absolute; right:28px;}
.dark-content span#email_resent_confirmation_message{ background: none; color:#f70016; position: absolute; padding-left: 0px;}

.dark-content input.inputField { background: none; width: 390px; height: 17px; border: none; border-bottom: 1px solid #808080; padding-left: 0; /*padding-bottom: 5px;*/ margin-bottom: 15px; color: #ffffff; font-family:'TradeGothicCondTwe'; font-size: .8em; display: inline-block;}
.dark-content span.fieldLabel { font-size: .8em; display: inline-block; width: 100px; padding-bottom:10px;}
.dark-content span.fieldContent { font-size: .8em; display: inline-block; padding-bottom:10px;}
.dark-content select, .dark-content input.checkbox { margin-bottom: 15px;}
.dark-content span.checkboxLabel { font-size: .8em;}
.dark-content span.formClearfix { position: relative; top: -20px;}
#registerForm span.checkboxLabel a.inlineLink { text-decoration: underline; color: #808080;}
	#registerForm span.checkboxLabel a.inlineLink:hover { color: #909090;}


a.button { background: #f70016; display: block; text-align: center; width: 228px; height: 52px; text-transform: uppercase; border:none; border-radius: 10px; color: white; font-size: 14pt; line-height: 55px; font-family: 'TradeGothicCondTwe'; cursor: pointer; margin-top: 25px; text-decoration: none;}
	a.button.inline-block { display: inline-block;}
	a.button:hover { text-decoration: none; background: #C60012;}
.dark-content .secondaryRedirect { padding-left: 30px; text-decoration: none; font-size: .8em;}
	.dark-content .secondaryRedirect a { color: #808080; border-bottom: 1px solid #808080; text-transform: capitalize; font-size: 1em;}
	.dark-content .secondaryRedirect a:hover { text-decoration: none; color: #909090;}
	.dark-content #editProfileForm .secondaryRedirect { padding-left: 0;}
	.dark-content #loginForm .secondaryRedirect { padding-top:20px; display:block; padding-left: 0;}
	#editProfileForm span.secondaryRedirect { display: block; margin-top: 20px;}

.dark-content .subcontainer { width: 50%; float: left; box-sizing: border-box; height: 260px; position: relative; margin-bottom: 30px}
	.dark-content .subcontainer#registerSubcontainer span.context{ padding-bottom: 0; height: 110px;}
	.dark-content #appSubcontainer { text-align: center; clear: both; padding-top: 10px;}
	/*.dark-content.profileView #appSubcontainer { width: 60%; position: absolute; right: 0; bottom: 38px; }*/
		.dark-content #appSubcontainer a:hover {text-decoration: none;}
		.dark-content #appSubcontainer span { max-width: none; display: inline;}
		.dark-content #appSubcontainer img { height: 40px; }
		.dark-content #appSubcontainer img.googlePlay { width:137.7px; height: 45px; margin-right: 20px;}
		.dark-content #appSubcontainer img.appStore { padding: 3px 0; }

.dark-content .context { font-size: .8em; display: block; padding-bottom: 10px; line-height: 18px; max-width: 800px;}
	.dark-content.profileView .context { padding-bottom: 0; }
	.dark-content.profileView .context:nth-child(2) { padding-bottom: 10px; }
	.dark-content .context > a { color: gray; text-decoration: underline;}

.dark-content #dateSelectors, .dark-content #countrySelectors { width: 392px; height: 23px; display: inline-block; margin-bottom: 15px;}
	.dark-content #dateSelectors > * { float: left; width: 33.33%; height: 20px; position: relative;}
	.dark-content #countrySelectors > * { float: left; width: 100%; height: 20px; position: relative;}
	.dark-content .dropdownContainer { border-bottom: 1px solid #808080; display: block; position: relative; height: 100%; padding: 2px; font-size: .8em; line-height: 20px;}
		.dark-content .dropdownContainer > a { text-decoration: none; display: block; height: 100%; position: relative;}
			.dark-content .dropdownContainer > a > span { height: 100%; color: #ffffff;}
			.dark-content .dropdownContainer > a > div { position: absolute; display: block; right: 0; top: 0; height: 100%; width: 20px;}
				.dropdownContainer > a > div > b { height: 100%; width: 100%; display: block; background: url(../images/ageGate/down.png); background-repeat: no-repeat; background-position: 5px;}

.dropdown, .languageDropdown, .accountDropdown { width: inherit;/* background: rgba(200,200,200,.8);*/ background: rgba(50,50,50,0.8); ; position: relative; top: 2px; left: -2px; display: none; z-index: 1000; margin-right: -4px;}
	.dropdown > ul, .languageDropdown > ul, .accountDropdown > ul { max-height: 300px; overflow-y: auto; list-style: none; padding-left: 0px;}
		.dropdown > ul > li.active, .languageDropdown > ul > li.active, .accountDropdown > ul > li.active { cursor: default; padding: 4px 15px;}
		.dropdown > ul > li.highlighted, .languageDropdown > ul > li.highlighted, .accountDropdown > ul > li.highlighted { background: rgba(100,100,100,.9);}

.dark-content #monthDropdown { margin-left: 5px; margin-right: 5px;}


#registerForm label, #editProfileForm label { display: inline-block; cursor: pointer; position: relative; font-size: 20px; margin-bottom: 25px;}
#registerForm label span.checkboxLabel, #editProfileForm label span.checkboxLabel { margin-left: 25px;}
#registerForm input[type=checkbox], #editProfileForm input[type=checkbox] { display: none;}
#registerForm label:before, #editProfileForm label:before { border-radius: 5px; content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; background-color: transparent; border:2px solid gray;}
#registerForm input[type=checkbox] + label:before, #editProfileForm input[type=checkbox] + label:before { position: absolute;}
#registerForm input[type=checkbox]:checked + label:before, #editProfileForm input[type=checkbox]:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0,0,0,.2); font-size: 17px; color: #f3f3f3; text-align: center; line-height: 19px; overflow: hidden; position: absolute;}

#create_nickname_message { color: #f70016; margin-bottom: 20px; font-size: 21px; display: none;}

.g-recaptcha {
	float: left;
	margin-right: 10px;
}

::-webkit-input-placeholder { color: #4c4c4c;}
:-moz-input-placeholder { color: #4c4c4c;}
::-moz-input-placeholder { color: #4c4c4c;}
:-ms-input-placeholder { color: #4c4c4c;}

@media only screen and (max-width: 959px){
	.dark-content .subcontainer {width: 100%; height: auto;}
	.dark-content span#invalid_login_error_message{ right:217px;}
	#registerForm input.inputField { width: 320px; padding-right: 0px;}
	#registerForm #countrySelectors, .dark-content #dateSelectors {width: 320px;}
	#registerForm span.register_error_message { font-size: .6em; max-width: 283px; line-height: 18px;}
	#registerForm span#service_policy_error_message { height: inherit; margin-left: 6px;}
	#registerForm span.checkboxLabel { width: 280px; display: inline-block;}
	#registerForm .checkbox { margin-bottom: 25px; float: left;}
	#registerForm label { margin-bottom: 17px;}
	#service_policy_error_message { position: absolute;}

	#editProfileForm span.fieldLabel { width: 90px;}
	#editProfileForm span.error_message { position: relative; font-size: .6em; line-height: 15pt; padding-top: 2px;margin-bottom: 0;}
	#editProfileForm input.inputField { width: 284px;}
	#editProfileForm #countrySelectors, #editProfileForm #dateSelectors { width: 285px;}
	#editProfileForm span#country_error_message { bottom: 19px;}
	#editProfileForm span#dob_error_message { bottom: 19px;}

}
@media only screen and (max-width: 767px){
	.dark-content .subcontainer { height: 300px;}


	.dark-content #appSubcontainer.profileView { width: 100%; position: initial; right: 0; bottom: 38px; }

	.dark-content input.inputField { width: 350px; padding-right: 0px;}
	.dark-content span#invalid_login_error_message{ right:16px;}
	#registerForm input.inputField { width: 270px}
	#registerForm #countrySelectors, .dark-content #dateSelectors {width: 270px;}
	#registerForm .checkbox { float: left; margin-right: 10px; margin-bottom: 45px;}
	#registerForm span.register_error_message { position: absolute; background-image: none; padding-left: 5px; padding-bottom: 0px; left: 315px; width: 95px; height: inherit; line-height: inherit; margin-bottom: 0px;}
	#registerForm span#service_policy_error_message { margin-left: 0px;}
	#registerForm span.checkboxLabel { width: 237px;}

	#editProfileForm span.fieldLabel { padding-bottom: 0; display: inline-block;}
	#editProfileForm span.error_message { bottom: 12px; left: 95px; width: 259px; background-image: none; padding-left: 10px; padding-right: 2px;}
	#editProfileForm span#country_error_message { bottom: 15px;}
	#editProfileForm span#dob_error_message { bottom: 15px;}
	#editProfileForm input.inputField { width: 271px;}
	#editProfileForm #countrySelectors, #editProfileForm #dateSelectors { width: 271px;}
	#editProfileForm span.secondaryRedirect { padding-top: 0px;}


}
@media only screen and (max-width: 479px){
	.dark-content input.inputField {width: 240px;}
	.dark-content span#invalid_login_error_message{ right:6px;}
	.dark-content .secondaryRedirect { display: block; padding-left: 0; padding-top: 10px;}


	.dark-content #appSubcontainer { padding-top: 0px;}
	/*.dark-content.profileView #appSubcontainer { padding: 25px 0; }*/
		.dark-content #appSubcontainer span { margin: 0 auto; display: inline;}
		.dark-content #appSubcontainer img.googlePlay { margin-right: 0px;}

	#registerForm .secondaryRedirect a { margin-left: 0px;}

	#registerForm .checkbox { margin-bottom: 55px;}
	#registerForm input.inputField { width: 279px;}
	#registerForm #countrySelectors, .dark-content #dateSelectors { width: 280px;}
	#registerForm span.register_error_message { position: relative; left: 0px; top: -15px; width: 264px;}
		#registerForm span.checkboxLabel { width: 250px; display: inline;}

	#editProfileForm span.fieldLabel { width: 80px; font-size: .67em;}
	#editProfileForm span.error_message { left: 84px; width: 182px; padding-bottom: 0px; height: inherit;}
	#editProfileForm input.inputField { width: 194px;}
	#editProfileForm #countrySelectors, #editProfileForm #dateSelectors { width: 194px;}

	.parseUser .secondaryRedirect { display: inline;}
	.parseUser #form .inputField { height: 25px !important; margin-bottom: 3px;}
	.parseUser #form .error_message { font-size: .6em; background-image: none; padding-left: 5px; padding-right: 5px; width: 230px; height: inherit;}

	#create_nickname_message { font-size: 15px; }

	#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}
}