<style>
    #singleline.PGE .PGESVG line,
    #singleline.PGE .PGESVG path,
    #singleline.PGE .PGESVG circle,
    #singleline.PGE .PGESVG .linerect
        {
        fill: none;
    }

    #singleline.PGE .PGESVG .breaker {
        stroke: #ff0000;
        stroke-width: 4px;
    }

    #singleline.PGE .PGESVG .breaker.open {
        stroke: #0f8c3e;
    }



    .theme-dark #singleline.PGE .PGESVG .red {
        stroke: #D52E2B;
    }

    .theme-light #singleline.PGE .PGESVG .red {
        stroke: #D52E2B;
    }

    .theme-dark #singleline.PGE .PGESVG .green {
        stroke: #309F39;
    }

    .theme-light #singleline.PGE .PGESVG .green {
        stroke: #00C90F;
    }

    .theme-dark #singleline.PGE .PGESVG .grey {
        stroke: #666;
    }

    .theme-light #singleline.PGE .PGESVG .grey {
        stroke: #ccc;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.red circle{
        stroke: #D52E2B;
    }

    .theme-light #singleline.PGE .PGESVG .gen.red circle{
        stroke: #D52E2B;
    }

    #singleline.PGE .PGESVG .gen.red text {
        stroke: none;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.red text {
        fill: #D52E2B;
    }

    .theme-light #singleline.PGE .PGESVG .gen.red text{
        fill: #D52E2B;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.green circle {
        stroke: #309F39;
    }

    .theme-light #singleline.PGE .PGESVG .gen.green circle{
        stroke: #00C90F;
    }

    #singleline.PGE .PGESVG .gen.green text {
        stroke: none;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.green text {
        fill: #309F39;
    }

    .theme-light #singleline.PGE .PGESVG .gen.green text {
        fill: #00C90F;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.grey circle {
        stroke: #666;
    }

    .theme-light #singleline.PGE .PGESVG .gen.grey circle {
        stroke: #ccc;
    }

    #singleline.PGE .PGESVG .gen.grey text {
        stroke: none;
    }

    .theme-dark #singleline.PGE .PGESVG .gen.grey text {
        fill: #666;
    }

    .theme-light #singleline.PGE .PGESVG .gen.grey text {
        fill: #ccc;
    }

    #singleline.PGE .PGESVG text {
        font-size: 14px;
    }

    #singleline.PGE .PGESVG text.bigG{
        font-weight: 900;
        font-size: 19px;
    }

    #singleline.PGE .PGESVG .button {
        stroke-width: 0px;
        cursor: pointer;
    }

    .theme-dark #singleline.PGE .PGESVG .button {
        fill: #4d4d4d;
    }

    .theme-light #singleline.PGE .PGESVG .button {
        fill: #e0e0e0;
    }

    #singleline.PGE .PGESVG .button text {
        cursor: pointer;
    }

    #singleline.PGE .PGESVG .disabled {
        opacity: 0.2;
        pointer-events: none;
    }

    #singleline.PGE .PGESVG .turbine *{
        stroke-width: 0px;
    }

    .theme-dark #singleline.PGE .PGESVG .turbine * {
        fill: #ffffff;
    }

    .theme-light #singleline.PGE .PGESVG .turbine * {
        fill: #555555;
    }

    #singleline.PGE .PGESVG .hidden {
        display: none;
    }

    #singleline.PGE .PGESVG .infoicon {
        cursor: pointer;
        stroke-width: 0px;
    }

    .theme-dark #singleline.PGE .PGESVG .infoicon{
        fill: #ffffff;
    }

    .theme-light #singleline.PGE .PGESVG .infoicon {
        fill: #555555;
    }

    #singleline.PGE .PGESVG .info {
        font-size: 11px;
        font-family: Montserrat-Bold, Montserrat;
        font-weight: 700;
        cursor: pointer;
    }

    .theme-dark #singleline.PGE .PGESVG .info {
        fill: #000000;
    }

    .theme-light #singleline.PGE .PGESVG .info {
        fill: #ffffff;
    }
</style>

<div class="row">
    <div class="col-12">
        <!-- @import "/app/backlink/components/back.html" -->
        <!-- @import "/app/filterindicator/components/filterindicator.html" -->
        <!-- @import "/app/monitor/components/filterbuttons.kit" -->
    </div>
</div>
<!-- @import "/app/monitor/components/drilltable.kit" -->
<div class="drillcontainer PGE" id="singleline">
    <div class="row tools detailtools">
        <div class="col-12 text-right">
            <ul>
                <li class="dropdown notifications hidden-sm-down">
                    <a href="javascript:void(0);" class="dropdown-toggle" role="button">
                        <i class="icon icon-export" data-toggle="tooltip" data-original-title="Export"></i>

                    </a>
                    <div class="dropdown-menu" aria-labelledby="gaergrdsdz">

                        <div>
                            <p>Export as:</p>
                            <a href="#"><i class="icon icon-file-excel"> CSV</i></a>
                            <a href="#"><i class="icon icon-file-image"> Image</i></a>
                        </div>
                    </div>
                </li>
                <li>
                    <i class="icon icon-max maximize" data-toggle="tooltip" data-original-title="Maximize"></i>
                </li>
                <li>
                    <a href="/app/monitor/pages/drilltable_detail.html" target="_blank">
                        <i class="icon icon-newwin" data-toggle="tooltip" data-original-title="Open in new window"></i>
                    </a>
                </li>
                <li>
                    <i class="icon icon-close closeDetail" data-toggle="tooltip" data-original-title="Close"></i>
                </li>
            </ul>
        </div>
    </div>

    <div class="row statusrow">
        <div class="col-12 unitdescription">
            <p style="margin-bottom:0;">This is a singleline for PGE</p>
            <h3>Substation</h3>
            <p>20 KV</p>
        </div>
    </div>




    <div class="row">
<div class="col-3 singlelinedata">
    <div class="subdata">
        <h3>20Kv</h3>
        <div class="row">
            <div class="col">
                <table class="datavalues">
                    <tbody>
                        <tr>
                            <td colspan="3" class="bold">Power</td>
                        </tr>
                        <tr>
                            <td>Active power</td>
                            <td class="text-right bold">1234.50</td>
                            <td>kW</td>
                        </tr>
                        <tr>
                            <td>Reactive power</td>
                            <td class="text-right bold">-25.00</td>
                            <td>kVAr</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <table class="">
                    <tbody>
                        <tr>
                            <td colspan="3" class="bold">Voltage</td>
                        </tr>
                        <tr>
                            <td>Voltage A-B</td>
                            <td class="text-right bold">20.00</td>
                            <td>kV</td>
                        </tr>
                        <tr>
                            <td>Voltage B-C</td>
                            <td class="text-right bold">20.00</td>
                            <td>kV</td>
                        </tr>
                        <tr>
                            <td>Voltage C-A</td>
                            <td class="text-right bold">19.92</td>
                            <td>kV</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <table class="">
                    <tbody>
                        <tr>
                            <td colspan="3" class="bold">Current</td>
                        </tr>
                        <tr>
                            <td>Current A</td>
                            <td class="text-right bold">1285.00</td>
                            <td>A</td>
                        </tr>
                        <tr>
                            <td>Current B</td>
                            <td class="text-right bold">1111.00</td>
                            <td>A</td>
                        </tr>
                        <tr>
                            <td>Current C</td>
                            <td class="text-right bold">1285.00</td>
                            <td>A</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <table class="">
                    <tbody>
                        <tr>
                            <td class="bold">Frequency</td>
                            <td class="text-right bold">60.00</td>
                            <td>Hz</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
        <div class="col-6 singlelinedata">

            <!-- @import "/app/singleline/components/PGE2.svg" -->

        </div>
        <div class="col singlelinedata">
            <div class="subdata">
                <h3>400v</h3>
                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Power</td>
                                </tr>
                                <tr>
                                    <td>Active power</td>
                                    <td class="text-right bold">1234.50</td>
                                    <td>kW</td>
                                </tr>
                                <tr>
                                    <td>Reactive power</td>
                                    <td class="text-right bold">-25.00</td>
                                    <td>kVAr</td>
                                </tr>
                                <tr>
                                    <td>Active Energy Prod.</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>Wh</td>
                                </tr>
                                <tr>
                                    <td>Active Energy Cons.</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>Wh</td>
                                </tr>
                                <tr>
                                    <td>Reactive Energy Prod.</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>VAhr</td>
                                </tr>
                                <tr>
                                    <td>Reactive Energy Cons.</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>VAhr</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Voltage A-B</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Voltage B-C</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Voltage C-A</td>
                                    <td class="text-right bold">399.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>        </div>

                    <div class="row">
                    <div class="col" >
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Current A</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Current B</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Current C</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
      
<!--             <div class="subdata">
                <h3>Low voltage Output 400v</h3>
                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Power</td>
                                </tr>
                                <tr>
                                    <td>Active power</td>
                                    <td class="text-right bold">1234.50</td>
                                    <td>kW</td>
                                </tr>
                                <tr>
                                    <td>Reactive power</td>
                                    <td class="text-right bold">-25.00</td>
                                    <td>kVAr</td>
                                </tr>
                                <tr>
                                    <td>Active Energy Prod.</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>Wh</td>
                                </tr>
                                <tr>
                                    <td>Active Energy Cons.</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>Wh</td>
                                </tr>
                                <tr>
                                    <td>Reactive Energy Prod.</td>
                                    <td class="text-right bold">30155.00</td>
                                    <td>VAhr</td>
                                </tr>
                                <tr>
                                    <td>Reactive Energy Cons.</td>
                                    <td class="text-right bold">1.00</td>
                                    <td>VAhr</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-6" style="padding-right:8px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Voltage A-B</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Voltage B-C</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Voltage C-A</td>
                                    <td class="text-right bold">399.00</td>
                                    <td>V</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-6" style="padding-left:7px;">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Current</td>
                                </tr>
                                <tr>
                                    <td>Current A</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Current B</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>Current C</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td class="bold">Frequency</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>Hz</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>


<script>

    document.getElementById("button_3q2").addEventListener("click", toggle_3q2);
    document.getElementById("button_qn1").addEventListener("click", toggle_qn1);


    function toggle_3q2() {
        var element1 = document.getElementById("button_3q2_close");
        var element2 = document.getElementById("button_3q2_open");
        var element3 = document.getElementById("switch_3q2_open");
        var element4 = document.getElementById("switch_3q2_closed");
        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }

    function toggle_qn1() {
        var element1 = document.getElementById("button_qn1_close");
        var element2 = document.getElementById("button_qn1_open");
        var element3 = document.getElementById("switch_qn1_open");
        var element4 = document.getElementById("switch_qn1_closed");
        element1.classList.toggle("hidden");
        element2.classList.toggle("hidden");
        element3.classList.toggle("hidden");
        element4.classList.toggle("hidden");
    }



</script>