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

.upload-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 10px;
    width: 100%;
    /*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(--color-grey-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(--text-color-main);
    font-weight: var(--font-weight-semibold);
}
.upload-title > span:last-of-type {
    color: var(--text-color-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, .drop-region {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
}

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

.border-container {
    border: 1px dashed var(--grey-medium);
    border-radius: var( --border-radius-small);
}

.drop-zone.dragover {
    border-color: var(--black);
}

.drop-zone > div > div > span {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}