:root {

--qBgClr: white;
--ansBgClr: white;
--ansBdClr: aqua;
--yesBgClr: hsl(120,100%,90%);
--yesBdClr: hsl(120,100%,60%);
--notBdClr: hsl(0,0%,80%);
--hoverBgClr: #cdf;
--methodBgClr: #fffffa;
--methodBdClr: hsl(120,100%,60%);
--svgFilter: none;
--navBgClr: #fafae0;
}
:root[theme='dark'] {

--qBgClr: hsl(214, 20%, 15%);
--ansBgClr: hsl(214, 20%, 18%);
--ansBdClr: hsl(214, 30%, 55%);
--yesBgClr:  hsl(43,74%,30%);
--yesBdClr: hsl(43,74%,45%);
--notBdClr: hsl(0,0%,30%);
--methodBgClr: hsl(240, 30%, 12%); 
--methodBdClr: hsl(43,74%,45%);
--hoverBgClr: hsl(214, 80%, 20%);
--svgFilter: invert(100%);
--navBgClr: hsl(240, 45%, 20%);
}

@media all {

img { max-width: 100%; min-width:8px; height:auto; border: none; }
img[src*="latex"]{filter: var(--svgFilter);}
/* TODO: (low priority) put the filter into .latex once all latexs have the class assigned*/
.latex { margin: 0 2px 0 2px; margin-bottom: -1px;}

.symb {font-family: serif; font-size: 125%; font-weight: 600; line-height: 100%;}

.qam { width:760px; margin:auto;  }

.qa { border: none; overflow: hidden; background-color: var(--qBgClr); border-radius: 10px;  margin: 0 auto 5px auto;}
.qa .question { border: 2px solid #00CED1; background-color: var(--qBgClr); width: 97%; padding: 1%; 
	border-radius: 10px; min-height:30px; margin: 3px auto; min-height:60px; transition: background-color 1s linear;}
.qa .question p { font: normal 18px/24px "Times New Roman", serif; margin: 0px; }
.qa .answers { width: 100%; margin: 5px auto 0px auto; }
.qa .answers .answer { border: 2px solid var(--ansBdClr); border-radius: 10px; display: inline; float: left; width: 47%; width: calc(50% - 12px);
	margin: 4px; padding: 3px 0 0 0; text-align: left; background-color: var(--ansBgClr); min-height:40px; }
.qa .answers .answer .anum { font: normal 24px/32px Verdana sans-serif;	float: left; padding: 0 12px 3px 5px; color: var(--b3Clr) }
.qa .answers .answer .atext { float: left;  }
.qa .answers .answer .atext p { font: normal 18px/24px "Times New Roman", serif; margin: 1px; min-width:1px; }
.qa .answers :hover { background-color: var(--hoverBgClr); }

.qa .answers .yes { border: 2px solid var(--yesBdClr);	background-color: var(--yesBgClr); }
.qa .answers .not {	border: 2px solid var(--notBdClr); }

.qam .method { float: left; border: 2px solid var(--methodBdClr); border-radius: 10px; background-color: var(--methodBgClr); padding: 1%; width: 97%; margin-top: 20px; }
.qam .method p { margin: 0px; font: normal 18px/24px "Times New Roman", serif; }

/* Styles to make contenteditable div look like a textarea */
.edit [contenteditable="true"] {
	border: 1px solid #cccccc;
	padding: 8px;
	border-radius: 8px;
	background-color: #ffffff;
	min-height: 30px; /* Adjust as necessary */
	font-size: 15px;
}

/* Add focused styles */
.edit [contenteditable="true"]:focus {
	outline: none;
	border-color: #66afe9;
	box-shadow: 0 0 5px rgba(102, 175, 233, .6);
}


#qnav { background-color: var(--navBgClr); border: 3px solid var(--navBgClr); color: var(--b3Clr);}
#overview, #qnext, #resultsBtn {background-color:var(--navBgClr); border-radius:5px;}

.answerYes { color: Green; font: 14pt Verdana Geneva Arial Helvetica sans-serif; text-align: center;  margin: 15px 0 15px 0; }
.answerNo {	color: Red; font: 14pt Verdana Geneva Arial Helvetica sans-serif; text-align: center; margin: 15px 0 15px 0; }
.answerDone {	color: Blue; font: 13pt Verdana Geneva Arial Helvetica sans-serif; text-align: center;  margin: 15px 0 15px 0; }

a.fancylink  { text-decoration: underline; cursor: pointer;}
a.fancylink:hover  { background-color: var(--b2Clr); }

.courseSubjTitle { font-size: 21px;  padding: 22px 5px 5px 5px; color: var(--a4Clr); }
.courseSubj { padding: 0px; margin: 5px 0 0 20px;  border: 1px solid var(--a2Clr); border-radius: 15px;  overflow: hidden; }
.courseYes { background: var(--a0Clr) url(images/yes.svg) no-repeat 7px center;       text-indent: 5px; padding: 5px 0 3px 30px; margin: 0;  }
.courseNo  { background: var(--bgClr) url(images/box-blank.svg) no-repeat 7px center; text-indent: 5px; padding: 5px 0 3px 30px; margin: 0;  }


.skillSubjTitle { font-size: 21px;  padding: 22px 5px 5px 5px; color: var(--a4Clr) }
.skillSubj { padding: 0px 0px 15px 8px; text-indent: -10px; margin-left: 18px; }
.skillYes { background: var(--a0Clr) url(images/yes.svg) no-repeat 7px center;        text-indent: 0; padding: 7px 0 3px 30px; margin: 0;  }
.skillNo  { background: var(--bgClr) url(images/box-blank.svg) no-repeat 7px center;  text-indent: 0; padding: 7px 0 3px 30px; margin: 0;  }

legend { color: #993300; font: 200 18px "Comic Sans MS", Verdana, Georgia, helvetica, sans-serif; padding-left: 10px; padding-right: 10px; }
label {	color: #993300; }

#ratingField { margin: 3px;	border: 2px solid Aqua; background: white; border-top: none; display: block; }
#ratingField table { background: #FFFAFA;	font-weight: bold; width: 100%; }
#feedbackField { margin: 3px; border: 2px solid Aqua; background: white; border-top: none; display: block; }
#feedbackField table { background: #FFFAFA; font-weight: bold; width: 100%; }
#feedback { width: 100%; height: 70px; }
#sendButton:hover { border: 1px solid black; }
#nextQuestion { float: right; }
#helpLink { float: center; }
#overview { float: left; }
#showFeedbackField { display: block; background: white; text-align: center; }

.blockform { width: 96%; margin-left: auto; margin-right: auto; }

div.createby { margin: 8px;  clear: both; }
div.preview { width: 760px; margin-left: auto; margin-right: auto; }

.exerciseList { position: absolute; visibility: hidden;  border: 1px solid silver;	width: 250px; }
.exerciseList table { width: 100%; }
.exerciseList td { font-size: 10px; text-align: left;  padding: 1px; }
.exerciseList tr:hover { background: silver; cursor: pointer; }

.listIcon { display: inline; float: right; }

.caption { text-align: left;  background: white; padding: 2px; }
.caption a { float: right; font-weight: bold; text-decoration: none;  color: red; }

.exercises { background: #eee; }

.qEditForm { width: 780px; margin-left: auto; margin-right: auto; }
.qEditForm textarea { width: 100%; background: #eee; }

.clickbtn { display: inline-block; position: relative; text-align: center; margin: 2px; text-decoration: none;
	font: 16px/25px Arial, sans-serif; color: #19667d; border: 1px solid #88aaff; border-radius: 10px; cursor: pointer;
	background: linear-gradient(to top right, rgba(170,190,255,1) 0%, rgba(255,255,255,1) 100%);
}
.clickbtn:hover { background: linear-gradient(to top, rgba(255,255,0,1) 0%, rgba(255,255,255,1) 100%); }




@media (max-width: 800px) {
	.qam { width: 100%; }
}