<style>
.singleline-svg-wrapper {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	height: calc(100vh - 330px);
}

svg:not(:root) {
	margin: auto;
	height: auto;
	overflow: visible;
	max-height: 100%;
	max-width: 100%;
	display: block;
	font-size: 0;
}

line.switch {
	transform-origin: 100% 100%;
}

line.switch.open {
	transform: rotate(-20deg);
}

line.capswitch.open, rect.capswitch.open {
	transform: rotate(-20deg);
	transform-origin: 100% 100%;
}

.theme-dark svg line, .theme-dark svg polyline, .theme-dark svg circle, .theme-dark svg rect, .theme-dark svg path, .theme-dark svg polygon {
	stroke: #fff;
	fill: none;
}

.theme-light svg line, .theme-light svg polyline, .theme-light svg circle, .theme-light svg rect, .theme-light svg path, .theme-light svg polygon {
	stroke: #555;
	fill: none;
}

.theme-dark svg.updated path, .theme-dark svg.updated polygon {
	stroke-width: 0.3;
	fill: #fff;
}

.theme-light svg.updated path, .theme-light svg.updated polygon {
	stroke-width: 0.3;
	fill: #555;
}

.theme-dark svg .breaker, .theme-light svg .breaker {
	stroke: #ff0000;
}

.theme-dark svg .breaker.open, .theme-light svg .breaker.open {
	stroke: #666;
}

.theme-dark svg .breaker.green, .theme-light svg .breaker.green {
	stroke: #309F39;
}

.theme-dark path.number {
	stroke: none;
	fill: #fff;
}

.theme-light path.number {
	stroke: none;
	fill: #555;
}

.theme-dark svg text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	fill: #fff;
}

.theme-light svg text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	fill: #555;
}

svg text.smalltext {
	font-size: 12px;
}

svg text.tinytext {
	font-size: 4px;
}

svg.updated.smaller text {
	font-size: 10px;
}

svg.updated.smaller text.tinytext {
	font-size: 3.5px;
}

svg.updated.smaller text.smalltext {
	font-size: 9px;
}

svg.updated.smaller text.bigtext {
	font-size: 18px;
}

svg.updated.larger text {
	font-size: 20px;
}

svg.updated.larger text.tinytext {
	font-size: 4px;
}

svg.updated.larger text.smalltext {
	font-size: 12px;
}

svg.updated.larger text.bigtext {
	font-size: 32px;
}

.breaker, .breaker.red {
	stroke: #ff0000!important;
    stroke-width: 4px;
}

.breaker.open {
	stroke: #0f8c3e;
}

.breaker.green {
	stroke: #309f39!important;
}

.breaker.hidden {
	display: none;
}

.dashed {
	stroke-dasharray: 2 2;
}

.theme-dark .dot {
	fill: #fff;
}

.theme-light .dot {
	fill: #555;
}

/** Tables **/

.singlelinedata {
	padding-top: 10px;
}

.singlelinedata table {
	margin-bottom: 5px;
	border-radius: 10px;
	border-collapse: initial;
}

.theme-dark .singlelinedata table {
	background-color: #3d3d3d;
	border: 1px solid #666666;
}

.theme-light .singlelinedata table {
	background-color: #ffffff;
	border: 1px solid #666666;
}

.singlelinedata table tr {
	border-bottom: none !important;
	height: auto;
	margin-top: 10px;
}

.singlelinedata table tr th {
	padding-bottom: 2px;
	padding-top: 5px;
	padding-left: 10px;
}

.singlelinedata table tr th h6 {
	display: inline-block;
	font-weight: bold;
	font-size: 14px;
	margin: 0;
	white-space: initial;
}

.singlelinedata table tr td {
	padding: 0px 10px;
}

.singlelinedata .red {
	color: red;
}

.singlelinedata .subdata {
	font-size: 14px;
	margin-bottom: 15px;
	border-radius: 6px;
	padding: 5px 0;
}

.theme-dark .singlelinedata .subdata {
	background-color: #4d4d4d;
}

.theme-light .singlelinedata .subdata {
	background-color: #e0e0e0;
}

.singlelinedata .subdata h3 {
	font-size: 14px;
	font-weight: bold;
	margin: 8px 25px;
}

.singlelinedata .subdata table {
	border: none !important;
	padding: 10px 5px;
	width: 100%;
	margin: 7px 0;
}

.theme-dark .singlelinedata .subdata table {
	background-color: #2c2c2c;
}

.theme-light .singlelinedata .subdata table {
	background-color: #ffffff;
}

.singlelinedata .subdata table td {
	padding: 0px 2px;
	border-bottom: none;
}

.singlelinedata .subdata table td.bold {
	font-weight: bold;
}

.singlelinedata .subdata .buildingstatus p {
	margin-bottom: 4px;
}

.singlelinedata .subdata .buildingstatus .icon-stack {
	width: 25px;
	vertical-align: top;
	display: inline-block;
}

.singlelinedata .subdata .buildingstatus .status {
	display: inline-block;
}


</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 Wigton</p>
            <h3>Substation</h3>
        </div>
    </div>




    <div class="row">
<div class="col-3 singlelinedata">
    <div class="subdata">
        <h3>High Voltage Output 69kV</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>
                        <tr>
                            <td>Apparent power</td>
                            <td class="text-right bold">-25.00</td>
                            <td>kVA</td>
                        </tr>
                        <tr>
                            <td>Power Factor</td>
                            <td class="text-right bold">1.00</td>
                            <td>cos(φ)</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>Phase 1</td>
                            <td class="text-right bold">20.00</td>
                            <td>kV</td>
                        </tr>
                        <tr>
                            <td>Phase 2</td>
                            <td class="text-right bold">20.00</td>
                            <td>kV</td>
                        </tr>
                        <tr>
                            <td>Phase 3</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>Phase 1</td>
                            <td class="text-right bold">1285.00</td>
                            <td>A</td>
                        </tr>
                        <tr>
                            <td>Phase 2</td>
                            <td class="text-right bold">1111.00</td>
                            <td>A</td>
                        </tr>
                        <tr>
                            <td>Phase 3</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">
            <div class="singleline-svg-wrapper" style="height:auto">
                <!-- @import "/app/singleline/components/wigton_top.svg" -->
            </div>
        </div>
        <div class="col singlelinedata">
            <div class="subdata">
                <h3>Medium voltage 24kV</h3>
                

                <div class="row">
                    <div class="col">
                        <table class="">
                            <tbody>
                                <tr>
                                    <td colspan="3" class="bold">Voltage</td>
                                </tr>
                                <tr>
                                    <td>Phase 1</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 2</td>
                                    <td class="text-right bold">400.00</td>
                                    <td>V</td>
                                </tr>
                                <tr>
                                    <td>Phase 3</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>L1</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>L2</td>
                                    <td class="text-right bold">60.00</td>
                                    <td>A</td>
                                </tr>
                                <tr>
                                    <td>L3</td>
                                    <td class="text-right bold">85.00</td>
                                    <td>A</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 singlelinedata">
            <div class="singleline-svg-wrapper" style="position:relative; height:auto; margin-top:-32px;">
                <div class="singlelinedata" style="position:absolute; top:20%; left:13%; z-index:999;">
                    <div class="subdata">
                        <h3>Circuit 1</h3> 
                        <div class="row">
                            <div class="col">
                                <table class="">
                                    <tbody>
                                        <tr>
                                            <td>L1</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L2</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L3</td>
                                            <td class="text-right bold">399.00</td>
                                            <td>A</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>       
                        </div>
                    </div>
                </div>

                <div class="singlelinedata" style="position:absolute; top:20%; left:42%; z-index:999;">
                    <div class="subdata">
                        <h3>Circuit 2</h3> 
                        <div class="row">
                            <div class="col">
                                <table class="">
                                    <tbody>
                                        <tr>
                                            <td>L1</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L2</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L3</td>
                                            <td class="text-right bold">399.00</td>
                                            <td>A</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>       
                        </div>
                    </div>
                </div>

                <div class="singlelinedata" style="position:absolute; top:20%; left:70%; z-index:999;">
                    <div class="subdata">
                        <h3>Circuit 3</h3> 
                        <div class="row">
                            <div class="col">
                                <table class="">
                                    <tbody>

                                        <tr>
                                            <td>L1</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L2</td>
                                            <td class="text-right bold">400.00</td>
                                            <td>A</td>
                                        </tr>
                                        <tr>
                                            <td>L3</td>
                                            <td class="text-right bold">399.00</td>
                                            <td>A</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>       
                        </div>
                    </div>
                </div>
                <!-- @import "/app/singleline/components/wigton_bottom.svg" -->
            </div>

            
        </div>

    </div>
</div>
