.navbar-side::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0;
}

.navbar-side {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
    width: var(--nav-side-width);
    background: var(--nav-side-background-color);
}

.navbar-side-top {
    color: var(--lone-tree-white);
    height: var(--nav-top-height);
    width: var(--nav-side-width);
    background: var(--nav-side-background-color);
}

.navbar-side-top .clock {
    font-size: 1.6rem;
}

.navbar-toggler {
    background: var(--nav-top-button-background-color);
}

.navbar-top {
    height: var(--nav-top-height);
    margin-left: var(--nav-side-width);
    background: var(--nav-top-background-color);
    border-bottom: 3px solid var(--nav-top-border-color);
    box-shadow: 0px 0px 10px #444;
}

.navbar-top .navbar-title {
    color: var(--nav-top-title-color);
    font-size: 2.2rem;
    font-weight: bolder;
}

.navbar-top .navbar-subtitle {
    position: relative;
    font-size: 1.4rem;
    top: -3px;
    color: var(--nav-top-subtitle-color);
}

.navbar-top .navbar-button {
    font-size: 1.6rem;
    background: var(--button-background-color);
    border: var(--button-border-color);
    border-radius: var(--common-border-radius);
    color: var(--button-text-color);
}

.navbar-top .navbar-button:hover {
    background: var(--button-highlight-background-color);
    color: var(--button-highlight-text-color);
}

.navbar-top .navbar-home-link {
    text-decoration: none;
}

.offcanvas-side {
    width: var(--nav-side-width) !important;
    background: var(--nav-side-background-color);
}

.offcanvas-side .offcanvas-header {
    color: var(--dark-text-color)
}

@media (max-width: 991.98px) {

    .navbar-side {
        width: 0px;
    }

    .navbar-top {
        margin-left: 0px;
    }

}

.navheader {
    margin-top: 0px;
}

@media (min-width: 992px) {
    .navheader {
        margin-top: var(--nav-top-height);
    }
}

.navheader .menu div.mbutton {
    background: var(--nav-side-menu-background-color);
    padding: 5px 0px 5px 5%;
    color: var(--nav-side-menu-text-color);
    font-weight: bold;
    font-size: 1.4rem;
    display: block;
    position: relative;
    width: 100%;
    margin: 0px;
    float: left;
    clear: none;
    text-decoration: none;
    border-radius: var(--common-border-radius);
}

.navheader .menu div.mbutton:hover {
    background: var(--nav-side-menu-highlight-background-color);
    cursor: pointer;
}

.navheader .menu div.mselected {
    background: var(--nav-side-menu-selected-background-color);
    font-weight: bold;
    color: var(--nav-side-menu-selected-text-color);
    z-index: 20;
    position: relative;
}

.navheader .menu a.smbutton {
    padding: 5px 0px 5px 18px;
    color: var(--nav-side-sub-menu-text-color);
    font-weight: normal;
    font-size: 1.4rem;
    display: block;
    position: relative;
    width: 100%;
    margin: 0px;
    float: left;
    clear: none;
    text-decoration: none;
    border-radius: var(--common-border-radius);
}

.navheader .menu a.smbutton:hover {
    background: var(--nav-side-sub-menu-highlight-background-color);

}

.navheader .menu a.smselected {
    background: var(--nav-side-sub-menu-selected-background-color);
    z-index: 20;
    position: relative;
}

.navheader .sbar {
    float: left;
    clear: none;
    width: 100%;
}

.navheader .sbar table {
    width: 100%;
}

.navheader .sbar input.search {
    padding: 2%;
    margin: 6px 2% 6px 2%;
    float: left;
    clear: none;
    width: 96%;
    background: var(--form-input-background-color);
    border-radius: var(--common-border-radius-small);
    border: 1px solid #666;
    font-size: 1.6rem;
}

.navheader .sbar select.search {
    padding: 2%;
    margin: 6px 2% 0px 2%;
    float: left;
    clear: none;
    width: 96%;
    background: var(--form-input-background-color);
    border: 1px solid var(--form-input-border-color);
    border-radius: var(--common-border-radius-small);
    font-size: 1.6rem;
}