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

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

     .otree-body {
        max-width:80%;
         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;
    }
</style>

<br><br>


<h2 style="margin-bottom: 20px;">Example Machine</h2>


<table style="width: 90%; border-collapse: collapse;">
    <tr>
        <!-- LEFT: NOTES -->
        <td style="width: 30%; vertical-align: top; padding-right: 20px;">

            {{ formfields }}

            <script>
                for (let ele of document.getElementsByTagName('textarea')) {
                    ele.rows = 6;
                    ele.maxLength = 75;
                }
            </script>



        </td>

        <!-- RIGHT: MACHINE (LINES) -->
        <td style="width: 70%; vertical-align: top; padding: 0; overflow-y: auto;">
            {{ table }}
        </td>
    </tr>


</table>
     <div style="margin-top: 20px; text-align: right;">
                {{ next_button }}
            </div>
{{ endblock }}