/**
*1.0 - General
*
*General, global styling for all quiz blocks
**/

.quiz-is-incomplete {
	
	opacity: 0.7 !important; 
	pointer-events: none !important; 
	
}

.plume-quiz-block {
	
	margin: 3rem 0;
	
}
.inner-quiz-card {
	
	margin: 1.5rem;
	
}
.plume-quiz {
	
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
	margin-top: 1.5rem;
	
}
.plume-radio-quiz li input:hover {
	
	cursor: pointer;
	
}

.quiz-submit-container {
	
	border-top: 1px solid rgba(0,0,0,0.1);
	padding-top: 1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	margin-top: 2rem;
	
}

.quiz-submit {
	
	background-color: #019e7c;
	background-image: -webkit-gradient(linear,left top,right top,from(#019e7c),to(#66c6e3));
	background-image: linear-gradient(to right,#019e7c 0,#019e7c 100%);
	background-repeat: repeat-x;
	color: #fff;
	border: 0px solid #fff;
	padding: 1rem 1.5rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15px;
	border-radius: 6px;
	
}

.quiz-header-title {
	
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5em;
	margin-bottom: 1rem;
	
}

.plume-quiz-message {
	
	padding: 1rem 1.5rem; 
	background: #e3e3e3; 
	border-radius: 6px; 
	margin-top: 1.5rem; 
	
}

.plume-inline-quiz-correct {
	
	background: #25C66A; 
	color: #fff; 
	
}

.passed-quiz .plume-quiz {
	
	pointer-events: none; 
	opacity: 0.7;
	
}

.plume-inline-quiz-incorrect {
	
	background: #bf2c2c; 
	color: #fff; 
	
}

.passed-quiz .plume-inline-quiz-correct {
	
	display: block !important;  
	
}

.passed-quiz .plume-inline-quiz-incorrect {
	
	display: none; 
	
}

.failed-quiz .plume-inline-quiz-incorrect {
	
	display: block; 
	
}

.plume-quiz-block {
	
	transition: 0.3s
	
}

.plume-fadeout {
	
	opacity: 0.7; 
	transition: 0.3s; 
	
}

.passed-quiz .quiz-submit-container { 

	display: none; 

}


/*
*1.1 - Single & multiple choice styling 
*
*Controls single/multiple type questions
*/

.plume-radio-quiz li label {
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border: 2px solid #e2e7ed;
	border-radius: 6px;
	padding: 1em;
	width: 100%;
	cursor: pointer;
	border-color: #dee2e6;
	position: relative;
	padding-left: 2.5rem;
	
}

.plume-radio-quiz li input[type="radio"] {
	
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	opacity: 0;
	
}

.plume-radio-quiz li label:before {
	
	content: '';
	display: inline-block;
	position: absolute;
	left: 1rem;
	height: 1rem;
	width: 1rem;
	background-color: #fff;
	border-radius: 50%;
	border: 2px solid #019e7c;
	
}

.plume-radio-quiz li label.is-selected {
	
	background-color: #019e7c;
	color: #fff;
	border-color: #019e7c;
	
}

.plume-radio-quiz li label.is-selected:before {
	
	border-color: #fff;
	background-color: #019e7c;
	
}

.plume-radio-quiz li label.is-selected:after {
	
	content: '';
	display: inline-block;
	position: absolute;
	left: 1rem;
	height: .5rem;
	width: .5rem;
	margin: 0 .25rem;
	background-color: #fff;
	border-radius: 50%;
	top: 50%;
    margin-top: -.25rem;
}

.plume-inline-quiz-correct {
	
	display: none;
	
}

.plume-inline-quiz-incorrect {
	
	display: none;
	
}

/*
*1.1.1 - Multiple choice styling 
*
*Controls multiple type question specific styles
*/

.plume-radio-quiz li input[type="checkbox"] {
	
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	opacity: 0;
	
} 

.plume-radio-quiz li .quiz-checkbox-label:before {
	
	margin-top: -1px;	
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 5px;	
	
} 

.plume-radio-quiz li .quiz-checkbox-label.is-selected:after {
	
	background: url(../img/tick-white.svg) center no-repeat;
    height: .67rem;
    width: .67rem;
    margin: -0.06rem .2rem;
    border-radius: 0;
    background-size: contain;
	top: 50%;
    margin-top: -.34rem;
}

/*
*1.2 - Free text styling 
*
*Controls free text type questions
*/

.plume-free-quiz input[type="text"] {

    width: 100%;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-right: 0;
    outline: 0;
	max-width: 550px; 
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	
}

.plume-free-quiz input[type="text"]:focus {
	
	border: 2px solid #019e7c!important;
	
}


/*
* 1.3 - Draggable quiz item styling 
*
* Controls draggable styles 
*/

.plume-draggable-question-item {
	
	border: 2px solid #e2e7ed;
    border-radius: 6px;
    background: 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1em;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
	cursor: move; 
	margin-bottom: 1rem; 
	background: #fff; 
	
}

.plume-draggable-question-item:before {
	
	content: url(../img/drag-indicator.svg);	
	margin-right: 1rem; 
	margin-bottom: -0.5px;
	
}

/*
* 1.4 - Draggable quiz item styling 
*
* Controls draggable styles 
*/

.plume-blanks-quiz {
	
	margin-top: 2rem; 
	margin-bottom: 2rem; 
	
}

.fill-in-blanks {
	
	margin: 0px 4px; 
	border: 0px; 
	background: #e7f3fb;
	border-radius: 0;
	border-bottom: 2px solid #019e7c;
	padding: .5rem;
	
}

/*
* 1.5 - Matrix sorter item styling 
* 
* Controls Matrix Sort quizzes 
*/

.plume-matrix-quiz {
	
	max-width: 100%; 
	margin-top: 0rem; 
	
}

.plume-matrix-answers {
	
	min-width: 120px; 
	min-height: 2.5rem; 
	list-style: none; 
	padding-left: 0px; 
	padding: 0px 0px; 
	border: 0px solid #e3e3e3;
	border-radius: 5px; 
	
}

.matrix-sort-top-column {
	
	margin-top: 1.5rem;
	
	
}

.plume-matrix-criterions {
	
	list-style: none; 
	padding-left: 0px; 
	margin-left: 0px; 
	
}

.single-matrix-criterion { 

	list-style: none; 
	display: flex; 
	width: 100%; 
	margin-bottom: 8px; 
	align-items: stretch;
	justify-content: center;	
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	
}

.single-matrix-answer {
	
	color: #fff;
	background: #019e7c;
	display: inline-flex; 
	align-items: center; 
	padding: .5em 1em; 
	border-radius: 5px; 
	margin-right: 8px; 
	margin-bottom: 12px;
	font-size: 16px; 
	cursor: move;
	width: auto !important;
	letter-spacing: 0.02rem;
	
}

.criterion-title { 

	align-items: center;
	width: 20%; 
	display: inline-flex; 
	padding: 12px 15px;
	
}

.criterion-space {
	
	width: 80%; 
	padding: 10px; 
	min-height: 60px; 
	background: transparent;
	border-left: 1px solid #e3e3e3; 
	display: inline-flex;  
	margin-bottom: 0px; 
	
}

.criterion-space .single-matrix-answer {
    
    margin-bottom: 0px; 

}

.single-matrix-criterion.longer {
	
	display: block; 
	
}

.longer .criterion-title {
    
    width: 100%;
	display: block;
    
}

.medium .criterion-title {
    
    width: 58%;
    
}

.medium .criterion-space {
    
    width: 42%;
    
}

.longer .criterion-space {
    
    width: 100%;
    border-left: 0px solid #fff;
    border-top: 1px solid #e3e3e3;
	display: block; 

}


.matrix-placeholder { 

	background: #019e7c; 
	opacity: 0.1; 
	border-radius: 5px; 
	width: 100px; 
	height: 100%; 
	display: inline-flex;  
	align-items: center;
	
}

.criterion-space .matrix-placeholder {
 
     min-height: 40px;   
    
}

.longer .criterion-space .matrix-placeholder {
    
    min-height: 40px;
    height: 100%;
    width: 100%;
    margin: 0px 0px -8px 0px !Important;
    padding: 0px 0px 0px 0px !Important;
    
}

.passed-quiz .plume-matrix-answers { 

	display: none; 

}

/**
* 1.6 - Tips
**/

.passed-quiz .plume-tip-button {
	
	display: none !important; 
	
}

.plume-tip-button {
	
	width: 28px; 
	height: 28px; 
	background-color: #222; 
	position: absolute; 
	right: 1.5rem; 
	top: 1.5rem; 
	border-radius: 100%; 
	background: url(../img/help.svg) center no-repeat; 
	background-size: 28px; 
	
}

.plume-tip-button:hover {
	
	opacity: 0.7; 
	cursor: pointer; 
	transition: 0.5s; 
	
}