<style data-style="{{ "css" | id }}">
  #{{ "elapsed-time" | id }} .cd-ElapsedTime {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  #{{ "elapsed-time" | id }} .cd-ElapsedTime__box {
    font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px 10px;
    padding: 2px 5px;
    background-color: #EFEFEF;
    border: 1px solid #DDD;
  }

  #{{ "elapsed-time" | id }} .cd-ElapsedTime__valueBox {
    display: flex;
    align-items: flex-end;
  }

  #{{ "elapsed-time" | id }} .cd-ElapsedTime__header {
    color: #777;
    font-size: 0.7rem;
    margin-right: 5px;
  }

  #{{ "elapsed-time" | id }} .cd-ElapsedTime__value {
    color: #666;
  }
  #{{ "elapsed-time" | id }} .cd-ElapsedTime__value--small {
    color: #777;
    font-size: 0.7rem;
  }

  #{{ "elapsed-time" | id }} .cd-ElapsedTime__separator {
    color: #999;
  }
  #{{ "elapsed-time" | id }} .cd-ElapsedTime__separator--small {
    font-size: 0.7rem;
  }
</style>

<div id="{{ "elapsed-time" | id }}" class="cd-ElapsedTime">
  <div class="cd-ElapsedTime__box">
    <span class="cd-ElapsedTime__header">ELAPSED</span>
    <div class="cd-ElapsedTime__valueBox">
      {% if hours != '00' %}
        <span class="cd-ElapsedTime__value">{{ hours }}</span>
        <span class="cd-ElapsedTime__separator">:</span>
      {%  endif %}
      <span class="cd-ElapsedTime__value">{{ minutes }}</span>
      <span class="cd-ElapsedTime__separator">:</span>
      <span class="cd-ElapsedTime__value">{{ seconds }}</span>
      {% if microseconds %}
      <span class="cd-ElapsedTime__separator cd-ElapsedTime__separator--small">.</span>
      <span class="cd-ElapsedTime__value cd-ElapsedTime__value--small">{{ microseconds }}</span>
      {% endif %}
    </div>
  </div>
</div>
