/*
A common stylesheet for use in all BobWeb sites
Created by Mark Humphrey 16/02/2021
*/

/* --------------------------------
	GENERAL
-------------------------------- */

*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* --------------------------------
	END GENERAL
-------------------------------- */


/* --------------------------------
	FLEXBOX
-------------------------------- */


.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.flex_align_center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.flex_justify_space_between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.centered_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.centered_flex_columns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.vertically_centered_flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.flex_columns {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* --------------------------------
	END FLEXBOX
-------------------------------- */


/* --------------------------------
	CUSTOM RADIO BUTTONS
-------------------------------- */

.custom_radio_buttons_container {
	padding: 0;
}

.custom_radio_container {
	display: block;
	position: relative;
	padding-left: 2.5em;
	cursor: pointer;
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 1em 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.custom_radio_container:last-child {
	margin: 0 0 0 0;
}

/* Hide the browser's default radio button */
.custom_radio_container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.custom_radio_container .custom_radio_checkmark {
	position: absolute;
	top: -5px;
	left: 0;
	height: 26px;
	width: 26px;
	background-color: #eee;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.custom_radio_container:hover input ~ .custom_radio_checkmark {
	background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.custom_radio_container input:checked ~ .custom_radio_checkmark {
	background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.custom_radio_checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom_radio_container input:checked ~ .custom_radio_checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.custom_radio_container .custom_radio_checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--background-color);
}

/* --------------------------------
	END CUSTOM RADIO BUTTONS
-------------------------------- */

/* --------------------------------
	CUSTOM CHECKBOX

	USAGE:
	<div class="custom_checkbox">
		<label class="checkbox_label">
			<input type="checkbox">
			<span class="checkbox_custom rectangular"></span>
		</label>
		<div class="checkbox_title">Checkbox title</div>
	</div>
-------------------------------- */

.custom_checkbox {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.custom_checkbox .checkbox_label {
	display: block;
	position: relative;
	margin: auto;
	cursor: pointer;
	font-size: 22px;
	line-height: 24px;
	height: 24px;
	width: 24px;
	clear: both;
}

.custom_checkbox .checkbox_label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.custom_checkbox .checkbox_label .checkbox_custom {
	position: absolute;
	top: 0;
	left: 0;
	height: 24px;
	width: 24px;
	background-color: transparent;
	border-radius: 5px;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	border: 2px solid dodgerblue;
}


.custom_checkbox .checkbox_label input:checked ~ .checkbox_custom {
	background-color: dodgerblue;
	border-radius: 5px;
	-webkit-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	opacity:1;
	border: 2px solid dodgerblue;
}


.custom_checkbox .checkbox_label .checkbox_custom::after {
	position: absolute;
	content: "";
	left: 12px;
	top: 12px;
	height: 0px;
	width: 0px;
	border-radius: 5px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(0deg) scale(0);
	-ms-transform: rotate(0deg) scale(0);
	transform: rotate(0deg) scale(0);
	opacity:1;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}

.custom_checkbox .checkbox_label input:checked ~ .checkbox_custom::after {
	-webkit-transform: rotate(45deg) scale(1);
	-ms-transform: rotate(45deg) scale(1);
	transform: rotate(45deg) scale(1);
	opacity:1;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 2px 2px 0;
	background-color: transparent;
	border-radius: 0;
}

/* For Ripple Effect */
.custom_checkbox .checkbox_label .checkbox_custom::before {
	position: absolute;
	content: "";
	left: 10px;
	top: 10px;
	width: 0px;
	height: 0px;
	border-radius: 5px;
	border: 2px solid dodgerblue;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.custom_checkbox .checkbox_label input:checked ~ .checkbox_custom::before {
	left: -3px;
	top: -3px;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	-webkit-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);
	opacity:0;
	z-index: 999;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
}

/* Checkbox title - optional! */
.custom_checkbox .checkbox_title {
	margin-left: 1em;
	font-size: 0.95em;
}

/* --------------------------------
	END CUSTOM CHECKBOX
-------------------------------- */

/* --------------------------------
	CUSTOM TOGGLE SWITCH
-------------------------------- */

.toggle_switch {
	--toggleSwitchWidth: 50px;
	--toggleSwitchHeight: calc(var(--toggleSwitchWidth) / 2);
	--toggleSwitchBorderRadius: calc(var(--toggleSwitchHeight) / 2);

	display: inline-block;
	cursor: pointer;
}

.toggle_switch.disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}

.toggle_switch_input {
	display: none;
}

.toggle_switch_fill {
	position: relative;
	width: var(--toggleSwitchWidth);
	height: var(--toggleSwitchHeight);
	border-radius: var(--toggleSwitchBorderRadius);
	background: #dddddd;
	transition: background 0.2s;
}

.toggle_switch_input:checked ~ .toggle_switch_fill {
	background: dodgerblue;
}

.toggle_switch_fill::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: var(--toggleSwitchHeight);
	width: var(--toggleSwitchHeight);
	background: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	border-radius: var(--toggleSwitchBorderRadius);
	transition: transform 0.2s;
}

.toggle_switch_input:checked ~ .toggle_switch_fill::after {
	transform: translateX(var(--toggleSwitchHeight));
}

.toggle_switch_input.disabled,
.toggle_switch_input.disabled ~ .toggle_switch_fill {
	pointer-events: none;
}

.toggle_switch_label {
	margin-left: 1em;
	font-size: 0.95em;
}

.toggle_switch_label.inactive {
	opacity: 0.6;
}

/* --------------------------------
	END CUSTOM TOGGLE SWITCH
-------------------------------- */

/* --------------------------------
	CUSTOM SELECT
-------------------------------- */

select.custom_select {
	display: block;
	font-family: sans-serif;
	color: #444;
	padding: 0 1.4em 0 .8em;
	width: 100%;
	height: 3em;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--background-color);
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	linear-gradient(to bottom, #ffffff 0%,#f4f4f4 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}

select.custom_select::-ms-expand {
	display: none;
}

select.custom_select:hover {
	border-color: #888;
}

select.custom_select:focus {
	border-color: #9ecaed;
	box-shadow: 0 0 10px #9ecaed;
	color: #222;
	outline: none;
}

select.custom_select option {
	font-weight: normal;
	padding: 1em 0;
}

/* --------------------------------
	END CUSTOM SELECT
-------------------------------- */


/* --------------------------------
	REPORT THEORY
-------------------------------- */

div.report_theory_container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.6);
	z-index: 10000;
}

div.report_theory_container div.content_wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 40em;
	padding: 1em;
	background-color: var(--background-color);
	border-radius: 1em;
	border: 1px solid silver;
	box-shadow: 0 3px 6px rgba(0,0,0,0.5);
	display: none;
}

div.report_theory_container div.content_wrapper div.exit {
	position: absolute;
	top: -1em;
	right: -1em;
	z-index: 1;
}

div.report_theory_container div.content_wrapper div.content {
	max-height: 90vh;
	overflow-y: auto;
}

div.report_theory_container div.content_wrapper div.exit img.icon {
	height: 2em;
	cursor: pointer;
}

div.report_theory_container div.content_wrapper div.content .header_label {
	margin: 0.75em 0 0.5em 0;
	font-size: 1.375em;
}

div.report_theory_container div.content_wrapper div.content p.description {
	font-style: italic;
	margin: 0 0 1em 0;
}

div.report_theory_container div.content_wrapper div.content div.theory_content {
	text-align: left;
	margin: 0 1em;
}

div.report_theory_container div.content_wrapper div.content div.theory_content h3.content_item_header {
	font-size: 1.125em;
	margin-bottom: 0.25em;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form {
	margin-top: 1.5em;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form label {
	display: block;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form input,
div.report_theory_container div.content_wrapper div.content div.theory_content form textarea {
	display: block;
	width: 100%;
	padding: 1em;
	border-radius: 0.5em;
	outline: none;
	margin: 0.5em 0 1em 0;
	border: 1px solid silver;
}

body.night_mode div.report_theory_container div.content_wrapper div.content div.theory_content form input,
body.night_mode div.report_theory_container div.content_wrapper div.content div.theory_content form textarea {
	background-color: var(--background-whitesmoke);
	color: var(--text-default);
}

div.report_theory_container div.content_wrapper div.content div.theory_content form textarea {
	font-family: 'Roboto', sans-serif;
	height: 8em;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form input:focus,
div.report_theory_container div.content_wrapper div.content div.theory_content form textarea:focus{
	border-color: #9ecaed;
	box-shadow: 0 0 10px #9ecaed;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form button {
	margin: 0.5em 0 1em 0;
	cursor: pointer;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form button.disabled {
	opacity: 0.4;
	pointer-events: none;
}

div.report_theory_container div.content_wrapper div.content div.theory_content form .report_theory_recaptcha_container {
}

div.report_theory_container div.content_wrapper div.content div.theory_content form .report_theory_recaptcha_container div.recaptcha_info {
	font-size: 0.875em;
	margin: 0.5em 0;
	color: red;
}

/* --------------------------------
	END REPORT THEORY
-------------------------------- */

/* --------------------------------
	QUESTION EXPLANATION FEEDBACK
-------------------------------- */

div.question_explanation_feedback_content {
	font-size: 0.95em !important;
	margin-top: 3em;
}

div.question_explanation_feedback_content div.feedback_label {
	color: var(--text-lighter);
	margin-bottom: 1em;
}

div.question_explanation_feedback_content div.feedback_buttons_container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

div.question_explanation_feedback_content div.feedback_buttons_container button.feedback_button {
	color: var(--text-lighter);
	padding: 0.5em 1em;
	margin-right: 1em;
	border-radius: 0.25em;
	cursor: pointer;
}

body.night_mode div.question_explanation_feedback_content div.feedback_buttons_container button.feedback_button {
	color: var(--text-inverse);
}

div.question_explanation_feedback_content.post_feedback {
	display: inline-block;
	color: green;
	border: 1px solid green;
	border-radius: 0.5em;
	padding: 0.75em 1.5em;
	font-weight: 500;
}

/* --------------------------------
	END QUESTION EXPLANATION FEEDBACK
-------------------------------- */

div.questions_overview_container {

}

/* --------------------------------
	RESULTS QUESTIONS LIST
	- a list of corrected questions shown in quiz results screens -
-------------------------------- */

/* --------------------------------
	QUESTIONS OVERVIEW LIST
	- a list of quiz questions shown as a dropdown during quizzes

	RESULTS QUESTIONS LIST
	- a list of corrected questions shown in quiz results screens
-------------------------------- */
div.results_questions_container {
	padding: 0;
	position: relative;
	--bg: var(--background-whitesmoke);
	--collapsed-height: 20em;
	--fade-height: 4em;
}

div.results_questions_container.is-expanded::after {
	display: none;
}

/* Fade-out hint above the button when collapsed */
div.results_questions_container.is-collapsed::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--fade-height);
	bottom: var(--fade-height);
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg));
}

body.night_mode div.results_questions_container.is-collapsed::after {
	background: linear-gradient(to bottom, rgba(17,17,17,0), var(--bg));
}

div.results_questions_container div.see_more_container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4em;
	cursor: pointer;
	font-weight: bold;
	color: dodgerblue;
	width: 100%;
	background: var(--bg);
	transition: filter 0.2s ease;
}

div.results_questions_container div.see_more_container:hover {
	filter: brightness(0.97);
}

div.results_questions_container div.see_more_container .see_more_label {
	font-weight: bold;
	color: dodgerblue;
	margin-right: 1em;
}

div.results_questions_container div.see_more_container img.caret {
	width: 1em;
	transition: transform .2s ease;
}

div.results_questions_container.is-expanded div.see_more_container img.caret {
	transform: rotate(180deg);
}

div.results_questions_container ul.results_questions_list,
ul.questions_overview_list {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

div.results_questions_container ul.results_questions_list {
	max-height: none;
	transition: max-height .5s ease;
	will-change: max-height;
	padding: 1em 0;
}

div.results_questions_container.is-collapsed ul.results_questions_list {
	max-height: var(--collapsed-height);
}

div.results_questions_container ul.results_questions_list li.results_question_item,
ul.questions_overview_list li.question_overview_item {
	display: flex;
	align-items: center;
	font-size: 1em;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	padding: 0.75em 1.5em;
}

div.results_questions_container ul.results_questions_list li.results_question_item:hover,
ul.questions_overview_list li.question_overview_item:hover {
	background-color: var(--hover-grey);
}

div.results_questions_container ul.results_questions_list li.results_question_item.selected,
ul.questions_overview_list li.question_overview_item.selected {
	border: 2px solid dodgerblue;
	box-shadow: 0 1px 4px rgba(30, 144, 255, 0.25);
	font-weight: 500;
	background-color: rgba(30, 144, 255, 0.15);
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container,
ul.questions_overview_list li.question_overview_item .icons_container {
	position: relative;
	display: flex;
	align-items: center;
	margin-right: 1em;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .result_status_wrapper,
ul.questions_overview_list li.question_overview_item .icons_container .status_wrapper {
	position: relative;
	width: 100%;
	width: 2em;
	margin-right: 0.75em;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .result_status_wrapper:before,
ul.questions_overview_list li.question_overview_item .icons_container .status_wrapper:before {
	content: '';
	display: block;
	padding-top: 100%;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 0;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.unanswered,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.unanswered {
	background-color: #dadada;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.answered,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.answered {
	background: linear-gradient(#80c3ff, #55a9f2);
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.correct,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.correct {
	background: linear-gradient(#7fff7e, #36e52e);
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.incorrect,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.incorrect {
	background: #ff6666;
	background: linear-gradient(#ff6565, #f34d4d);
}

body.night_mode div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.correct,
body.night_mode div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.incorrect,
body.night_mode ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.correct,
body.night_mode ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.incorrect {
	filter: brightness(0.85);
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator .status_indicator_label,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator .status_indicator_label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--text-lighter);
	font-size: 0.875em;
	pointer-events: none;
	font-weight: normal;
	z-index: 1;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator.answered .status_indicator_label,
ul.questions_overview_list li.question_overview_item .icons_container .status_indicator.answered .status_indicator_label {
	color: white;
}

body.night_mode div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .status_indicator .status_indicator_label,
body.night_mode ul.questions_overview_list li.question_overview_item .icons_container .status_indicator .status_indicator_label {
	color: var(--text-inverse);
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .saved_status_indicator,
ul.questions_overview_list li.question_overview_item .icons_container .saved_status_indicator {
	position: relative;
	display: flex;
	align-items: center;
	width: 1.25em;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .saved_status_indicator img.star,
ul.questions_overview_list li.question_overview_item .icons_container .saved_status_indicator img.star {
	position: relative;
	width: 100%;
}

div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .saved_status_indicator img.star.hidden,
ul.questions_overview_list li.question_overview_item .icons_container .saved_status_indicator img.star.hidden {
	opacity: 0;
}

div.results_questions_container ul.results_questions_list li.results_question_item .question_text,
ul.questions_overview_list li.question_overview_item .question_text {
	text-align: left;
}

/* --------------------------------
	END QUIZ OVER AND RESULTS QUESTIONS LIST
-------------------------------- */

div.extra_content_below_indicator_container {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

div.extra_content_below_indicator_container button.extra_content_below_indicator {
	position: relative;
	height: 3.6em;
	width: 3.6em;
	border: none;
	outline: none;
	background-color: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
}

div.extra_content_below_indicator_container button.extra_content_below_indicator img {
	height: 2.6em;
	background-color: #45a3ff;
	padding: 0.5em;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

div.extra_content_below_indicator_container button.extra_content_below_indicator:hover img {
	border-color: dodgerblue;
	background-color: dodgerblue;
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

#extra_content_below_indicator_tip {
	display: none;
	width: 20em;
	max-width: calc(100% - 1em);
	position: fixed;
	left: 50%;
	bottom: 4em;
	transform: translateX(-50%);
}

#extra_content_below_indicator_tip:before {
	content: '';
	position: fixed;
	bottom: -1em;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 13px solid transparent;
	border-top: 26px solid #f81b84;
	border-right: 13px solid transparent;
}

/* --------------------------------

"CD PANEL", left slider panel

-------------------------------- */

.cd-panel {
	position: fixed;
	top: var(--header-height);;
	left: 0;
	height: calc(100% - 8em);
	width: 100%;
	visibility: hidden;
	transition: visibility 0s 0.3s;
	z-index: 10000;
}

.cd-panel::after {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s 0.15s;
}

.cd-panel.is-visible {
	visibility: visible;
	transition: visibility 0s 0s;
}

.cd-panel.is-visible::after {
	background: rgba(0, 0, 0, 0.6);
	transition: background 0.15s 0s;
}

.cd-panel.is-visible .cd-panel-close::before {
	animation: cd-close-1 0.3s 0.15s;
}

.cd-panel.is-visible .cd-panel-close::after {
	animation: cd-close-2 0.3s 0.15s;
}

@-webkit-keyframes cd-close-1 {
	0%, 50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(45deg);
	}
}
@keyframes cd-close-1 {
	0%, 50% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
@-webkit-keyframes cd-close-2 {
	0%, 50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(-45deg);
	}
}
@keyframes cd-close-2 {
	0%, 50% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

.cd-panel-header,
.cd-panel-container {
	width: 40em;
	max-width: calc(100% - 2em);
	transition-property: transform;
	transition-duration: 0.3s;
}

.from-left .cd-panel-container,
.from-left .cd-panel-header {
	left: 0;
	transform: translate3d(-100%, 0, 0);
}

.is-visible .cd-panel-container,
.is-visible .cd-panel-header {
	transform: translate3d(0, 0, 0);
	transition-delay: 0s;
}

.cd-panel-header {
	position: relative;
	display: flex;
	align-items: center;
	height: 4em;
	background: var(--background-color);
	z-index: 2;
	box-shadow:
			5px -4px 20px rgba(0,0,0,0.5)/*,   !* right *!
			0 2px 4px rgba(0,0,0,0.25)*/; /* bottom */
	border-bottom: 1px solid var(--background-color);
}

.cd-panel-header h3 {
	font-size: 1.5em;
	color: var(--text-default);
	padding-left: 1.25em;
}

.cd-panel-header a,
.cd-panel-header a:hover {
	background: rgba(0, 0, 0, 0.0);
}

.cd-panel-close {
	position: absolute;
	top: 0.6125em;
	right: 0;
	height: 100%;
	width: 4em;
	display: inline-block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

.cd-panel-close::before, .cd-panel-close::after {
	content: '';
	position: absolute;
	top: 22px;
	left: 20px;
	height: 3px;
	width: 20px;
	background-color: var(--text-default);
	/* this fixes a bug where pseudo elements are slighty off position */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cd-panel-close::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cd-panel-close::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.cd-panel-container {
	height: 100%;
	background-color: var(--background-whitesmoke);
	z-index: 1;
	transition-property: transform;
	transition-duration: 0.3s;
	box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
}

.cd-panel-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 0;
	padding-bottom: 2em;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}


/* END CD PANEL */



/* --------------------------------
	MEDIA QUERIES
-------------------------------- */

@media only screen and (max-width : 480px) {

	div.report_theory_container div.content_wrapper {
		width: calc(100% - 3em);
		padding: 0.5em;
	}

	.cd-panel-header {
		height: 60px;
		line-height: 60px;
	}

	.cd-panel-close {
		top: 13px;
		width: 40px;
	}

	.cd-panel-close::before, .cd-panel-close::after {
		top: 15px;
		left: 14px;
		height: 3px;
		width: 15px;
	}

	.cd-panel-container {
		top: var(--header-height);;
	}

	div.results_questions_container ul.results_questions_list li.results_question_item, ul.questions_overview_list li.question_overview_item {
		padding: 0.75em 1em;
	}

	div.results_questions_container ul.results_questions_list li.results_question_item .icons_container .result_status_wrapper,
	ul.questions_overview_list li.question_overview_item .icons_container .status_wrapper {
		width: 1.75em;
	}

	#question_marking_buttons {
		width: calc(100% - 2em);
		margin: 0 auto;
	}

	#question_marking_buttons h3 {
		margin-top: 2em;
	}
}


/* --------------------------------
	END MEDIA QUERIES
-------------------------------- */