.sortable-list-container {
    display: flex;
    justify-content: center; /* Center the lists in case there is extra space */
    gap: 20px;
    padding: 5px;
}

.sortable-list {
    flex-grow: 1; /* Allow each list to fill the space evenly */
    background: transparent;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-width: 0; /* Fix for flexbox overflow issue */
}

    .sortable-list h5 {
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center; /* Center align the titles */
    }

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 6px;
    cursor: move;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Softer shadow for each item */
}

    .item span {
        flex-grow: 1;
        font-weight: 500; /* Make the text a bit bolder */
    }

/* Adjust padding for the container to prevent overflow */
.dx-popup-content {
    overflow: auto; /* Enable scroll if content overflows */
    padding: 20px; /* Give some space inside the popup */
}