.calendar {
  background-color: #fff;
  font-size: 15px;
  min-width: 250px;
  min-height: 250px;
  width: 250px;
  height: 250px;
  position: relative;
}
.calendar * {
  box-sizing: border-box;
  transition: all 0.2s linear;
}
.calendar .calendar-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.calendar .calendar-container .calendar-section {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 6;
  flex-basis: 0;
}
.calendar .calendar-container .calendar-section .calendar-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  justify-content: center;
  flex-grow: 1;
}
.calendar .calendar-container .calendar-section .calendar-row .calendar-selectable.calendar-selected {
  background-color: #333;
  border: solid 1px #333;
  color: #fff;
}
.calendar .calendar-container .calendar-section .calendar-row .calendar-cell {
  background-color: #fff;
  border: solid 1px #fff;
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.calendar .calendar-container .calendar-section.calendar-header {
  flex-grow: 1;
}
.calendar .calendar-container .calendar-section.calendar-header .calendar-title {
  flex-grow: 5;
  flex-basis: max-content;
}
.calendar .calendar-container .calendar-section.calendar-header .calendar-prev,
.calendar .calendar-container .calendar-section.calendar-header .calendar-next {
  cursor: pointer;
  outline: none;
}
.calendar .calendar-container .calendar-section.calendar-header .calendar-prev:before,
.calendar .calendar-container .calendar-section.calendar-header .calendar-next:before {
  position: relative;
  top: 0;
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-top: 0.2em solid #1f1f1f;
  transform: rotate(-45deg);
}
.calendar .calendar-container .calendar-section.calendar-header .calendar-prev:before {
  border-left: 0.2em solid #1f1f1f;
  transform: rotate(-45deg);
  margin-left: 0.3em;
}
.calendar .calendar-container .calendar-section.calendar-header .calendar-next:before {
  border-right: 0.2em solid #1f1f1f;
  transform: rotate(45deg);
  margin-right: 0.3em;
}
.calendar .calendar-container .calendar-section .calendar-cell.calendar-selectable:hover:not(.calendar-selected):not(.calendar-empty) {
  background-color: #ccc;
  border-color: #ccc;
}
.calendar .calendar-container .calendar-section.calendar-weekdays {
  flex-grow: 1;
}
.calendar .calendar-container .calendar-section.calendar-weekdays .calendar-row .calendar-weekday {
  font-weight: bold;
}
.calendar .calendar-container .calendar-section.calendar-days .calendar-row .calendar-day {
  cursor: pointer;
}
.calendar .calendar-container .calendar-section.calendar-days .calendar-row .calendar-empty {
  cursor: default;
}
.calendar .calendar-container .calendar-section.calendar-days .calendar-row .calendar-empty:before {
  content: "\00a0";
}