.daterangepicker,
.react-datepicker,
.datepicker.datepicker-dropdown.dropdown-menu:not(#custom_document_container *) {
  width: 280px !important;
  padding: var(--v-size-32) !important;
  border-radius: var(--v-rounded-12) !important;
  background-color: rgba(252, 252, 252, 1) !important;
  border: var(--v-border-input-field) !important;
  box-sizing: content-box !important;
}

.daterangepicker {
  width: auto !important;
  margin-top: 2px !important;
  padding-bottom: 0 !important;
}

.daterangepicker::before,
.daterangepicker::after {
  content: none !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  padding: 4px !important;
}

#scheduleTableTopButton {
  position: relative !important;
}

#scheduleTableTopButton .react-datepicker-popper {
  position: absolute !important;
  top: 43px !important;
  will-change:unset !important;
  transform: none !important;
  margin: unset !important;
}

.react-datepicker__day,
.react-datepicker__current-month,
.react-datepicker__day-names .react-datepicker__day-name,
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  width: 40px !important;
  height: 40px !important;
  font-size: var(--v-size-16) !important;
  color: #203645 !important;
}

.react-datepicker-popper .react-datepicker .react-datepicker__triangle {
  display: none !important;
  border-bottom-color: rgba(252, 252, 252, 1) !important;
}

.react-datepicker-popper .react-datepicker .react-datepicker__triangle::before {
  border-bottom-color: var(--v-borderColor-input-field) !important;
}

.react-datepicker__day-names .react-datepicker__day-name {
  font-weight: bold !important;
}


.react-datepicker__current-month {
  width: auto !important;
}

.daterangepicker .calendar-table th.available:hover {
  background: none !important;
}

.react-datepicker__day--disabled,
.daterangepicker .calendar-table td.off,
.daterangepicker .calendar-table td.off.in-range,
.daterangepicker .calendar-table td.off.start-date,
.daterangepicker .calendar-table td.off.end-date {
  color: var(--v-text-disabled) !important;
  background: none !important;
  font-weight: normal !important;
}

.daterangepicker.show-calendar .drp-buttons {
  margin: 0 -32px !important;
  padding: 16px 32px !important;
  border-top: var(--v-border-divider) !important;
  font: var(--v-font-btn-label) !important;
}

.daterangepicker.show-calendar .drp-buttons button {
  padding: var(--v-size-4) var(--v-size-16) !important;
  border: none !important;
  font: var(--v-font-btn-label) !important;
  height: fit-content !important;
  text-align: center !important;
  white-space: nowrap !important;
  border-radius: var(--v-rounded-full) !important;
  width: auto !important;
  text-decoration-line: none !important;
}

.daterangepicker.show-calendar .drp-buttons button.cancelBtn {
  padding: var(--v-size-4) var(--v-size-16) !important;
  background-color: var(--v-bg-action-secondary) !important;
  color: var(--v-text-link) !important;
  border: var(--v-border-secondary-btn) !important;
}

.daterangepicker.show-calendar .drp-buttons button.applyBtn {
  background-color: var(--v-bg-action) !important;
  color: var(--v-text-on-action) !important;
  border: 2px solid transparent !important;
}

.daterangepicker .drp-selected {
  font: var(--v-font-btn-label) !important;
}

.bootstrap-datetimepicker-widget .timepicker {
  padding: 7px 18px !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu::before,
.datepicker-dropdown:before {
  border: none !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu::after,
.datepicker-dropdown:after {
  border: none !important;
}

.datepicker .datepicker-decades table,
.datepicker .datepicker-days table,
.datepicker .datepicker-months table,
.datepicker .datepicker-centuries table,
.datepicker .datepicker-years table {
  width: 280px !important;
}


.react-datepicker__day:hover,
.daterangepicker .calendar-table td:hover,
.datepicker table tr td:hover {
  border-radius: 50% !important;
}

.react-datepicker__day.in-range:hover,
.daterangepicker .calendar-table td.in-range:not(.start-date, .end-date):hover, 
.datepicker table tr td.in-range:hover {
  border-radius: unset !important;
}

.react-datepicker__day.react-datepicker__day--keyboard-selected,
.react-datepicker__day.react-datepicker__day--selected,
.datepicker table tr td.today.active,
.datepicker table td span.active, 
.datepicker table td i.active,
.datepicker table tr td.active:hover,
.daterangepicker .calendar-table td.active,
.datepicker table tr td.active {
  border-radius: 50% !important;
  background: var(--v-bg-action) !important;
  font: var(--v-font-btn-label) !important;
  color: #fff !important;
  border: none !important;
  text-shadow: none !important;
}

.react-datepicker__day,
.react-datepicker__current-month,
.react-datepicker__day-names .react-datepicker__day-name,
.react-datepicker__day.react-datepicker__day--keyboard-selected,
.react-datepicker__day.react-datepicker__day--selected {
  margin: 0 !important;
  line-height: 40px !important;
}

.datepicker table.table-condensed td span.active {
  border-radius: 20% !important;
}


.datepicker table tr td span.active {
  line-height: 54px !important;
}

.datepicker td, .datepicker th {
  width: 40px !important;
  height: 40px !important;
}

.input-w-icon::after {
  top: 10px !important;
}

.datepicker table tr td span:not(.disabled).focused {
  border-radius: 50% !important;
  background: var(--v-bg-action) !important;
  color: var(--v-text-on-action) !important;
}

.datepicker table tr td span:hover {
  border-radius: 20% !important;
}

.react-datepicker__navigation.react-datepicker__navigation--previous {
  border: none !important;
  top: 48px !important;
  left: 32px !important;
  height: auto !important;
  width: 20px !important;
  background: url('/v4/img/vega-chevron-lefts.svg') center no-repeat !important;
  background-size: 12px 18px !important;
}

.react-datepicker__navigation.react-datepicker__navigation--next {
  border: none !important;
  width: 20px !important;
  top: 48px !important;
  right: 32px !important;
  height: auto !important;
  background: url('/v4/img/vega-chevron-right.svg') center no-repeat !important;
  background-size: 12px 18px !important;
  color: transparent !important;
}

.datepicker .prev,
.datepicker .next {
  background: unset !important;
}

.daterangepicker,
.datepicker .datepicker-switch, .datepicker, .datepicker tfoot tr th {
  font-size: var(--v-size-16) !important;
  color: #203645 !important;
}

.datepicker table td.old,
.datepicker table td.new {
  color: var(--v-text-disabled) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
  width: fit-content !important;
  border: var(--v-border-input-field) !important;
  border-radius: var(--v-rounded-12) !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .col-md-6 {
  flex: unset !important;
  max-width: fit-content !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu .datepicker {
  width: 280px !important;
  box-sizing: content-box !important;
  padding: var(--v-size-32) !important;  
}

.react-datepicker__header,
.bootstrap-datetimepicker-widget.dropdown-menu .datepicker .picker-switch {
  background: none !important;
  border: none !important;
}

.datepicker table tr td.today {
  background: unset !important;
}

.react-datepicker__day:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.datepicker table tr td.day:not(.active):hover, .datepicker table tr td.day.focused,
.bootstrap-datetimepicker-widget table td span:not(.active):hover,
.bootstrap-datetimepicker-widget table td i:hover {
  background: #eee !important;
  cursor: pointer !important;
}

.bootstrap-datetimepicker-widget table td i,
.bootstrap-datetimepicker-widget .timepicker table td,
.timepicker-container .bootstrap-datetimepicker-widget table td i,
.bootstrap-datetimepicker-widget .timepicker-picker table td span,
.timepicker-container .bootstrap-datetimepicker-widget table td span {
  width: 54px !important;
  height: 54px !important;
  line-height: 54px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
}

.bootstrap-datetimepicker-widget .timepicker table td .btn {
  border: none !important;
  padding: 0 !important;
  border-radius: var(--v-rounded-4) !important
}

.bootstrap-datetimepicker-widget .timepicker table td .btn[data-action='togglePeriod'] {
  line-height: 14px !important;
  font-size: 14px !important;
  padding: 6px !important;
  margin-top: -4px;
}

.bootstrap-datetimepicker-widget table td.today::before {
  border: none !important;
}

/* Vega Calendar Style */
.vega-calendar-container {
  padding: var(--v-size-16) !important;
  border-radius: var(--v-rounded-12) !important;
  box-shadow: var(--v-shadow-card) !important;
  background-color: #fff !important;
  border: none !important;
}

.fc-view-container table td, 
.fc-view-container table th {
  border-color: var(--v-bg-divider-secondary) !important;
}

.fc-header-toolbar {
  margin-bottom: var(--v-size-24) !important;
}

.fc-header-toolbar .fc-left .fc-button-group {
  padding: var(--v-size-2) !important;
  border-radius: var(--v-rounded-full) !important;
  background-color: rgba(89, 96, 99, 0.1) !important;
}

.fc-header-toolbar .fc-left .fc-button-group .fc-button {
  padding: var(--v-size-2) var(--v-size-16) !important;
  border-radius: var(--v-rounded-full) !important;
  font: var(--v-font-field-label-sm) !important;
  color: var(--v-text-primary) !important;
  text-align: center !important;
  border: none !important;
  background-color: unset !important;
  height: 28px !important;
}

.fc-header-toolbar .fc-left .fc-button-group .fc-button.fc-state-active {
  border: var(--v-border-chip) !important;
  background-color: #fff !important;

}

.fc-header-toolbar .fc-center h2 {
  font: var(--v-font-h5) !important;
  color: var(--v-text-primary) !important;
}

.fc-state-default {
  background-image: unset !important;
}

.fc-header-toolbar .fc-right .fc-today-button {
  padding: 0 var(--v-size-16) !important;
  background-color: var(--v-bg-action-secondary) !important;
  border: var(--v-border-secondary-btn) !important;
  border-radius: var(--v-rounded-full) !important;
  font: var(--v-font-btn-label) !important;
  color: var(--v-text-link) !important;
  height: var(--v-size-32) !important;
  opacity: 1 !important;
}

.fc-header-toolbar .fc-right .fc-prev-button,
.fc-header-toolbar .fc-right .fc-next-button {
  width: var(--v-size-32) !important;
  height: var(--v-size-32) !important;
  padding: 6px !important;
  background: var(--v-bg-action-secondary) !important;
  border: var(--v-border-secondary-btn) !important;
  color: var(--v-text-link) !important;
  border-radius: var(--v-rounded-full) !important;
}

.fc-header-toolbar .fc-right .fc-prev-button {
  margin-right: var(--v-size-4) !important;
}

.fc-header-toolbar .fc-right .fc-prev-button .fc-icon-left-single-arrow, 
.fc-header-toolbar .fc-right .fc-next-button .fc-icon-right-single-arrow {
  top: unset !important;
  margin: 0 !important;
  height: var(--v-size-16) !important;
  line-height: 14px !important;
  vertical-align: unset !important;
}

.fc-header-toolbar .fc-right .fc-prev-button .fc-icon-left-single-arrow::after,
.fc-header-toolbar .fc-right .fc-next-button .fc-icon-right-single-arrow::after {
  font-weight: 400 !important;
  font-size: 28px !important;
}

.fc-view-container {
  border: var(--v-border-divider-secondary) !important;
  border-radius: var(--v-rounded-4) !important;
}

.fc-view-container .fc-view > table {
  border: hidden transparent !important;
}

.fc-event-container .fc-event {
  border: none !important;
  padding: var(--v-size-2) !important;
  border-radius: var(--v-rounded-2) !important;
}

.fc-unthemed td.fc-today {
  background: var(--v-bg-accent3-tertiary) !important;
}

.fc-event-container .fc-event .fc-time {
  font: var(--v-font-field-label-xs-em) !important;
}

.fc-event-container .fc-event .fc-title {
  font: var(--v-font-field-label-xs) !important;
}

.table-condensed th:not(.disabled) .fa.fa-chevron-left::before, .table-condensed th:not(.disabled) .fa.fa-chevron-right::before {
  color: #292f48 !important;
}

.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
  background: #eee !important;
}

#timeoff-form .datepicker table tr td.today.active {
  background: var(--v-bg-action) !important;
  border-radius: 50% !important;
}