@charset "utf-8";
/* CSS Document */
/* font */
/**/
.primary-bg {
	background-color: #213d4d;
}

.btn-primary {
	background-color: #213d4d;
	text-decoration: none !important;
	border-color: #213d4d;
}

/* Home page survey
   --ne-highlight is set on #survey-container by index.php, from the main theme colour in the
   website settings, falling back on the Novel Education highlight below */

#survey-container {
	--ne-highlight: #213d4d;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16,42,82,.12), 0 4px 8px rgba(16,42,82,.06);
	padding: 40px;
	max-width: 900px;
	margin: 0 auto;
}

#survey-progress {
	margin-bottom: 30px;
}

#survey-progress-label {
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #7b8794;
	margin-bottom: 8px;
}

#survey-progress-track {
	background: #e8ecf1;
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

#survey-progress-bar {
	background: var(--ne-highlight);
	border-radius: 999px;
	height: 8px;
	width: 16.66%;
	transition: width .25s ease;
}

.survey-title {
	color: var(--ne-highlight);
	font-size: 32px;
	line-height: 40px;
	margin: 0 0 10px 0;
}

.survey-intro {
	color: #55606b;
	font-size: 17px;
	line-height: 27px;
	margin-bottom: 25px;
}

/* Answers */

/* Flex rather than block so an answer long enough to wrap keeps its lines in a column
   beside the radio instead of running back underneath it */
.survey-answer {
	align-items: flex-start;
	border: 2px solid #e2e7ec;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	font-size: 17px;
	line-height: 26px;
	margin-bottom: 14px;
	padding: 20px 22px;
	transition: border-color .15s ease, background-color .15s ease;
}

.survey-answer:hover {
	border-color: var(--ne-highlight);
}

.survey-answer.selected {
	background: rgba(33,61,77,.06);
	border-color: var(--ne-highlight);
}

.survey-answer input.survey-answer-input {
	flex: 0 0 auto;
	margin-right: 10px;
	margin-top: 6px;
}

/* Footer buttons */

.survey-footer {
	margin-top: 25px;
	overflow: hidden;
}

.survey-next-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Result */

#survey-result {
	text-align: center;
}

#survey-recommendation-label {
	color: #7b8794;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#survey-recommendation-title {
	color: var(--ne-highlight);
	font-size: 38px;
	line-height: 46px;
	margin: 10px 0 20px 0;
}

#survey-recommendation-text {
	color: #55606b;
	font-size: 18px;
	line-height: 29px;
	margin: 0 auto 20px auto;
	max-width: 640px;
}

/* The line that hands the visitor over to the booking button */
#survey-result-note {
	color: #55606b;
	font-size: 17px;
	font-weight: 600;
	line-height: 27px;
	margin: 0 auto 30px auto;
	max-width: 640px;
}

#survey-book-call-btn {
	background: var(--ne-highlight) !important;
	border-color: var(--ne-highlight) !important;
	border-radius: 10px;
	color: #fff !important;
	display: inline-block;
	font-size: 22px;
	font-weight: 600;
	padding: 20px 45px;
	text-decoration: none !important;
}

/* Deliberately quiet next to the booking button - it is context, not the call to action */
#survey-program-link {
	color: var(--ne-highlight);
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin: 22px auto 0 auto;
	text-decoration: underline;
}

@media (max-width: 767px) {

	#survey-container {
		padding: 25px 20px;
	}

	.survey-title {
		font-size: 26px;
		line-height: 34px;
	}

	#survey-recommendation-title {
		font-size: 30px;
		line-height: 38px;
	}

	#survey-book-call-btn {
		display: block;
		font-size: 19px;
		padding: 18px 20px;
	}

	#survey-result-note {
		font-size: 16px;
		line-height: 26px;
	}
}

/* Google reviews band on the home page. Was an inline <style> block printed in the page
   body by php/index/_helpers/fetch-reviews-section-inc.php - after the stylesheet, so it
   always won regardless of any competing rule here. */
.google-review-container {
	height: 200px;
	text-align: center;
	padding: 20px;
}

.google-review-container-inner {
	margin-bottom: 10px;
	padding: 20px;
	height: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #ffffff;
}