body {
 background-color: Beige; 
}

table {
  width: 100%; 
}

table, th, td {
  border: 1px solid black;
}

td {
 text-align: center;
}

#progressBar {
  width: 100%;
}

.header {
  display: flex;
  justify-content: center;
  background-color: FireBrick;
  color: white;
  border-radius: 10px 10px 0 0;
}

.display {
  display: flex;
}

.bar {
  border: 1px solid black;
  flex: 1;
  padding: 1rem;
}

.pagesReadDifference {
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
}

.pageLog {
  max-height: 100px;
  overflow-y: scroll;
  border: 1px solid black;
}

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: black; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.green {
  background-color: green;
  color: white;
}

.yellow {
  background-color: yellow;
  color: black;
}

.red {
  background-color: red;
  color: white;
}

.red-dot {
  color: red;
}

.green-dot {
  color: green;
}

.yellow-dot {
  color: yellow;
}

.foot-note {
  line-height: 0px;
  font-style: italic;
  font-size: 12px;
  float: right;
}

@media only screen and (max-width: 800px) {
  .display {
    flex-flow: column;
  }
}