.hdq_quiz_wrapper {
	--hdq-timer-ring-radius: 45;
}

/* zusätzlicher base-timer mit countdown Ring */
.base-timer {
  	top: 100px !important;
	right: 40px;
	position: fixed;
  	height: 200px;
  	width: 200px;
	display: flex;
  	align-items: center !important;
  	justify-content: center !important;
}

/* Neuer transparenter Hintergrundkreis */
.base-timer__background {
	fill: var(--hdq-timer-ring-background-color);
	fill-opacity: var(--hdq-timer-ring-background-opacity);
	stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
	stroke-width: 2px;
	stroke: var(--hdq-timer-ring-color, #ccc);
	fill: none;
}

/* Removes SVG styling that would hide the time label */
.base-timer__circle {
  	fill: none;
	stroke: none;
}

.base-timer_label {
  	position: absolute;
	font-weight: bold;
	font-family: var(--hdq-timer-label-font-family, 'Special Elite');
	font-size: var(--hdq-timer-label-font-size, 36pt);
	color: var(--hdq-timer-label-font-color, #000);
  
  	/* Size should match the parent container */
  	width: 200px;
  	height: 200px;
  
  	/* Keep the label aligned to the top */
  	top: 0;
  
  	/* Create a flexible box that centers content vertically and horizontally */
  	display: flex;
  	align-items: center;
  	justify-content: center;

}

.base-timer__path-remaining {
	stroke-width: var(--hdq-timer-ring-thickness, 10px);
  	stroke-linecap: butt;
 	transform: rotate(90deg);
  	transform-origin: center;
  	transition: 0.1s ease-out;
  	stroke: currentColor !important;
}

.base-timer__svg {
  	transform: scaleX(-1);
}

.base-timer__path-remaining.green {
	color: var(--hdq-timer-color-info, #237f52);
}

.base-timer__path-remaining.orange {
	color: var(--hdq-timer-color-warning, orange);
}

.base-timer__path-remaining.red {
	color: var(--hdq-timer-color-alert, #bb1e10);
}

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

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

h3.hdq_question_heading {
	color: var(--hdq-title-heading-color, #222) !important;
}

.hdq_question_number {
	display: var(--hdq-title-number-visibility, inline);
}

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

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

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

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

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

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

.hdq_quiz_wrapper .hdq_button {
	background: var(--hdq-button-background-color, #2d2d2d);
	color: var(--hdq-button-color, #ffffff);
	border-radius: var(--hdq-button-radius, 0);
}

.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-radius, 0);
	padding: var(--hdq-question-padding, 2rem);
	margin: var(--hdq-question-margin, 2rem) 0;
}

.hdq_quiz {
	max-width: var(--hdq-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,
.layout_left_full .hdq_question,
.layout_right .hdq_question,
.layout_right_full .hdq_question {
	display: grid;
	grid-template-columns: minmax(1px, 1fr) minmax(1px, 1fr);
	grid-gap: 0.4em;
}

.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;
}

.layout_left .hdq_question_featured_image,
.layout_right .hdq_question_featured_image {
	grid-column: 1 / -1 !important;
	margin-bottom: 1rem;
}

.layout_left .hdq_question_heading,
.layout_left_full .hdq_question_heading,
.layout_right .hdq_question_heading,
.layout_right_full .hdq_question_heading {
	align-self: center;
	text-align: center;
}

.layout_right .hdq_question_heading,
.layout_right_full .hdq_question_heading {
	text-align: right;
}

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

.layout_left_full .hdq_question_heading {
	grid-column: 1;
}

.layout_left_full .hdq_question_featured_image {
	grid-column: 2;
}

.layout_right .hdq_question_featured_image {
	grid-area: featured;
}

.layout_right .hdq_question_heading {
	grid-area: title;
}

.layout_right .hdq_answers,
.layout_right .hdq_question_answers_images {
	grid-area: answers;
}

.hdq_question_after_text {
	grid-column: 1 / -1;
}

.layout_right .hdq_question {
	grid-template-areas:
		"featured 1fr"
		"answers title";
}

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

.layout_right_full .hdq_question_heading {
	grid-column: 2;
}

/* Quiz Toggles */
.hdq_toggle_b .hdq-options-check .hdq_toggle:after,
.hdq_toggle_b .hdq-options-check .hdq_toggle:before {
	border-radius: 0;
}

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

.hdq_toggle_d .hdq-options-check .hdq_toggle:after {
	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 {
	right: 0.4em;
}

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

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

.hdq_toggle_g .hdq-options-check .hdq_toggle:after {
	background: transparent;
	box-shadow: none;
	top: -8px;
	content: "🙁";
}

.hdq_toggle_g .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after {
	content: "🙂";
	background: transparent;
	box-shadow: none;
	top: -8px;
}

.hdq_toggle_g .hdq-options-check .hdq_toggle:before {
	height: 0.5em;
	top: 0.25em;
}

/* Neuer Toggle-Stil H ohne Animationen */
/* checkbox für Vorschau*/
/*.hdq_toggle_h .hdq_radio label,*/
.hdq_toggle_h .hdq-options-check label {
	width: 20px;
	height: 20px;
	position: relative;
	cursor: pointer;
	display: block;
	font-size: 22px;
}

/*.hdq_toggle_h .hdq_radio,*/
/*.hdq_toggle_h .hdq-options-check {
	font-size: 24px;
}*/

/*.hdq_toggle_h .hdq_radio input[type="checkbox"], */
.hdq_toggle_h .hdq-options-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	border: 2px solid black;
}

/*.hdq_toggle_h .hdq_radio .hdq_toggle,*/
.hdq_toggle_h .hdq-options-check .hdq_toggle {
	width: 20px;
	height: 20px;
	position: relative;
	cursor: pointer;
	display: block;
	/*font-size: 16px;*/
}

/*.hdq_toggle_h .hdq_radio .hdq_toggle,*/
.hdq_toggle_h .hdq-options-check .hdq_toggle {
	margin-bottom: 0;
}

/*.hdq_toggle_h .hdq_radio .hdq_toggle:before,*/
.hdq_toggle_h .hdq-options-check .hdq_toggle:before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 55%;
	left: 50%;
	transition: none;
	background-color: white;
	border-radius: 0px;
	box-shadow: none;
	border: 2px solid black;
	transform: translate(-50%, -50%);
}

/*.hdq_toggle_h .hdq_radio .hdq_toggle:after,*/
.hdq_toggle_h .hdq-options-check .hdq_toggle:after {
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	border-radius: 0px;
	top: 0%;
	left: 0%;
	transition: none;
	box-shadow: none;
	background-color: black;
	animation: none;
	z-index: 0;
}

/*.hdq_toggle_h .hdq_radio input[type="checkbox"]:checked + .hdq_toggle:before,*/
.hdq_toggle_h .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:before {
	background: transparent;
	box-shadow: none;
}

/*.hdq_toggle_h .hdq_radio input[type="checkbox"]:checked + .hdq_toggle:after,*/
.hdq_toggle_h .hdq-options-check input[type="checkbox"]:checked + .hdq_toggle:after{
	animation: none;
	background: transparent;
	content: "✘";
    position: absolute;
    top: -30%;
    left: 5%;
    width: 100%;
	font-size: 18pt;
	color: mediumblue;
}

/*.hdq_toggle_h .hdq_radio input[type="checkbox"]:focus + .hdq_toggle:after,*/
.hdq_toggle_h .hdq-options-check input[type="checkbox"]:focus + .hdq_toggle:after{
	border: none;
}