.tj-datepicker-widget {
  select {
    color: var(--text-primary) !important;
    background-color: var(--surfaces-surface-01) !important
  }
  
  select option {
    color: var(--text-primary) !important;
    background-color: var(--surfaces-surface-01) !important
  }

  .react-datepicker__day:not([aria-disabled=true]):hover,
  .react-datepicker__month-text:not([aria-disabled=true]):hover,
  .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
  .react-datepicker__year-text:not([aria-disabled=true]):hover {
    border-radius: 0.3rem;
    background-color: var(--cc-surface1-surface);
    filter: brightness(0.92);
  }

  .react-datepicker__day--selected:not([aria-disabled=true]):hover {
    border-radius: 0.3rem;
    background-color: var(--cc-primary-brand);
    filter: brightness(0.92);
  }

  .react-datepicker__day--keyboard-selected {
    background-color: var(--cc-surface1-surface);
  }

  .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover {
    border-radius: 0.3rem;
    background-color: var(--cc-surface1-surface);
    filter: brightness(0.92);
  }



}

.react-datepicker-popper.tj-datepicker-widget {
  width:242px !important;
}

  // .dark-theme {
  //   select {
  //     color: #fff !important
  //   }
      
  //     select option {
  //       color:  #fff !important // This needs to be black since this has no effect on mac but has on windows
  //     }
  // }

.legacy-datepicker-poppper.react-datepicker-popper.tj-datepicker-widget {
  width: 254px !important;
  border-radius: 6px !important;
}