/*webflow-pages.css*/

/* Size variants from variables */
@media (max-width: 991px) {
	:root {
		--typography-semantic-tokens--h1: var(--typography--font-size--font-size-3xl);
		--typography-semantic-tokens--h2: var(--typography--font-size--font-size-2xl);
	}
}
@media (max-width: 767px) {
	:root {
		--typography-semantic-tokens--h1: var(--typography--font-size--font-size-2xl);
		--typography-semantic-tokens--h2: var(--typography--font-size--font-size-xl);
		--typography-semantic-tokens--h3: var(--typography--font-size--font-size-lg);
		--typography-semantic-tokens--h4: var(--typography--font-size--font-size-default);
	}
}

.wf-page-main-content {
	position: relative;
	overflow-x: clip;
}

.wf-rfp-section {
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	align-items: stretch;
	grid-template-columns: minmax(0, 1fr);
	padding-bottom: var(--padding--padding-3xl);
	margin-bottom: var(--padding--padding-2xl);
	padding-left: var(--padding--padding-lg);
	padding-right: var(--padding--padding-lg);
	max-width: var(--breakpoints--screen-width-md);
	gap: var(--padding--padding-lg);
	/* --breakpoints--screen-width-lg = 1440 */
	@media (min-width: 1440px) {
		padding-left: var(--padding--none);
		padding-right: var(--padding--none);
	}
	/* --breakpoints--screen-width-default = 1024 */
	@media (min-width: 1024px) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		.rfp-categories {
			grid-column: span 2 / span 2;
		}
	}

	.rfp-categories {
		display: flex;
		flex-direction: column;
		align-self: flex-start;
		height: 100%;
		gap: var(--padding--padding-default);
		padding: var(--padding--padding-lg);
		border-radius: var(--borders--border-radius-lg);
		border-width: var(--borders--border-width-default);
		background-color: var(--_colors---colors-semantic-tokens--background-primary);
		border-color: var(--_colors---forms--form-well-border);
		/* --breakpoints--screen-width-xs = 768 */
		@media (min-width: 768px) {
			padding: var(--padding--padding-2xl);
		}

		.rfp-catergories-options {
			gap: var(--padding--padding-default);
			padding-left: var(--padding--padding-default);
			padding-right: var(--padding--padding-default);
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;

			/* --breakpoints--screen-width-default = 1024 */
			@media (min-width: 1024px) {
				justify-content: center;
				padding-left: 0px;
				padding-right: 0px;
			}

			button {
				display: flex;
				align-items: center;
				gap: var(--padding--padding-xs);
				background: none;
				border: none;
				padding: 0;
				color: inherit;
				cursor: pointer;
				font-weight: var(--typography--font-weight--font-weight-regular);
				font-size: var(--typography--font-size--font-size-sm);
				line-height: var(--typography--line-height--line-height-xl);
			}
		}
	}
}

.rfp-questions {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	grid-column: span 1 / span 1;
	align-self: stretch;
	width:100%;
	height:100%;
	max-height: 520px; /* RFP form is anchored around this */
	position: relative; /* can we change this */
	padding: var(--padding--padding-lg);
	padding-top: var(--padding--padding-2xl);
	background-color: var(--_colors---colors-semantic-tokens--background-primary);
	border-radius: var(--borders--border-radius-lg);
	border-width: var(--borders--border-width-default);
	border-color: var(--_colors---forms--form-well-border);
	/* --breakpoints--screen-width-xs = 768 */
	@media (min-width: 768px) {
		padding: var(--padding--padding-xl);
	}
	/* --breakpoints--screen-width-default = 1024 */
	@media (min-width: 1024px) {
		grid-column: span 4 / span 4;
	}

	.rfp-placeholder {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;

		h3 {
			text-align: center;
			margin-top: var(--padding--padding-md);
			margin-bottom: var(--padding--padding-default);
			color: var(--_colors---colors-semantic-tokens--text-secondary);
			font-weight: var(--typography--font-weight--font-weight-bold);
			line-height: var(--typography--line-height--line-height-xl);
		}
	}

	.rfp-category-chips {
		display: flex;
		position: relative;
		z-index: 10;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--padding--padding-xs); /* was 10px */
		margin-bottom: var(--padding--padding-default);
	}

	.rfp-category-block {
		display: flex;
		flex-direction: column;
		position: relative;
		height: auto;
		width: 100%;

		h4 {
			width: 100%;
			padding-top: 0px;
			margin: 0px;
			text-transform: capitalize;
			color: var(--_colors---colors-semantic-tokens--text-secondary);
			font-weight: var(--typography--font-weight--font-weight-bold);
			line-height: var(--typography--line-height--line-height-xl);
			padding-bottom: var(--padding--padding-xs); /* was 10px */
		}

		h5 {
			display: flex;
			width: 100%;
			margin: 0px;
			color: var(--_colors---colors-semantic-tokens--text-secondary);
			font-weight: var(--typography--font-weight--font-weight-regular);
			line-height: var(--typography--line-height--line-height-xl);
			padding-bottom: var(--padding--padding-xs); /* was 10px */
		}

		.rfp-question {
			display: flex;
			align-items: flex-start;
			width: 100%;
			gap: var(--padding--padding-default); /* was 12px */
			padding-top: var(--padding--padding-xs); /* was 10px */
			padding-bottom: var(--padding--padding-xs); /* was 10px */
			border-top-width: var(--borders--border-width-default);
			border-top-style: solid;
			border-color: var(--_colors---forms--form-well-border);

			i {
				display: block;
				flex-shrink: 0;
			}

			p {
				margin: 0px;
				color: var(--_colors---colors-semantic-tokens--text-secondary);
				font-weight: var(--typography--font-weight--font-weight-regular);
				font-size: var(--typography--font-size--font-size-default);
				line-height: var(--typography--line-height--line-height-xl);
			}
		}

		.rfp-teaser {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			z-index: 10;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			gap: var(--padding--padding-default);
			padding-top: var(--padding--padding-3xl);
			padding-bottom: var(--padding--padding-md);
			height: 275px; /* fixed value based on form size */
			transform: translate(0px, var(--padding--padding-2xl));

			/* Background gradient */
			/* var(--_colors---colors-semantic-tokens--background-primary) */
			background-image: linear-gradient(
				to bottom,
				rgba(255,255,255,0),
				rgba(255,255,255,0.75) 50%,
				rgba(255,255,255,1) 100%
			);

			/* --breakpoints--screen-width-xs = 768 */
			@media (min-width: 768px) {
				padding-bottom: var(--padding--padding-xl);
			}


			h3 {
				text-align: center;
				color: var(--_colors---colors-semantic-tokens--text-secondary);
				font-family: var(--typography--font-family--font-family-headers);
				font-weight: var(--typography--font-weight--font-weight-bold);
				line-height: var(--typography--line-height--line-height-xl);
			}
		}
	}
}

.rfp-download-cta {
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	-moz-column-span: all;
	column-span: all;
	justify-content: center;
	align-items: center;
	gap: var(--padding--padding-default);

	.cta-button .cta-button-longtext {
		display: none;
		/* --breakpoints--screen-width-xs = 768 */
		@media (min-width: 768px) {
			display: block;
		}
	}
	.cta-button .cta-button-shorttext{
		display: block;
		/* --breakpoints--screen-width-xs = 768 */
		@media (min-width: 768px) {
			display: none;
		}
	}

	.cta-subhead {
		font-weight: var(--typography--font-weight--font-weight-regular);
		font-size: var(--typography--font-size--font-size-default);
		line-height: var(--typography--line-height--line-height-xl);
		color: var(--_colors---colors-semantic-tokens--text-primary);
	}
}

.wf-checkbox-bubble {
	transition-duration: 300ms;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: var(--padding--padding-xs); /* changed 12px to 8px */
	padding-inline: var(--padding--padding-default);
	gap: var(--padding--padding-xxs);
	border-radius: var(--borders--border-radius-xl);
	border-width: var(--borders--border-width-bold);
	border-style: solid;
	border-color: var(--_colors---colors-core--neutral--neutral-400);
	color: var(--_colors---colors-semantic-tokens--text-primary);
	margin: 0px;
	&.checked {
		background-color: var(--_colors---colors-core--neutral--neutral-400);
		color: var(--_colors---colors-semantic-tokens--button-text);
	}
	&.justify-start {
		justify-content: flex-start;
	}

	i {
		height: var(--icons--icon-height-default);
		width: var(--icons--icon-height-default);
		justify-content: center;
		align-items: center;
		display: flex;
	}

	p {
		font-weight: var(--typography--font-weight--font-weight-regular);
		font-size: var(--typography--font-size--font-size-sm);
		line-height: var(--typography--line-height--line-height-xl);
		margin: 0px;
		min-width: -moz-max-content;
		min-width: max-content;
	}
}

.wf-button {
	background-color: var(--_colors---colors-semantic-tokens--button);
	padding-top: var(--padding--padding-default);
	padding-bottom: var(--padding--padding-default);
	padding-left: var(--padding--padding-2xl);
	padding-right: var(--padding--padding-2xl);
	font-weight: var(--typography--font-weight--font-weight-semibold);
	color: var(--_colors---colors-semantic-tokens--button-text);
	font-size: var(--typography--font-size--font-size-default);
	line-height: var(--typography--line-height--line-height-xl);
	border-radius: var(--borders--border-radius-xl);
	margin-bottom: 0px;

	&:hover {
		background-color: var(--_colors---colors-semantic-tokens--button-hover);
	}
	&:active {
		background-color: var(--_colors---colors-semantic-tokens--button-pressed);
	}
	&:disabled {
		background-color: var(--_colors---colors-core--neutral--neutral-400);
		cursor: not-allowed;
	}

	/* --breakpoints--screen-width-xs = 768 */
	@media (min-width: 768px) {
		font-size: var(--typography--font-size--font-size-lg);
	}
}

.wf-chip {
	display: flex;
	align-items: center;
	color: var(--_colors---colors-semantic-tokens--text-secondary);
	font-size: var(--typography--font-size--font-size-xs);
	line-height: var(--typography--line-height--line-height-xl);
	padding-top: var(--padding--padding-xxs); /* was 6px */
	padding-bottom: var(--padding--padding-xxs); /* was 6px */
	padding-left: var(--padding--padding-default); /* was 12px */
	padding-right: var(--padding--padding-default); /* was 12px */
	border-radius: var(--borders--border-radius-xl);
	border-width: var(--borders--border-width-default);
	border-color: var(--_colors---forms--form-well-border);
	gap: var(--padding--padding-xs);
}

.course-catalog-layout {
	display: flex;
	flex-direction: column;
	gap: var(--padding--padding-md);
	max-width: 100%;
	width: var(--breakpoints--screen-width-md);
	padding-left: var(--padding--padding-lg);
	padding-right: var(--padding--padding-lg);
	margin: var(--padding--padding-2xl) auto 0px auto;
	@media (min-width: 1024px) {
		flex-direction: row;
		padding-left: 0px;
		padding-right: 0px;
	}
}

.course-catalog-clear-filters-button {
	padding-top: var(--padding--padding-xs);
	padding-bottom: var(--padding--padding-xs);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 9999px;
	border: var(--borders--border-width-bold) solid var(--_colors---colors-support--gray--gray-100);
	background-color: transparent;


	> p {
		color: var(--_colors---colors-semantic-tokens--text-primary);
		margin-bottom: 0px;
		text-transform: capitalize;
		font-weight: var(--typography--font-weight--font-weight-bold);
		font-size: var(--typography--font-size--font-size-default);
		line-height: var(--typography--line-height--line-height-2xl);

	}
}

.course-catalog-filters {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--padding--padding-default);
	width: 100%;
	padding: var(--padding--padding-lg);
	background-color: white;
	border-radius: var(--borders--border-radius-lg);
	@media (min-width: 1024px) {
		gap: var(--padding--padding-2xl);
		width: 33.3333%;
	}
}

.course-catalog-categories-set {
	display: none;
	@media (min-width: 1024px) {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: var(--padding--padding-xs);
		width: 100%;
	}
}

.course-catalog-category {

	&>input {
		opacity: 0;
		position: absolute;
		z-index: 1;
		height: 0px;
		width: 0px;
	}

	&>label {
		display: flex;
		align-items: center;
		padding: var(--padding--padding-xs) var(--padding--padding-default);
		margin-bottom: 0px;
		border: var(--borders--border-width-default) solid var(--_colors---colors-semantic-tokens--text-secondary);
		border-radius: 9999px;
		background-color: var(--_colors---colors-semantic-tokens--background-primary);
		color: var(--_colors---colors-semantic-tokens--text-secondary);
		font-weight: var(--typography--font-weight--font-weight-regular);
		font-size: var(--typography--font-size--font-size-sm);
		line-height: var(--typography--line-height--line-height-2xl);
		cursor: pointer;

		&>p {
			color: inherit;
			margin: 0px;
		}
	}

	&.checked {
		&>label {
			background-color: var(--_colors---colors-semantic-tokens--text-secondary);
			color: var(--_colors---colors-semantic-tokens--background-primary);
		}
	}
}

.course-catalog-sort {
	/*hidden lg:flex lg:flex-col w-full font-normal*/
	display: none;
	@media (min-width: 1024px) {
		display: flex;
		flex-direction: column;
		width: 100%;
		font-weight: var(--typography--font-weight--font-weight-regular);
	}
}

.course-catalog-cards {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--padding--padding-md);
	@media (min-width: 1024px) {
		width:66.6666666%;
	}
}

.course-card-error {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	font-size: var(--typography--font-size--font-size-xl);
	line-height: var(--typography--line-height--line-height-xl);
	color: var(--_colors---colors-semantic-tokens--text-secondary);
	background-color: var(--_colors---colors-semantic-tokens--background-primary);
	border-radius: var(--borders--border-radius-lg);
	font-weight: var(--typography--font-weight--font-weight-bold);
}

.course-card-paginator {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: var(--padding--padding-default);
	margin-top: var(--padding--padding-lg);
	margin-left: auto;
	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: flex-end;
	}

	&>.page-count {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		font-size: var(--typography--font-size--font-size-lg);
		font-weight: var(--typography--font-weight--font-weight-bold);
		color: var(--_colors---colors-semantic-tokens--text-secondary);
	}

	&>.page-button {
		padding: var(--padding--padding-xs) var(--padding--padding-lg);
		border-radius: 9999px;
		border: var(--borders--border-width-bold) solid var(--_colors---colors-semantic-tokens--text-secondary);
		z-index: 10;
		width: -moz-max-content;
		width: max-content;
		background: transparent;

		&.invisible {
			visibility: hidden;
		}
	}
}

.course-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--borders--border-radius-lg);
	background-color: var(--_colors---colors-semantic-tokens--background-primary);
	border: var(--borders--border-width-default) solid var(--_colors---colors-support--gray--gray-100);

	&>section {
		display: flex;
		flex-direction: column;
		gap: var(--padding--padding-default);
		padding: var(--padding--padding-lg);

		&>.course-title {
			width: 100%;
			font-weight: var(--typography--font-weight--font-weight-semibold);
			color: var(--_colors---colors-semantic-tokens--text-secondary);
		}

		&>.course-description {
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			margin: 0px;
		}

		&>.course-link {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

		}
	}
}

.course-page {
	.course-content {
		display:flex;
		flex-direction: column;
		align-items: center;
		gap: var(--padding--padding-2xl);
		padding-top: var(--padding--padding-4xl);
		padding-left: var(--padding--padding-2xl);
		padding-right: var(--padding--padding-2xl);
		max-width: var(--page--inner-page-max-width);
		width: 100%;
		margin: auto;
		@media (min-width: 1024px) {
			width:50%;
		}
	}

	.course-type {
		display: block;
		color: var(--_colors---colors-semantic-tokens--text-primary);
		font-weight: var(--typography--font-weight--font-weight-regular);
		font-size: var(--typography-semantic-tokens--h3);
		line-height: var(--typography--line-height--line-height-xl);
		text-align: center;
		width: 100%;
	}

	.course-title {
		text-align: center;
		color: var(--_colors---colors-semantic-tokens--text-secondary);
		font-weight: var(--typography--font-weight--font-weight-bold);
		font-size: var(--typography-semantic-tokens--h1);
		line-height: var(--typography--line-height--line-height-default);
		margin-top: var(--padding--padding-xs);
		margin-bottom: var(--padding--padding-xl);
	}

	.course-subheading {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;
		align-items: flex-start;
		gap: var(--padding--padding-xl);

		.course-subheading-section {
			display: flex;
			flex-direction: column;
			justify-items: flex-start;

			.course-subheading-title {
				color: var(--_colors---colors-semantic-tokens--text-primary);
				font-weight: var(--typography--font-weight--font-weight-bold);
				font-size: var(--typography--font-size--font-size-sm);
				line-height: var(--typography--line-height--line-height-default);
				margin-bottom: var(--padding--padding-xs);
				letter-spacing: 0.025em;
			}
		}
	}

	.course-description {
		/*text-ab-primary-dark mb-4 w-full mt-8*/
		color: var(--_colors---colors-semantic-tokens--text-secondary);
		width: 100%;
		margin-bottom: var(--padding--padding-default);
		margin-top: var(--padding--padding-xl);
	}

	.learning-objectives-header {
		font-weight: var(--typography--font-weight--font-weight-regular);
		line-height: var(--typography--line-height--line-height-2xl);
		text-align: left;
		align-self: flex-start;
		width: 100%;
		display: block;
		margin: 0px 0px var(--padding--padding-xs) 0px;
	}

	.learning-objectives-list {
		align-self: flex-start;
		margin-top: 0px;
		margin-bottom: var(--padding--padding-default);
		list-style-type: disc;
		list-style-position: inside;
	}

	.related-courses-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: var(--page--inner-page-max-width);
		margin: auto;
		padding: var(--padding--padding-5xl) var(--padding--padding-2xl);
		gap: var(--padding--padding-lg);

		&> h2 {
			color: var(--_colors---colors-semantic-tokens--text-secondary);
			text-align: center;
			line-height: var(--typography--line-height--line-height-md);
			margin-bottom: var(--padding--padding-default);
		}

		&> div {
			width: 100%;
			max-width: var(--page--inner-page-max-width);
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-content: stretch;
			padding: var(--padding--padding-lg);
			margin: var(--padding--padding-lg) auto var(--padding--padding-default);
			gap: var(--padding--padding-default);

			@media (min-width: 1440px) {
				flex-wrap: nowrap;
				padding: 0px;
			}
		}
	}

	.related-course-card {
		position: relative; /* For link coverage */
		display: flex;
		flex-direction: column;
		flex-basis: 33.333%;
		align-items: flex-start;
		justify-content: space-between;
		max-width: 100%;
		min-width: 350px;
		overflow: hidden;
		border-radius: var(--borders--border-radius-lg);
		border: var(--borders--border-width-default) solid var(--_colors---colors-support--gray--gray-100);

		> &a {
			/* cover whole card */
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		> .card-content {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			gap: var(--padding--padding-xs);
			height: 100%;
			padding: var(--padding--padding-xl);

			> .type {
				color: var(--_colors---colors-semantic-tokens--text-primary);
			}
			> .title {
				color: var(--_colors---colors-semantic-tokens--text-secondary);
				text-align: left;
				margin: 0px auto;
				width: 100%;
				line-height: var(--typography--line-height--line-height-2xl);
				font-weight: var(--typography--font-weight--font-weight-bold);
			}
			> .description {
				text-align: left;
				color: var(--_colors---colors-semantic-tokens--text-primary);
				font-size: var(--typography--font-size--font-size-default);
				line-height: var(--typography--line-height--line-height-2xl);
				font-weight: var(--typography--font-weight--font-weight-regular);
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				margin: 0px;
			}

			> .cta {
				/* bg-transparent hover:bg-transparent ab-body-16 font-bold no-underline*/
				display: flex;
				align-items: center;
				width: 100%;
				gap: var(--padding--padding-xxs);
				text-decoration-line: none;
				background-color: transparent;
				font-size: var(--typography--font-size--font-size-default);
				line-height: var(--typography--line-height--line-height-2xl);
				font-weight: var(--typography--font-weight--font-weight-regular);

				&:hover {
					background-color: transparent;
				}
			}
		}
	}
}

.spinner {
	margin-left: auto;
	margin-right: auto;

	&>div {
		background-color: rgba(0,0,0,0);
		width: 100%;
		aspect-ratio: 1;
		border: 6px solid var(--_colors---colors-support--gray--gray-100);
		border-radius: 100%;
		border-bottom-color: rgba(0,0,0,0);
		animation: spin 1s linear infinite;
	}
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.search-field {
	width: 100%;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	gap: var(--padding--padding-xs);
	padding: var(--padding--padding-xxs) var(--padding--padding-xs) var(--padding--padding-xxs) var(--padding--padding-md);
	background-color: var(--_colors---colors-core--neutral--neutral-100);
	--search-field-icon: var(--_colors---colors-support--gray--gray-200); /* Passed to svg stroke color for icon */
	line-height: 1; /* For icon alignment */

	&>input {
		padding: var(--padding--padding-xs) var(--input-fields--input-font-size) var(--padding--padding-xs) var(--input-fields--input-font-size);
		font-weight: var(--typography--font-weight--font-weight-semibold);
		color: var(--_colors---colors-semantic-tokens--text-primary);
		font-size: var(--typography--font-size--font-size-default);
		line-height: var(--typography--line-height--line-height-2xl);
		width: 100%;
		background-color: transparent;
		border: none;
		&:focus {
			outline: none;
			box-shadow: none;
		}
	}
}

.select {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: var(--borders--border-radius-m);

	&>.select-button {
		padding: var(--padding--padding-xxs) var(--padding--padding-lg);
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		color: var(--_colors---forms--input-text);
		border: var(--borders--border-width-bold) solid var(--_colors---forms--input-border-focused);
		border-radius: var(--borders--border-radius-m);
		position: relative;
		background-color: var(--_colors---colors-semantic-tokens--background-primary);
		font-size: var(--typography--font-size--font-size-lg);
		line-height: var(--typography--line-height--line-height-xl);

		&.open {
			z-index: 10;
		}
	}

	&>.select-list {
		position: relative;

		ul {
			position: absolute;
			top: -10px;
			width: 100%;
			border: var(--borders--border-width-bold) solid var(--_colors---forms--input-border-focused);
			border-radius: var(--borders--border-radius-m);
			border-top-width: 0px;
			max-height: 300px;
			overflow: auto;
			margin: 0px;
			padding: var(--padding--padding-xs) 0px 0px 0px;
			z-index: 2;
			background-color: var(--_colors---colors-semantic-tokens--background-primary);
			list-style: none;

			li {
				/* hover:bg-ab-primary-medium hover:text-white duration-150 */
				font-size: var(--typography--font-size--font-size-lg);
				color: var(--_colors---forms--input-text);
				cursor: pointer;
				margin: 0px;
				padding: var(--padding--padding-xs) var(--padding--padding-lg);
				transition-duration: 150ms;

				&:hover {
					color: var(--_colors---colors-semantic-tokens--background-primary);
					background-color: var(--_colors---forms--input-text);
				}
			}
		}
	}
}

.rating {
	display: flex;
	flex-direction: column;
	gap: var(--padding--padding-xs);
	align-self: flex-start;

	&>label {
		/* font-nunito  leading-5*/
		font-size: var(--typography--font-size--font-size-sm);
		color: var(--_colors---colors-semantic-tokens--text-secondary);
		font-weight: var(--typography--font-weight--font-weight-extrabold);
		line-height: var(--typography--line-height--line-height-2xl);
	}
	.unrated {
		color: var(--_colors---colors-core--neutral--neutral-300);
	}
	.rating-stars {
		display: flex;
		flex-direction: row;
		color: var(--_colors---colors-semantic-tokens--text-secondary);
		font-weight: var(--typography--font-weight--font-weight-bold);
		gap: var(--padding--padding-xs);
		align-items: center;

	}
}

.social-media-share-links {
	/*flex flex-wrap justify-start items-start gap-6 w-full pb-1*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-items: flex-start;
	align-items: flex-start;
	gap: var(--padding--padding-lg);
	width: 100%;
	padding-bottom: var(--padding--padding-xxs);

	a {
		height: var(--icons--icon-height-xs);
		width: var(--icons--icon-height-xs);
	}
}