diff --git a/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx b/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx
index cb13822..63e91b5 100644
--- a/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx
+++ b/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx
@@ -1,4 +1,12 @@
-import { useEffect, useState, useMemo, useCallback, lazy } from 'react';
+import {
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  lazy,
+  Suspense,
+  useRef,
+} from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FaChartLine, FaRupeeSign } from 'react-icons/fa';
 import { Badge, Popconfirm, Tooltip } from 'antd';
@@ -8,6 +16,7 @@ import {
   getCardDataWithoutSub,
   getCardDataWithoutSubmodule,
   getLayoutproductCard,
+  getPreferenceData,
   getSelectedFavItems,
   GlobalOrderStatus,
   GlobalOtherSevices,
@@ -482,10 +491,10 @@ const SalesCountForStandard = React.memo(() => {
     return (
       DineInAccess?.SettingValue === 'Y' &&
       DineInOrderCount +
-        TakeAwayOrderCount +
-        SelfTakeAwayOrderCount +
-        SelfDineInOrderCount >
-        0 &&
+      TakeAwayOrderCount +
+      SelfTakeAwayOrderCount +
+      SelfDineInOrderCount >
+      0 &&
       (takeAwayPreference || dinePreference)
     );
   }, [DineInAccess, sales, dinePreference, takeAwayPreference]);
@@ -579,715 +588,721 @@ const SalesCountForStandard = React.memo(() => {
   };
 
   return (
-    <div className="NewLayoutBillContainer">
-      <Messages
-        messageType={messageType}
-        messageData={messageData}
-        onComplete={onComplete}
-      />
-      <div className="LicenseActive">
-        <div>
-          {showSalesTooltip ? (
-            <Tooltip
-              className="NetAmountNew"
-              placement="bottom"
-              title={
-                <div style={{ display: 'flex', gap: '1rem' }}>
-                  {takeAwayPreference && (
-                    <div style={{ display: 'flex', gap: '5px' }}>
-                      <div>Takeaway:</div>
-                      <div>{TakeAwayOrderCount + SelfTakeAwayOrderCount}</div>
-                    </div>
-                  )}
-                  {dinePreference && (
-                    <div style={{ display: 'flex', gap: '5px' }}>
-                      <div>Dine-in:</div>
-                      <div>{DineInOrderCount + SelfDineInOrderCount}</div>
-                    </div>
-                  )}
+    <Suspense fallback={<div>Loading...</div>}>
+      <div className="NewLayoutBillContainer">
+        <Messages
+          messageType={messageType}
+          messageData={messageData}
+          onComplete={onComplete}
+        />
+        <div className="LicenseActive">
+          <div>
+            {showSalesTooltip ? (
+              <Tooltip
+                className="NetAmountNew"
+                placement="bottom"
+                title={
+                  <div style={{ display: 'flex', gap: '1rem' }}>
+                    {takeAwayPreference && (
+                      <div style={{ display: 'flex', gap: '5px' }}>
+                        <div>Takeaway:</div>
+                        <div>{TakeAwayOrderCount + SelfTakeAwayOrderCount}</div>
+                      </div>
+                    )}
+                    {dinePreference && (
+                      <div style={{ display: 'flex', gap: '5px' }}>
+                        <div>Dine-in:</div>
+                        <div>{DineInOrderCount + SelfDineInOrderCount}</div>
+                      </div>
+                    )}
+                  </div>
+                }
+                onClick={() =>
+                  (OverAllOrderCount || 0) > 0 && setIsModalOpen(true)
+                }
+              >
+                <FaChartLine color="#fde047" />
+                <div className="NetAmountNew">
+                  {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
+                </div>
+              </Tooltip>
+            ) : (
+              <div
+                style={{
+                  display: 'flex',
+                  gap: '5px',
+                  alignItems: 'center',
+                  fontSize: '0.9rem',
+                  cursor: 'pointer',
+                }}
+                onClick={() =>
+                  (OverAllOrderCount || 0) > 0 && setIsModalOpen(true)
+                }
+              >
+                <FaChartLine color="#ffffffff" />
+                <div className="NetAmountNew">
+                  {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
                 </div>
-              }
-              onClick={() =>
-                (OverAllOrderCount || 0) > 0 && setIsModalOpen(true)
-              }
-            >
-              <FaChartLine color="#fde047" />
-              <div className="NetAmountNew">
-                {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
               </div>
-            </Tooltip>
-          ) : (
-            <div
-              style={{
-                display: 'flex',
-                gap: '5px',
-                alignItems: 'center',
-                fontSize: '0.9rem',
-                cursor: 'pointer',
-              }}
-              onClick={() =>
-                (OverAllOrderCount || 0) > 0 && setIsModalOpen(true)
-              }
-            >
-              <FaChartLine color="#ffffffff" />
-              <div className="NetAmountNew">
-                {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Rest of your component remains the same */}
-      {DineInAccess?.SettingValue === 'Y' &&
-        takeAwayPreference &&
-        (TakeAwayOrderCount || SelfTakeAwayOrderCount || PreOrderAmount) >
-          0 && (
-          <Tooltip
-            className="standardTooltipDineIN"
-            title={renderBreakdown([
-              {
-                label: 'Admin + Staff :',
-                value: TakeAwayAmount,
-                includeInTotal: true,
-              },
-              {
-                label: 'Self Booking :',
-                value: SelfTakeAwayAmount,
-                includeInTotal: true,
-              },
-              {
-                label: 'Preorder :',
-                value: PreOrderAmount,
-                includeInTotal: true,
-              },
-              {
-                label: 'Offer(-) :',
-                value: -OverAllTakeAwayOfferAmount,
-                includeInTotal: true,
-              },
-            ])}
-          >
-            <div
-              className="standardTooltipDineIN"
-              style={{
-                display: 'flex',
-                gap: '5px',
-                fontSize: '14px',
-                color: '#fff',
-              }}
-            >
-              <div>{isMobile ? 'TA' : 'Take Away'} : </div>
-              <div>{`₹ ${safeRound(totalTakeAway)}`}</div>
-            </div>
-          </Tooltip>
-        )}
-
-      {DineInAccess?.SettingValue === 'Y' &&
-        dinePreference &&
-        (DineInOrderCount || SelfDineInOrderCount) > 0 && (
-          <Tooltip
-            className="standardTooltipDineIN"
-            title={renderBreakdown([
-              {
-                label: 'Admin + Staff :',
-                value: DineInAmount,
-                includeInTotal: true,
-              },
-              {
-                label: 'Self Booking :',
-                value: SelfDineInAmount,
-                includeInTotal: true,
-              },
-              {
-                label: 'Offer(-) :',
-                value: -OverAllDineInOfferAmount,
-                includeInTotal: true,
-              },
-            ])}
-          >
-            <div
-              className="standardTooltipDineIN"
-              style={{
-                display: 'flex',
-                gap: '5px',
-                fontSize: '14px',
-                color: '#fff',
-              }}
-            >
-              <div>{isMobile ? 'DI' : 'Dine In'} : </div>
-              <div>{`₹ ${safeRound(totalDineIn)}`}</div>
-            </div>
-          </Tooltip>
-        )}
-
-      <div className="NetAmountIcons-Main">
-        <div
-          className="FaRupeeSign"
-          onClick={() => netAmount > 0 && setIsNetAmtModalOpen(true)}
-          style={{ cursor: 'pointer' }}
-        >
-          <FaRupeeSign color="#ffffffff" />
-          <div className="NetAmountNew">
-            {isMobile ? 'NA' : 'Net Amount'} : ₹ {safeRound(netAmount)}
+            )}
           </div>
         </div>
-      </div>
-      {TableData?.length > 0 && !sportsAppPreference && AutoReceiveStock && (
-        <button
-          className="blink blinkStock"
-          onClick={() => setIsReceivedModelOpen(true)}
-        >
-          <MdOutlineCallReceived />
-          Stock
-        </button>
-      )}
-      {preferenceshortcutkey && (
-        <div className="KeyshortCutNav3">
-          <ShortcutKeyHelper />
+
+        {/* Rest of your component remains the same */}
+        {DineInAccess?.SettingValue === 'Y' &&
+          takeAwayPreference &&
+          (TakeAwayOrderCount || SelfTakeAwayOrderCount || PreOrderAmount) >
+          0 && (
+            <Tooltip
+              className="standardTooltipDineIN"
+              title={renderBreakdown([
+                {
+                  label: 'Admin + Staff :',
+                  value: TakeAwayAmount,
+                  includeInTotal: true,
+                },
+                {
+                  label: 'Self Booking :',
+                  value: SelfTakeAwayAmount,
+                  includeInTotal: true,
+                },
+                {
+                  label: 'Preorder :',
+                  value: PreOrderAmount,
+                  includeInTotal: true,
+                },
+                {
+                  label: 'Offer(-) :',
+                  value: -OverAllTakeAwayOfferAmount,
+                  includeInTotal: true,
+                },
+              ])}
+            >
+              <div
+                className="standardTooltipDineIN"
+                style={{
+                  display: 'flex',
+                  gap: '5px',
+                  fontSize: '14px',
+                  color: '#fff',
+                }}
+              >
+                <div>{isMobile ? 'TA' : 'Take Away'} : </div>
+                <div>{`₹ ${safeRound(totalTakeAway)}`}</div>
+              </div>
+            </Tooltip>
+          )}
+
+        {DineInAccess?.SettingValue === 'Y' &&
+          dinePreference &&
+          (DineInOrderCount || SelfDineInOrderCount) > 0 && (
+            <Tooltip
+              className="standardTooltipDineIN"
+              title={renderBreakdown([
+                {
+                  label: 'Admin + Staff :',
+                  value: DineInAmount,
+                  includeInTotal: true,
+                },
+                {
+                  label: 'Self Booking :',
+                  value: SelfDineInAmount,
+                  includeInTotal: true,
+                },
+                {
+                  label: 'Offer(-) :',
+                  value: -OverAllDineInOfferAmount,
+                  includeInTotal: true,
+                },
+              ])}
+            >
+              <div
+                className="standardTooltipDineIN"
+                style={{
+                  display: 'flex',
+                  gap: '5px',
+                  fontSize: '14px',
+                  color: '#fff',
+                }}
+              >
+                <div>{isMobile ? 'DI' : 'Dine In'} : </div>
+                <div>{`₹ ${safeRound(totalDineIn)}`}</div>
+              </div>
+            </Tooltip>
+          )}
+
+        <div className="NetAmountIcons-Main">
+          <div
+            className="FaRupeeSign"
+            onClick={() => netAmount > 0 && setIsNetAmtModalOpen(true)}
+            style={{ cursor: 'pointer' }}
+          >
+            <FaRupeeSign color="#ffffffff" />
+            <div className="NetAmountNew">
+              {isMobile ? 'NA' : 'Net Amount'} : ₹ {safeRound(netAmount)}
+            </div>
+          </div>
         </div>
-      )}
-      <AllSalesPageSettings />
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        {Customisebillno && <CustomisedInvoiceChange />}
-        {SessionData?.FeatureAddonData?.FeatureDtls?.find(
-          (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-        ) &&
-          !sportsAppPreference && (
-            <div
+        {TableData?.length > 0 && !sportsAppPreference && AutoReceiveStock && (
+          <button
+            className="blink blinkStock"
+            onClick={() => setIsReceivedModelOpen(true)}
+          >
+            <MdOutlineCallReceived />
+            Stock
+          </button>
+        )}
+        {preferenceshortcutkey && (
+          <div className="KeyshortCutNav3">
+            <ShortcutKeyHelper />
+          </div>
+        )}
+        <AllSalesPageSettings />
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          {Customisebillno && <CustomisedInvoiceChange />}
+          {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+            (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+          ) &&
+            !sportsAppPreference && (
+              <div
+                style={{
+                  pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                  opacity: OrderStatus > 0 ? 0.5 : 1,
+                }}
+              >
+                {!OtherServicesglobal && (
+                  <Tooltip title={'Kiosk Sales'}>
+                    <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                      <PozoKioskIcon
+                        onClick={() => openModalKiosk()}
+                        style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                        className="iconsize"
+                      />
+                    </Badge>
+                  </Tooltip>
+                )}
+              </div>
+            )}
+          {Kioskopen && (
+            <BSKioskCounterPayment
+              Kioskopen={Kioskopen}
+              closeKioskModal={closeModalKiosk}
+            />
+          )}
+          <ProductPriceChange />
+          {!OtherServicesglobal && !sportsAppPreference && (
+            <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
+              {' '}
+              <BSExpireProductsList />
+            </TooltipWrapper>
+          )}
+
+          {!OtherServicesglobal && (
+            <>
+              {CheckBookingStatus == 'Open' ? (
+                <div style={{ marginLeft: '10px' }}>
+                  <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
+                    {' '}
+                    <BookingCloseIcon
+                      onClick={OpenBookingModal}
+                      bgFill={'#52c41a'}
+                      style={{
+                        fontSize: '16px',
+                        marginTop: '4px',
+                        color: '#52c41a',
+                        cursor: 'pointer',
+                      }}
+                    />
+                  </TooltipWrapper>
+                </div>
+              ) : (
+                <div style={{ marginLeft: '10px' }}>
+                  <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                    <Popconfirm
+                      placement="leftTop"
+                      title="Booking Open"
+                      description="Are you sure you want to Open the sales?"
+                      okText="Yes"
+                      cancelText="No"
+                      onConfirm={() => BookingOpenFun('Open')}
+                    >
+                      <span>
+                        <BookingCloseIcon
+                          bgFill="red"
+                          style={{
+                            fontSize: '16px',
+                            marginTop: '4px',
+                            color: '#52c41a',
+                            cursor: 'pointer',
+                          }}
+                        />
+                      </span>
+                    </Popconfirm>
+                  </TooltipWrapper>
+                </div>
+              )}
+              {!sportsAppPreference && (
+                <div style={{ marginLeft: '10px' }}>
+                  <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                    {''}
+                    <BSEwayBillicon
+                      style={{ cursor: 'pointer', marginTop: '5px' }}
+                      onClick={OpenListOfInvoices}
+                    />
+                  </TooltipWrapper>
+                </div>
+              )}
+            </>
+          )}
+
+          {BookingModalOpen && (
+            <RetailBookingClosing
+              PaymentOpen={BookingModalOpen}
+              PaymentClose={HandleBookingModalClose}
+            />
+          )}
+          {ListOfInvoices && (
+            <ListOfSalesInvoices
+              ListOfInvoicesOpen={ListOfInvoices}
+              handleInvoiceClose={handleInvoiceClose}
+            />
+          )}
+        </div>
+
+        {/* Modal with table for multiple bookings */}
+
+        <DefaultModal
+          open={isModalOpen}
+          title="Sales Details"
+          handleCancel={() => setIsModalOpen(false)}
+          handleSubmit={() => setIsModalOpen(false)}
+          width={700}
+          footer={false}
+        >
+          <div style={{ overflowX: 'auto' }}>
+            <table
               style={{
-                pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                opacity: OrderStatus > 0 ? 0.5 : 1,
+                width: '100%',
+                borderCollapse: 'collapse',
+                fontFamily: "'Segoe UI', Roboto, sans-serif",
+                fontSize: '14px',
+                borderRadius: '8px',
+                overflow: 'hidden',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
               }}
             >
-              {!OtherServicesglobal && (
-                <Tooltip title={'Kiosk Sales'}>
-                  <Badge count={badgeCount} offset={[-10, 3]} size="small">
-                    <PozoKioskIcon
-                      onClick={() => openModalKiosk()}
-                      style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                      className="iconsize"
-                    />
-                  </Badge>
-                </Tooltip>
-              )}
-            </div>
-          )}
-        {Kioskopen && (
-          <BSKioskCounterPayment
-            Kioskopen={Kioskopen}
-            closeKioskModal={closeModalKiosk}
-          />
-        )}
-        <ProductPriceChange />
-        {!OtherServicesglobal && !sportsAppPreference && (
-          <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
-            {' '}
-            <BSExpireProductsList />
-          </TooltipWrapper>
-        )}
+              <thead>
+                <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    S.No
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    Order ID
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    Customer
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    Mobile
+                  </th>
+                  {/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    Payment Type
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '10px' }}>
+                    Amount (₹)
+                  </th>
+                </tr>
+              </thead>
 
-        {!OtherServicesglobal && (
-          <>
-            {CheckBookingStatus == 'Open' ? (
-              <div style={{ marginLeft: '10px' }}>
-                <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                  {' '}
-                  <BookingCloseIcon
-                    onClick={OpenBookingModal}
-                    bgFill={'#52c41a'}
-                    style={{
-                      fontSize: '16px',
-                      marginTop: '4px',
-                      color: '#52c41a',
-                      cursor: 'pointer',
-                    }}
-                  />
-                </TooltipWrapper>
-              </div>
-            ) : (
-              <div style={{ marginLeft: '10px' }}>
-                <TooltipWrapper title="Booking Open" isMobile={isMobile}>
-                  <Popconfirm
-                    placement="leftTop"
-                    title="Booking Open"
-                    description="Are you sure you want to Open the sales?"
-                    okText="Yes"
-                    cancelText="No"
-                    onConfirm={() => BookingOpenFun('Open')}
-                  >
-                    <span>
-                      <BookingCloseIcon
-                        bgFill="red"
-                        style={{
-                          fontSize: '16px',
-                          marginTop: '4px',
-                          color: '#52c41a',
-                          cursor: 'pointer',
-                        }}
-                      />
-                    </span>
-                  </Popconfirm>
-                </TooltipWrapper>
-              </div>
-            )}
-            {!sportsAppPreference && (
-              <div style={{ marginLeft: '10px' }}>
-                <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                  {''}
-                  <BSEwayBillicon
-                    style={{ cursor: 'pointer', marginTop: '5px' }}
-                    onClick={OpenListOfInvoices}
-                  />
-                </TooltipWrapper>
-              </div>
-            )}
-          </>
-        )}
-
-        {BookingModalOpen && (
-          <RetailBookingClosing
-            PaymentOpen={BookingModalOpen}
-            PaymentClose={HandleBookingModalClose}
-          />
-        )}
-        {ListOfInvoices && (
-          <ListOfSalesInvoices
-            ListOfInvoicesOpen={ListOfInvoices}
-            handleInvoiceClose={handleInvoiceClose}
-          />
-        )}
-      </div>
-
-      {/* Modal with table for multiple bookings */}
-
-      <DefaultModal
-        open={isModalOpen}
-        title="Sales Details"
-        handleCancel={() => setIsModalOpen(false)}
-        handleSubmit={() => setIsModalOpen(false)}
-        width={700}
-        footer={false}
-      >
-        <div style={{ overflowX: 'auto' }}>
-          <table
-            style={{
-              width: '100%',
-              borderCollapse: 'collapse',
-              fontFamily: "'Segoe UI', Roboto, sans-serif",
-              fontSize: '14px',
-              borderRadius: '8px',
-              overflow: 'hidden',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-            }}
-          >
-            <thead>
-              <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  S.No
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  Order ID
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  Customer
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  Mobile
-                </th>
-                {/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  Payment Type
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
-                  Amount (₹)
-                </th>
-              </tr>
-            </thead>
-
-            <tbody>
-              {currentData?.length > 0 ? (
-                currentData?.map((item, index) => (
-                  <tr
-                    key={item.OrderId}
-                    style={{
-                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
-                      textAlign: 'center',
-                      transition: 'background 0.3s',
-                    }}
-                    onMouseEnter={(e) =>
-                      (e.currentTarget.style.backgroundColor = '#d6e4ff')
-                    }
-                    onMouseLeave={(e) =>
+              <tbody>
+                {currentData?.length > 0 ? (
+                  currentData?.map((item, index) => (
+                    <tr
+                      key={item.OrderId}
+                      style={{
+                        backgroundColor:
+                          index % 2 === 0 ? '#f7faff' : '#e9f1ff',
+                        textAlign: 'center',
+                        transition: 'background 0.3s',
+                      }}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.backgroundColor = '#d6e4ff')
+                      }
+                      onMouseLeave={(e) =>
                       (e.currentTarget.style.backgroundColor =
                         index % 2 === 0 ? '#f7faff' : '#e9f1ff')
-                    }
-                  >
-                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-                      {startIndex + index + 1}
-                    </td>
-                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-                      {extractLastNumberOrderId(item.OrderId)}
-                    </td>
-                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-                      {item.CustName || '—'}
-                    </td>
-                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-                      {item.CustMobile || '—'}
-                    </td>
-                    {/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
+                      }
+                    >
+                      <td style={{ border: '1px solid #ddd', padding: '8px' }}>
+                        {startIndex + index + 1}
+                      </td>
+                      <td style={{ border: '1px solid #ddd', padding: '8px' }}>
+                        {extractLastNumberOrderId(item.OrderId)}
+                      </td>
+                      <td style={{ border: '1px solid #ddd', padding: '8px' }}>
+                        {item.CustName || '—'}
+                      </td>
+                      <td style={{ border: '1px solid #ddd', padding: '8px' }}>
+                        {item.CustMobile || '—'}
+                      </td>
+                      {/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
                                             {item.BookedBy || "—"}
                                         </td> */}
-                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
-                      {item.PaymentTypeName || '—'}
-                    </td>
+                      <td style={{ border: '1px solid #ddd', padding: '8px' }}>
+                        {item.PaymentTypeName || '—'}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          padding: '8px',
+                          fontWeight: '600',
+                          color: '#2e7d32',
+                          backgroundColor: '#eaf6ea',
+                        }}
+                      >
+                        ₹{item.Amount?.toLocaleString()}
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
                     <td
+                      colSpan="7"
                       style={{
+                        textAlign: 'center',
+                        padding: '12px',
                         border: '1px solid #ddd',
-                        padding: '8px',
-                        fontWeight: '600',
-                        color: '#2e7d32',
-                        backgroundColor: '#eaf6ea',
+                        color: '#888',
                       }}
                     >
-                      ₹{item.Amount?.toLocaleString()}
+                      No booking data available
                     </td>
                   </tr>
-                ))
-              ) : (
-                <tr>
-                  <td
-                    colSpan="7"
+                )}
+              </tbody>
+            </table>
+
+            {/* Pagination */}
+            {totalPages > 1 && (
+              <div
+                style={{
+                  marginTop: '12px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  gap: '8px',
+                }}
+              >
+                {currentPage == 1 ? (
+                  ''
+                ) : (
+                  <button
+                    onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                    disabled={currentPage === 1}
                     style={{
-                      textAlign: 'center',
-                      padding: '12px',
-                      border: '1px solid #ddd',
-                      color: '#888',
+                      padding: '5px 10px',
+                      backgroundColor: '#003366',
+                      color: '#fff',
+                      border: 'none',
+                      borderRadius: '4px',
+                      cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                      opacity: currentPage === 1 ? 0.5 : 1,
                     }}
                   >
-                    No booking data available
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
+                    Prev
+                  </button>
+                )}
+
+                <span style={{ fontWeight: '600' }}>
+                  Page {currentPage} of {totalPages}
+                </span>
 
-          {/* Pagination */}
-          {totalPages > 1 && (
-            <div
-              style={{
-                marginTop: '12px',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                gap: '8px',
-              }}
-            >
-              {currentPage == 1 ? (
-                ''
-              ) : (
                 <button
-                  onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
-                  disabled={currentPage === 1}
+                  onClick={() =>
+                    setCurrentPage((p) => Math.min(p + 1, totalPages))
+                  }
+                  disabled={currentPage === totalPages}
                   style={{
                     padding: '5px 10px',
                     backgroundColor: '#003366',
                     color: '#fff',
                     border: 'none',
                     borderRadius: '4px',
-                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
-                    opacity: currentPage === 1 ? 0.5 : 1,
+                    cursor:
+                      currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
                   }}
                 >
-                  Prev
+                  Next
                 </button>
-              )}
+              </div>
+            )}
+          </div>
+        </DefaultModal>
 
-              <span style={{ fontWeight: '600' }}>
-                Page {currentPage} of {totalPages}
-              </span>
+        {/* Modal with table for multiple Net Amt */}
 
-              <button
-                onClick={() =>
-                  setCurrentPage((p) => Math.min(p + 1, totalPages))
-                }
-                disabled={currentPage === totalPages}
-                style={{
-                  padding: '5px 10px',
-                  backgroundColor: '#003366',
-                  color: '#fff',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor:
-                    currentPage === totalPages ? 'not-allowed' : 'pointer',
-                  opacity: currentPage === totalPages ? 0.5 : 1,
-                }}
-              >
-                Next
-              </button>
-            </div>
-          )}
-        </div>
-      </DefaultModal>
-
-      {/* Modal with table for multiple Net Amt */}
-
-      <DefaultModal
-        open={isNetAmtModalOpen}
-        title="Sales Net Amount"
-        handleCancel={() => setIsNetAmtModalOpen(false)}
-        handleSubmit={() => setIsNetAmtModalOpen(false)}
-        width={800}
-        footer={false}
-      >
-        <div style={{ overflowX: 'auto' }}>
-          <table
-            style={{
-              width: '100%',
-              borderCollapse: 'collapse',
-              textAlign: 'center',
-              fontFamily: "'Segoe UI', Roboto, sans-serif",
-              fontSize: '14px',
-              borderRadius: '8px',
-              overflow: 'hidden',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-            }}
-          >
-            <thead>
-              <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
-                <th
-                  colSpan="2"
-                  style={{ border: '1px solid #ddd', padding: '10px' }}
-                >
-                  Cash
-                </th>
-                <th
-                  colSpan="2"
-                  style={{ border: '1px solid #ddd', padding: '10px' }}
-                >
-                  UPI
-                </th>
-                <th
-                  colSpan="2"
-                  style={{ border: '1px solid #ddd', padding: '10px' }}
-                >
-                  Card
-                </th>
-                <th
-                  colSpan="2"
-                  style={{ border: '1px solid #ddd', padding: '10px' }}
-                >
-                  Credit
-                </th>
-                <th
-                  colSpan="2"
-                  style={{ border: '1px solid #ddd', padding: '10px' }}
-                >
-                  Business UPI
-                </th>
-                <th
-                  rowSpan="2"
-                  style={{
-                    border: '1px solid #ddd',
-                    padding: '10px',
-                    backgroundColor: '#002244',
-                    color: '#fff',
-                  }}
-                >
-                  Total
-                </th>
-              </tr>
-              <tr style={{ backgroundColor: '#004080', color: '#fff' }}>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Count
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Amt
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Count
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Amt
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Count
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Amt
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Count
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Amt
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Count
-                </th>
-                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
-                  Amt
-                </th>
-              </tr>
-            </thead>
-
-            <tbody>
-              {orderDetails?.map((item, index) => {
-                const total =
-                  (item.CashAmount || 0) +
-                  (item.UpiAmount || 0) +
-                  (item.CardAmount || 0) +
-                  (item.CreditAmount || 0);
-
-                return (
-                  <tr
-                    key={index}
+        <DefaultModal
+          open={isNetAmtModalOpen}
+          title="Sales Net Amount"
+          handleCancel={() => setIsNetAmtModalOpen(false)}
+          handleSubmit={() => setIsNetAmtModalOpen(false)}
+          width={800}
+          footer={false}
+        >
+          <div style={{ overflowX: 'auto' }}>
+            <table
+              style={{
+                width: '100%',
+                borderCollapse: 'collapse',
+                textAlign: 'center',
+                fontFamily: "'Segoe UI', Roboto, sans-serif",
+                fontSize: '14px',
+                borderRadius: '8px',
+                overflow: 'hidden',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+              }}
+            >
+              <thead>
+                <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
+                  <th
+                    colSpan="2"
+                    style={{ border: '1px solid #ddd', padding: '10px' }}
+                  >
+                    Cash
+                  </th>
+                  <th
+                    colSpan="2"
+                    style={{ border: '1px solid #ddd', padding: '10px' }}
+                  >
+                    UPI
+                  </th>
+                  <th
+                    colSpan="2"
+                    style={{ border: '1px solid #ddd', padding: '10px' }}
+                  >
+                    Card
+                  </th>
+                  <th
+                    colSpan="2"
+                    style={{ border: '1px solid #ddd', padding: '10px' }}
+                  >
+                    Credit
+                  </th>
+                  <th
+                    colSpan="2"
+                    style={{ border: '1px solid #ddd', padding: '10px' }}
+                  >
+                    Business UPI
+                  </th>
+                  <th
+                    rowSpan="2"
                     style={{
-                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
-                      transition: 'background 0.3s',
+                      border: '1px solid #ddd',
+                      padding: '10px',
+                      backgroundColor: '#002244',
+                      color: '#fff',
                     }}
-                    onMouseEnter={(e) =>
-                      (e.currentTarget.style.backgroundColor = '#e6f2ff')
-                    }
-                    onMouseLeave={(e) =>
+                  >
+                    Total
+                  </th>
+                </tr>
+                <tr style={{ backgroundColor: '#004080', color: '#fff' }}>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Count
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Amt
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Count
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Amt
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Count
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Amt
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Count
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Amt
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Count
+                  </th>
+                  <th style={{ border: '1px solid #ddd', padding: '8px' }}>
+                    Amt
+                  </th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {orderDetails?.map((item, index) => {
+                  const total =
+                    (item.CashAmount || 0) +
+                    (item.UpiAmount || 0) +
+                    (item.CardAmount || 0) +
+                    (item.CreditAmount || 0);
+
+                  return (
+                    <tr
+                      key={index}
+                      style={{
+                        backgroundColor:
+                          index % 2 === 0 ? '#f7faff' : '#ffffff',
+                        transition: 'background 0.3s',
+                      }}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.backgroundColor = '#e6f2ff')
+                      }
+                      onMouseLeave={(e) =>
                       (e.currentTarget.style.backgroundColor =
                         index % 2 === 0 ? '#f7faff' : '#ffffff')
-                    }
-                  >
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
+                      }
                     >
-                      {item.CashCount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.CashAmount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.UpiCount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.UpiAmount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.CardCount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.CardAmount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.CreditCount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.CreditAmount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.BusinessUpiCount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        fontWeight: '700',
-                        padding: '8px',
-                      }}
-                    >
-                      {item.BusinessUpiAmount}
-                    </td>
-                    <td
-                      style={{
-                        border: '1px solid #ddd',
-                        padding: '8px',
-                        fontWeight: '700',
-                        backgroundColor: '#eaf6ea',
-                        color: '#2e7d32',
-                      }}
-                    >
-                      {total}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      </DefaultModal>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CashCount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CashAmount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.UpiCount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.UpiAmount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CardCount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CardAmount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CreditCount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.CreditAmount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.BusinessUpiCount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          fontWeight: '700',
+                          padding: '8px',
+                        }}
+                      >
+                        {item.BusinessUpiAmount}
+                      </td>
+                      <td
+                        style={{
+                          border: '1px solid #ddd',
+                          padding: '8px',
+                          fontWeight: '700',
+                          backgroundColor: '#eaf6ea',
+                          color: '#2e7d32',
+                        }}
+                      >
+                        {total}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </DefaultModal>
 
-      <ReceivedStocksModal
-        open={isReceivedModelOpen}
-        onClose={() => {
-          setIsReceivedModelOpen(false);
-        }}
-        columns={columns}
-        tableData={TableData}
-        handlePageChange={handlePageChange}
-        customTable={false}
-      />
+        <ReceivedStocksModal
+          open={isReceivedModelOpen}
+          onClose={() => {
+            setIsReceivedModelOpen(false);
+          }}
+          columns={columns}
+          tableData={TableData}
+          handlePageChange={handlePageChange}
+          customTable={false}
+        />
 
-      <ProductDetailsModal
-        open={ProductDetailsModel}
-        onClose={handleModalCancel}
-        productDetails={modalProductDetails}
-        headerData={{
-          dateTime: dateFormatChange1(TableData?.[SelectedIndex]?.CreatedDate),
-          fromBranch: TableData?.[SelectedIndex]?.FromBranchName,
-          Dispatch_Id: TableData?.[SelectedIndex]?.DispatchId,
-          Created_By: TableData?.[SelectedIndex]?.Created_By,
-        }}
-        onDataChange={(d) => setModalProductDetails(d)}
-        onSubmit={handleModalSubmit}
-      />
-    </div>
+        <ProductDetailsModal
+          open={ProductDetailsModel}
+          onClose={handleModalCancel}
+          productDetails={modalProductDetails}
+          headerData={{
+            dateTime: dateFormatChange1(
+              TableData?.[SelectedIndex]?.CreatedDate
+            ),
+            fromBranch: TableData?.[SelectedIndex]?.FromBranchName,
+            Dispatch_Id: TableData?.[SelectedIndex]?.DispatchId,
+            Created_By: TableData?.[SelectedIndex]?.Created_By,
+          }}
+          onDataChange={(d) => setModalProductDetails(d)}
+          onSubmit={handleModalSubmit}
+        />
+      </div>
+    </Suspense>
   );
 });
 
diff --git a/src/Styles/BookingScreen/Components/BSItemCards/BSItemCard.scss b/src/Styles/BookingScreen/Components/BSItemCards/BSItemCard.scss
index eb9584d..0bbeb80 100644
--- a/src/Styles/BookingScreen/Components/BSItemCards/BSItemCard.scss
+++ b/src/Styles/BookingScreen/Components/BSItemCards/BSItemCard.scss
@@ -37,6 +37,7 @@
   text-align: center;
 }
 
+
 .BSItemCard-master-container {
   display: flex;
   flex-direction: row;
@@ -162,6 +163,7 @@
   column-gap: 0.3rem;
   row-gap: 0.5rem;
   cursor: pointer;
+  // vicky
   justify-content: space-around;
 }
 
@@ -239,6 +241,7 @@
     column-gap: 0.5rem !important;
   }
 
+
   .ant-modal .ant-modal-content {
     padding: 1rem !important;
   }
@@ -266,9 +269,12 @@
 
   .BSItemCard-itemPrice {
     font-size: 9px !important;
+    //nk
     width: 60px !important;
+    //
   }
 
+  //nk
   .qtyUomName-itemCard {
     width: 78px !important;
   }
@@ -309,7 +315,9 @@
   .BSItemCard-master-container {
     padding: 0px 0px;
     justify-content: center !important;
+    // padding-bottom: 10rem !important;
     padding-bottom: 1rem !important;
+    // column-gap: 0.1rem !important;
   }
 
   .BSItemCard-container {
@@ -325,6 +333,7 @@
     width: 8rem !important;
     height: 6rem !important;
   }
+
   .BSItemCard-itemName {
     width: 60px !important;
     font-size: 10px;
@@ -335,10 +344,12 @@
   .bs-item-card-masterdiv {
     height: inherit;
   }
+
 }
 
 @media (min-width: 500px) and (max-width: 767px) {
   .bs-item-card-masterdiv {
+    // height: 77vh !important;
     height: inherit;
   }
 
@@ -352,6 +363,7 @@
 
 @media (min-width: 280px) and (max-width: 499px) {
   .bs-item-card-masterdiv {
+    // height: 60vh !important;
     height: inherit;
   }
 
@@ -362,6 +374,7 @@
   }
 }
 
+
 .QRStockchange-table thead {
   position: sticky;
   top: 0;
@@ -373,7 +386,7 @@
   border-spacing: 0px;
 }
 
-.QRStockchange-table .ant-table-wrapper .ant-table-thead > tr > th {
+.QRStockchange-table .ant-table-wrapper .ant-table-thead>tr>th {
   color: black !important;
   font-weight: 600 !important;
   font-size: 14px;
@@ -393,7 +406,10 @@
 }
 
 .BkPrdCardDeActive {
+  // pointer-events: none;
   border: 1px solid #f10000;
+
+  // border-radius: 8px;
   .BSItemCard-container-smallimage {
     width: 10.9rem;
   }
@@ -496,6 +512,7 @@
   flex-direction: column;
   justify-content: center;
   column-gap: 0.1rem;
+
   border-radius: 2px;
 }
 
@@ -505,19 +522,6 @@
   font-family: "Gilroy";
   text-align: center;
 }
-.qtyprice {
-  font-size: 16px;
-  background-color: var(--DEFAULT_SELECTED_COLOR);
-  color: #fff;
-  // padding: 0rem 2rem;
-  width: 105px;
-  display: flex;
-  font-family: var(--PARA_FONT_FAMILY);
-  justify-content: center;
-  text-align: center;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
 
 //nk
 .qtyUomName-itemCard {
@@ -531,6 +535,20 @@
   width: 105px;
 }
 
+.qtyprice {
+  font-size: 16px;
+  background-color: var(--DEFAULT_SELECTED_COLOR);
+  color: #fff;
+  // padding: 0rem 2rem;
+  width: 105px;
+  display: flex;
+  font-family: var(--PARA_FONT_FAMILY);
+  justify-content: center;
+  text-align: center;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
 .Card-modal-table .ant-pagination {
   position: sticky;
   bottom: 0;
@@ -539,13 +557,13 @@
   background-color: #fafafa;
 }
 
-.Card-modal-table .ant-table-wrapper .ant-table-thead > tr > th {
+.Card-modal-table .ant-table-wrapper .ant-table-thead>tr>th {
   color: black !important;
   font-weight: 600 !important;
   font-size: 14px;
 }
 
-.Card-modal-table .ant-table-row > td {
+.Card-modal-table .ant-table-row>td {
   color: black !important;
   font-weight: 500 !important;
   font-size: 16px;
@@ -800,6 +818,8 @@
 
 .Payment-loader1 {
   .Payment-loader {
+
+    // column-gap: 1rem;
     .contener_mixte {
       top: 5px;
       right: 12rem;
@@ -810,26 +830,28 @@
 .EditQuantity-Master {
   .Re-Print-table {
     width: 100% !important;
-    scrollbar-width: none;
-  }
-  .ant-table-thead tr {
-    background-color: #1292ee !important;
   }
 }
 
 .webkit-ul {
   height: 35vh;
   overflow-y: auto;
+
+  /* Firefox */
   scrollbar-width: thin;
+  /* Options: auto | thin | none */
   scrollbar-color: #c1c1c1 transparent;
 }
 
+/* WebKit Browsers: Chrome, Edge, Safari */
 .webkit-ul::-webkit-scrollbar {
   width: 25px;
+  /* Adjust width as needed */
 }
 
 .webkit-ul::-webkit-scrollbar-track {
   background: #f0f0f0;
+  /* Optional: add contrast to track */
   border-radius: 10px;
 }
 
@@ -837,6 +859,7 @@
   background-color: #c1c1c1;
   border-radius: 10px;
   border: 6px solid transparent;
+  /* Adjust for padding inside thumb */
   background-clip: content-box;
   transition: background-color 0.3s ease;
 }
@@ -999,6 +1022,7 @@
   gap: 1.7rem !important;
   overflow: scroll;
   height: 100%;
+  scrollbar-width: none;
 
   @media (max-width: 500px) {
     gap: 0.5rem !important;
@@ -1088,12 +1112,21 @@
 }
 
 .booked-text {
+  // color: #070;
   color: rgb(241, 16, 16);
+
   font-weight: 600;
   cursor: not-allowed !important;
   margin-top: 4px;
 }
 
+// .Available-text{
+//   color: rgb(41, 201, 41);
+//   font-weight: 600;
+//   cursor: not-allowed !important;
+//   margin-top: 4px;
+// }
+
 .slot-btn.incart {
   background: #ffe066;
   color: #222;
@@ -1322,7 +1355,7 @@
   font-family: "Poppins";
   font-size: 0.8rem;
 
-  > div:nth-child(1) {
+  >div:nth-child(1) {
     font-size: 0.8rem;
     font-weight: 600;
   }
@@ -1631,6 +1664,7 @@
     color: #ffffff;
     border-color: #f44336;
     cursor: not-allowed;
+
     &:hover {
       color: #c90b0b;
       background-color: #ffff;
@@ -1647,6 +1681,7 @@
     background-color: #ffe8bf;
     color: #5f4204;
     border-color: #ff9800;
+
     &:hover {
       background-color: #5f4204;
       color: #ffe8bf;
@@ -1658,6 +1693,10 @@
     color: #ffffff;
     border-color: #31a0f0;
     cursor: not-allowed;
+    // &:hover{
+    //   color:#148498;
+    //   background-color: #fff;
+    // }
   }
 
   &.selected {
@@ -2221,9 +2260,11 @@
   cursor: pointer;
   height: 270px;
   width: 195px;
+  // background-color: #fff;
   border-radius: 0.75rem;
   display: flex;
   flex-direction: column;
+  // justify-content: space-between;
   margin-top: 10px;
   position: relative;
   border: 2px solid rgba(0, 0, 0, 0.3);
@@ -2231,6 +2272,7 @@
 
 .voiceToTextIcon {
   position: fixed;
+  // width: max-content;
   top: 7px;
   left: 10px;
   display: flex;
@@ -2275,4 +2317,4 @@
     top: 2px;
     left: 8px;
   }
-}
+}
\ No newline at end of file