.calendar__yearview {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--year-dim), 1fr));
  grid-auto-rows: var(--year-dim);
  gap: 40px;
  padding: 16px 8px;
  height: 100%;
  overflow: hidden scroll;
}

.calendar__yearview::-webkit-scrollbar-thumb {
  min-height: 120px;
}

.yv-monthcell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: var(--year-dim);
  margin: 0 auto;
  color: var(--white2);
  border-radius: 12px;
}

.yv-monthcell__header {
  padding-top: 12px;
  width: 100%;
  height: 72px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  color: var(--white3);
}

.yv-monthcell__header--rowone {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  padding-bottom: 12px;
  padding-left: 12px;
  font-family: var(--secondaryFont);
  font-weight: 400;
  color: var(--white1);
  font-size: 17px;
}

.cell-current {
  border: none;
}

.yvmht-current {
  color: var(--primarylight1) !important;
}

.yv-monthcell__header--weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
  margin: 0 auto;
  max-width: var(--year-body);
  column-gap: 3px;
  height: 32px;
}

.yv-monthcell__header--weekdays > div {
  height: 22px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  user-select: none;
  pointer-events: none;
}

.yv-monthcell__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  /* grid-template-rows: repeat(6, 1fr); */
  max-width: var(--year-body);
  margin: 0 auto;
  height: 100%;
  width: 100%;
}

.yv-monthcell__body--day-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin: auto;
  border-radius: 16px;
  cursor: pointer;
  user-select: none;
  color: var(--white1);
  font-size: 13px;
}

.yvmb-prevnext {
  color: var(--offwhite1);
  /* color: red; */
  /* background: green; */
  border-radius: 0 !important;
  pointer-events: none;
}

.yvmb-today {
  background-color: var(--primary2) !important;
  color: var(--taskcolor0) !important;
}

.yvmb-today .yvmb-has-entry {
  color: var(--taskcolor0);
}

.yvmb-has-entry {
  color: var(--primarylight1);
  background-color: var(--black0);
}

.yvmb-selected {
  color: var(--taskcolor0);
  background-color: var(--primary3) !important;
}

.yv-monthcell__body--day-wrapper:hover {
  background-color: var(--darkgrey2);
  color: var(--taskcolor0);
}

@media screen and (max-width: 840px) {
  /* .calendar__yearview {
    grid-template-rows: repeat(auto-fit, minmax(272px, 1fr));
  } */
   .calendar__yearview {
    padding: 16px;
   }
}