/* =============================================================================================================== 
New Mobile Nav Styling (Changes pushed live on 30-mar-2021)                         
================================================================================================================ */
    
    /* ---------------------------------------------------
    Mobile Navigation Menu 
    --------------------------------------------------- */
    
    .mobile-navigation-menu {
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 101;
        display: none;
        background-color: transparent;
        transition: all 300ms ease-in-out;
    }
    
    .mobile-navigation-menu.open {
        display: flex;
        background-color: rgba(33, 33, 33, 0.4);
    }
    
    /* ---------------------------------------------------
    Menu Panel & Title
    --------------------------------------------------- */
    
    .menu-panel {
        position: relative;
        width: 55%;
        background-color: #ffffff;
        box-shadow: 0px 0px 6px 3px rgb(33 33 33 / 45%);
        overflow-y: scroll;
        left: -100%;
        transition: all 300ms ease-in-out;
    }
    
    .mobile-navigation-menu.open .menu-panel {
        animation: mobile-menu-open 300ms;
        left: 0;
    }
    
    .menu-panel .menu-panel-title {
        display: flex;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #E0E0E0;
        align-items: center;
    }
    
    .menu-panel-title .h5 {
        margin-bottom: 0;
        margin-left: 0.5rem;
        cursor: default;
    }
    
    /* ---------------------------------------------------
    Module Navigation List
    --------------------------------------------------- */
    
    .menu-panel #mobile-nav-list {
        flex-direction: column;
        padding: 1rem 0;
        transition: all 200ms ease-in;
    }
    
    #mobile-nav-list .nav-item {
        padding: 0.5rem 1.25rem;
        transition: all 200ms ease-in;
    }
    
    #mobile-nav-list .nav-item.current {
        background-color: var(--primary);
        background-color: rgba(94, 32, 125, 0.8);
        color: #fff;
    }
    
    #mobile-nav-list .nav-item.current a {
        color: #fff;
    }
    
    #mobile-nav-list .nav-item:hover {
        background-color: var(--primary);
        background-color: rgba(94, 32, 125, 0.8);
    }
    
    #mobile-nav-list .nav-item a {
        display: block;
        width: 100%;
        height: 100%;
        color: #616161;
        text-decoration: none;
    }
    
    #mobile-nav-list .nav-item:hover a {
        color: #ffffff;
    }
    
    #mobile-nav-list .nav-item svg {
        width: 2rem;
    }
    
    #mobile-nav-list .nav-item svg .module-icon {
        stroke: #ffffff;
        stroke-width: 2px;
    }
    
    #mobile-nav-list .nav-item a .menu-text {
        margin-left: 0.5rem !important;
    }
    
    /* ---------------------------------------------------
    Search for Mobile
    --------------------------------------------------- */
    
    #mobile-search {
        display: none;
    }
    
    /* ---------------------------------------------------
    Animations
    --------------------------------------------------- */
    
    @keyframes mobile-menu-open {
        
        0%   {
            display: flex;
            left: -100%;
        }
        
        25%  {
            left: -75%;
        }
        
        50%  {
            left: -50%;
        }
        
        75%  {
            left: -25%;
        }
        
        100% {
            left: 0%;
        }
        
    }