.top-container .progress {
  height: 20px;
}

{% if aSurveyInfo.showprogress == 'Y' and aSurveyInfo.format != 'A' and not aSurveyInfo.aCompleted %}
    {% set progressValue  = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %}
    <!-- Top container -->
    <div class="{{ aSurveyInfo.class.topcontainer }} container-fluid" {{ aSurveyInfo.attr.topcontainer }} >
        <div class="row justify-content-center">
            <div class="{{ aSurveyInfo.class.topcontent }} col-12 col-xl-8" {{ aSurveyInfo.attr.topcontent }}>
                <div class="ls-progress-container" data-bs-toggle="tooltip" data-bs-placement="bottom"
                     title="{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}">
                    <div class="visually-hidden">{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}</div>
                    <div class="{{ aSurveyInfo.class.progress }}" {{ aSurveyInfo.attr.progress }} aria-hidden="true" data-bs-placement="bottom">
                        <div class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }} style="width: {{ progressValue }}%;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<div class="{{ aSurveyInfo.class.topcontainer  }} space-col"  {{ aSurveyInfo.attr.topcontainer  }} >
    <div class="{{ aSurveyInfo.class.topcontent  }} container" {{ aSurveyInfo.attr.topcontent  }} >
        {% if aSurveyInfo.format != 'A' and aSurveyInfo.showprogress is defined and aSurveyInfo.showprogress == 'Y' %}
            {{  registerPublicCssFile('lime-progress.css') }}
            {% set progressValue  = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %}
            <div class="{{ aSurveyInfo.class.progress  }}" {{ aSurveyInfo.attr.progress  }}>
                <div class="{{ aSurveyInfo.class.progressbar  }}" {{ aSurveyInfo.attr.progressbar  }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;">
                    {{ progressValue }}%
                </div>
            </div>
        {% endif %}
    </div> <!-- must hide it without javascript -->
</div>