html {
    position: relative;
    min-height: 100%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    margin-bottom: 35px;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

li.nav-item li.nav-item a {
    margin: 0;
    padding: 0.2em;
}

li.nav-item li.nav-item {
    list-style: none;
    padding: 0;
}

nav.sidebar a:hover {
    background-color: lightgrey;
}

nav.sidebar a {
    color: black;
    text-decoration: none;
}

nav.sidebar a.disabled {
    /* Make the disabled links grayish*/
    color: lightgrey;
    /* And disable the pointer events */
    pointer-events: none;
}

.sub-header {
    margin-bottom: 50px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd
}

.sublink_activate {
    border-left: 5px solid #00c5ff;;
    background-color: #e3e3e3;
}
/* -- - - - - - - - - -  per site icon settings - - - - - - - - - -- */

.admin-icon {
    filter: hue-rotate(300deg) saturate(1000%);
}

.public-icon {
    filter: saturate(200%);
    /* hue-rotate(300deg) */
}

.dev-icon {
    filter: hue-rotate(200deg) saturate(1000%);
}

.dev2-icon {
    filter: hue-rotate(100deg) saturate(1000%);
}

/* Update the navbar for small screens. Replace bootstrap css for small screens only */
@media (max-width: 600px) {
    .sidebar {
        position: static !important;
        margin-top: 0px !important;
    }
}