body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1, h2 {
    color: #333;
}

#trackTableSection {
    margin: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: lightblue;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #007bff;
    color: white;
}

td input[type="text"],
td input[type="number"] {
    width: 100%;
    padding: 4px;
    margin: 0;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Added for better width management */
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #0056b3;
}

/* Existing styles... */

/* Set List Section */
#setListSection {
    margin: 20px;
}

.setList {
    background-color: #e9ecef;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
}

.setListTitle {
    cursor: pointer;
    font-weight: bold;
    color: #007bff;
}

.setListTitle:hover {
    text-decoration: underline;
}

.addTracksButton, .removeTrack {
    background-color: #28a745;
    color: white;
    margin: 5px 0;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.addTracksButton:hover, .removeTrack:hover {
    background-color: #218838;
}

/* Track Selection Checkbox */
.track-select {
    margin-right: 10px;
    cursor: pointer;
}

/* Sortable List Items */
.sortable {
    list-style-type: none;
    padding: 0;
}

.sortable li {
    margin: 5px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: move; /* Cursor indicates item is movable */
}

.ui-state-highlight { /* Style for placeholder in sortable list */
    height: 1.5em;
    line-height: 1.2em;
    background-color: #acf;
    border: 1px dashed #888;
}

/* Style for Gaps in Set List */
.gap {
    background-color: #ffc107;
    color: black;
    padding: 10px;
    text-align: center;
    margin: 5px 0;
    cursor: pointer;
}

.gap:hover {
    background-color: #e0a800;
}

.setListContent ul {
    list-style-type: none; /* Removes default list styling */
    padding-left: 0; /* Removes default padding */
}

.setListContent li {
    background-color: #fff; /* Background color for visibility */
    border: 1px solid #ccc; /* Adds a border */
    margin-bottom: 5px; /* Adds space between list items */
    padding: 10px; /* Adds padding inside list items */
    min-height: 20px; /* Ensures that the list item has height */
}

/* Ensure that the list is visible when its parent is toggled */
.setListContent {
    display: block;
    margin-top: 10px;
}

.gap {
    background-color: #ffd966; /* Example background color */
    padding: 10px;
    text-align: center;
    margin: 5px 0;
}

.interpolateButton {
    background-color: #4CAF50; /* Example button color */
    color: white;
    padding: 5px 10px;
    margin: 5px;
    border: none;
    cursor: pointer;
}

.interpolateButton:hover {
    background-color: #45a049;
}

/* Add CSS for Insert Gap buttons */
button.insertGap {
    /* Styling for insert gap button */
    background-color: #f0ad4e; /* Bootstrap warning color */
    color: white;
    /* ... */
}

.trackInfo {
    display: flex;
    align-items: left;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.trackDetail {
    flex-grow: 1;
    padding: 0 10px;
}

.trackDetail.mixNotes {
    flex-basis: 20%;
}

.trackActions {
    display: flex;
    align-items: center;
}

.warningMessage {
    display: block; /* Ensure the message is on its own line */
    color: red; /* Make the message stand out */
    margin-top: 10px; /* Add some space above the message */
    font-weight: bold; /* Optional: make the message bold */
}