removed parent node,

src/components/common/DateRangePicker.jsx

@@ -28,9 +28,9 @@ const DateRangePicker = ({
       altFormat: "d-m-Y", 
       defaultDate: [startDate, endDate], 
       static: false,       
-      appendTo: document.body,
+      // appendTo: document.body,
       clickOpens: true,
-      maxDate: endDate, // ✅ Disable future dates
+      maxDate: endDate, 
       onChange: (selectedDates, dateStr) => {
         const [startDateString, endDateString] = dateStr.split(" To ");
         onRangeChange?.({ startDate: startDateString, endDate: endDateString });
@@ -51,23 +51,15 @@ const DateRangePicker = ({
 <div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
   <input
     type="text"
-    className="form-control form-control-sm ps-2 pe-5  "
+    className="form-control form-control-sm ps-2 pe-5  me-4"
     placeholder="From to End"
     id="flatpickr-range"
     ref={inputRef}
   />
 
   <i
-    className="bx bx-calendar calendar-icon cursor-pointer"
-    style={{
-      position: "absolute",
-      top: "50%",
-      right: "12px",
-      transform: "translateY(-50%)",
-      color: "#6c757d",
-      fontSize: "1.1rem",
-     
-    }}
+    className="bx bx-calendar calendar-icon cursor-pointer position-absolute top-50  translate-middle-y "
+    style={{right:"12px"}}
   ></i>
 </div>