/*
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
-------------------------------- */



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

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

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


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