<div class="modal-background" role="dialog" aria-labelledby="import-heading" aria-describedby="import-description">
    <div class="modal-container _48">
      <div class="wizard-steps-container">
        <div class="wizard-steps" role="navigation" aria-label="Import Process Steps">
          <div class="wizard-step completed">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon current-step" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                  <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                  <polygon id="step1-checkmark" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                </polygon></svg></div>
              <div>
                <div class="wizard-step-heading" id="step1-label">Step 1</div>
                <div id="step1-description">Upload CSV File</div>
              </div>
            </div>
            <div class="wizard-divider-arrow" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                <polygon id="caretPolygon1" points="0,0 0,24 12,12" fill="none">
                <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
              </polygon></svg></div>
            <div class="wizard-bottom-border current-step"></div>
          </div>
          <div class="wizard-step completed">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon current-step" aria-hidden="true">
                  <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
                  <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
                  <polygon id="step2-checkmark" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
                </polygon></svg></div>
              <div>
                <div class="wizard-step-heading" id="step2-label">Step 2</div>
                <div id="step2-description">Map Fields</div>
              </div>
            </div>
            <div class="wizard-divider-arrow" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                <polygon id="caretPolygon2" points="0,0 0,24 12,12" fill="none">
                <line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
                <line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
              </polygon></svg></div>
            <div class="wizard-bottom-border current-step"></div>
          </div>
          <div class="wizard-step" aria-current="step">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon current-step" aria-hidden="true"><svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                  <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path>
                </svg></div>
              <div>
                <div class="wizard-step-heading" id="step3-label">Step 3</div>
                <div id="step3-description">Import Data</div>
              </div>
            </div>
            <div class="wizard-bottom-border current-step"></div>
          </div>
        </div>
      </div>
      <div class="modal-heading-container">
        <h1 class="modal-h1" id="import-heading">Importing Data</h1>
        <div id="import-description">Your data is being processed. This might take a few moments, so please be patient.</div>
      </div>
      <div class="csv-importing-message" aria-live="polite" role="status">
        <div class="w-embed" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 24 24">
            <circle cx="12" cy="12" r="10" stroke="var(--brand-colors--gray-600)" stroke-width="4" fill="none" opacity="0.25"></circle>
            <path fill="var(--brand-colors--brand-600)" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z">
              <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite">
          </animateTransform></path></svg></div>
        <div id="import-status-message">Importing, please wait...</div>
      </div>
      <div class="form-button-container">
        <button type="button" id="wait-button" class="button full disabled w-button" disabled aria-disabled="true">Please Wait...</button>
      </div>
    </div>
  </div>