<div class="lp-progress-component">
  <div class="np-top-cta-progress-content">
    <div class="np-top-cta-progress-title np-text-title">
      Training Progress
    </div>
    <div class="np-progress-bar-container">
      <div style="width: {{ learning_path.progress }}%" class="np-button-background-color np-card-progress-bar"></div>
    </div>
    <div class="np-top-cta-progress-text np-button-color" data-progress="{{ learning_path.progress }}">
      {% t shared.progress
        , count: learning_path.progress %}
    </div>
  </div>

  {% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big new-hire-lp-button np-hidden" %}
</div>

<style>
  .lp-progress-component {
    align-items: center;
    border: 1px solid #ccc;
    padding: 16px;
    margin-bottom: 32px;
  }

  .np-top-cta-progress-title {
    margin-bottom: 10px;
    color: #000;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
  }

  .np-progress-bar-container {
    background:#e8e1da;
  }

  .np-top-cta-progress-text  {
    margin-top:8px;
  }

  @media (min-width:768px) {
    .lp-progress-component {
      display: flex;
      padding: 16px 32px;
    }
  }
</style>