body {
	padding-bottom: 50px;
}



h1 {
	margin-bottom: -50px;
}



.header-image {
	width: 100%;
	height: auto;
}

.block-paragraph ul > li {
	margin: 10px 0;
	font-size: 18px;
} 


.heading {
	/*border-bottom: 1px solid grey;*/
	padding-bottom: 10px;
	margin-bottom: 15px;
	margin-top: 15px;
	font-size: 56px;
	font-weight: 800;
	position: relative;
}

	.heading span {
		position:  absolute;
		left: -60px;
		color: #b15835;
		top: 5px;
		/*text-shadow: 3px 2px 0 #ac5330;*/
	}


.learning-items ul {
	padding: 0;
}

	.learning-items li {
		list-style-type: none;
		font-weight:bold;
	}



.block-paragraph .link {
	font-family: "Font Awesome 6 Free";
	content: "\f0c1";
	color: #752e12;
	font-weight: bold;
	margin: 0 0px 0 3px;
	border: 2px solid #752e12;
	border-radius: 6px;
	font-size: 15px;
	padding: 2px;
	opacity: 1;
	transition: background-color .1s;
	cursor: pointer;
}

	.block-paragraph .link:hover {
		background-color: #fde0d5;
	}

.block-paragraph .chart {
	color: green;
	font-family: "Font Awesome 6 Free";
	content: "\f0c1";
	font-weight: bold;
	margin: 0 0px 0 3px;
	border: 2px solid green;
	border-radius: 6px;
	font-size: 15px;
	padding: 2px;
	opacity: 1;
	transition: background-color .1s;
	cursor: pointer;
	padding:2px 4px;
}

	.block-paragraph .chart:hover {
		background-color: lightgreen;
	}

	.block-paragraph h5 {
		text-align: center;
	}

.block-video video {
	width: 100%;
}

.block-heading h2 {
	margin-bottom:-10px;
}

.block-investigate,
.block-paragraph,
.block-resource,
.block-single_image,
.block-double_image,
.block-audio,
.block-table {
	margin: 50px 0;
}

/*****************************************************************************
*                                 SIDEBAR                                    *
*****************************************************************************/
	aside {
		background-color: #efefef;
		border: 1px solid lightgrey;
		border-radius: 3px;
		padding: 20px;
	}

		aside ul {
			padding-left: 20px;
		}

			aside li {
				list-style-type: none;
			}

			aside ul a {
				text-decoration: none;
				color: darkgrey;
				font-weight: 600;
			}



/*****************************************************************************
*                            SINGLE IMAGE BLOCK                            *
****************************************************************************
*/

.block-single_image p {
	font-size: 16px;
	background-color: #f0f0f0;
	padding: 10px;
}

.block-single_image {
	margin-bottom: 50px;
}

.single-image-caption {
	font-size: .8em;
}

.block-double_image img,
.block-single_image img {
	width:100%;
	height:auto;
}

.block-double_image {
	display: flex;
	gap:2px;
}

	.block-double_image > div {
		flex: 0 0 50%;
	}

/*****************************************************************************
*                                HBOX (EXPANDING BOX)                        *
*****************************************************************************/

.hbox {
	margin-bottom: 50px;
	margin-top: 50px;
	/*padding-bottom: 10px;*/
/*	border-bottom: 6px solid black;*/
	border: 1px solid grey;
}

	.hbox .hbox-title {
		text-transform: uppercase;
		/*font-weight: bold;*/
		color: black;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		background-color: rgba(0,0,0,.2);
	}

	.hbox-content {
		padding: 20px 20px 20px 30px;
/*		display: none;*/
	}

	.hbox .hbox-content p {
/*		font-size: 1em;*/
		margin-bottom: 5px;
	}


		.hbox-toggle i {
			transition: transform .1s;
			cursor: pointer;

			border: 2px solid white;
			border-radius: 5px;
			font-size: 26px;
			padding: 3px;
			background-color: rgba(1,1,1,.3);
		}

		.hbox-toggle i:last-of-type {
			display: none;
		}

			.hbox-toggle i:hover {
				transform: scale(1.1);
			}

	.hbox button {
		display:block;
		margin: 0 10px 10px auto;
	}



	
/*****************************************************************************
*                                BLOCK QUOTE                                 *
*****************************************************************************/

.block-quote {
	background-color: #edffeb;
}

	.block-quote .hbox-title {
		background-color:  #629b5b;
	}

		.block-quote .hbox-title img {
			width: 36px;
			margin-right: 5px;
		}

			.block-quote .hbox-title i {
				/*color: #b3eaad;*/
			}

	.block-quote p {
		font-size: 20px !important;
		color: #404040;
		text-align: center;
	}
/*****************************************************************************
*                               GRAPHIC BLOCK                              *
****************************************************************************
*/

.graphic-block .hbox-title {
	background-color: orange;
}


/*****************************************************************************
*                             INVESTIGATE BLOCK                              *
****************************************************************************
*/

.hbox-ponder h3,
.block-investigate h3 {
	text-align: center;
}



	.block-investigate .hbox-title {
		background-color: rgb(255, 235, 187);
		color: #5f4844;
		font-weight: bold;
	}


	.block-quiz .hbox-title {
		background-color: rgb(255, 235, 187);
		color: #5f4844;
		font-weight: bold;
	}


/*****************************************************************************
*                                   QUIZ                                    *
*****************************************************************************/
/*TODO I eliminated the "quiz" class on the quiz hbox so all the styling is gone.
The "quiz-form" class still exists on the form */

.quiz {
/*	background-color: aliceblue;*/
/*	padding: 20px;
	margin-top: 45px;
	position: relative;*/
	background-color: #ffad8c;
}

	.quiz-form li {
		list-style-type: none;
	}


	.quiz .hbox-title {
		background-color: #aa502d;
		color:  white;
	}


	.quiz-question {
		margin-bottom: 15px;
	}

		.evaluation-True,
		.evaluation-False {
			display:inline-block;
			vertical-align: bottom;
		}



			.evaluation-True {
				content: url("../img/check.svg");
				color: green;
				stroke: red;
			}

			.evaluation-False {
				content: url("../img/xmark.svg");
				color: red;
			}



	.quiz-answers {
		margin-bottom: 35px;
		margin-top: 15px;
	}

		.quiz-answer {
			list-style-type: none;
			margin: 11px 5px 5px 5px;
		}

			.quiz-answers.horizontal .quiz-answer {
				display: inline-block;
				margin: 2px 5px;		
			}

			.completed .quiz-answer {
				pointer-events: none;
			}

			.quiz-answer label {
				transition: transform .1s;
				background-color: #ede9d5;
				padding: 3px 7px;
				border-radius: 16px;
				cursor: pointer;
				font-size: 16px;	
			}

				.quiz-answer label:hover {
					transform: scale(1.1);
				}

				.quiz-answer label:active {
					background-color: #8b8bdb;
					color: white;
				}

				.quiz-answer input:checked[type='radio']+label {
					background-color:#7f7fc8;
					color:white;
					transform: scale(1.1);
				}

					.quiz-answer label.right {
						border: 4px solid green;
						/*color: white;
						transition: background-color .3s;*/
					}

					/*.quiz-answer input:checked[type='radio']+label.wrong {
						border: 2px solid red;
					}*/



	.quiz-answers input {
		display: none;
	}

	button[type="submit"] {
		transition: opacity .3s;
	}

	.quiz-message {
		background-color: #c0f2c0;
	  	padding: 20px;
	}


/*TODO This spinner section applies to all exercise types */
.loader {
	content: url("../img/loader.svg");
}

	.htmx-request .loader {
		display: initial
	}


.htmx-request button {
	opacity:0;
}

.quiz-score {
	margin: 35px 0;
}

	.quiz-score-number {
		font-size: 50px;
		color: black;
	}


/* AUDIO */

.block-audio {
	display: flex;
}

	.block-audio .audioplayer {
		margin: 0;
		border: none;
		background-color: #fff1cd;
		z-index: -100;
	}

		.block-audio .audioplayer-title {
			font-size: 14px;
			font-weight: normal;
			color: grey;
			top: 66px;
		}


/*****************************************************************************
*                                 GLOSSARY                                   *
*****************************************************************************/

.glossary.glossary-sidebar {
	position: absolute;
	top: 0;
	left: 0;
}

.glossary.glossary-sidebar h2 {
	display: none;
}

.glossary li {
	list-style-type: none;
	margin-bottom: 25px;
	position: absolute;
}

.glossary p {
	font-size: .9em;
	margin-bottom:  5px;
}


/*****************************************************************************
*                             TABLE OF CONTENTS                              *
*****************************************************************************/

.info-column {
	width: 300px;
}


	.info-col-block {
		background-color: white;
		border-radius: 0 0 6px 6px;
		margin-bottom: 10px;
		color: grey;
	}

	.info-col-block li {
		list-style-type: none;
	}

	.info-col-block-header {
		background-color: #79009c;
		color: white;
		padding-left: 20px;
		padding-bottom: 5px;
		padding-top: 17px;
		border-radius: 6px 6px 0 0;

	}

		.info-col-block-header h3 {
			margin-top: 0;
		}

	.info-col-block-content {
		padding: 10px;
		padding-top: 20px;
	}

		.info-col-block-content ul {
			padding: 0;
		}

		.info-col-block-content li {
			padding: 5px 0px 5px 30px;
			color: grey;
		}

			.info-col-block-content li:hover {
				background-color: #f9e6ff;
			}

	.learning-info-block img {
		display: block;
		margin: 15px auto;
	}

	.learning-info-block ul {
		padding-left: 0;
	}



	.materials-info-block .info-col-block-content {
		padding: 10px 20px;
	}


.toc {
/*	background-color: #fff8b6;*/
	padding: 10px;
	position: sticky;
	top: 10px;
}

	.toc-title {
		font-weight: bold;
		color: brown;
		text-transform: uppercase;
		text-align:center;
	}

	.toc li {
		list-style-type: none;
		opacity: .8;
		cursor:pointer;
		transition: background-color .2s;
	}

		.toc li:hover {
			opacity: 1;
			background-color: lightgrey;
		}


		.toc .toc-heading {
			font-size: 1rem;
			margin-top: 10px;
		}

		.toc .toc-quiz {
			color:brown;
			font-weight:bold;
			font-size:.8rem;
		}

		.toc .toc-subheading, .toc .toc-quiz {
			padding-left: 20px;
			font-size:.8rem;
		}



/*****************************************************************************
*                              LANGUAGE PICKER                             *
****************************************************************************
*/

.language-switcher {
	background-color: #e9f4fbb8;
	border-radius:5px;
	box-shadow: 0 0 5px rgba(0,0,0,.2);
	padding:5px;
	text-align: center;
	margin-top:15px;
}



/*****************************************************************************
*                                   MODAL                                  *
*****************************************************************************/


.modal.fade .modal-dialog {
	transform: scale(0.1);
/*	top: 300px;*/
	opacity: 0;
	transition: all 0.3s;
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}




/*****************************************************************************
*                                 CAROUSEL                                   *
*****************************************************************************/


.block-carousel ul {
	list-style-type: none;
}

.block-carousel .carousel-caption {
	font-size: 14px;
}

.lSSlideOuter {
	margin-bottom: 20px;
}


.lSSlideWrapper {
	background-color: black;
	/*width: 100%;*/
}

.lightslider {
}

.lightslider-figure {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	margin-left: 0;

}
	
	.lightslider-figure img {
		width: 100%;
		height: auto;
	}


	.lightslider-figure figcaption {
		height: 50px;
		background-color: black;
		color: white;
		font-size: 14px;
		padding: 10px;
		line-height: 26px;
	}

/*@media (max-width: 745px) {

	.lightslider-figure {
		width: 100vw;
		height: calc(100vw * .3);
	}

	.lightslider-img {
		width: 100vw;
		height: auto;
	}*/

/*

OLD STYLES

.block-carousel ul {
	list-style-type: none;
}

.block-carousel .carousel-caption {
	font-size: 14px;
}

.lSSlideOuter {
	width: 745px;
	margin-bottom: 20px;
}


.lSSlideWrapper {
	background-color: black;
	width: 745px;
}

.lightslider {
	height: 450px;
}

.img-container {
	width: 100%;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;

}



	.img-container figcaption {
		width: 100%;
		height: 75px;
		background-color: black;
		color: white;
		font-size: 14px;
		padding: 10px;
	}

@media (max-width: 745px) {

	body {
		background-color: red;
	}

	.lightslider-img {
		width: 100vw;
		height: auto;
	}
}


/*****************************************************************************
*                                   RESOURCE                                 *
*****************************************************************************/

.block-resource {
	display: grid;
	justify-items: center;
	align-items: center;
}

	.block-resource button {
		background-color: white;
		font-weight: bold;
		font-size: 1.1em;
		border-radius: 23px;
		box-shadow: 0px 0px 7px grey;
	}

	.block-resource > * {
		grid-column: 1;
		grid-row: 1;
	}

	.block-resource > img {
		box-shadow: 0 0 10px lightgrey;
	}

		.block-resource button img {
			width:22px;
			vertical-align: bottom;
			margin-right: 5px;
		}


/*****************************************************************************
*                                   TABLE                                  *
*****************************************************************************/

.block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
	margin-top: 40px;
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	background-color: #faf7fd;
}

	.block-table caption {
		font-weight: bold;
		margin-bottom: 15px;
	}

	.block-table td, .block-table th {
		border-top: 1px solid #dee2e6;
		padding: 15px;
		text-align: left;
	}

		.block-table thead th {
			border-bottom: 2px solid #dee2e6;
		}



/*****************************************************************************
*                              WAGTAIL EMBEDS                                *
*****************************************************************************/

.block-video {
    border: 1px solid grey;
}

.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 1%;
    left: 1%;
    width: 98%;
    height: 98%;
}



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

@media(max-width: 960px){
	.module-number {
		position: initial;
		font-size: 85px;
	}

	.heading {
		font-size: 38px;
	}

		.heading span {
			left: -35px;
		}


	.quiz-block {
		padding: 8px;
	}
		.quiz-answers {
			padding: 0;
		}

	.quiz-form > ul {
		padding-left:0;
	} 
}

@media(max-width: 750px){

	h1 .module-number {
		margin-left: -25px;
	}

	/* This is already in pbl.css media query, but gets overwritten by the rule at top of this file */
   section {
        padding: 35px 10px;
    } 


    .heading span {
        position: initial;
    }

    .language-switcher {
	  	position: fixed;
		bottom:10px;
		right: 10px;
    }

    	.language-flag {
    		width:50px;
    		height:36px;
    	}


    .block-audio .audioplayer-time,
    .block-audio .audioplayer-volume {
    	display: none;
    }

    .block-audio .audioplayer-title {
    	top: 100px;
    	left: -40px;
    	color: black;
    }

    .block-audio {
    	margin-bottom: 70px;
    }

    h1 {
    	margin-bottom: -150px;
    }


    .block-resource > img {
    	width: 100%;
		height: auto;
    }

}