/* packageE/member/component/month/month.wxss */
@import "../../../../mycss/stylesheet.wxss";
@import "../../../../mycss/iconfont.wxss";

.month {
  width: 100%;
  height: 320rpx;
  background: #fff;
}

.month .monthHeader {
  height: 64rpx;
  display: flex;
  padding: 0 48rpx;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.month .monthHeader .year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28rpx;
  color: #767676;
  font-weight: bold;
}

.month .monthContainer {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(3, 80rpx);
}

.month .monthContainer .monthItem {
  color: #666;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month .monthContainer .monthItem .active {
  width: 116rpx;
  height: 52.992rpx;
  line-height: 52.992rpx;
  background-color: #fee;
  border-radius: 26.496rpx;
  color: #ff2c29;
  text-align: center;
}

.month .monthContainer .monthItem .enabled {
  color: #a2a2a2;
}