

#quiz-progress-bar {
	width: 100%;
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	background: #9fd8ea;


}

#quiz-panel-controls {
	flex-grow: 1;
}

.quiz-progress-bar {
	height: 100%;
	margin: auto;
	text-align: center;
	border: 1px solid white;
	flex-grow: 1;


}

.quiz-progress-bar-answered {
	height: 100%;
	margin: auto;
	text-align: center;
	border: 1px solid white;
	flex-grow: 1;
	background: #73e073;


}

#quiz-start {
	height: 100%;

}

#quiz-next {
	/*height: 100%;*/
	height: 60%;
	flex-grow: 1;
	
}

.quizNextFaded {
	opacity: 0.5;
}

#quiz-prev {
	height: 100%;
	
}

#quiz-submit {
	height: 100%;
	display: none;
	
}



.quiz-name {
	height: 10%;
	text-align: center;
	margin-bottom: 0px;

}

.quiz-text {
	height: 80%;
	display: flex;
	flex-direction: row;

}

.answer {
	padding-left: 10%;

}

.quizWindow {
	height: 500px !important;
	border-style: solid;
	border-width: 4px;
}
.quizWindow form{
	height: 100% !important;

}

#quiz-score {

}

#progress-section {
	width: 10%;
}

#content-section {
	width: 80%;
}

#progress-vertical {
	width: 50%;
	background-color: #1f567d;
	height: 0%;

}

.progress-background {
	background: #1f567d;
}

.scroll-auto {
	overflow-y: auto;
}

.matched-answer-text {
	margin-left: 30%;
	padding-left: 0% !important;
}

.matched-answer {
	padding-left: 0% !important;

}


@keyframes btn-shine {
	10% {
		opacity: 1;
		top:-30px;
		left:-30px;
		transition-property: left, top, opacity;
		transition-delay: 0.7s, 0.7s, 0.15s;
		transition-timing-function: ease;

	}

	100% {
		opacity: 0;
		top:-30px;
		left:-30px;
		transition-property: left, top, opacity;

	}

}

#next-progress-bar {
	height: 40%;
	width: 0%;
	background-color: #1f567d;
	/*background: linear-gradient(90deg, #1f567d 50%, white 50%)*/

}

label {
	display: inline !important;
}

.answer-area {
	margin-bottom: 0.5em;
}

.next-progress-section {
	width: 100% !important;
	flex-grow: 1;
	height: 100%;
	background: #d7e2f3;
	/*background: linear-gradient(90deg, #1f567d 50%, white 50%)*/

}

.correct-answer {
	background: lightgreen;
}

.incorrect-answer {
	background: red;
}

.quiz-form {
	display: flex;
	flex-direction: column;
}

.question-text {
	margin-top:5%;
	height: 45%;
	visibility: hidden;
}

.answers {
	/*height: 35%;*/
	visibility: hidden;
}

.quizButtons {
	height: 10%;
}

.quizProgress {
	height: 5%;
	text-align: center;
	width: 90%;
}

#quizStartButton {
	width: 100%;
	height: 100%;
	border-style: solid;
	border-width: 2px;
	border-color: lightblue;
	border-radius: 0;


}