body {
	min-height: 100vh;
	position: relative;
	box-sizing: border-box;
	padding-bottom: 135px;
	background-image: url(/images/graphpaper.svg);
	background-repeat: repeat;
	min-width: 100vw;
	font-family: "Lato";
	color:#333f4b;}

.mobileMenu {z-index:10; position:absolute; width:100%; background-color:#4b90d3;display: block; 
	top:-100%; transition: top .2s ease-in-out; box-shadow: 0px 3px 3px rgba(0,0,0,0.6);}
.mobileMenu .mobileClose {position:absolute; right:10px; top:10px; color:#fff; font-size:2.5em;display: inline-block;height: 40px;line-height: 1em;}
.mobileMenu>ul {list-style-type:none; margin:60px 0 0 0; padding:0;}
.mobileMenu>ul>li {width:100%; border-top:1px solid #6ea7de;}
.mobileMenu ul li ul {list-style-type:none; display:none;margin:0; padding:0; width:100%;}
.mobileMenu ul li ul li {border-top:1px solid #6ea7de;}
.mobileMenu ul li ul li a {display:block; box-sizing:border-box; height:49px; padding:15px; padding-left: 40px; opacity:0.8;  font-weight:bold;
	text-transform:uppercase; color:#fff;background-color:#4b90d3;}
.mobileMenu>ul>li>a {display:block; width:100%; box-sizing:border-box; height: 49px; padding: 15px; color:#fff; opacity:0.8; 
	text-transform:uppercase; font-size: 0.925em; font-weight:bold;}
.mobileMenu>ul>li.pupil {background-color:#353f4b;border-top-color: #49535d;}
.mobileMenu>ul>li:last-child {height: 49px; border-bottom:1px solid #6ea7de; margin-bottom:3px;}
.mobileMenu>ul>li.pupil>a {opacity:1; padding-left:35px; position:relative;}
.mobileMenu>ul>li.pupil>a::before {content:"\f0d7"; font-family:"Font Awesome 5 Pro"; position:absolute; top: 13px; 
	left:14px; font-size:1.2em; font-weight:700;}
.mobileMenu>ul>li.pupil.selected>a::before {content:"\f0d8";}
.mobileMenu>ul>li.pupil.selected ul {display:block;}
.mobileMenu.open {top:0px;}

header, footer {
	height: 112px;
	background-image: url(/images/headerFooter.svg);
	background-repeat: no-repeat;
	background-position: center bottom;}
header {
	background-color: white;
	height: 248px;
	background-position: center -112px;
	box-sizing: border-box;
	padding-top: 130px;}
footer {
	background-position: center top;
	height: 135px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100vw;}
body.observation footer {height:200px; background-position-y:70px;}
body.observation {padding-bottom:200px;}
footer, .contentWrapper {
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;}

.lcpLogo {
	float: left;
	display: block;
	background-image: url(/images/itrackeducationlogo.png);
	height: 60px;
	background-repeat: no-repeat;
	background-size:contain;
	width: 250px;
	margin-left: 20px;
	margin-bottom: 15px;}
.utilityMenu {
	list-style-type: none;
	margin: 5px 20px 0px 0px;
	padding: 0;
	display: flex;
	float: right;
	justify-content: space-between;}
.utilityMenu li {
	margin-left: 20px;
	flex: 1;}
.utilityMenu li a {
	color: #333f4b;
	text-align: center;
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-size: 0.65em;}
.utilityMenu li a i {font-size: 2.7em;/* line-height: 1em; */; margin-bottom: 3px;}
.utilityMenu li.mobileTrigger {margin-top:-10px;}
.utilityMenu li.mobileTrigger a i {font-size:3em;}
.utilityMenu li a:hover {text-decoration: none;}
.utilityMenu li:not(.mobileTrigger) {display: none;}

.headerBar {
	border-bottom: 3px solid #333f4b;
	clear: left;
	background: #3e76af; /* Old browsers */
	background: -moz-linear-gradient(top, #3e76af 0%, #2989d8 39%, #2989d8 39%, #4b90d3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #3e76af 0%, #2989d8 39%, #2989d8 39%, #4b90d3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #3e76af 0%, #2989d8 39%, #2989d8 39%, #4b90d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3e76af', endColorstr='#4b90d3', GradientType=0 );
	box-sizing: border-box;
	height: 50px;
	float: left;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;}
.headerBar .switcher {
	display: flex;
	color: #fff;
	text-transform: uppercase;
	flex: 1;
	align-content: center;
	padding-left: 20px;
	font-size: 0.9em;align-items: center;
	position:relative;}

.headerBar .switcher .selectedPupil {display:inline-block; margin-left: 20px; font-weight:bold;cursor: pointer;}
#pupilSwitcherLink {margin-left: 10px;font-size: 1.4em;vertical-align: baseline;color: #fff;display: inline-block;}
.switcher ul,.selector ul {display:none;box-shadow: 3px 3px 3px rgba(0,0,0,0.5);list-style-type:none; margin:0; padding:0; position:absolute; top:30px; left:100px; z-index:5; border: 1px solid #4c5660;}
.switcher li a,.selector li a {background-color: #353f4b; display:block; padding: 10px 40px 10px 20px; border-bottom: 1px solid #4c5660; color:#fff;}
.switcher li:last-child a,.selector li:last-child {border-bottom:0px;}
.switcher li.selected a,.selector li.selected a {background-color:#2a6394;}
.headerBar .newObservation {display: none;}

table .tdCenter {text-align:center;}
table th[scope="col"] {text-align:center;}
table.pupilTracking {border:0; font-size: 0.9em;}
table.pupilTracking thead th {vertical-align:middle; min-width:60px;}
table.table-sm th[scope="col"] {padding-left:.5rem; padding-right:.5rem;}

.contentWrapper {
	background-color: white;
	position: relative;
	border-bottom: 3px solid #333f4b;
	padding-top: 25px;
	padding-bottom: 50px;}
.contentWrapper::after, .contentWrapper::before {
	content: "";
	width: 100%;
	position: absolute;
	bottom: -1px;
	height: 1px;
	background-color: #333f4b;
	left: 0px;
	opacity: 0.4;}
.contentWrapper::before {bottom: 0px;}

input[type="text"], input[type="password"], textarea {
	-webkit-appearance: none;
	border: 1px solid #e7e8ea;
	background-color: white;
	box-sizing: border-box;
	width: 100%;
	padding: 8px;
	box-shadow: inset 0px 3px 3px 0px rgba(0, 0, 0, 0.2);max-width: 576px;}
textarea {height:100px;}

.btn {
	padding: 7px 24px;
	border-radius: 20px;font-size: 0.8em;}
.btn-primary {
	background-color: #269899;
	border-color: #269899;
	text-transform: uppercase;}
.btn-primary:hover {
	background-color: #2a8b8c;
	border-color: #2a8b8c;}

h1 {
	font-size: 1.1em;
	text-transform: uppercase;
	font-weight: bold;
	color:#3374aa;}
.contentWrapper.error h1 {font-size:2em; margin: 10px auto; text-align:center;}
h1.underline, h2.underline {
	padding-bottom: 20px;
	border-bottom: 2px solid #3675ab;
	margin-bottom: 20px;
	position:relative;font-weight: bold;}

h2 {color:#3374aa; font-size:1em; text-transform:uppercase; font-weight: bold;margin-bottom: 0px;}
h2.underline {text-transform:none; font-size:1.1em}
h3 {font-size: 0.85em; margin-top:0px;}
h3+h2 {margin-top:30px;margin-bottom: 15px;}
p, label {font-size: 0.8em;}
.observationNotes p {font-size:1em; padding-top:1em; font-weight:bold;}
p.observationDate {font-weight:bold; text-transform:uppercase; margin-bottom:0px;}
p.observationDate+p {margin-top:0px;}


label {
	margin-bottom: 2px;
	text-transform: uppercase;
	font-weight:bold;}

form > div {
	margin-bottom: 10px;display: flex;flex-wrap: wrap;
	max-width:576px; position:relative;}
#observationDataForm > div {margin-bottom:20px;}

form > div > label, form>div>input[type="text"],form>div>textarea {flex-basis:100%;}
form:not(.thinForm)>div>input[type="text"], form:not(.thinForm)>div>textarea, form:not(.thinForm) input[type="password"] {font-size: 0.9em;}
form > div > label::after, .photoTriggerWrapper > div:first-child::after {content:":";}
form div.submit {text-align: right; margin-bottom: 20px;}

.uploads {max-width:576px;}
.photoTriggerWrapper {display:flex; flex-wrap:nowrap;}
.photoTriggerWrapper > div {flex:1;}
.photoTriggerWrapper > div:last-child {text-align:right;}
.photoTriggerWrapper > div:first-child {text-transform:uppercase; font-size:0.8em; font-weight:bold;}
form > div > input.datepicker {
	position:relative;
	flex-basis:	175px;}
input.datepicker + span {
	display:block;
	position:absolute;
	width:16px;
	height:16px;
	top:26px;
	left:150px;}
input.datepicker + span::after {
	content:"\f073";
	font-family:"Font Awesome 5 Pro";
	color:#858e95;
	position:absolute;
	top:0px;
	left:0px;}

.thinForm {max-width: 480px; margin: 0 auto;}

.pass {color: rgb(0, 213, 0);}
.fail {color: rgb(198, 14, 23);}

.pageMenu {display: none;}

.pupilPhoto img {width:45px; height:45px;}
.pupilPhoto {width:48px; height:48px; overflow:hidden; border-radius:50%; border:3px solid #fff;}
h1 .pupilPhoto, h2 .pupilPhoto {position:absolute; right:0px; bottom:calc(-24px);}
.observationsList,.reportsList {list-style-type:none; margin:0; padding:0;max-width: 576px;}
.observationsList li,.reportsList li {display:flex; align-items:stretch; flex-wrap:nowrap; border-top:2px solid #c8cfd7; position:relative; box-sizing: border-box;
/* padding:15px 0px; */}
.observationsList li {padding:15px 0px;}
.observationsList li:last-child:not(.obsNav),.reportsList li:last-child:not(.obsNav) {border-bottom:2px solid #c8cfd7;}
.observationsList li.obsNav a {margin:0 auto; margin-top:10px;}
.observationsList li.over {background-color:rgba(0,0,0,0.05);}
.observationsList li>a:not(#showButton) {position:absolute; display:block; top:0px; left:0px; width:100%; height:100%; z-index:2;}
.observationsList li .observationPhoto {background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	width: 100px;
	height: 75px;
	border:1px solid #252c3f;}
.observationsList li .observationPhoto.noPhoto {
	background-image:none;
	position:relative;
	/* background-color:#f3f3f3; */
	/*border-color:#fff !important;*/; border: 0px;}
.observationsList li .observationPhoto.noPhoto::before {font-weight:900; content: "\f249"; 
	font-family:"Font Awesome 5 Pro"; color:#fef9bf; font-size:5.5em; position:absolute; 
	top:calc(50% - 34px); left:calc(50% - 13px); margin-top:-34px; margin-left:-25px;}


.observationsList li .observationText {margin-left:15px;font-size: 0.8em;color: #343e48;}
.observationsList li .observationText strong {font-size:1.1em;}
.reportsList li a.reportLink {position:relative; display:block; width:100%; padding: 15px 20px 15px 60px;color: #343e48;font-size: 0.8em;font-weight: bold;}
.reportsList li a.reportLink::before {content:"\f1c1"; font-family: "Font Awesome 5 Pro"; font-size: 2.4em; position:absolute; left:10px; top: calc(50% - 23px);font-weight: 300;}
.reportsList li a.reportLink em {font-style:normal; font-weight:normal; font-size:0.95em;}
.reportsList li a.reportLink:hover {background-color:rgba(0,0,0,0.05);}

#uploads {list-style-type:none; /* width:300px; */ margin:0; padding:0;}
#uploads::after {clear:both; content:""; display:table;}

#photoForm #uploads {margin-left:20px;}

#uploads li {
	float:left;
	clear:left;
	padding:18px 20px;
	border-bottom:1px solid #c4cbd3;
	box-sizing:border-box;
	width: 100%;
	position:relative;
	background-color:#fbfcfe;}
#uploads li:first-child {border-top:1px solid #c4cbd3;}

.progressMeterWrapper {
	float:left;
	width: 90%;
	padding:0px;
	height:5px;
	border-radius:2px;
	background-color:#d7e0e7;
	position:relative;
	margin-top:2px;
	clear:left;}
.progressMeter {
	position:absolute;
	top:0px;
	left:0px;
	width:0;
	height:5px;
	background-color:#eb5959;}

.queued {
	position:absolute;
	width:2em;
	height:2em;
	right:0px;
	top:10px;}
.queued::after {
	content:"\f017";
	font-family: "Font Awesome 5 Pro";
	opacity:0.2;
	font-size:1.4em;
	position:absolute;
	bottom:0px;
	left:3px;}

.process {
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:3;
	opacity:0.75;
	background-color:#f9fafc;}

.uploadDetails {
	clear:both;
	font-size:0.8em;
	color:#000;
	float:left;
	margin-bottom:2px;}

.complete {display:flex; align-items:center;}
.complete .uploadedPhoto {flex-basis: 100px; position:relative;}
.complete .uploadDetails {
	clear:none;
	float:none;
	margin-left:10px;
	overflow-x:hidden;
	flex:1;}

.uploadedPhoto {float:left;}
.uploadedPhoto a {
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;}
.uploadedPhoto a::before {
	content:" ";
	position:absolute;
	top:0px;
	right:0px;
	background-color:#000;
	width:32px;
	height:32px;
	opacity:0.4;}
.uploadedPhoto a::after {
	content:"\f2ed";
	font-family:"Font Awesome 5 Pro";
	position:absolute;
	top:0px;
	right:0px;
	z-index:3;
	color:#FFF;
	width:32px;
	height:32px;
	text-align:center;
	font-size:1.2em;}

#loader {
	clear:both;
	padding-top:100px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;}
#loader img {display:block; margin:auto;}

.hourglass {
	display:block;
	position:absolute;
	top: 16px;
	right:10px;
	background:#f9fafc;
	/* margin:3em auto; */
	width:1em;
	height:2em;
	box-shadow:inset #f9fafc 0 0 0 0, inset #ea5a5a 0 2em 0 0, inset #f9fafc 0 0 4em 0;
	animation:hourglass 1s linear infinite;}

.SVGouter {fill:#ea5a5a;}
.SVGmiddle {fill:#f9fafc;}

img.scale {max-width:100%; height:auto; object-fit: contain; flex:0; font-family: 'object-fit: contain;';}

.addObservation {margin-top:30px; padding-left:10px;}

.observationMainPhoto {border:1px solid #3498cc; border-radius:2px;  padding:5px; box-sizing:border-box; width:100%;background-color: #fff;}
.observationMainPhoto img {object-fit: contain; width:100%;font-family: 'object-fit: contain;';}
.observationOtherPhotos {list-style-type:none; margin: 20px 0 0 0; padding: 0 5px 0 5px;
	flex-basis:100%; display: flex;flex-wrap: wrap;justify-content: flex-start;}
.observationOtherPhotos li {position:relative;/* flex: 1; */flex-basis: 50px; height:50px; margin-right: 10px;max-width: 100px;background-repeat: no-repeat;background-size: cover;background-position-x: center;}
.observationOtherPhotos li a {display:block; width:100%;height: 100%;}
.observationOtherPhotos li a img {max-width: 50px;}
.observationNotes {max-width:576px; font-family:"Patrick Hand"; font-size: 1em;margin-top: 20px;position: relative;background-color: #fef9bf;padding: 50px 60px 20px 10px;border-radius: 3px;box-shadow: 2px 2px 5px rgba(0,0,0,0.2);line-height: 1em;}
.observationNotes::before {content:"NOTES"; position:absolute;background-color: #f6f1b9;width: 100%;left: 0px;top: 0px;padding: 10px;font-family: "Lato";font-size: 1em;font-weight: bold;border-top-left-radius: 3px;border-top-right-radius: 3px;}
.observationNotes::after {content:""; position:absolute; width:100px; height:50px; top:-20px; right:20px; background-image:url(/images/device_pencil.svg); background-size:contain;}
.comments {list-style-type: none;margin: 20px 0 0px 0px;padding: 0;max-width: 576px;}
.comments li {margin-top: 10px;margin-bottom: 10px;cursor: pointer; padding:10px 0px; position:relative;}
.comments li:hover {background-color:#edf2f8;}
.comments li[data-owner="true"]::after {content:"\f2ed"; font-family:"Font Awesome 5 Pro"; position:absolute; right:5px; top:10px; color:#b2b2b2;}
.comments li::before {content:""; color:#b2b2b2; font-size:0.7em; position:absolute; top:13px; right:25px;}
.comments li .commentWrapper .commentAuthor {font-size: 0.85em;font-family: "Lato";font-weight: bold;text-transform: uppercase;}
.comments li .commentWrapper .comment {font-family: "Patrick Hand";font-size: 1em;line-height: 1em;margin-top: 5px;}

.observationQuickNavWrapper {position:absolute; bottom: -105px; width:100%;left: 0px;display: flex;justify-content: space-between;padding: 10px; z-index:4;}
.observationQuickNav {text-shadow: 2px 2px rgba(255,255,255,0.9); font-size:0.75em; color:#333f4b; position:relative;flex-basis: 100px;text-align: left;padding-top: 35px;}
.observationQuickNav i {text-shadow:none; position:absolute; top:0px; left: 0px; font-size: 3em; color:#2a8b8c;}
.observationQuickNav.next i {right:0px;}
.observationQuickNav.next {text-align: right;}

.juniorYearBehind2 {background-color:#f1c2c2 !important;}
.juniorYearBehind {background-color:#f7ce98 !important;}
.juniorYearEqual {background-color:#93d0aa !important;}
.juniorYearAhead {background-color:#59b786 !important; color:#FFF !important;}
.juniorYearAhead a {color:#FFF;}
.juniorYearAhead2 {background-color:#1ea55e !important; color:#FFF !important;}
.juniorYearAhead2 a {color:#FFF;}
.juniorCommenced {background-color:#B1EC6B !important;}
.juniorDeveloping {background-color:#51C88C !important;}

/*.juniorSecure {background-color:#0ca95a !important; background-image:none !important;}*/

.juniorComm {background-color:#c2cdda;}
.juniorCommPlus {background-color:#a4b5c7;}
.juniorDev {background-color:#869cb5; color:#FFF;}
.juniorDevPlus {background-color:#5e7b9c; color:#FFF;}
.juniorSecure {background-color:#365a83; color:#FFF;}
	
.selector {display:flex; align-items:center; position:relative; margin-bottom:20px; font-size:0.9em;}
.selector .label {flex-basis:150px; }
.selector .selectedValue {display:inline-block; flex-basis:106px; position:relative; padding:5px 10px; border:1px solid #000; box-sizing: border-box; color:#333f4b;}
.selector .selectedValue::after {content:"\f0d7"; font-family:"Font Awesome 5 Pro"; font-weight:700; position:absolute; right:5px;}
.selector.open .selectedValue::after {content:"\f0d8";}
.selector ul {list-style-type:none; position:absolute; z-index:3; top: 32px;max-width: 200px; left:150px;}
.selector.yearSelector ul {width: 150px;}
.selector.yearSelector .selectedValue {flex-basis:150px;}
.selector.subjectSelector .selectedValue {flex-basis:250px;}
.selector.open ul {display:block;}
.selector li a {display:block; }


@media (min-width: 576px) {}
@media (min-width: 768px) {
	header {height: 308px;}

	.utilityMenu li:not(.mobileTrigger) {display: block;}
	.utilityMenu li.mobileTrigger { display: none;}

	.thinForm {margin: 0;}

	.headerBar {border-bottom: 0px;}
	.headerBar .newObservation {
		display: flex;
		flex-basis: 300px;
		height: 50px;
		align-items: center;
		flex-wrap: nowrap;
		color: #fff;
		background-color: #3473a9;}
	.headerBar .newObservation:hover {
		text-decoration: none;
		background-color: #2a6394;}
	.headerBar .newObservation i {
		flex-basis: 80px;
		box-sizing: border-box;
		padding-left: 50px;font-size: 1.1em;}
	.headerBar .newObservation span {
		display: inline-block;
		flex: 1;
		text-transform: uppercase;
		font-size: 0.8em;}

	.pageMenu {
		clear: left;
		float: left;
		display: block;
		width: 100vw;
		position: relative;
		background-color: #353f4b;
		box-sizing: border-box;
		height: 60px;}
	.pageMenu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-items: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;}
	.pageMenu ul li {
		flex-basis: 210px;
		border-right: 2px solid #4c5660;
		box-sizing: border-box;
		height: 60px;
		font-size: 0.8em;
		position: relative;}
	.pageMenu ul li a {
		padding: 10px 60px;
		color: #838e92;
		text-transform: uppercase;
		text-align: center;
		display: block;
		width: 100%;
		height: 100%;}
	.pageMenu ul li.selected a {color: #fff;}
	.pageMenu ul li.selected::after {
		position: absolute;
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: #353f4b transparent transparent transparent;
		left: calc(50% - 10px);
		bottom: -10px;
		z-index: 2;}

	.comments li::after {content:"";}
	.comments li[data-owner="true"]::after {content:"";}
	.comments li[data-owner="true"]:hover::after {content:"\f2ed";}
	.photoTriggerWrapper > div:first-child {display:none;}
	.photoTriggerWrapper > div:last-child {text-align:left; padding-left:10px;}
}

@media (min-width: 992px) {
	.observationPhotos {background-color:#edf2f8; padding: 40px 0px 40px 0px;}
	.observationMainPhoto {max-width:850px; margin:0 auto;}
	.observationOtherPhotos {max-width:850px; margin: 20px auto 0px auto;}
	.observationNotes::after {top:calc(50% - 30px); right:-40px;}
}

@media (min-width: 1200px) {}

@keyframes hourglass {
	0% {
		transform:rotate(0deg);
		box-shadow:inset #f9fafc 0 0 0 0, inset #ea5a5a 0 2em 0 0,inset #f9fafc 0 4em 0 0, inset #ea5a5a 0 4em 0 0;}
	80% {
		transform:rotate(0deg);
		box-shadow:inset #f9fafc 0 2em 0 0, inset #ea5a5a 0 2em 0 0, inset #f9fafc 0 2em 0 0, inset #ea5a5a 0 4em 0 0;}
	100% {
		transform:rotate(180deg);
		box-shadow:inset #f9fafc 0 2em 0 0, inset #ea5a5a 0 2em 0 0, inset #f9fafc 0 2em 0 0, inset #ea5a5a 0 4em 0 0;}
}

.downloads .fas,.downloads .fal {font-size:1.4rem;}

.EYFStdLightBlue {background-color: #DFEFFD !important; background-image: none !important;}
.EYFStdBlue {background-color: #DDFDFA !important; background-image: none !important;}
.EYFStdCream {background-color: #FEF7AF !important; background-image: none !important;}
.EYFStdYellow {background-color: #FEF565 !important; background-image: none !important;}
.EYFStdLightOrange {background-color: #FFD35B !important; background-image: none !important;}
.EYFStdOrange, .matrixBelow {background-color: #FA924C !important; background-image: none !important;}
.EYFStdPink {background-color: #FAC0DC !important; color: #F00 !important; background-image: none !important;}
.EYFStdLightGreen, .matrixAt {background-color: #B1EC6B !important; background-image: none !important;}
.EYFStdGreen, .matrixAbove {background-color: #51C88C !important; background-image: none !important;}
.EYFStdDarkGreen, .matrixAbove2 {background-color: #0ca95a !important; background-image: none !important;}