Here is one that I am hoping the HTML Gurus might be able to shed some light on.

I have a HTML panel on a Dashboard VP which when displayed it initially looks like this.

The code for it looks like this...

<div class="container dashboard">
  <div class="row m-t-20">
    <div class="col-md-12 col-sm-12">
      <div style="margin-top:-39px;" class="panel no-bd bd-3 panel-stat">
        <div class="panel-body bg-darkblue p-15">
          <div style="padding-bottom:11px;" class="row m-b-10">
            <!--Top Carousel-->
            <div class="col-xs-3"><span class="fa fa-users fa-5x"></span></div>
            <div class="col-xs-9">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="64">
                <div>
                  <small class="stat-title">Total Project Hours</small>
                  <h1 id="todaypo" class="m-0 w-300"><<SystemSettings.StatTotalProjectHours@#,###>></h1>
                </div>
                <div>
                  <small class="stat-title">Hours This Month</small>
                  <h1 id="monthpo" class="m-0 w-300"><<SystemSettings.StatHoursCurrentMonth@#,###>></h1>
                </div>
              </div>
            </div>
          </div>
          <!--Lower Row-->
          <div class="row">
            <!--Left Hand Carousel-->
            <div class="col-xs-6">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">
                <div>
                  <small class="stat-title">ExPat Staff</small>
                  <h4 id="yourpotoday" class="m-0 w-300"><<SystemSettings.StatExpatStaffHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">National Staff</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatNationalStaffHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">National Wages</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatNationalWagesHours@#,###>></h4>
                </div>
                <div>
                  <small class="stat-title">Sub-Contractors</small>
                  <h4 id="yourpomonth" class="m-0 w-300"><<SystemSettings.StatSubcontratorHours@#,###>></h4>
                </div>
              </div>
            </div>
            <!--Right Hand Carousel-->
            <div class="col-xs-6">
              <div class="live-tile" data-mode="carousel" data-direction="vertical" data-delay="3500" data-height="60">
                <div>
                  <small class="stat-title">ExPat Staff</small>
                  <h4 id="yourpotoday" class="m-0 w-300">
                    <<SystemSettings.StatExpatStaffPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">National Staff</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatNationalStaffPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">National Wages</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatNationalWagesPercent>>%</h4>
                </div>
                <div>
                  <small class="stat-title">Sub-Contractors</small>
                  <h4 id="yourpomonth" class="m-0 w-300">
                    <<SystemSettings.StatSubcontratorPercent>>%</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I have a process that updates the SystemSettings value for the numbers in the display.

I have this panel in the VP set to refresh every time that process is run.

However, immediately after running the process and the refresh being executed, my panel turns into this....

Wondering if anyone has any ideas on what might be causing it please?