@use "../../abstracts" as *;

.flatpickr-calendar {
  z-index: 50000 !important;
}

.flatpickr-day {
  line-height: 39px !important;
}

.flatpickr-day.today {
  border-color: #DA291C !important;
}

.flatpickr-day:hover {
  background: #DA291C !important;
  color: #fff !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #ccc;
  cursor: not-allowed;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #DA291C;
  background: #DA291C;
  color: #fff;
}

.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 {
  background: #DA291C;
  border-color: #DA291C;
  color: #fff;
}

.flatpickr-months {
  background: #DA291C;
  border-radius: 5px 5px 0 0;
}

.flatpickr-month,
.flatpickr-current-month,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: transparent;
  color: #fff !important;
  padding:0;
  top: -1px;
}

.flatpickr-current-month {
  .flatpickr-monthDropdown-months {
    color: #fff;
    font-weight: 600;
    -webkit-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 50%;
    padding-right: 16px;

    option {
      color: #333;
      background: #fff;
    }
  }

  input.cur-year {
    color: #fff !important;
  }

  .numInputWrapper {
    margin-left: 6px;
  }
}

.flatpickr-weekdays {
  background: #DA291C !important;
}

span.flatpickr-weekday {
  color: #fff !important;
  font-weight: 500 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  svg {
    fill: #fff !important;
  }
}

.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #da291c !important;
}

.flatpickr-calendar.arrowBottom:before {
  border-top-color: #da291c !important;
}
