/**
 * Flatpickr Custom Styles
 *
 * This file is for customizing the Flatpickr date picker appearance.
 * Add your custom CSS here to match your theme design.
 *
 * @package GroupeBH
 * @since 1.0.0
 */

/* ========================================
   FLATPICKR CALENDAR CONTAINER
   ======================================== */

/* Example: Calendar wrapper */

.flatpickr-calendar {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  border: 1px solid #e22415;
  background-color: #333;
  color: #fff;
}

/* ========================================
   FLATPICKR MONTH/YEAR SELECTORS
   ======================================== */

/* Example: Month selector */
/*
.flatpickr-monthDropdown-months {
    appearance: none;
}
*/

/* ========================================
   FLATPICKR DAYS
   ======================================== */

.flatpickr-day {
  color: #ffffff;
}

/* Example: Current day */

.flatpickr-day.today {
  border-color: #0096cf;
}

/* Example: Selected day */

.flatpickr-day.selected {
  background: #0096cf;
  border-color: #0096cf;
}

/* Example: Day hover state */

.flatpickr-day:hover {
  background: #e22415;
  border: none;
}

/* ========================================
   FLATPICKR NAVIGATION ARROWS
   ======================================== */

/* Example: Navigation arrows */
/*
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #your-color;
}
*/

/* ========================================
   FLATPICKR INPUT FIELD
   ======================================== */

/* Example: The input field itself */
/*
.flatpickr-input {
    border: 1px solid #your-color;
    border-radius: 4px;
}
*/

/* ========================================
   YOUR CUSTOM STYLES BELOW
   ======================================== */

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

span.flatpickr-day.prevMonthDay {
  color: #5c6065 !important;
}

.flatpickr-prev-month svg {
  fill: #fff !important;
}
.flatpickr-next-month svg {
  fill: #fff !important;
}

.flatpickr-months .flatpickr-month {
  background: #000;
  height: 56px;
  border-radius: 16px 16px 0 0;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 12px;
}
.flatpickr-current-month {
  padding: 16px 0 0 0;
}
span.flatpickr-weekday {
  color: #0096cf;
}
.flatpickr-weekdays {
  background-color: #5c6065;
}
.flatpickr-day.nextMonthDay {
  color: #5c6065;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #5c6065;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
  background-color: #333;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months{
  font-size: 14px;
}
.flatpickr-current-month input.cur-year{
  font-size: 14px;
  font-weight: 700;
  color: #0096cf;
}
.flatpickr-days{
  padding-top: 16px;
}
.numInputWrapper span{
  border: 1px solid #fff;
  color: #fff;
}
.arrowUp, .arrowDown{
  display: none!important;
}
.flatpickr-current-month input:focus,
.flatpickr-current-month select:focus{
  --tw-ring-color: transparent!important;
}