.period-picker-popover .popover-header > .inner {
  display: flex;
  align-items: center;
}

.period-picker-popover .popover-header > .inner .year {
  flex-grow: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1;
}

.period-picker-popover .popover-header > .inner a {
  font-size: 1.5rem;
  line-height: 1;
}

.period-picker-popover .popover-body {
  padding: .4rem;
}

.period-picker-popover .popover-body > .inner > div + div {
  margin-top: .4rem;
}

.period-picker-popover .popover-body > .inner > div > div {
  padding: .4rem;
}

.period-picker-popover .popover-body > .inner button {
  display: block;
  width: 100%;
}

.period-picker-popover .popover-body > .inner .semester {
  display: flex;
}

.period-picker-popover .popover-body > .inner .semester > div {
  width: 50%;
}

.period-picker-popover .popover-body > .inner .quarter, .period-picker-popover .popover-body > .inner .month {
  display: flex;
  flex-wrap: wrap;
}

.period-picker-popover .popover-body > .inner .quarter > div, .period-picker-popover .popover-body > .inner .month > div {
  width: 25%;
}