/* Unified styling for selected items + parents of selected sub-items */
:root {
    --menu-blue: #0078d7;
    --menu-fg: #fff;
    --icon-hover-scale: 1.125;
}



.menuItem {
    min-width: 220px;
    font-family: 'Open Sans';
    border: none;
    border-width: 0px;
    background-color: #d3f0fe;
}

/*#d3f0fe   extra light GL Blue*/

/* Directly selected items (Home, etc.) */
.MainMenu .dxm-item.dxm-selected,
.MainMenu .dxm-item.dxm-selected > .dxm-content,
.MainMenu .dxm-item.dxm-selected > a.dxm-content,
.MainMenu .dxm-item.dxm-current,
.MainMenu .dxm-item.dxm-current > .dxm-content,
.MainMenu .dxm-item.dxm-current > a.dxm-content,
/* Parent items when a submenu page is active (class added server-side) */
.MainMenu .dxm-item.has-selected-child,
.MainMenu .dxm-item.has-selected-child > .dxm-content,
.MainMenu .dxm-item > .dxm-content.has-selected-child {
    background-color: var(--menu-blue) !important;
    background-image: none !important;
    border-color: var(--menu-blue) !important;
    color: var(--menu-fg) !important;
}

    /* Paint the little arrow cell too */
    .MainMenu .dxm-item.dxm-selected > .dxm-popOut,
    .MainMenu .dxm-item.dxm-current > .dxm-popOut,
    .MainMenu .dxm-item.has-selected-child > .dxm-popOut,
    .MainMenu .dxm-item > .dxm-content.has-selected-child + .dxm-popOut {
        background-color: var(--menu-blue) !important;
        border-color: var(--menu-blue) !important;
    }

    /* Keep blue on hover for both cases */
    .MainMenu .dxm-item.dxm-selected.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.dxm-current.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.has-selected-child.dxm-hovered > .dxm-content,
    .MainMenu .dxm-item.dxm-hovered > .dxm-content.has-selected-child {
        background-color: var(--menu-blue) !important;
    }

    /* Text & icons (your icons are black → make them white on blue) */
    .MainMenu .dxm-item.dxm-selected .dxm-contentText,
    .MainMenu .dxm-item.dxm-current .dxm-contentText,
    .MainMenu .dxm-item.has-selected-child .dxm-contentText,
    .MainMenu .dxm-item > .dxm-content.has-selected-child .dxm-contentText {
        color: var(--menu-fg) !important;
    }

    .MainMenu .dxm-item.dxm-selected img.dxm-image,
    .MainMenu .dxm-item.dxm-current img.dxm-image,
    .MainMenu .dxm-item.has-selected-child img.dxm-image,
    .MainMenu .dxm-item > .dxm-content.has-selected-child img.dxm-image {
        filter: brightness(0) invert(1);
    }
    /* Make the submenu drop-down indicator (arrow) white when active */

    /* Top-level: selected item OR parent of selected submenu */
    .MainMenu .dxm-item.dxm-selected > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.dxm-current > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.dxm-checked > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item.has-selected-child > .dxm-popOut .dxm-pImage,
    .MainMenu .dxm-item > .dxm-content.has-selected-child + .dxm-popOut .dxm-pImage {
        filter: brightness(0) invert(1);
        
    }

/* Keep it white on hover/focus too */
.MainMenu .dxm-item.dxm-hovered.dxm-selected > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.dxm-hovered.has-selected-child > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
}

/* Inside popup submenus (for deeper levels) */
.dxm-popup .dxm-item.dxm-selected > .dxm-popOut .dxm-pImage,
.dxm-popup .dxm-item.dxm-current > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
    
}
/* Smooth transition (optional) */
.MainMenu img.dxm-image,
.MainMenu .dxm-popOut .dxm-pImage {
    transition: filter .15s ease;
    transform-origin: center center;
    will-change: transform;
}

/* Hover: make icons white */
.MainMenu .dxm-item.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-hovered > .dxm-popOut .dxm-pImage,
.dxm-popup .dxm-item.dxm-hovered img.dxm-image,
.dxm-popup .dxm-item.dxm-hovered > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
    transform: scale(var(--icon-hover-scale));
    
}

/* Keep selected items white on hover too (no “flip back”) */
.MainMenu .dxm-item.dxm-selected.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-current.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.has-selected-child.dxm-hovered img.dxm-image,
.MainMenu .dxm-item.dxm-selected.dxm-hovered > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.dxm-current.dxm-hovered > .dxm-popOut .dxm-pImage,
.MainMenu .dxm-item.has-selected-child.dxm-hovered > .dxm-popOut .dxm-pImage {
    filter: brightness(0) invert(1);
    
}



.gllightblue {
    background: #54c1f1;
    color: #fff;
}

.gldarkblue {
    background: #25638d;
    color: #fff;
}

.dxmLite_Moderno .dxm-horizontal .dxm-item, .dxmLite_Moderno .dxm-vertical .dxm-item {
    background: #d3f0fe;
}

.dxmLite_Moderno .dxm-item .dxm-SubMenu {
    background: #d3f0fe;
}

.dxmLite_Moderno .dxm-item .dxm-noSubMenu {
    background: #d3f0fe;
}

/* Dropdown submenu background */
.dxmLite_Moderno .dxm-popup {
    background-color: #d3f0fe !important;
    border: none;
}

    /* Submenu item background and text color */
    .dxmLite_Moderno .dxm-popup .dxm-item {
        background-color: #d3f0fe !important;
        color: #fff;
    }

        /* Hover effect for submenu items */
        .dxmLite_Moderno .dxm-popup .dxm-item:hover {
            background-color: #25638d !important;
        }

/* Dropdown submenu background */
.dxmLite_Moderno .dxm-popup {
    background-color: #d3f0fe !important;
    border: none;
    padding: 0; /* Remove padding for the submenu */
    box-sizing: border-box; /* Include padding in the width calculation */
    overflow: hidden; /* Prevent content from overflowing */
}

    /* Submenu item background and text color */
    .dxmLite_Moderno .dxm-popup .dxm-item {
        background-color: #d3f0fe !important;
        color: #000; /* Ensure text is black */
        border: none; /* Remove borders */
        box-shadow: none; /* Remove shadows */
    }

        /* Hover effect for submenu items */
        .dxmLite_Moderno .dxm-popup .dxm-item:hover {
            background-color: #2196F3 !important;
        }

    /* Submenu separator styling */
    .dxmLite_Moderno .dxm-popup .dxm-separator {
        background-color: #25638d !important; /* Set the background color */
        height: 2px !important; /* Set a consistent thickness */
        margin: 0 !important; /* Remove any margins */
        padding: 0 !important; /* Remove any padding */
        width: 100% !important; /* Ensure it spans the full width */
        display: block !important; /* Ensure it behaves like a block element */
        box-sizing: border-box; /* Include padding and borders in the width calculation */
        border: none !important; /* Remove any borders */
    }

/* Ensure all menu text is black */
.MainMenu .dxm-item,
.MainMenu .dxm-item .dxm-content,
.MainMenu .dxm-item .dxm-contentText,
.dxm-popup .dxm-item,
.dxm-popup .dxm-item .dxm-content,
.dxm-popup .dxm-item .dxm-contentText {
    color: #25638d !important; /* Force text color to black */
}

/* Top-level menu container */
/*.MainMenu {
    padding: 0 !important;*/ /* Remove padding */
    /*margin: 0 !important;*/ /* Remove margins */
    /*box-sizing: border-box;*/ /* Include padding and borders in the width calculation */
    /*background-color: #d3f0fe !important;*/ /* Ensure the background matches the separator */
/*}*/

    /* Top-level separator styling */
    /*.MainMenu .dxm-separator {
        background-color: #d3f0fe !important;*/ /* Set the background color */
        /*height: 2px !important;*/ /* Set a consistent thickness */
        /*margin: 0 !important;*/ /* Remove any margins */
        /*padding: 0 !important;*/ /* Remove any padding */
        /*width: 100% !important;*/ /* Ensure it spans the full width */
        /*display: block !important;*/ /* Ensure it behaves like a block element */
        /*box-sizing: border-box;*/ /* Include padding and borders in the width calculation */
        /*border: none !important;*/ /* Remove any borders */
    /*}*/

    /* Remove borders or shadows from top-level menu items */
    /*.MainMenu .dxm-item {
        border: none !important;*/ /* Remove borders */
        /*box-shadow: none !important;*/ /* Remove shadows */
    /*}*/

.MainMenu {
    background-color: #d3f0fe !important;
}

    .MainMenu .dxm-item {
        display: block !important;
        visibility: visible !important;
        color: black !important;
    }

    /* Reverse the color of all menu images */
    .MainMenu img.dxm-image,
    .dxm-popup img.dxm-image {
        filter: invert(1) !important; /* Invert the colors */
        transition: filter 0.2s ease; /* Optional: Add a smooth transition */
    }

        /* Reverse the color of menu images on hover */
        .MainMenu img.dxm-image:hover,
        .dxm-popup img.dxm-image:hover {
            filter: invert(1) !important;
        }