<div>
  <div class="col-md-12 col-sm-12 col-lg-12 no-padding challenge-step">
    <div class="col-md-12 success-stepper no-padding">
      <app-candidate-stepper [candidateStepDetails]="stepperDetails"></app-candidate-stepper>
    </div>
  </div>

  <div class="col-md-12 col-sm-12 col-lg-12 no-padding sucess-msg-container">
    <div class="col-md-6 col-sm-6 col-lg-6 no-padding">
      <div class="col-md-6 col-sm-6 col-lg-6 no-padding">
        <span class="success-img">
          <img src="{{img_path + 'heart_points.png'}}" alt="">
          <p class="sucess-score">500</p>
        </span>
      </div>
      <div class="col-md-6 col-sm-6 col-lg-6 no-padding success-text">
        <p class="success-header">Congratulations!!!</p>
        <p class="success-msg">You have won a pass to your next Challenge. Complete the
          <span *ngIf="challangeStatus === 'primary'">Coding Challenge </span>
          <span *ngIf="challangeStatus === 'coding'">Whiteboard Discussion </span>
          <span *ngIf="challangeStatus === 'business'">Leadership Connect</span>
          <!-- <span *ngIf="challangeStatus === 'LEADERSHIP_CONNECT_CLEARED'">Coding Challenge </span>  -->
          within 24hrs to earn +250 <img class="user-score-heart" alt="heart count" src="{{img_path + 'heart_small.svg'}}"></p>
        <button class="reward-continue-btn" (click)="getBack()">
          <p class="no-padding no-margin">CLAIM REWARD & CONTINUE</p>
        </button>
      </div>
    </div>
    <div class="col-md-6 col-sm-6 col-lg-6 no-padding success-pass">
      <span *ngIf="challangeStatus === 'primary'"><img src="{{img_path + 'coding_challenge_pass@2x.png'}}" alt=""></span>
      <span *ngIf="(challangeStatus === 'coding')"><img src="{{img_path + 'whiteboard_discussion_pass@2x.png'}}" alt=""></span>
      <span *ngIf="challangeStatus === 'business'"><img src="{{img_path + 'leadership_connect_pass@2x.png'}}" alt=""></span>
      <p class="win-score-txt no-margin no-padding">Win upto</p>
      <p class="win-score no-margin no-padding">1000</p>
    </div>
  </div>
  <div class="col-md-12 col-sm-12 col-lg-12 no-padding">
    <div class="col-md-1 col-sm-2 col-lg-2 no-padding"></div>
    <div class="col-md-8 col-sm-8 col-lg-8 no-padding success-separator"></div>
    <div class="col-md-1 col-sm-2 col-lg-2 no-padding"></div>
  </div>

  <div class="col-md-12 col-sm-12 col-lg-12 no-padding success-additional">
    <div class="col-md-2 col-sm-2 col-lg-2 no-padding"></div>
    <div class="col-md-4 col-sm-4 col-lg-4 no-padding">
      <div class="success-additional-info additional-left-panel">
        <div class="success-mark">Marks Scored</div>
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-lg-4 no-padding">
      <div class="success-additional-info additional-right-panel">
        <div class="success-mark">Time Taken
          <p class="given-time">given time: 1hr</p>
        </div>


        <div>
          <div class="success-time-taken time-taken-hr">
            <div class="hr-min-txt">00</div>
            <div class="hour-min">
              <p>hr</p>
            </div>
          </div>
          <div class="success-time-taken time-taken-min">
            <div class="hr-min-txt">45</div>
            <div class="hour-min">
              <p>min</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-2 col-sm-2 col-lg-2 no-padding">

    </div>
  </div>
</div>