diff --git a/.env b/.env
deleted file mode 100644
index 5fc10d3..0000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-VUE_APP_API_URL=http://localhost:8000
\ No newline at end of file
diff --git a/src/components/DamageChart.vue b/src/components/DamageChart.vue
new file mode 100644
index 0000000..02dcdad
--- /dev/null
+++ b/src/components/DamageChart.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="player-dmg">
+    <h4 class="text-center mt-3 mb-3">Team 1</h4>
+    <div id="dmg-chart-1"></div>
+    <hr>
+    <h4 class="text-center mt-3 mb-3">Team 2</h4>
+    <div id="dmg-chart-2"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
+import {BarChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+export default {
+  name: "FlashChart",
+  props: {
+    stats: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const checkStatEmpty = (stat) => {
+      if (stat)
+        return stat
+    }
+
+    const truncate = (str, len, ending) => {
+      if (len == null)
+        len = 100
+
+      if (ending == null)
+        ending = '..'
+
+      if (str.length > len)
+        return str.substring(0, len - ending.length) + ending
+      else
+        return str
+    }
+
+    const playerArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(truncate(stats[i].player.name, 10))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(truncate(stats[i].player.name, 10))
+        }
+      }
+      return arr
+    }
+
+    const teamArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+        }
+      }
+      return arr
+    }
+
+    const enemyArr = (stats, team) => {
+      let arr = []
+      if (team === 1) {
+        for (let i = 0; i < 5; i++) {
+          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
+        }
+      } else {
+        for (let i = 5; i < stats.length; i++) {
+          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
+        }
+      }
+      return arr
+    }
+
+    const optionGen = (stats, team) => {
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            color: 'white'
+          },
+          data: ['Enemy', 'Team']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            data: playerArr(stats, team)
+          }
+        ],
+        series: [
+          {
+            name: 'Team',
+            type: 'bar',
+            stack: 'Total',
+            color: 'firebrick',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: teamArr(stats, team)
+          },
+          {
+            name: 'Enemy',
+            type: 'bar',
+            stack: 'Total',
+            color: ['orange'],
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: enemyArr(stats, team)
+          }
+        ]
+      }
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        BarChart,
+        CanvasRenderer
+      ]);
+
+      let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
+      let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
+      let option1 = optionGen(props.stats, 1)
+      let option2 = optionGen(props.stats, 2)
+
+      myChart1.setOption(option1);
+      myChart2.setOption(option2);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player-dmg {
+  flex-direction: column;
+  align-items: center;
+
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+    //color: darkolivegreen;
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 20px;
+      color: #ff4343;
+    }
+
+    h4 {
+      margin-top: 7px;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+@for $i from 0 through 9 {
+  #dmg-chart-#{$i} {
+    margin: 0;
+  }
+}
+</style>
diff --git a/src/components/FlashChart.vue b/src/components/FlashChart.vue
index 8888e14..30e9802 100644
--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -54,7 +54,7 @@ export default {
         LabelLayout
       ]);
 
-      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`));
+      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
       let option
 
       option = {
@@ -215,8 +215,6 @@ export default {
 
 @for $i from 0 through 9 {
   #flash-chart-#{$i} {
-    width: 600px;
-    height: 400px;
     margin: 40px 40px -40px 40px;
   }
 }
diff --git a/src/components/ScoreTeam.vue b/src/components/ScoreTeam.vue
index dbf69b2..719c70b 100644
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -41,6 +41,7 @@
             :rank="player.extended?.rank?.old"
             :rounds_played="props.rounds_played"
             :color="player.extended?.color"
+            :tracked="player.player.tracked"
         />
       </tr>
       </tbody>
diff --git a/src/components/ScoreTeamPlayer.vue b/src/components/ScoreTeamPlayer.vue
index 4a8178f..7efd0e7 100644
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -3,6 +3,7 @@
     <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
   </td>
   <td class="player__name" @click="GoToPlayer(props.steamid64)">
+    <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
     {{ props.name }}
     <i class="fas fa-link"></i>
   </td>
@@ -141,6 +142,11 @@ export default {
       type: String,
       required: true,
       default: ''
+    },
+    tracked: {
+      type: Boolean,
+      required: true,
+      default: false
     }
   },
   setup(props) {
@@ -187,6 +193,10 @@ export default {
   text-overflow: ellipsis;
   cursor: pointer;
 
+  .tracked {
+    font-size: .8rem;
+  }
+
   .fas {
     font-size: .5rem;
     vertical-align: top;
diff --git a/src/components/UtilityChart.vue b/src/components/UtilityChart.vue
index 030e9f2..39fbf29 100644
--- a/src/components/UtilityChart.vue
+++ b/src/components/UtilityChart.vue
@@ -1,13 +1,10 @@
 <template>
   <div :style="props.ud.flames || props.ud.flash || props.ud.he ? 'display: flex' : 'display: none'"
-       class="player-flash">
+       class="player-utility">
     <div class="heading">
       <img :src="props.avatar" alt="Player avatar" class="avatar">
       <h4>{{ props.name }}</h4>
     </div>
-    <p><span class="text-muted">Total UD:</span>
-      {{ (props.ud.flames ? props.ud.flames : 0) + (props.ud.flash ? props.ud.flash : 0) + (props.ud.he ? props.ud.he : 0) }}
-    </p>
     <div :id="'utility-chart-' + props.id"></div>
   </div>
 </template>
@@ -18,6 +15,7 @@ import {LegendComponent, TooltipComponent} from 'echarts/components';
 import {PieChart} from 'echarts/charts';
 import {LabelLayout} from 'echarts/features';
 import {CanvasRenderer} from 'echarts/renderers';
+import { TitleComponent } from 'echarts/components';
 import {onMounted} from "vue";
 
 export default {
@@ -50,10 +48,11 @@ export default {
         LegendComponent,
         PieChart,
         CanvasRenderer,
+        TitleComponent,
         LabelLayout
       ]);
 
-      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`));
+      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`), {}, {width: 500, height: 300});
       let option
 
       option = {
@@ -62,29 +61,7 @@ export default {
           formatter: '{a} <br/>{b}: {c} ({d}%)'
         },
         legend: {
-          data: [
-            {
-              name: 'Flames',
-              textStyle: {
-                color: 'white',
-              },
-              itemStyle: {
-                color: '#FF4343FF'
-              }
-            },
-            {
-              name: 'Flash',
-              textStyle: {
-                color: 'white'
-              }
-            },
-            {
-              name: 'HE',
-              textStyle: {
-                color: 'white'
-              }
-            },
-          ]
+          show: false
         },
         series: [
           {
@@ -106,21 +83,42 @@ export default {
               show: false
             },
             data: [
-              {
+              (props.ud.flames ? {
                 value: props.ud.flames ? props.ud.flames : null,
                 name: 'Flames',
                 itemStyle: {
                   color: '#FF4343FF'
                 }
-              },
-              {
-                value: props.ud.flash ? props.ud.flash : null,
-                name: 'Flash',
-              },
-              {
+              } : {}),
+              (props.ud.he ? {
                 value: props.ud.he ? props.ud.he : null,
                 name: 'HE',
-              }
+                itemStyle: {
+                  color: '#62c265'
+                }
+              } : {})
+              ,
+              (props.ud.flash ? {
+                value: props.ud.flash ? props.ud.flash : null,
+                name: 'Flash',
+                itemStyle: {
+                  color: '#18cff3'
+                }
+              } : {}),
+              (props.ud.smoke ? {
+                value: props.ud.smoke ? props.ud.smoke : null,
+                name: 'Smoke',
+                itemStyle: {
+                  color: '#6e6b78'
+                }
+              } : {}),
+              (props.ud.decoy ? {
+                value: props.ud.decoy ? props.ud.decoy : null,
+                name: 'Decoy',
+                itemStyle: {
+                  color: '#e28428'
+                }
+              } : {})
             ]
           }
         ]
@@ -135,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.player-flash {
+.player-utility {
   flex-direction: column;
   align-items: center;
 
@@ -165,9 +163,7 @@ export default {
 
 @for $i from 0 through 9 {
   #utility-chart-#{$i} {
-    width: 500px;
-    height: 300px;
-    margin: 40px 40px -40px 40px;
+    margin: 0;
   }
 }
 </style>
diff --git a/src/components/UtilityChartTotal.vue b/src/components/UtilityChartTotal.vue
new file mode 100644
index 0000000..5a4d6b1
--- /dev/null
+++ b/src/components/UtilityChartTotal.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="utility-chart-total">
+    <div class="heading">
+      <h4>Total Utility Damage</h4>
+    </div>
+    <div id="utility-chart-total"></div>
+    <hr>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
+import {BarChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+export default {
+  name: "FlashChart",
+  props: {
+    stats: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    const checkStatEmpty = (stat) => {
+      if (stat)
+        return stat
+      else
+        return 0
+    }
+
+    const seriesArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
+
+        if (sum !== 0) {
+          arr.push({
+            name: stats[i].player.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [sum]
+          })
+        }
+      }
+
+      arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))
+
+      return arr
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        BarChart,
+        CanvasRenderer
+      ]);
+
+      let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line'
+          }
+        },
+        // color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
+        // color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
+        // color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Total']
+        },
+        aria: {
+          enabled: true,
+          show: true,
+          decal: {
+            show: true
+          }
+        },
+
+        series: seriesArr(props.stats)
+      };
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.utility-chart-total {
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+
+    h4 {
+      margin: 7px auto 0;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+#utility-chart-total {
+  margin: 40px 0;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index e8bc53e..49a7931 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,7 @@ const routes = [
     name: 'Match',
     component: lazyLoad('Match'),
     props: true,
-    alias: ['/match/:match_id/flashes', '/match/:match_id/utility']
+    alias: ['/match/:match_id/flashes', '/match/:match_id/utility', '/match/:match_id/damage']
   },
   {
     path: '/explore',
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 76a2dac..d3b0935 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -36,8 +36,15 @@
     <div id="matchNav" class="collapse navbar-collapse">
       <ul class="list-unstyled d-flex m-auto">
         <li class="list-item scoreboard active" @click.prevent="ActivateScoreInfo('scoreboard')">Scoreboard</li>
-        <li class="list-item flashes" @click.prevent="ActivateScoreInfo('flashes')">Flashes</li>
-        <li class="list-item utility" @click.prevent="ActivateScoreInfo('utility')">Utility</li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item flashes"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('flashes') : null">Flashes
+        </li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item utility"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('utility') : null">Utility
+        </li>
+        <li :class="!data.matchDetails.parsed ? 'disabled' : ''" class="list-item damage"
+            @click.prevent="data.matchDetails.parsed ? ActivateScoreInfo('damage') : null">Damage
+        </li>
       </ul>
     </div>
   </div>
@@ -56,8 +63,8 @@
     </div>
 
     <div id="flashes">
-      <FlashChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
-                  :id="id"
+      <FlashChart v-for="(player, id) in data.stats" :id="id"
+                  :key="player.player.steamid64"
                   :avatar="player.player.avatar"
                   :duration="player.extended.flash.duration"
                   :name="player.player.name"
@@ -66,16 +73,17 @@
     </div>
 
     <div id="utility">
-      <UtilityChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
-                  :id="id"
-                  :avatar="player.player.avatar"
+      <UtilityChartTotal :stats="data.stats"/>
+      <UtilityChart v-for="(player, id) in data.stats" :id="id"
+                    :key="player.player.steamid64"
+                    :avatar="player.player.avatar"
                     :name="player.player.name"
-                  :ud="player.extended.dmg.ud"
+                    :ud="player.extended.dmg.ud"
       />
     </div>
 
     <div id="damage">
-      Damage
+      <DamageChart :stats="data.stats" />
     </div>
   </div>
 </template>
@@ -89,6 +97,8 @@ import router from "../router";
 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
 const FlashChart = defineAsyncComponent(() => import('../components/FlashChart'))
 const UtilityChart = defineAsyncComponent(() => import('../components/UtilityChart'))
+const UtilityChartTotal = defineAsyncComponent(() => import('../components/UtilityChartTotal'))
+const DamageChart = defineAsyncComponent(() => import('../components/DamageChart'))
 
 export default {
   name: 'Match',
@@ -97,6 +107,8 @@ export default {
     ScoreTeam,
     FlashChart,
     UtilityChart,
+    UtilityChartTotal,
+    DamageChart
   },
   setup(props) {
     // Refs
@@ -156,10 +168,10 @@ export default {
       newNavItem.classList.add('active')
       newItem.classList.add('active')
 
-      if (id === 'flashes' || id === 'utility'){
-        history.pushState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
+      if (id === 'flashes' || id === 'utility' || id === 'damage') {
+        history.replaceState({}, null, `/match/${data.matchDetails.match_id}/${id}`)
       } else if (id === 'scoreboard') {
-        history.pushState({}, null, `/match/${data.matchDetails.match_id}`)
+        history.replaceState({}, null, `/match/${data.matchDetails.match_id}`)
       }
     }
 
@@ -173,11 +185,11 @@ export default {
     })
 
     onMounted(() => {
-      if (router.currentRoute.value.href.split('/')[3]) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (router.currentRoute.value.href.split('/')[3]) {
           ActivateScoreInfo(router.currentRoute.value.href.split('/')[3])
-        }, 500)
-      }
+        }
+      }, 200)
     })
 
     return {
@@ -266,5 +278,14 @@ export default {
   .active {
     background: var(--bs-info)
   }
+
+  .disabled {
+    color: #585858;
+
+    &:hover {
+      background: transparent;
+      cursor: default;
+    }
+  }
 }
 </style>
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 317fb4d..345388e 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,5 +1,5 @@
 <template>
-  <img class="bg-img" src="" alt="">
+  <img alt="" class="bg-img" src="">
   <div class="wrapper">
     <div class="container">
       <div class="card mb-3 bg-transparent border-0">
@@ -102,7 +102,6 @@
             <th class="text-center assists" scope="col">A</th>
             <th class="text-center deaths" scope="col">D</th>
             <th class="text-center kdiff" scope="col" style="cursor: help" title="Kill-to-death ratio">+/-</th>
-            <th class="text-center adr" scope="col" style="cursor: help" title="Average damage per round">ADR</th>
             <th class="text-center hltv" scope="col" style="cursor: help" title="HLTV 1.0 Rating">Rating</th>
             <th class="text-center duration" scope="col">Duration</th>
             <th class="date" scope="col">Date</th>
@@ -115,8 +114,10 @@
               class="match"
               @click="GoToMatch(match.match_id)">
             <td class="td-map text-center">
+              <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
+                 title="Demo has been parsed for additional data"></i>
               <img :alt="match.map ? match.map : 'Map not found'"
-                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
+                   :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/map_icons/map_icon_lobby_mapveto.svg')"
                    :title="match.map"
                    class="map-icon">
             </td>
@@ -151,11 +152,6 @@
                 (match.stats[0].kills ? match.stats[0].kills : 0) - (match.stats[0].deaths ? match.stats[0].deaths : 0)
               }}
             </td>
-            <td class="td-adr text-center">
-              {{
-                Math.floor((match.stats[0].extended.dmg.enemy ? match.stats[0].extended.dmg.enemy : 0) / (match.score[0] + match.score[1]))
-              }}
-            </td>
             <td :class="GetHLTV_1(
                       match.stats[0].kills,
                       match.score[0] + match.score[1],
@@ -203,7 +199,8 @@ import {
   FormatFullDate,
   FormatFullDuration,
   GetHLTV_1,
-  GoToMatch, LoadImage,
+  GoToMatch,
+  LoadImage,
   SaveLastVisitedToLocalStorage
 } from "../utils";
 
@@ -392,6 +389,7 @@ export default {
 
 table {
   margin-bottom: 0;
+
   tr {
     th {
       line-height: 1;
@@ -415,9 +413,28 @@ table {
       vertical-align: middle;
     }
 
-    .td-map img {
-      width: 60px;
-      height: auto;
+    .map {
+      padding-left: 3rem;
+    }
+
+    .td-map {
+      position: relative;
+      padding-left: 3rem;
+      text-align: left !important;
+      width: 50px;
+
+      .parsed {
+        position: absolute;
+        left: 7px;
+        top: 27px;
+        color: var(--bs-warning);
+        font-size: 1.5rem;
+      }
+
+      img {
+        width: 60px;
+        height: auto;
+      }
     }
 
     .td-rank img {
@@ -471,9 +488,24 @@ table {
       width: 75px;
     }
   }
-  .td-map img {
-    width: 40px !important;
-    height: auto;
+  .map {
+    padding-left: 2.2rem !important;
+  }
+
+  .td-map {
+    position: relative;
+    padding-left: 2.2rem !important;
+    width: 35px !important;
+
+    .parsed {
+      position: absolute;
+      left: .3rem !important;
+    }
+
+    img {
+      width: 40px !important;
+      height: auto;
+    }
   }
   .td-rank img {
     width: 50px !important;
@@ -490,8 +522,8 @@ table {
     font-size: 1rem !important;
   }
 
-  .kills, .deaths, .assists, .kdiff, .adr, .duration, .hltv, .length,
-  .td-kills, .td-deaths, .td-assists, .td-plus, .td-adr, .td-duration, .td-hltv, .td-length {
+  .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
+  .td-kills, .td-deaths, .td-assists, .td-plus, .td-duration, .td-hltv, .td-length {
     display: none;
   }
 }