.form-group.fl-date-picker {
  position: relative;
  overflow: hidden;
}

.form-group.fl-date-picker[dir="rtl"] {
  direction: rtl;
}

.form-group.fl-date-picker > .fa {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 45px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.form-group.fl-date-picker > .fa:first-child {
  left: 0;
  border-right: 1px solid #e5e5e5;
  pointer-events: none;
}

.form-group.fl-date-picker[dir="rtl"] > .fa:first-child {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid #e5e5e5;
}

.form-group.fl-date-picker > .form-control {
  min-height: 44px;
  height: auto;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 6px 57px;
  line-height: 1.42857143;
  -webkit-appearance: none;
  box-shadow: none;
}

.form-group.fl-date-picker.readonly > .form-control,
.form-group.fl-date-picker.readonly > .fa:first-child {
  pointer-events: none;
  color: #999999;
}

.form-group.fl-date-picker.required > .form-control {
  padding-right: 13px;
}

.form-group.fl-date-picker.required[dir="rtl"] > .form-control {
  padding-right: 57px;
  padding-left: 13px;
}

/* For invisible access of browser date pickers on mobile */
.form-group.fl-date-picker > input[type="date"]::-webkit-inner-spin-button,
.form-group.fl-date-picker > input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  background: none;
  padding: 0;
  margin: 0;
}

.form-group.fl-date-picker > .fa.fa-times {
  cursor: pointer;
  right: 0;
  opacity: 0.5;
}

.form-group.fl-date-picker[dir="rtl"] > .fa.fa-times {
  right: auto;
  left: 0;
}

.form-group.fl-date-picker > .fa.fa-times,
.form-group.fl-date-picker.readonly > .fa.fa-times,
.form-group.fl-date-picker.readonly.has-value > .fa.fa-times,
.form-group.fl-date-picker.required.has-value > .fa.fa-times {
  display: none;
}

.form-group.fl-date-picker.has-value > .fa.fa-times {
  display: flex;
}

html.no-ios.no-android .form-group.fl-date-picker > .form-control[type="date"] {
  display: none;
}

.form-group.fl-date-picker > .form-control[type="date"] {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

html.ios .form-group.fl-date-picker > .form-control[type="text"],
html.android .form-group.fl-date-picker > .form-control[type="text"] {
  pointer-events: none;
}

/* Customizing Bootstrap Datepicker UI */

.datepicker table tr td,
.datepicker table tr th {
  min-width: 38px;
}

.datepicker .datepicker-switch:after {
  content: "\f044";
  content: "\f0d7";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  width: 1.5em;
}

.datepicker .datepicker-switch:before {
  content: "";
  display: inline-block;
  width: 1.5em;
}

.datepicker .datepicker-centuries .datepicker-switch:after {
  content: "";
}

.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled] {
  background-image: none;
}

.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
  background-image: none;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 14px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 15px;
}

.form-group.fl-time-picker {
  position: relative;
  overflow: hidden;
}

.form-group.fl-time-picker > .fa {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 45px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.form-group.fl-time-picker > .fa:first-child {
  left: 0;
  border-right: 1px solid #e5e5e5;
  pointer-events: none;
}

.form-group.fl-time-picker[dir="rtl"] > .fa:first-child {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid #e5e5e5;
}

.form-group.fl-time-picker > .form-control {
  height: 44px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 6px 57px;
  line-height: 1.42857143;
  -webkit-appearance: none;
  box-shadow: none;
}

.form-group.fl-time-picker[dir="rtl"] > .form-control {
  text-align: right;
}

.form-group.fl-time-picker.required > .form-control {
  padding-right: 13px;
}

.form-group.fl-time-picker.required[dir="rtl"] > .form-control {
  padding-right: 57px;
  padding-left: 13px;
}

/* For invisible access of browser time pickers on mobile */
.form-group.fl-time-picker > input[type="time"]::-webkit-inner-spin-button,
.form-group.fl-time-picker > input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 100%;
  vertical-align: middle;
  background: none;
  padding: 0;
  margin: 0;
}

.form-group.fl-time-picker > .fa.fa-times {
  cursor: pointer;
  right: 0;
  opacity: 0.5;
}

.form-group.fl-time-picker[dir="rtl"] > .fa.fa-times {
  right: auto;
  left: 0;
}

.form-group.fl-time-picker > .fa.fa-times,
.form-group.fl-time-picker.readonly > .fa.fa-times,
.form-group.fl-time-picker.readonly.has-value > .fa.fa-times,
.form-group.fl-time-picker.required.has-value > .fa.fa-times {
  display: none;
}

.form-group.fl-time-picker.has-value > .fa.fa-times {
  display: flex;
}

html.no-ios.no-android .form-group.fl-time-picker > .form-control[type="text"] {
  display: none;
}

html.ios .form-group.fl-time-picker > .form-control[type="time"],
html.android .form-group.fl-time-picker > .form-control[type="time"] {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

html.ios .form-group.fl-time-picker > .form-control[type="text"],
html.android .form-group.fl-time-picker > .form-control[type="text"] {
  pointer-events: none;
}

.form-group.fl-time-picker.readonly > .form-control,
.form-group.fl-time-picker.readonly > .fa:first-child {
  pointer-events: none;
}

.form-group.fl-date-picker > .form-control {
  padding-right: 10px;
}

.fl-date-range {
  display: flex;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.fl-date-range .fl-date-picker {
  width: calc(50% - 23px);
}

.fl-date-range .arrow-right {
  color: #202126;
}

.form-group.fl-time-picker > .form-control {
  padding-right: 10px;
}

.fl-time-range {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.fl-time-range .fl-time-picker {
  width: calc(50% - 23px);
}

.fl-time-range .form-group.fl-time-picker.readonly .form-control {
  color: #737373;
}

.fl-time-range .arrow-right {
  color: #202126;
}

.fl-time-range.readonly .arrow-right {
  color: #e1e1e1;
}