.rdrCalendarWrapper {
  font-size: 16px !important;
  width: 328px !important;
}

.rdrWeekDay {
  font-size: 13px !important;
}

.rdrMonthName {
  text-align: center !important;
  color: #222222 !important;
  font-weight: 400 !important;
}

.rdrMonths {
  justify-content: space-between !important;
}

.rdrCalendarWrapper {
  position: relative !important;
}

.rdrMonthAndYearWrapper {
  position: absolute;
  right: 0;
  left: 0;
  top: -8px;
}

.rdrMonthAndYearPickers {
  display: none !important;
}

.rdrNextPrevButton {
  padding: 8px !important;
}
.rdrNextPrevButton,
.rdrNextPrevButton:hover {
  background: transparent !important;
}

.rdrNextPrevButton i {
  transform: scale(1.3) !important;
}

.rdrDay,
.rdrInRangem,
.rdrStartEdge,
.rdrEndEdge,
.rdrInRange,
.rdrDayNumber {
  height: 43px !important;
  width: 43px !important;
}

.rdrSelected,
.rdrInRange,
.rdrStartEdge,
.rdrEndEdge,
.rdrDayNumber {
  top: 0 !important;
}

.rdrInRange {
  border-radius: 0 !important;
}

.rdrDayNumber span {
  font-weight: 500 !important;
}

.rdrDays {
  row-gap: 2px;
}

.rdrStartEdge,
.rdrEndEdge {
  border-radius: 999px !important;
  background-color: #222222 !important;
  color: white !important;
  left: 0 !important;
  right: 0 !important;
}

.rdrDayStartPreview,
.rdrDayEndPreview {
  border-radius: 999px !important;
  top: 0 !important;
  height: 43px !important;
  border: 1px solid black !important;
}

.rdrDayToday .rdrDayNumber span:after {
  display: none !important;
}

span.rdrDayNumber span {
  color: #222222 !important;
}

.rdrStartEdge ~ span.rdrDayNumber span,
.rdrEndEdge ~ span.rdrDayNumber span {
  color: white !important;
}

.rdrDayDisabled .rdrDayNumber span,
.rdrDayPassive .rdrDayNumber span {
  color: #dddddd !important;
}

.rdrDayPassive .rdrDayNumber,
.rdrDayDisabled .rdrDayNumber {
  background-color: white !important;
}

@media screen and (min-width: 790) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 44px !important;
    width: 44px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 44px !important;
  }
}

@media screen and (min-width: 830px) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 45px !important;
    width: 45px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 45px !important;
  }
}

@media screen and (min-width: 840px) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 46px !important;
    width: 46px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 46px !important;
  }
}

@media screen and (min-width: 860px) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 47px !important;
    width: 47px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 47px !important;
  }
}
@media screen and (min-width: 870px) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 48px !important;
    width: 48px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 48px !important;
  }
}

@media screen and (min-width: 800px) {
  .rdrMonths .rdrMonth:first-child {
    padding-right: 29px;
  }
  .rdrMonths .rdrMonth:last-child {
    padding-left: 29px;
  }
  .rdrCalendarWrapper {
    width: 100% !important;
  }
}

@media screen and (min-width: 880px) {
  .rdrDay,
  .rdrInRangem,
  .rdrStartEdge,
  .rdrEndEdge,
  .rdrInRange,
  .rdrDayNumber {
    height: 50px !important;
    width: 50px !important;
  }

  .rdrDayStartPreview,
  .rdrDayEndPreview {
    height: 50px !important;
  }
}
