.datepicker {
  display: block;
  width: 17em;
  position: absolute;
  color: #222222;
  background: #FFFFFF;
  z-index: 999999;
  font-size: 1.1em;
  font-family: Verdana, sans-serif;
  border: 1px solid #AAAAAA;
  border-radius: 4px;
  padding: 0.2em;
  padding-bottom: 0;
  cursor: default;
  transition: opacity 0.2s ease-in-out;
}

.datepicker.inactive {
  opacity: 0;
  pointer-events: none;
}

.datepicker .month {
  display: block;
  text-align: center;
  font-weight: bold;
  line-height: 1.8em;
  background-color: #CCCCCC;
  background-image: linear-gradient(to bottom, #E2E2E2 0%, #CCCCCC 73%);
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  border: 1px solid #AAAAAA;
  border-radius: 4px;
  position: relative;
}

.datepicker .month .prev,
.datepicker .month .next {
  display: block;
  position: absolute;
  top: 1px;
  width: 1.8em;
  height: 1.8em;
  border: 1px solid transparent;
  border-radius: 4px;
}

.datepicker .month .prev:hover,
.datepicker .month .next:hover {
  background-color: #DADADA;
  background-image: linear-gradient(to bottom, #E4E4E4  0%, #E4E4E4  50%,
                                               #DADADA 50%, #E8E8E8 100%);
  border-color: #999999;
}

.datepicker .month .prev {
  left: 1px;
}

.datepicker .month .next {
  right: 1px;
}

.datepicker .month .prev > *,
.datepicker .month .next > * {
  display: inline-block;
  line-height: 1;
  color: #D4D4D4;
  background-color: #222222;
  font-size: 72%;
  padding: 0.1em;
  border-radius: 0.47em;
  position: absolute;
  top: calc(50% - 0.6em);
  left: calc(50% - 0.6em);
}

.datepicker .month .prev:hover > *,
.datepicker .month .next:hover > * {
  color: #DFDFDF;
  background-color: #454545;
}

.datepicker .month .prev > * > *,
.datepicker .month .next > * > * {
  position: relative;
  bottom: 1px;
}

.datepicker .calendar {
  display: table;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.9em;
  border: 1px solid #2F2F2F;
  margin-bottom: 0.4em;
}

.datepicker .calendar .weekDays,
.datepicker .calendar .week {
  display: table-row;
}

.datepicker .calendar .weekDay,
.datepicker .calendar .day {
  display: table-cell;
  width: 14.2857%;
}

.datepicker .calendar .weekDay {
  text-align: center;
  font-size: 95%;
  font-weight: bold;
  color: #FFFFFF;
  background-color: #2F2F2F;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.datepicker .calendar .day {
  font-size: 90%;
  color: #2F2F2F;
  padding: 1px;
}

.datepicker .calendar .week + .week .day.blank {
  display: none;
}

.datepicker .month .prev,
.datepicker .month .next,
.datepicker .calendar .day:not(.blank) > * {
  cursor: pointer;
}

.datepicker .calendar .day:not(.blank) > * {
  display: block;
  text-align: right;
  vertical-align: middle;
  padding: 0.2em;
  color: #555555;
  background-color: #E6E6E6;
  background-image: linear-gradient(to bottom, #EDEDED  0%, #EDEDED  50%,
                                               #E6E6E6 50%, #EDEDED 100%);
  border: 1px solid #D3D3D3;
}

.datepicker .calendar .day.selected > * {
  color: #212121;
  background-color: #FFFFFF;
  background-image: linear-gradient(to bottom, #FEFEFE  0%, #FEFEFE  50%,
                                               #FFFFFF 50%, #FFFFFF  55%,
                                               #FEFEFE 55%, #FEFEFE  65%,
                                               #FFFFFF 65%, #FFFFFF 100%);
  border-color: #AAAAAA;
}

.datepicker .calendar .day:not(.blank):not(.selected) > :hover {
  color: #212121;
  background-color: #DADADA;
  background-image: linear-gradient(to bottom, #E4E4E4  0%, #E4E4E4  50%,
                                               #DADADA 50%, #E5E5E5 100%);
  border-color: #999999;
}