:root { --megaMenuNavBackground: #5f6f74; --megaMenuNavHoverBackground: #6f8085; --megaMenuNavOpenBackground: #728388; --megaMenuNavTextColor: #ffffff; --megaMenuNavDividerColor: rgba(255, 255, 255, 0.22); --megaMenuTopNavHeight: 34px; --megaMenuPanelWidth: 1280px; --megaMenuPanelShadow: 0 14px 28px rgba(0, 0, 0, 0.18); --megaMenuZIndex: 6000; --megaMenuNavInlinePadding: 8px; --megaMenuItemInlinePadding: 12px; --megaMenuColumnPaddingX: 18px; --megaMenuColumnPaddingY: 16px; --megaMenuLinkRadius: 2px; --megaMenuColumnCount: 4 } .skip-link { position: absolute; top: -40px; left: 6px; background: var(--themePrimary, [theme:themePrimary, default: #0078d7]); color: var(--white, [theme:white, default: #fff]); padding: 8px 12px; text-decoration: none; font-weight: 600; border-radius: 4px; z-index: 10000; transition: top .2s ease } .skip-link:focus { top: 6px } #CustomNavigation { position: relative; overflow: visible; z-index: var(--megaMenuZIndex, 6000) } .mega-menu-status { padding: 8px 14px; border-bottom: 1px solid var(--neutralLight, [theme:neutralLight, default: #eaeaea]); background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); font-size: 13px } .mega-menu-main { position: relative; width: 100%; background-color: #5f6f74; background-color: var(--megaMenuNavBackground, #5f6f74); border-bottom: 1px solid rgba(0, 0, 0, .18); box-shadow: none; overflow: visible; z-index: var(--megaMenuZIndex, 6000) } .mega-menu-main>ul, .mega-menu-top-level { margin: 0 auto; max-width: var(--megaMenuPanelWidth, 1280px); background-color: inherit; width: 100%; box-sizing: border-box; list-style: none; padding: 0 var(--megaMenuNavInlinePadding, 8px); padding-inline-start: var(--megaMenuNavInlinePadding, 8px); display: -ms-flexbox; display: flex; -ms-flex-align: stretch; align-items: stretch; -ms-flex-pack: start; justify-content: flex-start; gap: 0 } .mega-menu-main>ul>li, .mega-menu-top-item { position: static; display: -ms-flexbox; display: flex; -ms-flex-align: stretch; align-items: stretch; -ms-flex: 0 0 auto; flex: 0 0 auto; border-right: 1px solid var(--megaMenuNavDividerColor, rgba(255, 255, 255, .22)) } .mega-menu-main>ul>li:last-child, .mega-menu-top-item:last-child { border-right: 0 } .mega-menu-main>ul>li>.menu-item-text, .mega-menu-main>ul>li>a, .menu-item-link, .menu-item-text { position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; min-height: var(--megaMenuTopNavHeight, 34px); padding: 0 var(--megaMenuItemInlinePadding, 12px); color: var(--megaMenuNavTextColor, #fff); font-size: 12px; font-weight: 400; line-height: 1; text-decoration: none; background: 0 0; border: 0; transition: background-color .14s ease, color .14s ease; outline: 0; white-space: nowrap } .menu-item-text { cursor: pointer } .menu-item-has-children::after { content: ''; width: 5px; height: 5px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-1px) rotate(45deg); transition: transform .14s ease } .menu-item-has-children[aria-expanded=true]::after { transform: translateY(1px) rotate(-135deg) } .mega-menu-top-item.is-active>a, .mega-menu-top-item.is-active>span, .menu-item-link.is-active, .menu-item-text.is-active { background: var(--megaMenuNavOpenBackground, #728388) } .mega-menu-top-item.is-current>a, .mega-menu-top-item.is-current>span, .menu-item-link.is-current, .menu-item-text.is-current { font-weight: 600 } .mega-menu-main>ul>li:hover>.menu-item-text, .mega-menu-main>ul>li:hover>a, .mega-menu-main>ul>li>a[aria-expanded=true], .mega-menu-main>ul>li>span[aria-expanded=true], .menu-item-link:hover, .menu-item-text:hover { color: var(--megaMenuNavTextColor, #fff); background: var(--megaMenuNavHoverBackground, #6f8085) } .mega-menu-main>ul>li>a[aria-expanded=true], .mega-menu-main>ul>li>span[aria-expanded=true] { background: var(--megaMenuNavOpenBackground, #728388) } .mega-menu-main>ul>li>.menu-item-text:focus, .mega-menu-main>ul>li>a:focus, .menu-item-link:focus, .menu-item-text:focus { color: var(--megaMenuNavTextColor, #fff); background: var(--megaMenuNavOpenBackground, #728388); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65) } .mega-menu { position: absolute; left: 0; right: 0; top: 100%; display: none; visibility: hidden; opacity: 0; background-color: #fff; background-color: var(--white, [theme:white, default: #fff]); background-image: none; mix-blend-mode: normal; border: 1px solid var(--neutralLight, [theme:neutralLight, default: #eaeaea]); border-top: 0; box-shadow: var(--megaMenuPanelShadow, 0 14px 28px rgba(0, 0, 0, .18)); max-height: calc(100vh - var(--megaMenuTopNavHeight, 34px)); isolation: isolate; overflow-y: auto; overflow-x: hidden; z-index: calc(var(--megaMenuZIndex, 6000) + 1); transition: opacity .16s ease, visibility .16s ease } .mega-menu-main>ul>li:hover .mega-menu, .mega-menu.js-open { visibility: visible; opacity: 1; display: block; background-color: #fff; background-color: var(--white, [theme:white, default: #fff]); background-image: none } .mega-menu-grid { max-width: var(--megaMenuPanelWidth, 1280px); background-color: inherit; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: (minmax(0, 1fr)) [var]; grid-template-columns: repeat(var(--megaMenuColumnCount, 4), minmax(0, 1fr)); gap: 0; -ms-grid-row-align: start; align-items: start } .mega-menu-category { min-width: 0; padding: var(--megaMenuColumnPaddingY, 16px) var(--megaMenuColumnPaddingX, 18px) 14px; border-right: 1px solid var(--neutralQuaternaryAlt, [theme:neutralQuaternaryAlt, default: #dadada]) } .mega-menu-grid>.mega-menu-category:last-child { border-right: 0 } .mega-menu-category-title, .mega-menu-category>h3 { margin: 0 0 10px; padding: 0; border: 0 } .mega-menu-category>h3>a, .mega-menu-category>h3>span { display: block; color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); font-size: 13px; font-weight: 600; line-height: 18px; text-decoration: none } .mega-menu-category.is-active>h3>a, .mega-menu-category.is-active>h3>span, .mega-menu-category>h3>a.is-active, .mega-menu-category>h3>span.is-active { color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]) } .mega-menu-category.is-current>h3>a, .mega-menu-category>h3>a.is-current { text-decoration: underline } .mega-menu-category>h3>a:hover { color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); text-decoration: underline } .mega-menu-category>h3>a:focus { background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); border-radius: 2px; box-shadow: 0 0 0 2px var(--themePrimary, [theme:themePrimary, default: #0078d7]); padding: 1px 4px; margin: -1px -4px } .mega-menu-category ul, .mega-menu-links { list-style: none; margin: 0; padding-inline-start: 0 } .mega-menu-category ul li, .mega-menu-links li { margin: 0 0 6px } .mega-menu-category ul li:last-child, .mega-menu-links li:last-child { margin-bottom: 0 } .mega-menu-category ul li a, .mega-menu-links li a { display: block; margin: 0; padding: 1px 2px; border-radius: var(--megaMenuLinkRadius, 2px); color: var(--neutralSecondary, [theme:neutralSecondary, default: #666]); font-size: 12px; font-weight: 400; line-height: 18px; text-decoration: none; transition: background-color .14s ease, color .14s ease, box-shadow .14s ease } .mega-menu-category ul li a.is-active, .mega-menu-category ul li.is-active>a, .mega-menu-links li a.is-active, .mega-menu-links li.is-active>a { color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]) } .mega-menu-category ul li a.is-current, .mega-menu-category ul li.is-current>a, .mega-menu-links li a.is-current, .mega-menu-links li.is-current>a { color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); font-weight: 600; text-decoration: underline } .mega-menu-category ul li a:hover, .mega-menu-links li a:hover { background: 0 0; color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); text-decoration: underline } .mega-menu-category ul li a:focus, .mega-menu-links li a:focus { background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); box-shadow: 0 0 0 2px var(--themePrimary, [theme:themePrimary, default: #0078d7]); outline: 0 } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } @media (max-width:1024px) { .mega-menu-grid { -ms-grid-columns: (minmax(200px, 1fr)) [auto-fit]; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) } .mega-menu-category { padding: 14px 16px 12px } } @media (max-width:767px) { .mega-menu-main>ul, .mega-menu-top-level { padding: 0 6px; padding-inline-start: 6px; -ms-flex-wrap: wrap; flex-wrap: wrap } .mega-menu-main>ul>li, .mega-menu-top-item { border-right: 0 } .mega-menu-main>ul>li>.menu-item-text, .mega-menu-main>ul>li>a, .menu-item-link, .menu-item-text { min-height: 36px; padding: 0 10px; font-size: 12px } .mega-menu { border-left: 0; border-right: 0 } .mega-menu-grid { -ms-grid-columns: 1fr; grid-template-columns: 1fr } .mega-menu-category { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--neutralQuaternaryAlt, [theme:neutralQuaternaryAlt, default: #dadada]) } .mega-menu-grid>.mega-menu-category:last-child { border-bottom: 0 } } @media (prefers-reduced-motion:reduce) { .mega-menu, .mega-menu-category ul li a, .mega-menu-links li a, .mega-menu-main>ul>li>.menu-item-text, .mega-menu-main>ul>li>a, .menu-item-has-children::after, .menu-item-link, .menu-item-text, .skip-link { transition: none } } @media (prefers-contrast:high) { .mega-menu-category ul li a:focus, .mega-menu-category>h3>a:focus, .mega-menu-links li a:focus, .mega-menu-main>ul>li>.menu-item-text:focus, .mega-menu-main>ul>li>a:focus, .menu-item-link:focus, .menu-item-text:focus { outline: 2px solid; outline-offset: 2px; box-shadow: none } }