.form-upload {
    color: #343a40;
}

.form-upload__dropzone {
    position: relative;
    display: block;
    padding: 1.5rem 1.25rem;
    border: 2px dashed #adb5bd;
    border-radius: .5rem;
    background: #f8f9fa;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.form-upload__dropzone:hover,
.form-upload.is-dragover .form-upload__dropzone {
    background: #eef8f1;
    border-color: #198754;
}

.form-upload__dropzone:focus-within {
    border-color: #198754;
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .2);
}

.form-upload__dropzone[hidden],
.form-upload.is-full .form-upload__dropzone {
    display: none;
}

.form-upload.is-full > .form-upload__files {
    margin-top: 0;
}

.form-upload.is-full > .form-upload__files .form-upload__file:first-child {
    margin-top: 0;
    padding-top: 0;
}

.form-upload__icon {
    display: block;
    margin-bottom: .25rem;
    color: #198754;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.form-upload__message {
    display: block;
    font-weight: 600;
}

.form-upload__hint {
    display: block;
    margin-top: .35rem;
    color: #6c757d;
    font-size: .875em;
}

.form-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.form-upload__files {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.form-upload__files--existing {
    margin-top: 0;
}

.form-upload__files--existing .form-upload__file {
    margin-top: 0;
    padding-top: 0;
}

.form-upload__errors {
    margin-top: .65rem;
    color: #842029;
    font-size: .9em;
}

.form-upload__file {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .25rem .75rem;
    align-items: center;
    margin-top: .5rem;
    padding: .4rem 0;
}

.form-upload__file-name { overflow: hidden; text-overflow: ellipsis; }
.form-upload__file-size {
    margin-left: .75rem;
    color: #6c757d;
    font-size: .875em;
    white-space: nowrap;
}

.form-upload__file-remove {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}

.form-upload__file-remove:hover,
.form-upload__file-remove:focus {
    background: #f8d7da;
    color: #842029;
}

.form-upload__file-progress {
    grid-column: 1 / -1;
    display: block;
    width: var(--file-progress, 0%);
    height: 3px;
    background: #198754;
    transition: width .15s ease;
}

.form-upload__progress { margin-top: .75rem; }
.form-upload__progress-bar { height: .4rem; background: #198754; transition: width .15s ease; }
.form-upload__progress-label { display: block; margin-top: .25rem; font-size: .875em; }