@media (max-width:1024px) {

  :not(.desktop-only-view) > .date-rangepicker .datepicker-container {
    position: relative !important;
    .datepicker {
      position: relative !important;
      top: auto !important;
      left: auto !important;

      .datepicker-picker {
        box-shadow: none !important;
      }
    }
  }
}

.datepicker-container {
  position: absolute;
}

.datepicker-dropdown {
  padding: 0;

  &.datepicker-orient-bottom {
    &:before, &:after {
      content: none;
    }
  }

  .datepicker-picker {
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1) !important;
  }
}

.datepicker-picker span {
  text-align: center;
  border-radius: 0 !important;
}

.datepicker-main {
  .datepicker-view {
    width: 18rem !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.datepicker-footer {
  box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
  background-color: whitesmoke;
}

.datepicker-view .days .datepicker-grid {
  border-radius: 8px !important;
  border: 1px solid var(--slate-200, #E2E8F0) !important;
  width: 18rem !important;
}

.datepicker-view .dow, .datepicker-view .days .datepicker-cell {
  flex-basis: 14.28571% !important;
  border-bottom: 1px solid var(--slate-200, #E2E8F0) !important;
  border-right: 1px solid var(--slate-200, #E2E8F0) !important;

  &:nth-child(7), &:nth-child(14), &:nth-child(21), &:nth-child(28), &:nth-child(35), &:nth-child(42) {
    border-right: 0 !important;
  }

  &:nth-child(n + 36) {
    border-bottom: 0 !important;
  }
}

.days-of-week .dow {
  border: 0 !important;
  color: var(--slate-500, #64748B) !important;
  font-weight: 400 !important;
}

.datepicker-view.datepicker-grid .datepicker-cell {
  flex-basis: 25% !important;
}

.datepicker-view .week, .datepicker-cell {
  height: 2.25rem !important;
  line-height: 2.25rem !important;
}

.datepicker-header .datepicker-controls {
  padding: 2px 2px 0 !important;
}

.datepicker-controls .button:focus, .datepicker-controls .button:active {
  outline: none;
}

.datepicker-controls .button:hover {
  border-color: #b5b5b5 !important;
  color: #363636 !important;
}

.datepicker-controls .button:focus {
  border-color: #3273dc;
  color: #363636;
}

.datepicker-controls .button:focus:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

.datepicker-controls .button:active {
  border-color: #4a4a4a;
  color: #363636;
}

.datepicker-controls .button[disabled] {
  cursor: not-allowed;
}

.datepicker-header .datepicker-controls button {
  border-color: transparent !important;
  font-weight: bold;
  box-shadow: none !important;
}

.datepicker-header .datepicker-controls button:hover {
  background: #f9f9f9 !important;
}

.datepicker-header .datepicker-controls button:focus:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
}

.datepicker-header .datepicker-controls button:active {
  background-color: #f2f2f2;
}

.datepicker-header .datepicker-controls {
  button[disabled=disabled], button:disabled {
    box-shadow: none;
    opacity: 0.5;
  }
}

.datepicker-footer .datepicker-controls button {
  margin: calc(0.375rem - 1px) 0.375rem;
  border-radius: 2px;
  width: 100%;
  font-size: 0.75rem;
}

.datepicker-controls .view-switch {
  flex: auto;
}

.datepicker-controls .prev-btn,
.datepicker-controls .next-btn {
  padding-right: 0.375rem !important;
  padding-left: 0.375rem !important;
  width: 2.25rem;
}

.datepicker-controls .prev-btn.disabled,
.datepicker-controls .next-btn.disabled {
  visibility: hidden;
}

.datepicker-view .week {
  width: 2.25rem;
  color: #b5b5b5;
  font-size: 0.75rem;
}

@media (max-width: 22.5rem) {
  .datepicker-view .week {
      width: 1.96875rem;
  }
}

.datepicker-grid {
  width: 15.75rem;
}

@media (max-width: 22.5rem) {
  .calendar-weeks + .days .datepicker-grid {
      width: 13.78125rem;
  }
}

.datepicker-cell:not(.disabled) {
  color: var(--slate-900, #0F172A) !important;
  font-weight: 400 !important;
}

.datepicker-cell:not(.disabled):hover {
  background: var(--slate-200, #E2E8F0) !important;
  cursor: pointer;
}

.datepicker-cell.selected, .datepicker-cell.selected:hover {
  color: #fff !important;
  font-weight: 600 !important;
  background: var(--sky-action-600, #0284C7) !important;
}

.months .datepicker-cell.selected, .months .datepicker-cell.selected:hover {
  background: var(--sky-action-600, #0284C7) !important;
}

.months .datepicker-cell, .years .datepicker-cell, .decades .datepicker-cell {
  border-radius: 5px !important;
  margin: 3px !important;
}

.datepicker-cell.disabled {
  background: var(--slate-100, #F1F5F9) !important;
  color: var(--slate-400, #94A3B8) !important;
  font-weight: 400 !important;
}

.datepicker-cell.prev:not(.disabled), .datepicker-cell.next:not(.disabled) {
  color: #7a7a7a !important;
}

.datepicker-cell.prev.selected, .datepicker-cell.next.selected {
  color: #e6e6e6 !important;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
  border-radius: 0 !important;
  background-color: whitesmoke !important;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
  background-color: #eeeeee !important;
}

.datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
  background-color: #e8e8e8 !important;
}

.datepicker-cell.today:not(.selected) {
  color: var(--sky-action-600, #0284C7) !important;
  background: var(--white, #FFF);
}

.datepicker-cell.today:not(.selected):not(.disabled) {
  color: var(--sky-action-600, #0284C7);
  background: var(--white, #FFF);
}

.datepicker-cell.today:not(.selected):not(.disabled):hover {
  background: var(--slate-200, #E2E8F0);
}

.datepicker-cell.today.focused:not(.selected) {
  color: var(--sky-action-600, #0284C7) !important;
  background: var(--white, #FFF) !important;
}

.datepicker-cell.range-start:not(.selected), .datepicker-cell.range-end:not(.selected) {
  background-color: var(--sky-action-500, #0ea5e9) !important;
  color: #fff !important;
}

.datepicker-cell.range-start.focused:not(.selected), .datepicker-cell.range-end.focused:not(.selected) {
  background-color: #afafaf !important;
}

.datepicker-cell.range-start {
  /* border-radius: 4px 0 0 4px; */
}

.datepicker-cell.range-end {
  /* border-radius: 0 4px 4px 0; */
}

.datepicker-cell.range {
  border-radius: 0 !important;
  background-color: var(--sky-action-200, #bae6fd) !important;
}

.datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
  background-color: #d5d5d5 !important;
}

.datepicker-cell.range.disabled {
  color: #c2c2c2 !important;
}

.datepicker-cell.range.focused {
  background-color: #cfcfcf !important;
}

.datepicker-view.datepicker-grid .datepicker-cell {
  height: 3rem !important;
  line-height: 3rem !important;
}

.datepicker-input.in-edit {
  border-color: #2366d1 !important;
}

.datepicker-input.in-edit:focus, .datepicker-input.in-edit:active {
  /* box-shadow: 0 0 0.25em 0.25em rgba(35, 102, 209, 0.2); */
}