/* tracklist */
.tracklist-container {
    /*    grid-column: 4 /  10;  Allineato come specificato per il layout */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: column;
    text-align: left;
    background-color: black;
    height: 100%;
    width: 90%;
    margin: auto;
    overflow: scroll;
}

.remove-track {
    margin-top: 5px;
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

/* #track-container > div {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        } */

.tracklist-container input {
    color: white;
    box-shadow: 0 0 0 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(252, 252, 252, 0.1);
}

input[type="text"] {
    color: var(--dgth-bianco);
    /* box-shadow: 0 0 0 0 !important;*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
    /*background-color: rgba(252, 252, 252, 0.1)!important;*/
    border-radius: 0px !important;
    width: 100% !important; /* Riempie il contenitore */
    margin: 0 !important; /* Rimuove margini indesiderati */
    height: 3rem;
    width: 100%;
    font-size: var(--dgth-body);
    border-bottom: 1px solid #9e9e9e;
}
.add-track {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0;
    border: none;
    color: var(--dgth-bianco);
    width: 100%;
    height: 3rem;
    margin: 0;
}

.tracklist-container select {
    display: block;
}

#tracklist div,
#track div {
    margin-bottom: 1rem;
}

.item li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(225, 225, 225, 0.3);
    border-radius: 10px;
    background-color: rgba(252, 252, 252, 0.1);
    padding: 16px;
    color: #fff;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  Leggera ombra */
}

.spotify {
    visibility: hidden;
}

.dgth-card .msg {
    width: 60%;
}

/* hide button track forms */
#track .hid {
    display: none;
}