.datapicker {
  margin: 0 auto;
  max-width: 425px;
  width: 100%;
}

.datapicker-for-filters {
  margin: 0 auto;
  max-width: 320px;
  width: 100%;
}

.datapicker-form {
  width: 100%;
}

#date_range,
#date {
  font-size: 16px;
  line-height: 19px;
  padding: 10px;
  height: 44px;
  margin-bottom: 10px;
  max-width: 425px;
  width: 100%;
}

.datapicker-form-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.datapicker-form-buttons > * {
  width: 100%;
}

.datapicker-form-buttons .button {
  justify-content: center;
}

.datapicker-form-buttons .button-secondary {
  color: #5068A5;
}

.flatpickr-calendar {
  padding: 20px;
  max-width: 425px;
  width: 100%;
  margin-bottom: 10px;
}

.flatpickr-rContainer,
.flatpickr-days,
.dayContainer,
.flatpickr-day {
  width: 100%;
  max-width: 100%;
}

.dayContainer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-width: unset;
}

.flatpickr-months {
  position: relative;
  margin-bottom: 10px;
}

.flatpickr-current-month {
  font-size: 16px;
  line-height: 19px;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding: 4px 10px 0;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  color: #5068A5;
}

.flatpickr-day.today {
  border-color: #5068A5;
}

.flatpickr-day:hover, 
.flatpickr-day:focus {
  border-color: transparent;
  background: rgba(80, 104, 165, 0.3);
}

.flatpickr-day.today:hover, 
.flatpickr-day.today:focus {
  border-color: transparent;
  background: rgba(80, 104, 165, 0.6);
}

.flatpickr-day.selected, 
.flatpickr-day.startRange, 
.flatpickr-day.endRange, 
.flatpickr-day.selected.inRange, 
.flatpickr-day.startRange.inRange, 
.flatpickr-day.endRange.inRange, 
.flatpickr-day.selected:focus, 
.flatpickr-day.startRange:focus, 
.flatpickr-day.endRange:focus, 
.flatpickr-day.selected:hover, 
.flatpickr-day.startRange:hover, 
.flatpickr-day.endRange:hover, 
.flatpickr-day.selected.prevMonthDay, 
.flatpickr-day.startRange.prevMonthDay, 
.flatpickr-day.endRange.prevMonthDay, 
.flatpickr-day.selected.nextMonthDay, 
.flatpickr-day.startRange.nextMonthDay, 
.flatpickr-day.endRange.nextMonthDay {
  background-color: #5068A5;
  border-color: transparent;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #5068A5;
}