.flatpickr.input,
.flatpickr.input[readonly],
.flatpickr-time.input,
.flatpickr-time.input[readonly],
.form-group.inverted .flatpickr.input[readonly],
.form-group.inverted .flatpickr-time.input[readonly] {
  cursor: pointer;
  background-color: transparent;
}

.form-group.inverted .flatpickr.input[readonly],
.form-group.inverted .flatpickr-time.input[readonly] {
  border-color: $border-color-dark;
}

.flatpickr-time {
  text-align: left;
}

.flatpickr-day.selected {
  background-color: $info;
  border: none;
  &:hover, &:focus {
   background-color: $link-hover-color; 
  }
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekdays .flatpickr-weekday {
  color: $white;
  background-color: $info;
}

.flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: $white;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding-top: $spacing-xxs;
  &:hover {
    background-color: $link-hover-color;
  }
  &:hover svg {
    fill: $white;
  }
}

.flatpickr-months .flatpickr-prev-month {
  border-top-left-radius: $border-radius;
}

.flatpickr-months .flatpickr-next-month {
  border-top-right-radius: $border-radius;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: block !important;
  background-color: transparent;
}

.flatpickr-current-month {
  display: flex;
  flex-direction: row;
}

.flatpickr-current-month .numInputWrapper {
  width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: $info;
  font-size: $font-size-base;
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:focus {
  background-color: $link-hover-color;
}