{{ extends "global/Page.html" }}
{{block title}}

{{endblock}}
{{ block content }}
<style>

     .otree-body {
        max-width:100%;
         margin-top: 0px;
    }

     .otree-title{
         size: 0;
         height: 0;
         padding: 0;
     }
    /* .ding-text {*/
    /*font-size: 10px !important;     !* or whatever you like *!*/
    /*font-weight: bold;   !* optional *!*/
    /*}*/
    /* .ding-off {*/
    /*font-size: 8px !important;     !* same as ding-text *!*/
    /*font-weight: normal;*/
    /*color: #555;                   !* optional: softer color *!*/
    /*display: inline-block;*/
    /*transform: translateY(-1px);   !* optional alignment tweak *!*/
    /*}*/
    /*.otherlights-text {*/
    /*font-size: 8px !important;   !* tweak this number as you like *!*/
    /*line-height: 8px !important;*/
    /*display: inline-block;*/
    /*}*/
    /*!* FORCE ROW HEIGHT OVERRIDE *!*/
    /*td > table.table tr {*/
    /*height: 15px !important;   !* pick your target height *!*/
    /*max-height: 11px !important;*/
    /*}*/

    /*td > table.table td,*/
    /*td > table.table th {*/
    /*padding: 0 !important;     !* remove padding that prevents shrinking *!*/
    /*line-height: 16px !important;*/
    /*}*/



    .circle_green
    {
        border: 1px solid green;
        padding: 5px 5px;
        background: green;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

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

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


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

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


    .circle_blue_off {
        border: 2px solid blue;
        padding: 5px 5px;
        border-radius: 100%;
        margin-left: auto;
        margin-right: auto;
        width: 1%;
    }

    .modebar {
        display: none !important;
    }

    .otree-timer {
        font-size: 16px !important;
        padding: 2px 6px !important;
    }
    .otree-timer .progress {
        height: 6px !important;
    }

    /* ── Machine table: fills page height, scrollable if needed ── */
    html, body {
        overflow-y: auto !important;
    }
    #machine-table-cell {
        overflow: visible;
        vertical-align: top;
    }
    #machine-table-cell table.table {
        font-size: 14px !important;
        border-collapse: collapse !important;
        width: 100% !important;
    }
    #machine-table-cell table.table th,
    #machine-table-cell table.table td {
        font-size: 14px !important;
        padding: 2px 6px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        height: auto !important;
    }
    #machine-table-cell .circle_green,
    #machine-table-cell .circle_green_off,
    #machine-table-cell .circle_red,
    #machine-table-cell .circle_red_off,
    #machine-table-cell .circle_blue,
    #machine-table-cell .circle_blue_off {
        padding: 5px 5px !important;
    }
    #machine-table-cell table.table tr:nth-child(even) {
        background-color: #f0f0f0 !important;
    }
    #machine-table-cell table.table tr:nth-child(odd):not(:first-child) {
        background-color: #ffffff !important;
    }
</style>

<table class="table" style="width: 100%; border: 0; border-collapse: collapse; border-bottom: transparent" >

    <tr>
        <td style="width: 30%"><h2>Part 1 for Machine {{round}}:</h2>
            {{formfields}}
            <script>
                for (let ele of document.getElementsByTagName('textarea')) {
                    ele.rows = 6;
                    ele.maxLength = 75;
                }
                window.addEventListener('load', function() {
                    var ta = document.querySelector('textarea[name="notes"]');
                    if (ta) {
                        sessionStorage.setItem('notesTAWidth', ta.offsetWidth);
                        sessionStorage.setItem('notesTAHeight', ta.offsetHeight);
                    }
                });
            </script>
            <div style="float: right">
                {{ next_button }}
            </div>

        </td>
        <td id="machine-table-cell" style="width: 70%; padding: 0;"> {{table}}  </td>
    </tr>

</table>


{{ endblock }}