.nav-esr {
    color: #666666;
    margin-top: 28px;
    margin-left: 20px;
    line-height: 1em;
}

    .nav-esr a {
        color: #666666;
        text-decoration: none;
    }

    .nav-esr ul, 
    .nav-esr li {
        list-style: none;
        padding-left: 0.75em;
        margin: 8px 0px;
    }

        .nav-esr li.active,
        .nav-esr li.active > a { 
            color: #3a679e !important;
            font-weight: bold;
        }
    
        .nav-esr li[aria-expanded="true"] > .bullet {
            background-image: url('../Content/Images/Controls/list-bullet-grey-expanded.png');
        }

        .nav-esr li:not([aria-expanded="true"]) > ul{
            display: none;
        }

        .nav-esr li.without-children > .bullet { 
            visibility: hidden;
        }

        .nav-esr li > .bullet {
            border: 0 none;
            background-color: transparent;
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-left: -20px;
            background-position: center;
            background-repeat: no-repeat;
            background-image: url('../Content/Images/Controls/list-bullet-grey.png');
        }

     /* This must come last so that the rules are applied over others */
    .nav-esr > ul {
        /* Line up with header and footer images */
        padding-left: calc(33px - 0.75em);
    }

@media screen and (max-width: 720px) {
    /* Reduce left margin for small screens */
    .nav-esr > ul {
        padding-left: calc(10px - 0.75em);
    }
}