/* Variables */

:root {
	--blue: #00729C;
	--white: #FFFFFF;
	--orange: #FF9E18;
	--green: #B4BC00;
	--red: #C31F16;
	--transparent: rgba(0, 0, 0, 0);

	/* Hexagon */
	/* Width and height of each Hexagon */
	--width: 250px;
	--height: calc(var(--width) * 0.71);
	--hex-margin: 20px;

}

/* HTML Styling */

h5 {
	font-size: 18px;
	font-weight: 400;
}

/* Reusable Classes */

.bg-white {
	background-color: var(--white);
}

.bg-blue {
	background-color: var(--blue);
}

.text-white {
	color: var(--white);
}

.text-blue {
	color: var(--blue);
}


/* Game Page */

.question-col {
	padding: 100px 0px 25px 0px;
}

.question-text {
	min-height: 2.4em;
	margin-bottom: 30px;
}


.blockbusterPicoButton {
	width: 75%;
	border-radius: 14px;
	padding: 10px;
	min-height: 120px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: solid 2px white;
	background-color: var(--orange);
	color: white;
	font-size: 22px;
	font-weight: 400;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
	opacity: 0.3;
	pointer-events: none;
}

.blockbusterPicoButton.enabled {
	opacity: 1;
	pointer-events: all;
}

.answer-wrapper {
	margin-bottom: 50px;
}

.blockbusterButton {
	width: 100%;
	border-radius: 14px;
	padding: 10px 15px;
	border: solid 2px;
	font-size: 20px;
	font-weight: 400;
	margin-bottom: 10px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
	background-color: white;
	cursor: pointer;

}

.blockbusterButton:last-of-type {
	margin-bottom: 0px;
}

.low {
	border-color: var(--green);
	color: var(--green);
}

.moderate {
	border-color: var(--orange);
	color: var(--orange);
}

.high {
	border-color: var(--red);
	color: var(--red);
}

/* Splash Screen */

.splash-content-container {
	max-width: 450px;
}





.blockbusterOverlay {
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}



.blockbusterWrapper .leftColumn {
	width: 25%;
}

.blockbusterWrapper .rightColumn {
	width: 75%;
}

#blockbusterGame {
	width: 100%;
	max-width: 1000px;
	margin-bottom: 10%;
}

.blockbusterTimer {
	visibility: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 140px;
	height: 90px;
	padding: 10px;
	border: 1px solid #ffffff;
	color: #ffffff;
	border-radius: 15px;
	margin: 0 auto 30px auto;
	text-align: center;
	font-size: 40px;
	font-family: snSemi, sans-serif;
	opacity: 0;
	transition: all 1s ease-in-out;
}

.game-right-col {
	min-height: 700px;
}

.timeInsert {
	line-height: 1;
	height: 40px;
}

.blockbusterTimer.start {
	visibility: visible;
	opacity: 1;
}



.hexagon-wrapper {
	background-color: transparent;
	perspective: 1000px;
	margin-bottom: 10px;
}

/*Hexagons */

.hexagon-inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	/* transform: rotateY(0deg); */
}

.turnedOver .hexagon-inner {
	transform: rotateY(180deg);
}




.unselected .hexagon-front {
	background-color: #1E839E;
	color: #5FA4BF;
}

.unselected .hexagon-front::before {
	background-color: #006184 !important;
}

.hex {
	width: 25%;
	padding-bottom: 20%;
	display: inline-block;
	text-align: center;
	margin-right: -3%;
}

.hex.correct,
.hex.unused {
	pointer-events: none;
}


.hex:nth-of-type(2),
.hex:nth-of-type(6),
.hex:nth-of-type(10) {
	margin-top: 10%;
	margin-bottom: calc(-10% + 10px);
	transform: translatey(5px);
}

.hex:nth-of-type(4),
.hex:nth-of-type(8),
.hex:nth-of-type(12) {
	margin-top: 10%;
	margin-bottom: calc(-10% + 10px);
	transform: translatey(5px);
}



.hexagon-back::before {
	position: absolute;
	content: "";
	z-index: -2;
	top: 2.5%;
	left: 2.5%;
	height: 95%;
	width: 95%;
	background-color: #79C3ED;
	clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
	margin-bottom: 10px;
	transform: rotateY(180deg);

}

.hexagon-front::before {
	position: absolute;
	content: "";
	z-index: -1;
	top: 2.5%;
	height: 95%;
	width: 95%;
	background-color: white;
	clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}

.hexagon-front,
.hexagon-back {
	clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: red;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.hexagon-front {
	background-color: #C31F16;
	color: #00729C;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40px;
	font-family: snSemi, sans-serif;
}

.hexagon-back {
	background-color: white;
	color: white;
	transform: rotateY(180deg);
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	line-height: 1.2;
}


.hex.selectable {
	cursor: pointer;
}

.hex.unselectable {
	pointer-events: none;
}

.hex.unselectable .hexagon-front,
.hex.unselectable .hexagon-back {

	opacity: 0.4;
}

.hex.selectable .hexagon-front,
.hex.selectable .hexagon-back {

	opacity: 1;
}

.hex.active .hexagon-front,
.hex.active .hexagon-back {
	opacity: 1;
}

.hex.lowRisk .hexagon-front,
.hex.lowRisk .hexagon-back {
	border: solid 2px #b4bc00;
	color: #b4bc00;
	background-color: #b4bc00;
	opacity: 1;
}

.hex.medRisk .hexagon-front,
.hex.medRisk .hexagon-back {
	border: solid 2px #ff9e18;
	color: #ff9e18;
	background-color: #ff9e18;
	opacity: 1;
}

.hex.highRisk .hexagon-front,
.hex.highRisk .hexagon-back {
	border: solid 2px #c31f16;
	color: #c31f16;
	background-color: #c31f16;
	opacity: 1;
}

.hex.correct .hexagon-back::before {
	background-color: #ffffff;
}

.hex.incorrect .hexagon-front,
.hex.incorrect .hexagon-back {
	border: solid 2px #79CAC1;
	color: #79CAC1;
	background-color: #79CAC1;
	opacity: 0.4;
}

.hex.incorrect .hexagon-front:before,
.hex.incorrect .hexagon-back:before {
	background-color: #000000;
}

.hex.unused .hexagon-front,
.hex.unused .hexagon-back {
	border: solid 2px #79CAC1;
	color: #fff;
	background-color: #79CAC1;
	opacity: 0.4;
}

.hex.unused .hexagon-front:before,
.hex.unused .hexagon-back:before {
	background-color: #004761;
}

.hex.answered {
	background-color: #f00;
}

.hex.answered.correct {
	background-color: #0f0;
}

.hex.notAvailable {
	background-color: #666;
}



#blockbusterButtons {
	/*	width:400px;
	margin:30px auto;*/
}

/* .blockbusterButton {
	width:150px;
	display:block;
	text-align: center;
	padding:30px;
} */



.enterInitials {
	top: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.75);
	z-index: 10;
	padding: 15px;
}

.enterInitials-box {
	max-width: 600px;
	width: 100%;
	border-radius: var(--border-radius-lg);
	border: 1px solid var(--light-blue);
}

.input-init {
	padding: 5px;
	font-size: 70px;
	text-align: center;
	color: var(--blue);
	font-family: snSemi, sans-serif;
	text-transform: uppercase;
	border: 1px solid var(--light-blue);
	box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
	border-radius: var(--border-radius-lg);
}




/* Form Container Page */

.form-question-wrapper {
	min-height: 60vh;
}



/*Game results */

.leaderboard {
	height: 400px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.leaderboard-head {
	position: sticky;
	top: 0;
	background-color: #ffffff;
	z-index: 2;
}

.active-result {
	position: sticky;
	bottom: 0;
	background-color: var(--light-blue);
	color: #ffffff;
	z-index: 1;
}

.resultRow {
	border-bottom: 1px solid #dddddd;
}

#disclaimer.warning~.sn-checkmark {
	border: 3px solid red;
}


/* Reference page */

.reference-text {
	columns: 3;
}

.emf-content-container {
	max-height: 60vh;
	overflow: auto;
}

.button-offset {
	padding-top: 93px;
}

/*confirmRisk & PICO*/

#confirmRisk,
#confirmPico,
#endGameBox,
#restartGame,
#picoPremature {
	display: none;
	top: 0;
	left: 0;
	z-index: 99999;
	background-color: rgba(255, 255, 255, 0.75);
}

.confirmRisk-box,
.confirmPico-box,
.endGameBox-box,
.restartGame-box,
.picoPremature-box {
	max-width: 700px;
}

.selectedRisk {
	padding: 15px;
	width: 100%;
	border: 2px solid;
	border-radius: var(--border-radius);
	font-family: snSemi, sans-serif;
}

.selectedRisk.Low {
	color: #B4BC00;
	border-color: #B4BC00;
}

.selectedRisk.Moderate {
	color: var(--orange);
	border-color: var(--orange);
}

.selectedRisk.High {
	color: #C31F16;
	border-color: #C31F16;
}

.references {
	background-color: rgba(255, 255, 255, 0.75);
	z-index: 9999999;
}

.about {
	display: none;
	top: 0;
	left: 0;
	z-index: 99999;
}

.consentForm {
	top: 0;
	left: 0;
}

.myTime {
	font-size: 100px;
}



@media(max-width: 1024px) {
	.game-controls-left {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: #ffffff;
		;
	}

	.game-col {
		height: unset !important;
	}

	.game-right-col {
		min-height: unset;
	}

	#blockbusterGame {
		padding-right: 3% !important;
	}

	.blockbusterTimer {
		justify-content: flex-start;
		margin-left: 0px;
	}

	.game-right-col {
		padding: 0px 30px !important;
	}

	.leaderboard {
		height: 250px;
	}

	.myTime {
		font-size: 80px;
	}
}

@media(max-width: 768px) {
	.bottomMenuInner img {
		width: 100px;
	}

	.splideHIW .slideHIW {
		min-height: 100px;
	}
}