:root {
	--example-var: #525252;
}

#content_container {
	max-width: 550px;
}

#content_container > p.info {
	border-bottom: 1px solid #CCC;
	padding: 15px;
	margin: 0;
}

select {
	width: 100%;
}

.form_info {
	background: #DDD;
}

.form_section, .form_info {
	padding: 15px;
	border-bottom: 1px solid #CCC;
}

.form_item .header {
	font-weight: bold;
	margin-bottom: 15px;
}

#pg_initial_university_and_event_rules,
#pg_initial_talent_release,
#pg_initial_medical_authorization,
#pg_initial_transportation,
#pg_initial_release_and_waiver {
	margin-top: 15px;
	max-width: 60px;
}

input[type="text"][readonly] {
	background: #DFDFDF;
	cursor: not-allowed;
}

#fi_pg_contact_info input, 
#fi_pg_address input, 
#fi_pg_address select, 
#fi_emergency_contact input {
	margin-bottom: 10px;
}

#fi_pg_contact_info, 
#fi_pg_address,
#fi_emergency_contact {
	padding-bottom: 10px;
}

#food_allergies, #medical_considerations {
	min-height: 120px;
}

#upay_notice {
	padding: 20px;
}

#upay_notice .contents {
	padding: 0 0 15px 0;
}

#upay_notice.green {
	background: #dfffdf;
}

#upay_notice.yellow {
	background: #fffae8;
}

#upay_notice {
	width: 290px;
}

#upay_notice .button_container button {
	margin: 0;
	border: 1px solid #CCC;
	padding: 4px 7px;
	font-size: 16px;
	background: #FFF;
	border-radius: 5px;
	cursor: pointer;
	background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}

#upay_notice .button_container button:hover {
	box-shadow: 0 0 3px #AAA;
}

#upay_notice .button_container button:active {
	box-shadow: 0 0 3px #AAA inset;
}

@media (max-width: 550px) {
	
	#content_container {
		margin: 0;
		border: none;
		box-shadow: none;
	}
	
	#bg_image {
		background: #525252;
		opacity: 1.0;
	}
	
	.mobile_only {
		display: block;
	}
	
}