body {	font-family: Lato, sans-serif;}

.outerInterfaceWrapper,nav {display:none;}

input, textarea {outline: 0;}

.outerInterfaceWrapper {width:100vw; height:calc(100vh - 60px); z-index:1; background-color:#4b90d3; overflow:hidden;color: #fff;position: relative;}
.innerInterfaceWrapper {height:100%; margin-left:0px; width:400vw;}
.innerInterfaceWrapper>div {width:100vw; float:left;height: 100%;padding-top: 15vh; text-align:center; overflow:hidden;}
.innerInterfaceWrapper>div .headerIcon {font-size:4em; margin-bottom:5%;}
.login {width:40%; margin:0 auto;}
.login fieldset div:not(.submit):not(.link) {border-bottom:1px solid #fff;padding-bottom: 7px;padding-top: 25px;}
.login fieldset div::after {content:""; display:table; clear:both;}
.login input {background-color:#4b90d3; border:0; padding:0 0 2px 0; float:left;
margin-left:20px; width:calc(100% - 40px); color:#fff;}
.login input::placeholder {color:#fff;}
.login input:-webkit-autofill {-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px #4b90d3 inset;}
.login label {width:20px; display: block; text-align: center;float: left;
    vertical-align:absmiddle; padding-top:2px;}
.login .submit,.login .link {margin-top:30px;}
.login .submit a {display:block; width:100%; background-color:#3c5774; color:#fff;}
.login .link a {color:#fff;}
/*.pin {width:40vw; margin:0 auto; display:flex;}
.pin>div {flex:1; height:40px; text-align:center;}
.pin>div input {background-color:#2967a4; width:40px; height:40px; border-radius:28px; border:8px solid #4b90d3; box-sizing:content-box; padding:0; margin:0; }*/
input[type=number] {
	font-family:"text-security-disc";
}	
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
#pageWrapper {
	width: 100vw;
	min-height: calc(100vh - 125px);
	overflow-x:hidden;
	}
#pageWrapper {display:none;}
#interfaceWrapper {min-height: calc(100vh - 125px);width:300vw;}
#interfaceWrapper::after {content:""; display:table; clear:both;}
#interfaceWrapper .interface {width:100vw;float:left;min-height: calc(100vh - 125px);display:flex;align-items:stretch;flex-wrap:nowrap;position: relative;}
#interfaceWrapper .interface[data-interface="awl"] {}
#interfaceWrapper .interface[data-interface="awlTargets"] {background-color:blue;}
#interfaceWrapper .interface[data-interface="eyfs"] {background-color:green;}
ul.pupilSelector {flex:0 0 195px;background-color:#d9e1ee;list-style-type:none;margin:0;padding:0;border-right:1px solid #b7c1cd;z-index: 3;}
ul.subjectSelector {flex:0 0 162px; background-color:#ebf0f6; list-style-type:none; margin:0; padding:0; border-right:1px solid #d5d9da;}
ul.pupilSelector li, ul.subjectSelector li {/* height:47px; */border-bottom:1px solid #b4beca;/* display:flex; *//* align-items:stretch; */}
ul.pupilSelector li.pupils {height:calc(100vh - (60px + 65px + 80px + 46px + 46px)); overflow-y:scroll;-webkit-overflow-scrolling: touch;}
/*ul.pupilSelector li.pupils {height:calc(100vh - (60px + 65px + 80px + 46px)); overflow-y:scroll;-webkit-overflow-scrolling: touch;}*/
ul.pupilSelector li ul {margin:0; padding:0;}
ul.pupilSelector li a, ul.subjectSelector li a {display:block;padding: 15px 10px;line-height: 1em;position: relative;color: #222c38;}
ul.pupilSelector li.header.filters a, ul.pupilSelector li.header.selectAll a, ul.subjectSelector li.header:not(.subject) a {font-weight:bold;text-transform:uppercase;font-size: 0.88em;}
ul.pupilSelector li.header.filters a em, ul.pupilSelector li.header.selectAll a em {position:absolute; right:10px; font-weight:500; font-size:1.2em; top: 50%; margin-top:-10px;}
ul.pupilSelector li.header.filters.selected a em, ul.pupilSelector li.header.selectAll.selected a em {color:#eb777a;}
ul.pupilSelector li.header.filters.open {background-color:#4b90d3;}
.interface ul.pupilSelector li.header.filters.open a {color:#fff;}
.interface ul.pupilSelector li.header.filters.open a em {color:#fff;}
ul.pupilSelector li.pupil a, ul.subjectSelector li.component a, ul.subjectSelector li.objective a {font-size: 0.825em;line-height: normal;/* height: 46px; */padding: 12px 10px;}
ul.pupilSelector li.pupil.hasResults a .lastname {position:relative;padding-right: 16px;display:inline-block;}
ul.pupilSelector li.pupil.hasResults a .lastname::after {content:"\f058";font-family:"Font Awesome 5 Pro";color:#4b90d3;position:absolute;right:0px;top: calc(50% - 6px);font-size: 0.8em;font-weight:900;}
ul.pupilSelector li.pupil.selected a, ul.subjectSelector li.component.selected a, ul.subjectSelector li.objective.selected a {background-color:#f1f4f9;}
ul.pupilSelector li.pupil.selected a::after, ul.subjectSelector li.component.selected a::after, 
ul.subjectSelector li.header.selected a::after, ul.subjectSelector li.objective.selected a::after {content:"\f00c";font-family:"Font Awesome 5 Pro";position:absolute;right:10px;top:50%;margin-top: -4px;font-size:0.75em;font-weight:700;color:#eb777a;}
ul.subjectSelector li.header.selected a::after {top:calc(50% - 3px);}
.dataEntryWrapper {flex:1; background-color:#f4f7fc; display:flex; flex-wrap:wrap;}
#filtersWrapper {position:absolute;background-color: #f4f7fc;box-sizing: border-box;width: 100vw;padding-left: 196px;top: 0px;left: 0px;height: calc(100vh - (65px + 60px));overflow-y: hidden;z-index: 2;transition: 0.5s ease-out;transform:translateX(calc(-100vw + 196px));}
#filtersWrapper.open {transform:translateX(0px);}
#interfaceWrapper .interface>ul>li:first-child {height:80px;display:block;padding: 5px 10px 10px 10px;}
#interfaceWrapper .interface ul li:first-child label,.dataEntryWrapper .selectors label {font-size: 0.625em;text-transform:uppercase;padding:0;margin:0;color:#222c38;}
#interfaceWrapper .interface ul li:first-child label::after,.dataEntryWrapper .selectors label::after {content:":";}
.dataEntryWrapper .selectors {flex:1 0 100%;display:flex;border-bottom:1px solid #b4beca;height:80px;}
.dataEntryWrapper .selectors div {flex: 0;height: 79px;padding: 5px 10px 10px 10px;}
.dataEntry {height: calc(100vh - (60px + 65px + 78px));overflow-y:scroll;width: 100%;-webkit-overflow-scrolling: touch;}
.dataEntry>p {margin: 50px 20px 10px 40px;font-size: 0.825em;}
ul.yearResultWrapper {width:100%; margin:0; padding:0; list-style-type:none;}
ul.yearResultWrapper>li {
    width: 100%;
    display: block;
}
div.filters {/* display:flex; */flex-flow: row wrap;/* justify-content:flex-start; */height: calc(100vh - (65px + 60px + 70px));overflow-y: scroll;}
div.filters .filterRow {display:flex; flex-flow:row wrap; border-bottom:1px solid #b4beca;}
div.filters .filterRow:last-child {border-bottom:0px;}

div.filters .filter {padding: 10px 15px 15px 15px;display: flex;flex-wrap: wrap;flex-flow: column;
background-color: #ebf0f6;border-right: 1px solid #b4beca; 
justify-content:flex-end;}
div.filters .filter.schoolFilter {border-bottom:1px solid #b4beca;}
div.filters .filter:first-child, div.filters break+.filter {/* padding-left:20px */}
div.filters .filter label {font-size: 0.8em;margin-bottom: 2px;box-sizing: border-box;color: #222c38;}
div.filters .filter.selected label {color:#fff;}
div.filters .break {flex-grow:1; background-color: #ebf0f6;}
div.filters .filter.selected {background-color: #4b90d3;}
div.filters .filter.selected .select2-container--selectors .select2-selection--single {border-color:#fff;}
.filtersClear {border-bottom:1px solid #b4beca;}
.filtersClear a {display: inline-block;margin: 0px 0px 0px 0px;background-color:#fff;text-transform:uppercase;font-size: 0.825em;color: #212529;padding: 25px 60px 25px 20px;position: relative;box-sizing:border-box;width:240px;border-right: 1px solid #b4beca;/* color: #2fa7a6; */}
.filtersClear a::after {font-family:"Font Awesome 5 Pro"; position:absolute; width:20px; height:20px; right:10px; 
top:calc(50% - 15px); content:"\f2ed"; font-size:1.5em;}

ul.yearResultWrapper>li>a {width: 100%;display:block;padding: 15px 20px;background-color: #dde2e8;box-sizing: border-box;text-transform: uppercase;font-size: 0.88em;color: #262b3e;position: relative;border-bottom:1px solid #fff;font-weight: bold;}
ul.yearResultWrapper>li>a::after {content:"\f107"; position:absolute; right:20px; top:calc(50% - 7px); font-family:"Font Awesome 5 Pro"; }
.subScores,.statements {display:none;background-color:#30a6a6;padding: 0 0 0 6px;margin:0;list-style-type:none;width:100%;}
.subScores>li,.statements>li {}
.subScores>li>a {background-color:#d1d8e2;display:block;width:100%;padding: 15px 24px;border-bottom:1px solid #fff;border-left:1px solid #fff;text-transform:uppercase;font-size: 0.81em;color: #222c38;font-weight: bold;}
.subScores>li.selected>a {background-color:#353f4b; color:#fff; position:relative;}
.subScores>li.selected>a::after {content:"\f00c"; position:absolute; right:18px; top:calc(50% - 7px); font-family:"Font Awesome 5 Pro";}
ul.yearResultWrapper>li.selected>a {background-color:#353f4b;color:#fff;font-size: 1.06em;}
#eyfsDataEntry ul.yearResultWrapper>li.selected>a {color: #222c38;}
ul.yearResultWrapper>li.EYFStdLightBlue>a {background-color:#DFEFFD;}
ul.yearResultWrapper>li.EYFStdBlue>a {background-color:#DDFDFA;}
ul.yearResultWrapper>li.EYFStdCream>a {background-color:#FEF7AF;}
ul.yearResultWrapper>li.EYFStdYellow>a {background-color:#FEF565;}
ul.yearResultWrapper>li.EYFStdLightOrange>a {background-color:#FFD35B;}
ul.yearResultWrapper>li.EYFStdOrange>a {background-color:#FA924C;}
ul.yearResultWrapper>li.EYFStdPink>a {background-color:#FAC0DC;}
ul.yearResultWrapper>li.EYFStdLightGreen>a {background-color:#B1EC6B;}
ul.yearResultWrapper>li.EYFStdGreen>a {background-color:#51C88C;}
ul.yearResultWrapper>li.EYFStdDarkGreen>a {background-color:#0ca95a;}
ul.yearResultWrapper>li.selected>a::after {content:"\f106"; right:18px; top:calc(50% - 12px);}
ul.yearResultWrapper>li.selected .subScores {display:block;}
.statements>li>a {background-color:#fff;display: flex;align-items:center;box-sizing:border-box;padding: 15px 50px 15px 0px;border-left:1px solid #fff;box-sizing:border-box;border-bottom:1px solid #c8cdd3;color: #222c38;font-size: 0.77em;position:relative;line-height: 1.35em;}
.statements>li.selected>a {background-color:#4b90d3; color:#fff;}
.statements>li.selected>a::after {content:"\f00c"; font-family:"Font Awesome 5 Pro"; display:block; position:absolute; right:15px;
top:calc(50% - 10px);}
.statements>li>a>em {display: block; text-transform:uppercase; flex: 0; font-style:normal; font-weight:bold;
box-sizing:border-box; padding-left:30px; margin-right:14px;}
.statements>li>a>span {display:block; flex:1;}



#header {
	background-color: #FFF;
	height: 65px;
	display: flex;
	-webkit-display: flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: left;
	-webkit-justify-content: left;
	align-items: center;
	-webkit-align-items: center;
	-webkit-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 2;
	}

#logo {
	width: 268px;
	height: 65px;
	box-sizing: border-box;
	flex-grow: 0;
	-webkit-flex-grow: 0;
	background-image: url(/images/logo.svg);
	background-repeat: no-repeat;
	background-size: contain;
	border-right: 1px solid #d6d7db;
	background-position: 5px 0px;
	}

#title {
	flex-grow: 2;
	-webkit-flex-grow: 2;
	flex-basis: 475px;
	-webkit-flex-basis: 375px;
	padding-left: 18px;
	text-transform: uppercase;
	color: #3273ad;
	font-weight: bold;
	font-size: 1.13em;
	letter-spacing: 0.05em;
	vertical-align: middle;
	}


#header ul {
	list-style-type: none;
	margin: 0 25px 0 0;
	padding: 0;
	flex: 0 0 100px;
	display: none;
	align-items: stretch;
	height: 65px;
	}
#header ul li {margin-left:20px}
#headerActions li {
	float: left;
	width: 50px;
	margin-right: 20px;}

#profileBuilderLink, #helpLink, #editHelpLink, #usersLink, #settingsLink, #logoutLink,#groupsLink, #homeLink {
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
	color: #343e4a;
	text-decoration: none;
	text-align: center;
	font-size: 0.7em;
	text-transform: uppercase;
	box-sizing: border-box;
	padding-top: 33px;
	}
	#profileBuilderLink {font-size:0.6em; }
#profileBuilderLink::after, #helpLink::after, #editHelpLink::after, #usersLink::after, #settingsLink::after, #logoutLink::after, #groupsLink::after, #homeLink::after {
	position: absolute;
	top: 8px;
	left: 50%;
	margin-left: -10px;
	}
#logoutLink::after {
	content: "\f2f5";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;}
#helpLink::after {

	content:"\f059";
	font-family:"Font Awesome 5 Pro";
	font-size:1.8em;
}
#profileBuilderLink::after {
	content:"\f302";
	font-family:"Font Awesome 5 Pro";
	font-size:2.1em;
}




#schoolLogin {
	flex-grow: 1;
	-webkit-flex-grow: 1;
	margin-left: 50px;
	color:#34404e;}
#schoolLogin.impersonated {
	color: #ea5a5a;}
#schoolLogin p {
	margin: 0;
	padding: 0;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;}
#schoolLogin p span {padding-left:20px;}
#schoolLogin p span a {
	padding: 0 5px;
	font-size: 0.81em;
	/* color: #FFF; */}

nav {
	background-color: #bcc0c3;
	/* padding: 0px 0px 0px 120px; */
	color: #FFF;
	text-transform: uppercase;
	height: 60px;
	box-sizing: border-box;
	margin: 0;
	z-index: 1;
	/* width: 100vw; */
	border-bottom: 1px solid #a9aeb2;
	}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 60px;
	/* max-width: 849px; */
	}
nav ul li {
	height: 60px;
	line-height: 60px;
	border-right: 2px solid #ced2d3;
	text-align: center;
	box-sizing: border-box;
	float: left;
	width: 175px;
	}
nav ul li:first-child {
	border-left: 2px solid #ced2d3;}
nav ul li a {
	display: block;
	/* text-align: center; */
	line-height: normal;
	color: #222c38;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.5px;
	padding: 24px 5px 14px 15px;
	box-sizing:  border-box;
	height: 60px;
	width: 100%;
	position: relative;
	text-align: center;
	}

nav ul li a:hover, nav ul li.selected a {color: #fff;}
nav ul li.selected {background-color:#fff; border-bottom:2px solid #2fa7a6;}
nav ul li.selected a {color:#2fa7a6; position:relative;}
nav ul li a::before {
	content: "\f067";
	font-family: "Font Awesome 5 Pro";
	margin-right: 0px;
	font-size: 2em;
	position:absolute;
	top:50%;
	margin-top: -0.5em;
	left: 22px;
	}
nav ul li a.awl::before, nav ul li a.eyfs::before {content:"\f46c"; font-weight:300;}
nav ul li a.awlTargets::before {content:"\f05b"; font-weight:300;}



	
form.login {}
form.login>div {}
form.login>div label {}
form.login>div input {}
form.login>div.submit {}
form.login>div.submit a {}
form.login>div.link {}
form.login>div.link a {}




.button {
	width: auto;
	display: inline-block;
	padding: 10px 20px;}


form.simple .img-submit a {margin-left:120px;}
.verify .img-submit a {margin-left:140px !important;}
.preferences .img-submit a {margin-left: 175px !important;}
#fpasswordLink {
	color: #333e49;
	font-size: 0.9em;
	margin-left: 120px;}
#fpassword {margin-left:40px;}
#fpassword p {font-size: 0.9em; /* margin-left: 40px; */}