body {
	font-family: var(--font);
	font-size: 18px;
	color: var(--fontColour);
	margin: 0;
	display: block;
}

body * {
	box-sizing: border-box;
}
body#tc #terms {
	width:60%;
}
body#tc h3 {

}
body#tc p {
	margin-bottom:1rem;
}
h1 {
	font-size: 3rem;
	line-height: 1.5em;
	padding: 0;
	margin: 0;
	color: var(--headingColour);
}

.heading {
	margin-bottom: var(--appPadding);
	border-bottom: var(--lineMed) solid var(--lineGrey);
	padding-bottom: 1.5rem;
}

.heading h2 {
	margin: 0;
	font-size: 1rem;
	padding-left: 0.5rem;
}

#GatewayType, #StudentName {
	color: var(--headingColour);
	margin: 0;
	padding-left: 0.8rem;
	display: inline-block;
}

#StudentName {
	padding-left: 0;
}

p {
	margin: 0;
}

.w-100 {
	width: 100%;
}

#appContainer {
	width: 1170px;
	max-width: calc(100% - var(--appPadding));
	margin: auto;
	margin-bottom: var(--appPadding);
	padding: var(--appPadding);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: relative;
}

#appContainer:after {
	display: block;
	content: '';
	clear: both;
	padding-top: var(--appPadding);
	border-bottom: var(--lineMed) solid var(--lineGrey);
}

.sectionContainer,
.introText {
	margin-bottom: 2rem;
}

.questionText {
	margin-bottom: 1rem;
}

.questionText + .questionHint {
	margin-top: -0.5rem;
	margin-bottom: 1rem;
	font-style: italic;
	font-size: 0.8em;
}

.textarea .questionHint {
	float: right;
	position: absolute;
	right: 1rem;
	top: 0.8rem;
}

.questionContainer[complete="true"] .textarea .questionHint {
	display: none;
}

.sectionContainer.inactive {
	display: none;
}

.sectionContainer:after {
	clear: both;
	content: '';
	display: block;
}

.clear {
	clear: both;
	display: block;
	content: '';
}

#questions,
#intro,
#resetConfirmation {
	width: 60%;
}

#questions {
	margin-bottom: var(--appPadding);
}

#questions,
#bottomNav {
	float: left;
}

.questionContainer {
	margin-bottom: 2.5rem;
}

.optionsContainer .questionContainer {
	margin-top: var(--profileSpacing);
}

#questions .optionsContainer .questionContainer {
	float: none;
}

.questionContainer[infoFor],
.questionContainer[infoFor] .textarea {
	display: none;
}

#questions .paragraphContainer {
	width: 100%;
}

#bottomNav {
	position: absolute;
	width: calc(60% - calc(2 * var(--appPadding)));
	line-height: var(--appPadding);
	bottom: calc(1.5 * var(--appPadding));
	left: var(--appPadding);
}

#bottomNav p {
	display: none;
	position: relative;
	float: left;
	cursor: pointer;
}

#bottomNav #navNext,
#bottomNav #questionnnaireNavNext {
	float: right;
}

#sideNav,
#questionnaireNav {
	--paddingLeft: 2.5rem;
	width: calc(40% - 4rem);
	float: right;
	padding-left: var(--paddingLeft);
	border-left: var(--lineThicc) solid var(--lineGrey);
	margin-left: 1rem;
	display: none;
}

.questionnaire-wrapper {
	width: calc(40% - 4rem);
	float: right;
	padding: 0;
	border: none;
	padding: 10px;
	overflow-y: auto;
	overflow-x: clip;
	max-height: 400px;
	flex-direction: column-reverse;
	display: flex;
}

#questionnaireNav {
	float: none;
	width: 95%;
}

#sideNav .nav:not(:last-child), 
#questionnaireNav .nav:not(:last-child) {
	margin-bottom: 2rem;
}

#sideNav .nav,
#questionnaireNav .nav {
	position: relative;
	cursor: pointer;
}

#sideNav .nav.active *,
#sideNav .nav.active *:before,
#sideNav .nav.prev[complete="true"] .text,
#questionnaireNav .nav.active *,
#questionnaireNav .nav.active *:before,
#questionnaireNav .nav.prev[complete="true"] .text {
	color: var(--darkGreen)!important;
	border-color: var(--darkGreen)!important;
}

#sideNav .nav.prev[complete="true"] .number,
#questionnaireNav .nav.prev[complete="true"] .number {
	color: #FFF!important;
}

#sideNav .nav.prev[complete="true"] *:before,
#questionnaireNav .nav.prev[complete="true"] *:before {
	border-color: var(--darkGreen)!important;
	background-color: var(--darkGreen)!important;
}

#sideNav .nav.prev[complete="true"] *:after {
}

#sideNav .nav.prev[complete="false"] *,
#sideNav .nav.prev[complete="false"] *:before {
	color: var(--darkRed)!important;
	border-color: var(--darkRed)!important;
}

#sideNav .nav:hover .text,
#questionnaireNav .nav:hover .text {
	text-decoration: underline;
}

#sideNav .nav span,
#questionnaireNav .nav span {
	font-size: 1.3rem;
	line-height: var(--navCircleSize);
	color: var(--lightGrey);
}

#questionnaireNav .nav .text, 
#questionnaireNav .nav .text span {
	line-height: initial;
	font-size: initial;
	display: block;
}

#questionnaireNav .nav .text span {
	font-weight: bold;
    position: absolute;
    right: 0;
}

#sideNav .nav span.numberContainer,
#questionnaireNav .nav span.numberContainer {
	position: absolute;
	top: 0;
	--borderOffset: calc(var(--lineThicc) * 1.5);
	--containerOffset: calc(var(--borderOffset) + var(--paddingLeft));
	--circleOffset: calc(var(--navCircleSize) / 2);
	--leftOrigin: calc(var(--containerOffset) + var(--circleOffset)) ;
	left: calc(0rem - var(--leftOrigin));
	width: calc(var(--navCircleSize) + calc(var(--lineThicc) * 2));
	background: transparent;
}

#sideNav .nav span.numberContainer:before,
#questionnaireNav .nav span.numberContainer:before {
	display: block;
	content: '';
	border: var(--lineThicc) solid var(--lineGrey);
	border-radius: 50%;
	height: var(--navCircleSize);
	width: var(--navCircleSize);
	background: #FFF;
	position: absolute;
	top: calc(0px - var(--lineThicc));
	left: 0;
	z-index: 0;
}

#sideNav .nav span.number,
#questionnaireNav .nav span.number {
	position: relative;
	z-index: 1;
	text-align: center;
	display: block;
}

#sideNav .nav span.numberContainer:after,
#questionnaireNav .nav span.numberContainer:after{
	width: 100%;
	height: 100%;
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 90%;
	background: transparent;
}

.optionOuter .validationErrorMessage {
	display: inline-block;
}

.clearfix::after {
	display: block;
	clear: both;
	content: "";
}

#EnrolmentClosed {
	margin-bottom: var(--appPadding);
	color: var(--darkRed) !important;
}

#SupportValidationErrorContainer {
	display: none;
}

.highlight-required #SupportValidationErrorContainer {
	display: inline-block;
}

/* Interactive styles */
#questions .questionContainer,
#questions .questionContainer[type="text"][texttype="Address"],
#questions .questionContainer[type="text"][texttype="DeliveryAddress"] {
	width: 100%;
	float: left;
	margin-bottom: var(--profileSpacing);
	margin-right: calc(var(--profileSpacing) * 2);
	position: relative;
}

#questions .questionContainer[type="text"],
#questions .questionContainer[type="emailconfirm"],
#questions .questionContainer[type="dropdown"],
#questions .questionContainer[type="file"] {
	width: calc(50% - var(--profileSpacing));
	margin-right: var(--profileSpacing);
}

#questions .questionContainer[type="file"] {
	margin-right: 50%;
}

#questions .questionContainer[type="text"],
#questions .questionContainer[type="dropdown"] {
	
}

#questions .questionContainer[type="slider"] {
	padding-bottom: 4rem;
}

#questions .questionContainer[type="text"][texttype="Email"]:before,
#questions .questionContainer[type="choice"]:before,
#questions .questionContainer[type="file"]:before {
	clear: both;
	content: '';
	display: block;
}

#questions .questionContainer[questionID="111"] {
	margin-bottom: 7rem;
}

#questions .questionContainer[questionID="1646"] .optionsContainer {
	margin-bottom: 2rem;
	margin-left: 2rem;
	font-size: 0.9rem;
}

#questions .questionContainer[questionID="358"],
#questions .questionContainer[questionID="2772"],
#questions .questionContainer[questionID="2759"],
#questions .questionContainer[questionID="1620"],
#questions .questionContainer[questionID="119"],
#questions .questionContainer[questionID="1607"],
#questions .questionContainer[questionID="1632"],
#questions .questionContainer[questionID="1569"],
#questions .questionContainer[questionID="151"],
#questions .questionContainer[questionID="369"],
#questions .questionContainer[questionID="3064"],
#questions .questionContainer[questionID="3029"],
#questions .questionContainer[questionID="1670"],
#questions .questionContainer[questionID="3238"],
#questions .questionContainer[questionID="3225"],
#questions .questionContainer[questionID="3307"],
#questions .questionContainer[questionID="2817"]
{
	margin-right: 50%;
}

#questions .questionContainer[questionID="1656"],
#questions .questionContainer[questionID="1657"],
#questions .questionContainer[questionID="1658"],
#questions .questionContainer[questionID="1659"],
#questions .questionContainer[questionID="1660"],
#questions .questionContainer[questionID="1661"],
#questions .questionContainer[questionID="179"],
#questions .questionContainer[questionID="3242"],
#questions .questionContainer[texttype="FullWidth"]
{
	width: 100%;
}

[questionid="2794"],
[questionid="2830"],
[questionid="2831"],
[questionid="2832"],
[questionid="2833"],
[questionid="3042"] {
	visibility: hidden;
}

#questions [questionid="3254"].questionContainer,
#questions [questionid="3254B"].questionContainer {
	margin-left: 2rem;
}

/* Tidy confirmation checkbox */
#questions [questionid="2860"].questionContainer, 
#questions [questionid="2860"].questionContainer ul {
	margin-bottom: 0;
}

#questions [questionid="2861"].questionContainer {
	margin-bottom: 30px;
}

/* do not show ECE NSN question on front end */
[questionid="1620"] {
	display: none;
}

.support [questionid="2794"],
.support [questionid="2830"],
.support [questionid="2831"],
.support [questionid="2832"],
.support [questionid="2833"],
.support [questionid="3042"] {
	visibility: visible;
}

#questions .questionContainer[texttype=TextArea] {
	width: 100%;
}

#questions .questionContainer[texttype=TextArea] textarea {
	height: 10em;
}

#questions.readonly .btn-update-contacts,
#questions.readonly [type=filterselection] .input-group {
	display: none !important;
}

/* Multi Choice/Select */
:root {
	--optionOuterColour: var(--darkGreen);
	--optionInnerColour: var(--highlightGreen);
}

.choice:after,
.choice .option:after {
	display: block;
	content: '';
	clear: both;
}

.choice .option {
	float: left;
	clear: both;
	margin: 0.3em 0 0 0;
	padding: 0 2em;
	cursor: pointer;
	opacity: 0.6;
	position: relative;
	width: 100%;
}

.choice .option span:nth-child(2) {
	float: right;
}

.choice .option.hide {
	cursor: initial;
}

.choice .option.selected,
.choice .option:hover {
	opacity: 1;
}

.choice .option:before,
.choice .option.selected:after {
	content: '';
	position: absolute;
	top: 50%;
	border-radius: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}


.choice.single .option:before,
.choice.single .option.selected:after {
	border-radius: 50%;
}

.choice.multi .option:before,
.choice.multi .option.selected:after {
	border-radius: 0;
}

.choice .option:before {
	left: 0;
	width: 16px;
	height: 16px;
	border: 2px solid var(--optionOuterColour);
}

/* Fix offsets for specific questions */
[questionid="3328"].option:before {
	top: 15px;
}

/*.choice .option.selected:after {
	left: 4px;
	width: 12px;
	height: 12px;
	background-color: var(--optionInnerColour);
}
*/
.choice.multi .option.selected:before {
	width: 16px;
	height: 16px;
	background-color: var(--optionInnerColour);
	box-shadow: inset -2px -2px 0px white, inset 2px 2px 0px white;
}

.choice.single .option.selected:before {
	width: 16px;
	height: 16px;
	background-color: var(--optionInnerColour);
	box-shadow: inset -1px -1px 0px 1px white, inset 1px 1px 0px 1px white;
}

.choice.single .option.selected.hide {
	padding: 0;
}

.choice.single .option.selected.hide:before {
	display: none;
}

.choice .optionOuter {
	width: 100%;
	position: relative;
}

.choice .optionHint,
div[questionid="80"] .questionHint,
.gatewayHint {
	display: none;
	width: 55%;
	position: absolute;
	top: 0;
	right: 0;
	border: var(--standardBorder);
	border-radius: var(--brad);
	font-size: 0.8em;
	padding: 1rem;
	margin-top: 1rem;
	background-color: white;
	z-index: 1000;
}

div[questionid="80"] .questionHint {
	margin-top: 3.5rem;
	display: block;
}

.gatewayHint {
	display: block;
	width: 100%;
	position: initial;
	margin-bottom: var(--appPadding);
}

.choice .optionHint ul,
div[questionid="80"] .questionHint ul {
	padding: 0 0 0 1rem;
	margin: 0;
}


.choice .option.selected + .optionHint {
	display: block;
}

/* Dropdown */

.dropdown:after
.dropdown .option:after {
	display: block;
	content: '';
	clear: both;
}

.dropdownSelection {
	font-size: var(--questionFontSize);
	cursor: pointer;
	position: relative;
}

.dropdownSelection select {
	cursor: pointer;
}

.dropdownSelection .questionText {
	font-style: italic;
	margin: 0;
	line-height: 1.1em;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 var(--questionFontSize);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.dropdownSelection i {
	position: absolute;
	top: 50%;
	right: var(--questionEleHeight);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: calc(calc(1rem + 2em) + calc(var(--lineSlim) * 2));
	padding: 0 var(--questionFontSize);
	width: var(--questionEleHeight);
	text-align: center;
	border-left: var(--standardBorder);
	border-right: var(--standardBorder);
}

.dropdownSelection i:last-child {
	right: 0;
}

.questionContainer[req=true] .dropdownSelection i.clear-field, 
.questionContainer[complete=false] .dropdownSelection i.clear-field {
	display: none;
}

.questionContainer p.questionText {
	width: calc(100% - var(--questionEleHeight));
}

.questionContainer[req=false][complete=true] p.questionText {
	width: calc(100% - (var(--questionEleHeight) * 2));
}

.questionContainer[req=false][complete=true] select {
	padding-right: calc(var(--questionEleHeight) * 2);
}

.dropdown option:hover {
	background-color: var(--interactiveHoverColour);
}

.dropdown .optionGroup span { /* Probably not possible */
    display: block; 
    padding: 0.5em;
    font-weight: bold;
	cursor: initial;
}

/* Textarea */

/*.highlight-required [complete="false"] .textarea textarea {
	border-color:var(--darkRed);
}*/
.tall {
	width: 100%;
}

.tall textarea {
	height: calc(var(--questionEleHeight) * 2);
}

/* Text input */

input[type=text] {
	width: 100%;
}

/* Slider */

:root {
	--sliderSize: 1.6rem;
}

.slider {
	width: calc(100% - var(--sliderSize));
	margin-left: calc(var(--sliderSize) / 2);
	height: 0.5rem;
	border: var(--standardBorder);
	border-radius: var(--brad);
	position: relative;
	margin-top: 2rem;
}

.slider > .ui-slider-handle {
	position: absolute;
	background: var(--darkGreen);
	outline: none!important;
	height: var(--sliderSize);
	width: var(--sliderSize);
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	cursor: pointer;
}
.slider > .slideMarker {
	position:absolute;
	top:100%;
}
.slider > .slideMarker:first-of-type {
	right:100%;
	transform: translate(50%,50%);
}
.slider > .slideMarker:last-of-type {
	left:100%;
	transform: translate(-50%,50%);
}
/* Buttons */

a.button {
	text-decoration: none;
}

.button {
	background: var(--buttonColour);
	display: inline-block;
	padding: 1rem;
	border-radius: var(--brad);
	color: #FFF;
	cursor: pointer;
}

.button:hover {
	background: var(--buttonHover);
}

.buttonLight {
	background: transparent;
	border: var(--standardBorder);
	color: var(--lightGrey);
	float: right;
}

.buttonLight:hover {
	background: var(--buttonHover);
	border-color: var(--buttonHover);
	color: #FFF;
}

/* Tabs */

.tabs {
	width: 60%;
}

.tabs div {
	position: relative;
	display: block;
	background-color: #FFF;
}

.tabs .headings div {
	display: inline-block;
	padding: calc(var(--tabPadding) / 2) var(--tabPadding);
	margin-right: var(--lineThicc);
	border-radius: var(--brad) var(--brad) 0 0;
	border: var(--standardBorder);
	border-bottom-width: 0;
	z-index: 2;
	cursor: pointer;
}

.tabs .headings .inactive {
	z-index: 0;
}

.tabs .content {
	top: calc(0px - var(--lineSlim));
	z-index: 1;
	padding: var(--tabPadding);
}

.tabs .content:not(.resetPasswordContainer):first-child {
	border-top-left-radius: 0;
}

.tabs .content .active {
	display: block;
}

.tabs .content .inactive {
	display: none;
}

.tabs .content {
	border: var(--standardBorder);
	border-radius: var(--brad);
}

/* signup and login */

#resetConfirmation,
#resetBox {
	display: none;
}

#registerLog {
	display: block;
	margin-bottom: 0;
}

#forgotPassword {
	text-decoration: underline;
	cursor: pointer;
}

#emailReset {
	border-color: var(--highlightRed);
}

#resetEmailText {
	color: var(--highlightRed);
}

.login {
	width: var(--loginTextWidth) !important;
	margin-bottom: 1rem;
}

.login[type="password"] {
	-webkit-text-security: disc;
	-moz-text-security: disc;
	text-security: disc;
}

#forgotPassword {
	font-size: var(--questionFontSize);
	font-style: italic;
	color: var(--darkGreen);
	display: block;
	margin-bottom: 1rem;
}

#validSignup {
	font-size: 0.75em;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	max-width: calc(100% - var(--loginTextWidth));
	font-style: italic;
	color: var(--lightGrey);
}

#validSignup span {
	display: block;
	margin-left: -1rem;
	font-style: normal;
	color: var(--fontColour);
}

#validSignup [valid="true"] {
	color: var(--darkGreen);
}

/* Application elements */

#loggedText {
	display: none;
}

#applicationViewer,
#applicationTiles {
	width: 60%;
	display: none;
}

.application {
	margin-right: var(--applicationSpacing);
	margin-bottom: var(--applicationSpacing);
	--offset: calc(var(--applicationSpacing) * 0.75);
	--width: calc(25% - var(--offset));
	--height: calc(calc(var(--applicationSpacing) * 7) + calc(var(--lineSlim) * 2));
	width: var(--width);
	height: var(--height);

	position: relative;
	padding: var(--applicationSpacing);
	border: var(--standardBorder);
	border-radius: var(--brad);
	color: var(--lightGrey);
	float: left;
}

.application:nth-child(4n) {
	margin-right: 0;
}

.application.submitted {
	background-color: #28a745;
	color: white;
}

/* Application viewer */

#applicationViewer *:not(.button):not(.buttonLight) {
	color: var(--fontColour);
	border-color: var(--fontColour);
}

#applicationViewer:after {
	display: block;
	content: '';
	clear: both;
}

#applicationViewer .application {
	width: calc(50% - calc(var(--lineSlim) / 2));
	height: auto;
}

#applicationViewer p:not(.applicationLabel),
#applicationViewer textarea {
	margin-bottom: var(--applicationSpacing);
}

#applicationViewer p:not(.applicationContent) {
	font-size: 0.75rem;
	font-style: italic;
}

#applicationViewer #newApplication textarea {
	width: 100%;
}

#applicationViewer .applicationLabel.complete, #applicationViewer .applicationLabel.complete i {
	font-weight: bold;
	font-size: 18px;
	color: var(--buttonHover);
	margin-bottom: 0.7em;
}

#applicationViewer .applicationContent.complete {
	font-size: 0.75rem;
	font-style: italic;
	margin-bottom: 0;
}

/* Application tiles */
#applicationTiles:after {
	display: block;
	content: '';
	clear: both;
}

#applicationTiles .application:not(#createApplication) {
	text-align: center;
	font-size: 0.75rem;
}

#applicationTiles .application:not(#createApplication) p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 var(--applicationSpacing);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

#createApplication {
	cursor: pointer;
}

#createApplication,
#createApplication * {
	color: var(--darkGreen);
	border-color: var(--darkGreen);
}

#applicationTiles #createApplication:hover,
#applicationTiles #createApplication:hover * {
	color: #FFF;
	border-color: var(--highlightGreen);
	background-color: var(--highlightGreen);
}

#createApplication i,
#createApplication p {
	width: 100%;
	text-align: center;
	line-height: 1;
}

#createApplication i {
	font-size: calc(var(--applicationSpacing) * 3);
	padding-bottom: calc(var(--applicationSpacing) * 1);
}

#createApplication p {
	font-size: calc(var(--applicationSpacing) * 1);
	margin: 0;
	padding: 0;
}

#applicationTiles .application:hover,
#applicationTiles .application:hover * {
	color: var(--fontColour);
	border-color: var(--fontColour);
	cursor: pointer;
}

#editApplication, #deleteApplication, #downloadApplication {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	padding: var(--applicationSpacing);
	border-radius: var(--brad);
}

#deleteApplication, #downloadApplication {
	top: 2em;
	padding-left: 21px;
	padding-right: 21px;
}

#editApplication:hover, #deleteApplication:hover, #downloadApplication:hover {
	background: rgba(0, 0, 0, 0.15);
}

#ApplicationDeleted {
	background-color: var(--darkRed) !important;
	color: white;
	padding: var(--applicationSpacing);
	border-radius: var(--brad);
	margin-bottom: var(--applicationSpacing);
	width: 60%;
}

#ApplicationDeleted i {
	padding-right: var(--applicationSpacing);
	padding-left: var(--applicationSpacing);
}

.help-box {
	margin-top: 2rem;
	font-size: 0.75em;
	display: block !important;
}

/* Profile section styles */
[sectionid="3"] [questionid="120"] .dropdown,
[sectionid="3"] [questionid="121"] .dropdown,
[sectionid="3"] [questionid="122"] .dropdown,
[sectionid="3"] [questionid="123"] .dropdown,
[sectionid="3"] [questionid="124"] .dropdown,
[sectionid="3"] [questionid="125"] .dropdown {
	/* Ethnicity and iwi questions */
	width: 100%;
	float: left;
}

[sectionid="3"] [questionid="121"] .dropdown,
[sectionid="3"] [questionid="123"] .dropdown,
[sectionid="3"] [questionid="125"] .dropdown {
	/* Iwi questions */
	float: left;
}

[sectionid="3"] [showThis] {
	/* Dropdown + buttons */
	height: var(--questionEleHeight);
	width: var(--questionEleHeight);
	float: right;
	text-align: center;
	border: var(--standardBorder);
	border-left: none;
	border-radius: var(--brad);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	cursor: pointer;
	overflow: hidden;
}

[sectionid="3"] [showThis]:hover {
	background: var(--interactiveHoverColour);
	border-left: var(--standardBorder);
}

[sectionid="3"] [showThis]:hover,
[sectionid="3"] [showThis]:hover * {
	border-color: var(--darkGreen);
	color: var(--darkGreen);
	position: relative;
	z-index: 1;
}

[sectionid="3"] [showThis] i {
	width: 100%;
	line-height: var(--questionEleHeight);
	font-size: var(--questionFontSize);
}

[sectionid="3"] [removeThis] {
	/* Dropdown x buttons */
	position: absolute;
	top: -0.6em;
	right: calc(var(--questionEleHeight) - 0.6em);
	height: 2rem;
	width: 2rem;
	z-index: 2;
	background: #FFF;
	text-align: center;
	border: var(--standardBorder);
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
}

[sectionid="3"] [removeThis]:hover,
[sectionid="3"] [removeThis]:hover * {
	border-color: var(--darkRed);
	color: var(--darkRed);
}

[sectionid="3"] [removeThis]:hover {
	background: var(--interactiveHoverColour);
}

[sectionid="3"] [removeThis] i {
	line-height: calc(2rem - var(--questionEleBorderWidth));
	width: calc(2rem - var(--questionEleBorderWidth));
	display: block;
	font-size: var(--questionFontSize);
	margin-left: -1px;
	margin-top: -1px;
}

/* Gateway specific*/
div[questionid="1596"].questionContainer {
	margin-left: 2em;
}

[gateway-type="Access"] [questionid="2775"],
[gateway-type="Continuity"] [questionid="2775"],
[enrolment-type="O"] [questionid="2775"],
[gateway-type="Access"] [questionid="2788"],
[gateway-type="Continuity"] [questionid="2788"],
[enrolment-type="O"] [questionid="2788"],
[gateway-type="Access"] [questionid="3250"],
[gateway-type="Continuity"] [questionid="3250"],
[gateway-type="Corrections"] [questionid="363"],
[gateway-type="Corrections"] [questionid="364"],
[gateway-type="Corrections"] [questionid="426"],
[gateway-type="Corrections"] [questionid="365"],
[gateway-type="Corrections"] [questionid="2780"],
[gateway-type="Corrections"] [questionid="3154"],
[gateway-type="Corrections"] [questionid="3325"] {
	display: none;
}

/* Support section */
#supportContainer, 
#supportContactsContainer {
	width: 100%;
	border-top: var(--standardBorder);
	border-bottom: var(--standardBorder);
	padding-top: calc(var(--supportTileSpacing) * 2);
	padding-bottom: var(--supportTileSpacing);
}

#supportContainer:after, 
#supportContactsContainer:after {
	clear: both;
	content: '';
	display: block;
}

.supportTile {
	margin-right: var(--supportTileSpacing);
	margin-bottom: var(--supportTileSpacing);

	--offset: calc(var(--supportTileSpacing) * 0.66);
	--width: calc(33% - var(--offset));
	--height: calc(calc(var(--supportTileSpacing) * 7) + calc(var(--lineSlim) * 2));
	width: var(--width);
	height: var(--height);

	position: relative;
	padding: var(--supportTileSpacing);
	border: var(--standardBorder);
	border-radius: var(--brad);
	color: var(--lightGrey);
	float: left;
}

.supportTile:nth-child(3n) {
	margin-right: 0;
}

.supportTile:not(#createSupport):not(#createContactSupport) {
	text-align: center;
	font-size: 0.75rem;
}

.supportTile:not(#createSupport):not(#createContactSupport) p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 var(--supportTileSpacing);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

#createSupport,
#createContactSupport {
	cursor: pointer;
}

#createSupport,
#createSupport *,
#createContactSupport, 
#createContactSupport * {
	color: var(--darkGreen);
	border-color: var(--darkGreen);
}

#createSupport:hover,
#createSupport:hover *,
#createContactSupport:hover,
#createContactSupport:hover * {
	color: #FFF;
	border-color: var(--highlightGreen);
	background-color: var(--highlightGreen);
}

#createSupport i,
#createSupport p,
#createContactSupport i,
#createContactSupport p {
	width: 100%;
	text-align: center;
	line-height: 1;
}

#createSupport i,
#createContactSupport i {
	font-size: calc(var(--supportTileSpacing) * 3);
	padding-bottom: calc(var(--supportTileSpacing) * 1);
}

#createSupport p, 
#createContactSupport p {
	font-size: calc(var(--supportTileSpacing) * 1);
	margin: 0;
	padding: 0;
}

.supportTile:hover,
.supportTile:hover * {
	color: var(--fontColour);
	border-color: var(--fontColour);
	cursor: pointer;
}

.supportControls {
	width: 100%;
	text-align: center;
	display: none;
}

.supportControls .button {
	display: inline-block;
	float: right;
	padding: 1rem;
	margin: 1rem;
	font-size: 1rem;
	line-height: 1rem;
	border: var(--standardBorder);
}

.supportControls #confirmSupport,
.supportControls #confirmContactSupport {
	border-color: var(--darkGreen);
}

.supportControls #confirmSupport:hover,
.supportControls #cancelSupport:hover,
.supportControls #confirmContactSupport:hover {
	border-color: var(--highlightGreen);
}

.supportControls #deleteSupport {
	border-color: var(--darkRed);
	color: var(--darkRed);
}

.supportControls #deleteSupport:hover {
	border-color: var(--highlightRed);
	background-color: var(--highlightRed);
	color: #FFF;
}

/* Document upload */

#documentContainer {
	width: 100%;
	border-top: var(--standardBorder);
	border-bottom: var(--standardBorder);
	padding-top: calc(var(--documentTileSpacing) * 2);
	padding-bottom: var(--documentTileSpacing);
}

#documentContainer:after {
	clear: both;
	content: '';
	display: block;
}

.documentTile {
	margin-right: var(--documentTileSpacing);
	margin-bottom: var(--documentTileSpacing);

	--offset: calc(var(--documentTileSpacing) * 0.66);
	--width: calc(33% - var(--offset));
	--height: calc(calc(var(--documentTileSpacing) * 7) + calc(var(--lineSlim) * 2));
	width: var(--width);
	height: var(--height);

	position: relative;
	padding: var(--documentTileSpacing);
	border: var(--standardBorder);
	border-radius: var(--brad);
	color: var(--lightGrey);
	float: left;
}

.documentTile:nth-child(3n) {
	margin-right: 0;
}

.documentTile:not(#uploadDocument) {
	text-align: center;
	font-size: 0.75rem;
}

.documentTile:not(#uploadDocument) p {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding: 0 var(--documentTileSpacing);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.documentTile:not(#uploadDocument) .docname {
	font-weight: bold;
}

.documentTile:not(#uploadDocument) .doctype {
	font-style: italic;
}

.documentTile:not(#uploadDocument) .fa-times {
	color: var(--lightGrey);
	font-size: 1.5rem;
	position: absolute;
	top: calc(var(--documentTileSpacing) / 2);
	right: calc(var(--documentTileSpacing) / 2);
}

.documentTile:not(#uploadDocument).delete,
.documentTile:not(#uploadDocument).delete * {
	color: var(--darkRed);
	border-color: var(--darkRed);
}

#uploadDocument {
	cursor: pointer;
}

#uploadDocument,
#uploadDocument * {
	color: var(--darkGreen);
	border-color: var(--darkGreen);
}

#uploadDocument:hover,
#uploadDocument:hover * {
	color: #FFF;
	border-color: var(--highlightGreen);
	background-color: var(--highlightGreen);
}

#uploadDocument i,
#uploadDocument p {
	width: 100%;
	text-align: center;
	line-height: 1;
}

#uploadDocument i {
	font-size: calc(var(--documentTileSpacing) * 3);
	padding-bottom: calc(var(--documentTileSpacing) * 1);
}

#uploadDocument p {
	font-size: calc(var(--documentTileSpacing) * 1);
	margin: 0;
	padding: 0;
}

.documentTile:hover,
.documentTile:hover * {
	color: var(--fontColour);
	border-color: var(--fontColour);
	cursor: pointer;
}

.documentControls {
	width: 50%!important;
	text-align: center;
	display: none;
}

.documentControls .button {
	display: inline-block;
	float: right;
	padding: 1rem;
	margin: 1rem;
	font-size: 1rem;
	line-height: 1rem;
	border: var(--standardBorder);
}

.documentControls #confirmDocument {
	border-color: var(--darkGreen);
}

.documentControls #confirmDocument:hover,
.documentControls #cancelDocument:hover {
	border-color: var(--highlightGreen);
}

.documentControls #deleteDocument {
	border-color: var(--darkRed);
	color: var(--darkRed);
}

.documentControls #deleteDocument:hover {
	border-color: var(--highlightRed);
	background-color: var(--highlightRed);
	color: #FFF;
}

.documentLoader {
	border: var(--standardBorder);
	border-style: dashed;
	border-radius: var(--brad);
	/*margin-bottom: var(--documentTileSpacing);*/
	margin-bottom: 0;
	padding: var(--documentTileSpacing);
	padding-bottom: calc(75% - var(--documentTileSpacing));
	text-align: center;
	width: 100%;
	height: 0;
	position: relative;
	cursor: pointer;
}

.documentLoader.over {
	border-color: var(--darkGreen);
}

.documentLoader * {
	color: var(--lightGrey);
	position: absolute;
	top: 50%;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1;
	left: 0;
}

.documentLoader.uploading,
.documentLoader.uploading * {
	border-color: var(--darkGreen);
	color: var(--darkGreen);
}

.documentLoader i {
	font-size: 4em;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.documentLoader p {
	font-size: 0.8em;
	line-height: 1.25em;
	-webkit-transform: translateY(calc(100% + 1rem));
	-moz-transform: translateY(calc(100% + 1rem));
	transform: translateY(calc(100% + 1rem));
}

.documentLoader input {
	display: none!important;
}

.documentLoader input[read="true"] {
	border-color: var(--darkGreen);
	border-style: solid;
}

/* Address API selector */

.textarea {
	position: relative;
}

/* Calendar selector */

[textType="BirthDate"] textarea:disabled,
[textType="Date"] textarea:disabled,
[textType="DateDeparture"] textarea:disabled,
[textType="DateReturning"] textarea:disabled {
	background: #FFF;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Chrome/Safari/Opera */
	-khtml-user-select: none; /* Konqueror */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

[textType="BirthDate"],
[textType="Date"],
[textType="DateDeparture"],
[textType="DateReturning"] {
	position: relative;
}

[textType="BirthDate"] *,
[textType="Date"] *,
[textType="DateDeparture"] *,
[textType="DateReturning"] * {
	cursor: pointer;
}

[textType="BirthDate"] .fa.fa-calendar-alt,
[textType="Date"] .fa.fa-calendar-alt,
[textType="DateDeparture"] .fa.fa-calendar-alt,
[textType="DateReturning"] .fa.fa-calendar-alt {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 100%;
	padding: 1rem;
	text-align: right;
}

[textType="BirthDate"] .fa.fa-calendar-alt.right,
[textType="Date"] .fa.fa-calendar-alt.right,
[textType="DateDeparture"] .fa.fa-calendar-alt.right,
[textType="DateReturning"] .fa.fa-calendar-alt.right {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 1rem;
	text-align: right;
	width: inherit;
	left: initial;
}

.calendarContainer {
	border: var(--standardBorder);
	border-color: var(--darkGreen);
	padding: var(--profileSpacing);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	border-radius: var(--brad);
	width: 100%;
	background: #FFF;
	display: none;
}

.calendarContainer .calendarDropdowns:after,
.calendarContainer .calendarDays:after {
	clear: both;
	content: '';
	display: block;
}

.calendarContainer .calendarDropdowns {
	padding-bottom: var(--profileSpacing);
	border-bottom: var(--standardBorder);
	margin-bottom: var(--profileSpacing);
}

.calendarContainer .calendarDropdowns > div {
	width: calc(50% - calc(var(--profileSpacing) / 2));
	float: left;
}

.calendarContainer .calendarDropdowns .questionText {
	text-align: center;
}

.calendarContainer .calendarYears {
	margin-left: var(--profileSpacing);
}

.calendarContainer .calendarDays .date {
	position: relative;
	width: calc(100% / 7);
	height: 0;
	padding-bottom: calc(calc(100% / 7) * 0.75);
	float: left;
}

.calendarContainer .calendarDays .date:hover {
	background: rgba(0, 0, 0, 0.25);
}

.calendarContainer .calendarDays .date span {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	white-space: nowrap;
}

/* Date picker */

.bootstrap-datetimepicker-widget {
	border-color: var(--darkGreen);
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	border: var(--standardBorder);
	border-color: var(--darkGreen);
	padding: var(--profileSpacing);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 999;
	border-radius: var(--brad);
	width: 100% !important;
	background: #FFF;
}

.list-unstyled {
	list-style: none;
	padding-left: 0;
}

.bootstrap-datetimepicker-widget table thead th {
	padding-bottom: 0.5rem;
	padding-top: 0.3rem;
}

.bootstrap-datetimepicker-widget table td.new, .bootstrap-datetimepicker-widget table td.old {
	color: lightgray;
}

.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
	color: lightgray;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
	background-color: var(--darkGreen);
	color: #fff;
}

.picker-switch {
	font-weight: normal;
}

/* Date range picker */

.drp-calendar {
	border: var(--standardBorder);
	border-color: var(--darkGreen);
	padding: var(--profileSpacing);
	z-index: 999;
	border-radius: var(--brad);
	width: 100% !important;
	background: #FFF;
	font-size: 18px;
}

.daterangepicker .drp-calendar table td,
.daterangepicker .drp-calendar table th {
	font-size: 18px;
	height: 20px;
    width: 43px;
}


.daterangepicker .drp-calendar table select  {
	font-size: 18px;
}

.daterangepicker .drp-calendar table td.active {
	background-color: var(--darkGreen);
}

.daterangepicker .drp-calendar table td.disabled {
	color: lightgray;
	text-decoration: none;
}

.daterangepicker .drp-calendar table th.month {
	padding-bottom: 0.5rem;
	padding-top: 0.3rem;
}

.daterangepicker .drp-calendar table .next span,
.daterangepicker .drp-calendar table .prev span {
	padding: 4px;
}

.daterangepicker td.off {
	color: lightgray;
}

.label .questionText {
	color: #004085;
	background-color: #cce5ff;
	position: relative;
	padding: 0.75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid #b8daff;
	border-radius: 0.25rem;
}

#continueSubmission {
	margin-right: 1em;
}

.answer-filter {
	width: 100%;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

#FilterTable {
	width: 100%;
	margin-top: 1rem;
	
}

#FilterTable th {
	text-align: left;
}

#FilterTable thead th {
	padding-bottom: 1rem;
}

#FilterTable tfoot th {
	padding-top: 1rem;
	font-size: 1rem;
}

[type=filterselection] input {
	margin-bottom: 0;
}

/* tooltip */
.ui-tooltip {
	background-color: white;
	color: #333333;
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	font-size: 0.9rem;
}

.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}

.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}

.ui-corner-all {
	border-radius: 10px;
}

.ui-helper-hidden-accessible {
	display: none;
}

/* Pre-application tweaks */

[preapp] {
	display: none;
}

.internetBankingDetails {
	padding: 20px;
}

.additional-request input, 
.additional-request textarea,
.additional-request button {
	font-size: 18px;
}

.additional-request div.additional-question {
	margin-bottom: 2rem;
}

.additional-request input[type=text] {
	width: 50%;
}

.additional-request textarea {
	height: 10rem;
}

.additional-request .field-validation-error {
	margin-top: 0.5rem;
	display: block;
	color: var(--darkRed)!important;
	font-size: 16px;
}

/* Underline 3rd option of language question */
.option[questionid="126"][value="75"],
.option[questionid="1614"][value="75"],
.option[questionid="2766"][value="75"],
.option[questionid="3071"][value="75"] {
    border-bottom: 1px solid grey;
}

[data-visual-group="AdditionalMulti"] {
	margin-top: -15px;
}

[req="true"][type="text"][complete="false"]::after,
[req="true"][type="emailconfirm"][complete="false"]::after,
[req="true"][type="dropdown"][complete="false"]::after
{
	content: '*';
	position: absolute;
	right: 15px;
	top: 15px;
	color: var(--darkRed);
}

[req="true"][type="dropdown"][complete="false"]::after,
[req="true"][type="text"][complete="false"][texttype="BirthDate"]::after,
[req="true"][type="text"][complete="false"][texttype="Id"]::after {
	right: 70px
}

[req="true"][type="text"][complete="false"][texttype="DateDeparture"]::after,
[req="true"][type="text"][complete="false"][texttype="DateReturning"]::after {
	right: 50px
}

[req="true"][type="multi"][complete="false"]::before,
[req="true"][type="single"][complete="false"]::before,
[req="true"][type="extratext"][complete="false"]::before
{
	content: '*';
	position: absolute;
	left: -25px;
	top: 5px;
	color: var(--darkRed);
}

[req="true"][type="filterselection"][complete="false"] table::before {
	content: '*';
	position: absolute;
	left: -25px;
	color: var(--darkRed);
}

.logout-fixed {
	position: absolute;
    bottom: 20px;
	left: var(--appPadding);
	right: var(--appPadding);
}

.logout-fixed a,
.logout-fixed a:hover, 
.logout-fixed a:active, 
.logout-fixed a:visited {
	font-size: 0.9em;
	font-style: normal;
	text-decoration: none;
	color: var(--fontColour);
}

.logout-fixed a:nth-child(2) {
	margin-left: var(--appPadding);
}

.logout-fixed .logout-link {
	margin-top: 0;
    padding-left: 0;
	float: right;
}

.copyright {
	margin-top: 1em;
	font-size: 0.6em;
	position: absolute;
	right: 0;
	left: 0;
}

.btn-update-contacts {
	margin: 1rem;
}

p.multi-category {
	font-size: 0.8em;
	font-weight: bold;
	margin-top: 15px
}

#BrowseSubjects {
	margin-top: 16px;
	border: none;
	font-size: 16px;
}

#SubjectListDialog .modal-dialog table {
	width: 100%;
	border-spacing: 0;
}

#SubjectListDialog .modal-dialog table tbody td,
#SubjectListDialog .modal-dialog table tbody th {
	padding-top: 4px;
	padding-bottom: 4px;
}

.subject-status {
	z-index: 1000;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 200px;
	width: 100%;	
	text-align: center;
}

.subject-status .alert {
	width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.find-student {
	position: absolute;
	z-index: 1000;
	right: 30px;
    top: 7px;
}

@media (min-width: 1024px) {
	#SubjectListDialog .modal-dialog {
		max-width: 1000px;
	}

	#SubjectListDialog .modal-dialog table {
		width: 50%;
		display: inline-table;
		border-left: 1px solid var(--lightGrey);
		padding-left: 10px;
	}

	#SubjectListDialog .modal-dialog table colgroup col:first-child {
		width: 80px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
	.modal .modal-content .modal-body {
		max-height: 425px !important;
	}
}