/* PLAYER ROOT CONTAINER */
.quiz-player {
  max-width: @quiz-container-width;
  width: 100%; /* for IE11 : can not apply auto margin with max-width */
  margin: 0 auto;

  .progress {
    margin-bottom: @component-margin-bottom - 4px;
  }

  .score-gauge {
    margin-bottom: @component-margin-bottom;
  }

  .step-description {
    margin-bottom: @component-margin-bottom;
  }

  .player-nav {
    display: flex;
    justify-content: space-between;
  }

  .quiz-gauges-container {
    display: flex;
    justify-content: flex-end;
  }

  .timer-container {
    display: flex;
    justify-content: flex-end;
  }

  .quiz-progression-container {
    margin-right: 10px;

    .score-gauge {
      font-size: 70px;
      min-width: 70px;
      margin-bottom: 0;

      span {
        visibility: visible;
      }
    }
  }

  .alert-test-mode {
    margin-top: @component-margin-bottom;
  }

  .progress + .alert-test-mode {
    margin-top: 0;
  }

  .progress + .current-step {
    .step-title {
      margin-top: @line-height-computed - 4px; // 4px is to absorb progress bar height
    }
  }

  .quiz-gauges-container + .current-step {
    .step-title {
      margin-top: 0;
    }
  }
}
