﻿/* Design tokens ------------------------------------------------------------ */
:root {
    /* --font-family-base: Verdana, Helvetica, Arial, sans-serif; */
	--font-family-base: "DM Sans", sans-serif;
    --font-family-heading: "Knockout", sans-serif;
    --font-family-condensed: "Arial Narrow", sans-serif;
    --font-family-display: RudaBold, "Arial Narrow", sans-serif;

    --color-text: #333;
    --color-text-muted: #555;
    --color-table-text: #666;
    /* --color-link: #666633; */
	--color-link: #e2231b;
    --color-link-visited: #707070;
    --color-link-hover: #CC0000;
    --color-heading-secondary: #868855;
    --color-success: green;
    --color-error: red;
    --color-white: #fff;
    --color-black: #000;
    --color-focus-surface: #ffc;
    --color-surface-muted: #f2f2f2;
    --color-readonly-surface: #EBEBE4;
    --color-border: #ccc;
    --color-border-strong: #999;
    --color-border-neutral: grey;
    --color-table-border: #D9D9D9;
    --color-table-header-surface: #E7E7E7;
    --color-brand-burgundy: #86090f;
    --color-brand-orange: #e2231b;
    --color-brand-cream: #F1EEE5;
    --color-brand-earth: #504742;
    --color-brand-border: #D8D3C3;
    --color-spinner: #66ccff;

    --gradient-brand: linear-gradient(90deg, var(--color-brand-burgundy) 0%, var(--color-brand-orange) 100%);

    --space-small: 0.25rem;
    --space-medium: 0.5rem;
    --space-large: 1rem;

    --border-width: 1px;
    --border-width-strong: 2px;
    --border-width-accent: 6px;

    --form-field-gap: 1ex;
    --form-field-gap-sm: 0.5ex;
    --list-indent: 18px;
    --list-indent-ordered: 24px;

	--latrobe-red: #e2231b;
}

html {font-family:var(--font-family-base);}
/* --------------------LTU general html declarations --------------------------*/

/* Override default styling */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, table, tr, th, td {margin:0; padding:0;}

/* ---TYPOGRAPHIC--- */
a:link {color:var(--color-link);}    /* standard link */
a:visited {color:var(--color-link-visited);} /* visited link */
a:hover {color:var(--color-link-hover);}   /* mouse over link */
a:focus {color:var(--color-link-hover);}   /* mouse down link */
a:active {color:var(--color-link-hover);}  /* selected link */

a img,:link img,:visited img { border: none; }
:link img,:visited img, :hover img { text-decoration: none; }
img { border: 0; }
p { padding: 0; margin: 0 0.3em 1.3em 0; }
a img {border:medium none;}

abbr, acronym {cursor:help;}
address {margin:0 0 var(--space-large) 0;}
blockquote {margin:0 0 var(--space-large) 0; padding:var(--space-large); background-color:var(--color-surface-muted);}
cite {display:block; text-align:right;}
code {color:var(--color-success); font-size:130%; display:block; padding:var(--space-medium); background-color:var(--color-surface-muted);}
del {}
em {}

/* Forms */
    button {}

    fieldset {display:block; border-top:none; border-bottom:none; border-left:none; border-right:none; margin:0 0 0 0; padding:0 0 0 0;}
    
    form {}
    input[type="text"], textarea {border-top:var(--border-width) solid var(--color-border-strong);border-left:var(--border-width) solid var(--color-border-strong);border-bottom:var(--border-width) solid var(--color-border);border-right:var(--border-width) solid var(--color-border);}
    input[type="password"], textarea {border-top:var(--border-width) solid var(--color-border-strong); border-left:var(--border-width) solid var(--color-border-strong); border-bottom:var(--border-width) solid var(--color-border); border-right:var(--border-width) solid var(--color-border);}    
/*    input[type="password"] {margin-bottom:0;}*/
/*    input[type="checkbox"], textarea {margin-bottom:0;}*/
    input[type="checkbox"], textarea {margin:0 0 0 0;}
    input:focus, textarea:focus {background:var(--color-focus-surface);} /* style form elements on focus */
/*    input[readonly] {margin-bottom:0;}*/
/*    input[readonly] {background:var(--color-white);}*/
    label {font-weight:normal}
    legend {color:var(--color-link); font-size:1.4em; font-family:var(--font-family-heading); font-weight:bold; line-height:2.5; margin:0 0 0 -1px; padding-right:var(--space-medium);}
    optgroup {}
    select {}
    textarea {}

h1, h2, h3, h4, h5, h6 {font-family:var(--font-family-heading); line-height:1.5;}
/*h1, h2, h3, h4, h5, h6 {font-family:var(--font-family-base); line-height:1.5;}*/
h1 {font-size:1.6em;}
h2 {font-size:1.4em; color:var(--color-heading-secondary);}
h2 a:link {color:var(--color-heading-secondary);}
h3 {font-size:1.2em; color:var(--color-text-muted);}
h4 {font-size:1.1em; color:var(--color-text);}
h5 {font-size:1em; color:var(--color-text);}
h6 {font-size:1em; color:var(--color-text);}

/* Lists */
    body > dd {margin:0 0 0.2em 0; padding:0;}
    body > dd + dt {margin-top:var(--space-medium);}
    dl {margin:0; padding:0.5em 0;}
    dt {margin:0; padding:0; font-weight:bold;}
    ol {padding:0 0 0 var(--list-indent-ordered); margin:0.5em 0 0.5em 2em;}
    ol li {padding:0 0 0.2em 0;}
    ol ul {padding-top:0.3em; margin:0 0 0 0.4em;}
    ol ol {margin:0.3em 0 0 0.4em;}
    ul {padding:0 0 0 var(--list-indent); margin:0.5em 0 0.5em 2em; list-style-type:square;}    
    ul li {padding:0 0 0.21em 0;}    
    ul ul {margin:0.3em 0 0 0.4em; list-style-type:square;}
    ul ol {padding-top:0.3em; margin:0 0 0 0.4em;}

p {margin:0 0 1em 0;}
p + p {margin-top:-5px;}
pre {font-size:130%;}
q {}
samp {color:var(--color-success); font-size:130%; display:block; margin-bottom:var(--space-large); padding:var(--space-medium); background-color:var(--color-surface-muted);} strike {} sub {font-size:80%;} sup {font-size:80%;}

/* Tables */
/*    table { border:var(--border-width) solid var(--color-table-border); font-family:var(--font-family-heading); border-collapse:collapse; width:100%; line-height:1.4em; margin-bottom:1.5em; }*/
    table { border:var(--border-width) solid var(--color-table-border); font-family:var(--font-family-heading); border-collapse:collapse; width:100%; line-height:1.4em; }    
    #content form table {border:0 solid var(--color-white)!important; }

    table th { border:var(--border-width) solid var(--color-border); font:bold 110% var(--font-family-heading); color:var(--color-table-text); background-color:var(--color-table-header-surface); padding:var(--space-small); vertical-align:top; text-align:left; }
    table td { border:var(--border-width) solid var(--color-table-border); padding:var(--space-small) var(--space-small) var(--space-medium) var(--space-small); vertical-align:top; }
    table caption { color:var(--color-table-text); font:bold 120% var(--font-family-heading); text-align:left; padding-top:var(--space-small); padding-bottom:var(--space-medium); }
    tt {font-size:130%;}

/*---------------------------------------------------------------------------- */
#maincontent
{
	padding: 0 0 1.3em 1.3em;	
}
#aspnetForm
{
	margin: 0;
}

input, select, textarea
{
	vertical-align: top;
}

textarea
{
	font-size: small;	
}

fieldset.fieldset
{
	border: none;
}

fieldset.fieldset legend
{
	display: none;
}

.buttonArea
{
	margin-left: 20ex;
}

.button, button
{
}

.fieldLabel, .field, .wideField, .readOnlyField, .wideReadOnlyField, .autoSize
{
    display: inline-block;    
}

.nowrap
{
	white-space: nowrap;
}

.autoSize
{
	width: auto;
}

.field, .wideField, .readOnlyField, .wideReadOnlyField, .autoSize
{
	margin-right: var(--form-field-gap);
/*	margin-bottom: var(--form-field-gap);*/
}

.fieldLabel
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	vertical-align: top;
}

.fieldLabel span
{
	display: block;
}

.fieldLabel, .fieldLabel span
{
	width: 20ex;
}

.field, .readOnlyField
{
	width: 31ex;
}

.mediumReadOnlyField
{
	width:40ex;
}

.wideField, .wideReadOnlyField
{
	width: 81ex;
}

.readOnlyField, .wideReadOnlyField
{
	border-style: groove;
	background-color: var(--color-readonly-surface);
	color: var(--color-black);
}

.validator, .validatorSummary
{
	color: var(--color-error);
	margin-bottom: var(--form-field-gap);
}

.validator
{
	background: url(Images/Error.gif) no-repeat;
	padding: 0 var(--form-field-gap);
}

.validator .validatorText
{
	visibility: hidden;
}

.clear
{
	clear: both;
}

.invisible
{
	display: none;
}

.fieldLabelTrim
{
    display: inline-block;    
}

.fieldLabelTrim
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 19.25ex;
	vertical-align: top;	
}

.fieldLabelLight, .fieldLabelWide
{
	display: inline-block;
}

.fieldLabelLight
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 20ex;
	vertical-align: top;
	color:var(--color-white)	
}

.fieldLabelWide
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 30ex;
	vertical-align: top;	
}

.fieldLabelWideInPanel
{
	display: inline-block;
}

.fieldLabelWideInPanel
{
	margin-bottom: var(--form-field-gap-sm);
	white-space: normal;
	width: 29.1ex;
	vertical-align: top;
	margin-inline-end: -0.8ex;
}

/* FieldLabelXWide */
.fieldLabelXWide
{
    display: inline-block;    
}

.fieldLabelXWide
{
     margin-bottom: var(--form-field-gap);
     white-space: normal;
     vertical-align: top;
}

.fieldLabelXWide span
{
     display: block;
}

.fieldLabelXWide, .fieldLabelXWide span
{
     width: 40ex;
}
/* End fieldLabelXWide */

/* FieldLabel35exWide */
.fieldLabel35exWide
{
    display: inline-block;    
}

.fieldLabel35exWide
{
/*     margin-bottom: var(--form-field-gap);*/
     white-space: normal;
     vertical-align: top;
}

.fieldLabel35exWide span
{
     display: block;
}

.fieldLabel35exWide, .fieldLabelXWide span
{
     width: 35ex;
}
/* End fieldLabel35exWide */

.fieldLabelSmall
{
    display: inline-block;    
}

.fieldLabelSmall
{
	margin-bottom: var(--form-field-gap);
	width: 10ex;
	vertical-align: top;
}

.fieldLabelXWide2
{
	display: inline-block;
}

.fieldLabelXWide2
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 50ex;
	vertical-align: top;
}
.fieldLabelXXWide
{
	display: inline-block;
}

.fieldLabelXXWide
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 60ex;
	vertical-align: top;
}

.fieldLabelXXXWide
{
	margin-bottom: var(--form-field-gap);
	margin-right: 1em;
	white-space: normal;
	vertical-align: top;
	
}

.fieldLabel70exWide
{
	display: inline-block;
}

.fieldLabel70exWide
{
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 70ex;
	vertical-align: top;
}

.fieldLabel67exWide
{
	display: inline-block;
	margin-bottom: var(--form-field-gap);
	white-space: normal;
	width: 56ex;
	font-size: 1.2em;
	/*vertical-align: top; */
}


.fieldLabelMid
{
	display: inline-block;
}

.fieldLabelMid
{
/*	margin-bottom: var(--form-field-gap);*/
	white-space: normal;
	width: 24ex;
	vertical-align: top;

}

.fieldCongrats
{
	text-align: center;
	font-weight: bold
	
}

.tallField
{
    height: 20ex;
}

.fieldLabelCBO
{
	width: 20.5ex;
}

.readOnlyAutoSizeField
{
    display: inline-block;    
}

.readOnlyAutoSizeField
{
	width: auto;
	margin-right: var(--form-field-gap);
	margin-bottom: var(--form-field-gap);
	/* border: solid var(--border-width) #7F9DB9;
	background-color: #DBE1F9;
	color: var(--color-black);	*/
	border-style: groove;
	background-color: var(--color-readonly-surface);
	color: var(--color-black);	
}

.readOnlyField
{
    display: inline-block;  
}

.readOnlyField
{ 
	margin-right: var(--form-field-gap);
/*	margin-bottom: var(--form-field-gap);*/
}

.smallField
{
	width: 5ex;	
}

.veryNarrowField
{
	width: 6ex;	
}

.narrowField
{
	width: 14ex;	
}

.mediumField
{
	width: 40ex;	
}

.largeField
{
	width: 45ex;
}

.largerField
{
	width: 61ex;
}

.wideField
{
	width: 81ex;
	width: 100%;
}

.widerField
{
	width: 85ex;
	margin-right: var(--form-field-gap);
	margin-bottom: var(--form-field-gap-sm);
}

.xWideField
{
	width: 101ex;
}



/* @font-face {
    font-family: 'RudaBold';
    src: url('//www.latrobe.edu.au/_designs/corporate/fonts/ruda-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
} */

body {
	/* font: 76%/1.3 var(--font-family-base); */
	margin:0;
	/* padding:var(--space-medium); */
}

#ltu-logo {float:left;}
#ltu-logo img {border:none;}
#ltu-utility {border:var(--border-width) dotted var(--color-border); float:right; font:12px var(--font-family-base); margin:var(--space-small) 0 var(--space-large) 0; padding:var(--space-large); vertical-align:top; width:250px;}

#ltu-header {
background: var(--color-brand-burgundy);
background: var(--gradient-brand);
clear:both;
padding-bottom:var(--space-small);
}
/*#ltu-header p {background-color:var(--color-text); color:var(--color-white); font:var(--space-large)/60px RudaBold,var(--font-family-condensed); margin:0; overflow:hidden; text-indent:var(--space-large); text-transform:uppercase;}*/
#ltu-header p {background-color:var(--color-brand-cream); color:var(--color-brand-earth); font:24px/60px var(--font-family-condensed); margin:0; overflow:hidden; text-indent:var(--space-large); text-transform:uppercase;}
#ltu-header img {float:left;}

#ltu-app-nav {background-color:var(--color-brand-cream); font:14px var(--font-family-display); height:auto; list-style-type:none; margin:0; overflow:auto; padding:0; text-transform:uppercase;}
#ltu-app-nav li {display:block; float:left; line-height:32px; margin:0; padding:0;}
#ltu-app-nav a {border-right:var(--border-width) solid var(--color-brand-border); color:var(--color-text); display:block; margin:0; padding:0 var(--space-medium); text-decoration:none;}
#ltu-app-nav a:hover {background-color: var(--color-brand-orange); color:var(--color-brand-earth);}

#ltu-help  {float:right; font:11px var(--font-family-base); text-align:right; padding: var(--space-small) 0 0 0;}

#ltu-footer {border-top:var(--border-width-accent) solid var(--color-link-hover); font:11px var(--font-family-base); overflow:hidden; padding-top:var(--space-large);}
#ltu-footer ul {list-style-type:none; margin:0; overflow:hidden; padding:0;}
#ltu-footer li {display:inline; padding-right:var(--space-large);}
#ltu-footer a {color:var(--color-text);}
#ltu-footer a:visited {color:var(--color-text);}
#ltu-flag {float:right;}
#ltu-flag img {border:none;}
#ltu-copyright {clear:both; margin-bottom:var(--space-large); overflow:hidden;}
#iru {float:right;}
#iru img {border:none;}

@media screen and (max-width:767px) {
  #ltu-logo {float:none;}
  #ltu-utility {float:none; width:auto;}
  #ltu-app-nav li {float:none; border-bottom:var(--border-width) solid var(--color-brand-cream);}
  #ltu-app-nav a {border-right:none;}
  li#ltu-flag {display:block; float:none; margin-top:var(--space-large);}
  #iru {margin-top:var(--space-large);}
}

#pwdStrength, #pwdCompare {
	/*
	position:relative;
	float:left;
	margin-left: var(--space-small);
	vertical-align: middle;
	display: inline;
	*/
}

#registeredBlock {
	display: inline-block;
	border-style: solid;
	border-width: var(--border-width);
	border-color: var(--color-black);
}

#registeredLabel {
	font-size: 0.9em;
	line-height: 14px;
	width: 440px;
	padding: var(--border-width-strong);
}

.registeredCombo {
	border-color: var(--color-white);
	float: right;
	width: 440px;
	padding-top: var(--space-medium);
	padding-left: var(--space-medium);
	padding-right: var(--space-medium);
	padding-bottom: var(--border-width-strong);
}

#passwordTxt, #passwordTxt2
{
	float:left;
}

.clear
{
	clear: both;
}

#appIDDesc, #firstNameDesc, #familyNameDesc, #emailDesc, #birthDateDesc
{
	margin-left:25ex;
}
#emailMsg
{
/*	margin-top:0;*/
/*	margin-left:36ex;*/
	margin-left:41ex;
}
#pwdError {
	/*	margin-left:36ex; */
	margin-left: 41ex;
}
#pwdReq
{
/*	margin-left:36ex; */
	margin-left:41ex;	
}
#pwdReq2
{
	margin-left:36ex;
}

#showPwd 
{
        padding-left:var(--space-small);
        padding-top:var(--border-width-strong);
        float:left
}
#birthDay
{/*	padding-right:3ex;*//*	padding-right:23px;*/width:7ex;float:left;}
#birthMonth
{
/*	padding-right:9ex;*/
/*	padding-right:65px;*/
	width:16ex;
	float:left;
}
#birthYear
{
	float:left;
}

.btnForgot
{
/*	margin:0 0 0 1ex; */
	margin:0 0 0 0;
 
}
.btnStudentOnline
{
/*	margin-left:2ex;*/
	margin:0 0 0 10ex;
		
}
.fieldLblForgotPWD
{
	display: inline-block;
	margin:0 0 var(--form-field-gap) 0;
	white-space: normal;
	width: 64ex;
/*	margin-right: 28ex;*/
	font-size: 1.2em;
	font-weight:bold;
	/*vertical-align: top; */
}
.fieldCongrats
{
	display: inline-block;
	margin-bottom: var(--form-field-gap);
	white-space: normal;
/*	width: 56ex;*/
/*	margin-right: 28ex;*/
	font-size: 1.2em;
	font-weight:bold;
	/*vertical-align: top; */
}

.pwdReqHeading
{
	font-weight: bold;
	padding-top: 1.25rem;
}



#pass2 
{
	/* display: grid; */
	vertical-align:middle;
	grid-template-columns: 2fr 1fr;
}
.errorMsg
{
    vertical-align: middle;
    font-weight:bold;
    color:var(--latrobe-red);	
    display:inline;
}

.loading {
    overflow:hidden;
}
#popup {
/*    
    background-color:rgba(0,0,0,0.8); 
    bottom:0; left:0; position:absolute; right:0; top:0;
*/
  position: absolute;
  width: 300px;
  height: 100px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: var(--color-white);
  border-width:var(--border-width-strong);  
  border-style:groove;
  border-color:var(--color-border-neutral);

  /*
    left:100px;right:100px;
    width:220px;
    height:110px;
*/
}
#popUpMsg {
    
    font-size:1.2em;
    color:var(--color-text-muted);
    font-family:var(--font-family-heading); 
    float: left;
/*    left:var(--space-medium);
    top:var(--space-medium);
    bottom:var(--space-large);
    right:var(--space-medium);
*/
    padding-top:var(--space-large);
    padding-left:var(--space-large);
    text-align:center;

}
.spinner {
  margin-left: -35px;
  width: 70px;
  position: absolute;
  left:50%;
  top:50%;
  text-align:left;
}

.spinner > div {
  width: 18px;
  height: 18px;
/*  background-color: var(--color-white);*/
  background-color:var(--color-spinner);

  border-radius: 100%;
  display: inline-block;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  animation-fill-mode: both;
}
.spinner span {display:block;}

.alert {color:var(--color-error);}
.spinner .bounce1 {
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  animation-delay: -0.16s;
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
  }
}

/* Overrides */

.fieldLabelMid {
  font-weight: bold;
}

#aspnetForm {
	background-color: white;
	margin:0;
}

#maincontent {
	padding: 0;
}

.asp-form-wrapper {
		background: #eee;
		/* max-width: 50%; */
		max-width: 50rem;
		margin: 0 auto;
		border-radius: 2rem;
		padding: 1rem 4rem;
		padding-bottom: 4rem;
		margin-bottom: 4rem;
}

.asp-form-wrapper > * {
	/* display: flex; */
	/* width: 100%; */
	margin-left: 0;
}

.asp-form-wrapper input[type="text"],
.asp-form-wrapper input[type="password"],
.asp-form-wrapper [id*="Content_ddl"] {
	border: solid 2px #999;
	border-radius: .5rem;
	padding: 1rem;
}


.asp-form-wrapper > input {
	/* width: 100%; */
}

.asp-form-wrapper [id*="Content_ddl"] {
	padding: .5rem 1rem;
	width: 100%;
}

.asp-form-wrapper > [id*="lbl"] {
	width: 100%;
	margin-bottom: .25rem;
}

.asp-form-wrapper > [id*="lbl"]::after {
	content: "*";
	color: #e2231b; /* change to brand color */
	margin-left: .25rem;
}

.asp-form-wrapper label[id*="Content_lbl"],
.asp-form-wrapper [id*="ctl00_Content_lbl"] {
	display:block;
	font-weight: bold;
	margin-top: 1.5rem;
}

.asp-form-wrapper .checkboxes {
	display: flex;
	gap: .5rem;
	margin-top: 2rem;
}

.asp-form-wrapper .checkboxes label {
	margin-top: 0;
}


#appIDDesc, #firstNameDesc, #familyNameDesc, #emailDesc, #birthDay, #birthMonth, #birthYear, #birthDateDesc {
	/* outline: dotted 3px red; */
	margin-left: .25rem;
	margin-top: .25rem;
	font-size: smaller;
}

#birthDateDesc {
	margin-top: .5rem;
}

.aspform-header {
	display: flex;
	margin: 0 auto;
	padding-left: 4rem;
	padding-right: 4rem;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	max-width: 1640px;
	justify-content: space-between;
	align-items:center;
}

.aspform-links ul {
	font-family: "Knockout";
	text-transform: uppercase;
	color: #242424;
	display: flex;
	gap: 2rem;
	list-style-type: none;
	margin-top: 0;
	padding-left: 0;
}

.aspform-links a {
	color: #242424;
	text-decoration: none;
}

.aspform-links a:hover {
	color: #242424;
	border-bottom: solid 2px var(--latrobe-red);
}

#ltu-logo {
	float: none;
	width: 300px;
}

#ltu-logo > a {
	display: inline-block;
} 

#ltu-logo img {
	height: 4rem;
}

.date-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
}

h1, h2, h3, h3, h5, h6 {
	color: #242424;
}

.ltu-checkbox input[type="checkbox"],
input.ltu-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid #999;
	border-radius: 50%;
	background: #fff;
}

	.ltu-checkbox input[type="checkbox"]:checked,
	input.ltu-checkbox:checked {
		border-color: #999;
		background: radial-gradient(circle, #999 0 42%, white 44%);
	}

.checkboxes label {
	display: block;
	float: left;
	padding-right: var(--space-medium);
}
	
.checkboxes input {
	vertical-align: middle;
}

.checkboxes label span {
	vertical-align: middle;
}

	/* Small screen overrides */
	.wideField {
		width: 100%;
	}

/* Fix html hierarchy */
#maincontent h1 {
	/* outline: dotted 2px green; */
	margin-bottom: 0;
}

#maincontent h2, #maincontent h3 {
	/* outline: dotted 2px blue; */
	text-align: left;
	display: block;
	margin: 0 auto;
	max-width: 70rem;
}

/* Center override. Left override above */
#maincontent h2 {
	text-align: center;
	font-size: 2.6667rem;
}

input[type="button"].ds-btn-primary {
	background-color: var(--latrobe-red);
	color: white;
	margin-top: 3rem;
}

.proof-points-card__card-item {
	text-align: center !important;
}

input[type="button"].ds-btn-primary:hover,
#Content_btnSubmit:active,
#Content_btnSubmit:focus,
#ctl00_Content_btnSubmit:active,
#ctl00_Content_btnSubmit:focus {
	background-color: #b51c16;
}

@media ( max-width: 2000px) {
	body {
		/* background: pink; */
	}

	.asp-form-wrapper {
		/* max-width: 50rem; */
	}
}

#ltu-footer, .legal {
	background: #242424;
	color: white;
	/* margin: 0 auto; */
	padding: .5rem;
}

#ltu-footer {
	padding-left: 3rem;
	border-top: none;
}

#ltu-footer a, .legal a {
	color: #fff;
}

#ltu-footer .legal {
	margin-top: .25rem;
	margin-bottom: 1rem;
}

.help-note {
	margin: 0 auto;
	text-align: center;
	padding: 2rem 0;
	font-weight: bold;
}

.help-note p {
	margin: 0 auto 1rem;
	font-size: 1.25rem;
	text-align: left;
}

#MessageError {
	color: var(--latrobe-red);
}

#MessageErrorBlack {	
	color: black;
}

.MessageErrorBox {
	display: flex;
	border: solid 2px var(--latrobe-red);
	border-radius: .5rem;
	/* border-left: 6px solid var(--latrobe-red);
	border-bottom-right-radius: .5rem;
	border-top-right-radius: .5rem; */
	width: 100%;
	padding: 2rem;
	padding-top: 0rem;
	padding-left: 1rem;
	padding-bottom: 1rem;
	box-shadow: 5px 6px 10px #0000000d;
}

.MessageErrorBox br {
	display: inline-block;
	height: 4px;
}

span#Content_lblMessageError,
span#ctl00_Content_lblMessageError {
	padding-bottom: 1rem;
	color: var(--latrobe-red);
}

.password-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-family: sans-serif;
}

.password-toggle input {
  position: absolute;
  opacity: 0;
}

.password-toggle-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Default state */
.eye-open {
  display: none;
}



/* Checked state */
.password-toggle input:checked ~ .eye-closed {
  display: none;
}

.password-toggle input:checked ~ .eye-open {
  display: inline-block;
}

.password-elements {
	display: grid;
	align-items: center;
	/* flex: 1 1 0; */
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
}

.password-toggle {
	font-size: smaller;
}

#copy-student-id,
.password-toggle {
	border: none;
	outline: none;
	background: none;
}

#copy-student-id {
	color: #398712;
	cursor: pointer;
	gap: .25rem;
    display: inline-flex;
    align-items: center;
}

#copy-student-id svg {
	width: 32px;
	height: 32px;
}

#student-id {
	font-size: 2rem;
	color: #398712;
}

.stepper {
	height: 2rem;
	display: flex;
	gap: 3rem;
	margin: 0 auto;
	margin-top: 3.5rem;
	margin-bottom: .5rem;
	text-align: center;
	justify-content: center;
}

.step {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: solid 3px var(--latrobe-red);
	position: relative;
}

.step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -3.25rem;
  top: 45%;
  height: 3px;
  width: 3.25rem;
  background: var(--latrobe-red);
}

.step.step--filled {
		background: var(--latrobe-red);
}

#pwdReq {
	margin-left: 0;
	clear: both;
}

#pwdReq ul {
	list-style-type: disc;
}

#pwdReq ul li ul {
    list-style-type: circle;
}

#pwdReq svg {
	vertical-align: bottom;
}


#pwdReq.error-state {
	color: var(--latrobe-red);
}

#Content_lblStudentID,
#ctl00_Content_lblStudentID {
	display: block;	
	font-weight: bold;
}

.username-confirmation,
.student-id-elements {
	max-width: 42rem;
	margin: 0 auto;
}

.username-confirmation {
	display: flex;
	align-items: self-start;
	gap: 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	margin-top: 2rem;
}

.student-id-elements {
	margin-top: 2rem;
    margin-bottom: 2rem;
}

#stuID p,
[id*="txtStudentID"] p,
.username-confirmation p {
	margin: 0;
}

.username-confirmation svg {
	color: #398712;
	vertical-align: middle;
	width: 32px;
	height: 32px;
}

input[type="text"][id*="txtStudentID"] {
	border: none;
	outline: none;
	color: #398712;
	font-size: 2rem;
	max-width: 10rem;
	padding: 0;
	background: transparent;
}

[id*="txtStudentID"]:focus {
	background: none;
}

#pwdError {
	display: block;
	margin-left: 0;
}

#pwdError .errorMsg ul {
	list-style-type: disc;
}

#pwdCompare span {
	margin-left:0;
	color:var(--latrobe-red);
}

/* createPassword page */
#passwordTxt,
#passwordTxt2 {
	width:100%;
}

#emailMsg {
	margin-left: 0;
	margin-bottom: 2rem;
}

#emailMsg p {
	margin-bottom: 1rem;
}

#Content_btnSubmit,
#Content_btnStudentOnline,
#ctl00_Content_btnSubmit,
#ctl00_Content_btnStudentOnline {
	clear: both;
	margin-top: 2rem;
	padding-right: 3rem;
    background: url(Images/chevron-right.svg) no-repeat 90% 50% var(--latrobe-red);
    background-size: 20px 20px;
}

#Content_btnStudentOnline,
#ctl00_Content_btnStudentOnline {
	margin-top: 0;
}

[data-component-name=indigenous-acknowledgement].component-container {
    background-color: #eee;
}

.help-note a,
.help-note a:visited,
.asp-form-wrapper a,
.asp-form-wrapper a:visited {
	color: var(--latrobe-red);
}

.subheading {
    margin: 1.5rem auto 0 !important;
    font-size: 1.25rem;
    font-weight: 400;
    text-align: center;
}

.subheading a,
.subheading a:visited {
	color: white;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none !important;
}
