/* Set base font sizes for different screen sizes */

html {
  font-size: 75%;
}
@media (max-width: 992px) {
  html { font-size: 80%; }
}
@media (max-width: 768px) {
  html { font-size: 120%; }
}

/* Set font size classes */

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.8rem;
}

h3 {
	font-size: 1.6rem;
}

p, label {
	font-size: 1.25rem;
}

.font-size-1 {
	font-size: 1.0rem;
}

.font-size-2 {
	font-size: 1.25rem;
}

.font-size-3 {
	font-size: 1.5rem;
}

.font-size-4 {
	font-size: 2.0rem;
}

.font-size-4_2 {
	font-size: 2.32rem;
}

.font-size-5 {
	font-size: 2.5rem;
}

.font-size-6 {
	font-size: 3rem;
}

.font-size-6_1 {
	font-size: 3.26rem;
}

.font-size-7 {
	font-size: 4rem;
}

.white {
	color: white;
}


div.questionnumbercontainer, .introductionHeading, .feedbackHeading, .withdrawalHeading {
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;
}

.introductionHeading, .feedbackHeading, .withdrawalHeading {
    font-size: 1.25rem;
}

.reg-introduction-heading {
	font-size: 1.25rem;
}

div.box-effect {
	border-radius: 		0.5rem;
   	box-shadow: 		10px 10px 5px #AAAAAA;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
	margin-bottom:		3rem;
	width:				100%;
}

div.rjp-box-effect {
	padding: 1.5rem;
}

div.rjp-score-chart-container {
		width: 100%;
}

div.eligibility-question-box-effect {
	border-radius: 		10px;
   	box-shadow: 		10px 10px 5px #AAAAAA;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
	padding:			0.6rem;
	margin-bottom:		3rem;
	width:				95%;
}

.box-container-centered {
	width:				100%;
	max-width:			120rem;
	margin-left:		auto;
	margin-right:		auto;	
}

div.box-effect-inverted {
    background-color:	#6990B1;
    border-color:		#ECF0FB;
    color:				white;
}

div.optionboxeffect {
	border-radius: 		10px;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    background-color: #6990B1;
    color: white;
    padding: 1.5rem;
    width: 100%;
}

div.optionboxeffectnohover {
	border-radius: 		10px;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    background-color: #6990B1;
    color: white;
    padding: 1.5rem;
    width:				100%;
}

div.eligibilityoptionboxeffect {
	border-radius: 		10px;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    background-color: #6990B1;
    color: white;
    padding: 1.5rem;
    width:				50%;
}

div.optionboxeffect:hover,
div.eligibilityoptionboxeffect:hover,
div.optionselected {
	background-color: #5cb85c;
    color: white;
    cursor:pointer;
}

div.eligibilityoptionboxeffect:hover {
}

div.optionboxeffect:hover {
    border-color: forestgreen;
}

div.optionboxeffectselected {
	border-radius: 		10px;
	border-width:		2px;
	border-color:		#5cb85c;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    padding: 1.5rem;
    background-color: #5cb85c;
    color: white;
    cursor:pointer;
    width:				100%;
}

div.eligibilityoptionboxeffectselected {
    border-radius: 		10px;
	border-width:		2px;
	border-color:		#5cb85c;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    padding: 1.5rem;
    background-color: #5cb85c;
    color: white;
    cursor:pointer;
    width:				50%;
}

div.eligibilityoptionboxeffectselectedwithtext {
    border-radius: 		10px;
	border-width:		2px;
	border-color:		#5cb85c;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: #ECF0FB;
    padding: 1.5rem;
    background-color: #5cb85c;
    color: white;
    cursor:pointer;
    width:				100%;
    text-align: left;
}

div.eligibilityoptionboxeffectselectedwithtext input {
    width: 100%;
    margin-top: 10px;
}

.eligibilityOptionTextResponse {
    color: black;
}

div.feedback-box-effect {
	border-radius: 		10px;
	border-width:		2px;
	border-color:		#6990B1;
	border-width:		0.2rem;
	border-style:		solid;
	background-color: dodgerblue;
    color: white;
	padding:			1rem;
    vertical-align: middle;
    width:				100%;
}

.margin-bottom-large {
	margin-bottom:		2rem;
	margin-top:			2rem;
}

.eligibility-container {
    margin: auto;
}

.question-container {
    margin-bottom: 30px;
    text-align: left;
}

.eligibility-question-container {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    text-align: left;
}

.eligibility-question-text {
    font-weight: bold;
}

.eligibility-question-label {
    display: initial !important;
}

.eligibility-error-container {
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    text-align: left;
    color: red;
}

.pre-question-container {
    margin-bottom: 10px;
}

.post-question-container {
    margin-top: 10px;
}

.eligibilityoptioncontainer {
    width: 50%;
    text-align: center;
}

.optioncontainer, .eligibilityoptioncontainer {
    margin-bottom: 10px;
}

.optioncontainer, .feedback-container, .introduction-container, .withdrawal-container {
    text-align: left;
}

.feedback-container {
    margin-top: 30px;
    min-height: 60px;
}

.eligibility-feedback-reasons-heading {
    font-weight: bold;
    margin-bottom: 10px;
}

.rjp-feedback-heading {
	font-size: 4rem;
}

.rjpButton {
    width: 100%;
	height: 2rem;
    display: inline-block;
}

.rjpNextButton, .eligibilitySubmitButton, .eligibilityExitButton {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    margin-left: 20px;
}

.eligibilitySubmitButton, .eligibilityExitButton {
    margin-left: 0px;
}

.eligibilityExitButton {
    margin-top: 20px;
}

.eligibilitySubmitButton:hover,
.eligibilityExitButton:hover,
.rjpNextButton:hover,
.rjpNextButton:focus,
.rjpNextButton.focus,
.rjpNextButton:active,
.rjpNextButton.active{
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}

.rjpBackButton {
       color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
    margin-right: 20px;
}

.rjpBackButton:hover,
.rjpBackButton:focus,
.rjpBackButton.focus,
.rjpBackButton:active,
.rjpBackButton.active{
  color: #fff;
  background-color: #ec971f;
  border-color: #d58512;
}

.nav-button {
	float:			right;
	padding:		1rem;
}

.nav-button-container {
	margin-top: 5rem;
	width:				100%;
	margin-left:		auto;
	margin-right:		auto;
	margin-bottom: 25rem;
}

.reg-question-group-container {
	padding: 0px;
}

.reg-question-group-inner {
	padding: 1.5rem;
}

.reg-question-text-container {
	text-align: left;
	display: inline-block;
	margin-right: 3rem;
}

.reg-textbox-container {
	display: inline-block;
	margin-left: 3rem;
	margin-right: 5rem;
}

label.reg-radio-label {
    text-align:left;
    display: inline-block;
	margin-left: 2rem;
}

input[type="radio"] {
    text-align:center;
    vertical-align:middle;
    margin-top:0.2rem;
	margin-bottom: 1.5rem;
}

input[type="text"].reg-input, select.reg-input {
    padding:0 0.5rem;
	margin-top: 0.2rem;
	height: 7rem;
	font-size: 4rem;
	width: 100%;
	border-radius: 1rem;
	padding: 0 1rem;

}

input[type=button] {
	height: 15rem;
	font-size: 6rem
}

.reg-question-container {
    padding-top: 1rem;
    display: inline-block;
    vertical-align:central;
}

.row{
    overflow: hidden; 
}

.reg-option-container {
    padding-top: 1.5rem;
}

.reg-text-area {
    height: 15rem;
    width: 100%;
}
textarea.reg-text-area {
    padding: 0 0.25rem;
	font-size: 4rem;
	border-radius: 1rem;
	padding: 1rem 1rem;
}

img.flag {
	margin: 1rem;
	max-width: 90%;
	width: 40rem;
}

div.language-container {
	margin-bottom: 1rem;
	padding: 1rem;
	border-style: solid;
	border-color: #6990B1;
	border-radius: 1rem;
}

div.language-container:hover {
	cursor: pointer;
	border-color: forestgreen;
	border-color: #ec971f;
}

div.heading-container {
    background: #6990B1 url('../Images/BannerBackground.png') center repeat-x;
    background-size: auto 100%;
	padding-top: 3rem;
	padding-bottom: 3rem;
    margin-bottom: 3rem;
	padding-left: 1rem;
}

div.title-container {
	background-color: #6990B1;
	width: 100%;
	padding-top: 0.75rem;
	padding-bottom: 0.25rem;
	padding-left: 1.0rem;
	margin-bottom: 2rem;
	color: white;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.white {
	color: white;
}

.registration-error {
	color: #CF0606;
}

div.required {
	width: 2.0rem;
	height: 2.0rem;
	border-radius: 1.0rem;
	border-style: solid;
	border-width: 0.2rem;
	border-color: #CF0606;
	background-color: #F24646;
	display: inline-block;
	margin-left: 1.0rem;
	margin-bottom: 0.25rem;
}

div.reg-question-valid {
	border-color: #25870C;
	background-color: #40B324;
}

.float-right {
	float: right;
}

.reg-textbox {
	width: 90%;
	height: 3rem;
}

.reg-additional-textbox {
	height: 3rem;
}

.reg-required-container {
	display: inline;
}

p.reg-inline {
	display: inline;
}

.reg-radio-item {
	margin-right: 2rem;
	margin-left: 1rem;
	width: 2rem;
	transform: scale(3.5);

    /* Webkit browsers*/
   -webkit-transform: scale(3.5);
}

.reg-checkbox-option-container {
	margin-left: 3rem;
	margin-top: 1rem;
}

.reg-checkbox-option-container-additional {
	margin-top: 2rem;
}

.eligibility-confirm-checkbox {
	margin-top: 1rem;
	margin-right: 2rem;
	margin-left: 1rem;
	width: 2rem;
	transform: scale(3.5);

    /* Webkit browsers*/
   -webkit-transform: scale(3.5);
}

div.reg-question-intro-container {
	margin-top: 3em
}

div.padding-top-2em {
	padding-top: 2em
}

div.margin-top-1em {
	margin-top: 1rem;
}

div.margin-top-2rem {
	margin-top: 2rem;
}

div.reg-question-row-container {
	margin-top: 2rem;
}

.width-100pc {
	width: 100%;
}

.padding-left-1 {
	margin-left: 2rem;
}
.reg-addquestion-div {
	margin-top: 2rem;
}

input.reg-field-mismatch {
	border-color: #CF0606;
	border-width: 0.25rem;
}

/* Media queries for large screen resolution */

@media only screen and (min-width:992px) {

	input[type=button] {
		height: 5rem;
		font-size: 2rem;
		width: 12rem;
	}

	input[type="text"].reg-input, select.reg-input {
		height: 3rem;
		font-size: 1.25rem;
		border-radius: 0.50rem;
	}

	input[type="radio"] {
		margin-bottom: 0.5rem;
	}

	.reg-checkbox-option-container {
		margin-left: 0rem;
		margin-top: 0.5rem;
	}

	.reg-checkbox-option-container-additional {
		margin-top: 1rem;
	}


	.reg-radio-item {
	margin-right: 2rem;
	margin-left: 1rem;
	width: 2rem;
	transform: scale(1.5);

    /* Webkit browsers*/
   -webkit-transform: scale(1.5);
}

	.eligibility-confirm-checkbox {
		margin-top: 1rem;
		margin-right: 2rem;
		margin-left: 1rem;
		width: 2rem;
		transform: scale(1.5);

		/* Webkit browsers*/
	   -webkit-transform: scale(1.5);
	}

	.font-size-6 {
		font-size: 1.25rem;
	}

	div.heading-container {
		padding-top: 1rem;
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		padding-left: 1rem;
		height: auto;
	}

	div.required {
		width: 1rem;
		height: 1rem;
		border-radius: 0.5rem;
		margin-left: 1.0rem;
		margin-top: 0.4rem;
		margin-bottom: 0rem;
	}

	textarea.reg-text-area {
		font-size: 1.25rem;
		border-radius: 0.50rem;
	}	

	.rjp-feedback-heading {
		font-size: 2.5rem;
	}

	.rjp-feedback-heading-container {
		padding: 0.2rem;
	}

	.rjp-feedback-yourscore {
		font-size: 2.0rem
	}

	.eligibility-header {
		font-size: 2rem;
	}

	.font-size-7 {
		font-size: 2rem;
	}

	div.eligibilityoptionboxeffect, div.eligibilityoptionboxeffectselected, div.eligibilityoptionboxeffectselectedwithtext {
		padding: 0.5rem;
		max-width: 31rem;
		font-size: 1.5rem;
	}

	div.eligibilityoptionboxeffectselectedwithtext {
		max-width: 95%;
	}

	.font-size-4_2 {
		font-size: 1.5rem;
	}

	div.eligibility-confirm-container {
		margin-bottom: 2rem;
	}

	.introductionHeading, .feedbackHeading, .withdrawalHeading {
		font-size: 1.75rem;
	}

	div.rjp-score-chart-container {
		max-width: 60rem;
	}
}