.calendar-wrap {
  margin-bottom: 5rem;
}

.calendar-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5em;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

calendar-range svg {
  height: 16px;
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
calendar-range path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
calendar-range::part(button) {
  border: 1px solid #adb5bd;
  background-color: #fff;
  border-radius: 3px;
  width: 26px;
  height: 26px;
}
calendar-range::part(button):focus-visible {
  outline: 2px solid #7048e8;
}

calendar-month {
  --color-accent: #0a58ca;
  --color-text-on-accent: #ffffff;
}
calendar-month::part(button) {
  border-radius: 3px;
}
calendar-month::part(range-inner) {
  border-radius: 0;
  background-color: #0d6efd;
}
calendar-month::part(range-start) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
calendar-month::part(range-end) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
calendar-month::part(range-start range-end) {
  border-radius: 3px;
}