.hp-info-box-container {
  margin: 20px 0;
}
.hp-info-box-container h2 {
  margin-bottom: 5px;
}
.hp-info-box-container h2:empty {
  display: none;
}
.hp-info-box {
  display: flex;
  background: #fbfbfb;
  border: 1px solid #dadada;
  padding: 0 0;
}
.hp-info-box .box {
  width: 50%;
  padding: 10px 20px 20px 20px;
}
.hp-info-box .box:last-child {
  border-left: 1px solid #dadada;
}
.hp-info-box .box .weeks {
  display: flex;
  border: 1px solid #dadada;
  margin-top: 15px;
}
.hp-info-box .box .weeks .week {
  width: 50%;
  box-sizing: border-box;
  padding: 10px 20px;
  text-align: center;
}
.hp-info-box .box .weeks .week.success .result {
  color: #3e7946;
}
.hp-info-box .box .weeks .week.failure .result {
  color: #752525;
}
.hp-info-box .box .weeks .week:last-child {
  border-left: 1px solid #dadada;
}
.hp-info-box .box .weeks .week span.title {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #444;
}
.hp-info-box .box .weeks .week .result {
  margin-top: 15px;
}
.hp-info-box .box .weeks .week .result span.done {
  font-size: 26px;
  font-weight: bold;
}
.hp-info-box .box .weeks .week .result span.goal {
  font-size: 18px;
}
.hp-info-box .box .months {
  display: flex;
  border: 1px solid #dadada;
  margin-top: 15px;
}
.hp-info-box .box .months .month {
  width: 50%;
  box-sizing: border-box;
  padding: 10px 20px;
  text-align: center;
}
.hp-info-box .box .months .month.success {
  background: #c8ffcf;
  color: #3e7946;
}
.hp-info-box .box .months .month.failure {
  background: #fbc3c3;
  color: #752525;
}
.hp-info-box .box .months .month:last-child {
  border-left: 1px solid #dadada;
}
.hp-info-box .box .months .month span.title {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #444;
}
.hp-info-box .box .months .month .result {
  margin-top: 15px;
}
.hp-info-box .box .months .month .result span.done {
  font-size: 26px;
  font-weight: bold;
}