<form class='set_channel'>
    <br />
    <div class="pad15">
        <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
    </div>
    <br />
  <div class="text-center"><h1>CONTROL</h1></div>
  <div class="row row-flex">
    <div class='col-xs-12 text-center box-me'>
        <div class="col-xs-6 col-xs-offset-3">
            <h2>Motor Speed Reference (Hz)</h2>
            <input class="form-control" data-channelId='<%= channels["vfdipp.vfdspeedref"].channelId %>'
                data-techName='<%=channels["vfdipp.vfdspeedref"].techName %>'
                data-name='<%= channels["vfdipp.vfdspeedref"].name %>'
                data-val="<%=channels["vfdipp.vfdspeedref"].value %>"
                type="number" step="any"
                id="<%= channels["vfdipp.vfdspeedref"].channelId %>"
                value="<%=channels["vfdipp.vfdspeedref"].value %>">
        </div>
    </div>
    <div class='col-xs-4 text-center box-me'>
        <h2>Start Command</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="startcommand" data-channelId='<%= channels["vfdipp.startcommand"].channelId %>' data-techName='<%=channels["vfdipp.startcommand"].techName %>' data-name='vfdipp.startcommand' id="<%= channels["vfdipp.startcommand"].channelId %>" name="<%= channels["vfdipp.startcommand"].channelId %>">
    </div>
    <div class='col-xs-4 text-center box-me'>
        <h2>Stop Command</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="stopcommand" data-channelId='<%= channels["vfdipp.stopcommand"].channelId %>' data-techName='<%=channels["vfdipp.stopcommand"].techName %>' data-name='vfdipp.stopcommand' id="<%= channels["vfdipp.stopcommand"].channelId %>" name="<%= channels["vfdipp.stopcommand"].channelId %>">
    </div>
    <div class='col-xs-4 text-center box-me'>
        <h2>Clear VFD Fault</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="vfdclearfault" data-channelId='<%= channels["vfdipp.vfdclearfault"].channelId %>' data-techName='<%=channels["vfdipp.vfdclearfault"].techName %>' data-name='vfdipp.vfdclearfault' id="<%= channels["vfdipp.vfdclearfault"].channelId %>" name="<%= channels["vfdipp.vfdclearfault"].channelId %>">
    </div>
</div>
<div class="text-center"><h1>VFD CONFIGURATION</h1></div>
<div class="row row-flex">
    <div class="col-md-6 box-me">
        <h2>MOTOR NAMEPLATE DATA</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>Motor FLA (A)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatefla"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatefla"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatefla"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatefla"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatefla"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatefla"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor HP (HP)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatehp"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatehp"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatehp"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatehp"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatehp"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatehp"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor RPM (RPM)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplaterpm"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplaterpm"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplaterpm"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplaterpm"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplaterpm"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplaterpm"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatehz"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatehz"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatehz"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatehz"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatehz"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatehz"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Overload Current (A)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplateolcurrent"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplateolcurrent"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplateolcurrent"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplateolcurrent"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplateolcurrent"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplateolcurrent"].value %>">

                    </td>
                </tr>

                <tr>
                    <td>Motor Volts (V)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdnameplatevolts"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdnameplatevolts"].techName %>'
                          data-name='<%= channels["vfdipp.vfdnameplatevolts"].name %>'
                          data-val="<%=channels["vfdipp.vfdnameplatevolts"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdnameplatevolts"].channelId %>"
                          value="<%=channels["vfdipp.vfdnameplatevolts"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Motor Poles</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdmotorpoles"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdmotorpoles"].techName %>'
                          data-name='<%= channels["vfdipp.vfdmotorpoles"].name %>'
                          data-val="<%=channels["vfdipp.vfdmotorpoles"].value %>"
                          type="number"
                          id="<%= channels["vfdipp.vfdmotorpoles"].channelId %>"
                          value="<%=channels["vfdipp.vfdmotorpoles"].value %>">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-md-6 box-me">
        <h2>VFD SETTINGS</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>Min. Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdminfreq"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdminfreq"].techName %>'
                          data-name='<%= channels["vfdipp.vfdminfreq"].name %>'
                          data-val="<%=channels["vfdipp.vfdminfreq"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdminfreq"].channelId %>"
                          value="<%=channels["vfdipp.vfdminfreq"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Max. Frequency (Hz)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdmaxfreq"].channelId %>'
                         data-valueupdate="vfdmaxfreq"
                          data-techName='<%=channels["vfdipp.vfdmaxfreq"].techName %>'
                          data-name='<%= channels["vfdipp.vfdmaxfreq"].name %>'
                          data-val="<%=channels["vfdipp.vfdmaxfreq"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdmaxfreq"].channelId %>"
                          value="<%=channels["vfdipp.vfdmaxfreq"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Accel. Time (sec)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfdacceltime"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfdacceltime"].techName %>'
                          data-name='<%= channels["vfdipp.vfdacceltime"].name %>'
                          data-val="<%=channels["vfdipp.vfdacceltime"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfdacceltime"].channelId %>"
                          value="<%=channels["vfdipp.vfdacceltime"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Decel. Time (sec)</td>
                    <td>
                      <input class="form-control" data-channelId='<%= channels["vfdipp.vfddeceltime"].channelId %>'
                          data-techName='<%=channels["vfdipp.vfddeceltime"].techName %>'
                          data-name='<%= channels["vfdipp.vfddeceltime"].name %>'
                          data-val="<%=channels["vfdipp.vfddeceltime"].value %>"
                          type="number" step="any"
                          id="<%= channels["vfdipp.vfddeceltime"].channelId %>"
                          value="<%=channels["vfdipp.vfddeceltime"].value %>">
                    </td>
                </tr>

                <tr>
                    <td>Stop Mode</td>
                    <td>
                        <% if (channels["vfdipp.vfdstopmode"].value == 0) { %>
                            <span class="label label-success">Coast</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 1) { %>
                            <span class="label label-danger">Ramp</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 2) { %>
                            <span class="label label-danger">Ramp to Hold</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 3) { %>
                            <span class="label label-danger">DC Brake</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 4) { %>
                            <span class="label label-danger">DCBrkAutoOff</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 5) { %>
                            <span class="label label-danger">Current Limit</span>
                        <% } else if (channels["vfdipp.vfdstopmode"].value == 6) { %>
                            <span class="label label-danger">Fast Brake</span>
                        <% } %>
                    </td>
                </tr>

                <tr>
                    <td>Torque Perf. Mode</td>
                    <td>
                        <% if (channels["vfdipp.vfdtorqueperfmode"].value == 0){ %>
                            <span class="label label-danger">V/Hz</span>
                        <% } else if (channels["vfdipp.vfdtorqueperfmode"].value == 1){ %>
                            <span class="label label-success">SVC</span>
                        <% } else if (channels["vfdipp.vfdtorqueperfmode"].value == 2){ %>
                            <span class="label label-danger">Economize</span>
                        <% } else if (channels["vfdipp.vfdtorqueperfmode"].value == 3){ %>
                            <span class="label label-danger">Vector</span>
                        <% } %>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="text-center"><h1>DOWNHOLE CONFIGURATION</h1></div>
<div class="row row-flex">
      <div class='col-xs-12 text-center box-me'>
        <h2>Downhole Sensor Enabled</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="downholetoolenabled" data-channelId='<%= channels["vfdipp.downholetoolenabled"].channelId %>' data-techName='<%=channels["vfdipp.downholetoolenabled"].techName %>' data-name='vfdipp.downholetoolenabled' id="<%= channels["vfdipp.downholetoolenabled"].channelId %>" name="<%= channels["vfdipp.downholetoolenabled"].channelId %>">
      </div>
      <div class='col-xs-6 text-center box-me'>
          <h2>Pressure Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Pressure Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressureshutdownenabled" data-channelId='<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressureshutdownenabled"].techName %>' data-name='vfdipp.dhpressureshutdownenabled' id="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhpressureshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Shutdown Limit (PSI)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhpressureshutdownlimit"].techName %>'
                                data-name='<%= channels["vfdipp.dhpressureshutdownlimit"].name %>'
                                data-val="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhpressureshutdownlimit"].channelId %>"
                                value="<%=channels["vfdipp.dhpressureshutdownlimit"].value %>">
                        </td>
                      </tr>

                      <tr>
                          <td>Pressure Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhpressurestartupenabled" data-channelId='<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhpressurestartupenabled"].techName %>' data-name='vfdipp.dhpressurestartupenabled' id="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>" name="<%= channels["vfdipp.dhpressurestartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Pressure Startup Limit (PSI)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhpressurestartup"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhpressurestartup"].techName %>'
                                data-name='<%= channels["vfdipp.dhpressurestartup"].name %>'
                                data-val="<%=channels["vfdipp.dhpressurestartup"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhpressurestartup"].channelId %>"
                                value="<%=channels["vfdipp.dhpressurestartup"].value %>">
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>

      <div class='col-xs-6 text-center box-me'>
          <h2>Temperature Trip</h2>
          <div class="gauge-box">
              <table class="table">
                  <tbody>
                      <tr>
                          <td>Temp. Shutdown Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempshutdownenabled" data-channelId='<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempshutdownenabled"].techName %>' data-name='vfdipp.dhtempshutdownenabled' id="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>" name="<%= channels["vfdipp.dhtempshutdownenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temp. Shutdown Limit (&deg;F)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhtempshutdown"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhtempshutdown"].techName %>'
                                data-name='<%= channels["vfdipp.dhtempshutdown"].name %>'
                                data-val="<%=channels["vfdipp.dhtempshutdown"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhtempshutdown"].channelId %>"
                                value="<%=channels["vfdipp.dhtempshutdown"].value %>">
                        </td>
                      </tr>

                      <tr>
                          <td>Temp. Restart Enabled</td>
                          <td>
                              <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="dhtempstartupenabled" data-channelId='<%= channels["vfdipp.dhtempstartupenabled"].channelId %>' data-techName='<%=channels["vfdipp.dhtempstartupenabled"].techName %>' data-name='vfdipp.dhtempstartupenabled' id="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>" name="<%= channels["vfdipp.dhtempstartupenabled"].channelId %>">
                          </td>
                      </tr>

                      <tr>
                          <td>Temp. Startup Limit (&deg;F)</td>
                          <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.dhtempstartuplimit"].channelId %>'
                                data-techName='<%=channels["vfdipp.dhtempstartuplimit"].techName %>'
                                data-name='<%= channels["vfdipp.dhtempstartuplimit"].name %>'
                                data-val="<%=channels["vfdipp.dhtempstartuplimit"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.dhtempstartuplimit"].channelId %>"
                                value="<%=channels["vfdipp.dhtempstartuplimit"].value %>">
                          </td>
                      </tr>

                  </tbody>
              </table>
          </div>
      </div>
</div>
<div class="text-center"><h1>PRESSURE TRANSDUCER CONFIGURATION</h1></div>
<div class="row row-flex">
    <div class='col-xs-12 text-center box-me'>
        <h2>Tubing Pressure Transducer Enabled</h2>
        <input type="toggle" data-checkedValue="1" data-uncheckedValue="0" data-valueupdate="tubingpressuretransducerenabled" data-channelId='<%= channels["vfdipp.tubingpressuretransducerenabled"].channelId %>' data-techName='<%=channels["vfdipp.tubingpressuretransducerenabled"].techName %>' data-name='vfdipp.tubingpressuretransducerenabled' id="<%= channels["vfdipp.tubingpressuretransducerenabled"].channelId %>" name="<%= channels["vfdipp.tubingpressuretransducerenabled"].channelId %>">
    </div>
    <div class='col-xs-6 text-center box-me'>
        <h2>Scaling Values</h2>
        <div class="gauge-box">
            <table class="table">
                <tbody>
                        <tr>
                            <td>Min Value (PSI)</td>
                            <td>
                                <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressureeumin"].channelId %>'
                                    data-techName='<%=channels["vfdipp.tubingpressureeumin"].techName %>'
                                    data-name='<%= channels["vfdipp.tubingpressureeumin"].name %>'
                                    data-val="<%=channels["vfdipp.tubingpressureeumin"].value %>"
                                    type="number" step="any"
                                    id="<%= channels["vfdipp.tubingpressureeumin"].channelId %>"
                                    value="<%=channels["vfdipp.tubingpressureeumin"].value %>">
                            </td>
                        </tr>

                        <tr>
                            <td>Max Value (PSI)</td>
                            <td>
                                <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressureeumax"].channelId %>'
                                    data-techName='<%=channels["vfdipp.tubingpressureeumax"].techName %>'
                                    data-name='<%= channels["vfdipp.tubingpressureeumax"].name %>'
                                    data-val="<%=channels["vfdipp.tubingpressureeumax"].value %>"
                                    type="number" step="any"
                                    id="<%= channels["vfdipp.tubingpressureeumax"].channelId %>"
                                    value="<%=channels["vfdipp.tubingpressureeumax"].value %>">
                            </td>
                        </tr>
                  </tbody>
              </table>
          </div>
    </div>

    <div class='col-xs-6 text-center box-me'>
        <h2>Trip Settings</h2>
        <div class="gauge-box">
            <table class="table">
                <tbody>
                    <tr>
                        <td>Low Limit (PSI)</td>
                        <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressurelosp"].channelId %>'
                                data-techName='<%=channels["vfdipp.tubingpressurelosp"].techName %>'
                                data-name='<%= channels["vfdipp.tubingpressurelosp"].name %>'
                                data-val="<%=channels["vfdipp.tubingpressurelosp"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.tubingpressurelosp"].channelId %>"
                                value="<%=channels["vfdipp.tubingpressurelosp"].value %>">
                        </td>
                    </tr>

                    <tr>
                        <td>High Limit (PSI)</td>
                        <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressurehisp"].channelId %>'
                                data-techName='<%=channels["vfdipp.tubingpressurehisp"].techName %>'
                                data-name='<%= channels["vfdipp.tubingpressurehisp"].name %>'
                                data-val="<%=channels["vfdipp.tubingpressurehisp"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.tubingpressurehisp"].channelId %>"
                                value="<%=channels["vfdipp.tubingpressurehisp"].value %>">
                        </td>
                    </tr>

                    <tr>
                        <td>Startup Delay (sec)</td>
                        <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressurealarmstartupdelay"].channelId %>'
                                data-techName='<%=channels["vfdipp.tubingpressurealarmstartupdelay"].techName %>'
                                data-name='<%= channels["vfdipp.tubingpressurealarmstartupdelay"].name %>'
                                data-val="<%=channels["vfdipp.tubingpressurealarmstartupdelay"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.tubingpressurealarmstartupdelay"].channelId %>"
                                value="<%=channels["vfdipp.tubingpressurealarmstartupdelay"].value %>">
                        </td>
                    </tr>

                    <tr>
                        <td>Trip Delay (sec)</td>
                        <td>
                            <input class="form-control" data-channelId='<%= channels["vfdipp.tubingpressurealarmdelay"].channelId %>'
                                data-techName='<%=channels["vfdipp.tubingpressurealarmdelay"].techName %>'
                                data-name='<%= channels["vfdipp.tubingpressurealarmdelay"].name %>'
                                data-val="<%=channels["vfdipp.tubingpressurealarmdelay"].value %>"
                                type="number" step="any"
                                id="<%= channels["vfdipp.tubingpressurealarmdelay"].channelId %>"
                                value="<%=channels["vfdipp.tubingpressurealarmdelay"].value %>">
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>
<br />
<div class="pad15">
    <button class='btn btn-theme btn-block set_channel_btn' value='Save'>APPLY CHANGES</button>
</div>

</form>

<style>
    .box-me {
        position: relative;
        padding: 0.5em;
        padding-bottom: 1.5em;
        border: 1px solid #eee;
        /*margin: 1em 0;*/
    }
    .box-me .gauge-box {
        margin-top: -0.25em;
    }

    .pad15 {
        margin: 15px 15px;
    }

    .box-me h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #666;
        font-weight: 400;
        letter-spacing: 1px;
        z-index: 100;
    }
    .dynamic-chart-form {
        background-color: whiteSmoke;
        padding: 1em 0.5em;
        margin-top: 1em;
    }

    .row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display:         flex;
        flex-wrap: wrap;
    }
    .row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }

    #systemStatusTimelineContainer h2 {
        text-transform: uppercase;
        font-size: 14px;
        color: #666;
        font-weight: 400;
        letter-spacing: 1px;
        z-index: 100;
    }
</style>
