:focus {
    outline: none;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
/* 
    Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
    A quick fix is to change .side-menu to 

    -> position:absolute
    
    and uncomment the code below.
    You also need to uncomment 
    
    -> <div class="absolute-wrapper"> </div> in the html file

    you also need to tweek the animation. Just uncomment the code in that section
    --------------------------------------------------------------------------------------------------------------------
    If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
    This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/



.absolute-wrapper{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
} 

.side-menu {
    position: fixed;
    width: 300px;
    top:70px;
    bottom: 0px;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
    z-index: 1010;
    border-top: 1px solid #e7e7e7
}
.side-menu .navbar {
    border: none;
}

.side-menu .navbar-nav .active a {
    background-color: transparent;
    margin-right: -1px;
    border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
    display: block;
    width: 100%;
    border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
    padding: 10px;
}
.side-menu .navbar-nav li a .glyphicon {
    padding-right: 10px;
}
.side-menu li.dropdown-menu2 {
    border: 0;
    margin-bottom: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}
.side-menu li.dropdown-menu2 .caret {
    float: right;
    margin: 9px 5px 0;
}
.side-menu li.dropdown-menu2 .indicator {
    float: right;
}
.side-menu li.dropdown-menu2 > a {
    border-bottom: 1px solid #e7e7e7;
}
.side-menu li.dropdown-menu2 .panel-body {
    padding: 0;
    background-color: #f3f3f3;
}
.side-menu li.dropdown-menu2 .panel-body .navbar-nav {
    width: 100%;
}
.side-menu li.dropdown-menu2 .panel-body .navbar-nav li {
    /* padding-left: 15px;*/
    border-bottom: 1px solid #e7e7e7;
}
.side-menu li.dropdown-menu2 .panel-body .navbar-nav li a {
    padding-left: 30px; 
}

.side-menu li.dropdown-menu2 .panel-body .navbar-nav li:last-child {
    border-bottom: none;
}
.side-menu li.dropdown-menu2 .panel-body .panel > a {
    margin-left: -20px;
    padding-left: 35px;
}
.side-menu li.dropdown-menu2 .panel-body .panel-body {
    margin-left: -15px;
}
.side-menu li.dropdown-menu2 .panel-body .panel-body li {
    padding-left: 30px;
}
.side-menu li.dropdown-menu2 .panel-body .panel-body li:last-child {
    border-bottom: 1px solid #e7e7e7;
}
.navbar-nav{
    margin: 0;
    float:none;

}

/* Main body section */
.side-body {
    margin-left: 300px;
    margin-top: 50px;
}

.scroll-cointainer{
    height: 100%; 
    width: 100%; 
    border: 0px solid blue; 
    overflow-x: hidden
}
.user-name {
    border-bottom: 1px solid #ccc; 
    height: 49px;
    line-height: 49px; 
    text-align: left;
    padding-left: 10px
}
.side-menu .user-name {
    display:none;
}
/* small screen */


@media (max-width: 480px) {
    .side-body {

        margin-top:0px !important;
    }

}
@media (max-width: 768px) {
    .side-menu {
        /*
        position: fixed;
        width: 100%;
        height: 0;
        border-right: 0;
        border-bottom: 1px solid #e7e7e7;
        */
        top:0px;
        left: -300px;
    }
    .side-menu .user-name {
        display:block;
    }

    .body-in {
        overflow: hidden;

    }



    .slide-in {
        -moz-animation: slide-in 300ms forwards;
        -o-animation: slide-in 300ms forwards;
        -webkit-animation: slide-in 300ms forwards;
        animation: slide-in 300ms forwards;
        -webkit-transform-style: flat;
        transform-style: flat;
    }

    .slide-out {
        -moz-animation: slide-out 300ms forwards;
        -o-animation: slide-out 300ms forwards;
        -webkit-animation: slide-out 300ms forwards;
        animation: slide-out 300ms forwards;
        -webkit-transform-style: flat;
        transform-style: flat;
    }

    .background-in {
        position: fixed ; 
        top:0px  ; 
        left: 0px  ;
        right: 0px  ; 
        bottom: -100px  ; 
        z-index: 1005;
        display: block;

        -moz-animation: background-in 300ms forwards;
        -o-animation: background-in 300ms forwards;
        -webkit-animation: background-in 300ms forwards;
        animation: background-in 300ms forwards;
        -webkit-transform-style: flat;
        transform-style: flat; 
    }

    .background-out {
        position: fixed ; 
        top:0px  ; 
        left: 0px  ;
        right: 0px  ; 
        bottom: -100px  ; 
        z-index: 1005;

        -moz-animation: background-out 300ms forwards;
        -o-animation: background-out 300ms forwards;
        -webkit-animation: background-out 300ms forwards;
        animation: background-out 300ms forwards;
        -webkit-transform-style: flat;
        transform-style: flat; 
    }

    @-moz-keyframes slide-in {
        0% {
            left: -300px;
        }
        100% {
            left: 0px;
        }
    }
    @-webkit-keyframes slide-in {
        0% {
            left: -300px;
        }
        100% {
            left: 0px;
        }
    }
    @keyframes slide-in {
        0% {
            left: -300px;
        }
        100% {
            left: 0px;
        }
    }

    /******/

    @-moz-keyframes slide-out {
        0% {
            left: 0px;
        }
        100% {
            left: -300px;
        }
    }

    @-webkit-keyframes slide-out {
        0% {
            left: 0px;
        }
        100% {
            left: -300px;
        }
    }

    @keyframes slide-out {
        0% {
            left: 0px;
        }
        100% {
            left: -300px;
        }
    }
    /************/



    @-moz-keyframes background-in {
        0% {
            background-color: rgba(0,0,0,0);
        }
        100% {
            background-color: rgba(0,0,0,0.5);
        }
    }

    @-webkit-keyframes background-in {
        0% {
            background-color: rgba(0,0,0,0);
        }
        100% {
            background-color: rgba(0,0,0,0.5);
        }
    }

    @keyframes background-in {
        0% {
            background-color: rgba(0,0,0,0);
        }
        100% {
            background-color: rgba(0,0,0,0.5);
        }
    }   

    /************/
    @-moz-keyframes background-out {
        0% {
            background-color: rgba(0,0,0,0.5); 
        }
        100% { 
            background-color: rgba(0,0,0,0);
        }
    }
    @-webkit-keyframes background-out {
        0% {
            background-color: rgba(0,0,0,0.5); 
        }
        100% { 
            background-color: rgba(0,0,0,0);
        }
    }
    @keyframes background-out {
        0% {
            background-color: rgba(0,0,0,0.5); 
        }
        100% { 
            background-color: rgba(0,0,0,0);
        }
    }  
    .side-body {
        margin-left: 0px;
        margin-top:20px;
    }

    /* Hamburger */
    .navbar-toggle {
        border: 0;
        float: left;
        padding: 18px;
        margin: 0;
        border-radius: 0;
        background-color: #f3f3f3;
    } 
    /* Dropdown tweek */
    li.dropdown-menu2 .panel-body .navbar-nav {
        margin: 0;
    }
}