/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/
.multiple-choice-container {
    max-height: 35vh; /* Set maximum height */
    overflow-y: auto; /* Add scroll if content overflows */
    padding-right: 10px;
  }

  /* Style the scrollbar track */
.multiple-choice-container::-webkit-scrollbar-track {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.2); /* You can adjust the color and opacity */
  }
  
  /* Style the scrollbar thumb (the part you drag) */
  .multiple-choice-container::-webkit-scrollbar-thumb {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.4); /* You can adjust the color and opacity */
  }
  
  /* Style the scrollbar size */
  .multiple-choice-container::-webkit-scrollbar {
    width: 8px;
  }

.question_container {
    max-height: 20vh; /* 25% of the viewport height */
    overflow-y: auto; /* Add vertical scrollbar if necessary */
    padding-right: 10px; /* Add space for the scrollbar */
    margin-bottom: 10px;
  }

    /* Style the scrollbar track */
  .question_container::-webkit-scrollbar-track {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.2); /* You can adjust the color and opacity */
  }
  
  /* Style the scrollbar thumb (the part you drag) */
  .question_container::-webkit-scrollbar-thumb {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.4); /* You can adjust the color and opacity */
  }
  
  /* Style the scrollbar size */
  .question_container::-webkit-scrollbar {
    width: 8px;
  }

  /* To hide sections like the next button */
.hidden {
  display: none;
}

.loader {
  width: 20px; /* Smaller width for inside a button */
  height: 20px; /* Smaller height for inside a button */
  margin: auto; /* Center loader in the button */
  animation: circle infinite .95s linear;
  border: 2px solid transparent;
  border-top-color: #333; /* Make top border visible */
  border-radius: 100%;
}

button.submit.loader-button {
  display: inline-block; /* Aligns to the right */
  float: right; /* Right align in its container */
  padding: 0; /* Adjust padding to fit loader */
  width: 110px; /* Width to fit the loader */
  height: 40px; /* Height to fit the loader */
  background: #ffcc00; /* Background color */
  border: none; /* No border */
  color: transparent; /* Hide text */
  transition: background .5s ease; /* Smooth transition for background */
  cursor: default; /* Default cursor to indicate it's not clickable */
  display: none; /* Hide by default */
}

@keyframes circle {
  to { transform: rotate(360deg); }
}

#loader-div {
  text-align: right;
  margin-top: 30px;
}