.active {
    border-radius: 0.5rem;
    background-color: #c6f0ff;
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
        drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}

.active a span {
    color: #4c7fae;
}
.active a button {
    color: #4c7fae;
}

.active a svg {
    color: #4c7fae;
}
.active svg {
    color: #4c7fae;
}
.active span {
    color: #4c7fae;
}

.active a {
    border-radius: 0.5rem;
    background-color: #c6f0ff;
    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
        drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}
.ts-wrapper {
    width: 100% !important;
}

.ts-control {
    border-radius: 0.5rem !important;
    background-color: rgb(249 250 251) !important;
}

#drop-area {
    width: 400px;
    height: 200px;
    margin: 20px auto;
    text-align: center;
    line-height: 200px;
    border: 2px dashed #ccc;
    cursor: pointer;
}
#drop-area.drag-over {
    background-color: #eee;
}
.preview-image {
    object-fit: cover;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #ddd;
}