html, body {
	margin: 0;
	padding: 0;
	/* min-height: 100vh; */
	width: 100%;}

input {color:#333e49;}

p a:not(.button) {color:#333e49;}

#exportLink {
	color: #333e49;
	text-decoration: none;
	display: block;
	font-size: 0.9em;
	margin-bottom: 50px;
	padding-top: 15px;}
#exportLink span {display:inline-block; margin-right:5px;}

body {
	background-color: #fff;
	/* position: relative; */
	font-family: Lato, sans-serif;}

input[type=text], textarea {outline: 0;}

#pageWrapper {
	width: 100%;
	display: flex;
	-webkit-display: flex;
	min-height: 100vh;
	/* position: relative; */
	align-items: stretch;
	-webkit-align-items: stretch;
	/* overflow-x: hidden; */}

#subMenu {
	z-index: 100;
	background-color: #d9e1ee;
	position: relative;
	min-height: 100%;
	width: 121px;
	box-sizing: border-box;
	border-right: 1px solid #c6cacd;}
#subMenu > ul {
	list-style-type: none;
	margin: 61px 0 0 0;
	padding: 0 0 0 0;
	width: 100%;}
#subMenu > ul li a {
	display: block;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.75em;
	color: #353f4b;
	box-sizing: border-box;    
	/* line-height: 95px; */
	padding-top: 5em;
	padding-bottom:2em;
	position: relative;
	/* font-weight: bold; */
	letter-spacing: 0.5px;}
#subMenu > ul li.selected a {
	background-color: #f8f9fb;
	color: #30a6a6;
	border-left:2px solid #30a6a6;}
#subMenu > ul li:not(.selected) a:hover {color: #30a6a6;}
#subMenu > ul li a::before {
	font-family: "Font Awesome 5 Pro";
	content: "\f044";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35px;
	height: 35px;
	line-height: normal;
	font-size: 2em;
	margin-left: -17px;
	margin-top: -21px;}
#subMenu > ul li a.dashboard::before {content:"\f2eb"; font-weight:400; font-size:2.2em;}
#subMenu > ul li a.progressDashboard::before {content:"\f201"; font-weight:400; font-size:2.6em;}
#subMenu > ul li a.matDashboard::before {content:"\f0ac"; font-weight:400; font-size:2.6em;}
#subMenu > ul li a.phonics::before {content:"\f028"; /* font-weight: 900; */}
#subMenu > ul li a.mtCheck::before {content:"\f1ec"; /* font-weight: 900; */}
#subMenu > ul li a.keyStage::before {content:"\f084"; font-weight:400;}
#subMenu > ul li a#loginLink::before {content:"\f007" !important;}
#subMenu > ul li a#loginLink::before {content:"\f007" !important;}
#subMenu > ul li a.tracking::before {content:"\f080"; font-weight:400; font-size:2.2em;}

#passwordIndicator {font-size:0.9em; position: relative; color:#006600; margin-left:5px;}
#passwordIndicator::before {display:inline-block; content:"\f058"; font-family:"Font Awesome 5 Pro"; font-size:1.2em; color:#006600; margin-right: 5px;}
.textGreen {color:#006600;}
.textRed {color:#880000 !important;}
#passwordIndicator.badPassword {color:#880000;}
#passwordIndicator.textRed::before {content:"\f057"; color:#880000;}
.textRed::before {color:#880000 !important;}

#rightWrapper {
	/* position: relative; */
	flex: 1 1 auto;}

#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;}

#logo {
	width: 176px;
	height: 65px;
	flex-grow: 0;
	-webkit-flex-grow: 0;
	/* border-right: 1px solid #d6d7db; */}
#logo a {
	display: block;
	background-image: url(/images/itrackStrategic.jpg);
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 10px 20px;}

#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;}

#headerActions {
	flex-grow: 1;
	-webkit-flex-grow: 1;}
#headerActions ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: right;
	min-width: 350px !important;}
#headerActions li {
	float: left;
	width: 50px;
	margin-right: 20px;}

#helpLink, #editHelpLink, #usersLink, #settingsLink, #logoutLink,#groupsLink, #homeLink {
	display: block;
	width: 50px;
	height: 50px;
	position: relative;
	color: #343f4b;
	text-decoration: none;
	text-align: center;
	font-size: 0.7em;
	text-transform: uppercase;
	box-sizing: border-box;
	padding-top: 33px;}
#helpLink::after, #editHelpLink::after, #usersLink::after, #settingsLink::after, #logoutLink::after, #groupsLink::after, #homeLink::after {
	position: absolute;
	top: 8px;
	left: 50%;
	margin-left: -13px;}
#groupsLink::after {
	content:"\f0e8";
	font-family:"Font Awesome 5 Pro";
	font-size:1.8em;
	font-weight:300;}
#homeLink::after {
	content: "\f015";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;
	font-weight: 600;}
#helpLink::after {
	content: "\f059";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;}
#usersLink::after {
	content: "\f0c0";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;}
#logoutLink::after {
	content: "\f2f5";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;}
#settingsLink::after {
	content: "\f013";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.8em;
	font-weight:900;}

#helpDiv {font-size:0.81em;}

#editHelpLink::after {
	content: "\f044";
	font-family: "Font Awesome 5 Pro";
	font-size: 1.4em;
	 margin-top: -1px; 
	display: block;}

#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: 160px;}
nav ul li:first-child {
	border-left: 2px solid #ced2d3;}
nav ul li a {
	display: flex;
	/* text-align: center; */
	line-height: normal;
	color: #353f4b;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.75em;
	font-weight: bold;
	height: 20px;
	letter-spacing: 0.5px;
	padding: 20px 5px 20px 10px;
	align-items: center;}
nav ul li a em {
	font-style: normal;
	flex: 2;
	text-align:left;}
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;}
/*nav ul li.selected::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: -7px;
	left: 50%;
	margin-left: -3px;
	border-style: solid;
	border-width: 7px 5.5px 0 5.5px;
	border-color: #353f4b transparent transparent transparent;}
*/
nav ul li a::before {
	content: "\f067";
	font-family: "Font Awesome 5 Pro";
	margin-right: 10px;
	font-size: 2em;
	flex: 0 0 30px;
	vertical-align: middle;}
nav ul li a.dashboards::before {content: "\f3fd"; font-weight:300;}
nav ul li a.results::before {content: "\f140"; font-weight:300;}
nav ul li a.foundation::before {content: "\f1ae"; font-weight:300;}

#subMenuYearGroup > a:hover::after {color: #FFF;}

#innerWrapper {
	width: 100%;
	/* position: absolute; */
	min-height: 100vh;
	color: #333e49;
	/* overflow-x: hidden; */}

.google-visualization-tooltip p {margin:20px;}
.schoolName, .matFilterName {font-weight:bold;}
#schoolsSelector {transform:translateX(-350px) translateY(0px);}
#schoolsSelector.open {transform:translateX(0px) translateY(0px); z-index:7;}

#filtersSelector {width:300px; z-index:4; transform:translateX(-270px) translateY(120px);}
#filtersSelector .selectorTitle, #filtersSelector ul, #filtersSelector .selectorButton {width:270px;}
#filtersSelector.open {transform:translateX(0px) translateY(120px); z-index:7;}

#attrsSelector {z-index:5; transform:translateX(-350px) translateY(260px);}
#attrsSelector .selectorTitle, #filtersSelector ul, #filtersSelector .selectorButton {width:270px;}
#attrsSelector.open {transform:translateX(0px) translateY(260px); z-index:7;}

#stdsSelector {width:300px; z-index:6; transform:translateX(-270px) translateY(400px);}
#stdsSelector .selectorTitle, #stdsSelector ul, #stdsSelector .selectorButton {width:270px;}
#stdsSelector.open {transform:translateX(0px) translateY(400px); z-index:7;}

.slideFilter {
	position: absolute;
	width: 380px;
	z-index: 3;
	margin-top: 10px;
	/* left: -350px; */
	overflow: hidden;
	transition: transform 300ms ease-in-out;}
.slideFilter ul {
	max-height: 258px;
	overflow-y: auto;
	overflow-x:hidden;
	width: 350px;
	box-sizing: border-box;}
.slideFilter ul::after {content:"";display:table; clear:both;}
.slideFilterHelper {
	cursor: pointer;
	position: absolute;
	background-color: #e3e4e6;
	right: -90px;
	top: 120px;
	height: 30px;
	box-sizing: border-box;
	padding: 5px 20px 5px 40px;
	border: 1px solid #dadde4;
	text-transform: uppercase;
	width: 120px;
	font-size: 0.8em;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	-o-transform-origin: 100% 0;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;}
.slideFilterHelper::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; font-weight:300; position:absolute; left:10px; top:7px; color:#bbbcc0;}
#attrsSelector .slideFilterHelper {top: 130px; width: 130px; right: -100px;}
#stdsSelector .slideFilterHelper {top: 130px; width: 130px; right: -100px;}

#selectors {width: 100%;}
#selectors .selector {background-color: #ebecee;}

#search {
	display: flex;
	flex-wrap: nowrap;
	height: 80px;
	align-items: center;
	box-sizing: border-box;
	border-bottom:1px solid #c6cacd;
	padding:20px;} 
#search label {
	text-transform: uppercase;
	font-size: 0.775em;
	/* font-weight: bold */
	margin-right: 3px;
	display:inline-block;}
#search label>em {
	font-style: normal;
	display: block;
	padding-bottom: 3px;
	padding-left: 5px;}
#search label>span {
	/* padding-top: 2px; */
	font-weight: bold;
	font-size: 1.1em;
	/* margin-left: 10px; */}
#search>div {margin-left:10px;}
#search>div:last-child {}

.selector h2 {
	margin: 42px 0 24px 0;
	font-size: 0.935em;
	text-transform: uppercase;
	padding-left: 20px;
	font-weight: bold;
	color: #222c38;}
#search .createReportLink, #search .updateReportLink {margin: 17px 0 0px 0px;}
#filtersSelector {margin-top:20px;}
#schoolsSelector .selectorTitle, #filtersSelector .selectorTitle, #attrsSelector .selectorTitle, #stdsSelector .selectorTitle {
	background-color: #e3e4e6;
	/* padding: 30px 20px; */
	border-top: 1px solid #dadde4;
	border-bottom: 1px solid #dadde4;
	width: 350px;
	box-sizing: border-box;}
#filtersSelector .selectorTitle, #stdsSelector .selectorTitle {width: 270px;}
#schoolsSelector .createReportLink, #schoolsSelector .updateReportLink, #filtersSelector .createReportLink, #attrsSelector .createReportLink, #attrsSelector .updateReportLink, #stdsSelector .createReportLink, #stdsSelector .updateReportLink {
	margin: 0 auto;
	display: block;
	box-sizing: border-box;
	width: 160px;
	text-align: center;}
#schoolsSelector .selectorTitle a, #filtersSelector .selectorTitle a, #attrsSelector .selectorTitle a, #stdsSelector .selectorTitle a {
	color: #333e49;
	text-decoration: none;
	display: block;
	text-transform: uppercase;
	font-size: 0.9em;
	position: relative;
	padding: 30px 20px;
	font-weight: bold;}
#schoolsSelector .selectorTitle a::after, #filtersSelector .selectorTitle a::after, #attrsSelector .selectorTitle a::after, #stdsSelector .selectorTitle a::after {
	content: "\f057";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	right: 20px;
	font-size:1.4em;}
#schoolsSelector .selectorTitle.on, #filtersSelector .selectorTitle.on, #attrsSelector .selectorTitle.on, #stdsSelector .selectorTitle.on {border-bottom:0px;}
#schoolsSelector .selectorTitle.on a::after, #filtersSelector .selectorTitle.on a::after, #attrsSelector .selectorTitle.on a::after, #stdsSelector .selectorTitle.on a::after {content:"\f102";}
#schoolsSelector .selectorButton, #filtersSelector .selectorButton, #attrsSelector .selectorButton, #stdsSelector .selectorButton {
	background-color: #e3e4e6;
	padding: 15px 20px;
	border-top: 1px solid #dadde4;
	border-bottom: 1px solid #dadde4;
	border-right: 1px solid #dadde4;
	/* display: none; */
	box-sizing: border-box;}
#schoolsSelector .selectorButton, #attrsSelector .selectorButton {width:350px;}
#schoolsSelector .selectorTitle.on+ul+.selectorButton, #filtersSelector .selectorTitle.on+ul+.selectorButton, #attrsSelector .selectorTitle.on+ul+.selectorButton, #stdsSelector .selectorTitle.on+ul+.selectorButton {display:block;}
#schoolsSelector ul, #filtersSelector ul, #attrsSelector ul, #stdsSelector ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border-right: 1px solid #dadde4;}
#schoolsSelector .selectorTitle.on+ul, #filtersSelector .selectorTitle.on+ul, #attrsSelector .selectorTitle.on+ul, #stdsSelector .selectorTitle.on+ul {display:block;}
#schoolsSelector ul li, #filtersSelector ul li, #attrsSelector ul li, #stdsSelector ul li {border-top:1px solid #dadde4; background-color:#fff; width:350px; box-sizing:border-box;}
#filtersSelector ul li, #stdsSelector ul li {width: 270px;}
#schoolsSelector ul li a, #filtersSelector ul li a, #attrsSelector ul li a, #stdsSelector ul li a {
	display: block;
	color: #222c38;
	text-decoration: none;
	font-size: 0.8em;
	padding: 15px 40px 15px 20px;
	position: relative;
	background-color:#eff0f2;}
#filtersSelector ul li, #stdsSelector ul li {background-color:#e4e9ef;}
#schoolsSelector ul li a:hover, #attrsSelector ul li a:hover {
	color: #000;
	background-color:#e6e7e9;}
#schoolsSelector ul li a.off, #attrsSelector ul li a.off {color: #878e96;}
#schoolsSelector ul li a::after, #attrsSelector ul li a::after {content:"\f00c"; font-family:"Font Awesome 5 Pro"; position:absolute; right:20px; top:50%; margin-top:-6px; color:#ed5959;}
#schoolsSelector ul li a.off::after, #attrsSelector ul li a.off::after {content:"\f00d"; color:#a1a5ae; right:21px;}
#schoolsSelector ul li a.off:hover::after, #attrsSelector ul li a.off:hover::after {color:#5e6670;}

#filtersSelector ul li span.filterName, #stdsSelector ul li span.filterName {display:block; float:left;padding:15px; font-size:0.8em;}
#filtersSelector ul li::after, #stdsSelector ul li::after {content:""; clear:both; display:table;}
#filtersSelector ul li .filter {float: right; display: block; width: 75px; margin-top: 5px; margin-right: 20px;}
#stdsSelector ul li .filter {float: right; display: block; width: 100px; margin-top: 5px; margin-right: 20px;}

#report {
	/* flex: 1; */
	box-sizing: border-box;
	padding: 30px 40px 60px 80px;
	min-height: 570px;}
#report::after {
	clear: both;
	content: "";
	display: table;}
#report h1 {
	margin: 0px 0px 40px 0px;
	padding: 0px 0px 20px 0px;
	text-transform: uppercase;
	font-size: 1.25em;
	position: relative;
	border-bottom: 1px solid #87acc9;
	float: left;
	color: #333e49;
	height: 18px;
	box-sizing: content-box;}
#report h1::before {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 1px;
	background-color: #aec7dd;
	content: "";}
#report h1+p,#report>.subjectName,#report h1+dl,#report h1+.welcomeText {
	clear: left;
	margin-top:0px;}
.welcomeText {
	margin-bottom: 20px;
	font-size: 0.85em;}
.login #report>p:first-child {margin-bottom:0px;}
.login #report>p+form,.login #report>div+form {margin-top:40px;}
#report h1+dl {/* width: 500px; */}
#report>.subjectName {text-transform:uppercase; font-weight:bold; margin-bottom:10px; margin-top:50px;}
#report>p,#report .error{
	/* margin-left: 40px; */
	clear: left;
	font-size: 0.85em;}
#report .error {font-size: 0.9em;}
#report .usedFilters {font-size:0.8em; margin-left:0px;}
.error {color:#f00; font-size:0.9em;}
.error h3 {
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-size:1em;}
.error p {margin-top:5px;}

#report>form:not(.preferences) {
	clear: left;
	margin: 0 0 0 0px;}
#report form fieldset {border:0; padding:0;}
#report form:not(.preferences) > div {
	float: left;
	clear: left;
	margin-bottom: 15px;
	position: relative;}

#groupsForm div+div {clear:none !important; margin-left:10px; margin-top:5px;}
#groupsForm div+div a {margin-top:3px;}
#groupsForm {
	border: 1px solid #edf2f8;
	width: 275px;
	box-sizing: border-box;
	font-size: 0.8em;
	text-transform: uppercase;
	margin-bottom: 30px !important;}
#groupsForm::after {content:""; display:table; clear:both;}
#groupsForm label {
	background-color: #edf2f8;
	width: 100%;
	padding: 10px;
	float: left;
	box-sizing: border-box;
	font-weight:bold;}
.groupSearch {margin-left:10px;}

#report form:not(.preferences) > div label {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.81em;
	float: left;
	clear: left;
	color: #222c38;}
#report form.simple div {margin-bottom:20px;}
#report form.simple div label {
	float: left;
	/* margin-right: 30px; */
	width: 120px;
	clear: left;
	font-size: 0.9em;
	padding: 10px 15px 10px 0px;
	box-sizing: border-box;}
.verify label {width:140px !important;}
#report form.simple div input[type="text"],#report form.simple div input[type="password"] {
	padding: 10px 15px;
	line-height: 0.8em;}
#report form:not(.preferences) > div input[type="text"], #report form:not(.preferences) div textarea {
	float: left;
	clear: left;
	border: 0;
	padding: 0;
	margin: 10px 0 0 0;
	-webkit-appearance: none;
	color: #343f4b;
	border-radius: 0px;
	padding: 10px;
	box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5);
	font-size: 0.81em;}
#report form:not(.preferences) > div textarea {
	width: 250px;
	resize: none;
	height: 130px;}
#report form:not(.preferences) > div input.datepicker {
	position: relative;
	width: 175px;
	background-color: transparent;
	}
#report form:not(.preferences) > div input.datepicker + span {
	display: block;
	position: relative;
	width: 16px;
	height: 16px;
	top: 35px;
	left: 170px;}
#report form:not(.preferences) > div input.datepicker + span::after {
	content: "\f073";
	font-family: "Font Awesome 5 Pro";
	color: #858e95;
	position: absolute;
	top: 0px;
	left: 0px;}
form.preferences {
	/* margin-left: 40px; */
	font-size: 0.9em;
	margin-top:30px;}
form.preferences>div {float:left; clear:left; margin-bottom:20px;}
form.preferences div::after {content:""; display:table; clear:both;}
form.preferences>div>label {
	float: left;
	clear: left;
	width: 160px;
	padding: 5px 15px 10px 0px;
	text-align:right;
	/* font-size: 0.9em; */
	text-transform: uppercase;}
form.preferences>div>label::after {content:":";}
form.preferences>div>input[type="text"],form.preferences>div>input[type="password"] {
	padding: 10px;
	font-size: 0.9em;
	width:200px; box-sizing: border-box;}
form.preferences>div>.checkboxes,form.preferences>div>.multiboxes {float:left; width:300px;}
form.preferences .checkboxes label,form.preferences .multiboxes label {
	float: left;
	clear: left;
	margin-bottom: 8px;}
form.preferences .multiboxes label {width:150px; padding:10px 15px;}
form.preferences .multiboxes input {
	width: 70px;
	float: left;
	padding: 10px 15px;
	font-size: 0.8em;}

.report {clear:left;border-collapse: collapse;}
.report.groups {margin-left: 0px;}
.report.attainment {margin-top:50px;}
.subjectName+.report.attainment {margin-top:-5px;}
.report th,.report td {border:1px solid #d5d7d6;}
.report th {padding:0;}
.report th div {text-transform:uppercase;}
.report th.assessmentType div {padding:10px}
.report thead .tableTitle {border-bottom:2px solid #7aacdd;}
.report thead .tableTitle div,.reportTitle {
	background-color: #edf2f8;
	padding: 20px 20px;
	font-size: 0.9em;
	border-bottom:1px solid #7aacdd;}
.report thead .subjectName div {padding:20px; border-bottom:0px !important;}
.report.users thead th,.report.groups thead th,.report.subjects thead th {background-color:#edf2f8; text-transform:uppercase;}
.reportTitle {text-transform:uppercase;}
.reportGraph {border:2px solid #edf2f8; margin-top:50px;}
.report thead .blank {border-left:0px; border-top:0px; border-bottom:0px;position:relative;}
.report thead .schoolName, .report thead .matFilterName {border-left:0px; border-top:0px; border-bottom:0px;}
.report thead .schoolName div {
	background-color: #353f4b;
	color: #fff;
	padding: 16px 18px 16px 10px;
	border-bottom: 3px solid #353f4b;
	text-align: left;
	min-width: 200px;}
.report thead .matFilterName div {
	background-color: #353f4b;
	color: #fff;
	padding: 16px 18px 16px 10px;
	border-bottom: 3px solid #353f4b;
	text-align: left;
	/*min-width: 100px;*/}
.report thead .colHeader div {
	padding:16px 10px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	position: relative;
	border-bottom: 2px solid #353f4b;
	background-color: #353f4b;
	color: #fff;}
.report thead th:not(.tableTitle):not(.subjectName) div {
	font-size: 0.8em;
	font-weight: normal;}
.report thead .sortable:not(.sorter-false):not(.tableTitle):not(.subjectName) div::after {
	content: "\f106";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	bottom:3px;
	left: 50%;
	margin-left: -4px;}
.report thead .sortedAsc div {border-bottom:2px solid #74d7a1;}
.report thead .sortedDesc div {border-bottom: 2px solid #74d7a1;}
.report thead .sortedDesc div::after {content: "\f107" !important;}
.report tbody td,.report tfoot td,.report.users thead th,.report.groups thead th,.report.subjects thead th {font-size:0.8em; padding:7px 2px; text-align:center;}
.report thead th.doubleH {background-color: #353f4b;}
.users.new {
	color: #333e49;
	padding-left: 30px;
	position: relative;
	margin-bottom: 30px;
	display: block;
	text-transform:uppercase;}
.users.new span {position:absolute; left:0px;font-size:1.4em;}
.report.users thead th,.report.groups thead th,.report.subjects thead th {padding:10px;}
.report.groups thead th a {color:#333e49; text-decoration:none; position:relative; padding-right:30px;}
.report.groups thead th a::after {content: "\f107"; font-family:"Font Awesome 5 Pro"; position:absolute; right:0px; top:3px;}
.report.groups thead th.desc a::after {content:"\f106";}
.report.groups thead th.thActive {border-bottom:2px solid #74d7a1;}
.report.users tbody td a,.report.groups tbody td a {color:#333e49; text-decoration:none; font-size:1.2em;}
.report.groups tbody td a {font-size:1.4em;}
.report.groups tbody td.active div, .report.groups tbody td.disabled div {font-size:1.4em; width:100%; height:100%;}
.report.groups tbody td.active div {color:#3da62f;}
.report.groups tbody td.disabled div {color:#ed5959;}
.report tbody td.schoolName, .report tbody td.groupName, .report tbody td.subjectName, .report tbody td.matFilterName {text-align:left; padding-right:20px; padding-left:10px;}
.report.subjects td a.far {font-size:1.4em; text-decoration:none; display:block;}
.report.subjects td a.fa-check {color:#006600;}
.report.subjects td a.fa-times {color:#880000;}
.report.subjects td a.fa-trash-alt {color:#333e49;}
.report.subjects tfoot td {background-color:#fff !important; color:#333e49 !important; text-align:right; font-size:0.9em;}
.report.subjects tfoot td .select2-selection__rendered {text-align:left;}

.report tbody td input {padding:10px;}
.report tfoot:not(.utility) td:not(.gap):not(.grey) {
	background-color: #30a6a6;
	color: #fff;
	text-transform:uppercase;
	font-weight:bold;}
.report tfoot .average {text-align:right; padding-right:10px;}
.report tbody tr:nth-child(even):not(.overallRow) td:not(.gap):not(.grey) {background-color:#f1f1f1;}
.report tbody tr:hover:not(.overallRow) td:not(.gap):not(.grey) {background-color:#edf4fc;}
.report td.gap, .report th.gap {border:0px;}
.report tbody td.grey {background-color:#aaaeb1;}
.report tfoot td.grey {background-color:#5b5c5c;}

.report tr.overallRow td {background-color: #30a6a6; color: #fff;}

table.ksoutcome th.gap {position:relative;}
table.ksoutcome th.gap::before {content:""; display:block; width:100%; background-color:#fff; height:10px; position:absolute; top:-5px;}

#device {
	display:none;
	width:1px; height:0px;}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
	#device {display:block;}
}
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {
	#device {display:block;}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
	#device {display:block;}
}

#saveLink,#savePhotoLink,.button {
	display: block;
	text-decoration: none;
	box-sizing: border-box;
	width: 220px;
	background-color: #31a6a7;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.8em;
	padding: 15px 40px;
	border: 1px solid #becbd1;
	border-radius: 30px;
	margin-top: 20px;
	font-weight: bold;}
#loginLink,#fpasswordGoLink,.utility .button {margin-top:0px;}
.utility .button {margin-left:10px; margin-top:3px;}
.utility .select2-container--selectors {margin-top:0px !important; margin-left:10px;}
.button {
	width: auto;
	display: inline-block;
	padding: 10px 20px;}

.reportToggles {clear: both; /*width: 700px;*/ margin-bottom: 10px;}

.reportToggles::after {content:"";display:table; clear:both;}
.reportToggles a {display:inline-block; background-color:#269899; margin-right:20px; padding:4px; border-radius:5px}
.reportToggles a span,.reportToggles a span em {box-sizing: border-box; height:26px;}
.reportToggles a {text-decoration:none; line-height:0.95em; color:#fff;} 
.reportToggles a.display.graph span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;} 
.reportToggles a.display.graph span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0;     border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.display.graph span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.display.graph span em::after {content:"Graph"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.display.graph::after {content:"Data"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.display.table span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.display.table span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0;     border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.display.table span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.display.table span em::before {content:"Data"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.display.table::before {content:"Graph"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}

.reportToggles a.assessments.summary span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.reportToggles a.assessments.summary span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0;     border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.assessments.summary span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.assessments.summary span em::after {content:"Summary"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.assessments.summary::after {content:"Detail"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.assessments.full span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.assessments.full span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0;     border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.assessments.full span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.assessments.full span em::before {content:"Detail"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.assessments.full::before {content:"Summary"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}
.reportToggles a.depth {display:none;}
.reportToggles a.depth.on {display:inline-block;}
.reportToggles a.depth.expanded span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.reportToggles a.depth.expanded span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0;     border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.depth.expanded span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.depth.expanded span em::after {content:"Expanded"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.depth.expanded::after {content:"Condensed"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.depth.condensed span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.depth.condensed span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0;     border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.depth.condensed span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg);   display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.depth.condensed span em::before {content:"Condensed"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.depth.condensed::before {content:"Expanded"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}


.reportToggles a.change {display:none;}
.reportToggles a.change.on {display:inline-block;}
.reportToggles a.change.showpcc span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.reportToggles a.change.showpcc span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0; border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.change.showpcc span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.change.showpcc span em::after {content:"Show % Change"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.change.showpcc::after {content:"Hide"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.change.hidepcc span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.change.hidepcc span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0; border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.change.hidepcc span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.change.hidepcc span em::before {content:"Hide"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.change.hidepcc::before {content:"Show % Change"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}


.reportToggles a.overall {display:inline-block;}
.reportToggles a.overall.showo span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.reportToggles a.overall.showo span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0; border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.overall.showo span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.overall.showo span em::after {content:"Show Overall"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.overall.showo::after {content:"Hide"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.overall.hideo span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.overall.hideo span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0; border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.overall.hideo span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.overall.hideo span em::before {content:"Hide"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.overall.hideo::before {content:"Show Overall"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}


.reportToggles a.abovepos {display:inline-block;}
.reportToggles a.abovepos.showap span {display:inline-block; background-color:#fff; padding:4px 10px 4px 30px; position:relative; border-top-left-radius:5px; border-bottom-left-radius:5px;}
.reportToggles a.abovepos.showap span::after {content:""; border-width:13px 0px 13px 10px; border-color:transparent transparent  transparent #fff; width:0; height:0; border-style:solid; position:absolute; right:-10px; top:0px;}
.reportToggles a.abovepos.showap span em::before {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; left:5px;top:6px}
.reportToggles a.abovepos.showap span em::after {content:"Show Above PoS"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.abovepos.showap::after {content:"Hide"; font-size:0.825em; text-transform:uppercase; padding-left:30px; padding-right:10px;}
.reportToggles a.abovepos.hideap span {display:inline-block; background-color:#fff; padding:4px 30px 4px 10px; position:relative; border-top-right-radius:5px; border-bottom-right-radius:5px;}
.reportToggles a.abovepos.hideap span::after {content:""; border-width:13px 10px 13px 0px; border-color:transparent #fff  transparent transparent; width:0; height:0; border-style:solid; position:absolute; left:-10px; top:0px;}
.reportToggles a.abovepos.hideap span em::after {content:"\f0c9"; font-family:"Font Awesome 5 Pro"; color:#d3d4d8; font-style:normal; transform:rotate(90deg); display:inline-block; position:absolute; right:5px;top:6px}
.reportToggles a.abovepos.hideap span em::before {content:"Hide"; font-style:normal; text-transform:uppercase; font-size:0.825em; color:#333e49;}
.reportToggles a.abovepos.hideap::before {content:"Show Above PoS"; font-size:0.825em; text-transform:uppercase; padding-right:30px; padding-left:10px;}


#saveLink:hover,.button:hover {background-color: #269899;}
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; */}

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

table.users {/* margin-left: 40px; */ border-collapse: collapse;}

.report.combined .colHeader div {width:100px;}

.reportGraphCombined {border:2px solid #edf2f8; margin-top:50px; display:flex;}
.reportGraphCombined .graphCol33 {width:33%;}
.reportGraphCombined .graphCol34 {width:34%;}
.reportGraphCombined .graphCol50 {width:50%;}


.reportTable th.sortable a, .reportTable th.sortable span.sortSpan {position:relative; display:block; white-space:nowrap; text-decoration:none; color:#FFF}
.reportTable th.sortable span.sortSpan {padding-right:1rem; padding-left:1rem;}

.report thead .sortable:not(.sorter-false):not(.tableTitle):not(.subjectName) div::after {
	content: "\f106";
	font-family: "Font Awesome 5 Pro";
	position: absolute;
	bottom:3px;
	left: 50%;
	margin-left: -4px;}
.reportTable th.sortable[data-sort="asc"] div {border-bottom:2px solid #74d7a1;background-color: #74d7a1; color:#333e49}
.reportTable th.sortable[data-sort="desc"] div {border-bottom: 2px solid #74d7a1;background-color: #74d7a1; color:#333e49;}
.reportTable th.sortable[data-sort="desc"] div::after {content: "\f107" !important;}

.dateFilterWrapper {display:flex; flex-direction:column; float:right;}
.dateFilter {display:flex; align-items:center;}
.dateFilter span {font-size:0.8rem; display:inline-block; flex-basis:40px; margin-right:2px;}
.dateFilter input {width:75px;  -webkit-appearance:none; border:1px solid #cbcdd9; padding:7px 3px; margin-right:24px;}