table.body {
  margin: auto;
}

table.body, table.body tr, table.body td {
  table-layout:fixed; /* to make masonry working on small screens */ 
}

table.body {
  border:1px solid #C0C0C0;
}

table.body td {
  -font-size:120%;
  text-align:center;
  border:1px solid #C0C0C0;
  min-width:40px;
  max-width:40px;
  width:40px;
  min-height:30px;
  max-height:30px;
  height:30px;
  padding:0;
  overflow: hidden;
}

table.dist, table.dist tr, table.dist td,
table.prev, table.prev tr, table.prev td {
  -table-layout:fixed; /* to make masonry working on small screens */ 
}

table.dist, table.prev {
  border:1px solid #C0C0C0;
}

table.dist td, table.prev td {
  -font-size:120%;
  text-align:center;
  border:1px solid #C0C0C0;
  min-width:40px;
  max-width:40px;
  width:40px;
  min-height:30px;
  max-height:30px;
  height:30px;
  padding:0;
  overflow: hidden;
  position:relative;
}

.fixed {
  background-color:rgb(200,200,200);
}

.na {
  background-color:rgb(240,240,240);
}

.ab {
  background-color:rgb(160,160,160);
  color:white;
  position:relative;
}

.label {
  position:absolute;
  top:-3px;
  color:red; 
  font-size:75%;
}

.label_v {
  position:absolute;
  top:-3px;
  left:2px;
  color:green; 
  font-size:75%;
  content:'L';
  display: inline-block;
  transform: rotate(45deg);
  height: 10px;
  width: 5px;
  border-bottom: 2px solid #78b13f;
  border-right: 2px solid #78b13f;
}

.arrow {
  color: #888;  
  font-size: 150%;
  padding:0 15px;
  cursor:pointer;
}

.arrow:hover {
  color:black;
}