/* ======================================================================================================== */
/* MARK: Variables */
/* ======================================================================================================== */
:root {
	--su-text: #2e262a;
	--su-maroon: #8a0000;
	--su-gold: #ffc420;
	--su-light-tan: #f0eeea;
	--su-dark-tan: #e2ded7;
	--su-link-color: #256070;
	--su-box-shadow: 0 1.25rem 0 -0.625rem var(--su-dark-tan);
}

/* ======================================================================================================== */
/* MARK: SU Style Overrides */
/* ======================================================================================================== */
a:not(.cta-link, .accordion__title) .icon-chevron-right {
	display: none !important;
}

h3, .h3 {
	font-size: clamp(1.025rem, 2vw, 1.35rem);
	color: var(--su-text);
}

.callout:hover {
	background-color: transparent;
}

.callout:hover .callout__heading {
	color: var(--su-maroon);
}

.callout:hover p {
	color: var(--su-text);
}

.callout:hover .cta-link,
.callout:hover .cta-link svg {
	color: var(--su-link-color);
}

.accordions_section h3.acc_collapse {
	font-size: clamp(1.125rem, 2.25vw, 1.5rem);
	font-weight: 500;
	padding: 0px;
	margin: 0.5rem 0px 1rem 0.5rem;
}

.accordions_section .acc_collapse + div {
	margin-bottom: 1rem;
}

/* ======================================================================================================== */
/* MARK: Accessibility Styles */
/* ======================================================================================================== */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ======================================================================================================== */
/* MARK: Custom Description Lists */
/* ======================================================================================================== */
dl.libraryDescriptionList {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

dl.libraryDescriptionList dt,
dl.libraryDescriptionList dd {
  grid-column: 1 / -1;
}

dl.libraryDescriptionList dt {
	margin: 0;
	border-bottom: 1px solid var(--su-dark-tan);
}

dl.libraryDescriptionList dd {
	margin-bottom: 1em;
}

/* ======================================================================================================== */
/* MARK: Custom Subsite Navs */
/* ======================================================================================================== */
.librarySubsiteNav {
	list-style: none;
}

.librarySubsiteNav li {
	border-top: .0625rem solid var(--su-dark-tan);
}

.librarySubsiteNav a {
	display: inline-block;
	text-decoration: none;
	color: var(--su-text);
	padding: .75rem 0 .75rem 0;
}

.librarySubsiteNav a:not(.submenu__current):hover {
	color: var(--su-link-color);
	text-decoration: underline;
}

/* ======================================================================================================== */
/* MARK: Library Hours Today (Homepage) */
/* ======================================================================================================== */
.column:has(.pageIntro) {
	padding-bottom: 0;
}

.hoursToday {
	margin-top: 0.5rem;
}

.hoursToday svg.hoursIcon {
	width: 1.25rem;
	height: 1.25rem;
	position: relative;
	top: 3px;
}

.hoursTodayLabel {
	font-weight: 700;
}

.hoursTodayLabel:after {
	content: ": ";
}

.allHoursLink:before {
	content: "\0000a0\2022\0000a0";
}

#todaysLibraryHours.currentlyOpen:after {
	content: "Open Now";
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	padding: 2px 6px;
	margin-left: 6px;
	border-radius: 3px;
	background-color: #438136;
	color: #ffffff;
	box-shadow: 0 0 6px rgba(67, 129, 54, 0.35),
	            0 0 12px rgba(67, 129, 54, 0.15);
}

.justify-content-end {
	display: flex;
	justify-content: end;
}

a.supportLink {
	padding: 0;
}

@media (max-width: 40em) {
	#todaysLibraryHours {
		display: block;
	}

	.hoursTodayLabel:after {
		content: "";
	}

	.allHoursLink:before {
		content: "";
	}
}

@media (min-width: 48em) and (max-width: 64em) {
	.row .row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ======================================================================================================== */
/* MARK: Main Navigation Buttons (Homepage) */
/* ======================================================================================================== */
#libraryMainNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#libraryMainNav > ul > li {
	position: relative;
}

#libraryMainNav .libraryMenuBtn {
	width: 100%;
	background-color: #ffffff;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--su-maroon);
	border: 0.125rem solid var(--su-maroon);
	padding: 0 0.5em;
	height: 3.5rem;
	letter-spacing: inherit;
	text-align: center;
	text-transform: uppercase;
	transition: 0.3s background-color, color ease-in-out;
	position: relative;
}

#libraryMainNav .libraryMenuBtn:hover,
#libraryMainNav .libraryMenuBtn:focus {
	background-color: var(--su-maroon);
	color: #ffffff;
}

#libraryMainNav .libraryMenuBtn.expanded {
	background-color: var(--su-maroon);
	color: #ffffff;
	margin-bottom: 0;
}

#libraryMainNav ul ul.libraryNavSubmenu {
	max-height: 0;
	overflow: hidden;
	margin: 0 0.5rem 0 1rem;
	transition: 0.3s max-height ease-out;
	border-width: 0 0.125rem 0.125rem 0.125rem;
	border-style: solid;
	border-color: var(--su-maroon);
	text-align: center;
	visibility: hidden;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	background-color: #ffffff;
}

#libraryMainNav ul ul.libraryNavSubmenu::after {
	content: "";
	position: absolute;
	top: -10px;
	left: calc(50% - 5px);
	z-index: 51;
	width: 10px;
	height: 10px;
	display: block;
	background-color: var(--su-maroon);
	transform: rotate(45deg);
	opacity: 0;
	transition: 0.3s top, opacity ease-out;
}

#libraryMainNav ul ul.libraryNavSubmenu.expanded::after {
	top: -5px;
	opacity: 1;
}

#libraryMainNav ul ul.libraryNavSubmenu.expanded {
	max-height: calc(var(--expanded-height) + 12px);
	visibility: visible;
	box-shadow: 0 0.1875rem 0.375rem 0.3125rem rgba(0, 0, 0, 0.15);
}

#libraryMainNav ul ul.libraryNavSubmenu li:not(:last-child) {
	border-bottom: .0625rem solid var(--su-dark-tan);
}

#libraryMainNav ul ul.libraryNavSubmenu a {
	color: #2e262a;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3rem;
	text-decoration: none;
}

#libraryMainNav ul ul.libraryNavSubmenu a:hover,
#libraryMainNav ul ul.libraryNavSubmenu a:focus {
	background-color: var(--su-light-tan);
}

@media (min-width:64em) {
	#libraryMainNav ul ul.libraryNavSubmenu {
		margin: 0 1rem;
	}
}

@media (max-width:48em) {
	#libraryMainNav li:not(:first-child) .libraryMenuBtn {
		margin-top: 1rem;
	}

	#libraryMainNav ul ul.libraryNavSubmenu {
		margin: 0;
		position: inherit;
	}
}

/* ======================================================================================================== */
/* MARK: SURF Search Box (Homepage) */
/* ======================================================================================================== */
select {
	background-position: right !important;
	background-size: 12px !important;
}

#libraryDatabaseSearch {
	border: 0.125rem solid var(--su-dark-tan);
	padding: 1.875rem;
	box-shadow: 0 1.25rem 0 -.625rem var(--su-dark-tan);
	container-type: inline-size;
	container-name: libraryDatabaseSearch;
}

#libraryDatabaseSearch .surfLogo {
	display: inline-block;
	width: 150px;
	vertical-align: text-bottom;
	margin-right: 0.5rem;
}

#libraryDatabaseSearch .header {
	background-color: var(--su-maroon);
	margin: calc(-1.875rem - 2px) calc(-1.875rem - 2px) 1.5rem calc(-1.875rem - 2px);
	padding: 1rem 1.5rem .875rem 1.875rem;
	background-image: none;
	width: auto;
}

#libraryDatabaseSearch .header a {
	text-decoration: none;
	color: inherit;
}

#libraryDatabaseSearch .header a svg {
	display: none;
}

#libraryDatabaseSearch .header h2 {
	display: inline-block;
	margin: 0;
	color: #ffffff;
	font-size: 16px;
}

#libraryDatabaseSearch #librarySearchType {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--su-dark-tan);
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab {
	padding: 0.5em;
	margin: 0;
	cursor: pointer;
	position: relative;
	top: 1px;
	border: 1px solid var(--su-dark-tan);
	font-size: 15px;
	background-color: var(--su-light-tan);
	text-transform: none;
	color: inherit;
	height: auto;
	transition-delay: 0;
	transition-duration: 0.25s;
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="true"] {
	background-color: #ffffff;
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="false"]:hover {
	background-color: var(--su-dark-tan);
}

#libraryDatabaseSearch #librarySearchType button.librarySearchTab[aria-selected="true"] {
	background-color: #ffffff;
	border-bottom-color: #ffffff;
}

#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn {
	display: none;
}

#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn svg {
	width: 1.5em;
	height: 1.5em;
	margin: 0;
}

#libraryDatabaseSearch p.tagLine {
	font-size: 90%;
	font-style: italic;
	margin: 0.5em 0;
}

#libraryDatabaseSearch .librarySearchQuery {
	border: 0.0625rem solid var(--su-maroon);
	border-right-width: 0;
	border-bottom-width: 0.25rem;
	font-size: 1.875rem;
	padding: 0 0 0 1.25rem;
	height: 4.25rem;
}

#libraryDatabaseSearch .inputGroup {
	position: relative;
}

#libraryDatabaseSearch button[type="submit"] {
	height: 4.25rem;
	padding: 0;
	width: 4rem;
	position: absolute;
	top: 0;
	right: 0;
	border-width: 1px 1px .25rem 1px;
	background-color: var(--su-maroon);
	color: #ffffff;
}

#libraryDatabaseSearch button[type="submit"] svg {
	fill: #ffffff;
	transition-property: fill;
	transition-delay: 0.1s;
	transition-duration: 375ms;
	transition-timing-function: ease-in-out;
}

#libraryDatabaseSearch button[type="submit"]:hover {
	background-color: var(--su-gold);
	color: #333333;
}

#libraryDatabaseSearch button[type="submit"]:hover svg {
	fill: #333333;
}

#libraryDatabaseSearch legend {
	margin-bottom: 8px;
}

#libraryDatabaseSearch .hidden {
	display: none;
}

#libraryDatabaseSearch .supplementalLink {
	clear: both;
}

#libraryDatabaseSearch .supplementalLinks {
	display: flex;
}

#libraryDatabaseSearch .supplementalLink.right {
	margin-left: auto;
}

#libraryDatabaseSearch #whatAmISearching {
	margin-top: 1rem;
	padding: 0.5rem;
	border: 1px solid var(--su-dark-tan);
}

#libraryDatabaseSearch #whatAmISearching h3 {
	font-size: 18px;
}

#libraryDatabaseSearch #whatAmISearching p:last-child {
	margin-bottom: 0;
}

#libraryDatabaseSearch #whatAmISearching a svg {
	display: none !important;
}

@container libraryDatabaseSearch (max-width: 525px) {
	#libraryDatabaseSearch>div:not(.header) {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	#libraryDatabaseSearch>.header {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#libraryDatabaseSearch #librarySearchType {
		display: flex;
		border: none;
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn {
		display: inline-block;
		background-color: transparent;
		border: 1px solid var(--su-dark-tan);
		border-left-width: 0;
		color: var(--su-link-color);
		line-height: normal;
		height: auto;
		text-transform: none;
		font-size: 14px;
		padding: 0 1rem;
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn:hover {
		background-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType #mobileSearchTypeBtn:active {
		background-color: #c7c2bb;
	}

	#libraryDatabaseSearch #librarySearchType.mobileExpanded #mobileSearchTypeBtn {
		display: none;
	}

	#libraryDatabaseSearch #librarySearchType>div {
		padding: 0;
		flex-grow: 1;
		border: 1px solid var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab {
		top: 0;
		display: block;
		border: none;
		width: 100%;
		text-align: left;
		background-color: transparent;
		transition: none;
	}

	#libraryDatabaseSearch #librarySearchType.mobileExpanded button.librarySearchTab:hover {
		background-color: var(--su-light-tan);
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab:not(:last-child) {
		border-bottom-width: 0;
	}

	#libraryDatabaseSearch #librarySearchType button.librarySearchTab:last-child {
		border-bottom-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType:not(.mobileExpanded) button.librarySearchTab[aria-selected="true"] {
		border-bottom-width: 1px;
		border-bottom-color: var(--su-dark-tan);
	}

	#libraryDatabaseSearch #librarySearchType:not(.mobileExpanded) button.librarySearchTab[aria-selected="false"] {
		display: none;
	}

	#libraryDatabaseSearch .librarySearchQuery {
		width: calc(100% - 4rem);
		font-size: 18px;
	}

	#libraryDatabaseSearch .supplementalLinks {
		display: block;
	}
}

dialog {
	background-color: #ffffff;
	border-color: var(--su-text);
	padding: 1.5rem;
	max-width: 800px;
}

dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.65);
}

dialog .closeBtn {
	color: var(--su-text) !important;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background-color: transparent !important;
	border: none;
	padding: 0;
	font-size: 2rem;
	cursor: pointer;
	height: auto;
	line-height: 1rem;
}

dialog .closeBtn:hover, 
dialog .closeBtn:focus {
	color: var(--su-maroon);
}

dialog h1 {
	font-size: 1.5rem;
	border-bottom: 1px solid var(--su-dark-tan);
}

dialog h2 {
	font-size: 1.2rem;
}

/* ======================================================================================================== */
/* MARK: Library Quick Action Links (Homepage) */
/* ======================================================================================================== */
#libraryActionLinks {
	margin-top: 2rem;
}

#libraryActionLinks ul {
	list-style: none;
	padding: 0;
}

#libraryActionLinks li {
	text-align: center;
}

#libraryActionLinks svg {
	width: 60px;
	height: 60px;
	fill: var(--su-link-color);
}

#libraryActionLinks a.link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	padding: 0.25rem;
	color: var(--su-link-color);
	transition: 0.2s background-color ease-in-out;
}

#libraryActionLinks a.link:visited {
	color: var(--su-link-color);
}

#libraryActionLinks .link:hover {
	background-color: var(--su-link-color);
	color: #ffffff !important;
}

#libraryActionLinks .link:hover svg {
	fill: #ffffff;
}

#libraryActionLinks .link svg.icon-chevron-right {
	display: none;
}

.libraryh3lp iframe {
	width: 100% !important;
}

#showLibraryChatBtn {
	display: none;
}

@media (max-width: 48em) {
	.libraryh3lp {
		display: none;
	}

	.libraryh3lp.show {
		display: block;
	}

	#showLibraryChatBtn {
		display: block;
		width: 100%;
	}
}

/* ======================================================================================================== */
/* MARK: Library News Feed (Homepage) */
/* ======================================================================================================== */
#libraryNewsFeed {
	list-style: none;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

#libraryNewsFeed .libraryNewsItem {
	display: flex;
	border: 2px solid var(--su-dark-tan);
}

#libraryNewsFeed .libraryNewsItem:hover {
	border-color: var(--su-link-color);
	cursor: pointer;
}

#libraryNewsFeed .libraryNewsItem .libraryNewsImage {
	width: 150px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--su-light-tan);
	flex-shrink: 0;
}

#libraryNewsFeed .libraryNewsItemContent {
	width: 100%;
	padding: 0.5rem;
	min-height: 100px;
	max-height: 150px;
	overflow: hidden;
	position: relative;

	&.overflowing::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: linear-gradient(transparent, rgba(255, 255, 255, 0.9) 80%);
	}
}

#libraryNewsFeed .libraryNewsItemContent p {
	margin-bottom: 4px;
	line-height: 1.4em;
}

#libraryNewsFeed .libraryNewsItemContent p a {
	font-size: 1.1rem;
	text-decoration: none;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

#libraryNewsFeed .libraryNewsItemContent p a:hover {
	text-decoration: underline;
}

#libraryNewsFeed .libraryNewsItemContent p.date {
	font-weight: 500;
	font-size: 0.85rem;
}

#libraryNewsFeed .libraryNewsItemContent p.date svg {
	width: 1.25em;
	position: relative;
	top: 4px;
}

#libraryNewsFeed .libraryNewsItemContent p.description {
	color: #63545e;
	font-size: 0.8rem;
}

#libraryNewsMoreLink {
	margin-top: 1rem;
}

@media (max-width: 64em) {
	#libraryNewsFeed {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 36em) {
	#libraryNewsFeed .libraryNewsItem {
		display: block;
	}

	#libraryNewsFeed .libraryNewsItemContent {
		border-top-width: 0;
		border-left-width: 2px;
	}

	#libraryNewsFeed .libraryNewsItem .libraryNewsImage {
		width: 100%;
		height: 200px;
	}
}

/* ======================================================================================================== */
/* MARK: Library Events Feed (Homepage) */
/* ======================================================================================================== */
#upcomingLibraryEvents {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
	margin: 0 0 1rem 0;
	list-style: none;
}

#upcomingLibraryEvents .libraryEvent {
	display: flex;
	gap: 1rem;
	border: 0.125rem solid var(--su-light-tan);
	background-color: rgba(240, 238, 234, 0.5);
	padding: 0.5rem;
	overflow: hidden;
}

#upcomingLibraryEvents .libraryEvent .date {
	text-align: center;
	border: 0.125rem solid var(--su-gold);
	padding: 0.25rem;
	width: 72px;
	background-color: #ffffff;
}

#upcomingLibraryEvents .libraryEvent .date>span {
	display: block;
	line-height: 1.1em;
}

#upcomingLibraryEvents .libraryEvent .date .month {
	text-transform: uppercase;
	font-weight: 600;
}

#upcomingLibraryEvents .libraryEvent .date .day {
	font-size: 28px;
	color: var(--su-maroon);
}

#upcomingLibraryEvents .libraryEvent .date .dow {
	text-transform: uppercase;
	font-size: 13px;
}

#upcomingLibraryEvents .libraryEvent .type {
	display: inline-block;
	padding: 0 0.5em;
	background-color: var(--su-dark-tan);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
}

#upcomingLibraryEvents .libraryEvent h3 {
	font-size: 18px;
	margin-bottom: 0;
}

#upcomingLibraryEvents .libraryEvent h3 a {
	text-decoration: none;
}

#upcomingLibraryEvents .libraryEvent h3 a:hover {
	text-decoration: underline;
}

#upcomingLibraryEvents .libraryEvent>div {
	font-size: 14px;
	line-height: 1.5em;
}

#upcomingLibraryEvents .libraryEvent .time {
	font-weight: 600;
}

@media (max-width: 64em) {
	#upcomingLibraryEvents {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 40em) {
	#upcomingLibraryEvents {
		display: inline-flex;
		overflow-x: scroll;
		max-width: 100%;
	}

	#upcomingLibraryEvents .libraryEvent {
		width: 75vw;
		flex-shrink: 0;
	}
}

/* ======================================================================================================== */
/* MARK: Locations (Homepage) */
/* ======================================================================================================== */
#libraryLocations {
	margin-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
}

#libraryLocations .column {
	display: flex;
}

#libraryLocations .location {
	background-color: var(--su-light-tan);
	box-shadow: 0 1.25rem 0 -.625rem var(--su-dark-tan);
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

#libraryLocations .location img {
	width: 100%;
}

#libraryLocations .location .locationContent {
	display: flex;
	flex-direction: column;
	padding: 0.75rem 0.75rem 1rem 0.75rem;
	flex: 1;
}

#libraryLocations .location h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--su-text);
	line-height: 1.25em;
}

#libraryLocations .location .locationContent p:not(:last-child) {
	flex: 1;
	font-size: 15px;
	line-height: 1.25em;
}

#libraryLocations .location p:last-child {
	margin-top: auto;
	margin-bottom: 0;
	flex-shrink: 0;
	line-height: 1.25em;
}

/* ======================================================================================================== */
/* MARK: Featured Links Boxes */
/* ======================================================================================================== */
.libraryFeaturedLinksContainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
}

.libraryFeaturedLink {
	border: 0.125rem solid var(--su-dark-tan);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	flex: 1 1 238px;
	min-width: 238px;
	max-width: 100%;
}

.libraryFeaturedLink h2 {
	line-height: 1.25em;
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 0.25rem;
}

.libraryFeaturedLink p {
	margin-bottom: 0.5rem;
}

.libraryFeaturedLink a.cta-link {
	margin-top: auto;
	height: auto;
}

/* ======================================================================================================== */
/* MARK: Library Hours Page */
/* ======================================================================================================== */
.libraryHoursLocation {
	margin-bottom: 3rem;
}

.libraryHoursLocation h2 {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
}

.accordion .accordion__title.currentlyOpen::after,
.accordion .accordion__title.currentlyClosed::after,
.libraryHoursLocation h2:after {
     display: none;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 14px;
     padding: 2px 6px;
     border-radius: 3px;
}

.accordion .accordion__title.currentlyOpen::after,
.accordion .accordion__title.currentlyClosed::after {
     position: absolute;
     right: 60px;
}

.accordion .accordion__title.currentlyOpen::after, 
.libraryHoursLocation h2.currentlyOpen:after {
	display: inline-block;
	content: "Open Now";
	background-color: #438136;
	color: #ffffff;
	box-shadow: 0 0 6px rgba(67, 129, 54, 0.35),
	            0 0 12px rgba(67, 129, 54, 0.15);
}

 .accordion .accordion__title.currentlyClosed::after,
.libraryHoursLocation h2.currentlyClosed:after {
	display: inline-block;
	content: "Closed Now";
	background-color: #6a6a6a;
	color: #ffffff
}

.libraryHoursWeek {
	margin-bottom: 1.5rem;
	font-size: 14px;
	max-width: 100%;
}

.libraryHoursWeek figcaption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.libraryHoursWeek dl.libraryHours {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.libraryHoursWeek dl.libraryHours dt {
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 0;
	background-color: var(--su-maroon);
	color: #ffffff;
	padding: 8px 2px 6px 2px;
}

.libraryHoursWeek dl.libraryHours dt.today {
	background-color: var(--su-gold);
	color: var(--su-text);
}

.libraryHoursWeek dl.libraryHours dt .dow {
	display: inline-block;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 1.2em;
}

.libraryHoursWeek dl.libraryHours dd {
	grid-row: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-color: var(--su-dark-tan);
	border-style: solid;
	border-width: 0 0 1px 1px;
	padding: 6px;
}

.libraryHoursWeek dl.libraryHours dd:last-child {
	border-width: 0 1px 1px 1px;
}

.libraryHoursWeek dl.libraryHours dd.saturday,
.libraryHoursWeek dl.libraryHours dd.sunday {
	background-color: var(--su-light-tan);
}

.libraryHoursWeek dl.libraryHours dd.closed {
	font-weight: bold;
}

.libraryHoursWeek dl.libraryHours dd .note {
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	margin-top: 4px;
}

.libraryHoursWeek .libraryHoursNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 4px;
	background-color: var(--su-maroon);
	color: #ffffff;
}

.libraryHoursWeek .libraryHoursNav .title {
	font-weight: 700;
	font-size: 16px;
	text-align: center;
}

.libraryHoursWeek .libraryHoursNav button {
	height: auto !important;
	background-color: var(--su-maroon);
	padding: 0.5rem;
	transition: none;
}

.libraryHoursWeek .libraryHoursNav button svg {
	fill: #ffffff;
	margin: 0;
}

.libraryHoursWeek .libraryHoursNav button:hover {
	background-color: var(--su-gold);
}

.libraryHoursWeek .libraryHoursNav button:hover svg {
	fill: var(--su-text);
}

.libraryHoursWeek .libraryHoursNav button:disabled,
.libraryHoursWeek .libraryHoursNav button:disabled:hover {
	background-color: var(--su-maroon);
}

.libraryHoursWeek .libraryHoursNav button:disabled svg {
	visibility: hidden;
	cursor: auto;
}

@media screen and (max-width: 520px) {
	.libraryHoursWeek .libraryHoursNav {
		padding-bottom: 0;
	}

	.libraryHoursWeek .libraryHoursNav button {
		padding: 1rem;
	}

	.libraryHoursWeek dl.libraryHours {
		grid-template-columns: 1fr 2fr;
	}

	.libraryHoursWeek dl.libraryHours dt {
		grid-row: auto;
	}

	.libraryHoursWeek dl.libraryHours dd {
		grid-row: auto;
	}
}

/* ======================================================================================================== */
/* MARK: Library Alerts */
/* ======================================================================================================== */

.libraryAlertContainer {
	background-color: var(--su-gold);
	padding: 1rem 1rem 1rem 3rem;
	margin-bottom: 1rem;
	position: relative;
}

.libraryAlertContainer:empty {
	display: none;
}

.libraryAlertContainer::before {
	content: "";
	background-image: url(/_demo/libraries/_files/css/"data:image/svg+xml,%3Csvg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Pro 7.2.0 by @fontawesome - https:/fontawesome.com License - https:/fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--%3E%3Cpath d='M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM280 400L304 400L304 336L256 336L256 288L352 288L352 400L384 400L384 448L256 448L256 400L280 400zM352 256L288 256L288 192L352 192L352 256z'/%3E%3C/svg%3E");
	position: absolute;
	left: 1rem;
	width: 1.5rem;
	height: 1.5rem;
}

.libraryAlertContainer p:last-child {
	margin-bottom: 0;
}