:root {
  --high-score-color: #0097fe;
	}

/* PRELOADING BACKGROUND IMAGES */
body:after{
   position: absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content: 
   	url( '../images/quiz/check-icon-green.svg' ) 
   	url( '../images/quiz/x-icon-red.svg' )
   ;
}


#high-score-wrapper{
	margin: 1.5em auto 2em auto;
	color: var( --high-score-color );
	outline: 3px solid var( --high-score-color );
	border-radius: .5em;
	text-align: center;
	font-weight: bold;
	width: 60%;
	display: block;
	}

#high-score-wrapper .header{
	background-color: var( --high-score-color );
	color: #fff;
	font-size: 1.15em;
	padding: .5em .25em;
	border-radius: .25em .25em 0 0;
	display: flex;
	justify-content: space-around;
	}
#high-score-wrapper .header .title{
	padding-top: .25em;
	}
#high-score-wrapper .header img {
	width: 1.5em;
	}
#high-score-wrapper .content{
	padding: 1em .5em;
	}
#high-score-wrapper #score{
	font-family: var(--special-font );
	font-size: 3em;
	}

#high-score-wrapper #score-name{ font-size: 1.5em; }
#high-score-wrapper #score-date{ color: #ccc; }

#quiz-menu #delete-high-score-wrapper button.red{
	background-color: #cb5454;
  color: #fff;
	}
#quiz-menu #delete-high-score-wrapper button.red:hover{
	background-color: #bb3f3f;
	}	


/* QUIZ QUESTIONS ----------------------------------- */

#game-content{
	padding-top: .5em;
	}
#card-wrapper{
	padding: 0 1em 3em 1em;
	background-color: #fff;
    box-shadow: 0 1px 6px 0 rgb(0 0 0 / 15%);
	}

#quiz .previous {
    padding: 0 0 .25em 0;
	}

/* Progress Feedback Wrapper */
#quiz #progress-wrapper{
	margin: 0 0 2.5em 0;
	padding: 1em .75em;
    background-color: #efefef;
    border-radius: 1em;
	}
#quiz #progress-accuracy{
	margin-top: .75em;
	}	
#quiz #progress-questions{
	display: flex;
	flex-wrap: wrap;
	grid-gap: .25em;
	align-items: center;
	}	
#quiz #progress-questions div {
	width: 2rem;
    height: 2rem;
	border-radius: 50%;
	background-color: #fff;
	color: #ccc;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 1.25em;
	padding: .15rem 0 0 0;
	}
#quiz #progress-questions .active{
	outline: 3px solid var( --asu-maroon );
	color: var( --asu-maroon );
	}
#quiz #progress-questions .wrong{
	background-image: url( '../images/quiz/x-icon-red.svg' );
	background-size: 50%;
	}
#quiz #progress-questions .correct{
	background-image: url( '../images/quiz/check-icon-green.svg' );
	background-size: 50%;
	}	

#quiz #submit-answer {
	font-weight: bold;
	margin-top: 1rem;
	} 
#quiz #next-button{
	display: block;
	margin: 2em 0 0 auto;
	}	
#quiz #next-button.hidden { display: none; }

/* QUIZ QUESTIONS RADIO BUTTONS ----------------------------------- */
#quiz #choice-wrapper{
    margin: 2rem 0;
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 1.75em .5em;
    align-items: start;
    }
input[type="radio"] {
    width: 1.25em;
    height: 1.25em;
    cursor: pointer;
    }
#quiz #choice-wrapper label{
	cursor: pointer;
	line-height: 1.25em;
	}    
#quiz #choice-wrapper.disable{
    pointer-events: none;
    }
#quiz #choice-wrapper.disable label, #quiz #choice-wrapper.disable input[type="radio"], #quiz #choice-wrapper.disable img{
    opacity: .35;
    }  
#quiz #choice-wrapper.disable input[type="radio"].selected,
#quiz #choice-wrapper.disable input[type="radio"].selected + label, 
#quiz #choice-wrapper.disable img.selected {
    opacity: 1;
    }    

/* For compare cells layout */
#quiz #choice-wrapper.compare-cells{ 
	grid-gap: 1.5em;
	grid-template-columns: repeat(2, 1fr); 
	}
#quiz #choice-wrapper.compare-cells > div { text-align: center; }
#quiz #choice-wrapper.compare-cells > div > * {
	display: block;
	margin: .5em auto;
	}	
#quiz #choice-wrapper img{
    padding: 1em;
    border: 3px solid #efefef;
    border-radius: 1em;
	cursor: pointer;
	}
#quiz #choice-wrapper img:hover {
 	border-color: #ccc;
 	}	
#quiz #choice-wrapper img.selected, #quiz #choice-wrapper img.selected:hover{	
	border-color: var(--link);
	}

/* MUTATION AND CANCER QUESTIONS ----------------------------------- */

#quiz #cell-selection-question-wrapper {
	display: grid;
	grid-template-columns: 3.5fr 7fr;
    grid-gap: 1em;
	align-items: center;
	}
#quiz #cell-selection-question-wrapper div:first-child{
	padding: 1em;
	border: 2px solid #d6d6d6;
	text-align: center;
	}
#quiz #cell-selection-question-wrapper img{ width: 100%; }

#quiz #cells-wrapper{
	margin: 2em 0 1em 0;
	position: relative;
	}
#quiz #cells-wrapper svg {
	position: absolute;
	top: 0;
	left: 0;
	}
#quiz #cells-wrapper > * {
	width: 100%;
	}
#quiz #hotspots-wrapper svg path {
	fill: transparent;
	cursor: pointer;
	}
#quiz #hotspots-wrapper svg path:hover {
	stroke: #c45d00;
	stroke-width: 5px;
	}

#quiz #hotspots-wrapper svg path.active{
	stroke: var( --asu-maroon );
	stroke-width: 5px;
	fill: transparent;
	}
#quiz #hotspots-wrapper svg path.active:hover{
	opacity: 1;
	}	

#quiz #cells-wrapper.disable { pointer-events: none; }	

#quiz #cells-wrapper.disable svg path{
	fill-opacity: .6;
	fill: #fff;
	}
#quiz #cells-wrapper.disable svg path.correct{ fill-opacity: 0; }	

#quiz #cell-selection-submit-answer{
    margin: 2em auto 0 auto;
	display: block;
	}
#quiz #cell-selection-submit-answer.hidden{ display: none; }	

/* FEEDBACK ----------------------------------  */
#quiz #feedback-wrapper{
	background-color: #efefef;
	padding: 1.5em;
	margin: 2em 0 0 0;
	border-radius: .5em;
	}

#quiz #feedback-wrapper.wrong { background-color: #ffddd6; }	
#quiz #feedback-wrapper.correct { background-color: #baf0e5; }


#quiz #cell-simulator{
	margin-top: 2em;
	}

/* SUMMARY SCREEN ---------------------------------------- */

.dotted-border-top{
	margin-top: 3em;
    border-top: dotted 2px #ccc;
	}

#quiz .tip{
    margin-top: 1em;
    background-color: #fff8b8;
    padding: 2em;
	}

#print-section input {
    display: block;
    width: 80%;
    font-size: 1.1em;
    padding: 0.2em 0.2em 0.1em 0.2em;
    margin: 0.5em 0;
	}	
#print-section input.hidden{ display: none; }	
#print-section .button-wrapper{
	padding-top: 1em;
	}

/* --------------------------------------------------- */

/* FEEDBACK ----------------------------------  */
#detailed-results-wrapper .answer-status{
	padding: .5em;
	border-radius: .5em;
	display: inline-block;
	margin: .5em 0;
	}

#detailed-results-wrapper .answer-status.wrong { 
	background-color: #ffddd6; 
	color: #990033;
	}	
#detailed-results-wrapper .answer-status.correct { background-color: #baf0e5; }	

#detailed-results-wrapper .question-answer-wrapper{ margin-bottom: 2.25em; }
#detailed-results-wrapper .question-answer-wrapper:last-of-type{ margin-bottom:0; }	
#detailed-results-wrapper .question-answer-wrapper ul{ margin: .25em 0 .75em 1em; }
#detailed-results-wrapper .question-answer-wrapper li{ padding: .1em 0;}