#dropZone,
.dz {
    border: 2px dashed #cfd8dc !important;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    background: #fafbfc !important;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
    max-width: 500px;
    margin-top: 20px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.dz:hover,
.dz:focus-within { border-color: #2b6777; background: #f6fbfc; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.dz--active { border-color: #2b6777; background: #eef7fa; }

.dz__icon { width: 44px; height: 44px; margin-bottom: .5rem; opacity: .8; }

.dz__headline { 
    font-weight: 600; 
    color: #343a40; 
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    text-align: center;
}
.dz__subtle { 
    color: #6c757d; 
    word-break: break-word;
    overflow-wrap: break-word;
}
.dz__filename {
    word-break: break-word;
    overflow-wrap: break-word;
}

.dz__divider {
    display: flex; align-items: center; gap: .75rem; color: #6c757d;
    width: 300px; margin: .75rem auto;
}
.dz__divider::before, .dz__divider::after {
    content: ""; flex: 1; height: 1px; background: #e9ecef;
}

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}