sixseconds-modules 1.6.195 → 2.0.2

package/dist/components/header/index.d.ts

@@ -2,9 +2,12 @@ import { IHeaderProps } from './type';
 /**
  * Public Header export.
  *
- * Wraps HeaderInner with MuiProvider so that:
- *  1. The Emotion cache is created synchronously — SSR-safe, no `dynamic({ ssr: false })` needed.
- *  2. All MUI class names are prefixed with `sixseconds-modules-` preventing conflicts.
- *  3. Emotion styles are injected into a scoped cache, isolating them from the host app.
+ * Wraps HeaderInner in a Shadow DOM boundary (`ShadowIsland`) so that:
+ *  1. The host application's CSS physically cannot cross into the header — it
+ *     always renders with only its own styling, in every app it is embedded in.
+ *  2. The header's own styles (Emotion + stylesheet) stay inside the shadow root
+ *     and never leak out into the host document.
+ *  3. MUI overlays (dialogs, tooltips) are portalled back into the shadow root,
+ *     so they are isolated too.
  */
 export declare const Header: (props: IHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs.js

@@ -7,11 +7,12 @@ const axios = require("axios");
 const Cookies = require("js-cookie");
 const createCache = require("@emotion/cache");
 const react = require("@emotion/react");
-const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const client = require("react-dom/client");
 const MenuIcon = require("@mui/icons-material/Menu");
+const material = require("@mui/material");
 const CloseIcon = require("@mui/icons-material/Close");
 const toast = require("react-hot-toast");
-const styles = require("@mui/material/styles");
 const VisibilityOffIcon = require("@mui/icons-material/VisibilityOff");
 const KeyboardArrowDownIcon = require("@mui/icons-material/KeyboardArrowDown");
 const LanguageIcon = require("@mui/icons-material/Language");
@@ -6239,7 +6240,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()
@@ -12872,27 +12873,72 @@ const IMAGES = {
   Us,
   DefaultLang
 };
-const isolatedTheme = material.createTheme({
-  typography: {
-    fontFamily: "'Inter', sans-serif"
-  }
-});
-function createEmotionCache() {
-  const isBrowser = typeof document !== "undefined";
-  if (!isBrowser) {
-    return createCache({ key: "sixseconds" });
-  }
-  const metaTag = document.querySelector('meta[name="sixseconds-insertion-point"]');
-  const insertionPoint = metaTag || void 0;
-  return createCache({
-    key: "sixseconds",
-    insertionPoint,
-    prepend: !insertionPoint
-  });
-}
-function MuiProvider({ children }) {
-  const cacheRef = React.useRef(createEmotionCache());
-  return /* @__PURE__ */ jsxRuntime.jsx(react.CacheProvider, { value: cacheRef.current, children: /* @__PURE__ */ jsxRuntime.jsx(material.ThemeProvider, { theme: isolatedTheme, children }) });
+const styleText = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");\n\n/* ==========================================================================\n   Style isolation — keep the header looking the same in every host app.\n\n   Two layers work together (see providers/shadowIsland.tsx):\n     1. `:host`  — the Shadow DOM boundary reset. Inherited properties\n        (font, color, line-height, letter-spacing, text-align, …) are the\n        only things that cross a shadow boundary, so we neutralise them once\n        here and re-establish our own baseline. Host author rules cannot\n        reach past the boundary at all.\n     2. `.sixseconds-header-root` — a defensive reset for the light DOM. It\n        applies when this stylesheet is used outside the shadow root (e.g. a\n        consumer imports `sixseconds-modules/styles`, or during the brief\n        pre-mount window), so leaked host rules for bare tags (button, a, ul,\n        li, *, resets) get reverted before our styles apply.\n\n   IMPORTANT — specificity/order contract:\n     `.sixseconds-header-root, .sixseconds-header-root *` is specificity\n     (0,1,0), identical to an Emotion-generated class. This reset is declared\n     ABOVE all component rules, so at equal specificity our own MUI/Emotion\n     styles (injected/declared later) always win. Never raise this reset to\n     an element-qualified selector or add `!important` — that would beat the\n     header\'s own styling. `all: revert` also intentionally leaves custom\n     properties, `direction` and `unicode-bidi` untouched, so RTL keeps\n     working.\n   ========================================================================== */\n\n:host {\n  /* `!important` is load-bearing: for NORMAL declarations the outer (document)\n     tree wins the shadow cascade, so a host page rule that happens to match our\n     host element (e.g. `div { font-family: … }`) would otherwise beat this reset\n     and re-leak inherited props across the boundary. `!important` makes the inner\n     (shadow) tree win. `all` intentionally leaves `direction`/`unicode-bidi` and\n     custom properties untouched, so RTL context still inherits (the header has\n     `[dir=\'rtl\']` handling) — this is desired. Our isolated MUI theme does not\n     enable CSS variables, so no `--mui-*` host var is consumed inside the tree. */\n  all: initial !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  font-family: "Inter", sans-serif !important;\n  color: #1a1c1e !important;\n  line-height: 1.5 !important;\n  text-align: start !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n.sixseconds-header-root,\n.sixseconds-header-root *,\n.sixseconds-header-root *::before,\n.sixseconds-header-root *::after {\n  all: revert;\n  box-sizing: border-box;\n}\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: "Inter", 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: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\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: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\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: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\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: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\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.sixseconds-header-root .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  .sixseconds-header-root .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}\n';
+const EMOTION_KEY = "sixseconds";
+const FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";
+const SHADOW_STYLES = styleText.replace(/@import\s+url\([^)]*\)\s*;?/gi, "");
+const ensureFontRegistered = () => {
+  if (typeof document === "undefined") return;
+  if (document.querySelector("link[data-sixseconds-font]")) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = FONT_HREF;
+  link.setAttribute("data-sixseconds-font", "true");
+  document.head.appendChild(link);
+};
+function ShadowIsland({ children }) {
+  const hostRef = React.useRef(null);
+  const stateRef = React.useRef(null);
+  const teardownRef = React.useRef(null);
+  React.useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    if (teardownRef.current !== null) {
+      clearTimeout(teardownRef.current);
+      teardownRef.current = null;
+    }
+    if (!stateRef.current) {
+      ensureFontRegistered();
+      const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+      shadow.replaceChildren();
+      const styleEl = document.createElement("style");
+      styleEl.setAttribute("data-sixseconds-styles", "true");
+      styleEl.textContent = SHADOW_STYLES;
+      const emotionRoot = document.createElement("div");
+      emotionRoot.setAttribute("data-sixseconds-emotion", "true");
+      const mount = document.createElement("div");
+      mount.setAttribute("data-sixseconds-mount", "true");
+      shadow.append(styleEl, emotionRoot, mount);
+      const cache = createCache({ key: EMOTION_KEY, container: emotionRoot, prepend: true });
+      stateRef.current = { root: client.createRoot(mount), cache };
+    }
+    stateRef.current.root.render(/* @__PURE__ */ jsxRuntime.jsx(IsolatedProviders, { cache: stateRef.current.cache, children }));
+    return () => {
+      teardownRef.current = setTimeout(() => {
+        stateRef.current?.root.unmount();
+        stateRef.current = null;
+        teardownRef.current = null;
+      }, 0);
+    };
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: hostRef, className: "sixseconds-header-shadow-host", suppressHydrationWarning: true });
+}
+function IsolatedProviders({ cache, children }) {
+  const overlayRef = React.useRef(null);
+  const theme = React.useMemo(
+    () => styles.createTheme({
+      typography: { fontFamily: "'Inter', sans-serif" },
+      components: {
+        MuiModal: { defaultProps: { container: () => overlayRef.current } },
+        MuiPopper: { defaultProps: { container: () => overlayRef.current } }
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.CacheProvider, { value: cache, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: overlayRef, className: "sixseconds-header-overlays" })
+  ] }) });
 }
 const DangerDialog = ({
   open,
@@ -15007,7 +15053,7 @@ const HeaderInner = ({
     /* @__PURE__ */ jsxRuntime.jsx(ViewProfileDialog, { isOpen: state.toggles.viewProfile, userData, setInitialState: setState })
   ] });
 };
-const Header = (props) => /* @__PURE__ */ jsxRuntime.jsx(MuiProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderInner, { ...props }) });
+const Header = (props) => /* @__PURE__ */ jsxRuntime.jsx(ShadowIsland, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderInner, { ...props }) });
 function LabeledInput({
   label,
   sx,
@@ -15340,7 +15386,7 @@ const PreviousLoginBannerInner = ({ t: t2, router, sx }) => {
     }
   );
 };
-const PreviousLoginBanner = (props) => /* @__PURE__ */ jsxRuntime.jsx(MuiProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(PreviousLoginBannerInner, { ...props }) });
+const PreviousLoginBanner = (props) => /* @__PURE__ */ jsxRuntime.jsx(ShadowIsland, { children: /* @__PURE__ */ jsxRuntime.jsx(PreviousLoginBannerInner, { ...props }) });
 const App = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -15551,15 +15597,3 @@ exports.SVG = SVG;
 exports.Warning = Warning;
 exports.default = App;
 //# sourceMappingURL=index.cjs.js.map
-(function() {
-  "use strict";
-  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;200;300;400;500;600;700;800;900&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: "Inter", 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: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\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: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\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: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\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: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\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.sixseconds-header-root .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  .sixseconds-header-root .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) {
-    console.error("vite-plugin-css-injected-by-js", e);
-  }
-})();