/* @define DragAndDropCard; weak */
.DragAndDropCard {
    margin: 0;
}

.DragAndDropCard-header {
    background-color: #f4f4f4;
}

.DragAndDropCard-title {
    padding: 10px;
    flex-grow: 1;
    width: 460px;
}

.DragAndDropCard-itemListContainer {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

/* Item selectors */
.DragAndDropCard-itemList {
    min-height: 100%;
    list-style: none;
    padding: 15px;
    margin: 0;
}

/* sortable-ghost is a class from sortable.js, but maybe we can modify it via config. */
.DragAndDropCard--sortable li.sortable-ghost {
    background-color: rgb(194 213 238 / 25%);
    display: block;
    min-height: 33px;
}

/* sortable-ghost is a class from sortable.js, but maybe we can modify it via config. */
/* stylelint-disable-next-line */
.sortable-ghost *,
.DragAndDropCard--unsortable li.sortable-ghost {
    display: none !important;
}

/* sortable-ghost is a class from sortable.js, but maybe we can modify it via config. */
.DragAndDropCard--unsortable:has(.sortable-ghost) {
    background-color: rgb(194 213 238 / 25%);
}

/* sortable-ghost is a class from sortable.js, but maybe we can modify it via config. */
.DragAndDropCard-item:not(.sortable-ghost) {
    background: #efefef;
    border: 1px solid #ddd;
    box-shadow: 3px 3px rgb(0 0 0 / 2%);
    border-radius: 3px;
    display: flex;
    cursor: move;
}

.DragAndDropCard-cardText {
    position: relative;
    width: 100%;
}

.DragAndDropCard-guidance {
    margin: 20px;
}

.DragAndDropCard-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);
}