form {
	margin-bottom: 35px;
}

#proxy-search-fields,
#proxy-search-fields-left {
	display: flex;
	align-items: center;
}

#proxy-search-fields-left > div,
#proxy-search-fields-or,
#proxy-search-fields-right {
	margin-right: 21px;
}

#proxy-search-fields label {
	display: block;
}

#search-results {
	border: 1px solid #434343;
}

#search-results tr:nth-child( 4n-1 ),
#search-results tr:nth-child( 4n ) {
	background-color: rgba( 3, 42, 191, 0.05 );
}

#search-results th {
	text-align: left;
	padding: 7px 0 7px 7px;
	background-color: rgba( 3, 42, 191, 0.25 );
}

#search-results td {
	padding: 7px;
}

#search-results td.search-results-button {
	text-align: right;
}

#search-results table {
	width: 100%;
	font-size: 0.8em;
}

#search-results table tr:nth-child( 4n-1 ),
#search-results table tr:nth-child( 4n ) {
	background-color: unset;
}

#search-results table th {
	background-color: unset;
}

@media screen and ( max-width: 768px ) {
	#proxy-search-fields {
		display: block;
	}

	#proxy-search-fields > div {
		margin-right: 0;
		margin-bottom: 21px;
	}

	/***** THANK YOU CSS TRICKS! https://css-tricks.com/responsive-data-tables/ ***/
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		border: 1px solid #ccc;
	}

	#search-results td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	#search-results td:nth-of-type(1):before {
		content: "P/G Name";
	}

	#search-results td:nth-of-type(2):before {
		content: "Email";
	}

	#search-results td[colspan='2']:before {
		content: "Students";
	}

	#search-results td:empty:before {
		content: "";
	}

	#search-results table td:nth-of-type(1):before {
		content: "S Name";
	}

	#search-results table td:nth-of-type(2):before {
		content: "ID #";
	}


	#search-results table td:nth-of-type(3):before {
		content: "Grade";
	}

	#search-results table td:nth-of-type(4):before {
		content: "School";
	}
}