.panel-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Defines two equal-width columns */
  gap: 10px; /* Adds space between all grid items */
}

.panel-header {
  grid-column: 1 / 3; /* Tells this div to start at column 1 and end at column 3, spanning both columns */
  display: flex;
  justify-content: flex-end;
  gap 10px;
  background-color: #f0f0f0;
  padding: 10px;
  /*padding: 20px;*/
  /*border: 1px solid #ccc;*/
}

.panel-body {
  display: flex;
  gap: 20px;
  align-items: stretch; /* Changed: Stretches both to tallest (left usually) */
}

.distlist-mgmt {
  flex: 0 0 40%; /* Takes equal space; or use flex: 0 0 50%; for fixed half-width */
  min-width: 0; /* Prevents overflow in flex */
}

.updatebox {
  flex: 0 0 60%; /* Allows growth within 60% */
  min-width: 0;
  align-self: stretch; /* Ensures it fills vertical space */
  display: flex; /* Flex the column internally */
  flex-direction: column; /* Stack list vertically */
}

#updates {
  flex: 1; /* Grows to fill right-column height */
  padding-left: 20px;
  /* Remove max-height for full expansion: */
  /* max-height: none; */ /* Or comment out */
  overflow-y: auto; /* Still scrolls if content overflows the stretched height */
}

/* Responsive: Stack on small screens */
@media (max-width: 768px) {
  .panel-body {
    flex-direction: column; /* Stacks vertically on mobile */
    gap: 10px;
  }
}

#distlist-container label {
  display: block; /* Stacks each label on its own line */
  margin-bottom: 8px; /* Optional: Adds a little vertical spacing between options */
}

#otherLabel {
  display: flex;
  align-items: start;
  gap: 5px;
  margin-bottom: 8px;
}

#otherlist {
  width: 100%; /* Tells the input to fill the space inside its parent flex item */
  box-sizing: border-box; /* Ensures padding and border are included in the width */
  margin-left: 10px; /* Keep your existing margin */
}

.distlist-mgmt {
  min-width: 0; /* Allows the flex container to shrink past its minimum content size */
}