.hidden-upload-field {
    display: none;
}

.upload-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
    width: min(95%, 624px); /*by default 624px will be used, when 95% of parent evaluates to less than 624px than 95% will be used*/
    padding: 8px 16px 8px 8px;
    background-color: var(--white);
    outline: 1px solid var(--border-light);
    outline-offset: -1px;
    border-radius: var(--border-radius-default);
}
.upload-card > :first-child, .upload-card > .upload-title {
    opacity: 0.4;
    transition: 0.3s linear;
}


.upload-title {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}
.upload-title > span:first-of-type {
    color: var(--black);
    font-weight: var(--font-weight-semibold);
}
.upload-title > span:last-of-type {
    color: var(--subdued);
    font-weight: var(--font-weight-light);
}

.upload-card .progress-group {
    width: 140px;
}
.upload-card .progress {
    width: 100px;
}

.upload-card.upload-complete > :first-child, .upload-card.upload-complete > .upload-title {
    opacity: 1;
}
.upload-card.upload-complete .progress-group {
    display: none;
}

.upload-card.upload-100 .progress-bar {
    width: 100% !important;
}

.upload-region {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.uploaded-image {
    border-radius: var(--border-radius-smaller);
    width: 84px;
    height: 47px;
}