{{ block styles }}
    <link href="{{ static 'global/css/styles.css' }}" rel="stylesheet">
    <link href="{{ static 'global/css/font.css' }}" rel="stylesheet">
    <style>
        .score-container {
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .score-circle {
            background-color: #71B16C;
            border-radius: 50%;
            display: inline-block;
            padding: 20px 40px;
            color: black;
        }
        .info-container {
            margin-bottom: 20px;
            width: 60%;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
{{ endblock }}

{{ block scripts }}
    <script src="{{ static 'global/js/disable.js' }}"></script>
{{ endblock }}

{{ block title }}
    Review {{ subsession.round_number }}
{{ endblock }}

{{ block content }}

    <div class="info-container">
        {{ include 'task_group/includes/info_table_reversed.html' }}
    </div>

    <!-- <p style="text-align: center;">
        <b>NOTE:</b> This is only a practice and will NOT impact your final performance.
    </p> -->

    <div class="score-container">
        <div class="score-circle">
            Actual Score {{ data.x2txmthPCT }}
        </div>
    </div>
    {{ next_button }}

{{ endblock }}