body {
    background-color:#00b7ff3e;
}
.padB{
    margin-bottom: 20px;
}
.profile-image-btn {
    transition: transform 0.2s ease;
}
.profile-image-btn:hover {
    transform: scale(1.1);
}
.locked-input {
  background-color: #cacaca98; /* light gray */
  color: #6b7280;            /* gray-600 */
  cursor: not-allowed;            /* keep it visible even when disabled */
}
.progress-bar-container {
  display: flex;
  height: 16px;
  width: 100%;
  background-color: #e5e7eb; /* Light gray base */
  border-radius: 9999px; /* Full pill shape */
  overflow: hidden;
}

.progress-segment {
  height: 100%;
}

.progress-segment.correct {
  background-color: #4ade80; /* Green */
}

.progress-segment.incorrect {
  background-color: #f87171; /* Red */
}

.progress-segment.unanswered {
  background-color: #cbd5e1; /* Gray */
}

/* select */

/* --- The Wrapper --- */
.custom-select-wrapper {
  position: relative; /* This is crucial for positioning the options */
  width: 250px;
  font-family: Arial, sans-serif;
}

/* --- Hide the Original Select --- */
.original-select {
  display: none; /* Hide it completely! */
}

/* --- The Custom Select Box (The Trigger) --- */
.select-custom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-custom:hover {
  border-color: #888888;
}

.select-custom.open {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.select-custom__trigger {
  color: #555;
}

/* --- The Custom Arrow --- */
.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #555;
  transition: transform 0.3s ease;
}

.select-custom.open .arrow {
  transform: rotate(180deg); /* Flip the arrow when open */
}

/* --- The Custom Options Panel --- */
.select-options {
  position: absolute;
  top: 110%; /* Position it just below the custom select box */
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden; /* Ensures the border-radius is respected by children */
  display: none; /* Hidden by default */
}

.select-options.open {
  display: block; /* Shown when the 'open' class is added */
}

/* --- Individual Custom Option --- */
.select-option {
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.select-option:hover {
  background-color: #007bff2c;
}

.select-option.selected {
  background-color: #007bff;
  color: white;
}

.shadow-bevel-strong {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.8);
}