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

#sidebar {
    min-width: 280px;
    max-width: 280px;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: center left;
    font-family: "Cairo";
    color: azure;
    min-height: 100vh;
}

    #sidebar div {
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-left: 10%;
    }

        #sidebar div:not(#sidebarCollapsediv):not(#headerdiv) {
            margin-left: 8%;
        }

    #sidebar a:not(.linkicon) {
        font-family: "Cairo";
        color: azure !important;
        font-size: 24px;
        transition: font-size 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    }

    #sidebar a.sidebarlink {
        margin-left: 10px;
    }

    #sidebar a.linkicon {
        font-family: "Cairo";
        color: azure !important;
        font-size: 40px;
        transition: font-size 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    }

    #sidebar h3 {
        font-family: "Cairo";
        color: azure !important;
        font-size: 64px;
        transition: font-size 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    }

/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header strong {
    display: none;
}

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

#sidebar ul li a {
    text-align: left;
}

    #sidebar.active h3 {
        font-size: 32px;
    }

    #sidebar.active a:not(#sidebarCollapse):not(.linkicon) {
        font-size: 0px;
    }

    #sidebar.active ul li a:not(.linkicon) {
        text-align: center;
        font-size: 0.85em;
        margin-left: 10px;
    }

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

    #sidebar.active a.linkicon {
        font-size: 24px;
    }

/* Same dropdown links padding*/
#sidebar.active ul ul a {
    padding: 10px !important;
}

/* Changing the arrow position to bottom center position, 
   translateX(50%) works with right: 50% 
   to accurately  center the arrow */
#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

.sidebar-submenu {

}

.sidebar-submenu li {
    margin-left: 10%;
}

    .sidebar-submenu li i {
        margin-right: 10px;
    }

/*@media (max-width: 768px) {*/
    /* 80px and its content aligned to centre. Pushing it off the screen with the
       negative left margin
    */
    /*#sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }*/


    /* Reappearing the sidebar on toggle button click */
    /*#sidebar {
        margin-left: 0;
    }*/


        /* Toggling the sidebar header content, 
       hide the big heading [h3] and showing the small heading [strong] and vice versa
    */
        /*#sidebar .sidebar-header strong {
            display: none;
        }*/

        /*#sidebar.active .sidebar-header h3 {
            display: none;
        }*/

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

        /* Downsize the navigation links font size */
        /*#sidebar.active ul li a {
            padding: 20px 10px;
            font-size: 0.85em;
        }

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

        /* Adjust the dropdown links padding*/
        /*#sidebar.active ul ul a {
            padding: 10px !important;
        }*/

    /* Changing the arrow position to bottom center position, 
      translateX(50%) works with right: 50% 
      to accurately  center the arrow */
    /*.dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
}*/