.quad-section * {
	box-sizing: border-box;
	position: relative;
}

:root {
	--announcementsColor: var(--customAnnouncementsColor, hsl(92, 48%, 42%) );
	--announcementsTextColor: var(--customAnnouncementsColor, hsl(95, 49%, 36%) );
	--eventsColor: hsl(202, 98%, 37%);
	--diningColor: hsl(174, 100%, 27%);
	--athleticsColor: hsl(350, 78%, 30%);
	--healthColor: hsl(282, 68%, 38%);
	--directorySearchColor: hsl(282, 68%, 38%);
	--usefulLinksColor: hsl(174, 88%, 23%);
	--garnetGatewayColor: hsl(350, 78%, 30%);
	--newsColor: hsl(350, 78%, 30%);
	--submitAnnouncementColor: hsl(30, 100%, 48%);
	--submitEventColor: hsl(186, 100%, 37%);
	--moduleBorderColor: hsl(0, 0%, 80%);
	--fadedTextColor: hsl(14, 15%, 54%);
	--serif: "Sabon Next W01";
	--sans: "Neue Frutiger W01";
	--borderRadius: 3px;
	--paddingSize: 0.9em;
	--quadHomeThirdsHeight: 350px;
}

section.announcements-section {
	--color: var(--announcementsColor);
}
section.events-section {
	--color: var(--eventsColor);
}
section.dining-section {
	--color: var(--diningColor);
}
section.athletics-section {
	--color: var(--athleticsColor);
}
section.garnetgateway-section {
	--color: var(--garnetGatewayColor);
}
section.directorysearch-section {
	--color: var(--directorySearchColor);
}
section.news-section {
	--color: var(--newsColor);
}
section.usefullinks-section {
	--color: var(--usefulLinksColor);
}

section, section * {
	box-sizing: border-box;
	position: relative;
	line-height: 1.25em;
}
@media (min-width: 550px) {
	section {
		margin: 1.5em 0;
	}
}

section[class*="-section"] h2 {
	background-color: var(--color);
}
section[class*="-section"] .loading {
	color: var(--color);
}
section[class*="-section"] .module {
	border-top-color: var(--color);
}
@media (min-width: 550px) {
	section[class*="-section"] h2 {
		background-color: transparent;
		color: var(--color);
	}
}

.modal-back {
	text-align: center;
	padding: 10vh 0;
	height: 100vh;
	width: 100vw;
	display: none;
	z-index: 98;
	position: fixed;
	background: hsla(0, 0%, 0%, 0.5);
	left: 0;
	top: 0;

	&::after {
		position: absolute;
		z-index: 101;
		top: 2em;
		right: 2em;
		height: 2.5em;
		width: 2.5em;
		border-radius: 2.5em;
		line-height: 2.5em;
		font-weight: 700;
		content: "x";
		color: hsl(0, 0%, 100%);
		background: hsl(0, 0%, 0%);
		cursor: pointer;
	}

	& > :first-child {
		margin: 0 auto;
		height: 80vh;
		width: 90%;
		position: relative;
		overflow: auto;
		box-shadow: 0 0 15px hsla(0, 0%, 0%, 0.8);
	}

	& > img {
		display: block;
		max-height: 80vh;
	}
}

.single-item-link.announcement-item:target {
	background: hsl(92, 90%, 90%);
	outline: none !important;
}

.single-item-link.event-item:target {
	background: hsl(202, 90%, 93%);
	outline: none !important;
}

.split-button {
	--border-color: currentColor;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 5px;
	border: .5px solid var(--border-color);

	input[type="radio"] {
		display: none;
	}

	& span {

	}
	& label {
		text-align: center;
		padding: .5em .8em;

		&:hover {
			text-decoration: underline;
		}
	}
	input[type="radio"]:checked + label {
		/* font-weight: bold; */
		background: white;
	}

	& label:not(:first-of-type) {
		border-left: .5px solid var(--border-color);
	}

}


section h2 {
	font-family: var(--sans);
	font-weight: 600;
	font-size: 1.6em;
	padding: 0.5em;
	color: #fff;

	@media (max-width: 550px) {
		margin-bottom: 0;
		margin-top: 0;
	}

	@media (min-width: 550px) {
		padding-top: 0;
		text-align: center;
		background-image: none;
		/* adding the icon below makes it look off-center */
		left: -25px;
		margin: 0;
		font-family: var(--serif);
		font-size: 2em;
		font-weight: 700;
	}

	@media (min-width: 800px) {
		left: 0;
		padding-left: 0;
	}

	@media (max-width: 551px) {
		&::after {
			content: "";
			display: block;
			height: 1.5em;
			width: 1.5em;

			background-repeat: no-repeat;
			background-position: center;
			background-color: hsla(0, 0%, 10%, 0.2);
			background-size: 15px;
			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAUCAYAAADoZO9yAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANZJREFUeNq81QkNwzAMBVCHQSEUQqAMQiAMwhhsDAIhGoJBGIRBGAQvllI12lXbsfulqFIP5/VyABGnOgquedQRwSm19qmOZ5uLtmk5kPEz6wm2iG9zUQ6A/5N2QFDKFsQEs4Gg3KB7Xy4YBoKSl48HrTHtJ7gz6tKDmCVqNkaIiO8XH5mYsxuiK5KYmOyGGMWYIrQYAULetQWYwmwBBJ20PYCL8UN0mMi8Yz+EAcYOMYCxRygw2Q0hwGTYK7RI/egbakQYwNCjp3VnbruuIYSLtt5LgAEArWMRq9J0TXMAAAAASUVORK5CYII=);
			right: 6px;
			top: 8px;
			border-radius: 2em;
			cursor: pointer;
			transition: 0.2s transform;
			transform: rotate(-90deg);
		}
	}
}

section.js-active h2::after {
	transform: rotate(0deg);
}


/* This is the new better way to build these headers */
/* @TODO change over the other modules to this style */
section:where( 
	.announcements-section, 
	.events-section ,
	.athletics-section ,
	.news-section ,
	.directorysearch-section ,
	.garnetgateway-section ,
	.panel-submit-event ,
	.panel-health-support ,
	.panel-dining-link ,
	.usefullinks-section ,
	.panel-submit-announcement 
) {

	h2 {
		display: grid;
		grid-template-columns: 32px 1fr min-content;
		gap: .4em;
		align-items: center;
		justify-content: flex-start;
		--iconsize: 32px;
	}

	.section-icon {
		fill: currentColor;
		width: var(--iconsize);
		height: var(--iconsize);
	}

	h2::after {
		justify-self: end;
	}

	@media( min-width: 550px ) {
		h2 {
			display: flex;
			justify-content: center;
		}
	}
}


.content .hilite-match {
	background: hsl(43, 100%, 92%);
}

/*select*/
.filter-choice-dropdown {
	border-width: 1px;
	border-style: solid;
	border-radius: var(--borderRadius);
	background-repeat: no-repeat;
	background-size: 10px;
	background-position: 90% center;
	background-color: hsl(0, 0%, 99%);
	font-size: 1em;
	padding: 8px 20px 8px 8px;

	/* hide the native UI dropdown arrow. */
	appearance: none;

	& option {
		color: inherit;
		border: 0;
	}
	& option[disabled] {
		color: silver;
	}

	&:active,
	&:focus,
	& option:active,
	& option:focus {
		outline: none !important;
		outline-style: none !important;
	}

	& a {
		display: block;
		color: inherit;
		padding: 0.6em;

		&:hover {
			text-decoration: none;
		}
	}
}

.offsite-link::after {
	background-image: url("/wp-content/plugins/bates-today-quad/styles/images/offsite-link.png");
	background-repeat: no-repeat;
	background-size: contain;
	height: 12px;
	width: 12px;
	top: 10px;
	right: -4px;
	opacity: 0.7;
	content: "";
	display: block;
	position: absolute;
}

.module {
	border: 1px solid var(--moduleBorderColor);
	border-top-width: 3px;
	overflow: auto;
	background: white;
	display: block;

	@media (max-width: 550px) {
		display: none;
	}

	.controls {
		background: hsl(0, 0%, 96%);
		padding: 0.5em;
		border-bottom: 1px solid var(--moduleBorderColor);
		overflow: hidden;
	}

	.search {
		border-width: 1px;
		border-style: solid;
		padding: 0.6em 0.6em 0.6em 2.6em;
		border-radius: var(--borderRadius);

		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACAklEQVRYhe2WPWgUQRiG5wJpIkqIkEY7K1sFbVMFYpnGaBEEf+rgDypptrAIhGBjoRCMlim00DTXuM3t3tw8bydaCEkVg4USEAKpooUb+VhyuZ37iQj5YLp5v/d5Z2dmx7nj+l/Ke39R0kPguaQVSYshhKuNRuPkwEyTJBkCZoENSb/ajF3gZZ7nZ/pq3mq1Tkv6cIhxeewAM/00/2INgJ+SVoF5YA5YkvS5DBJCuN+TeZIkQ+XkwNM0TUcPmg9MAetm/l4IYbprAGC2lOhGJ02e52OSvAH+3g64CsCGTV5Vl2XZuKSvRrsQbV4ctb/fPDZFafW2nHO1KABJj0yD1SjxH/2wpG0T4lJUA+CFEc/HAhQQa6bHzVjxihHPdQMALJtVvBsLsGgAlroBkPTWnKDbUWJgxtB/6sK/JmnThJiIUnvvT0naNQ2mYvSSJu3VLGkkCqBoYvfBep7nYxV1I8BHo30dbe6cc977swX9fhKfZdl4BfN3pf/Cha4AnHMOuFZqtllcMsOlqTVJkza5WYGsp7cC8EDSXqnxtqT3wDLwxm64g0bPECGEaeBHxJug/xBpmo4CC5K22pjsSHoFXAG+DQSiqJqky5JuSboH3AEm7FFrNpvnBw3RsTpB1Ov1E/8a4snAAQ6DqPLCGhhECOHxkZnvl6RzwDNJ14/c/Liq1G/lCXCsjGVxdgAAAABJRU5ErkJggg==);
		background-repeat: no-repeat;
		background-position: 4px center;
		background-size: 1.7em;
		font-size: 1em;
	}

	.content {
		padding: 0.5em 0;
		overflow: hidden;
		height: 100%;
		/*  make room for the ajax loader */
		min-height: 100px;

		@media (min-width: 550px) {
			overflow: auto;
			height: 85%;
		}
	}

	.content.search-results {
		margin-bottom: 0;
		overflow: auto;
		/* Use the following to add gray bottom - indicator that there is more to scroll */
		/*
		background-image: linear-gradient(0deg, hsl(0, 0%, 90%) , hsl(0, 0%, 100%) 20%);
		box-shadow: 0 150px 0 hsl(0,0%,90%); // this is just to fill in the gap at the bottom when the gradient is in place. So it should match the first stop of the linear-gradient
		*/
	}

	.item {
		padding: 0.7em 4px 0.7em 0;
		margin-left: 10px;
		overflow: auto;

		@media (min-width: 1024px) {
			padding: 1em 0.5em 0.5em;
		}
	}
	.location {
		color: hsl(0, 0%, 26%);
	}

	.time {
		color: hsl(203, 81%, 45%);
	}

	& p {
		margin: 4px 0;
	}

	.title a {
		color: inherit;

		&[href="#"] {
			pointer-events: none;
		}
	}

	@media (min-width: 1024px) {
		margin-left: 10px;
	}

	.paging {
		background: hsl(0, 0%, 93%);
		border-radius: 2px 0 0;
		position: absolute;
		bottom: 0;
		right: 0;

		& a {
			display: block;
			height: 32px;
			width: 32px;
			text-align: center;
			text-decoration: none;
			border: none;
			background-size: 13px;
			background-repeat: no-repeat;
			float: left;
		}

		& a.next {
			background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-white-right.png");
			background-position: 12px 8px;
		}
		& a.previous {
			background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-white-left.png");
			background-position: 8px 8px;
		}

		& a.disabled {
			background-color: transparent;
			pointer-events: none;
			cursor: text;
		}

		& a.active {
			background-color: #000;
		}
	}

	.action-button,
	& input[type="submit"] {
		border-style: solid;
		border-width: 1px;
		border-radius: var(--borderRadius);
		padding: 0.7em 0.9em;
		margin: 1em 10px;
		display: inline-block;
		text-decoration: none;
		background: hsl(0, 0%, 99%);
		&:hover {
			text-decoration: underline;
		}
	}
	.more-items-action-button {
		margin-left: 10px;
	}

	.no-more-items {
		text-align: center;
		padding: 1em;
		background: hsl(0, 0%, 94%);
		color: var(--fadedTextColor);
		clear: both;

		@media (min-width: 550px) {
			width: 80%;
			margin: 1em auto;
		}
	}
}

.col {
	float: left;

	@media (min-width: 550px) {
		padding-bottom: 0.5em;
	}
}
.col.half {
	width: 50%;
}
.col.third {
	width: 33%;
}
.col.two-thirds {
	width: 67%;
}
.col.quarter {
	width: 25%;
}
.col.js-viewed {
	opacity: 0.5;
}

@media (max-width: 550px) {
	.col.half,
	.col.third,
	.col.quarter,
	.col.two-thirds {
		width: 100%;
		float: none;
	}
}

.time-navigate {
	overflow: auto;
	height: 2.5em;
	/*  match action button margin top */
	margin-top: 1em;
	text-align: center;

	@media (min-width: 800px) {
		font-size: 0.9em;
	}

	& a {
		display: block;
		height: 100%;
		width: 50%;
	}
}

.time-navigate-previous,
.time-navigate-next,
.ui-datepicker-prev,
.ui-datepicker-next {
	width: 20%;
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: center;
	float: left;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.loading {
	color: hsl(0, 96%, 25%);
}
.loading:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 101;
	border-radius: 50%;

	animation: rotate 0.8s infinite linear;

	border: 5px solid currentColor;
	border-right-color: transparent !important;

	padding: 12px;
	left: calc(50% - 12px);
	top: 30%;

	transition: 0.3s;
}

/**
 * Announcements <section>
 **/
section.announcements-section {

	.module {

		@media (min-width: 550px) {
			height: 455px;
		}
		@media (min-width: 800px) {
			height: 500px;
		}
	}

	.content {
		padding-top: 0;
		height: 100%;
	}

	@media (min-width: 1024px) {
		.content.search-results .item {
			width: 50%;
			padding: 0 1em;
			float: left;
		}
	}

	.search {
		border-color: var(--announcementsColor);
		display: block;
		margin: 0 auto;
		width: 80%;

		@media (min-width: 1024px) {
			width: 50%;
			margin: 0 5px 0 auto;
		}

		&::placeholder {
			color: var(--announcementsColor);
		}
	}

	.paging a:not(.disabled) {
		background-color: var(--announcementsColor);
	}

	.item {
		.title {
			color: var(--announcementsTextColor);
			font-weight: bold;
			margin-bottom: 0;
		}
		.location {
			color: var(--fadedTextColor);
		}
		.description {
			color: var(--fadedTextColor);
			font-weight: 300;
			font-size: 0.9em;
			margin-top: 0;
		}
	}

	.action-button {
		border-color: var(--announcementsColor);
		color: var(--announcementsColor);
		margin-left: var(--paddingSide);
	}

	.featured {
		padding: var(--paddingSide);
		background: hsl(51, 100%, 95%);
		border-bottom: 1px solid var(--moduleBorderColor);
		height: 100%;

		@media (min-width: 550px) {
			border-right: 1px solid var(--moduleBorderColor);
			border-bottom: none;
			overflow: auto;
		}

		.item {
			.title {
				color: hsl(95.1, 49.5%, 21%);
			}
		}

		& h3 {
			text-transform: uppercase;
			color: var(--announcementsColorLight);
			font-size: 0.8em;
			padding: 0.5em 0;
			font-family: var(--sans);
		}

		.image-wrap {
			width: 35%;
			padding-right: 0.8em;
			float: left;
		}

		& img {
			max-width: 100%;
			max-height: 100px;
			margin: auto;
			display: block;
		}

		.title {
			font-weight: bold;
		}

		.time {
			color: #757575;
		}

		.featured-info {
			float: left;
			width: 65%;
		}
	}

	.featured {
		width: 100%;

		@media (min-width: 550px) {
			float: left;
			width: 50%;
		}

		@media (min-width: 800px) {
			width: 33%;
		}
	}

	.col {
		width: 100%;
		/* later show with nth-of-type */
		display: none;
	}

	.col:nth-of-type(1) {
		display: block;
	}

	@media (min-width: 550px) {
		.col {
			float: left;
			width: 50%;
		}
		.featured ~ .content .col {
			width: 100%;
		}
		/* If there is no featured, show column 2 at this bp */
		.col:nth-of-type(2) {
			display: block;
		}
		/* if there IS featured, hide col 2 at this bp */
		.featured ~ .content .col:nth-of-type(2) {
			display: none;
		}
	}

	@media (min-width: 800px) {
		.col {
			width: 33.3%;
		}
		.featured ~ .content .col {
			width: 50%;
		}
		.featured ~ .content .col:nth-of-type(2) {
			display: block;
		}
		/* If there is no featured, show column 3 at this bp */
		.col:nth-of-type(3) {
			display: block;
		}
		/* if there IS featured, hide col 3 at this bp */
		.featured ~ .content .col:nth-of-type(3) {
			display: none;
		}
	}
}

/**
 * Events <section>
 **/
section.events-section {
	& h2 .section-icon {
		--iconsize: 28px;
	}

	.module {
		@media (min-width: 550px) {
			height: 410px;
			overflow: hidden;
		}
	}

	.content {
		padding-top: 0;
		height: 100%;
	}

	.item {
		.location {
			color: var(--fadedTextColor);
			font-weight: 300;
		}
	}

	.content.js-displaying-today .date {
		display: none;
	}
	.content .date:after {
		content: "\2014";
		padding: 0 4px;
	}

	.controls {
		.time-navigate-current {
			margin-top: 0.5em;
			margin-left: 5px;
			margin-right: 0;
			float: left;
			clear: left;
		}

		/* This is to override styles in the ÀÖ²¥´«Ã½ Framework theme, when these
		   modules are displayed there. */
		& table {
			&,
			& td {
				border: none;
			}

			& th {
				background: transparent;
				color: black;
				font-weight: bold;
			}
		}

		@media (min-width: 800px) {
			float: left;
			height: 100%;
			border-bottom: none;
			border-right: var(--moduleBorderColor) 1px solid;
			width: 33.3%;
			padding: 0.5em 1.2em;
		}
	}

	.top-controls {
		display: grid;
		grid-template-columns: 40% 60%;
		align-items: start;
		gap: .75em;
	}

	._approval-filter {
		/* align-self: start; */
	}

	.filter-choice-dropdown {
		color: var(--eventsColor);
		border-color: var(--eventsColor);
		/* float: left; */
		/* margin-right: 0.5em; */
		/* margin-top: 0.5em; */
		/* width: 40%; */
		/* max-width: 40%; */

		@media (min-width: 550px) {
			/* width: 45%; */
			/* margin-right: 1em; */
		}

		@media (min-width: 800px) {
			/* margin-bottom: 0.5em; */
			/* margin-top: 1em; */
			/* width: 100%; */
			background-position: 95% center;
			float: none;
		}

		background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQzIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDE0MyAyNTAiPgo8cGF0aCBmaWxsPSIjMDI3N2JiIiBkPSJNMTQyLjg1NyA5OC4yMTRxMCAzLjYyNy0yLjY1MSA2LjI3OGwtNjIuNSA2Mi41cS0yLjY1MSAyLjY1MS02LjI3OCAyLjY1MXQtNi4yNzgtMi42NTFsLTYyLjUtNjIuNXEtMi42NTEtMi42NTEtMi42NTEtNi4yNzh0Mi42NTEtNi4yNzggNi4yNzgtMi42NTFoMTI1cTMuNjI3IDAgNi4yNzggMi42NTF0Mi42NTEgNi4yNzh6Ij48L3BhdGg+PC9zdmc+");
	}


	.time-navigate {
		width: 25%;
		float: left;
		margin-right: 0.5em;
		margin-top: 0.5em;

		@media (min-width: 800px) {
			/* maybe we'll just hide this. It seems redundant with the calendar picker */
			display: none;
		}

		& a {
			color: var(--eventsColor);
		}
	}
	.time-navigate-current {
		@media (min-width: 800px) {
			display: none;
		}
	}

	.time-navigate-previous,
	.ui-datepicker-prev {
		background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-events-left.png");
	}
	.time-navigate-next,
	.ui-datepicker-next {
		background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-events-right.png");
	}

	.month-navigate {
		@media (max-width: 800px) {
			display: none;
		}

		font-size: 0.9em;

		& a {
			color: var(--eventsColor);
		}

		@media (min-width: 1024px) {
			margin: 0.5em 0;
		}
	}

	.ui-datepicker-header {
		height: 2.5em;
		line-height: 2.5em;
		text-align: center;
		margin-top: 1em;
		margin-bottom: 1em;

		@media (min-width: 800px) {
			margin-top: 0.5em;
			margin-bottom: 0.5em;
		}
	}

	.ui-datepicker-title {
		z-index: 40;
	}

	.ui-datepicker-prev,
	.ui-datepicker-next {
		display: block;
		height: 100%;
		cursor: pointer;
		z-index: 60;
		width: 25%;

		span {
			display: none;
		}
	}
	.ui-datepicker-prev {
		background-position: 61% center;
	}
	.ui-datepicker-next {
		background-position: 39% center;
		float: right;
	}

	.ui-datepicker-calendar {
		width: 100%;
		margin: 0 auto;

		& td {
			height: 2em;
			padding: 0;
			vertical-align: middle;
			text-align: center;

			@media (min-width: 1024px) {
				height: 2.5em;
			}
		}

		& a {
			display: inline-block;
			width: 100%;
			line-height: 2em;
			border: 1px solid transparent;

			&:hover {
				border-color: var(--eventsColor);
				text-decoration: none;
			}
		}

		.ui-datepicker-today {
			font-weight: bold;
			background: hsl(113, 88%, 94%);

			& a {
				border-color: hsl(149, 27%, 87%);
			}
		}

		.ui-datepicker-unselectable {
			color: hsl(0, 0%, 75%);
		}

		.ui-datepicker-current-day {
			background: var(--eventsColor);
			color: #fff;

			& a {
				color: inherit;
				cursor: text;
				border-color: transparent;
			}
		}
		.ui-datepicker-current-day.ui-datepicker-unselectable {
			background: hsl(203.3, 27.3%, 87.1%);
			color: hsl(0, 0%, 65%);
		}
	}

	.search {
		border-color: var(--eventsColor);
		width: 100%;
		transition: width 0.2s;
		margin: 0.5em 0;

		@media (max-width: 800px) {
			padding-left: 1em;
			width: 2.5em;
			cursor: pointer;

			&:focus {
				background-image: none;
				width: 50%;
				cursor: text;
			}
		}
	}

	.clearSearchButton {
		display: block;
		background: var(--eventsColor);
		color: #fff;
		border-radius: 2px;
		padding: 0.5em;
		margin: 5px;
		text-align: center;
		width: 130px;
	}

	.search::placeholder {
		color: var(--eventsColor);
	}

	.col {
		width: 100%;
		display: none;
	}

	.col:nth-of-type(1) {
		display: block;
	}

	@media (min-width: 550px) {
		.col {
			float: left;
			width: 50%;
		}
		.col:nth-of-type(2) {
			display: block;
		}
	}

	@media (min-width: 700px) {
		.col {
			width: 33.3%;
		}
		.col:nth-of-type(3) {
			display: block;
		}
	}

	@media (min-width: 800px) {
		.col {
			width: 50%;
		}

		.col:nth-of-type(3) {
			display: none;
		}
	}

	@media (min-width: 1130px) {
		.col {
			width: 33.3%;
		}
		.col:nth-of-type(3) {
			display: block;
		}
	}

	.action-button {
		border-color: var(--eventsColor);
		color: var(--eventsColor);
		margin-left: var(--paddingSide);
	}

	.paging a:not(.disabled) {
		background-color: var(--eventsColor);
	}

	.title {
		font-weight: bold;
	}
}

section.quad-section {
	clear: both;
	font-size: 12pt;
}
@media (min-width: 800px) {
	& section.half {
		width: 48%;
		margin-right: 2%;
		margin-left: 0;
		float: left;
		clear: left;
	}

	& section.half + section.half {
		margin-left: 2%;
		margin-right: 0;
		clear: none;
	}

	& section.third {
		width: 31.3%;
		margin-right: 2%;
		margin-left: 0;
		float: left;
		clear: left;

		& > h2 {
			font-size: 1.7em;
		}
	}
	& section.third + section.third {
		margin-right: 1%;
		margin-left: 1%;
		clear: none;
	}
	& section.third + section.third + section.third {
		margin-right: 0;
		margin-left: 2%;
		clear: none;
	}
}

/**
 * Dining <section>
 **/
section.dining-section {
	@media (min-width: 800px) {
		margin-top: 0;
	}

	& h2 {
		background-position: left -93px;

		.section-icon {
			background-position: left -124px;
		}
	}

	.module {

		@media (min-width: 550px) {
			height: 570px;
			overflow: hidden;
		}
	}

	& h3.dining-day-name {
		margin: 0px 10px;
		color: hsl(0, 0%, 50%);
		font-size: 1.1em;
		font-weight: normal;
		font-style: italic;
	}

	.action-button {
		border-color: var(--diningColor);
		color: var(--diningColor);
	}
	.action-button.js-active {
		background: var(--diningColor);
		color: #fff;
	}

	.paging a:not(.disabled) {
		background-color: var(--diningColor);
	}

	.col {
		width: 100%;
		display: none;

		@media (min-width: 550px) {
			float: left;
			width: 50%;
		}
	}
	.col.js-viewed {
		opacity: 0.7;
	}

	.col:nth-of-type(1) {
		display: block;
	}
	@media (min-width: 550px) {
		.col:nth-of-type(2) {
			display: block;
		}
	}

	.col .action-button {
		margin: 1em;
		@media (max-width: 550px) {
			display: none;
		}
	}

	.time-navigate {
		width: 50%;
		float: left;

		@media (min-width: 550px) {
			width: 30%;
			overflow: hidden;
		}

		@media (min-width: 800px) {
			width: 25%;
			float: left;
			height: 3.3em;
			overflow: visible;
		}

		& a {
			color: var(--diningColor);
		}
	}

	.time-navigate-previous.disabled,
	.time-navigate-next.disabled {
		pointer-events: none;
		opacity: 0.3;
	}

	.time-navigate-previous {
		background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-dining-left.png");
	}
	.time-navigate-next {
		background-image: url("/wp-content/plugins/bates-today-quad/styles/images/chevron-dining-right.png");
	}

	.time-navigate-current {
		float: left;

		@media (min-width: 1100px) {
			margin-left: 1em;
		}
	}

	.meal-buttons {
		clear: both;

		.action-button {
			margin: 1em 10px 0.5em 0;
		}

		@media (min-width: 550px) {
			& a {
				margin-right: 4px;
			}
		}

		@media (min-width: 1024px) {
			float: left;
			clear: none;
			margin-left: 2%;
		}
	}

	.title {
		font-weight: bold;
	}
	.fooditems {
		font-weight: 300;
	}
}

/**
 * Athletics <section>
 **/
section.athletics-section {
	@media (min-width: 800px) {
		margin-top: 0;
	}

	& h2 {
		--iconsize: 39px;
	}
	.section-icon {
		@media (max-width: 550px) {
			transform: translateX( -5px );
		}
	}

	.module {
		@media (min-width: 550px) {
			height: 570px;
			overflow: hidden;
		}
	}

	.content {
		padding-top: 0;
	}

	.action-button {
		color: var(--athleticsColor);
		margin-left: 1em;
	}
	.offsite-link {
		color: var(--athleticsColor);
		float: right;
		padding: 0.7em 0.9em;
		margin: 1em 0.4em 1em 0;
		display: inline-block;
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}

		@media (min-width: 550px) {
			margin-right: 1em;
		}
	}

	.action-button.js-active {
		background: var(--athleticsColor);
		color: #fff;
	}

	.filter-choice-dropdown {
		color: var(--athleticsColor);
		border-color: var(--athleticsColor);
		margin: 1em 5px;
		background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQzIiBoZWlnaHQ9IjI1MCIgdmlld0JveD0iMCAwIDE0MyAyNTAiPgo8cGF0aCBmaWxsPSIjODgxMDI0IiBkPSJNMTQyLjg1NyA5OC4yMTRxMCAzLjYyNy0yLjY1MSA2LjI3OGwtNjIuNSA2Mi41cS0yLjY1MSAyLjY1MS02LjI3OCAyLjY1MXQtNi4yNzgtMi42NTFsLTYyLjUtNjIuNXEtMi42NTEtMi42NTEtMi42NTEtNi4yNzh0Mi42NTEtNi4yNzggNi4yNzgtMi42NTFoMTI1cTMuNjI3IDAgNi4yNzggMi42NTF0Mi42NTEgNi4yNzh6Ij48L3BhdGg+PC9zdmc+");

		@media (min-width: 550px) {
			margin: 1em;
		}
	}

	.paging a:not(.disabled) {
		background-color: var(--athleticsColor);
	}

	.col {
		width: 100%;
		display: none;

		@media (min-width: 550px) {
			float: left;
			width: 50%;
			/* to prevent weird animation things when page-naving */
			height: 100%;
		}
	}

	.col:nth-of-type(1) {
		display: block;
	}
	@media (min-width: 550px) {
		.col:nth-of-type(2) {
			display: block;
		}
	}

	.title {
		font-weight: bold;
	}

	.item .time {
		color: hsl(0, 0%, 40%);
		font-weight: 300;
	}

	.score {
		color: var(--athleticsColor);
		font-weight: 600;
	}
}

/**
 * Panels <section>s
 */
section.features-panel-section {
	@media (min-width: 550px) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 3px;
		margin-top: 4em;
	}
}

section.panel {
	margin: 0;

	& p {
		display: none;
	}
}
@media (min-width: 550px) {
	section.panel {
		height: 190px;
		padding: 0 1em 1em;
		cursor: pointer;

		& p {
			text-align: center;
			display: block;
			opacity: 0.7;
		}

		&:hover a {
			text-decoration: underline;
		}
	}
}

@media (min-width: 800px) {
	& section.panel {
		height: 210px;
		border-radius: var(--borderRadius);
	}
}

@media (min-width: 1024px) {
	& section.features-panel-section {
		grid-gap: 1em;
	}
}

section.panel h2 {
	color: #fff;

	cursor: pointer;

	& a {
		color: inherit;
	}

	&:after {
		display: none;
	}

	@media (min-width: 550px) {
		/* background-image: none; */
		padding-left: 0.5em;
		padding-top: 0;
		padding-bottom: 4px;
		margin-top: 1.5em;
		left: 0;
		font-size: 1.5em;

		display: flex;
		flex-direction: column;
	}

	@media (min-width: 550px) and (max-width: 800px) {
		font-size: 1.4em;
	}
}
section.panel-submit-announcement {
	color: #fff;
	background-color: var(--submitAnnouncementColor);

	& h2 {
		background-color: var(--submitAnnouncementColor);
	}
}

section.panel-submit-event {
	color: #fff;
	background-color: var(--submitEventColor);

	& h2 {
		background-color: var(--submitEventColor);
	}
}
section.panel-health-support {
	color: #fff;
	background-color: var(--healthColor);

	& h2 {
		background-color: var(--healthColor);
		--iconsize: 26px;
	}

	@media (max-width: 550px) {	
		.section-icon {
			transform: translateX( 2px );
		}
	}
}
section.panel-dining-link {
	color: #fff;
	background-color: var(--diningColor);

	& h2 {
		background-color: var(--diningColor);
	}
}

/** 
 * Forms in Modules
 */
.quad-section .module form label {
	display: block;
	margin: 1.5em 0 0.4em;
	font-weight: bold;
	font-size: 0.9em;
	opacity: 0.7;
}
.quad-section .module form input[type="text"],
.quad-section .module form input[type="password"],
.quad-section .module form select {
	font-size: 1em;
	display: block;
	border: 1px solid silver;
	padding: 0.5em;
	width: 90%;
}
.quad-section .module form select {
	padding: 0.3em;
}

.quad-section .module form input.action-button,
.quad-section .module form input[type="submit"] {
	margin: 1em 0;
}

/**
 * Directory Search <section>
 **/
section.directorysearch-section {
	& a {
		color: var(--directorySearchColor);
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
	}

	& h2 {
		background-position: left -507px;

		.section-icon {
			background-position: left -314px;
		}

		@media (min-width: 1024px) {
			.section-icon {
				background-position: left -307px;
			}
		}
	}

	.module {
		padding: 1em;

		.no-more-items {
			margin-top: 25%;
		}

		#clear-search-results {
			position: absolute;
			z-index: 90;
			background: hsl(0, 0%, 96%);
			padding: 0.7em 1.5em;
			top: 0;
			right: 0;
			display: none;
		}

		.departments-wrap {
			transition: 0.3s opacity;
		}
		.departments-wrap.disabled {
			pointer-events: none;
			opacity: 0.5;

			& select {
				background: hsl(0, 0%, 88%);
			}
		}

		.item {
			.name {
				font-weight: bold;
			}

			.professional-title {
				color: hsl(14, 15%, 54%);
				font-weight: 300;
			}
		}

		@media (min-width: 800px) {
			height: var(--quadHomeThirdsHeight);
			overflow: hidden;
		}
	}

	.content {
		padding-top: 0;
		height: 100%;
		min-height: 50px;
	}

	.action-button {
		color: hsl(0, 0%, 100%);
		background: var(--directorySearchColor);
	}

	.action-button.js-active {
		background: var(--directorySearchColor);
		color: #fff;
	}

	.paging a:not(.disabled) {
		background-color: var(--directorySearchColor);
	}

	.col {
		width: 100%;
		display: none;

		@media (min-width: 550px) {
			float: left;
			/* to prevent weird animation things when page-naving */
			height: 100%;
		}
	}
	.col.js-viewed {
		opacity: 0.9;
	}

	.col:nth-of-type(1) {
		display: block;
	}

	.full-directory-link {
		text-align: left;
		padding-right: 0.8em;
		font-size: 0.9em;
		margin-top: 0.9em;
	}
}
#directorysearch-modal .directory-info-popup {
	/* warm white, like buff paper */
	background: hsl(37, 72%, 95%);
	color: hsl(0, 0%, 24%);
	max-width: 400px;
	height: auto;
	padding: 1em;
	box-sizing: border-box;
	text-align: left;
	font-weight: 300;

	& hr {
		border-top: 1px solid hsl(223, 14%, 90%);
	}

	.location {
		font-size: 0.9em;
	}

	.name {
		font-weight: bold;
		color: hsl(350, 78%, 15%);
	}

	.pronouns {
		margin-bottom: 1.1em;
		font-size: 0.9em;
		font-style: italic;
	}

	.phone2 {
		&:before {
			/* content: "\02022" ; opacity: .3; -- bullet */
			/* content: "\02027"; opacity: .6; -- square bullet */
			/* content: "\02059"; opacity: .3; -- 5 dot pattern */
			content: "\02014";
			opacity: 0.2;
			position: relative;
			top: -1px; /* mdash */
			padding: 0 0.6em 0 0.3em; /* I don't know why unequal spacing is required to make it look even */
		}
	}

	.department {
		font-weight: 400;
	}
	.department2 {
		padding-top: 1em;
	}
	.professional-title,
	.location {
		color: hsl(14, 15%, 34%);
	}
	.professional-title {
		font-style: italic;
	}

	a:hover {
		text-decoration: underline;
	}

	.profile-image {
		opacity: 0;
		transition: 0.4s opacity;
		float: right;
		border-radius: 95px;
		border: 1px solid hsla(0, 0%, 0%, 0.2);
		width: 95px;
		height: 95px;
		position: relative;
		/* half the padding of the directory-info-popup */
		top: -0.5em;
		/* for some reason, cover was leaving little uncovered gaps at the top & bottom */
		background-size: 103%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.profile-image-visible {
		opacity: 1;
	}
}

/**
 * Garnet Gateway <section>
 **/
section.garnetgateway-section a {
	color: var(--garnetGatewayColor);
}

section.garnetgateway-section h2 {
	--iconsize: 25px;
}



section.garnetgateway-section .module {
	padding: 1em;
	background-image: url("/wp-content/plugins/bates-today-quad/styles/images/seal.png");
	background-repeat: no-repeat;
	background-position: 10% 50%;
	background-size: 150%;
}
@media (min-width: 800px) {
	section.garnetgateway-section .module {
		height: var(--quadHomeThirdsHeight);
		overflow: hidden;
	}
}

section.garnetgateway-section .content {
	padding-top: 0;
	height: auto;
}

section.garnetgateway-section .content .gg-login-area {
	background: none;
	border-top: 0;
	padding: 0;
	margin: 0;
	font-size: inherit;
}

section.garnetgateway-section .content .gg-login-area input[type="text"],
section.garnetgateway-section .content .gg-login-area input[type="password"] {
	border-radius: 0;
	background: #fff;
}

section.garnetgateway-section .content .gg-login-area label {
	padding-top: 0;
}

section.garnetgateway-section .content .gg-login-area .password-wrap a {
	right: 13%;
	top: 0.5rem;
}

section.garnetgateway-section .content .gg-login-area .submit-wrap {
	padding: 0;

	/* overrideing flex */
	display: block;
}

section.garnetgateway-section .content .gg-login-area .submit-wrap a.help-link {
	background: hsl(0, 0%, 90%);
	float: left;
	width: 40%;
}
section.garnetgateway-section .content .gg-login-area .submit-wrap a.help-link + a.help-link {
	float: right;
}

section.garnetgateway-section input[type="submit"] {
	color: hsl(0, 0%, 100%);
	background: var(--garnetGatewayColor);
	border-radius: 3px !important;
}

section.garnetgateway-section input[type="submit"].js-active {
	background: var(--garnetGatewayColor);
	color: #fff;
}

/**
 * Useful Links <section>
 **/
section.usefullinks-section {
	font-size: 1.1em;

	& a {
		color: var(--usefulLinksColor);
	}

	& p {
		margin: 0.9em 0;
	}

	@media (min-width: 800px) {
		margin-top: 0;
	}

	& h2 {
		--iconsize: 24px;
	}
	.section-icon {
		transform: translateX(3px);
	}

	.module {
		padding: 0 1em;

		@media (min-width: 550px) {
			overflow: hidden;
		}
	}

	.content {
		padding-top: 0;
	}

	.action-button {
		color: var(--usefulLinksColor);
		margin-left: 1em;
	}
	.action-button {
		margin-left: 1em;
	}

	.action-button.js-active {
		background: var(--usefulLinksColor);
		color: #fff;
	}
}

/**
 * News <section>
 **/
section.news-section {
	/* hide on mobile */
	display: none;

	& a {
		color: var(--newsColor);
	}

	@media (min-width: 550px) {
		display: block;
	}

	.section-icon {
		visibility: hidden;
	}

	& h2 {
		color: transparent;

		@media (min-width: 550px) {
			background-color: transparent;
			color: transparent;
		}
	}

	.col {
		float: none;
	}

	.content {
		height: auto;
		padding-top: 0;
	}

	.slideshow-element {
		display: none;
	}

	.module {
		border: 0;
		background: transparent;

		& img {
			max-width: 100%;
		}

		@media (min-width: 800px) {
			height: var(--quadHomeThirdsHeight);
			overflow: hidden;

			& img {
				max-height: 280px;
			}
		}
	}

	.story-title {
		font-weight: bold;
	}

	.offsite-link {
		display: block;
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
		text-align: right;
		padding-right: 0.8em;
		margin-right: 0.3em;
		position: absolute;
		right: 0;
		bottom: 0;

		&:after {
			top: 0;
		}
	}
}

/* Lets give ourselves classes to easily control what shows at various breakpoints
 */
@media (min-width: 550px) {
	.hide-550-up {
		display: none !important;
	}
}
@media (max-width: 549px) {
	.show-550-up {
		display: none !important;
	}
}
@media (min-width: 800px) {
	.hide-800-up {
		display: none !important;
	}
}
@media (max-width: 799px) {
	.show-800-up {
		display: none !important;
	}
}
@media (min-width: 1024px) {
	.hide-1024-up {
		display: none !important;
	}
}
@media (max-width: 1023px) {
	.show-1024-up {
		display: none !important;
	}
}
@media (min-width: 1200px) {
	.hide-1200-up {
		display: none !important;
	}
}
@media (max-width: 1199px) {
	.show-1200-up {
		display: none !important;
	}
}