/* Custom LSC Biomass Flatpickr Theme */
.flatpickr-calendar {
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  font-family: inherit !important;
  z-index: 999999 !important;
}

.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.selected.nextMonthDay {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.flatpickr-day.today {
  border-color: #16a34a !important;
}

.flatpickr-day.today:hover {
  background: #22c55e !important;
  color: #fff !important;
}

.flatpickr-months .flatpickr-month {
  background: #064e3b !important;
  color: #fff !important;
  fill: #fff !important;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff !important;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff !important;
}

.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Month name dropdown select element in calendar header */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
}

/* Force all 12 month option names in the dropdown list to black font color */
.flatpickr-calendar select.flatpickr-monthDropdown-months option,
.flatpickr-calendar .flatpickr-monthDropdown-months option,
.flatpickr-current-month .flatpickr-monthDropdown-months option,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
select.flatpickr-monthDropdown-months option,
select.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
option.flatpickr-monthDropdown-month,
.flatpickr-monthDropdown-month {
  color: #000000 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option:checked,
.flatpickr-current-month .flatpickr-monthDropdown-months option:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months option:focus,
.flatpickr-monthDropdown-months option:checked,
.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-months option:focus {
  color: #000000 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
}

.flatpickr-months .flatpickr-prev-month, 
.flatpickr-months .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg, 
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #22c55e !important;
}

/* Ensure flatpickr inputs look like standard Bootstrap form controls */
.flatpickr-input[readonly] {
  background-color: #fff !important;
  cursor: pointer;
}

.flatpickr-input-custom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2316a34a' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 16px !important;
  padding-right: 2.25rem !important;
}
