{{ block title }}
    Development of the value of your asset
{{ endblock }}

{{ block styles }}
<style>
    /* Loader styles */
    .loader {
        display: inline-flex;
        align-items: center;
        justify-content: right;
    }
    .loader__dot {
        animation: 1s blink infinite;
    }
    .loader__dot:nth-child(2) {
        animation-delay: 250ms;
    }
    .loader__dot:nth-child(3) {
        animation-delay: 500ms;
    }
    @keyframes blink {
        50% { color: transparent; }
    }
</style>
{{ endblock }}

{{ block content }}

{{if player.time_pressure == 1}}

<table style="width:90%" class="center">
    <tr>
        <td style="width: 20%; text-align: right"></td>
        <td style="width: 10%; text-align: center"></td>
        <td style="width: 35%; text-align: left"></td>
        <td style="width: 25%; background-color: lightgray; font-size: 15px; text-align: center"><b>1,000</b></td>
        <td style="width: 10%; font-size: 15px; text-align: right">points</td>
    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%"></td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
            <div class="loader">Drawing a ball from the urn for the 1st quarter
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="background-color: #ffdcc0; text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="width: 10%"></td>
    </tr>
</table>

{{else}}

<table style="width:90%" class="center">
    <tr>
        <td style="width: 20%; text-align: right"></td>
        <td style="width: 10%; text-align: center"></td>
        <td style="width: 35%; text-align: left"></td>
        <td style="width: 25%; background-color: lightgray; font-size: 15px; text-align: center"><b>1,000</b></td>
        <td style="width: 10%; font-size: 15px; text-align: right">points</td>

    </tr>
    <tr>
        <td style="width: 20%"></td>
        <td style="width: 10%"></td>
        <td style="width: 35%"></td>
        <td style="width: 25%; font-size:15px; text-align: center"> &#8675 </td>
        <td style="width: 10%"></td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
            <div class="loader">Drawing a ball from the urn for the 1st quarter
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="background-color: #ffdcc0; text-align: center">
            <div class="loader">
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            <span class="loader__dot">.</span>
            </div>
        </td>
        <td style="width: 10%"></td>
    </tr>
</table>

{{endif}}

<style>
    .otree-timer {
        display: none;
    }
    .center {
  margin-left: auto;
  margin-right: auto;
    }
</style>


{{ endblock }}