.hdq_quiz_wrapper .hdq_question {
	background-color: var(--hdq-question-background-color, #fafafa) !important;
	background-image: var(--hdq-question-background-image);
	background-size: cover;
	background-attachment: var(--hdq-question-background-image-fixed, scroll);
	border-radius: var(--hdq-question-rounded-corners, 0);
	padding: var(--hdq-question-padding, 2rem);
	margin: var(--hdq-question-spacing, 2rem) 0;
}

@supports (-webkit-touch-callout: none) {
	.hdq_quiz_wrapper .hdq_question {
		background-attachment: scroll;
	}
}

.hdq_featured_image {
	border-radius: var(--hdq-question-featured-image-rounded-corners, 0);
}

h3.hdq_question_heading {
	color: var(--hdq-question-title-color, #222) !important;
	font-size: var(--hdq-question-title-size, 1.3em);
}

.hdq_question_number {
	display: var(--hdq-question-hide-number, inline);
}

.hdq_row .hdq_label_answer {
	color: var(--hdq-answer-text-color, #222) !important;
	font-size: var(--hdq-answer-font-size, 1.2em);
}

.hdq_answers {
	color: var(--hdq-answer-text-color, #222) !important;
}

.hdq-options-check .hdq_toggle:before {
	background: var(--hdq-toggle-secondary-color, #476777) !important;
}

.hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:before {
	background: var(--hdq-toggle-secondary-color, #476777) !important;
}

.hdq-options-check .hdq_toggle:after,
.hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	background: var(--hdq-toggle-primary-color, #efefef) !important;
}

.hdq_label_answer > img {
	border-radius: var(--hdq-answer-image-rounded-corners, 0);
}

/* Answer states
-- .hdq_answers .hdq_row outranks every HD Quiz answer rule, and each state is
-- wrapped in :where() so they all tie, and the order below decides which wins:
-- hover < selected < marked
------------------------------------------------------- */
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row {
	background-color: var(--hdq-answer-background-color, transparent);
	border-radius: var(--hdq-answer-rounded-corners, 0);
}

/* an answered question has its inputs disabled, so it stops reacting to hover */
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(:hover:not(:has(input:disabled))) {
	background-color: var(--hdq-answer-hover-background-color, rgba(0, 0, 0, 0.1));
}

.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(:has(input:checked)) {
	background-color: var(--hdq-answer-selected-background-color, var(--hdq-answer-background-color, transparent));
}

.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(:has(input:checked)) .hdq_label_answer {
	color: var(--hdq-answer-selected-text-color, var(--hdq-answer-text-color, #222)) !important;
}

/* marked answers. Text based answers mark the input's parent, not a row */
.hdq_quiz_wrapper .hdq_quiz .hdq_correct,
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(.hdq_correct) {
	border-color: var(--hdq-answer-correct-color, green);
	background-color: color-mix(in srgb, var(--hdq-answer-correct-color, green) 12%, transparent);
}

.hdq_quiz_wrapper .hdq_quiz .hdq_wrong,
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(.hdq_wrong) {
	border-color: var(--hdq-answer-wrong-color, red);
	background-color: color-mix(in srgb, var(--hdq-answer-wrong-color, red) 12%, transparent);
}

.hdq_quiz_wrapper .hdq_quiz .hdq_correct_not_selected,
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(.hdq_correct_not_selected) {
	border-color: var(--hdq-answer-correct-color, green);
	background-color: color-mix(in srgb, var(--hdq-answer-correct-color, green) 12%, transparent);
}

/* a marked answer swaps the selected background for a light tint, so the
-- selected text colour (often white) has to go with it */
.hdq_quiz_wrapper .hdq_quiz .hdq_answers .hdq_row:where(.hdq_correct, .hdq_wrong, .hdq_correct_not_selected) .hdq_label_answer {
	color: var(--hdq-answer-text-color, #222) !important;
}

/* Typography
-- switched on by a wrapper class, so "theme default" leaves the theme's own
-- fonts and heading weight alone
------------------------------------------------------- */
.hdq_quiz_wrapper.hdq_styler_font,
.hdq_quiz_wrapper.hdq_styler_font :is(h1, h2, h3, h4, h5, h6, .hdq_button, .hdq_label_answer, .hdq_input, input, select, textarea) {
	font-family: var(--hdq-font-family) !important;
}

.hdq_quiz_wrapper.hdq_styler_title_weight h3.hdq_question_heading {
	font-weight: var(--hdq-question-title-weight);
}

/* Buttons */
.hdq_quiz_wrapper .hdq_button {
	background: var(--hdq-button-background-color, #2d2d2d);
	color: var(--hdq-button-text-color, #ffffff);
	border-radius: var(--hdq-button-rounded-corners, 0);
	padding: var(--hdq-button-padding-vertical, 12px) var(--hdq-button-padding-horizontal, 22px);
	text-transform: var(--hdq-button-text-transform, uppercase);
}

.hdq_quiz_wrapper .hdq_button:hover,
.hdq_quiz_wrapper .hdq_button:focus-visible {
	background: var(--hdq-button-hover-background-color, var(--hdq-button-background-color, #2d2d2d));
	color: var(--hdq-button-hover-text-color, var(--hdq-button-text-color, #ffffff));
	opacity: var(--hdq-button-hover-opacity, 0.6);
}

.hdq_quiz_wrapper.hdq_styler_button_full .hdq_button {
	display: block;
	width: 100%;
}

.hdq_quiz_wrapper.hdq_styler_button_full .hdq_jPaginate .hdq_button + .hdq_button {
	margin-top: 0.5em;
}

/* Next, previous and finish */
.hdq_quiz_wrapper .hdq_jPaginate,
.hdq_quiz_wrapper .hdq_finish {
	text-align: var(--hdq-pagination-align, center);
}

/* Timer
-- appended to <body>, outside the quiz wrapper
------------------------------------------------------- */
body {
	--hdq-timer-offset: 40px;
}

@media screen and (max-width: 800px) {
	body {
		--hdq-timer-offset: 10px;
	}
}

body .hdq_timer {
	background: var(--hdq-timer-background-color, #2d2d2d);
	color: var(--hdq-timer-text-color, #ffffff);
	top: var(--hdq-timer-top, auto);
	bottom: var(--hdq-timer-bottom, var(--hdq-timer-offset));
	left: var(--hdq-timer-left, auto);
	right: var(--hdq-timer-right, var(--hdq-timer-offset));
}

body .hdq_timer.hdq_timer_warning {
	background: var(--hdq-timer-warning-color, #f17222);
}

body .hdq_timer.hdq_timer_danger {
	background: var(--hdq-timer-danger-color, #ab2121);
}

.hdq_quiz_wrapper .hdq_loading_bar {
	background: var(--hdq-loading-bar-color, rgba(15, 143, 18, 0.7));
}

.hdq_results_wrapper {
	background-color: var(--hdq-results-background-color, var(--hdq-question-background-color, #fafafa)) !important;
	background-image: var(--hdq-results-background-image, var(--hdq-question-background-image)) !important;
	background-size: cover;
	border-radius: var(--hdq-question-rounded-corners, 0);
	padding: var(--hdq-question-padding, 2rem);
	margin: var(--hdq-question-spacing, 2rem) 0;
}

.hdq_results_inner > .hdq_results_title {
	color: var(--hdq-results-title-text-color, var(--hdq-question-title-color)) !important;
	font-size: var(--hdq-results-text-font-size, 1.5em);
}
.hdq_results_inner .hdq_result {
	color: var(--hdq-results-score-text-color, var(--hdq-question-title-color));
	font-size: var(--hdq-results-score-font-size, 2.4em);
}

.hdq_results_inner .hdq_result_pass,
.hdq_results_inner .hdq_result_fail {
	color: var(--hdq-results-content-text-color, var(--hdq-answer-text-color)) !important;
}

.hdq_quiz_wrapper .hdq_quiz {
	max-width: var(--hdq-maximum-quiz-width, 600px);
}

.layout_left .hdq_jPaginate ~ .hdq_question,
.layout_left_full .hdq_jPaginate ~ .hdq_question,
.layout_right .hdq_jPaginate ~ .hdq_question,
.layout_right_full .hdq_jPaginate ~ .hdq_question {
	display: none;
}

.layout_left .hdq_question .hdq_question_heading,
.layout_left_full .hdq_question .hdq_question_heading,
.layout_right .hdq_question .hdq_question_heading,
.layout_right_full .hdq_question .hdq_question_heading {
	word-break: break-word;
	hyphens: auto;
}

/* Layouts */
.hdq_question_featured_image {
	grid-area: featured;
}
.hdq_question_heading {
	grid-area: question;
}
.hdq_answers,
.hdq_question_answers_images {
	grid-area: answers;
}

.layout_left .hdq_question,
.layout_left_full .hdq_question,
.layout_right .hdq_question,
.layout_right_full .hdq_question {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	grid-gap: 1em;
}

.layout_left .hdq_question[data-type="multiple_choice_image"],
.layout_left .hdq_question[data-type="select_all_apply_image"],
.layout_left_full .hdq_question[data-type="multiple_choice_image"],
.layout_left_full .hdq_question[data-type="select_all_apply_image"] {
	grid-template-columns: 0.75fr 1fr;
}

.layout_right .hdq_question[data-type="multiple_choice_image"],
.layout_right .hdq_question[data-type="select_all_apply_image"],
.layout_right_full .hdq_question[data-type="multiple_choice_image"],
.layout_right_full .hdq_question[data-type="select_all_apply_image"] {
	grid-template-columns: 1fr 0.75fr;
}

.layout_left_full .hdq_question_heading,
.layout_right_full .hdq_question_heading {
	grid-row: 1 / -1;
}

.layout_left_full .hdq_question_featured_image + .hdq_question_heading,
.layout_right_full .hdq_question_featured_image + .hdq_question_heading {
	grid-row: 2;
}

.layout_left .hdq_question {
	grid-template-areas:
		"featured ."
		"question answers";
}

.layout_right .hdq_question {
	grid-template-areas:
		"featured ."
		"answers question";
}

.layout_left .hdq_question_featured_image,
.layout_right .hdq_question_featured_image {
	grid-column: 1 / -1;
}

.layout_left_full .hdq_question {
	grid-template-areas:
		"featured ."
		"question answers";
}

.layout_right_full .hdq_question {
	grid-template-areas:
		". featured"
		"answers question";
}

.layout_left_full .hdq_question .hdq_answers,
.layout_left_full .hdq_question .hdq_question_answers_images,
.layout_right_full .hdq_question .hdq_answers,
.layout_right_full .hdq_question .hdq_question_answers_images {
	grid-row: 1 / -1;
}

/* Quiz Toggles */
.hdq_row .hdq-options-check .hdq_toggle:before {
	background: var(--hdq-toggle-secondary-color);
}
.hdq_row .hdq-options-check .hdq_toggle:after {
	background: var(--hdq-toggle-primary-color);
}
/* toggle_b */
.hdq_toggle_b .hdq-options-check .hdq_toggle:before {
	border-radius: 0;
}
.hdq_toggle_b .hdq-options-check .hdq_toggle:after {
	border-radius: 0;
}

/* toggle_c */
.hdq_toggle_c .hdq-options-check .hdq_toggle:before {
	border-radius: 4px;
}
.hdq_toggle_c .hdq-options-check .hdq_toggle:after {
	border-radius: 4px;
	left: 0.4em;
	top: 0.2em;
	height: 0.5em;
	width: 0.5em;
}
.hdq_toggle_c .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	left: 1.25em;
}

/* toggle_d */
.hdq_toggle_d .hdq-options-check .hdq_toggle:before {
	border-radius: 50px;
}
.hdq_toggle_d .hdq-options-check .hdq_toggle:after {
	border-radius: 50px;
	left: 0.4em;
	top: 0.25em;
	height: 0.5em;
	width: 0.5em;
}
.hdq_toggle_d .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	left: 1.25em;
}

/* toggle_e */
.hdq_toggle_e .hdq-options-check .hdq_toggle:before {
	height: 0.5em;
	top: 0.25em;
}

/* toggle_f */
.hdq_toggle_f .hdq-options-check .hdq_toggle:before {
	height: 0.5em;
	top: 0.25em;
	border-radius: 0;
}
.hdq_toggle_f .hdq-options-check .hdq_toggle:after {
	border-radius: 0;
}

/* toggle_emoji */
.hdq_toggle_emoji .hdq-options-check .hdq_toggle:before {
	height: 0.6em;
	top: 0.25em;
}
/* !important to beat the toggle primary colour, which is painted on every knob */
.hdq_toggle_emoji .hdq-options-check .hdq_toggle:after {
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	top: -0.1em;
	content: "🙁";
}
.hdq_toggle_emoji .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	content: "🙂";
	top: -0.1em;
	background: transparent !important;
}

/* Chckbox A*/
.hdq_checkbox_a .hdq-options-check .hdq_toggle:before {
	height: 1em;
	width: 1em;
}
.hdq_checkbox_a .hdq-options-check .hdq_toggle:after {
	height: 0.8em;
	width: 0.8em;
	top: 0.1em;
	left: 0.2em;
	transform-origin: center;
	transform: scale(0.8);
	opacity: 0;
}
.hdq_checkbox_a .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	opacity: 1;
	height: 0.8em;
	width: 0.8em;
	top: 0.1em;
	left: 0.2em;
}

/* Chckbox B*/
.hdq_checkbox_b .hdq-options-check .hdq_toggle:before {
	height: 1em;
	width: 1em;
	border-radius: 0;
}
.hdq_checkbox_b .hdq-options-check .hdq_toggle:after {
	height: 0.8em;
	width: 0.8em;
	top: 0.1em;
	left: 0.2em;
	transform-origin: center;
	transform: scale(0.8);
	opacity: 0;
	border-radius: 0;
}
.hdq_checkbox_b .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	opacity: 1;
	height: 0.8em;
	width: 0.8em;
	top: 0.1em;
	left: 0.2em;
}