#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: 100%;
	 text-align: center;
	 overflow: hidden;    /* Hide any overflowing content */
     
	 margin-right: 10px;

 }
 #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 */
}
.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;

}
#currentQuestion {
float: right;
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;
}
#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 */
}

.fieldsetLegendStyle {
 font-size: 18px;
 font-weight: bold;
}
#allOptionsSec {
 margin-left: 10px;
}
#statsViewDisplay {
  /*position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 420px;
  z-index: 1000;
  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: 9999;
  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:inline-block;  
	border: solid 1px black;
	border-radius:5px;
	margin: 10px;
	padding:4px;
}
.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: 1;
  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: 9999;
  pointer-events: auto;
  
  
}
.close_modal:hover {
  background-color: #555;
}
#quiz_formatSelect {
  font-size:12px;
  height: auto;
}
.btn {
//  background: green;
//  color: white;
}
.quiz_actions {
  cursor:pointer; 
  display:flex;
  flex-direction:row;
  vertical-align:middle;
}
.quiz_action_icon , .quiz_action_text {
   vertical-align: middle;
}
/* 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: 1000;
    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: 9999;
    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;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  /*#statsView {
	float: none;
	display: block;

  } */
  .step1Meta {
	  width: 100%;
  }
  .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 */

  
}