.progress-section {
    animation: fadeIn 0.5s ease-out;
    background-color: var(--color-form-bg);
    background-image: url("../../images/form_background_waves_double.svg");
    background-position: bottom;
    border-radius: 20px;
    box-shadow: var(--shadow-input);
    font-family: var(--font-body);
    padding-block-end: 30px;
    padding-block-start: 150px;
    position: relative;
}

.progress-section__animation {
    height: 300px;
    left: 35%;
    position: absolute;
    top: -35%;
    width: 300px;
}

.progress-section__file-name {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.progress-section__progress-bar {
	background-color: var(--color-input-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-input); /* for Firefox */
    color: var(--color-input-primary);
    display: block;
    height: 20px;
    overflow: hidden;
    width: 100%;
}

.progress-section__progress-bar::-webkit-progress-bar {
	background-color: var(--color-input-bg);
    border-radius: 10px;
    box-shadow: var(--shadow-input); /* for Chrome */
}

.progress-section__progress-bar::-webkit-progress-value {
	background-color: var(--color-input-primary);
    border-radius: 10px;
}

.progress-section__progress-bar::-moz-progress-bar {
	background-color: var(--color-input-primary);
    border-radius: 10px;
}

/* xs */
@media screen and (min-width: 320px) {
    .progress-section__animation {
        left: 0%;
    }
}

/* sm */
@media screen and (min-width: 384px) {
    .progress-section__animation {
        left: 10%;
    }
}

/* md */
@media screen and (min-width: 448px) {
    .progress-section__animation {
        left: 15%;
    }

    .progress-section__file-name {
        font-size: 1rem;
    }
}

/* xl */
@media screen and (min-width: 576px) {
    .progress-section__animation {
        left: 25%;
    }

    .progress-section__file-name {
        font-size: 1.25rem;
    }
}

/* 3xl */
@media screen and (min-width: 768px) {
    .progress-section__animation {
        left: 30%;
    }

    .progress-section__file-name {
        font-size: 1.5rem;
    }
}

/* 5xl */
@media screen and (min-width: 1024px) {
    .progress-section__animation {
        left: 35%;
    }

    .progress-section__progress-bar {
        max-width: 768px;
    }
}