/* mobile */
#mobilenav,
.menu,
.mobileOnly {
	content-visibility: hidden;
	display: none;
}



body>header nav ul,
body>header nav ul li {
	margin: 0;
	padding: 0;
	position: relative
}

body>header nav>ul>li>a {
	font-size: 1rem;
	color: var(--dark-purple);
}

/* nav */
nav ul {
	margin: 0
}

body>header nav {
	margin: 0;
	padding: 0 1rem;
	background: var(--light-grey)
}

body>header nav ul {
	overflow: visible;
	margin: 0;
	padding: 0;
}

body>header nav li {
	display: inline-block;
	position: relative
}

body>header nav a {
	line-height: 3.25rem;
	padding: 0 1em;
	display: inline-block;
	color: #fff;
	text-decoration: none;
}

body>header nav>ul>li:hover>a,
body>header nav>ul>li:active>a,
body>header nav>ul>li.on>a {
	background: #fff;
	color: var(--dark-purple)
}

/* drop-down menu */
body>header nav li ul {
	z-index: 1;
	width: 200px;
	padding: 1em 0;
	background: var(--dark-purple);
	position: absolute;
	overflow: auto;
	height: auto;
	top: -200vh;
	opacity: 0;
	z-index: -1;
	visibility: hidden;
	transition: ease 200ms opacity 0.35s;
}

body>header nav li:hover ul,
body>header nav>ul>li>a.tapped+ul,
body>header nav>ul>li>a:focus+ul,
body>header nav>ul>li>ul:focus-within {
	opacity: 1;
	top: auto;
	visibility: visible;
	z-index: 1;
}

body>header nav>ul>li:last-child ul {
	right: 0
}

body>header nav li ul li {
	width: 100%;
	display: block;
	float: left;
	padding: 0 2px
}

body>header nav ul li ul li a {
	background: none;
	color: #fff
}

body>header nav li ul li a {
	font-size: .9em;
	border-radius: 3px;
	line-height: 1.1em;
	padding: .3em .5em;
	display: block;
	width: 100%;
	text-align: left;
	float: left
}

body>header nav li ul li a:hover,
.t1 li ul li a:active {
	color: var(--dark-purple);
	background: #fff
}

body>header nav li ul ul {
	display: none
}


.gap-2em {
	gap: 2em
}

.flex.space-between {
	justify-content: space-between;
}

.flex.center-horizontally {
	align-content: center;
	align-items: center
}

.flex.center-bottom {
	align-content: flex-end;
	align-items: flex-end
}

.flex.flex-wrap {
	flex-wrap: wrap
}

.flex-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row;
	flex-flow: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flex-grid .col {
	-webkit-box-flex: 1;
	-ms-flex: 1 0 20%;
	flex: 1 0 20%;
	background: #e0ddd5;
	color: #171e42;
	margin: 1em;
	padding: 1em;
}

.school-list .col {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	border-left: 3px solid #e0ddd5;
	border-bottom: 3px solid #e0ddd5;
	background: none;
	color: #333;
	margin: 0;
	padding: 2%;
}

.school-list .col:nth-child(4n+4) {
	border-right: 3px solid #e0ddd5
}

.school-list .col h3 {
	padding: 0;
	margin: 0 0 0.75em;
	font-size: 1.125em;
	line-height: 120%
}

#filters>* {
	margin: 0.5em
}

#filters>label {
	flex: 1 1 auto;
	width: calc(22% - 1rem)
}

#filters>label input,
#filters>label select {
	width: 100%
}


/* RESPONSIVE TABLES ------------------------------ */

.table-wrap::before {
	left: 0;
}

.table-wrap::after {
	right: 0;
}




@media screen and (max-width:1200px) {
	body>header .header-top .logo {
		padding-left: 0
	}

	body>header .header-top .logo img {
		width: 14em
	}

	body>header .header-top .logo .tool-name {
		font-size: 1rem
	}

	body>header nav a {
		padding: 0 0.5em
	}

	body>header nav>ul>li>a {
		font-size: 0.875rem
	}
}


@media screen and (max-width: 1000px) {
	.dashboard {
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.dashboard li {
		width: 50%
	}
}