﻿@media screen and (min-width: 699px)
{
    .MenuForMobile
    {
        display: none;
    }


    .MenuForPC
    {
        display: block;
    }

    .Menu ul
    {
        list-style-type: none;
        list-style: none;
        margin: 0;
        padding: 0;
        /*position: relative;*/
        background-color: #2f4050;
        z-index: 9999;
    }

    .Menu li
    {
        /*padding: 15px;*/
        /*margin-top: 15px;
        margin-bottom: 15px;*/
        color: white;
        align-items: center;
        overflow: hidden;
    }

    .Menu ul > li:hover
    {
        cursor: pointer;
        border-left: 4px solid #5479f7;
        background-color: #243746;
        color: white;
    }

    .Menu ul .HasSubMenuIcon
    {
        display: none !important;
        color: white;
    }

    .Menu ul .MenuItemDiv
    {
        padding: 20px;
    }

    .Menu .LogoWhite
    {
        transition: all 0.5s ease;
        content: url('../Images/Logos/DEWhite.png');
        height: 30px;
        text-align: center;
    }

    .Menu .UserProfile
    {
        display: none;
    }

    .ChildMenu
    {
        z-index: 9999;
        list-style-type: none;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        display: none;
        position: absolute;
        min-width: 250px;
        left: 99%;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }


        .ChildMenu > li
        {
            margin-top: 0 !important;
            color: white;
        }


        .ChildMenu .MenuItemDiv
        {
            padding: 10px !important;
        }

        .ChildMenu .HasSubMenuIcon
        {
            display: block !important;
        }

        .ChildMenu .MenuItemName
        {
            display: block;
            color: white;
            padding-left: 20px;
            text-align: left;
        }

        .ChildMenu > li:hover
        {
            cursor: pointer;
            background: #f5f5f5;
        }

        .Menu ul li:hover > ul,
        .ChildMenu li:hover > ul
        {
            display: inline-block;
        }

    .MenuIcon
    {
        padding-left: 5px;
    }

    .MenuItemName
    {
        display: none;
        color: #788386;
        padding-left: 20px;
        text-align: left;
    }

    .MenuExpanded
    {
        transition: width 0.5s ease;
        min-width: 200px;
        display: block;
    }

        .MenuExpanded > li:hover > .MenuItemName
        {
            cursor: pointer;
            color: #528cf6;
            background: #ddf3ff;
            border-radius: 5px;
        }

        .MenuExpanded .HasSubMenuIcon
        {
            display: block !important;
        }

        .MenuExpanded .MenuItemName
        {
            display: block !important;
            color: white;
        }

        .MenuExpanded .LogoWhite
        {
            content: url('../Images/Logos/DEWhiteLogoWithText.png');
            height: 30px;
        }

        .MenuExpanded .UserProfile
        {
            display: block;
            text-align: center;
        }

        .MenuExpanded .UserPhoto
        {
            height: 70px;
        }



    .MenuSmallLogo
    {
        background: url('../Images/Logos/01.jpg');
        background-size: 50%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .MenuLongLogo
    {
        background: url('../Images/Logos/WithText.png');
        background-size: 45%;
        background-position: left;
        background-repeat: no-repeat;
        margin-left: 12px;
    }
}
