/* =========================================================
   ENGAGE HELIX DESKTOP MENU
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       1. TOP NAVIGATION
       Solutions, Products, Support, Company, etc.
       ----------------------------------------------------- */

    .sp-megamenu-parent > li > a,
    .sp-megamenu-parent > li > span {
        font-family: inherit !important;
        font-size: 17px !important;
        font-weight: 500 !important;
    }

    /* Make the top-level active section blue */
    .sp-megamenu-parent > li.active > a,
    .sp-megamenu-parent > li.active > span {
        color: #000000 !important;
    }


    /* -----------------------------------------------------
       2. ALL DROPDOWN ITEMS
       Includes links and Joomla separator headings
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > span:not(.sp-menu-badge) {
        position: relative;
        display: block;
        width: 100%;
        box-sizing: border-box;

        padding: 9px 12px !important;

        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;

        color: #ffffff !important;
        border-radius: 3px;

        transition:
            color 180ms ease,
            background-color 180ms ease,
            box-shadow 180ms ease;
    }


    /* -----------------------------------------------------
       3. NORMAL HOVER STATE
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > span:not(.sp-menu-badge) {
        background-color: #7d7d7d;
    }


    /* -----------------------------------------------------
       4. SPACE FOR ARROWS
       Only items with another submenu get extra right space
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child > span:not(.sp-menu-badge) {
        padding-right: 34px !important;
    }


    /* -----------------------------------------------------
       5. SUBMENU ARROWS
       Right-facing normally
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child > a::after,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child > span:not(.sp-menu-badge)::after {
        content: "\203A" !important;

        position: absolute !important;
        right: 14px !important;
        top: 50% !important;

        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;

        font-family: Arial, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 1 !important;

        color: inherit !important;
        opacity: 0.85;

        transform: translateY(-50%) rotate(0deg) !important;
        transform-origin: center;

        transition:
            transform 180ms ease,
            opacity 180ms ease,
            color 180ms ease;
    }


    /* -----------------------------------------------------
       6. ROTATE ARROW DOWN WHILE SUBMENU IS OPEN
       The parent remains hovered while using its child menu
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child:hover > a::after,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.sp-has-child:hover > span:not(.sp-menu-badge)::after {
        transform: translateY(-50%) rotate(90deg) !important;
        opacity: 1;
    }


    /* -----------------------------------------------------
       7. NEVER SHOW ARROWS ON FINAL PRODUCT LINKS
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(.sp-has-child) > a::after,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(.sp-has-child) > span:not(.sp-menu-badge)::after {
        content: none !important;
        display: none !important;
    }


    /* -----------------------------------------------------
       8. HIGHLIGHT THE FULL ACTIVE PATH
       Example:
       Chassis > TDM Circuit Emulation > E1 Over IP
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > span:not(.sp-menu-badge),

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current > span:not(.sp-menu-badge),

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.active) > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.active) > span:not(.sp-menu-badge),

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.current) > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.current) > span:not(.sp-menu-badge) {
        color: #000000 !important;
        background-color: #858585 !important;
    }


    /* -----------------------------------------------------
       9. MAKE THE EXACT CURRENT PAGE MORE OBVIOUS
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown a[aria-current="page"] {
        color: #000000 !important;
        background-color: #9a9a9a !important;
        box-shadow: inset 3px 0 0 #000000 !important;
    }


    /* -----------------------------------------------------
       10. KEEP ACTIVE PATH BLUE DURING HOVER
       ----------------------------------------------------- */

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active:hover > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active:hover > span:not(.sp-menu-badge),

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.active):hover > a,
    .sp-megamenu-parent .sp-dropdown li.sp-menu-item:has(li.sp-menu-item.active):hover > span:not(.sp-menu-badge),

    .sp-megamenu-parent .sp-dropdown a[aria-current="page"]:hover {
        color: #000000 !important;
    }
    /* -----------------------------------------------------
       11. MENU CHANGE PADDING IN DROP DOWN
       ----------------------------------------------------- */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
    padding: 5px;
}
    /* -----------------------------------------------------
       12. CHANGE OFF CANVAS MENU BREAKPOINT
       ----------------------------------------------------- */
@media (max-width: 1400px) {

    #sp-menu .sp-megamenu-parent {
        display: none !important;
    }

    #sp-menu #offcanvas-toggler {
        display: flex !important;
    }
}

@media (min-width: 1401px) {

    #sp-menu .sp-megamenu-parent {
        display: flex !important;
    }

    #sp-menu #offcanvas-toggler {
        display: none !important;
    }
}
  /* Hide Sign In button at 1400px and below */
@media (max-width: 1400px) {
    #sp-header .header-modules .sp-sign-in {
        display: none !important;
    }
}
  
/* =========================================================
   13. FAST DROPDOWN - PURE FADE IN
   ========================================================= */

@media (min-width: 1401px) {

    #sp-header .sp-megamenu-parent
    .sp-has-child:hover > .sp-dropdown {
        animation: engageQuickFade 100ms ease-out 0ms both !important;
        animation-delay: 0ms !important;
    }

}

@keyframes engageQuickFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
}