
#education-library {
	display: grid;
	grid-template-columns: 300px 1fr;
	/* Replace "300px" with your desired fixed width */
	grid-gap: 20px 40px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Item 1 will span both columns in the first row */
#education-library .tt-heading-area {
	grid-column: 2;
	grid-row: 1;
}

/* Item 2 will be placed in the first column of the second row */
#education-library .tt-filter-column {
	grid-column: 1;
	/* Places in the first column */
	grid-row: 2;
}

/* Item 3 will be placed in the second column of the second row */
#education-library .tt-content-column {
	grid-column: 2;
	/* Places in the second column */
	grid-row: 2;
}

#education-library .resource-list {
	list-style: none;
	padding: 0;
}

#education-library .tt-content-archive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Two columns */
	gap: 20px;
	/* Adjust space between posts */
	margin-top: 20px;
}

#education-library button.clear-btn {
	background-color: transparent;
	border: none;
	color: #516a80;
	padding: 4px;
	/* Adjust padding to match visual */
	cursor: pointer;
	margin-bottom: 10px;
	/* Adjust margin as per layout */
	transition-duration: .3s;
	/* Body Styles/Large/Link */
	font-family: "Open Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	/* 150% */
	text-decoration-line: underline;
}

#education-library button.clear-btn:hover {
	color: black;
}

#education-library .search-box {
	width: 100%;
	padding: 20px 20px 20px 38px;
	border: 1px solid #acb9c8;
	outline: none;
	overflow: visible;
	border-radius: 5px;
	font-family: "Open Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

#education-library .search-box::placeholder {
	color: #042238;
	opacity: .7;
}

#education-library .search-container {
	margin: 0;
	padding: 0;
	width: 100%;
}

#education-library .search-header {
	margin-bottom: 10px;
	color: #516a80;
	/* Body Styles/Medium/SemiBold */
	font-family: "Open Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 21px;
}

#education-library .search-wrapper {
	width: 100%;
	padding: 0px;
	margin-bottom: 10px;
	position: relative;
	border-radius: 5px;
	border: none;
	background: #fff;
	background-color: #fff;
	overflow: visible;
}

#education-library .results-count {
	font-size: 14px;
	color: #666;
}

#education-library .search-wrapper::after {
	content: "";
	position: absolute;
	left: 10px;
	/* Adjust to align the icon inside the input */
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 30px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' width='28' height='28'%3E%3Cpath d='M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	pointer-events: none;
}

#education-library .results-count {
	font-size: 14px;
	color: #666;
}

#education-library .resource-list {
	list-style-type: none;
	/* Remove default list styling */
	padding: 0;
}

#education-library .resource-list li {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#education-library .resource-list label {
	margin-left: 8px;
	/* Space between checkbox and label */
	font-size: 16px;
	/* Size of the label text */
	color: #333;
}

/* Custom checkbox styling */
#education-library .resource-list input[type="checkbox"] {
	width: 16px;
	/* Width of the checkbox */
	height: 16px;
	/* Height of the checkbox */
	cursor: pointer;
	/* Cursor to pointer */
	-webkit-appearance: none;
	/* Remove default appearance */
	-moz-appearance: none;
	/* Remove default appearance */
	appearance: none;
	/* Remove default appearance */
	border: 2px solid #000;
	/* Border of the checkbox */
	border-radius: 4px;
	/* Slight rounding of corners */
	position: relative;
	/* Needed for pseudo-element positioning */
	top: 0px;
	padding: 0px;
}

/* Checkbox checked state */
#education-library .resource-list input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 11px;
	border: solid #000;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* The heading for the list */
#education-library .select-heading {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	margin-bottom: 16px;
	/* Space between heading and list */
	margin-top: 16px;
	font-family: "Poppins";
}

#education-library .filter_tags-wrapper {
	display: flex;
	flex-wrap: wrap;
	min-height: 30px;
	height: 30px;
}

#education-library .filters5_tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	margin-right: 5px;
	background-color: #fff;
	/* light grey background */
	color: #4f6474;
	/* dark text color */
	border-radius: 5px;
	opacity: 1;
	transition: opacity .3s ease;
	display: flex;
	align-items: center;
	align-self: stretch;
	border: 1px solid #e0e4e9;
}

#education-library .filters5_tag:hover {
	opacity: .9;
}

#education-library .filters5_tag [fs-cmsfilter-element="tag-text"] {
	margin-right: 10px;
	text-transform: capitalize;
}

#education-library .filters1_close-icon {
	cursor: pointer;
	display: flex;
	fill: #042238;
	border: 1px solid #042238;
	border-radius: 100%;
}

#education-library .filters1_close-icon path {}

#education-library .filters1_close-icon svg {
	width: 14px;
	/* Adjust if necessary */
	height: 14px;
	/* Adjust if necessary */
	fill: #666;
}

/* Add this for transition effects when adding/removing tags */
#education-library .filters5_tag-add-remove-animation {
	animation: fadeInOut .3s both;
}

@keyframes fadeInOut {
	0% {
		opacity: 0;
		transform: scale(.9);
	}
}

#education-library .tt-heading-area h2 {
	margin: 0 0 12px 0;
}

#education-library .tt-heading-area {
	min-height: 60px;
}

#education-library .filters1_tags-wrapper .search-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	margin-right: 8px;
	margin-bottom: 8px;
	background-color: #ffecb3;
	/* Light yellow background for search tag */
	color: #333;
	/* Dark text color */
	border-radius: 20px;
	opacity: 1;
	text-transform: capitalize;
}

#education-library .filters1_tags-wrapper .search-tag * {
	text-transform: capitalize;
}

#education-library .filters1_tags-wrapper .search-tag .filters1_close-icon svg {
	width: 14px;
	height: 14px;
	fill: #666;
}

#education-library .filters1_tags-wrapper .search-tag .filters1_close-icon:hover svg {
	fill: #333;
}

#education-library #tt-load-more {
	border: none;
	overflow: hidden;
	width: 150px;
	/* Common button styles */
	margin: 100px auto;
	display: block;
	padding: 12px 24px;
	border: 2px solid;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
	-webkit-backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	color: #022c52;
	border-color: #022c52;
	transition-duration: .4s;
}

#education-library #tt-load-more:focus {
	outline: none;
}

#education-library #tt-load-more > span {
	vertical-align: middle;
}

#education-library #tt-load-more:hover {
	background: #022c52;
	color: #fff;
}

#education-library .resource-list {
	list-style: none;
	padding: 0;
	display: flex;
	/* Display list items inline */
	flex-wrap: wrap;
	/* Allow wrapping for smaller screens */
	gap: 1rem;
	/* Add some space between items */
	flex-direction: column;
}

/* Responsive layout for screens at or below 1200px wide */
@media (max-width: 1200px) {
	#education-library .tt-content-archive-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* Two columns */
		gap: 20px;
		/* Adjust space between posts */
		margin-top: 20px;
	}
	
	#education-library .tt-content-archive-grid article.article h3, #education-library .tt-content-archive-grid article.article h3 a {
		font-size: 20px;
	}
	
	#education-library .tt-content-archive-grid article.article {
		width: 100%;
	}
	
	#education-library {
		display: flex;
		flex-direction: column;
		padding: 24px;
	}
	
	#education-library .search-container {
		display: flex;
		flex-direction: row;
		gap: 0px 50px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#education-library .clear-btn-container {
		width: 100%;
	}
	
	#education-library .search_input_results {
		width: 360px;
		flex: 0 0 360px;
	}
	
	#education-library .filters-checkboxes {
		flex: 1;
		/* take the remaining space */
		margin-top: -42px;
	}
	
	/* Optional adjustments to your other elements, if needed */
	#education-library .search-wrapper {}
	
	#education-library .search-container .resource-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0px;
	}
	
	#education-library .resource-list li {
		flex: 1 1 auto;
	}
	
	#education-library .resource-list {
		justify-content: flex-start;
		align-items: flex-start;
		grow: 0;
	}
	
	#education-library .resource-list li {
		display: flex;
		/* Ensures the checkbox and label align correctly */
		width: 24%;
	}
	
	#education-library .tt-heading-area {
		min-height: 50px;
	}
	
	#education-library .search-header {
		margin-top: -12px;
		margin-bottom: 0;
	}
	
	#education-library input[type="checkbox"] {
		top: 0;
	}
}

/* Responsive layout for screens at or below 1200px wide */
@media (max-width: 1000px) {
	#education-library .tt-content-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	#education-library .resource-list li {
		width: 32%;
		max-width: 32%;
	}
	
	#education-library .search_input_results {
		width: 260px;
		flex: 0 0 260px;
	}
	
	#education-library .search_input_results {
		width: 100%;
	}
}

/* Responsive layout for screens at or below 1200px wide */
@media (max-width: 880px) {
	#education-library .resource-list li {
		width: 32%;
		max-width: 32%;
	}
	
	#education-library .search_input_results {
		width: 100%;
	}
	
	#education-library .filters-checkboxes {
		width: 100%;
		margin-top: 0;
	}
	
	#education-library .search-container {
		flex-direction: column;
		gap: 0px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#education-library .clear-btn-container {
		width: 100%;
	}
	
	#education-library .search_input_results {
		width: 100%;
		flex: 1;
		margin: 20px auto;
	}
}

/* Responsive adjustments */
@media (max-width: 640px) {
	#education-library .tt-content-archive-grid {
		display: flex;
		flex-direction: column;
	}
	
	#education-library .resource-list li {
		width: 49%;
		max-width: 49%;
	}
	
	#education-library .tt-content-archive-grid article {
		margin: auto;
	}
}

.staff-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.staff-pick .post-type-badge.badge {
	position: relative;
	top: 0;
	left: 0;
	font-size: 16px;
	display: inline-block;
	max-width: 120px;
	margin-bottom: 16px;
}

.staff-picks-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
	justify-content: flex-start;
	list-style: none;
	padding: 0;
	width: 100%;
	font-size: 18px;
	color: #000;
}

.staff-picks-list li {
	text-align: left;
	margin: 0px;
}

.staff-picks-list li a {
	text-decoration: underline;
	color: inherit;
	/* Inherits black color from li */
	transition: color .3s;
	font-size: 20px;
	font-weight: 600;
}

.staff-picks-list li a:hover {
	color: #666;
}

@media (max-width: 780px) {
	.staff-picks-list {
		display: flex;
		flex-direction: column;
	}
}
