@font-face {
    font-family: 'bebas';
    src: url('font/BebasNeue-Regular.ttf');

}


:root{

  --base-font-size: 20px;
  --desc-font-size: 24px;
  --val-font-size: 48px;

}

html, body{
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  font-family: bebas;
  font-size: var(--base-font-size);
  background: #000;
  text-align: center;
}





.grid-item{
  vertical-align: middle;
}



.char_normal{
  height: inherit; display: inherit; text-align: inherit; vertical-align: inherit;
  /* font-size: 40px; */
  /* color: #222; */
}


.char_big{
  height: inherit; display: inherit; text-align: inherit; vertical-align: inherit;
  /* font-size: 48px; */
  color:#000;
}





/* GRID //////////////////////////////////////////////////////////////////////*/


.grid-wrap{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr 1fr 2fr 1fr 1fr 2fr;
  grid-template-rows: repeat(14, 20px);
  /* line-height: 0.7; */

  position: absolute;
  width: 1610px;
  height: 200px;
  top: 200px;
  left: 10px;
  background: #fff;
  padding: 40px 20px 0px 20px;
  justify-items: end;
  align-items: end;
}

.grid-item *{
  display: inline;
  height: 60px;


}

.desc{
  justify-self: start;
  font-size: var(--desc-font-size);
}

.val{
  font-size: var(--val-font-size);
}





/* row start / col start / row end / col end */

#worker_id_desc{
  grid-area: 1 / 1 / span 1 / span 1;
}

#worker_id{
  grid-area: 1 / 2 / span 2 / span 1;
}

#ip_address_desc{
  grid-area: 4 / 1 / span 1 / span 1;
}

#ip_address{
  grid-area: 4 / 2 / span 2 / span 1;
}

#country_desc{
  grid-area: 7 / 1 / span 1 / span 1;
}

#country{
  grid-area: 7 / 2 / span 2 / span 1;
}

#time_desc{
  grid-area: 1 / 4 / span 1 /span 1;
}

#time{
  grid-area: 1 / 5 / span 2 / span 1;
}

#assign_status_desc{
  grid-area: 4 / 4 / span 1 / span 1;
}

#assign_status{
  grid-area: 4 / 5 / span 2 / span 1;
}

#approval_status_desc{
  grid-area: 7 / 4 / span 1 / span 1;
}

#approval_status{
  grid-area: 7 / 5 / span 2 / span 1;
}