styling the react date picker

index.css

/*
  Styles for the React date picker input
*/

/* .react-datepicker-wrapper {
  width: 100%;
}

.react-datepicker__input-container {
  width: 100%;
}

.react-datepicker__input-container input {
  --gradient-color1: #fff;
  --gradient-color2: #eeeff2;
  --border-color: #e2e4e8;
  --border-radius: 0.5rem;
  --padding-x: 1rem;
  --padding-y: 0.75rem;
  --border-width: 1px;
  --height: 3rem;
  --font-size: 0.875rem;
  --line-height: 1.25rem;
  padding-top: var(--padding-y);
  padding-bottom: var(--padding-y);
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
  border-radius: var(--border-radius);
  border-width: var(--border-width);
  border-color: var(--border-color);
  width: 100%;
  height: var(--height);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-weight: 600;
  background: linear-gradient(to bottom, var(--gradient-color1), var(--gradient-color2));
}

.react-datepicker__input-container input:focus {
  --border-color: #22c55d;
  --box-shadow1: 0px 0px 0px 3px #CFEDD6;
  --box-shadow2: 0px 2px 2px -1px #E4F5E8;
  outline: none;
  border-color:var(--border-color);
  box-shadow: var(--box-shadow1),
    var(--box-shadow2);
}

.react-datepicker__input-container input::placeholder{
  --placeholder-color: #525C76;
  font-weight: 600;
  color: var(--placeholder-color);
} */