.logbook #instructionsLink, .logbook #instructions {
  margin-bottom: 40px;
}

.logbook #instructionsLink {
  text-align: center;
}

.logbook #instructions {
  display: none;
}

.logbook #instructions p {
  text-align: justify;
}

.logbook #instructions p + p {
  margin-top: 20px;
}

.logbook .checkPanel label {
  width: auto; 
}

.logbook .start, .logbook .finish, .logbook .sleep {
  color: white;
}

.logbook .start, .logbook .finish, .logbook .followsStart, .logbook .followsFinish {
  border-bottom-color: var(--basic-turquoise) !important;
}

.logbook .start, .logbook .finish {
  background-color: var(--basic-turquoise);
}

.logbook .sleep, .logbook .followsSleep {
  border-bottom-color: var(--basic-green) !important;
}

.logbook .sleep {
  background-color: var(--basic-green);
}

.logbook .checkpoint, .logbook .bonus {
  background-color: #eee;
}

.logbook .day td {
  vertical-align: top;
}

.logbook .day th:not(:nth-child(1)), .logbook .day td:not(:nth-child(1)) {
  padding-left: 20px;
}

.logbook .day th:nth-child(1), .logbook .day td:nth-child(1),
.logbook .day th:nth-child(2), .logbook .day td:nth-child(2),
.logbook .day th:nth-child(5), .logbook .day td:nth-child(5) {
  text-align: right;
}

.logbook .day td:nth-child(1), .logbook .day td:nth-child(2),
.logbook .day td:nth-child(5) {
  font-family: Arial, sans-serif;
}

.logbook .day th:nth-child(1), .logbook .day td:nth-child(1) {
  min-width: 80px;
}

.logbook .day th:nth-child(2), .logbook .day td:nth-child(2) {
  min-width: 84px;
}

.logbook .day th:nth-child(3), .logbook .day td:nth-child(3) {
  min-width: 143px;
}

.logbook .day th:nth-child(4), .logbook .day td:nth-child(4) {
  width: 644px;
}

.logbook .day th:nth-child(5), .logbook .day td:nth-child(5) {
  min-width: 64px;
}

.logbook .day th:nth-child(6), .logbook .day td:nth-child(6) {
  padding-right: 8px;
  width: 249px;
}

.logbook .statistics td:last-child {
  font-weight: bold;
}

/* RESPONSIVE */

@media only screen and (max-width: 1343px) {
  .logbook .day th:nth-child(4), .logbook .day td:nth-child(4) {
    width: calc(var(--vw) - 80px - 371px - 249px + (1344px - var(--vw)) / 2);
  }
  
  .logbook .day th:nth-child(6), .logbook .day td:nth-child(6) {
    width: calc(var(--vw) - 80px - 371px - 644px + (1344px - var(--vw)) / 2);
  }
}

@media only screen and (max-width: 1103px) {
  .logbook .day th:nth-child(4), .logbook .day td:nth-child(4) {
    width: calc(var(--vw) - 80px - 371px - 129px);
  }
  
  .logbook .day th:nth-child(6), .logbook .day td:nth-child(6) {
    width: 129px;
  }
}

@media only screen and (max-width: 767px) {
  .logbook #instructionsLink, .logbook #instructions {
    margin-bottom: 32px;
  }
  
  .logbook .day th:not(:nth-child(1)), .logbook .day td:not(:nth-child(1)) {
    padding-left: 16px;
  }
  
  .logbook .day th:nth-child(2), .logbook .day td:nth-child(2) {
    min-width: 80px;
  }
  
  .logbook .day th:nth-child(3), .logbook .day td:nth-child(3) {
    min-width: 126px;
  }
  
  .logbook .day th:nth-child(4), .logbook .day td:nth-child(4) {
    width: calc(var(--vw) - 60px - 342px - 114px);
  }
  
  .logbook .day th:nth-child(5), .logbook .day td:nth-child(5) {
    min-width: 56px;
  }
  
  .logbook .day th:nth-child(6), .logbook .day td:nth-child(6) {
    width: 114px;
  }
}

@media only screen and (max-width: 650px) {
  .logbook .checkpoint.followsCheckpoint,
  .logbook .checkpoint.followsBonus,
  .logbook .bonus.followsCheckpoint,
  .logbook .bonus.followsBonus {
    border-bottom-color: #d4d4d4 !important;
  }
  
  .logbook table.day, .logbook .day thead, .logbook .day tbody,
  .logbook .day tr, .logbook .day td {
    display: block;
  }
  
  .logbook .day th {
    display: none;
  }
  
  .logbook .day td {
    min-height: 36.8px;
    min-width: 100% !important;
    padding-left: 108px !important;
    padding-right: 12px !important;
    position: relative;
    text-align: left !important;
  }
  
  .logbook .day td::before {
    content: attr(data-label);
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    left: 12px;
    position: absolute;
    text-transform: uppercase;
  }
}

@media only screen and (max-width: 617px) {
  .logbook #instructions p {
    text-align: left;
  }
}
