@pubuduth-aplicy/chat-ui 2.1.76 → 2.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.76",
+  "version": "2.1.78",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/Chat.config.ts

@@ -3,6 +3,7 @@ export interface ChatConfig {
     apiUrl: string;
     role?: string;
     cdnUrl?: string;
+    webSocketUrl: string;
   }
   
   let chatConfig: ChatConfig;

package/src/components/Chat.tsx

@@ -5,7 +5,7 @@ import { Sidebar } from "./sidebar/Sidebar";
 import { useChatContext } from "../providers/ChatProvider";
 
 export const Chat = () => {
-  const { setMessages, updateMessageStatus } = useChatUIStore();
+  const { setMessages, selectedConversation, updateMessageStatus } = useChatUIStore();
 
   const { socket, sendMessage } = useChatContext();
 
@@ -15,16 +15,9 @@ export const Chat = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data);
-        console.log("Parsed WebSocket message:", parsed);
 
         if (parsed.event === "newMessage") {
           const message = parsed.data;
-          console.log(
-            "📨 Message received at:",
-            message.createdAt,
-            "from:",
-            message
-          );
           // Send delivery confirmation
           // Update UI immediately
           setMessages((prev) => [...prev, message]);
@@ -51,10 +44,14 @@ export const Chat = () => {
   return (
     <div className="container mx-auto mb-5">
       <div className="grid-container">
-        <div className={`sidebarContainer dark:bg-gray-800`}>
+        <div className={`sidebarContainer dark:bg-gray-800 ${
+            selectedConversation ? "mobile-hidden" : "mobile-visible"
+          }`}>
           <Sidebar />
         </div>
-        <div className="messageContainer">
+        <div className={`messageContainer ${
+            selectedConversation ? "mobile-visible" : "mobile-hidden"
+          }`}>
           <MessageContainer />
         </div>
       </div>

package/src/components/messages/Message.tsx

@@ -114,7 +114,6 @@ const Message = ({ message }: MessageProps) => {
   // const handleDownload = (url: string, name: string) => {
   //   saveAs(url, name);
   // };
-  console.log("check message status", message.status);
 
   const [downloadingIndex, setDownloadingIndex] = useState<number | null>(null);
   const [downloadProgress, setDownloadProgress] = useState<number>(0);

package/src/components/messages/MessageContainer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { MessageSquare } from "lucide-react";
+import { ChevronLeft, MessageSquare } from "lucide-react";
+import { FiArrowLeft } from "react-icons/fi";
 import { useEffect } from "react";
 import MessageInput from "./MessageInput";
 import Messages from "./Messages";
@@ -13,52 +14,6 @@ const MessageContainer = () => {
     useChatUIStore();
   const { socket, isUserOnline } = useChatContext();
   const { role } = getChatConfig();
-  //   useEffect(() => {
-  //   if (!socket) return;
-
-  //   const handleMessage = (event) => {
-  //     try {
-  //       const parsed = JSON.parse(event.data);
-
-  //      if (parsed.event === 'newMessage') {
-  //   const message = parsed.data;
-  //   console.log('Received message:', message);
-
-  //   if (selectedConversation?._id !== message.chatId) return;
-
-  //   const messageId = message._id || message.messageId;
-  //   console.log('Message ID for unread:', messageId);
-
-  //   if (!messageId) {
-  //     console.warn('Message has no _id or messageId, skipping unread tracking');
-  //     return;
-  //   }
-
-  //   const updatedUnread = [
-  //     ...(selectedConversation?.unreadMessageIds || []),
-  //     messageId,
-  //   ];
-
-  //   console.log('Updated unreadMessageIds:', updatedUnread);
-
-  //   setSelectedConversation({
-  //     ...selectedConversation,
-  //     unreadMessageIds: updatedUnread,
-  //   });
-  // }
-
-  //       // Handle other events...
-
-  //     } catch (error) {
-  //       console.error("WebSocket message parse error:", error);
-  //     }
-  //   };
-
-  //   socket.addEventListener("message", handleMessage);
-  //   return () => socket.removeEventListener("message", handleMessage);
-  // }, [socket, setMessages, selectedConversation, setSelectedConversation]);
-
-  // Join chat room when conversation is selected
 
   useEffect(() => {
     if (selectedConversation?._id && socket?.readyState === WebSocket.OPEN) {
@@ -68,7 +23,7 @@ const MessageContainer = () => {
           event: "joinChat",
           data: {
             chatId: selectedConversation._id,
-            userId: userId
+            userId: userId,
           },
         })
       );
@@ -81,7 +36,6 @@ const MessageContainer = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        console.log("Parsed WebSocket message in mc:", data);
 
         if (data.event === "getOnlineUsers") {
           setOnlineUsers(data.payload); // payload should be an array of user IDs
@@ -100,20 +54,18 @@ const MessageContainer = () => {
 
   // Listen for online users updates
 
-  
-
-  const participantDetails = Array.isArray(selectedConversation?.participantDetails)
+  const participantDetails = Array.isArray(
+    selectedConversation?.participantDetails
+  )
     ? selectedConversation?.participantDetails
     : [selectedConversation?.participantDetails].filter(Boolean);
 
-  const participant = participantDetails.find(
-    (p: any) => p._id !== userId
-  );
+  const participant = participantDetails.find((p: any) => p._id !== userId);
 
   // const participant = selectedConversation?.participantDetails?.find(
   //   (p: any) => p._id !== userId
   // );
-  
+
   const isOnline = isUserOnline(participant?._id || "");
 
   // Cleanup on unmount
@@ -129,8 +81,11 @@ const MessageContainer = () => {
         <>
           <div className="chatMessageContainerInner">
             <div className="chatMessageContainerInnerDiv">
-              <button className="chatMessageContainerInnerDiv_button">
-                {/* <CaretLeft size={25} /> */}
+              <button
+                className="backButton"
+                onClick={() => setSelectedConversation(null)}
+              >
+                <ChevronLeft size={20} />
               </button>
               {selectedConversation.type === "service" ? (
                 <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">

package/src/components/messages/MessageInput.tsx

@@ -76,7 +76,6 @@ const MessageInput = () => {
       });
     }
   }, [selectedConversation?._id, socket, sendMessage]);
-  console.log('selected', selectedConversation);
   
   useEffect(() => {
     // Clear all input state when conversation changes
@@ -136,12 +135,10 @@ const MessageInput = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        console.log("Received WebSocket message:", data);
         if (
           data.event === "typing" &&
           data.data.chatId === selectedConversation._id
         ) {
-          console.log("Setting typing user:", data.data.userId);
           setTypingUser(data.data.userId);
         } else if (
           data.event === "stopTyping" &&

package/src/components/messages/Messages.tsx

@@ -44,14 +44,13 @@ const Messages = () => {
     const handleMessage = (event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data);
-        console.log("Parsed WebSocket message1:", parsed);
         if (parsed.type === "newMessage" || parsed.event === "newMessage") {
           const newMessage = parsed.data;
           if (!newMessage) {
-            console.warn(
-              "Received newMessage event without a message payload",
-              parsed
-            );
+            // console.warn(
+            //   "Received newMessage event without a message payload",
+            //   parsed
+            // );
             return;
           }
 
@@ -74,7 +73,7 @@ const Messages = () => {
         if (parsed.event === "messageStatusUpdated") {
           const { messageId, status } = parsed.data || {};
           if (!messageId) {
-            console.error("Missing messageId in status update", parsed);
+            // console.error("Missing messageId in status update", parsed);
             return;
           }
 
@@ -88,7 +87,7 @@ const Messages = () => {
                 return msg;
 
               if (newIdx > currentIdx) {
-                console.log(`Updating status for ${messageId} to ${status}`);
+                // console.log(`Updating status for ${messageId} to ${status}`);
                 return { ...msg, status };
               }
 
@@ -98,7 +97,7 @@ const Messages = () => {
         }
 
         if (parsed.event === "messageEdited") {
-          console.log("Received messageEdited event:", parsed);
+          // console.log("Received messageEdited event:", parsed);
 
           const updatedMessage = parsed.data;
           if (!updatedMessage || !updatedMessage.messageId) return;
@@ -113,7 +112,7 @@ const Messages = () => {
         }
 
         if (parsed.event === "messageDeleted") {
-          console.log("Received messageDeleted event:", parsed);
+          // console.log("Received messageDeleted event:", parsed);
 
           const { messageId } = parsed.data || {};
           if (!messageId) return;

package/src/components/sidebar/Conversation.tsx

@@ -21,14 +21,14 @@ const Conversation = ({ conversation }: ConversationProps) => {
   );
 
   const handleSelectConversation = () => {
-    console.log(
-      "Selected Conversation Data:",
-      JSON.stringify(conversation, null, 2)
-    );
+    // console.log(
+    //   "Selected Conversation Data:",
+    //   JSON.stringify(conversation, null, 2)
+    // );
     setSelectedConversation(conversation);
     const unreadMessageIds = conversation.unreadMessageIds || [];
     if (unreadMessageIds.length > 0 && socket?.readyState === WebSocket.OPEN) {
-      console.log("unread messages", unreadMessageIds);
+      // console.log("unread messages", unreadMessageIds);
 
       const message = {
         event: "messageRead",
@@ -64,9 +64,9 @@ const Conversation = ({ conversation }: ConversationProps) => {
     };
   }, [socket, setOnlineUsers]);
 
-  useEffect(() => {
-    console.log("Current conversation state:", conversation);
-  }, [conversation]);
+  // useEffect(() => {
+  //   // console.log("Current conversation state:", conversation);
+  // }, [conversation]);
 
   const isOnline = isUserOnline(participant?._id || "");
   const isSelected = selectedConversation?._id === conversation._id;
@@ -116,7 +116,7 @@ const Conversation = ({ conversation }: ConversationProps) => {
           </p>
           <div className="flex items-center gap-2">
             {unreadCount > 0 && (
-              <span className="bg-blue-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
+             <span className="background text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                 {unreadCount}
               </span>
             )}

package/src/components/sidebar/Conversations.tsx

@@ -35,7 +35,7 @@ const Conversations = () => {
       const allServiceChatsMap = new Map<string, GroupedServiceChats[string]>();
 
       groups.forEach((group) => {
-        console.log("group", group.personalConversation);
+        // console.log("group", group.personalConversation);
 
         if (group.personalConversation) {
           allGeneralChats.push(group.personalConversation);
@@ -246,8 +246,8 @@ const Conversations = () => {
       .filter(([_, group]) => group.conversations.length > 0) // Remove empty groups
   );
 
-  console.log("filteredGeneralChats",filteredGeneralChats);
-  console.log("filteredGroupedServiceChats");
+  // console.log("filteredGeneralChats",filteredGeneralChats);
+  // console.log("filteredGroupedServiceChats");
 
   return (
     <div className="chatSidebarConversations">

package/src/declarations.d.ts

@@ -21,6 +21,8 @@ declare module '@pubuduth-aplicy/chat-ui' {
   interface ChatConfig {
     apiUrl: string;
     role?: string;
+    webSocketUrl: string;
+    cdnUrl?: string;
   }
   
   interface ChatProviderProps {

package/src/hooks/mutations/useDeleteMessage.ts

@@ -8,7 +8,7 @@ export const useDeleteMessageMutation = () => {
   return useMutation({
     mutationFn: deleteMessage,
     onSuccess: () => {
-      console.log("Message deleted successfully!", "success");
+      // console.log("Message deleted successfully!", "success");
       // Invalidate both messages and conversations queries
       queryClient.invalidateQueries({ queryKey: ['messages'] });
       queryClient.invalidateQueries({ queryKey: ['conversations'] });
@@ -16,11 +16,11 @@ export const useDeleteMessageMutation = () => {
     onError: (error: any) => {
       console.error("Failed to delete message:", error);
 
-      const errorMessage =
-        error?.response?.data?.errors[0]?.msg ||
-        "An error occurred while deleting the message.";
+      // const errorMessage =
+      //   error?.response?.data?.errors[0]?.msg ||
+      //   "An error occurred while deleting the message.";
 
-      console.log("useDeleteMessageMutation error:", errorMessage);
+      // console.log("useDeleteMessageMutation error:", errorMessage);
     },
   });
 };

package/src/hooks/mutations/useEditMessage.ts

@@ -8,15 +8,15 @@ export const useEditMessageMutation = () => {
     return useMutation({
         mutationFn: setEditMessage,
         onSuccess: () => {
-        console.log("Message edited successfully!", "success");
+        // console.log("Message edited successfully!", "success");
         queryClient.invalidateQueries({ queryKey: ['messages'] });
         },
         onError: (error: any) => {
         console.error("Failed to edit message:", error);
-        const errorMessage =
-            error?.response?.data?.errors[0]?.msg ||
-            "An error occurred while editing the message.";
-        console.log("useMessageMutation edit error:", errorMessage);
+        // const errorMessage =
+        //     error?.response?.data?.errors[0]?.msg ||
+        //     "An error occurred while editing the message.";
+        // console.log("useMessageMutation edit error:", errorMessage);
         },
     });
 

package/src/hooks/mutations/useSendMessage.ts

@@ -7,17 +7,17 @@ export const useMessageMutation = () => {
     return useMutation({
       mutationFn: sendMessage,
       onSuccess: () => {
-        console.log("Service submitted successfully!", "success");
+        // console.log("Service submitted successfully!", "success");
         queryClient.invalidateQueries({ queryKey: ['messages'] });
       },
       onError: (error: any) => {
         console.error("Failed to submit service data:", error);
   
-        const errorMessage =
-          error?.response?.data?.errors[0]?.msg ||
-          "An error occurred while submitting service data.";
+        // const errorMessage =
+        //   error?.response?.data?.errors[0]?.msg ||
+        //   "An error occurred while submitting service data.";
 
-        console.log("useSumbitServiceMutation :", errorMessage);
+        // console.log("useSumbitServiceMutation :", errorMessage);
       },
     });
   };

package/src/providers/ChatProvider.tsx

@@ -41,19 +41,19 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
   const reconnectAttempts = useRef(0);
   const maxReconnectAttempts = 5;
   const reconnectInterval = 5000; // 5 seconds
-  const { apiUrl } = getChatConfig();
+  const { webSocketUrl } = getChatConfig();
 
   const connectWebSocket = useCallback(() => {
-    console.log("🔌 Creating new WebSocket connection...");
+    // console.log("🔌 Creating new WebSocket connection...");
 
     // Convert HTTP URL to WebSocket URL
-    const wsUrl = apiUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
+    const wsUrl = webSocketUrl.replace(/^http:/, "ws:").replace(/^https:/, "wss:");
     const socketInstance = new WebSocket(
       `${wsUrl}?userId=${encodeURIComponent(userId)}`
     );
 
     socketInstance.onopen = () => {
-      console.log("✅ WebSocket connected");
+      // console.log("✅ WebSocket connected");
       setIsConnected(true);
       reconnectAttempts.current = 0;
 
@@ -71,12 +71,12 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
         const data = JSON.parse(event.data);
 
         if (data.event === "getOnlineUsers") {
-          console.log("Online users update:", data.data);
+          // console.log("Online users update:", data.data);
           setOnlineUsers(new Set(data.data));
         }
 
         // Handle other message types here
-        console.log("Received message:", data);
+        // console.log("Received message:", data);
       } catch (error) {
         console.error("Error parsing message:", error);
       }
@@ -86,24 +86,24 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
       console.error("❌ WebSocket error:", error);
     };
 
-    socketInstance.onclose = (event) => {
-      console.log("🔌 WebSocket connection closed", event);
-      console.log("❌ WebSocket disconnected:", event.code, event.reason);
+    socketInstance.onclose = () => {
+      // console.log("🔌 WebSocket connection closed", event);
+      // console.log("❌ WebSocket disconnected:", event.code, event.reason);
       setIsConnected(false);
 
       // Attempt reconnection
       if (reconnectAttempts.current < maxReconnectAttempts) {
         reconnectAttempts.current += 1;
-        console.log(
-          `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
-        );
+        // console.log(
+        //   `Attempting to reconnect (${reconnectAttempts.current}/${maxReconnectAttempts})...`
+        // );
         setTimeout(connectWebSocket, reconnectInterval);
       }
     };
 
     socketRef.current = socketInstance;
     setSocket(socketInstance);
-  }, [apiUrl, userId]);
+  }, [webSocketUrl, userId]);
 
   const sendMessage = useCallback((data: any) => {
     if (socketRef.current?.readyState === WebSocket.OPEN) {
@@ -117,7 +117,7 @@ export const ChatProvider: React.FC<ChatProviderProps> = ({
     connectWebSocket();
 
     return () => {
-      console.log("❌ Closing WebSocket connection...");
+      // console.log("❌ Closing WebSocket connection...");
       if (socketRef.current) {
         socketRef.current.close(1000, "Component unmounted");
         socketRef.current = null;

package/src/service/messageService.ts

@@ -47,7 +47,7 @@ export const fetchMessages = async (chatId: string | undefined, userid: string,
     const response = await apiClient.get(`${Path.getmessage}/${chatId}/${userid}`, {
       params: { pagenum, limit: 20 },
     });
-    console.log(response); 
+    // console.log(response); 
     return response.data; 
   } catch (error) {
     console.error("Error fetching messages:", error);

package/src/service/sidebarApi.ts

@@ -16,11 +16,11 @@ export const getAllConversationData = async (userid: string) => {
 
     const res = await apiClient.get<ApiResponse>(endpoint);
     if (res.data) {
-      console.log("API Response: ", res.data);
+      // console.log("API Response: ", res.data);
       
     }
     const  conversationsWithParticipantDetails  = res.data.serviceInfo;
-    console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
+    // console.log("conversationsWithParticipantDetails", res.data.serviceInfo);
     
     // If needed, you can map the conversations in the specific structure
 //     const formattedConversations = conversationsWithParticipantDetails?.map((conversation) => ({

package/src/style/style.css

@@ -9,12 +9,14 @@
   /* background-color: #9CA3AF; */
   --bg-opacity: 0;
   backdrop-blur: blur(16px);
+  
+
 }
 
 .sidebarContainer {
   /* grid-column: span 3; */
   /* overflow-y: auto; */
-  border: 1px solid #ddd;
+  /* border: 1px solid #ddd; */
   max-height: 100vh;
 }
 
@@ -23,6 +25,29 @@
   /* border: 1px solid; */
   max-height: 100vh;
   overflow-y: auto;
+  
+}
+
+.sidebarContainer,
+.messageContainer {
+  height: 100%;
+}
+
+.hide-on-mobile {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+/* Back button visible only on mobile */
+.back-button {
+  display: none;
+}
+
+.background {
+  background-color: #317490;
 }
 
 .chatSidebarMain {
@@ -58,7 +83,7 @@
   justify-content: flex-start;
   align-items: center;
   height: 2.5rem;
-  background-color: rgb(248, 249, 249);
+  background-color: #FEFEFF;
   /* Move bg color here */
 }
 
@@ -167,6 +192,7 @@
   flex-direction: column;
   justify-content: center;
   height: 100%;
+  background-color: #FEFEFF;
 }
 
 .chatMessageContainerInner {
@@ -379,7 +405,7 @@
 }
 
 .chatMessageInputSubmit {
-  background-color: #12bbb5;
+  background-color: #317490;
   border: none;
   width: 40px;
   height: 40px;
@@ -412,6 +438,8 @@
   width: 100%;
   font-family: Arial, sans-serif;
   margin-bottom: 8px;
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
 .message-row {
@@ -468,14 +496,14 @@
 }
 
 .outgoing .chat-bubble {
-  background-color: #aef7e883;
-  color: #595c61;
+  background-color: #317490;
+  color: #DDE8ED;
 
 }
 
 .incoming .chat-bubble {
-  background-color: #EBEDF0;
-  color: #595c61;
+  background-color: #F4F3F6;
+  color: #476179;
 }
 
 .timestamp_incomeing {
@@ -551,15 +579,15 @@
   .sidebarContainer {
     /* display: grid; */
     grid-column: span 3;
-    background-color: rgb(248, 249, 249);
-    border-radius: 1%;
+    background-color: #FEFEFF;
+    border-radius: 2%;
   }
 
   .messageContainer {
     display: grid;
     grid-column: span 6;
-    border: 1px solid #ddd;
-    border-radius: 1%;
+    /* border: 1px solid #ddd; */
+    border-radius: 3%;
   }
 
   .chatMessageContainerInnerDiv_button {
@@ -1905,4 +1933,159 @@
 
 .message-option-btn.disabled:hover::before {
   background: #666;
+}
+
+.backButton {
+  display: none; 
+  align-items: center;
+  gap: 4px;
+}
+
+
+@media (max-width: 768px) {
+  .grid-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .sidebarContainer {
+    max-height: auto;
+    order: 1;
+  }
+
+  .messageContainer {
+    max-height: auto;
+    order: 2;
+  }
+
+  .chatSidebarSearchbar {
+    padding: 1rem;
+    flex-wrap: wrap;
+    height: auto;
+  }
+
+  .chatMessagesBubble_inner {
+    max-width: 70%; /* allow wider bubbles on small screens */
+  }
+}
+
+/* Mobile Layout (≤ 480px) */
+@media (max-width: 480px) {
+  .grid-container {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .chatSidebarMain {
+    flex-direction: column;
+    padding: 0.5rem;
+  }
+
+  .chatSidebarSearchbarContainer {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .chatMessageContainerInner {
+    padding: 1rem;
+    font-size: 0.8rem;
+  }
+
+  .chatMessagesBubble_inner {
+    max-width: 85%;
+    font-size: 13px;
+  }
+
+  .chatMessageInput {
+    font-size: 0.9rem;
+    padding: 6px 4px;
+  }
+
+  .chatMessageInputSubmit {
+    width: 35px;
+    height: 35px;
+  }
+
+  .chat-bubble {
+    font-size: 13px;
+    max-width: 90%;
+  }
+
+  .timestamp_incomeing,
+  .timestamp_outgoing {
+    font-size: 10px;
+  }
+
+   .attachments-preview {
+    width: 100%;
+   }
+    
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .grid-container {
+    display: block;
+  }
+
+  .chatMessageContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  background-color: #FEFEFF;
+  width: 100%;
+}
+
+  .sidebarContainer,
+  .messageContainer {
+    width: 100%;
+  }
+
+  .back-button {
+    display: block;
+  }
+  .messageContainer.active {
+    display: block;
+  }
+
+  .sidebarContainer.hidden {
+    display: none;
+  }
+
+  .backButton {
+    display: inline-block;
+    margin-right: 10px;
+    background: none;
+    border: none;
+    font-size: 14px;
+    cursor: pointer;
+  }
+
+  .mobile-hidden {
+    display: none !important;
+  }
+  .mobile-visible {
+    display: block !important;
+  }
+
+  .chatMessageInputform{
+    padding-left: 0rem;
+  }
+
+  .message-input-container{
+    padding: 0px;
+  }
+
+  .media-item{
+    width: 100%;
+  }
+
+  .chatMessageInputSubmit {
+        /* width: 25px; */
+        height: 35px;
+    }
+  
+
 }