sixseconds-modules 1.6.161 → 1.6.163

package/dist/index.es.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");\r\n\r\nblockquote,\r\ndl,\r\ndd,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\nhr,\r\nfigure,\r\np,\r\npre {\r\n  font-family: "Inter", serif !important;\r\n}\r\n\r\n/* .MuiDialog-root {\r\n  z-index: 999999999 !important;\r\n}\r\n\r\n.MuiModal-root {\r\n  z-index: 999999999 !important;\r\n} */\r\n\r\n.main_list_Menu {\r\n  display: flex;\r\n}\r\n\r\n.main_list_Menu li {\r\n  padding: 0.5rem 0.5rem;\r\n}\r\n\r\n.main_list_Menu li a {\r\n  padding: 0 0.25rem;\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n}\r\n\r\n.main_list_Menu .menu-item {\r\n  position: relative;\r\n  padding: 15px;\r\n}\r\n\r\n.main_list_Menu .menu-link {\r\n  text-decoration: none;\r\n  color: #2c2e35;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.main_list_Menu .menu-link:hover {\r\n  color: #2ea3f2;\r\n}\r\n\r\n/* Submenu (Dropdown) */\r\n\r\n.main_list_Menu .submenuData {\r\n  position: absolute;\r\n  top: 85%;\r\n  left: 0;\r\n  background: white;\r\n  border-top: 3px solid #2ea3f2;\r\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n  display: none;\r\n  min-width: 200px;\r\n  z-index: 10;\r\n}\r\n\r\n.main_list_Menu .submenuData li {\r\n  list-style: none;\r\n}\r\n\r\n.main_list_Menu .submenu-link {\r\n  display: block;\r\n  padding: 1px 15px;\r\n  text-decoration: none;\r\n  color: rgba(0, 0, 0, 0.7);\r\n  font-weight: 600;\r\n}\r\n\r\n.main_list_Menu .submenu-link:hover {\r\n  background: #f1f1f1;\r\n}\r\n\r\n/* Show dropdown on hover */\r\n\r\n.main_list_Menu .menu-item:hover .submenuData {\r\n  display: block;\r\n}\r\n\r\n.smallDeviceMenu {\r\n  display: none;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 72px;\r\n  background-color: #fff;\r\n  position: fixed;\r\n  overflow-y: auto;\r\n  height: 95vh;\r\n}\r\n\r\n.smallDeviceMenu a.bg_main_menu {\r\n  display: block;\r\n  text-decoration: none;\r\n}\r\n\r\n.submenu_child li {\r\n  padding: 0.5rem 0;\r\n}\r\n\r\n.submenu_child li a {\r\n  text-decoration: none;\r\n}\r\n\r\n.layout_mobile_menu {\r\n  padding-bottom: 12px;\r\n  padding-inline: 0;\r\n  height: 95vh;\r\n  overflow-y: auto;\r\n  padding-top: 8px;\r\n}\r\n\r\n.smallDeviceMenu a {\r\n  background-color: rgba(0, 0, 0, 0.03);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  color: #2c2e35;\r\n  margin-bottom: 4px;\r\n  padding: 12px 8px;\r\n}\r\n\r\n.smallDeviceMenu .submenu_child {\r\n  padding-left: 0px;\r\n  min-width: 90%;\r\n  max-width: 90%;\r\n  top: 57px;\r\n  margin-top: 8px;\r\n  background-color: #fff;\r\n  color: #000;\r\n  margin-inline: auto;\r\n}\r\n\r\n.smallDeviceMenu ul li .submenu_child_link {\r\n  padding: 12px 20px;\r\n}\r\n\r\n.smallDeviceMenu ul li a {\r\n  background-color: transparent;\r\n  color: #000000b3;\r\n}\r\n\r\n.smallDeviceMenu ul {\r\n  padding-left: 15px;\r\n}\r\n\r\n.desktopMenu {\r\n  display: flex;\r\n}\r\n\r\n.button_hamburger {\r\n  display: none;\r\n  position: absolute;\r\n  right: 20px;\r\n  top: 25px;\r\n  z-index: 9;\r\n}\r\n\r\n.tox-editor-header {\r\n  background-color: transparent;\r\n}\r\n\r\n.hamburger-icon-btn {\r\n  padding: 8px;\r\n  color: rgba(0, 0, 0, 0.54);\r\n}\r\n\r\n.desktopMenu .menu-item .menu-link {\r\n  font-size: 15px;\r\n}\r\n\r\n.smallDeviceMenu {\r\n  padding-inline: 20px;\r\n}\r\n\r\n@media screen and (max-width: 600px) and (min-width: 320px) {\r\n  .notification_icon_error .MuiBadge-badge {\r\n    font-size: 11px;\r\n    padding: 0 3px;\r\n    min-width: 16px;\r\n    right: 5px;\r\n  }\r\n\r\n  .submenu nav {\r\n    padding: 0 !important;\r\n  }\r\n\r\n  .MuiPagination-root.MuiPagination-outlined {\r\n    /* margin-top: 10px; */\r\n    display: flex;\r\n    justify-content: center;\r\n    margin-left: 0;\r\n  }\r\n\r\n  .toogle_btn_menu {\r\n    position: absolute;\r\n    right: 20px;\r\n    top: 18px;\r\n    z-index: 99;\r\n  }\r\n\r\n  .right_header_icons {\r\n    padding-right: 25px;\r\n  }\r\n\r\n  .button_hamburger {\r\n    display: block;\r\n  }\r\n\r\n  .desktopMenu {\r\n    display: none;\r\n  }\r\n\r\n  .smallDeviceMenu {\r\n    display: block;\r\n    width: 100%;\r\n    position: fixed;\r\n    left: 0;\r\n    background: #fff;\r\n    top: 69px;\r\n  }\r\n\r\n  .main.login_page .loginBody {\r\n    width: 400px !important;\r\n  }\r\n\r\n  .submenu {\r\n    width: 100%;\r\n    max-width: 100% !important;\r\n  }\r\n\r\n  .sideBar {\r\n    width: 300px !important;\r\n    background-color: #fff;\r\n    z-index: 99;\r\n  }\r\n\r\n  .sideMenu {\r\n    width: 300px;\r\n    background-color: #fff;\r\n  }\r\n\r\n  .logo_header {\r\n    opacity: 1;\r\n  }\r\n\r\n  .profile .headerMenu {\r\n    min-width: 320px;\r\n    width: 500px !important;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 1024px) and (min-width: 600px) {\r\n  .toogle_btn_menu {\r\n    position: absolute;\r\n    right: 20px;\r\n    top: 18px;\r\n  }\r\n\r\n  .right_header_icons {\r\n    padding-right: 25px;\r\n  }\r\n\r\n  .button_hamburger {\r\n    display: block;\r\n  }\r\n\r\n  .desktopMenu {\r\n    display: none;\r\n  }\r\n\r\n  .smallDeviceMenu {\r\n    display: block;\r\n  }\r\n\r\n  .main.login_page .loginBody {\r\n    width: 500px !important;\r\n  }\r\n\r\n  .banner {\r\n    margin-left: 0 !important;\r\n  }\r\n\r\n  .submenu {\r\n    width: 100%;\r\n    max-width: 100% !important;\r\n  }\r\n\r\n  .sideBar {\r\n    width: 300px !important;\r\n    background-color: #fff;\r\n    z-index: 99;\r\n  }\r\n\r\n  .sideMenu {\r\n    width: 300px;\r\n    background-color: #fff;\r\n  }\r\n\r\n  .logo_header {\r\n    opacity: 1;\r\n  }\r\n\r\n  .profile .headerMenu {\r\n    min-width: 320px;\r\n    width: 500px !important;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\r\n  .right_header_icons {\r\n    padding-right: 25px;\r\n  }\r\n\r\n  .button_hamburger {\r\n    display: block;\r\n  }\r\n\r\n  .desktopMenu {\r\n    display: none;\r\n  }\r\n\r\n  .smallDeviceMenu {\r\n    display: block;\r\n    width: 100%;\r\n    position: fixed;\r\n    left: 0;\r\n    background: #fff;\r\n    top: 72px;\r\n  }\r\n\r\n  .button_hamburger {\r\n    display: block;\r\n  }\r\n\r\n  .right_header_icons {\r\n    padding-right: 25px;\r\n  }\r\n}'));
+      elementStyle.appendChild(document.createTextNode('@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap");\n\n.sixseconds-header-root blockquote,\n.sixseconds-header-root dl,\n.sixseconds-header-root dd,\n.sixseconds-header-root h1,\n.sixseconds-header-root h2,\n.sixseconds-header-root h3,\n.sixseconds-header-root h4,\n.sixseconds-header-root h5,\n.sixseconds-header-root h6,\n.sixseconds-header-root hr,\n.sixseconds-header-root figure,\n.sixseconds-header-root p,\n.sixseconds-header-root pre,\n.sixseconds-header-root span,\n.sixseconds-header-root a,\n.sixseconds-header-root div,\n.sixseconds-header-root li,\n.sixseconds-header-root button {\n  font-family: "IBM Plex Sans", sans-serif !important;\n}\n\n.sixseconds-header-main-list-menu {\n  display: flex;\n}\n\n.sixseconds-header-main-list-menu li {\n  padding: 0.5rem 0.5rem;\n}\n\n.sixseconds-header-main-list-menu li a {\n  padding: 0 0.25rem;\n  font-weight: 500;\n  font-size: 14px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 15px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #1a1c1e;\n  transition: color 0.3s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link:hover {\n  color: #0073b1;\n}\n\n/* Submenu (Dropdown) */\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data {\n  position: absolute;\n  top: 85%;\n  left: 0;\n  background: white;\n  border: 1px solid #e0e0e0;\n  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);\n  display: none;\n  min-width: 220px;\n  z-index: 1000;\n  border-radius: 12px;\n  overflow: hidden;\n  padding: 8px 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data li {\n  list-style: none;\n  padding: 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link {\n  display: block;\n  padding: 10px 16px;\n  text-decoration: none;\n  color: #1a1c1e;\n  font-weight: 400;\n  font-size: 14px;\n  transition: background 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f8f9fa;\n  color: #0073b1;\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  display: block;\n}\n\n.sixseconds-header-small-device-menu {\n  display: none;\n  width: 100%;\n  left: 0;\n  top: 64px;\n  background-color: #fff;\n  position: fixed;\n  overflow-y: auto;\n  height: 95vh;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.sixseconds-header-small-device-menu a.sixseconds-header-bg-main-menu {\n  display: block;\n  text-decoration: none;\n}\n\n.sixseconds-header-submenu-child li {\n  padding: 0.5rem 0;\n}\n\n.sixseconds-header-submenu-child li a {\n  text-decoration: none;\n}\n\n.sixseconds-header-layout-mobile-menu {\n  padding-bottom: 12px;\n  padding-inline: 0;\n  height: 95vh;\n  overflow-y: auto;\n  padding-top: 8px;\n}\n\n.sixseconds-header-small-device-menu a {\n  background-color: transparent;\n  font-size: 15px;\n  font-weight: 500;\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 12px 16px;\n  border-bottom: 1px solid #f1f3f4;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 90%;\n  max-width: 90%;\n  top: 57px;\n  margin-top: 8px;\n  background-color: #fff;\n  color: #1a1c1e;\n  margin-inline: auto;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 20px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #5f6368;\n}\n\n.sixseconds-header-small-device-menu ul {\n  padding-left: 15px;\n}\n\n.sixseconds-header-desktop-menu {\n  display: flex;\n}\n\n.sixseconds-header-button-hamburger {\n  display: none;\n  position: absolute;\n  right: 20px;\n  top: 18px;\n  z-index: 9;\n}\n\n.tox-editor-header {\n  background-color: transparent;\n}\n\n.sixseconds-header-hamburger-icon-btn {\n  padding: 8px;\n  color: #5f6368;\n}\n\n.sixseconds-header-desktop-menu .sixseconds-header-menu-item .sixseconds-header-menu-link {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.sixseconds-header-small-device-menu {\n  padding-inline: 20px;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n  .sixseconds-header-notification-icon-error .MuiBadge-badge {\n    font-size: 10px;\n    padding: 0 4px;\n    min-width: 16px;\n    right: 5px;\n    background-color: #d32f2f;\n  }\n\n  .sixseconds-header-submenu nav {\n    padding: 0 !important;\n  }\n\n  .MuiPagination-root.MuiPagination-outlined {\n    display: flex;\n    justify-content: center;\n    margin-left: 0;\n  }\n\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n    z-index: 99;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 90% !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n    border-right: 1px solid #e0e0e0;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 450px !important;\n  }\n\n  .sixseconds-header-banner {\n    margin-left: 0 !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n}'));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -11,13 +11,14 @@
   }
 })();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Typography, Dialog, Stack as Stack$1, Button as Button$1, styled, IconButton, Grid, Avatar, Chip, Link, Divider, ClickAwayListener, useMediaQuery, MenuItem, AppBar, Container, Badge, FormLabel, TextField, InputAdornment } from "@mui/material";
+import { Box, Typography, Dialog, Stack as Stack$1, Button as Button$1, IconButton, Grid, Avatar, Chip, Link, Divider, ClickAwayListener, useMediaQuery, MenuItem, AppBar, Container, Badge, FormLabel, TextField, InputAdornment, styled as styled$1 } from "@mui/material";
 import * as React from "react";
 import React__default, { useRef, useEffect, useState, useCallback, useMemo, useLayoutEffect, createContext, forwardRef, createElement, useContext, Component } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
 import MenuIcon from "@mui/icons-material/Menu";
 import toast from "react-hot-toast";
+import { styled } from "@mui/material/styles";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import CheckIcon from "@mui/icons-material/Check";
 import ExitToAppTwoToneIcon from "@mui/icons-material/ExitToAppTwoTone";
@@ -6227,7 +6228,7 @@ ZodEnum.create;
 ZodPromise.create;
 ZodOptional.create;
 ZodNullable.create;
-const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false, "VITE_MODULES_CARDS_ADMIN_FRONTEND_BASE_URL": "https://admin-cards.6seconds.org", "VITE_MODULES_CARDS_HOME_FRONTEND_BASE_URL": "https://cards.6seconds.org", "VITE_MODULES_CERT_FRONTEND_BASE_URL": "https://cert.6seconds.org", "VITE_MODULES_ENV": "prod", "VITE_MODULES_EVENTS_FRONTEND_BASE_URL": "https://events.6seconds.org", "VITE_MODULES_SSO_BACKEND_BASE_URL": "https://ssoapi.6seconds.org", "VITE_MODULES_SSO_FRONTEND_BASE_URL": "https://sso.6seconds.org", "VITE_MODULES_TOOLS_FRONTEND_BASE_URL": "https://newtools.6seconds.org" };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "development", "PROD": true, "SSR": false, "VITE_MODULES_CARDS_ADMIN_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org", "VITE_MODULES_CARDS_HOME_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org", "VITE_MODULES_CERT_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org", "VITE_MODULES_ENV": "qa", "VITE_MODULES_EVENTS_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org", "VITE_MODULES_SSO_BACKEND_BASE_URL": "https://qa-ssoapi.6seconds.org", "VITE_MODULES_SSO_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org", "VITE_MODULES_TOOLS_FRONTEND_BASE_URL": "https://qa-sso.6seconds.org" };
 const env = createEnv({
   client: {
     VITE_MODULES_ENV: stringType()
@@ -12873,32 +12874,36 @@ const DangerDialog = ({
     Dialog,
     {
       fullWidth: false,
+      PaperProps: {
+        sx: {
+          maxWidth: "400px",
+          borderRadius: "12px",
+          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)"
+        }
+      },
       onClose: () => handleCloseUtil(setInitialState),
       open,
       "aria-labelledby": "draggable-dialog-title",
-      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, alignItems: "self-start", children: [
-          /* @__PURE__ */ jsx(ExitToAppTwoToneIcon, { fontSize: "large", sx: { color: "#EC5962" } }),
-          /* @__PURE__ */ jsx("h5", { children: title }),
+      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+        /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, alignItems: "center", sx: { textAlign: "center", mb: 2 }, children: [
+          /* @__PURE__ */ jsx(ExitToAppTwoToneIcon, { sx: { color: "#d32f2f", fontSize: "48px" } }),
           /* @__PURE__ */ jsx(
-            Stack$1,
+            Typography,
             {
-              direction: "column",
-              spacing: 1,
-              alignItems: "self-start",
-              sx: {
-                "& h5": { fontSize: "18px", fontWeight: "600" },
-                "& p": {
-                  fontSize: "16px",
-                  fontWeight: "400",
-                  color: "#666666"
-                }
-              },
-              children: /* @__PURE__ */ jsx("p", { children: description })
+              variant: "h5",
+              sx: { fontSize: "20px", fontWeight: "600", color: "#1a1c1e", fontFamily: "'IBM Plex Sans', sans-serif" },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              sx: { fontSize: "15px", fontWeight: "400", color: "#5f6368", fontFamily: "'IBM Plex Sans', sans-serif" },
+              children: description
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(Stack$1, { direction: "row", alignItems: "center", spacing: 2, sx: { mt: 2 }, children: [
+        /* @__PURE__ */ jsxs(Stack$1, { direction: "row", alignItems: "center", spacing: 2, sx: { mt: 3 }, children: [
           /* @__PURE__ */ jsx(
             Button$1,
             {
@@ -12906,12 +12911,15 @@ const DangerDialog = ({
               fullWidth: true,
               onClick: () => handleCloseUtil(setInitialState),
               sx: {
-                borderColor: "#D9D9D9",
-                color: "#4C4C4C",
+                borderColor: "#e0e0e0",
+                color: "#5f6368",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontSize: "14px",
-                "&:hover": { borderColor: "#D9D9D9" }
+                fontWeight: 500,
+                padding: "10px",
+                fontFamily: "'IBM Plex Sans', sans-serif",
+                "&:hover": { borderColor: "#0073b1", color: "#0073b1", background: "rgba(0, 115, 177, 0.04)" }
               },
               children: "Cancel"
             }
@@ -12925,12 +12933,15 @@ const DangerDialog = ({
               disabled: isLoading,
               onClick: handleClick,
               sx: {
-                background: "#EC5962",
+                background: "#d32f2f",
                 color: "#fff",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontSize: "14px",
-                "&:hover": { background: "#EC5962" }
+                fontWeight: 500,
+                padding: "10px",
+                fontFamily: "'IBM Plex Sans', sans-serif",
+                "&:hover": { background: "#b71c1c" }
               },
               children: isLoading ? ALERT_MESSAGES.commonLoadingMessage : buttonTitle
             }
@@ -12946,23 +12957,22 @@ const ChangePasswordStyled = styled("div")(() => ({
     paddingBottom: "20px"
   },
   "& .createProduct": {
-    border: "1px solid #EDEDED",
+    border: "1px solid #e0e0e0",
     margin: "10px 0px",
     padding: "16px",
-    borderRadius: "10px",
-    boxShadow: "0px 0px 1px 1px #E8E8E880 ",
-    fontFamily: "Inter, sans-serif",
+    borderRadius: "12px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.05)",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     width: "100%",
     boxSizing: "border-box"
   },
   "& .CreateProduct": {
-    border: "1px solid #EDEDED",
+    border: "1px solid #e0e0e0",
     padding: "12px",
-    borderRadius: "10px",
-    boxShadow: "0px 0px 1px 1px #E8E8E880 ",
+    borderRadius: "12px",
+    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.05)",
     height: "729px",
-    fontFamily: "Inter, sans-serif",
-    // width: "90%",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     overflow: "auto"
   },
   "& .dashboard": {
@@ -12970,85 +12980,85 @@ const ChangePasswordStyled = styled("div")(() => ({
     gap: "16px",
     width: "100%",
     alignItems: "center",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .product": {
     display: "flex",
-    fontFamily: "Inter, sans-serif",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     gap: "16px"
   },
   "& .project": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#777777",
-    fontFamily: "Inter, sans-serif"
+    color: "#5f6368",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail": {
-    background: "#AECCFE33",
+    background: "#f0f7ff",
     padding: "12px",
     borderRadius: "12px",
     height: "100%",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail": {
-    background: "#FEDDB04D",
+    background: "#fff9f2",
     padding: "12px",
     borderRadius: "12px",
     height: " 100%",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .emotional": {
     fontSize: "16px",
     fontWeight: "600",
-    color: "#222222",
-    fontFamily: "Inter, sans-serif"
+    color: "#1a1c1e",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .Detail": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#555555",
+    color: "#5f6368",
     margin: "10px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .link": {
     fontSize: "16px",
-    color: "#222222",
+    color: "#1a1c1e",
     fontWeight: "500",
     marginTop: "4%",
     padding: "12px 5px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .group": {
     paddingTop: "12px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .creation": {
     display: "flex",
     paddingBottom: "10px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .groupDetailData": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#777777",
+    color: "#5f6368",
     margin: "0px 13px 0px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .title": {
-    color: "#222222",
+    color: "#1a1c1e",
     fontSize: "16px",
     fontWeight: "600",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .reportActivityDetail": {
     display: "flex",
     alignItems: "center",
     margin: "0px 0px 7px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .reportActivityDetail svg": {
     margin: "0px 13px  0px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .version": {
     display: "flex",
@@ -13056,76 +13066,82 @@ const ChangePasswordStyled = styled("div")(() => ({
     width: "98%",
     alignItems: "center",
     margin: "8px 0px 8px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .dotted": {
     fontSize: "14px",
     fontWeight: "500",
     display: "flex",
     alignItems: "center",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .dotted": {
-    color: "#2063A5",
-    fontFamily: "Inter, sans-serif"
+    color: "#0073b1",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .dotted": {
-    color: "#F68926",
-    fontFamily: "Inter, sans-serif"
+    color: "#f68926",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .version svg": {
-    color: "#2063A5",
-    fontFamily: "Inter, sans-serif"
+    color: "#0073b1",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .version svg": {
-    color: "#F68926",
-    fontFamily: "Inter, sans-serif"
+    color: "#f68926",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .accordionTitle": {
-    color: "#2063A5",
+    color: "#0073b1",
     fontSize: "14px",
     fontWeight: "500",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .accordionTitle": {
-    color: "#F68926",
+    color: "#f68926",
     fontSize: "14px",
     fontWeight: "500",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .toggle svg": {
-    color: "#2063A5"
+    color: "#0073b1"
   },
   "& .vsDetail .toggle svg": {
-    color: "#F68926"
+    color: "#f68926"
   },
   "& .welcome": {
     fontSize: "16px",
-    color: "#777777",
+    color: "#5f6368",
     fontWeight: "400",
     margin: "3px 3px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .recant": {
     fontSize: "16px",
     fontWeight: "600",
-    color: "#222222",
+    color: "#1a1c1e",
     padding: "9px 4px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .viewFile": {
-    color: "#777777",
+    color: "#5f6368",
     fontSize: "14px",
     fontWeight: "500",
-    border: "1px solid #E8E8E8",
-    height: "28px",
-    borderRadius: "4px",
-    width: "97px",
+    border: "1px solid #e0e0e0",
+    height: "32px",
+    borderRadius: "6px",
+    width: "110px",
     alignItems: "center",
     textAlign: "center",
     display: "flex",
     justifyContent: "center",
-    marginTop: "12px"
+    marginTop: "12px",
+    transition: "all 0.2s",
+    "&:hover": {
+      background: "#f8f9fa",
+      borderColor: "#0073b1",
+      color: "#0073b1"
+    }
   },
   "& .viewFile svg": {
     margin: "0px 0px 0px 7px"
@@ -13133,28 +13149,24 @@ const ChangePasswordStyled = styled("div")(() => ({
 }));
 const ProfileStyled = styled("div")(() => ({
   "& .dashboardMain": {
-    // width: "986px !important",
     marginTop: "1%",
     paddingBottom: "20px"
   },
   "& .createProduct": {
-    border: "1px solid #EDEDED",
+    border: "1px solid #e0e0e0",
     margin: "10px 0px",
     padding: "16px",
-    borderRadius: "10px",
-    // boxShadow: "0px 0px 1px 1px #E8E8E880 ",
-    fontFamily: "Inter, sans-serif",
+    borderRadius: "12px",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     width: "100%",
     boxSizing: "border-box"
   },
   "& .CreateProduct": {
-    border: "1px solid #EDEDED",
+    border: "1px solid #e0e0e0",
     padding: "12px",
-    borderRadius: "10px",
-    // boxShadow: "0px 0px 1px 1px #E8E8E880 ",
+    borderRadius: "12px",
     height: "729px",
-    fontFamily: "Inter, sans-serif",
-    // width: "90%",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     overflow: "auto"
   },
   "& .dashboard": {
@@ -13162,85 +13174,85 @@ const ProfileStyled = styled("div")(() => ({
     gap: "16px",
     width: "100%",
     alignItems: "center",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .product": {
     display: "flex",
-    fontFamily: "Inter, sans-serif",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     gap: "16px"
   },
   "& .project": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#777777",
-    fontFamily: "Inter, sans-serif"
+    color: "#5f6368",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail": {
-    background: "#AECCFE33",
+    background: "#f0f7ff",
     padding: "12px",
     borderRadius: "12px",
     height: "100%",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail": {
-    background: "#FEDDB04D",
+    background: "#fff9f2",
     padding: "12px",
     borderRadius: "12px",
     height: " 100%",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .emotional": {
     fontSize: "16px",
     fontWeight: "600",
-    color: "#222222",
-    fontFamily: "Inter, sans-serif"
+    color: "#1a1c1e",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .Detail": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#555555",
+    color: "#5f6368",
     margin: "10px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .link": {
     fontSize: "16px",
-    color: "#222222",
+    color: "#1a1c1e",
     fontWeight: "500",
     marginTop: "4%",
     padding: "12px 5px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .group": {
     paddingTop: "12px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .creation": {
     display: "flex",
     paddingBottom: "10px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .groupDetailData": {
     fontSize: "14px",
     fontWeight: "400",
-    color: "#777777",
+    color: "#5f6368",
     margin: "0px 13px 0px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .title": {
-    color: "#222222",
+    color: "#1a1c1e",
     fontSize: "16px",
     fontWeight: "600",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .reportActivityDetail": {
     display: "flex",
     alignItems: "center",
     margin: "0px 0px 7px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .reportActivityDetail svg": {
     margin: "0px 13px  0px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .version": {
     display: "flex",
@@ -13248,76 +13260,82 @@ const ProfileStyled = styled("div")(() => ({
     width: "98%",
     alignItems: "center",
     margin: "8px 0px 8px 0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .dotted": {
     fontSize: "14px",
     fontWeight: "500",
     display: "flex",
     alignItems: "center",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .dotted": {
-    color: "#2063A5",
-    fontFamily: "Inter, sans-serif"
+    color: "#0073b1",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .dotted": {
-    color: "#F68926",
-    fontFamily: "Inter, sans-serif"
+    color: "#f68926",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .version svg": {
-    color: "#2063A5",
-    fontFamily: "Inter, sans-serif"
+    color: "#0073b1",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .version svg": {
-    color: "#F68926",
-    fontFamily: "Inter, sans-serif"
+    color: "#f68926",
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .accordionTitle": {
-    color: "#2063A5",
+    color: "#0073b1",
     fontSize: "14px",
     fontWeight: "500",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .vsDetail .accordionTitle": {
-    color: "#F68926",
+    color: "#f68926",
     fontSize: "14px",
     fontWeight: "500",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .seiDetail .toggle svg": {
-    color: "#2063A5"
+    color: "#0073b1"
   },
   "& .vsDetail .toggle svg": {
-    color: "#F68926"
+    color: "#f68926"
   },
   "& .welcome": {
     fontSize: "16px",
-    color: "#777777",
+    color: "#5f6368",
     fontWeight: "400",
     margin: "3px 3px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .recant": {
     fontSize: "16px",
     fontWeight: "600",
-    color: "#222222",
+    color: "#1a1c1e",
     padding: "9px 4px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
   "& .viewFile": {
-    color: "#777777",
+    color: "#5f6368",
     fontSize: "14px",
     fontWeight: "500",
-    border: "1px solid #E8E8E8",
-    height: "28px",
-    borderRadius: "4px",
-    width: "97px",
+    border: "1px solid #e0e0e0",
+    height: "32px",
+    borderRadius: "6px",
+    width: "110px",
     alignItems: "center",
     textAlign: "center",
     display: "flex",
     justifyContent: "center",
-    marginTop: "12px"
+    marginTop: "12px",
+    transition: "all 0.2s",
+    "&:hover": {
+      background: "#f8f9fa",
+      borderColor: "#0073b1",
+      color: "#0073b1"
+    }
   },
   "& .viewFile svg": {
     margin: "0px 0px 0px 7px"
@@ -13334,50 +13352,54 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
       "aria-labelledby": "draggable-dialog-title",
       children: [
         /* @__PURE__ */ jsxs(ProfileStyled, { children: [
-          /* @__PURE__ */ jsx(Box, { sx: { textAlign: "right", padding: "10px 10px 0px 0px" }, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { sx: { textAlign: "right", padding: "16px 16px 0px 0px" }, children: /* @__PURE__ */ jsx(
             IconButton,
             {
               onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: false } })),
               disableRipple: false,
-              sx: { background: "#E9E9E9", color: "#000" },
-              children: /* @__PURE__ */ jsx(CloseIcon, {})
+              sx: {
+                background: "#f1f3f4",
+                color: "#5f6368",
+                "&:hover": { background: "#e0e0e0", color: "#1a1c1e" }
+              },
+              children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+          /* @__PURE__ */ jsx(Box, { sx: { p: 4 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 4, children: [
             /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 5, children: [
-              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { sx: { textAlign: "center", mb: 3 }, children: /* @__PURE__ */ jsx(
                 Avatar,
                 {
                   src: userData?.userprofile,
                   sx: {
-                    width: "150px",
-                    height: "150px",
-                    border: "5px solid #1CAEFF",
-                    mb: 2,
+                    width: "160px",
+                    height: "160px",
+                    border: "4px solid #0073b1",
+                    boxShadow: "0px 4px 12px rgba(0,0,0,0.1)",
                     display: "inline-flex"
                   }
                 }
               ) }),
-              /* @__PURE__ */ jsxs(Box, { sx: { pl: { md: 3, lg: 3, xs: 0 } }, children: [
-                /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1.5, sx: { fontSize: "14px" }, children: [
-                  Boolean(userData?.certification?.length) && /* @__PURE__ */ jsxs(Stack$1, { direction: "row", alignItems: "center", flexWrap: "wrap", spacing: 0.5, useFlexGap: true, children: [
-                    "Certification:",
-                    userData?.certification?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { sx: { mr: 0.5, mb: 0.5 }, label: `${itm}` }, idx))
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1.5, sx: { fontSize: "14px", color: "#5f6368" }, children: [
+                  Boolean(userData?.certification?.length) && /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1, children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", fontSize: "14px" }, children: "Certifications" }),
+                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.certification?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { variant: "outlined", sx: { borderRadius: "6px" }, label: `${itm}` }, idx)) })
                   ] }),
-                  Boolean(userData?.country) && /* @__PURE__ */ jsxs(Box, { children: [
-                    "Location: ",
-                    userData?.country
+                  Boolean(userData?.country) && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", minWidth: "80px" }, children: "Location:" }),
+                    /* @__PURE__ */ jsx(Typography, { children: userData?.country })
                   ] }),
                   Boolean(userData?.languages?.length) && /* @__PURE__ */ jsxs(Box, { children: [
-                    "Languages:",
-                    userData?.languages?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { sx: { ml: 0.5, mr: 0.5, mb: 0.5 }, label: `${itm}` }, idx))
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", mb: 0.5 }, children: "Languages" }),
+                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.languages?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: `${itm}` }, idx)) })
                   ] }),
                   Boolean(userData?.areaOfWork?.length) && /* @__PURE__ */ jsxs(Box, { children: [
-                    "Areas Of Work:",
-                    userData?.areaOfWork?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { sx: { ml: 0.5, mr: 0.5, mb: 0.5 }, label: `${itm}` }, idx))
+                    /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 600, color: "#1a1c1e", mb: 0.5 }, children: "Areas Of Work" }),
+                    /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: userData?.areaOfWork?.map((itm, idx) => /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: `${itm}` }, idx)) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 2, alignItems: "center", sx: { marginTop: 2 }, children: [
+                /* @__PURE__ */ jsxs(Stack$1, { direction: "row", spacing: 1.5, alignItems: "center", sx: { marginTop: 3 }, children: [
                   /* @__PURE__ */ jsx(
                     Button$1,
                     {
@@ -13387,12 +13409,12 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
                       variant: "contained",
                       disableElevation: true,
                       sx: {
-                        background: "#000",
+                        background: "#0073b1",
                         borderRadius: "8px",
                         minWidth: "auto",
-                        p: 1,
+                        p: 1.2,
                         "&:hover": {
-                          backgroundColor: "#0a66c2"
+                          backgroundColor: "#005a8b"
                         }
                       },
                       children: /* @__PURE__ */ jsx(ContentCopyIcon, { fontSize: "small" })
@@ -13403,12 +13425,12 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
                     {
                       variant: "contained",
                       sx: {
-                        backgroundColor: "#000",
+                        backgroundColor: "#0073b1",
                         borderRadius: "8px",
                         minWidth: "auto",
-                        p: 1,
+                        p: 1.2,
                         "&:hover": {
-                          backgroundColor: "#0a66c2"
+                          backgroundColor: "#005a8b"
                         }
                       },
                       disableElevation: true,
@@ -13427,12 +13449,12 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
                       LinkComponent: Link,
                       target: "_blank",
                       sx: {
-                        background: "#000",
+                        background: "#0073b1",
                         borderRadius: "8px",
                         minWidth: "auto",
-                        p: 1,
+                        p: 1.2,
                         "&:hover": {
-                          backgroundColor: "#0a66c2"
+                          backgroundColor: "#005a8b"
                         }
                       },
                       children: /* @__PURE__ */ jsx(PublicIcon, { fontSize: "small" })
@@ -13442,30 +13464,54 @@ function ViewProfileDialog({ userData, setInitialState, isOpen }) {
               ] })
             ] }),
             /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 7, children: [
-              /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 1, sx: { color: "#222222", fontSize: "14px", lineHeight: "24px" }, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h3", sx: { fontSize: "30px", fontWeight: "500", color: "black" }, children: userData?.fullName }),
-                /* @__PURE__ */ jsx(Box, { children: userData?.bio }),
-                Boolean(userData?.title) && /* @__PURE__ */ jsxs(Box, { children: [
-                  "Title: ",
-                  userData?.title
-                ] }),
-                Boolean(userData?.company) && /* @__PURE__ */ jsxs(Box, { children: [
-                  "Company: ",
-                  userData?.company
-                ] }),
-                Boolean(userData?.email) && /* @__PURE__ */ jsxs(Box, { children: [
-                  "Email: ",
-                  userData?.email
+              /* @__PURE__ */ jsxs(Stack$1, { direction: "column", spacing: 2, sx: { color: "#5f6368", fontSize: "14px", lineHeight: "1.6" }, children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "h3",
+                    sx: {
+                      fontSize: "28px",
+                      fontWeight: "700",
+                      color: "#1a1c1e",
+                      fontFamily: "'IBM Plex Sans', sans-serif"
+                    },
+                    children: userData?.fullName
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "15px" }, children: userData?.bio }),
+                /* @__PURE__ */ jsxs(Box, { children: [
+                  Boolean(userData?.title) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
+                      "Title:",
+                      " "
+                    ] }),
+                    userData?.title
+                  ] }),
+                  Boolean(userData?.company) && /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
+                      "Company:",
+                      " "
+                    ] }),
+                    userData?.company
+                  ] }),
+                  Boolean(userData?.email) && /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { fontWeight: 600, color: "#1a1c1e" }, children: [
+                      "Email:",
+                      " "
+                    ] }),
+                    userData?.email
+                  ] })
                 ] }),
                 /* @__PURE__ */ jsx(
                   Box,
                   {
+                    sx: { mt: 2 },
                     dangerouslySetInnerHTML: {
                       __html: userData?.certBio || ""
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx(Divider, {}),
+                /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
                 /* @__PURE__ */ jsx(Typography, { variant: "h5", sx: { fontSize: "16px", fontWeight: "500" }, children: "Description" })
               ] }),
               /* @__PURE__ */ jsx(Stack$1, { direction: "row", alignItems: "center", flexWrap: "wrap", spacing: 0.5, useFlexGap: true, children: userData?.certOfferToHelp })
@@ -13515,15 +13561,16 @@ function ChangePasswordDialog({ isOpen, email, t: t2, setInitialState }) {
       open: isOpen,
       "aria-labelledby": "draggable-dialog-title",
       children: /* @__PURE__ */ jsx("form", { onSubmit: formik.handleSubmit, children: /* @__PURE__ */ jsx(ChangePasswordStyled, { children: /* @__PURE__ */ jsxs(Box, { sx: { pr: { xs: 0, lg: 8 }, p: 2 }, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { display: "flex", alignItems: "center" }, className: "Heading", children: "Change Password" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { display: "flex", alignItems: "center", fontWeight: 600, color: "#1a1c1e" }, children: "Change Password" }),
         /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
-              p: 2,
-              border: "1px solid #EDEDED",
-              borderRadius: "16px",
-              mt: 2
+              p: 3,
+              border: "1px solid #e0e0e0",
+              borderRadius: "12px",
+              mt: 2,
+              boxShadow: "0px 2px 4px rgba(0,0,0,0.05)"
             },
             children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
               /* @__PURE__ */ jsxs(Grid, { item: true, xs: 12, lg: 6, children: [
@@ -13586,53 +13633,56 @@ const AppMenus = ({ menuItems, setInitialState, t: t2, appName, router }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx(ClickAwayListener, { touchEvent: "onTouchStart", onClickAway: () => handleCloseUtil(setInitialState), children: /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsx(Grid, { container: true, rowGap: 3, children: menuItems?.length > 0 && menuItems?.map((item, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ClickAwayListener, { touchEvent: "onTouchStart", onClickAway: () => handleCloseUtil(setInitialState), children: /* @__PURE__ */ jsx(Box, { sx: { p: 2, background: "#fff", zIndex: 1100 }, children: /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: menuItems?.length > 0 && menuItems?.map((item, index) => /* @__PURE__ */ jsx(
     Grid,
     {
       onClick: () => handleRedirection2(appName, item.link, item.type),
       item: true,
       md: 4,
       xs: 6,
-      style: { cursor: "pointer", textDecoration: "none" },
-      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+      sx: { cursor: "pointer", textDecoration: "none" },
+      children: /* @__PURE__ */ jsxs(
         Box,
         {
-          className: "dashboard_Boxs",
+          className: "sixseconds-header-dashboard-boxes",
           sx: {
-            marginTop: "10px",
             textAlign: "center",
-            borderRadius: "16px",
-            "& svg": {
-              margin: "0 auto",
-              width: "25px",
-              height: "25px"
+            p: 2,
+            borderRadius: "12px",
+            transition: "all 0.2s",
+            "&:hover": {
+              background: "#f8f9fa",
+              "& .MuiTypography-root": {
+                color: "#0073b1"
+              }
             }
           },
           children: [
-            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Box, { sx: { mb: 1.5 }, children: /* @__PURE__ */ jsx(
               "img",
               {
-                width: 34,
-                height: 34,
-                style: { margin: "0px auto", width: "34px", height: "34px" },
+                width: 38,
+                height: 38,
+                style: { margin: "0 auto", display: "block" },
                 src: item.icon,
-                alt: ""
+                alt: item.name
               }
             ) }),
             /* @__PURE__ */ jsx(
               Typography,
               {
                 sx: {
-                  fontSize: "12.5px",
-                  color: "#252525",
-                  fontWeight: 500
+                  fontSize: "13px",
+                  color: "#1a1c1e",
+                  fontWeight: 500,
+                  lineHeight: 1.2
                 },
                 children: t2(item.name)
               }
             )
           ]
         }
-      ) })
+      )
     },
     index
   )) }) }) });
@@ -13640,20 +13690,29 @@ const AppMenus = ({ menuItems, setInitialState, t: t2, appName, router }) => {
 const DropdownMenu = ({ headerMenuArray, initialState }) => {
   const pathname = window.location.pathname;
   const isMobile = useMediaQuery("(max-width: 1324px)");
-  return /* @__PURE__ */ jsx("nav", { style: { backgroundColor: "transparent", color: "#000" }, children: !isMobile ? /* @__PURE__ */ jsx("ul", { className: " main_list_Menu desktopMenu", children: headerMenuArray.map((items, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: "menu-item", style: { listStyle: "none" }, children: [
-    /* @__PURE__ */ jsx("a", { href: items.value || "", target: items.target, className: `menu-link`, children: items.label }),
-    Boolean(items.children.length) && /* @__PURE__ */ jsx("ul", { className: "submenuData ", children: items.children?.map((child, index2) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: child.value || "", target: child.target, className: "submenu-link", children: child.label }) }, index2) })) })
-  ] }, index) })) }) : initialState.toggles.dropDownMenu && /* @__PURE__ */ jsx("div", { className: "lg:hidden smallDeviceMenu", id: "mobile-menu", children: /* @__PURE__ */ jsx("div", { className: " layout_mobile_menu", children: headerMenuArray.map((items, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { style: { backgroundColor: "transparent", color: "#000" }, children: !isMobile ? /* @__PURE__ */ jsx("ul", { className: "sixseconds-header-main-list-menu sixseconds-header-desktop-menu", children: headerMenuArray.map((items, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: "sixseconds-header-menu-item", style: { listStyle: "none" }, children: [
+    /* @__PURE__ */ jsx("a", { href: items.value || "", target: items.target, className: `sixseconds-header-menu-link`, children: items.label }),
+    Boolean(items.children.length) && /* @__PURE__ */ jsx("ul", { className: "sixseconds-header-submenu-data", children: items.children?.map((child, index2) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: child.value || "", target: child.target, className: "sixseconds-header-submenu-link", children: child.label }) }, index2) })) })
+  ] }, index) })) }) : initialState.toggles.dropDownMenu && /* @__PURE__ */ jsx("div", { className: "lg:hidden sixseconds-header-small-device-menu", id: "mobile-menu", children: /* @__PURE__ */ jsx("div", { className: "sixseconds-header-layout-mobile-menu", children: headerMenuArray.map((items, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "a",
       {
         href: items.value || "",
-        className: `bg_main_menu ${pathname === items.value ? "text-customBlue" : "text-[#2C2E35]"}`,
+        className: `sixseconds-header-bg-main-menu ${pathname === items.value ? "sixseconds-header-active-link" : ""}`,
+        style: { color: pathname === items.value ? "#0073b1" : "#1a1c1e" },
         children: items.label
       },
       index
     ),
-    Boolean(items.children.length) && /* @__PURE__ */ jsx("ul", { className: "submenu_child", children: items.children?.map((items2, index2) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { style: { listStyleType: "none" }, children: /* @__PURE__ */ jsx("a", { href: items2.value || "", target: items2.target, className: "submenu_child_link ", children: items2.label }) }, index2) })) })
+    Boolean(items.children.length) && /* @__PURE__ */ jsx("ul", { className: "sixseconds-header-submenu-child", children: items.children?.map((items2, index2) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("li", { style: { listStyleType: "none" }, children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: items2.value || "",
+        target: items2.target,
+        className: "sixseconds-header-submenu-child-link",
+        children: items2.label
+      }
+    ) }, index2) })) })
   ] })) }) }) });
 };
 function Language({
@@ -13675,14 +13734,14 @@ function Language({
     {
       sx: {
         p: 2,
-        zIndex: "99999999 !important",
-        borderRadius: "16px",
-        border: "1px solid #EDEDED",
-        boxShadow: "0px 12px 16px -4px #1A191914",
+        zIndex: "1100 !important",
+        borderRadius: "12px",
+        border: "1px solid #e0e0e0",
+        boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
         maxWidth: "333px",
         minWidth: { md: "333px", lg: "333px", xs: "200px" },
         background: "#fff",
-        top: "66px",
+        top: "60px",
         right: "0px",
         "[dir='rtl'] &": {
           left: "0 !important",
@@ -13703,9 +13762,13 @@ function Language({
             overflowY: "auto",
             maxHeight: "300px",
             "& li": {
-              borderBottom: "1px solid #EDEDED",
-              padding: "16px 0px",
+              borderBottom: "1px solid #f1f3f4",
+              padding: "12px 0px",
               cursor: "pointer",
+              transition: "background 0.2s ease",
+              "&:hover": {
+                background: "#f8f9fa"
+              },
               "&:last-child": {
                 borderBottom: "0px"
               }
@@ -14137,32 +14200,34 @@ const Notification = ({ setInitialState, notificationAccessApps, initialState, t
     {
       sx: {
         p: 2,
-        zIndex: "99999999 !important",
-        borderRadius: "16px",
-        border: "1px solid #EDEDED",
-        boxShadow: "0px 12px 16px -4px #1A191914",
+        zIndex: "1100 !important",
+        borderRadius: "12px",
+        border: "1px solid #e0e0e0",
+        boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
         maxWidth: "auto",
         minWidth: { md: "450px", lg: "450px", xs: "200px" },
         background: "#fff",
-        top: "66px",
+        top: "60px",
         right: "-60px",
         position: "absolute"
       },
       children: [
-        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", borderBottom: "1px solid #007fc0" }, children: notificationAccessApps?.map((tab) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", borderBottom: "1px solid #e0e0e0", mb: 2 }, children: notificationAccessApps?.map((tab) => /* @__PURE__ */ jsx(
           Button$1,
           {
             onClick: () => setActiveTab(tab.name),
             sx: {
-              padding: "2px 20px",
+              padding: "8px 20px",
               fontSize: "14px",
+              fontWeight: activeTab === tab.name ? 600 : 400,
               textTransform: "capitalize",
-              background: activeTab === tab.name ? "#007fc0" : "#fff",
-              color: activeTab === tab.name ? "#fff" : "#007fc0",
+              background: "transparent",
+              color: activeTab === tab.name ? "#0073b1" : "#5f6368",
               borderRadius: "0px",
-              borderTopLeftRadius: "5px",
-              borderTopRightRadius: "5px"
-              // borderBottom: "1px solid #007fc0",
+              borderBottom: activeTab === tab.name ? "2px solid #0073b1" : "none",
+              "&:hover": {
+                background: "rgba(0, 115, 177, 0.04)"
+              }
             },
             children: /* @__PURE__ */ jsx(Typography, { sx: { textWrap: "nowrap" }, children: t2(tab.name) })
           },
@@ -14242,81 +14307,74 @@ const Notification = ({ setInitialState, notificationAccessApps, initialState, t
   ) });
 };
 const SubHeaderStyled = styled(AppBar)(() => ({
-  // "@media screen and (max-width:1920px) and (min-width:1600px)": {
-  //   "& .submenu": {
-  //     width: "84% !important",
-  //   },
-  // },
-  // "@media screen and (max-width:1600px) and (min-width:1440px)": {
-  //   "& .submenu": {
-  //     width: "82% !important",
-  //   },
-  // },
-  // "@media screen and (max-width:5000px) and (min-width:2560px)": {
-  //   "& .submenu": {
-  //     width: "89% !important",
-  //   },
-  // },
   "& ": {
     background: "#fff",
-    color: "#000",
-    height: "70px",
-    width: "100vw",
-    fontFamily: "Inter, sans-serif",
+    color: "#1a1c1e",
+    height: "64px",
+    width: "100%",
+    fontFamily: "'IBM Plex Sans', sans-serif",
     position: "fixed",
-    zIndex: "999",
-    // left: "255px",
+    zIndex: "1000",
     right: "0px",
-    top: "0px"
+    top: "0px",
+    boxShadow: "none",
+    borderBottom: "1px solid #e0e0e0",
+    display: "flex",
+    justifyContent: "center"
   },
-  "& .submenu": {
+  "& .sixseconds-header-submenu": {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
     margin: "0px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
-  "& .profile": {
+  "& .sixseconds-header-profile": {
     position: "absolute",
     right: "0px",
-    top: "66px",
+    top: "60px",
     background: "#fff",
-    width: "250px",
-    borderRadius: "16px",
-    zIndex: "999",
-    boxShadow: "0px 4px 6px -2px #1A191908",
-    fontFamily: "Inter, sans-serif",
-    border: "1px solid #EDEDED",
+    width: "280px",
+    borderRadius: "12px",
+    zIndex: "1100",
+    boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.1)",
+    fontFamily: "'IBM Plex Sans', sans-serif",
+    border: "1px solid #e0e0e0",
+    overflow: "hidden",
     "& ul": {
       margin: "0px",
-      padding: "0px 16px 16px",
+      padding: "8px 0",
       listStyle: "none",
       "& li": {
-        padding: "10px 0px",
-        borderBottom: "1px solid #E9E9E9",
+        padding: "12px 16px",
+        borderBottom: "1px solid #f1f3f4",
         cursor: "pointer",
+        transition: "background 0.2s ease",
+        "&:hover": {
+          background: "#f8f9fa"
+        },
         "&:last-child": { borderBottom: "0px" }
       }
     }
   },
-  "& .notification": {
+  "& .sixseconds-header-notification": {
     display: "flex",
     alignItems: "center",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
-  "& .notification h6,p": {
+  "& .sixseconds-header-notification h6,p": {
     margin: "10px",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   },
-  "& .total": {
-    border: "1px solid #C9C9C9",
+  "& .sixseconds-header-total": {
+    border: "1px solid #e0e0e0",
     borderRadius: "6px",
-    padding: "4px 8px 4px 8px",
-    color: "#666666",
+    padding: "4px 10px",
+    color: "#5f6368",
     fontSize: "14px",
     fontWeight: "500",
     display: "flex",
-    fontFamily: "Inter, sans-serif"
+    fontFamily: "'IBM Plex Sans', sans-serif"
   }
 }));
 const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, router }) => {
@@ -14347,20 +14405,32 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
         ]
       }
     ),
-    state.toggles.userProfile && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => handleCloseUtil(setState), children: /* @__PURE__ */ jsxs(Box, { className: "sixseconds-profile profile", children: [
+    state.toggles.userProfile && /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: () => handleCloseUtil(setState), children: /* @__PURE__ */ jsxs(Box, { className: "sixseconds-header-profile", sx: { top: "60px !important", zIndex: "1100 !important" }, children: [
       /* @__PURE__ */ jsxs(
         Stack$1,
         {
           direction: "row",
-          spacing: 1,
+          spacing: 2,
           alignItems: "center",
           sx: {
-            borderBottom: "1px solid #EDEDED",
+            borderBottom: "1px solid #f1f3f4",
             p: 2,
-            zIndex: "99999999 !important"
+            background: "#f8f9fa"
           },
           children: [
-            /* @__PURE__ */ jsx(Avatar, { src: userData?.userprofile, sx: { width: "55px", height: "55px" }, children: (userData?.fullName || "").trim().split(/\s+/).filter(Boolean).map((part) => part[0]?.toUpperCase()).join("") || "" }),
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                src: userData?.userprofile,
+                sx: {
+                  width: "48px",
+                  height: "48px",
+                  border: "2px solid #fff",
+                  boxShadow: "0px 2px 4px rgba(0,0,0,0.1)"
+                },
+                children: (userData?.fullName || "").trim().split(/\s+/).filter(Boolean).map((part) => part[0]?.toUpperCase()).join("") || ""
+              }
+            ),
             /* @__PURE__ */ jsxs(
               Box,
               {
@@ -14371,127 +14441,96 @@ const UserProfile = ({ t: t2, userData, setInitialState, extraMenuOptions, route
                   wordBreak: "break-all"
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { fontSize: "16px", fontWeight: "500", m: 0 }, children: userData?.fullName }),
-                  /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { m: 0, fontSize: "14px", color: "#666666" }, children: [
-                    truncateValUtil(userData?.email || ""),
-                    " ",
-                    /* @__PURE__ */ jsx("br", {}),
-                    Boolean(userData?.role) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      "(",
-                      userData?.role,
-                      ")"
-                    ] })
-                  ] })
+                  /* @__PURE__ */ jsx(Typography, { variant: "h4", sx: { fontSize: "15px", fontWeight: "600", color: "#1a1c1e", m: 0 }, children: userData?.fullName }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      component: "span",
+                      sx: { m: 0, fontSize: "13px", color: "#5f6368", display: "block", mt: 0.5 },
+                      children: truncateValUtil(userData?.email || "")
+                    }
+                  ),
+                  Boolean(userData?.role) && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "11px", color: "#0073b1", fontWeight: 700, textTransform: "uppercase" }, children: userData?.role })
                 ]
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("ul", { children: [
+      /* @__PURE__ */ jsxs(Box, { component: "ul", sx: { m: 0, p: "8px 0 !important", listStyle: "none" }, children: [
         extraMenuOptions.components,
-        extraMenuOptions.isViewProfile && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-          Stack$1,
+        extraMenuOptions.isViewProfile && /* @__PURE__ */ jsx(
+          Box,
           {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
+            component: "li",
             onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, viewProfile: true } })),
-            sx: { color: "#1A1919", cursor: "pointer", textDecoration: "none" },
-            children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "20px", height: "23px" } }),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: t2("View Profile")
-                }
-              ) })
-            ]
+            sx: {
+              px: 2,
+              py: 1.5,
+              cursor: "pointer",
+              "&:hover": { background: "#f8f9fa", color: "#0073b1" }
+            },
+            children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("View Profile") })
+            ] })
           }
-        ) }),
-        extraMenuOptions.isEditProfile && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-          Stack$1,
+        ),
+        extraMenuOptions.isEditProfile && /* @__PURE__ */ jsx(
+          Box,
           {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
+            component: "li",
             onClick: () => handleRedirection2(userData?.appName, SSO_ROUTES(userData?.appName).editProfile),
-            sx: { color: "#1A1919", textDecoration: "none" },
-            children: [
-              /* @__PURE__ */ jsx(SVG.UserEdit, { style: { width: "20px", height: "23px" } }),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: t2("Edit Profile")
-                }
-              ) })
-            ]
+            sx: {
+              px: 2,
+              py: 1.5,
+              cursor: "pointer",
+              "&:hover": { background: "#f8f9fa", color: "#0073b1" }
+            },
+            children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(SVG.UserEdit, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Edit Profile") })
+            ] })
           }
-        ) }),
-        extraMenuOptions.isChangePassword && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-          Stack$1,
+        ),
+        extraMenuOptions.isChangePassword && /* @__PURE__ */ jsx(
+          Box,
           {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
+            component: "li",
             onClick: () => setInitialState((p) => ({ ...p, toggles: { ...p.toggles, changePassword: true } })),
-            sx: { cursor: "pointer", textDecoration: "none" },
-            children: [
-              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "20px", height: "23px" } }),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    color: "#1A1919",
-                    fontSize: "16px",
-                    fontWeight: "400"
-                  },
-                  children: t2("Change Password")
-                }
-              ) })
-            ]
+            sx: {
+              px: 2,
+              py: 1.5,
+              cursor: "pointer",
+              "&:hover": { background: "#f8f9fa", color: "#0073b1" }
+            },
+            children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(SVG.CheckedPerson, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Change Password") })
+            ] })
           }
-        ) }),
-        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-          Stack$1,
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
           {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
+            component: "li",
             onClick: () => setInitialState?.((p) => ({
               ...p,
               toggles: { ...p.toggles, logout: true }
             })),
-            children: [
-              /* @__PURE__ */ jsx(SVG.Logout, { style: { width: "20px", height: "23px" } }),
-              /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "h4",
-                  sx: {
-                    fontSize: "16px",
-                    fontWeight: "400",
-                    m: 0
-                  },
-                  children: t2("Logout")
-                }
-              ) })
-            ]
+            sx: {
+              px: 2,
+              py: 1.5,
+              cursor: "pointer",
+              "&:hover": { background: "#f8f9fa", color: "#d32f2f" },
+              borderTop: "1px solid #f1f3f4"
+            },
+            children: /* @__PURE__ */ jsxs(Stack$1, { direction: "row", gap: 1.5, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(SVG.Logout, { style: { width: "18px", height: "18px", color: "inherit" } }),
+              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "14px", fontWeight: "400", m: 0 }, children: t2("Logout") })
+            ] })
           }
-        ) })
+        )
       ] })
     ] }) })
   ] });
@@ -14563,7 +14602,7 @@ const Header = ({
     }
   }, [typeof window !== "undefined"]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SubHeaderStyled, { sx, children: /* @__PURE__ */ jsxs(Container, { maxWidth: false, sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(SubHeaderStyled, { sx, className: "sixseconds-header-root", children: /* @__PURE__ */ jsxs(Container, { maxWidth: false, sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxs(Box, { sx: { display: "flex !important", alignItems: "center !important" }, children: [
         handleSideToggle && /* @__PURE__ */ jsx(Box, { sx: { display: { md: "none", lg: "none", xs: "block" } }, children: /* @__PURE__ */ jsx(IconButton, { onClick: handleSideToggle, children: /* @__PURE__ */ jsx(MenuIcon, {}) }) }),
         isMainLogo && /* @__PURE__ */ jsx(Logo, {}),
@@ -14591,7 +14630,7 @@ const Header = ({
             margin: { md: "10px", lg: "10px", xs: "10px 0" },
             position: "relative"
           },
-          children: /* @__PURE__ */ jsxs(Box, { className: "notification", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          children: /* @__PURE__ */ jsxs(Box, { className: "sixseconds-header-notification", sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             endCustomComponents,
             isAccessAppMenu && Boolean(userData?.appAccess?.length) && /* @__PURE__ */ jsxs(Box, { children: [
               /* @__PURE__ */ jsx(
@@ -14617,7 +14656,7 @@ const Header = ({
               state.toggles.appMenus && Boolean(userData?.appAccess?.length) && /* @__PURE__ */ jsx(
                 Box,
                 {
-                  className: "sixseconds-headerMenu profile headerMenu",
+                  className: "sixseconds-header-menu sixseconds-header-profile sixseconds-header-menu",
                   sx: {
                     width: "400px !important",
                     p: 1,
@@ -14652,7 +14691,15 @@ const Header = ({
                       },
                       "data-toggle-name": "notification",
                       onClick: (e) => handleOpenUtil(e, setState),
-                      children: /* @__PURE__ */ jsx(Badge, { badgeContent: userData?.notificationCount, color: "error", className: "notification_icon_error", children: /* @__PURE__ */ jsx(SVG.Bell, {}) })
+                      children: /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          badgeContent: userData?.notificationCount,
+                          color: "error",
+                          className: "sixseconds-header-notification-icon-error",
+                          children: /* @__PURE__ */ jsx(SVG.Bell, {})
+                        }
+                      )
                     }
                   ),
                   state.toggles.notification && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
@@ -14737,7 +14784,7 @@ const Header = ({
               IconButton,
               {
                 style: { paddingRight: 0 },
-                className: "hamburger-icon-btn",
+                className: "sixseconds-header-hamburger-icon-btn",
                 onClick: () => setState((p) => ({ ...p, toggles: { ...p.toggles, dropDownMenu: !p.toggles.dropDownMenu } })),
                 children: /* @__PURE__ */ jsx(MenuIcon, { style: { width: "1em", height: "1em" } })
               }
@@ -14862,7 +14909,7 @@ function LabeledInput({
     )
   ] });
 }
-const ButtonStyled = styled("div")(() => ({
+const ButtonStyled = styled$1("div")(() => ({
   "& .invite": {
     background: "#007FC0",
     color: "#fff",