body {
  font-family: sans-serif;
  margin: 20px;
}

table.visual-buffer {
  border-collapse: collapse;
  table-layout: fixed;
  width: 1000px;
  border-spacing: 0;
  font-size: 16px;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
}

table.visual-buffer td {
  vertical-align: top;
  padding: 2px 0;
  margin: 0;
}

/* ---------------- Column 1: Address -------------------*/
table.visual-buffer col:nth-child(1) {
  width: 47px;
}

table.visual-buffer td:nth-child(1) {
  text-align: left;
  padding-right: 8px;
  border-top: 1px solid rgb(100,100,100);
}

.visual-buffer .address-text {
  font-size: 85%;
  /* font-weight: bold; */
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  position: relative;
  top: -12px;
  border-radius: 2px;
  background-color: white;
  padding: 1px 4px;
  color: black;
  text-decoration: none;
}

.visual-buffer .address-text:hover {
  color: rgb(40, 40, 80);
  background-color: rgb(220, 220, 240);
}

/* ---------------- Column 2: Binary -------------------*/
table.visual-buffer col:nth-child(2) {
  background: rgb(40,40,50);
  width: 141px;
}

table.visual-buffer td:nth-child(2) {
  text-align: left;
  padding-left: 4px;
  padding-right: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0;
  height: 0px;
  overflow: hidden;
}

.visual-buffer .data .byte {
  display: inline-block;
  box-sizing: border-box;
  width: 29px;
  height: 29px;
  font-family: 'Consolas', 'Courier New', Courier, monospace;
  font-size: 17px;
  color: white;
  background: rgb(60,60,75);
  border-radius: 2px;
  text-align: center;
  padding-top: 6px;
  margin: 2px 2px;
  overflow: hidden;
}

.visual-buffer .data .byte.pending {
  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3) inset;
  border-radius: 3px;
}

/* ---------------- Column 3: Label -------------------*/
table.visual-buffer col:nth-child(3) {
  width: 350px;
}

table.visual-buffer td:nth-child(3) {
  text-align: right;
  padding-right: 5px;
  opacity: 0.7;
  border-top: 1px solid rgba(100, 100, 100, 0.25);
  padding-top: 10px;
}

/* ---------------- Column 4: Value -------------------*/
table.visual-buffer col:nth-child(4) {
  text-align: left;
}

table.visual-buffer td:nth-child(4) {
  border-top: 1px solid rgba(100, 100, 100, 0.25);
  padding-top: 10px;
}

.visual-buffer .pending-value {
  font-style: italic;
  opacity: 0.5;
}