.btn:hover {
    background-color: rgb(from var(--bs-btn-hover-bg) r g b / 60%);
}

.dragging {
    opacity: 0.5;
}

.drag-handle {
    cursor: grab;
    touch-action: none;
}

.drag-handle:hover {
    opacity: 1;
}

.drag-handle:active {
    cursor: grabbing;
}

.container-fluid {
    --bs-gutter-x: 1.0em;
}

/* Livelist item styling */

.livelist-item.list-group-item-action {
    color: var(--bs-list-group-color);
}

.songlist-item.list-group-item.active {
    background-color: rgb(from var(--bs-list-group-active-bg) r g b / 50%)
}

.playlist-item.list-group-item.active {
    background-color: rgb(from var(--bs-list-group-active-bg) r g b / 50%)
}

#livelist-header {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.livelist-item {
    box-sizing: border-box;
}

.livelist-item-position,
.livelist-item-selectbox {
    min-width: 3.0em;
}

.livelist-item.list-group-item.drag-over {
    /*    border: 2px dashed #0d6efd; */
    box-shadow: inset 2px 2px 0px #0d6efd,
        inset -2px -2px 0px #0d6efd;
}

.livelist-item.list-group-item.drag-before {
    /*    border-top: 2px dashed #0d6efd;*/
    box-shadow: inset 2px 7px 0px #0d6efd,
        inset -2px -2px 0px #0d6efd;
}

.livelist-item.list-group-item.drag-after {
    /*    border-bottom: 2px dashed #0d6efd;*/
    box-shadow: inset 2px 2px 0px #0d6efd,
        inset -2px -7px 0px #0d6efd;
}

/* Playlist item styling */
.livelist-item {
    transition: background-color 0.2s;
}

.livelist-item.dragging {
    opacity: 0.5;
    background-color: rgba(0, 0, 0, 0.1);
}

.livelist-item.playing {
    background-color: rgba(25, 135, 84, 0.2);
    box-shadow: inset 4px 0px rgba(25, 135, 84, 0.8);
}

/* Song list styling */
.song-item.selected {
    background-color: rgba(13, 110, 253, 0.2);
}

#songlist-panel .offcanvas-header .btn-close {
    margin-left: 0;
}

#songlist-panel .offcanvas-header .btn-pin {
    margin-left: 0;
}

#songlist-panel-edit {
    margin-left: auto;
}

/* Song list edit */
#edit-song-tags {
    display: flex;
    flex-wrap: wrap;
}

/* Keypad styling */
.keypad-btn {
    flex-grow: 1;
    width: 30%;
    height: 60px;
    font-size: 0.8rem;
}

#keypad-container {
    justify-content: center;
    display: grid;
}

#keypad-container>div {
    max-width: 15em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .playlist-item .btn-group {
        flex-direction: column;
    }

    /*
    .keypad-btn {
        width: 50px;
        height: 50px;
    }
    */
}