#calendar {
  margin-top: 2rem;
  margin-bottom: 4rem;
  display: grid;
  place-content: center;
  min-height: 14rem;
}

.calendar {
  display: flex;
  flex-flow: column;
  text-align: center;
  margin: 0 1rem;
}
.calendar .header .month-year {
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.calendar .header .month-year .prevnextmonth {
  cursor: pointer;
  font-size: 1.8rem;
}
.calendar .days {
  display: flex;
  flex-flow: wrap;
}
.calendar .days .day_name {
  padding: 0.3rem 0;
  width: 14%;
  border-right: 1px solid #1c5d99;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background-color: #1c5d99;
}
.calendar .days .day_name:nth-child(7) {
  border: none;
}
.calendar .days .day_num {
  display: flex;
  flex-flow: column;
  width: 14%;
  border-right: 1px solid #e6e9ea;
  border-bottom: 1px solid #e6e9ea;
  font-weight: bold;
  color: #ccc;
  font-size: 12px;
}
.calendar .days .day_num a {
  padding: 0.3rem 0;
  color: #1c5d99;
  text-decoration: none;
  background-color: #f7f7f7;
}
.calendar .days .day_num a:hover {
  text-decoration: underline;
}
.calendar .days .day_num span {
  padding: 0.3rem 0;
  font-size: 12px;
}
.calendar .days .day_num:nth-child(7n + 1) {
  border-left: 1px solid #e6e9ea;
}
.calendar .days .day_num:hover {
  background-color: #fdfdfd;
}
.calendar .days .day_num.ignore {
  background-color: #fdfdfd;
  padding: 0.3rem 0;
  cursor: inherit;
}
.calendar .days .day_num.selected {
  background-color: #e3e3e3;
  color: #979797;
  cursor: inherit;
}