<style>
    .header h4 {
        position: relative;
        top: 0.9em;
    }
    .header h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #aaa;
        margin: 0.75em 0;
    }
    .header p {
        font-size: 24px;
        color: black;
        font-weight: 600;
    }
</style>

<div class="row header">
    <div class="col-xs-1">
        <div class="<%= nodecolors.statuscolor %> nodecolor"></div>
    </div>

    <div class="col-xs-2">
        <img src="<%= nodeimgurl %>" />
    </div>

    <div class="col-xs-4">
        <h4><%= node.vanityname %>:<br/><%=channels["advvfdipp.wellstatus"].value %></h4>
    </div>
    <div class="col-xs-2">
        <h2>Flow Rate</h2>
        <p><%= Math.round(channels["advvfdipp.flowrate"].value * 100) / 100 %> GPM</p>
    </div>
    <div class="col-xs-2">
        <h2>Fluid Level</h2>
        <p><%= Math.round(channels["advvfdipp.fluidlevel"].value * 10) / 10 %> ft</p>
    </div>
</div>
