﻿.nav-side-menu {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    position: fixed;
    top: 0px;
    width: 250px;
    height: 100%;
    color: #e1ffff;
}

    .nav-side-menu .brand {
        background-color: #23282e;
        line-height: 50px;
        display: block;
        text-align: center;
        font-size: 14px;
        padding: 15px 0;
    }

    .nav-side-menu .toggle-btn {
        display: none;
    }

    .nav-side-menu ul,
    .nav-side-menu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        line-height: 35px;
        cursor: pointer;
    }


        .nav-side-menu ul :not(collapsed) .arrow:before,
        .nav-side-menu li :not(collapsed) .arrow:before {
            font-family: FontAwesome;
            content: "\f078";
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            vertical-align: middle;
            float: right;
        }

        .nav-side-menu ul .active,
        .nav-side-menu li .active {
            border-left: 3px solid #5ad13d;
            background-color: #343c45;
        }

.sub-level li {
    border-left: none !important;
    background-color: #343c45;
}


.nav-side-menu li .badge {
    margin-top: 8px;
    margin-right: 10px;
    font-size: 0.9em;
}


.nav-side-menu li {
    border-left: 3px solid #2e353d;
    border-bottom: 1px solid #23282e;
    padding-left: 10px;
}

    .nav-side-menu li.divider {
        min-height: 10px;
    }

        .nav-side-menu li.divider:hover {
            border-left: 3px solid #2e353d;
            background: none;
        }

    .nav-side-menu li a {
        text-decoration: none;
        color: #e1ffff;
        display: block;
    }


    .nav-side-menu li:hover {
        border-left: 3px solid #f28200;
        background-color: #4f5b69;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
    }

@media (max-width: 767px) {
    .nav-side-menu {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
    }

        .nav-side-menu .toggle-btn {
            display: block;
            cursor: pointer;
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 10 !important;
            padding: 3px 8px;
            background-color: #ffffff;
            color: #000;
            text-align: center;
            border-radius: 2px;
            font-size: 17px;
        }

    .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
    }
}

@media (min-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
        display: block;
    }
}

body {
    margin: 0px;
    padding: 0px;
}


.menu-logo {
    margin: auto;
    max-width: 300px;
}

/*
    angular ui bootstrap - 

    "Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application:"
*/
.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

.container {
    max-width: unset;
    /*width: 80%;*/
}

@media (min-width: 768px) {
    .container {
        width: auto;
        margin-left: 265px;
    }
}


/*::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}*/



/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #006699;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

    ::-webkit-scrollbar-thumb:window-inactive {
        background: #003F5D;
    }
