{{ block title }}
Period {{ subsession.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}
<style>
  #timeout {
    display: none;
    color: red;
    animation-name: animation_blink;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }

  @keyframes animation_blink {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.1;
    }

    100% {
      opacity: 1;
    }
  }
</style>

<script>
  // Display blinking timeout message after 45s
  setTimeout(
    function () {
      document.getElementById('timeout').style.display = 'block';
    }, 45 * 1000);
</script>

<!-- Blinking timeout message -->
<div id="timeout">
  <h4>Please make a decision now.</h4>
  <br>
</div>

You are <b style="color: #295dcf;">Participant {{ player.role }}</b>. <br><br>

{{ formfields }}

<br><br>

{{ next_button }}

{{ endblock }}