.health-checkin-hero{
  align-items:center;
}
.health-checkin-month{
  display:flex;
  align-items:end;
  gap:12px;
}
.health-checkin-month label{
  display:grid;
  gap:7px;
  color:#66788d;
  font-size:12px;
}
.health-checkin-month input,
.health-checkin-month button{
  min-height:38px;
  border:1px solid #d7e1eb;
  border-radius:9px;
  background:#fff;
  padding:0 12px;
  color:#18324d;
}
.health-checkin-month button{
  cursor:pointer;
}
.health-checkin-tabs{
  margin-top:16px;
}
.health-checkin-panel{
  margin-top:16px;
}
.health-checkin-matrix-wrap{
  width:100%;
  overflow-x:auto;
  border-top:1px solid #dbe5ef;
  background:#fff;
}
.health-checkin-matrix{
  width:max-content;
  min-width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  color:#314860;
}
.health-checkin-matrix th{
  height:78px;
  padding:8px 10px;
  border-right:1px solid #d6e1ec;
  border-bottom:1px solid #d6e1ec;
  background:#edf3f9;
  color:#304a65;
  font-size:12px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
}
.health-checkin-matrix th:nth-child(1){
  width:118px;
  min-width:118px;
}
.health-checkin-matrix th:nth-child(2){
  width:170px;
  min-width:170px;
}
.health-checkin-matrix th:nth-child(3),
.health-checkin-matrix th:nth-child(4),
.health-checkin-matrix th:nth-child(5){
  width:72px;
  min-width:72px;
}
.health-checkin-matrix th:nth-child(-n+5),
.health-checkin-matrix td:nth-child(-n+5){
  position:sticky;
  z-index:3;
}
.health-checkin-matrix th:nth-child(-n+5){
  z-index:5;
}
.health-checkin-matrix th:nth-child(1),
.health-checkin-matrix td:nth-child(1){left:0}
.health-checkin-matrix th:nth-child(2),
.health-checkin-matrix td:nth-child(2){left:118px}
.health-checkin-matrix th:nth-child(3),
.health-checkin-matrix td:nth-child(3){left:288px}
.health-checkin-matrix th:nth-child(4),
.health-checkin-matrix td:nth-child(4){left:360px}
.health-checkin-matrix th:nth-child(5),
.health-checkin-matrix td:nth-child(5){
  left:432px;
  box-shadow:8px 0 12px -12px #49647f;
}
.health-checkin-matrix .checkin-day-head{
  width:48px;
  min-width:48px;
  padding:6px 4px;
}
.checkin-day-head b,
.checkin-day-head span{
  display:block;
}
.checkin-day-head b{
  margin-bottom:20px;
  color:#173654;
  font-size:12px;
}
.checkin-day-head span{
  color:#718399;
}
.health-checkin-matrix .checkin-period-head{
  width:88px;
  min-width:88px;
  padding:7px 6px;
}
.health-checkin-matrix .checkin-period-head.month{
  width:72px;
  min-width:72px;
}
.health-checkin-matrix .checkin-period-head.year{
  width:86px;
  min-width:86px;
}
.checkin-period-head b,
.checkin-period-head span{
  display:block;
}
.checkin-period-head b{
  margin-bottom:14px;
  color:#173654;
  font-size:12px;
}
.checkin-period-head span{
  color:#718399;
  font-size:10px;
}
.health-checkin-matrix td{
  height:82px;
  padding:8px 9px;
  border-right:1px solid #e0e8f0;
  border-bottom:1px solid #e0e8f0;
  background:#fff;
  text-align:center;
  white-space:nowrap;
}
.checkin-overall-rate strong{
  display:block;
  margin-bottom:9px;
  color:#183b5c;
  font-size:20px;
}
.checkin-overall-rate>span{
  display:block;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:#e7edf3;
}
.checkin-overall-rate i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#2e8de2,#42bfc0);
}
.checkin-habit-name{
  text-align:left!important;
}
.checkin-habit-name b,
.checkin-habit-name small{
  display:block;
}
.checkin-habit-name b{
  color:#223b56;
  font-size:13px;
}
.checkin-habit-name small{
  margin-top:7px;
  color:#7b8b9d;
  font-size:10px;
}
.health-checkin-matrix .checkin-day-cell{
  width:48px;
  min-width:48px;
  padding:7px 3px;
}
.checkin-day-cell b,
.checkin-day-cell small{
  display:block;
}
.checkin-day-cell b{
  font-size:20px;
}
.checkin-day-cell small{
  margin-top:5px;
  font-size:9px;
}
.checkin-day-cell.done{
  color:#087a6b;
  background:#e9f7f4;
}
.checkin-day-cell.late{
  color:#bd5047;
  background:#fff1ec;
}
.checkin-day-cell.pending{
  color:#9a6a11;
  background:#fff8dd;
}
.checkin-day-cell.future{
  color:#9aa7b5;
  background:#f6f8fa;
}
.health-checkin-matrix .checkin-period-cell{
  width:88px;
  min-width:88px;
  padding:8px 5px;
}
.health-checkin-matrix.month .checkin-period-cell{
  width:72px;
  min-width:72px;
}
.health-checkin-matrix.year .checkin-period-cell{
  width:86px;
  min-width:86px;
}
.checkin-period-cell b,
.checkin-period-cell small{
  display:block;
}
.checkin-period-cell b{
  font-size:16px;
}
.checkin-period-cell small{
  margin-top:7px;
  font-size:10px;
}
.checkin-period-cell.done{
  color:#087a6b;
  background:#e9f7f4;
}
.checkin-period-cell.partial{
  color:#286ca7;
  background:#edf5fd;
}
.checkin-period-cell.late{
  color:#bd5047;
  background:#fff1ec;
}
.checkin-period-cell.future{
  color:#9aa7b5;
  background:#f6f8fa;
}
.health-checkin-legend{
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-top:1px solid #e2e9f1;
  color:#6d7e91;
  font-size:12px;
}
.health-checkin-legend .done{color:#087c68}
.health-checkin-legend .partial{color:#226d8e}
.health-checkin-legend .late{color:#bd5047}
.health-checkin-legend .pending{color:#9a6a11}
.health-checkin-legend .future{color:#89958a}
.health-checkin-legend button{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#247fca;
  cursor:pointer;
}
.health-checkin-table th,
.health-checkin-table td{
  white-space:nowrap;
  vertical-align:middle;
}
.health-checkin-table td button{
  border:0;
  background:transparent;
  color:#247fca;
  padding:0;
  cursor:pointer;
}
.health-checkin-table .future-row{
  color:#98a5b4;
  background:#fafbfd;
}
.health-checkin-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}
.health-checkin-status.done{
  color:#087c68;
  background:#e9f8f4;
}
.health-checkin-status.late{
  color:#b94b43;
  background:#fff0ed;
}
.health-checkin-status.pending{
  color:#9a6a11;
  background:#fff7df;
}
.health-checkin-status.future{
  color:#718197;
  background:#eef2f6;
}
.checkin-good{
  color:#087c68;
  font-weight:700;
}
.checkin-late{
  color:#b94b43;
  font-weight:700;
}
.health-checkin-rate{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:130px;
}
.health-checkin-rate>span{
  width:82px;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e7edf3;
}
.health-checkin-rate i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#21b9aa,#4d8fe6);
}
.health-checkin-rate b{
  font-size:12px;
  color:#40546b;
}
@media (max-width:900px){
  .health-checkin-hero{
    align-items:flex-start;
  }
  .health-checkin-month{
    width:100%;
    flex-wrap:wrap;
  }
}