/*============================================================================*/
.FAQHeader {
	margin-bottom:			20px;
	margin-top:				0;

	font-size:				18px;
	font-weight:			300;

	text-align:				center;
}

.FAQHeader b {
	font-family:            "Bitter", serif;
	font-size:				24px;
	font-weight:			700;

	display:				block;

	margin-bottom:			10px;
}

.FAQSearchBar {
	width:					100%;
	text-align: 			center;
}

.FAQSearchBarInput {
	max-width:				600px;
	height: 				38px;

	margin: 				0 auto;
	margin-top:				25px;

	padding-left:			20px;
	padding-right:			20px;
}

.FAQSearchBar input {
	border: 1px #bebebe solid;
	margin: 				0;

	padding:				0px;
	padding-left:			10px;
	padding-right:			10px;

	width:					80%;
	height:					38px;
	line-height: 			38px;

	float:					left;
}

.FAQSearchBarGo {
	/* @todo update with Button DarkPurple RoundedQuarter Bitter Bold Uppercase */
	height:        38px;

	background:    #524758;
	border-radius: 3px;

	font-family:   inherit;
	font-weight:   600;
	font-size:     15px;
	color:         #ffffff;
	text-align:    center;

	outline:       none;

	padding-inline: 			16px;

	transition:    0.25s;
}

.FAQSearchBarGo:hover,
.FAQSearchBarGo:focus {
	background: #7e6e83;
}

.FAQContent {
	margin:                 0 auto 100px;
	max-width: 				640px;
}

.FAQResultsHeader {
	font-size:				24px;

	margin-block: 			32px 16px;

	display:				block;
}

.FAQResults {
	margin-bottom: 			20px;
}

.FAQResults li {
	margin-bottom: 			20px;
}

/*
Top Ten section on /faq
 */
.FAQTopTenTitle {
	font-family:            Bitter, serif;
	font-size:				22px;
	font-weight:			700;

	text-align: 			center;

	margin:					60px auto 0;
	margin-bottom:			24px;
}

.FAQTopTen {
	margin-left:			30px;
	padding:				0;
}

.FAQTopTen li {
	padding-left:			20px;
	margin-bottom: 			20px;
}

.FAQBrowseLink {
	font-size: 				12px;

	padding-left: 			50px;
}

.FAQSearchBar + .FAQBrowseLinkSection {
	margin-top: 32px;
}

.FAQBrowse {
	margin-left:			30px;
	padding:				0;
}

.FAQBrowse > li {
	margin-bottom: 			20px;
}

.FAQBrowse > li > ul > li {
	margin-top: 			10px;
}

.FAQBrowsePagination {
	margin-block:           60px 120px;
	text-align:             center;
}

.FAQBrowsePagination:has(.FAQBrowseButtons:empty) {
	display: 				none;
}

.FAQBrowseButtons {
	display: flex;
	gap: 8px 8px;
	justify-content: center;
	width: 					100%;
	height: 				38px;
	margin-top: 			8px;
}

/* View FAQ (Detail Page) */
.Breadcrumbs {
	margin: -2.2em 0 1.5em;

	font-weight: bold;
	font-size: 1.8rem;
}
.Breadcrumbs a {
	color: #8f6f24;
	font-weight: bold;
	text-decoration: none;
}
.Breadcrumbs svg {
	margin-right: 0.4em;

	font-size: 1.33em;
}
@media (max-width: 960px) {
	.Breadcrumbs {
		margin: -1.8em 0 1em;
	}
}
@media (max-width: 768px) {
	.Breadcrumbs {
		margin: -0.8em 0 1em;
	}
}
@media (max-width: 640px) {
	.Breadcrumbs {
		font-size: 1.5rem;

		margin: 0em 0 1em;
	}
}

.ViewFAQContent {
	min-height: 			200px;
}

.ViewFAQContent > h1 {
	font-size:				24px;
	font-weight:			bold;

	margin:					0;
	padding:				0;

	margin-bottom: 			20px;
}

.ViewFAQContent > p {
	font-size:				16px;

	line-height: 			24px;

	margin:					0;
	padding:				0;
	margin-bottom: 			40px;

	display: 				block;
}

.FAQRelatedQuestionsSection {
	margin-top:				60px;
	margin-bottom: 			10px;

	max-width: 				640px;
}

.FAQRelatedQuestionsSection .Heading {
	font-family: "Bitter", serif;
	margin-bottom: 8px;
}

.FAQRelatedQuestionsSection .Question {
	margin-bottom: 8px;
}

.FAQRelatedQuestionsSection .Question:last-child {
	margin-bottom: 0;
}

.FAQHelpful {

	/* @todo update with Button DarkPurple RoundedQuarter Bitter Bold Uppercase */

	height:        36px;

	background:    #524758;
	border-radius: 3px;

	font-family:   inherit;
	font-weight:   600;
	font-size:     15px;
	color:         #ffffff;
	text-align:    center;

	outline:       none;

	padding-inline: 		16px;

	transition:    0.25s;
}

.FAQHelpful:hover,
.FAQHelpful:focus {
	background: #7e6e83;
}

.FAQHelpfulSubmitted,
.FAQHelpfulSubmitted:is(:hover, :focus) {
	background-color:		#524758;
	cursor: unset;
	box-shadow: none;
}

.FAQFeedback {
	max-width:				280px;

	background-color:		white;
	box-shadow: 0 0 8px rgba(0, 0 , 0, 0.25);

	font-size:				14px;
	font-weight: 			300;

	border:					1px #d7d7d7 solid;

	position: 				fixed;

	left:					50%;
	top:					200px;

	margin-left: 			-140px;

	padding: 				20px;

	-webkit-border-radius:	5px 5px 5px 5px;
	-moz-border-radius:		5px 5px 5px 5px;
	border-radius:			5px 5px 5px 5px;

	z-index:				10;

	display: 				none;
}

.FAQFeedbackClose {
	width:					28px;
	height: 				28px;

	position: 				absolute;

	right:					10px;
	top:					10px;

	cursor: 				pointer;
	padding: 0;
}

.FAQFeedbackClose svg {
	aspect-ratio: 1 / 1;
	height: unset;
	width: 80%;
}

.FAQFeedbackHeader {
	font-family:            "Bitter", serif;
	font-size:				24px;
	font-weight:            700;
	line-height: 			1;
	color:					#544759;
}

.FAQFeedback p {
	margin-top:				20px;
	margin-bottom: 			20px;
}

.FAQFeedbackButton {

	/* @todo update with Button RoundedQuarter Bitter Bold Uppercase */

	background-color:		#787878;

	color:					white;

	height:					30px;
	line-height: 			32px;

	font-size:				13px;
	font-weight: 			bold;

	text-align: 			center;

	padding-left: 			30px;
	padding-right: 			30px;

	cursor: 				pointer;

	display: 				inline-block;

	margin-right: 			8px;

	transition: 			background-color 0.25s;
}

.FAQFeedbackYes:hover {
	background-color:		#3f985b;
}

.FAQFeedbackYesActive, .FAQFeedbackYesActive:hover {
	background-color:		#4cc572;
}

.FAQFeedbackNo:hover {
	background-color:		#9d3939;
}

.FAQFeedbackNoActive, .FAQFeedbackNoActive:hover {
	background-color:		#e75757;
}

.FAQFeedbackContent {
	width:					100%;
	height:					90px;

	border:					1px #d7d7d7 solid;

	padding:				10px;

	margin-top: 			20px;
	margin-bottom: 			10px;

	font-size:				13px;
	font-weight: 			400;
	font-family: 			inherit;
}

.FAQFeedbackSubmit {

	/* @todo update with Button DarkPurple RoundedQuarter Bitter Bold Uppercase */

	height:        38px;

	background:    #524758;
	border-radius: 3px;

	font-family:   inherit;
	font-weight:   600;
	font-size:     15px;
	color:         #ffffff;
	text-align:    center;

	outline:       none;
	padding-inline: 		16px;

	transition:    0.25s;
}

.FAQFeedbackSubmit:hover,
.FAQFeedbackSubmit:focus {
	background: #7e6e83;
}

.FAQSearchFooter {
	margin-top: 96px;
}

.FAQSearchBarQA {
	margin-bottom: 			40px;
}