{{ block content }}

<style>
     .otree-body {
        max-width:80%
    }
    .circle_green
    {
        border: 1px solid green;
        padding: 7px 7px;
        background: green;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_green_off
    {
        border: 2px solid green;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

       .circle_red
    {
        border: 1px solid red;
        padding: 7px 7px;
        background: red;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_red_off {
        border: 2px solid red;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

        .circle_blue
    {
        border: 1px solid blue;
        padding: 7px 7px;
        background: blue;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }


    .circle_blue_off {
        border: 2px solid blue;
        padding: 7px 7px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }
</style>


    <table class="table" style="width: 100%; border: 0; border-collapse: collapse; margin: auto; padding: 20px; border-bottom: transparent;
vertical-align: center" >

    <tr>
        <td style="width: 40%"><h2>Machine {{round}}:</h2>


            <div style="background: ghostwhite;
                        font-size: 20px;
                        width: 95%;
                        height: 300px;
                        padding: 10px;
                        border: 2px solid lightgray;
                        margin: 10px;
                        overflow-y: auto;
             ">

            <h4>Notes:</h4>
            {{notes}}
            </div>

        </td>
        <td style="width: 40%; padding: 0; vertical-align:top ">
            <table class="table" style="width: 100%; border: 0; border-collapse: collapse; margin: auto; padding: 20px;
            border-bottom: transparent; white-space: nowrap">
                <tr>
                    <th style="padding-top: 70px"><h4>Guess</h4></th> <th> </th>
                </tr>
                <tr>
                    <td style="padding-right: 0">
                        <table class="table" style="text-align: center; vertical-align:middle">
                        <tr><th>Red Light</th><th>Blue Light</th><th>Other Lights</th></tr>
                            {{ if color == 1 }}
                            <tr height="95px"><td> <div class="circle_red"></div> </td><td> &#x3f </td><td> &#x3f </td></tr>
                            {{ else }}
                            <tr height="95px"><td> &#x3f </td><td> <div class="circle_blue"></div> </td><td> &#x3f </td></tr>
                            {{ endif }}
                        </table>

                    </td>
                    <td style="width: 10%; padding: 0; vertical-align:top"><h3></h3>
            <table class="table"> <tr><th>Guess the Sound:</th></tr>
                <tr><td>{{formfield 'guess33'}} </td></tr></table>
        </td>
                </tr>
            </table>
        </td>



    </tr>

</table>

<div style="float: right"> {{ next_button }} </div>

{{ endblock }}