input{
    @apply px-4;
  }
  .date-form-group .control-label{
    @apply block pb-2 text-base font-medium text-dark
  }
  .date-form-group .date-group{
    @apply flex w-full relative
  }
  .date-group .date-control{
    @apply block w-full h-default text-base text-dark rounded-none outline-none border-2 border-solid border-borderColors hover:border-primary focus:border-primary
  }
  .date-form-group p.helper-text{
    @apply block w-full m-0 py-1 text-sm text-disabled
  }
  .date-form-group.error .control-label{
    @apply text-danger
  }
  .error .date-group .date-control{
    @apply  border-danger
  }
  .error .error-text{
    @apply block w-full m-0 py-1 text-sm text-danger
  }
  .date-group input:disabled{
    @apply cursor-not-allowed hover:border-borderColors
  }
  .form-default .date-group .date-control{
    @apply h-default text-base
  }
  .form-small .date-group .date-control{
    @apply h-small text-sm
  }
  .form-medium .date-group .date-control{
    @apply h-medium text-lg
  }
  .form-large .date-group .date-control{
    @apply h-large text-xl
  }
  .form-default .control-label{
    @apply text-base
  }
  .form-small .control-label{
    @apply text-sm
  }
  .form-medium .control-label{
    @apply text-lg
  }
  .form-large .control-label{
    @apply text-xl
  }
  .date-group .right{
    @apply absolute  right-2 top-3 cursor-pointer
  }
  .date-group .right svg {
    @apply w-6 h-6 fill-secondary;
  }


  /* Custom code */
  .react-datepicker{
    @apply !text-white !border !border-solid !border-borderColors;
  }
  .react-datepicker__header{
    @apply !bg-secondary !border-b !border-borderColors;
  }
  .react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header{
    @apply !text-white;
  }
  .react-datepicker__day-name{
    @apply !text-white;
  }
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{
    @apply !text-dark;
  }
  .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected{
    @apply !rounded-full !bg-secondary;
  }
  .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before{
    @apply !border-white;
  }
  .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{
    @apply hidden;
  }
  /* .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    @apply !border-t-0 !border-b !border-secondary
  } */
/*
  .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    @apply !-left-6;
    border: 8px solid transparent;
  }

  .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{
    top: -1px;
    @apply border-b !border-secondary;
  }

  .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    border-top: none;
    @apply border-b !border-secondary;
  }

  .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before{
    @apply border-b !border-secondary;
  }

  .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    box-sizing: content-box;
    position: absolute;
    border: 8px solid transparent !important;
    height: 0;
    width: 1px;
    content: "";
    z-index: -1;
    border-width: 8px;
    left: -8px;
  }

  .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    top: 0;
  }

  .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    border-top: none;
    @apply border-b !border-secondary;
  }

  .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after{
    box-sizing: content-box;
    position: absolute;
    border: 8px solid transparent !important;
    height: 0;
    width: 1px;
    content: "";
    z-index: -1;
    border-width: 8px;
    left: -8px;
  } */