#durationLabel{color:yellow;}

#dropZoneTree.dragover {
	opacity:0.5;
}

.level {
  padding: 0px;
  width:100%;
  color: white;
  background: #252525;
  border-bottom:3px solid black;
}

.drawing {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.level button {
  color: white;
  width: 20px;
  height: 20px;
  background: #4c4c4c;
  border: none;
  cursor: pointer;
  font-size: 10pt;
  display: flex;
  justify-content: center;
  align-items: center;
}
.level button span{
position:relative;
left:5px;
}

.level button:hover {
  background: #a35293;
}

.level-header {
  display: flex;
  align-items: left;
  text-align:left;
  gap: 8px;
}

.level-label {
  flex: 4; /* Increased from 2 to give it much more weight */
  font-weight: bold;
  cursor: pointer;
  font-size: 10pt;
}

.level-label.active { color:#4073a3 ;}

.level-label[contenteditable="true"] {
    
  background-color: #1c1c1c;
  appearance: textfield;
  text-align: left;
  color: white;
}




.toggle-icon { 
  flex: 0 0 20px; /* Prevents shrinking/growing; keeps it a fixed small width */
  cursor: pointer;
  text-align: left;
}

.drawing {
  display: flex;
  align-items: center;
  margin: 2px 0;
}


.drawing input {
  flex: 2; /* input takes more space */
  min-width: 0; /* prevents overflow */
  background-color: #1c1c1c;
  border: 1px solid #5f5f5f;
  appearance: textfield;
  font-size: 10pt;
  text-align: left;
  color: white;
}

.drawing input.active {
  color: #007acc;
}

.drawing button {
  flex: 1;
}
.drawing button span{
  top:-1px;
  left:-2px;
}

#levelsTree {
overflow-x:hidden;
width:100%;
  display: flex;
  flex-direction: column;   /* stack items vertically */
  align-items: flex-start;  /* align items to the left */
  overflow-y: auto;         /* scroll vertically */
  flex-wrap: nowrap;        /* prevent wrapping into extra columns */
}