@import 'admin/globals/variables';
@import 'admin/globals/mixins';
@import 'admin/plugins/font-awesome';

// scss-lint:disable QualifyingElement

.date-range-filter {
  .range-divider {
    padding: 0;
  }
  input.datepicker {
    width: 96px !important;
  }
}

input.datetimepicker {
  min-width: 12.9em;
}

.container input[readonly].flatpickr-input {
  background-color: $white;
  cursor: pointer;
}

img.ui-datepicker-trigger {
  margin-left: -1.75em;
  position: absolute;
  margin-top: 0.5em;
}

// scss-lint:enable QualifyingElement

@import 'admin/globals/variables';
@import 'admin/globals/mixins';
@import 'admin/plugins/font-awesome';

// scss-lint:disable QualifyingElement

.date-range-filter {
  .range-divider {
    padding: 0;
  }
  input.datepicker {
    width: 96px !important;
  }
}

input.datetimepicker {
  min-width: 12.9em;
}

.container input[readonly].flatpickr-input,
.container input[readonly].datepicker,
.container input[readonly].datetimepicker {
  background-color: $white;
  cursor: pointer;
}

img.ui-datepicker-trigger {
  margin-left: -1.75em;
  position: absolute;
  margin-top: 0.5em;
}

// scss-lint:enable QualifyingElement

Add new CSS specifications for flatpickr input as using altInput
Add new CSS specifications for flatpickr input as using altInput

 - We now use altInput which is the only visible input to the end user.
 - This input inherits all the classes from the component who instantiated it, but not the `.flatpickr-input` class.
 - Add more specification to have a beautiful white background with pointer component.
