/* newman styles */



.is-dragging-original {
  opacity: 0.5;
  border: 2px dashed #007bff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.drag-over {
  background-color: #cceeff; /* Light blue background */
  border: 2px solid #007bff; /* Solid blue border */
}


.highlight {
  border: 2px solid blue;
}

.que.easyonewman .answer {
  padding: 0.3em;
  width: auto;
  display: inline;
}
.que.easyonewman .answer input {
  width: 65%;
}
.que.easyonewman.applet {
width:520px;
}
.que.easyonewman.author {
  float: right;
  font-style: italic ;
  font-size: 10px;
}
#page-question-type-easyonewman .mform .textareamonospace {
  white-space: pre;
  font-family: Andale Mono, Monaco, Courier New, DejaVu Sans Mono, monospace;
}


.que.easyonewman span.answerlabel {
  vertical-align: top;
}


#newman_template {
overflow: hidden; padding: 10px;

}

.dragdiv {
/*position: absolute;*/
cursor: move;
z-index: 2;
background-color: white;
}


#draggable {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
gap: 10px;
width: fit-content;
/*height: 120px;*/
border: 1px dashed #aaaaaa;
border-radius: 5px;
/*width: 300px;*/
margin:auto;
}


.draggable > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}


.dragdivtext {
font-size: 24px;
min-width: 40px;
height: 30px;
text-align: center;
}


.dragdivtext #x {
font-size: 24px;
/*width: 40px;*/
height: 30px;
text-align: center;
}

/*  this is for staggered */


br.cleared {
clear: left;
}

#div1 {width:95px;height:47px;padding:10px;}

/*
#divnew {margin: auto; width:220px;height:240px;padding:10px; background-image: url('../img/stag.png');}
#divnew {background-color:#ffffff;}
#divneweclip {width:220px;height:240px;padding:10px;border:1px solid #aaaaaa; background-image: url('../img/eclip.png');}
#divneweclip {background-color:#ffffff;}
*/



#divnew.staggered-conformation {
  background-image: url('../img/stag.png');
  margin: auto; width:220px;height:240px;padding:10px;
 
}

#divnew.eclipsed-conformation {
  background-image: url('../img/eclip.png');
  margin: auto; width:220px;height:240px;padding:10px;
}

.dropablediv:empty 
{border:2px dashed grey; border-radius: 5px;}

.dragdiv:hover {
    border: 2px solid lightblue;
}





div[id*='dme'] {background-image: url('../img/me.png');}


#divnew.staggered-conformation #pos0 {width:40px;height:30px;padding:0px; position:relative; top:40px; left:1px;}
#divnew.staggered-conformation #pos1  {width:40px;height:30px;padding:0px; position:relative; top:-24px; left:82px;}
#divnew.staggered-conformation #pos2  {width:40px;height:30px;padding:0px; position:relative; top:-13px; left:164px;}
#divnew.staggered-conformation #pos3  {width:40px;height:30px;padding:0px; position:relative; top:42px; left:160px;}
#divnew.staggered-conformation #pos4  {width:40px;height:30px;padding:0px; position:relative; top:54px; left:82px;}
#divnew.staggered-conformation #pos5  {width:40px;height:30px;padding:0px; position:relative; top:-22px; left:1px;}


#divnew.eclipsed-conformation #pos0 {width:40px;height:30px;padding:0px; position:relative; top:20px; left:110px;}
#divnew.eclipsed-conformation #pos1 {width:40px;height:30px;padding:0px; position:relative; top:-12px; left:65px;}
#divnew.eclipsed-conformation #pos2 {width:40px;height:30px;padding:0px; position:relative; top:105px; left:150px;}
#divnew.eclipsed-conformation #pos3 {width:40px;height:30px;padding:0px; position:relative; top:45px; left:160px;}
#divnew.eclipsed-conformation #pos4 {width:40px;height:30px;padding:0px; position:relative; top:5px; left:0px;}
#divnew.eclipsed-conformation #pos5 {width:40px;height:30px;padding:0px; position:relative; top:5px; left:10px;}








div.flipable img.flip
{
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -khtml-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
}

/* end staggered */






/* */






body {
  padding-top: 60px; 
  /*padding-bottom: 80px;*/ 
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures body is at least full viewport height */
  margin: 0;
}



.fullscreenbtn > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/fullscreen_btn.svg);
}

.scrollforwardbtn > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/fast-forward-btn.svg);
}

.scrollbackwardbtn > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/skip-backward-btn.svg);
}

.getstructurebtn > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/down-arrow-icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10%;
  
}

.img-responsive {
  max-width: 100%;
  height: auto;
}

.progress-info {
  font-style: italic;
  font-weight: bold;
  color: #5a6268; /* Or another color */
}

#activityList h4 {
  text-align: center; /* Center the text */
  padding: 20px 0; /* Add top and bottom padding */
  margin-bottom: 20px; /* Add some margin below the heading */
  border-bottom: 1px solid #eee; /* Optional: Add a subtle bottom border */
}



.quiz-main-content {
  flex-grow: 1; /* Allows it to grow to fill available vertical space */
  overflow-y: auto; /* Already have this */
  -webkit-overflow-scrolling: touch; /* Already have this */
  height: 100%; /* Crucial: Makes it take 100% of the height allocated by flex-grow */
  /* Remove or adjust padding if it affects the height calculation */
  /* The padding-top/bottom inline styles might affect this */
  /* Consider moving padding into the content *inside* this div */
}

#quiz-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  width: 100%;
  background-color: #f8f9fa; /* Example light background */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Subtle shadow at the top */
  padding-top: .5rem;
  padding-bottom: .5rem;
}

#quiz-controls .container-fluid {
  display: flex; /* This is the key to horizontal alignment */
  justify-content: space-around; /* Distribute space around buttons (or use center, space-between) */
  gap: 10px; /* Add space between buttons */
  flex-wrap: nowrap; /* **Prevent wrapping onto new lines** */
  /* Optional: align-items: center; if buttons have different heights */
}

#quiz-controls button {
  flex-grow: 1; /* Allow buttons to grow and share space */
  flex-shrink: 1; /* Allow buttons to shrink if needed */
  /* flex-basis: 0; // Often used with flex-grow for better distribution */
  /* You might also want to set a max-width if they get too big on wider screens */
  max-width: 150px; /* Example max-width */
}

#question-container,
#mcq-options-container,
#chemComposer,
#feedback-container {
    margin-bottom: 1rem; /* Add space below each section */
}

#quiz-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#continueButton {
    display: none; /* Initially hide the continue button */
}
  /* Add some spacing between buttons in quiz-controls */
#quiz-controls button {
    margin-right: 8px; /* Adjust spacing as needed */
}

#quiz-controls button:last-child {
      margin-right: 0;
}

.form-check.user-selected {
  background-color: lightblue; /* Example style for user selection */
  /* Add other desired styles like border, etc. */
}

.form-check.correct-answer {
  background-color: lightgreen; /* Example style for correct answer */
  /* Add other desired styles like border, etc. */
}

#question-container {
  margin-bottom: 15px;
  width: 100%; /* Ensure it takes full width */
  overflow-y: auto; /* Add vertical scrollbar if text exceeds max-height */
  border: 1px solid #eee; /* Optional: Add a border for visual distinction */
  padding: 10px; /* Optional: Add some padding inside the container */
}

.input-group>input.someInput {flex: 0 1 100px;}


#question-container p {
  font-size: 1.0rem; /* Default size */
}


@media (min-width: 576px) { /* Small devices and up */
  body {
      padding-top: 70px; /* Adjust if header height changes on larger screens */
      padding-bottom: 90px; /* Adjust if controls height changes */
  }
  #quiz-controls .container-fluid {
       justify-content: center; /* Maybe center on slightly larger mobile screens */
  }
}

.row {
  /* Allow the row to take its natural height */
}

#chemComposer {
  flex-grow: 1; /* Make the composer take up the remaining vertical space */
  /* Optional: Add a border or background to visually see the space */
  border: 1px solid #ccc;
  width: 99%;
}

#submitAnswerBtn {
  margin-top: auto; /* Push to the bottom if using flexbox */
}

#feedback-container {
  margin-top: 15px;
}

.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-C > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomC.png);
}
.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-O > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomO.png);
}
.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-N > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomN.png);
}

.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-H > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomH.png);
}

.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-F > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomF.png);
}

.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-Cl > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomCl.png);
}

.K-Chem-Composer-Assoc-Toolbar .K-Chem-MolSpecifiedAtomIaController-Br > .K-Pri-Glyph-Content
{
  background-image: url(../img/icons/atomBr.png);
}

/* Add some basic styling for the action buttons container */
.activity-actions {
  display: flex;
  align-items: center;
}
.activity-actions .btn {
  margin-left: 5px; /* Space between buttons */
}
  /* Style for the downloaded state */
  .btn-downloaded {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
  }
  /* Style for the downloading state */
  .btn-downloading {
      color: orange; /* Example color change */
      pointer-events: none; /* Disable clicks while downloading */
      opacity: 0.6; /* Indicate it's busy */
  }


  .tab-pane {
    /* Set a maximum height for EACH panel. Adjust this value as needed. */
    max-height: none; /* Example: Same height as before, but applied per panel */
    /* Or use a fixed pixel value: */
    /* max-height: 400px; */
  
    /* Add vertical scrollbar to each panel when content overflows */
    overflow-y: visible;
  
    /* Hide horizontal scrollbar within each panel */
    overflow-x: hidden;
  
    padding: 15px; /* Example padding: 15px on all sides inside the panel */

  }