.marks-layout {
  display: flex;

  gap: 20px;
}

.marks-sidebar {
  width: 38%;
  /* flex-shrink: 0; */
}

.marks-main {
  padding: 5px;
  width: 60%;
  /* flex: 1; */
}

.student-list {
  max-height: 400px;

  overflow-y: auto;

  border: 3px solid #ddd;

  background-color: #fff5ea;
}

.student-row {
  padding: 10px;

  cursor: pointer;

  display: flex;

  gap: 10px;

  align-items: center;

  border-bottom: 1px solid #eee;
}

.student-row:hover {
  background: #f8f8f8;
}

.student-row.selected {
  border-left: 5px solid #2f80ed;

  font-weight: bold;
}

.student-row.completed {
  background: #edf8ed;
}

.progress {
  height: 8px;

  background: #ddd;

  margin: 10px 0;

  border-radius: 10px;

  overflow: hidden;

  background-color: #fff5ea;
}

#progressBar {
  height: 100%;

  width: 0;

  background: #28a745;

  transition: 0.3s;
}

.popup-content .yellow,
.japa-container .yellow,
.confirm-popup-content .yellow {
  background-color: #f8a333;
  color: rgb(0, 0, 0);
  border: 0.1px solid black;
}