/* Menu */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    background: #282733;
    color: #fff;
    transition: all 0.3s;
}

    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

    #sidebar a[data-toggle="collapse"] {
        position: relative;
    }

    #sidebar .sidebar-header {
        line-height: 85px;
        height: 85px;
        background: #201f2b;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #sidebar .sidebar-header strong {
            display: none;
        }

        #sidebar .sidebar-header img {
            width: 80%;
        }

    #sidebar.active .sidebar-header img {
        display: none;
    }

    #sidebar.active .sidebar-header strong {
        display: block;
    }

    #sidebar.active .components a span {
        display: none;
    }

    #sidebar.active .components a strong {
        display: block;
    }

    #sidebar .components a strong {
        display: none;
    }

    #sidebar ul.components {
        padding: 20px 0;
    }

    #sidebar ul p {
        color: #fff;
        padding: 10px;
    }

    #sidebar ul li a {
        padding: 10px;
        font-size: 13px;
        display: block;
        text-align: left;
        color: #9899ac;
        position:relative;
    }

        #sidebar ul li a i {
            margin-right: 5px;
        }

        #sidebar ul li a:hover {
            color: #fff;
            text-decoration: none;
            background: #2f2e3c;
        }

    #sidebar a[aria-expanded="true"] {
        color: #fff;
        background: #2f2e3c;
        position:relative;
    }

    #sidebar.active ul li a {
        padding: 20px 10px;
        text-align: center;
        font-size: 0.85em;
        position: relative;
    }

        #sidebar.active ul li a i {
            margin-right: 0;
            display: block;
            font-size: 1.8em;
            margin-bottom: 5px;
        }

    #sidebar.active ul ul a {
        padding: 10px !important;
    }

    #sidebar .dropdown-toggle::after {
        position: absolute;
        bottom: 20px;
        right: 15px;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active .dropdown-toggle::after {
        position: absolute;
        bottom: 30px;
        right: 15px;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active .list-unstyled .list-unstyled {
        padding: 0;
        list-style: none;
        background-color: #2f2e3c;
        font-size: 11px;
    }

    #sidebar .list-unstyled .list-unstyled {
        padding-left: 20px;
        list-style: none;
        background-color: #2f2e3c;
        font-size: 11px;
    }

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

        #sidebar.active {
            margin-left: 0;
        }
}