{{ block title }}
  <center>  </center>
{{ endblock }}

{{ block content }}

<!-- CSS styles -->
<style>
  .otree-timer {
    display: none !important;
  }

  .table-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column; /* this is for displaying the text under each other, instead of next to each other */
  }

  .form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100vh;
    text-align: center;
  }

  /* CSS styles for the table */
  table {
    border-collapse: collapse;
  }

  td {
    border: 1px solid black;
    padding: 0;
    width: 30px;
    height: 30px;
    text-align: center;
  }

  .current-cell {
    background-color: lightgray;  /* Customize with your desired styling */
  }

    .highlighted-cell {
    background-color: lightpink;  /* Customize with your desired styling */
  }

  /* Beautfiul. This way I can use the pre-build function in pythong and now show how much time is left on the participant screen  */
  .otree-timer {
    display: none;
  }

  .form-section button {
    width: 100px;
    height: 40px;
    /* Additional styles for the button (e.g., background-color, font-size, etc.) */
  }

</style>

<!-- Container for centering the grid -->
<div class="table-container">

    <div class="form-container">
        <p> </p>
        <p> If you do not see how many points the player received, but you do see what the player selected next, you may be asked to guess how many points the player received, as in the following example.
         </p>
        <p> </p>
        {{ next_button }}
    </div>
</div>



{{ endblock }}