:root {
    --drag-background: hsl(var(--af));
    --drag-border: hsl(var(--af));
    --table-border-bottom: hsl(var(--su));
    --table-border: hsl(var(--pc));
    --table-background: hsl(var(--nf));
    --dropzone-text: hsl(var(--nc));
    --dropzone-hover: hsl(var(--af));
    --dialog-backdrop: hsla(var(--pc), 0.7);
}

.drag-over {
    background: var(--drag-background);
    border-style: dashed;
    border-color: var(--drag-border);
}

tr {
    border-collapse: collapse;
    border-spacing: 4px;
    font-size: 1rem;
    border: none;
    border-left: 1em solid transparent;
    cursor: move;
}

/* Default styles */
.flex {
    display: flex;
    flex-wrap: wrap;
}

.form-check {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.border {
    min-height: 200px;
}

.table {
    border-collapse: collapse;
    width: 100%;
}

.table td {
    border-bottom: 1px solid var(--table-border-bottom);
    padding: 8px;
}

/* Media queries */
@media screen and (min-width: 640px) {

    /* Adjust layout for small screens */
    .flex {
        flex-direction: column;
    }

    .form-check {
        flex-direction: row;
        justify-content: flex-start;
        margin-right: 24px;
    }

    .btn-group {
        margin-left: 24px;
    }

    .border {
        min-height: 150px;
    }
}

@media screen and (min-width: 768px) {

    /* Adjust layout for tablets */
    .flex {
        flex-direction: row;
        justify-content: space-between;
    }

    .form-check {
        justify-content: center;
        margin-right: 0;
    }

    .btn-group {
        margin-left: 0;
    }

    .border {
        min-height: 250px;
    }
}

@media screen and (min-width: 1024px) {

    /* Adjust layout for desktops */
    .flex {
        max-width: 1024px;
        margin: 0 auto;
    }

    .border {
        min-height: 300px;
    }
}

/* Custom styles */
.border {
    border-width: 2px;
    border-style: dashed;
    border-color: var(--table-border);
    background-color: var(--table-background);
}

.dropzone {
    border-radius: 1rem;
}

.dropzone-text {
    font-size: 1.5rem;
    color: var(--dropzone-text);
    user-select: none;
}

.dropzone-icon {
    font-size: 4rem;
    color: var(--dropzone-text);
}

.dropzone:hover {
    border-color: var(--dropzone-hover);
    cursor: pointer;
}

.dropzone:hover .dropzone-text,
.dropzone:hover .dropzone-icon {
    color: var(--dropzone-hover);
}

dialog::backdrop {
    background: var(--dialog-backdrop);
}

.thumbnail {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

#images-list td {
    vertical-align: middle;
}

.drag-indicator {
    border-top: 2px solid #007bff;
}