.calendar {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.calendar .head {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 21px;
}
.calendar.calendarYear .months {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  height: -webkit-fill-available;
  height: -moz-available;
  height: fill-available;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: content-box;
  padding: 10px;
}
.calendar.calendarYear .months .month {
  min-width: 23%;
  box-sizing: content-box;
  margin: 5px;
}
.calendar.calendarYear .months .month .monthInner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
}
.calendar.calendarYear .months .month .monthInner .head {
  display: flex;
  padding: 0;
  border: 0;
  flex-direction: column;
}
.calendar.calendarYear .months .month .monthInner .head label {
  font-size: 15px;
  color: #dd3a3a;
  font-weight: 500;
}
.calendar.calendarYear .months .month .monthInner .head .lineDay {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  color: #a19f9f;
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 5px;
}
.calendar.calendarYear .months .month .monthInner .head .lineDay span {
  width: 14.2%;
  text-align: center;
}
.calendar.calendarYear .months .month .monthInner .row {
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  height: 14.2%;
  align-items: center;
  display: flex;
  justify-content: end;
}
.calendar.calendarYear .months .month .monthInner .row:last-child {
  justify-content: flex-start;
}
.calendar.calendarYear .months .month .monthInner .row .day {
  width: 14.2%;
  text-align: center;
  border-radius: 100px;
  min-height: 20px;
  align-items: center;
  font-size: 13px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
}
.calendar.calendarYear .months .month .monthInner .row .day:hover {
  background-color: #3369e7;
  color: #ffffff;
}
.calendar.calendarYear .months .month .monthInner .row .day.today {
  background: #ffc107;
  border-color: #ffc107;
}
.calendar.calendarYear .months .month .monthInner .row .day.today.blocked {
  border-color: #ffc107;
  background: #eb4646;
}
.calendar.calendarYear .months .month .monthInner .row .day.blocked {
  border-color: #ffffff;
  background: #eb4646;
  color: #ffffff !important;
}
.calendar.calendarYear .months .month .monthInner .row .day.endWeek {
  color: #a19f9f;
}