#scioutt{padding:5px;border-top:1px solid #262626;border-left:1px solid #262626;border-right:2px outset #262626;border-bottom:2px outset #262626;background: #eeeeee;font-family:arial,helvetica,sans-serif;}#sciouttPut{font-size:18px;padding:3px;margin:2px;cursor:text;text-align:right;background-color:#B8C6A3;border:1px solid #87996b;border-radius: 3px;color:#000;}.scifunc{display: inline-block;display: table-cell;vertical-align: middle;text-align:center;width:50px;height:25px;margin:1px;border:1px solid #262626;border-radius: 3px;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#185290;background-color:#C8D8E8;}.scifunc:active {background-color:#013f7d;color:#ffffff;}.scinm{display: inline-block;display: table-cell;vertical-align: middle;padding: 5px 0px;text-align:center;width:50px;height:30px;margin:3px;border:1px solid #262626;border-radius: 3px;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#FFF;background-color:lightgrey;}.scinm:active {background-color:#aaaaaa;color:#000000;}.sciop{display: inline-block;display: table-cell;vertical-align: middle;padding: 5px 0px;text-align:center;width:50px;height:30px;margin:1px;border:1px solid #262626;border-radius: 3px;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#262626;background-color:#ccc;}.sciop:active {background-color:#000000;color:#ffffff;}.scird{display: inline-block;display: table-cell;vertical-align: middle;text-align:center;height:30px;margin:1px;border:1px solid #eeeeee;border-radius: 3px;font-family:arial,helvetica,sans-serif;font-size:13px;color:#262626;padding:2px;}.scieq{display: inline-block;display: table-cell;vertical-align: middle;padding: 5px 0px;text-align:center;width:50px;height:30px;margin:1px;border:1px solid #262626;border-radius: 3px;font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:bold;color:#F00;background-color:#DCADB0;}.scieq:active {background-color:#ff0000;color:#ffffff;}#calfootnote {font-family:arial,helvetica,sans-serif;font-size:12px;text-align:right;}
  body {
	/* Set "my-sec-counter" to 0 */
	counter-reset: my-sec-counter;
  }
 .quizBody {
   border: solid 2px black;
   padding: 10px;
   border-radius: 5px;
   width: 100%;
 }
 h1 {
   color:#0066cc;
   font-weight: bold;
 }
.question-title-container {
	display: flex;
	justify-content: space-between;
	gap:10px;
	align-items: center;
	
}
.section_title {
  display: flex;
  justify-content:space-between;
  color: #0066cc;
  font-weight: bold;
  position: relative;
  padding-left: 1em;
  text-indent: -1em;
  
}


/* #questionTitle::before {
   Increment "my-sec-counter" by 1 
   counter-increment: my-sec-counter;
   content: counter(my-sec-counter) ". ";
 }*/
 #buttonLayer {
	 text-align: center;
	 display: none;
	 /*width: 98%;*/
	 text-align: center;
	 overflow: hidden;    /* Hide any overflowing content */
     
	 /*margin-right: 10px;*/
	 position: sticky !important;
	 bottom: 0 !important;
	 z-index: 50 !important;
	 background: var(--q-panel, #fff);
	 padding: 10px 0;
   border-top: 2px solid grey;
   margin-top: 30px;
   border-radius: 15px;
	 /*box-shadow: 0 -2px 10px rgba(0,0,0,0.10);*/

 }
 #buttonLayer input {
	 background-color: green;
	 color: white;
	 font-size: 20px;
	 border: 1px solid green;
	 padding: 10px;
	 border-radius: 5px;
 }
 #navigationLayer {
	 display: flex;
	 flex-direction: column;
	 justify-content: space-between;
	 align-items: center;
	 margin-top: 20px;
	 text-align: center;
	 margin-right: 10px;
	 text-align: right;

 }
 #navigationContainer {
	  width: auto;
	  flex-shrink: 0;
	  flex-grow: 0;
	  gap: 8px;

 }
 .navigationButton {
	background-color: green;
	width: auto;
	color: white;
	border-style:none;
	font-size: 14px;
	padding: 10px;
	font-weight: bold;
	border-radius: 10px;
	letter-spacing: 0.05em; /* increase space between characters */

	
 }
 .navigationButton:hover {
	 background-color: #2e2e2e; 
	 color:  #f0f0f0;
 }
 .navigationButton.disabled-button {
	background-color: lightgrey;
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
 }
 .questionsSection {
   display: none;
   /*width: 100%;*/
   margin:10px;
   

 }
.step1Meta {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
 }
.step1Meta div {
    margin-bottom: 10px;
}

.metaLabel {
    font-weight: bold;
    color: #333;
    display: inline-block;
    min-width: 120px; /* Ensure consistent alignment */
}

.metaValue {
    font-weight: normal;
    color: #666;
    display: inline-block;
}

/*#statsView {
    display: inline-block;
    font-weight: bold;
}

#quizTime {
    font-weight: normal;
    color: #666;
}*/
#step1LowerSection {
   width: 100%;
   text-align: end;
}
.questionStyle {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /*width: 97%;*/
  max-width: 100%;     /* Prevent growing beyond parent */
  overflow: hidden;    /* Hide any overflowing content */
  box-sizing: border-box; /* Include padding/border in width */
  display: none;       /* Keep if it's meant to be hidden initially */
  position: relative;  /* containing block for .gamified-feedback overlay */
}

/* Fullscreen (Game Mode auto-enters this, or the toolbar's manual Full
   Screen toggle): let the question card size itself to its content and
   the available width, instead of the fixed 350px height / whatever
   width constraint applies in normal flow. !important is required -
   startQuizJourney() sets height/min-height/max-height as inline
   styles via jQuery .css(), and a stylesheet rule needs !important to
   beat a plain (non-important) inline style. Vendor-prefixed :fullscreen
   variants included for the same browsers toggleFullScreen() already
   accounts for. */
:fullscreen .questionStyle,
:-webkit-full-screen .questionStyle,
:-moz-full-screen .questionStyle,
:-ms-fullscreen .questionStyle {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.q_separator {
  height: 5px;
  background-color: #ccc; /* better contrast */
  border: none;
  width: 90%; /* using percentage width with margins */
  margin: 30px auto; /* centers the separator with vertical spacing */
  text-align: left;
}

#tracker {
display: none;
margin-bottom:10px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding-top: 4px;
}
.tracker-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
#currentQuestion {
color: #0066cc;
}
.trackItem {
display: inline-block;
margin: 5px;
background-color: #e6f3ff;
padding: 10px;
border-radius: 5px;
}
#clear_restart {
 display: none;
}
.clearRestart{
display: inline-block;
margin: 5px;
padding: 5px;
font-weight: bold;
background-color: transparent;
color: black;
border-style: noborder;
}
#startQuiz {
  background-color:green;
  color:white;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 0px solid green;
  font-size: 14px;
  font-weight: bold;
}

/*#step1MiddleSection{
 #border: dashed 2px black;
 border-radius: 5px;
 margin-top: 5px;
 margin-bottom: 5px;
 padding: 10px;
}*/

/* The stats part */
#step1MiddleSectionRightPart {
    flex-grow: 1;
}
/* Style for font icon wrapper if used */
.font-icon-wrapper {
    /*border: 2px solid #ddd;*/
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdfdfd;
	font-size:100px !important;
}

#step1MiddleSection {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Change from center to stretch */
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}
#quizBodyFlow {
margin-bottom: 10px;
}
#questionForm {
width: 100%;
}
.questionTitleClass {
   /*font-weight: bold;
   display:inline;
   width: 100%;*/
   display: inline;
   justify-content:space-between;
   
   font-weight: bold;
   position: relative;
   /*padding-left: 1em;*/
   /*text-indent: 1.1em;*/


}
.questionTitleClass::before {
   content: attr(data-before); /* value that that refers to CSS 'content' */
   
}
.resetAnswer {
 display: inline;
 margin: 5px;
 font-family: 'Aref Ruqaa', serif;
 font-weight: bold;
 cursor: pointer;
 background-color: transparent;
 border-color: transparent;
}
#questionsTemplateOptions {
 display: inline-block;
 
 margin: 5px;
}
#questionsTemplateOptionsStepsDiv {
 display: block;
 margin: 5px;
}
#questionsTemplateOptionsListDiv{
 display: block;
 margin: 5px;
}

#questionsTemplateMode {
 display: inline-block;
 margin: 5px;
}

#questionsTemplateModeExamSec {
 display: block;
 margin: 5px;
}
#questionsTemplateModePracticeSec {
 display: block;
 margin: 5px;
}

.question-points {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  color: grey;                 /* matching blue text */
  padding: 4px 8px;
  border-radius: 12px;
  font-style: italic;
  font-size: 11px;
  gap: 6px;
  margin-top: 5px;
  width: fit-content;
}


.dragDropInplaceLocked {     
  padding: 5px;
  display: inline;
  width: 100px;
  max-width: 100px;
  height: 50px;
  margin-top: 10px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  border: 2px solid #cc99ff;
  border-radius: 5px;
  color: white;
  background-color: #cc99ff;
}
.correct-answer-class {
  display: none;              /* hidden initially */
  width: 97%;                /* span full width */
  border: 2px dotted;
  color: black;
  padding: 10px;
  text-align: left;
  margin: 5px;
  border-radius: 5px;
  flex-grow: 1;               /* if needed */
  box-sizing: border-box;    /* prevents layout overflow */
}  
.show-answer-class {
	display: block;
	color: white;
	background-color: green;
	/*margin: 5px;*/
	margin-top:10px;
	padding: 10px;
	border: none;
	border-radius: 10px;
	letter-spacing: 0.05em; /* increase space between characters */

	
}

.hide-answer-class {
	display: none;
	color: white;
	background-color: green;
	/*margin: 5px;*/
	margin-top:10px;
	padding: 10px;
	border: none;
	border-radius: 10px;
	letter-spacing: 0.05em; /* increase space between characters */
}

.check-answer-class {
	display: block;
	color: white;
	background-color: #2563eb;
	margin-top:10px;
	padding: 10px;
	border: none;
	border-radius: 10px;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.fieldsetLegendStyle {
 font-size: 18px;
 font-weight: bold;
}
#allOptionsSec {
 margin-left: 10px;
 width: 100%;
}
#statsViewDisplay {
  /*position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 420px;
  z-index: 200;  /* stats modal */
  box-sizing: border-box;*/
}

#statsViewDisplay .modal-content {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
}





.statsViewDisplayItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  font-size: 1rem;
  border-bottom: 1px solid #eee;
}

.statsViewDisplayItem:last-child {
  border-bottom: none;
}

.statsViewDisplayItem > div {
  flex: 1;
  padding: 0 0.5rem;
  word-break: break-word;
}

#statsViewDisplay button {
  margin-top: 1.5rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#statsViewDisplay button:hover {
  background-color: #388e3c;
}





.DragDropInplaceLockEditField {
display: inline;
padding:5px;
margin:2px;
background-color: #e6f3ff;
border:0;
width:auto;
height:auto;
border-radius: 5px;

}
.DragDropInplaceLockEditFieldDropped {
display: inline-block;
clear:both;
padding:0px;
margin:0px;
border:0;
width:auto;
height:auto;
border-radiuus: 5px;

}
.DragDropInplaceLockEditAnswerOption {
border-style:solid; 
border-radius:5px;
display:inline-block; 
padding:5px;
margin:5px; 
cursor: pointer;
}
.DragDropInplaceLockEditAnswerOptionDragged {
border-style:solid; 
border-radius:5px;
display:inline-block; 
padding:5px;
margin:2px; 
width:max-content;
height:max-content;
cursor: pointer;
pointer-events:none;
}
.cleanDragDropLockEditFieldClass {
vertical-align:top;
display:none;
}
.cleanDragDropLockEditFieldClassVisible {
vertical-align:top;
display:inline-block;

}
.DragDropInplaceLockEditFieldContainer{
width:100%;
display:inline;
clear:both;
margin-right:2px;
}
.dragdrop {
  background:red;
  margin:15px;
  width:100px;

}
.ui-state-hover {
background:lightyellow;   
}
.ui-state-active {
background:lightgray   
}
.DragDropInplaceLockEditFieldSeqClass {
  pointer-events:none;
}
#calculatorView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: none;
  z-index: 200;  /* modal overlay level */
  overflow: hidden;
}

#calculatorView.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}


.toolsClass {
	display: none;
	border-bottom: 1px solid lightgrey;
	padding: -10px;
}

.hide {
	display:none !important;

}
.fullscreen-margin {
  margin-top: 20px; /* or whatever value you want */
}
#quizIconImage {
	display: flex;[cite: 2]
    align-items: center;
    justify-content: center;
    margin: 0 !important;[cite: 2]
}
.spinner {
	display: none;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: #22a6b3;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
	//margin-top: 10px;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}	

.quiz-modal {
  display: none;
  position: fixed;
  z-index: 200;  /* modal overlay: above sticky header */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  padding-top: 60px;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 400px;
  border-radius: 5px;
}
.modal-header {
  padding: 10px;
  //background-color: #007bff;
  color: white;
  border-radius: 5px 5px 0 0;
}
.quiz_options_section_label {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.quiz-modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  //background-color: #007bff;
  color: white;
  border-radius: 5px 5px 0 0;
}

.quiz-modal-footer button {
  background: green;
  color: white;

}
.quiz-modal-footer button:hover {
  background-color: #5a6268;
}

.modal-body select {
  width: 100%;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.close_modal {
   position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  background-color: #888;
  color: #fff;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  z-index: 202;  /* close button: above modal content */
  pointer-events: auto;
  
  
}
.close_modal:hover {
  background-color: #555;
}
#quiz_formatSelect {
  font-size:12px;
  height: auto;
}
.btn {
	width: 200px;
	text-align:center;
//  background: green;
//  color: white;
}
/* Quiz tool bar - wraps as whole buttons (never mid-button) so long
   additional-tool titles never look different from the built-in ones.
   See .quiz_actions below for the per-button normalization. */
.quiz_toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;   /* layoutQuizToolbar() (JS) manages overflow into "More" instead of CSS wrapping */
  align-items: stretch;
  gap: 10px;
  /* NOT overflow:hidden here - layoutQuizToolbar() (JS) already hides
     (display:none) whatever doesn't fit, so this container never
     actually needs to clip anything once JS has run; overflow:hidden
     was clipping #moreToolsMenu itself, which needs to visually extend
     BELOW this box (that's the whole point of a dropdown) - hence the
     "3 dots menu mostly hidden" bug. */
  padding: 8px 4px 4px 4px;
}
/* The toolbar and #tracker (timer/score bar/question counter) stick
   together as ONE unit while scrolling, everything from here down to
   (but not including) the <hr> that follows. Consolidated onto a
   single wrapper rather than each piece being independently sticky
   with a JS-measured offset between them - simpler and there's only
   one thing that can go wrong instead of two. !important because this
   codebase's decorative theme files (candy/jungle/space/balloons.css)
   have already proven to silently override position/z-index on direct
   children of .quizBody via same-specificity-later-in-cascade rules. */
#quizStickyHeader {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;  /* sticky header: above content, below modals */
  background: var(--q-panel, #fff);
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 15px;
}
.quiz_actions {
  cursor:pointer;
  display:flex;
  flex-direction:row;
  align-items: center;
  vertical-align:middle;
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.035);
  transition: background 0.15s ease;
}
.quiz_actions:hover {
  background: rgba(0,0,0,0.07);
}
/* Every button's own inner div carries its own ad-hoc inline style
   (some set display:flex+gap, some don't set anything beyond
   vertical-align) - normalizing here with !important means the visual
   result is identical regardless of which inline style a given button
   happens to have, rather than depending on it. */
.quiz_actions > div,
.more-tools-menu-item > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap;
}
.quiz_action_icon , .quiz_action_text {
   vertical-align: middle;
}
.quiz_action_text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
/* Notes content styled as a quote note */
.notes-content {
    flex: 1;
    background-color: #f9f9f9;
    padding: 15px;
    border-left: 3px solid #ccc;
    border-radius: 5px;
    font-style: italic;
    color: #555;
    background: #f4f4f9;
    box-shadow: inset 5px 0 0 0 #ccc;
}
 
.optionsSec {
	display: flex;
	flex-direction: row;
	justify-content: left;
	vertical-align: top;
	gap: 15px;
	flex-wrap: nowrap;
}
.option-card {
    display: flex;
    align-items: left;
    padding: 10px 10px;
    margin-bottom: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
	flex-wrap: nowrap;
	width: 100%;

}

.option-card:hover {
    background-color: #f0f0f0;
}

.option-card input[type="radio"]:checked + label {
    position: relative;
    padding-left: 20px; /* Adjust to make space for the arrow */
    width: 100%;
	color:
}

.option-card input[type="radio"]:checked + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;  /* Adjust the height of the arrow */
    border-bottom: 12px solid transparent; /* Adjust the height of the arrow */
    border-left: 7px solid #007BFF;      /* The base of the arrow pointing to the right */
}



.option-card input[type="radio"]:not(:checked) + label {
	position: relative;
    padding-left: 20px; /* Adjust to make space for the arrow */
    width: 100%;
	color: lightgrey;
}
.option-card input[type="radio"]:not(:checked) + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-top: 12px solid transparent;  /* Adjust the height of the arrow */
    border-bottom: 12px solid transparent; /* Adjust the height of the arrow */
    border-left: 7px solid transparent;  /* Transparent base of the arrow */
}



.optionsSec fieldset {
    padding: 15px;
    margin-bottom: 20px;
	width: auto;
	border: noborder;
	width: 200px;
}

.fieldsetLegendStyle {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}
.toast {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 300;  /* toast: above modals */
    display: flex;
    align-items: center;
}

.toast::before {
    content: '\2716'; /* Unicode for 'X' symbol */
    background-color: white;
    color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.add-question-notes,  .question-flag{
	display:flex;
	flex-direction: row;
	justify-items: left;
	width: auto;
	gap: 8px;
	vertical-align: middle;
	cursor: pointer;
	background-color: #f9f9f9;
	padding: 8px;
	border-radius: 5px;
	
}
.question-flag.flagged {
  background-color: purple;
  color: white;
}
.question-annex {
    align-items: center;
	display: flex;
	flex-direction: column;
	justify-content:space-between;
	margin-top: 15px;
	/*background-color: #f9f9f9;*/
    padding: 0px;
	width: 100%;
    /*border-radius: 8px;*/
	/*border-top: 1px solid black;*/
    font-family: 'Arial', sans-serif; 
	gap: 20px;
	align-items: stretch;   /* ensures children can stretch full width */

	
}
.question-annex-action-section {
	display:flex;
	flex-direction: row;
	gap: 10px;
}
.whiteboard-area {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 20px;
    top: 20px;
    align-items: center;
    width: 90%;
    height: 90%;
    gap: 0px;
    background-color: white;
    z-index: 201;  /* whiteboard content above modal backdrop */
    padding-top: 20px;
	border-radius: 5px;
}

.whiteboard-area-inner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px; /* Remove gap to avoid white spaces */
    background-color: white;
    width: 90%;
    height: 100%;
    padding-top: 0px; /* Remove padding */
	margin-left: 20px;
}

.whiteboard-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* Center align toolbar content */
    background-color: transparent;
    margin-right: 15px;
    padding: 0; /* Remove padding */
    margin-bottom: 0; /* Remove margin */
    flex-wrap: wrap;
	width: 90%;
	height: 100%; /* Or a specific height */
    

}

.whiteboard-toolbar button {
    font-size: 24px;
    border: none;
    background: none;
    cursor: pointer;
}

.whiteboard-toolbar button.active {
    border-bottom: 2px solid #000;
}

.whiteboard-toolbar button:hover {
    background-color: #e0e0e0;
    border-radius: 50%;
}

.whiteboard-toolbar button .material-icons {
    font-size: 24px;
}

#whiteboard {
    border: 2px solid #ccc;
    background-color: #fff;
    cursor: crosshair;
    width: 90%;
	height: 90%;
	/*width: calc(100% - 40px);  Adjust width to account for padding */
    /* height: calc(100% - 40px);  Adjust height to account for padding */
}
.export-format-note {
  display: none;
  position: relative;
  background-color: #f8f9fa;
  
  padding: 15px;
  font-size: 0.9em;
  color: #495057;
  margin: 15px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Add box shadow */
  max-width: 250px;
  height: 100%;
  min-height: 150px;
  flex-direction: column;
  gap: 15px;
}


.export-format-note i {
  
  align-items: center;
  text-align: center;
  
}
.export-format-note span {
  text-align: center;
}
.modal-export-body {
	display: flex;
	flex-direction: row;
	gap: 15px;
  align-items: center;
  justify-content: center;
}
.modal-export-body > :first-child {
  flex: 1; /* More space for the first element */
}

.modal-export-body > :nth-child(2) {
  flex: 1; /* Less space for the second element */
}
#quiz_options_section {
  font-size: 12px;
}
#quiz_options_section label input, #quiz_options_section label span {
  vertical-align: middle;
}
.step1Meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  /*#statsView {
	float: none;
	display: block;

  } */
  
  /* Responsive adjustment for mobile */

    #step1MiddleSection {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

  .export-format-note {
    position: static;
    transform: none;
    margin-top: 0.5em;
    min-height: auto;
    flex-direction: row;
    justify-content: center;
    min-width:250px;
    width: 250px;
    
  }
  .quiz_action_text {
		display: none;
  }
  .modal-export-body > :first-child {
    flex: 1; 
  }

  .modal-export-body > :nth-child(2) {
    flex: 1;
  }
  .modal-export-body {
    flex-direction: column;
    justify-content: center;
  }
}

.modal {
    background-color: rgba(128, 128, 128, 0.5); /* grey with 50% opacity */

  
}
/* Additional Tools "More" overflow menu (see get_selected_tools() /
   openAdditionalTool() in quizDynamicView.pt / quizDynamicGamifiedView.pt) */
.more-tools-menu {
    position: absolute !important;
    top: 100%;
    right: 0;
    z-index: 150;  /* above sticky header, below modals */
    background: #fff;
    color: #222;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    min-width: 180px;
    z-index: 50;
    padding: 6px 0;
    margin-top: 6px;
}

.more-tools-menu {
    max-width: 280px;
}

.more-tools-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
}

.more-tools-menu-item > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.more-tools-menu-item:hover {
    background: #f2f2f2;
}

/* Additional Tools overlay - a real centered popup (unlike the
   near-fullscreen .quiz-modal used for the whiteboard/calculator),
   dismissible via the X, clicking the backdrop, or Escape - see
   openAdditionalTool()/closeAdditionalToolModal() and the keydown
   handler below.

   IMPORTANT: several decorative theme files (candy/jungle/space/
   balloons.css) set ".quizBody > * { position: relative; z-index: 1; }"
   for their background motif, and #additionalToolModal is a direct
   child of .quizBody. Equal-specificity + later-in-cascade means that
   theme rule would otherwise silently strip this overlay's
   position:fixed and collapse it into the page flow instead of
   covering the viewport. The !important flags below are required, not
   decorative - do not remove them. */
.at-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200 !important;  /* additional tools modal: same level as other modals */
}

.at-modal-content {
    background: #fff;
    width: 90%;
    max-width: 900px;
    height: 80vh;
    max-height: 700px;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.at-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
    font-size: 20px;
    color: #666;
    line-height: 1;
    z-index: 1;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.at-modal-close:hover {
    color: #000;
}

.at-modal-body {
    flex: 1;
    overflow: hidden;
}

.at-modal-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Additional Tools icon size clamp (tray + "More" dropdown). Tool
   font_icon is educator-authored raw HTML (see tools_catalog.py /
   get_selected_tools()) and can carry its own font-size; without a
   hard clamp a tool's icon could render arbitrarily large in the
   compact toolbar. Mirrors the .qs-icon-box approach already used in
   the Quiz Settings modal's tool picker (quiz_settings_modal.css) -
   !important is required here because several decorative theme files
   apply broad !important color/sizing rules of their own to shared
   toolbar classes. */
.at-icon-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
    font-size: inherit;
}

.at-icon-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

.quiz_actions .at-icon-box {
    width: 24px;
    height: 24px;
}

.more-tools-menu-item .at-icon-box {
    width: 20px;
    height: 20px;
}

/* Built-in tool icons (calculator/stats/whiteboard/quraan/dictionary/
   export/fullscreen) - same size clamp so a theme can't inflate these
   either, matching the fix already applied to the tool picker in
   quiz_settings_modal.css. */
.quiz_actions .material-symbols-outlined,
.quiz_actions .material-icons,
.more-tools-menu-item .material-symbols-outlined,
.more-tools-menu-item .material-icons {
    font-size: 24px !important;
}

/* ---------------------------------------------------------------------
   Gamified experience: per-question celebrate/comfort feedback banner
   and confetti burst (see checkAnswerGamified()/showGamifiedFeedback()/
   burstConfetti() in quizDynamicView.pt). Deliberately theme-agnostic
   (fixed colors, not CSS vars) so the celebrate/comfort meaning (green
   = correct, amber = try again) stays legible and consistent no matter
   which quiz theme is active.
   --------------------------------------------------------------------- */

.gamified-feedback {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 20;
    overflow: hidden;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
}

.gamified-feedback-correct {
    background: #ecfdf5;
    border: 1px solid #34d399;
    color: #065f46;
}

.gamified-feedback-incorrect {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    color: #78350f;
    font-weight: 500;
}

.gamified-feedback-text {
    position: relative;
    z-index: 1;
}

.gamified-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.gamified-confetti-piece {
    position: absolute;
    top: -20px;
    font-size: 20px;
    animation-name: gamified-confetti-fall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes gamified-confetti-fall {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to   { transform: translateY(70px) rotate(220deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gamified-confetti-piece { animation: none; display: none; }
}

/* Final quiz-pass celebration (checkAnswerView.pt) */
.gamified-pass-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #34d399;
    color: #065f46;
    font-size: 1.1em;
    font-weight: 700;
}

.gamified-fail-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fbbf24;
    color: #78350f;
    font-size: 1.05em;
    font-weight: 600;
}

.gamified-pass-banner .gamified-banner-icon,
.gamified-fail-banner .gamified-banner-icon {
    font-size: 2em;
    line-height: 1;
}

/* Gamified stats bar (score chip / streak / progress / mute) - see
   gamifiedStatsBar in quizDynamicView.pt and the recordGamifiedResult()
   family of JS functions there. Deliberately theme-agnostic (fixed
   colors) like the rest of the gamified UI, so it stays legible
   regardless of the active quiz theme. */
.gamified-stats-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gamified-score-chip {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.9em;
    white-space: nowrap;
}

.gamified-streak-chip {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.9em;
    white-space: nowrap;
}

.gamified-progress-track {
    position: relative;
    width: 120px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.gamified-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #34d399, #10b981);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.gamified-mute-toggle {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
    font-size: 14px;
}

.gamified-mute-toggle:hover {
    background: #f3f4f6;
}

.gamified-points-float {
    position: absolute;
    top: 6px;
    right: 12px;
    font-weight: 800;
    color: #059669;
    font-size: 1.1em;
    animation: gamified-points-rise 1.1s ease-out forwards;
    pointer-events: none;
}

@keyframes gamified-points-rise {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-26px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gamified-points-float { animation: none; opacity: 0; }
}
.quiz_toolbar {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:10px;
  align-items:center;
  justify-content: center;
  padding: 10px;
}
/* ---------------------------------------------------------------------
   Game Mode (Phase 1: Race) - see #quizGameHud in quizDynamicView.pt
   and window.QuizGames.race. Theme-agnostic (fixed colors), same
   reasoning as the rest of the gamified UI: the meaning (progress
   toward the finish, pass threshold) needs to stay legible regardless
   of which quiz theme is active.
   --------------------------------------------------------------------- */
/* Game Mode: strip the quiz frame border/shadow for a cleaner, more
   immersive view - toggled via .game-active-no-frame (added to
   .quizBody in startQuizJourney() when a game starts). Needs the
   two-class selector (not just .quizBody) to reliably win against the
   per-theme files' own ".quizBody { border: ... !important; }" rules:
   when specificity differs, the higher-specificity selector always
   wins regardless of which one loads later in the cascade. */
.quizBody.game-active-no-frame {
    border: none !important;
    box-shadow: none !important;
}


/* -----------------------------------------------------------------
   Gamified quiz badge (see #quizGamifiedBadge in quizDynamicView.pt)
   - shown in the intro metadata area, visible before Start is even
   clicked, so a student knows what kind of quiz this is up front.
   ----------------------------------------------------------------- */
.quiz-gamified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7c3aed, #4d6bfe);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.01em;
    width: fit-content;
}

.quiz-gamified-badge .material-symbols-outlined {
    font-size: 1.05em;
}

/* -----------------------------------------------------------------
   Start countdown (see runQuizCountdown() in this template's own
   <script>) - shown over the whole page when Start is clicked on a
   gamified quiz, before startQuizJourneyInner() actually runs.
   ----------------------------------------------------------------- */
.quiz-countdown-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 20, 0.6);
}

.quiz-countdown-number {
    font-size: 9em;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 4px 18px rgba(0,0,0,0.5);
    opacity: 0;
    transform: scale(0.4);
}

.quiz-countdown-pulse {
    animation: quiz-countdown-pulse-anim 0.8s ease;
}

@keyframes quiz-countdown-pulse-anim {
    0%   { opacity: 0; transform: scale(0.4); }
    28%  { opacity: 1; transform: scale(1.18); }
    55%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}

@media (max-width: 480px) {
    .quiz-countdown-number {
        font-size: 5.5em;
    }
}