.react-date-picker__calendar{
  top: -120px !important;
  bottom: unset !important;
}

.react-calendar__tile--now{
  background-color: transparent !important;
  border: 1px solid $primary !important;
}

.react-calendar__tile--now:enabled:hover, .react-calendar__tile--now:enabled:focus {
  background: $primary;
  color: $white;
}

.react-date-picker, .react-daterange-picker {
  width: 100%;
  .react-date-picker__inputGroup__divider{
    color: $primary;
  }
  .react-date-picker__wrapper, .react-daterange-picker__wrapper {
    border: none;
    background-color: transparent;
    height: 100%;
    border-radius: 0;
    padding-left: 6px;
    width: 100%;
  }
  &--disabled{
    .react-date-picker__wrapper, .react-daterange-picker__wrapper {
      background-color: #eee;
    }
  }
  .react-date-picker__inputGroup__input, .react-daterange-picker__inputGroup__input {
    border: 0;
    outline: 0;
    &:invalid {
      background-color: transparent;
    }
    &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: transparent;
      opacity: 0; /* Firefox */
    }

    &:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: transparent;
    }

    &::-ms-input-placeholder { /* Microsoft Edge */
      color: transparent;
    }
  }
  .react-date-picker__calendar, .react-daterange-picker__calendar{
    z-index: 1000;
  }
  .react-date-picker__calendar .react-calendar, .react-daterange-picker__calendar .react-calendar{
    border: 0;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    margin-top: $size-small;
  }
  .react-calendar__tile--active{
    background-color: $primary;
    &:enabled{
      &:hover, &:focus{
        background-color: $primary2;
      }
    }
  }
  .react-calendar__tile{
    border-radius: 0;
  }
  .react-calendar__tile--hasActive{
    background-color: $primary;
  }
}