:root {
    --navbar-width: 13rem;
    --navbar-width-small: 5rem;
    --navbar-sub-width: 18rem;
    --navbar-height-sm: 68px;
    --sidebar-background: var(--gray-dark);
    --sidebar-sub-background: var(--gray-light);
    --navbar-color: var(--white);
    --logo-size: 3rem;
    --navlink-position: 0.75rem;
    --navlink-login-position: 0.5rem;
    --menu-border-radius: 5px;
    --menu-active-color: var(--blue);
    --menu-hover-color: var(--blue-dark);
    --menu-transition-speed: 0.25s;
    --menu-transition-speed-slow: calc( var(--menu-transition-speed) *2);
    --login-container-width: calc(100% - calc(var(--bs-gutter-x,.75rem) * 2 ));
}

nav.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

    nav.navbar .container-fluid {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

header nav.navbar .k-avatar.k-avatar-solid-secondary {
    border-color: var(--orange);
    color: white;
    background-color: var(--orange);
}


header nav.navbar {
    background-color: var(--sidebar-background);
    z-index: 1031 !important;
    height: var(--navbar-height-sm);
    color: var(--navbar-color);
}

    header nav.navbar li.nav-item .collapse,
    header nav.navbar li.nav-item .collapsing {
        background-color: var(--sidebar-sub-background);
    }

    header nav.navbar .navbar-brand img {
        width: var(--logo-size);
        height: var(--logo-size);
    }

    header nav.navbar .navbar-brand h2 {
        height: 100%;
        color: var(--navbar-color);
        margin: 0px;
        line-height: var(--logo-size);
    }

header nav .container-fluid {
    background-color: var(--sidebar-background);
}

header nav.navbar.navbar-sub .btn-container {
    top: -2px;
    right: 0px;
}

    header nav.navbar.navbar-sub .btn-container button {
        font-size: 1.3rem;
        line-height: 1.2rem;
        color: var(--white);
    }

body header nav.navbar.navbar-sub {
    background-color: var(--sidebar-sub-background);
    width: var(--navbar-sub-width) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

body header .collapse nav.navbar.navbar-sub,
body header .collapsing nav.navbar.navbar-sub {
    display: inline-block !important;
    left: calc( var(--navbar-sub-width) * -1 );
    -webkit-transition: left var(--menu-transition-speed) ease-in-out;
    -moz-transition: left var(--menu-transition-speed) ease-in-out;
    -o-transition: left var(--menu-transition-speed) ease-in-out;
    transition: left var(--menu-transition-speed) ease-in-out;
}

body header .collapse.show nav.navbar.navbar-sub {
    display: inline-block !important;
    left: var(--navbar-width);
    -webkit-transition: left var(--menu-transition-speed) ease-in-out;
    -moz-transition: left var(--menu-transition-speed) ease-in-out;
    -o-transition: left var(--menu-transition-speed) ease-in-out;
    transition: left var(--menu-transition-speed) ease-in-out;
}

body.menu-collapse header .collapse.show nav.navbar.navbar-sub {
    left: var(--navbar-width-small);
}

.navbar-sub .k-card {
    border-radius: 0px;
    border: 0px;
    height: 100%;
}

    .navbar-sub .k-card,
    .navbar-sub .k-card .k-grid .k-grid-content {
        height: 100% !important;
    }

.navbar-sub .k-card,
.navbar-sub .k-grid .k-grid-toolbar.k-toolbar {
    background-color: transparent;
}

.navbar-sub .k-grid .k-table,
.navbar-sub .k-grid .k-table button,
.navbar-sub .k-grid .k-grid-toolbar.k-toolbar {
    color: var(--white);
}

.navbar-sub .k-grid .k-auto-scrollable {
    overflow: auto;
}


header nav.navbar {
    z-index: 1032 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

#account-menu {
    padding-left: 0.2rem;
}

body.menu-collapse #account-menu {
    padding-left: 0.65rem;
}


.navbar-toggler {
    margin-left: auto;
    border-color: var(--white);
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.navbar-toggler-icon {
    background-image: url("/images/menu.svg");
    filter: invert(100%) hue-rotate(18deg) brightness(1.7);
}

header .logo-container {
    top: 0.5rem;
}


ul.navbar-menu li.nav-item a.nav-link {
    color: var(--gray-light);
    border-radius: var(--menu-border-radius);
}

    ul.navbar-menu li.nav-item a.nav-link.active {
        color: var(--white);
        background-color: var(--menu-active-color);
    }

        ul.navbar-menu li.nav-item a.nav-link.active i {
            color: var(--white);
        }

    ul.navbar-menu li.nav-item a.nav-link i {
        width: 1.25rem;
    }

    ul.navbar-menu li.nav-item a.nav-link:hover {
        font-weight: bold;
        color: var(--white);
        background-color: var(--menu-hover-color);
    }

body.menu-collapse ul.navbar-menu li.nav-item a div {
    justify-content: center;
}

ul.navbar-menu li.nav-item a div i,
ul.navbar-menu li.nav-item a div span {
    line-height: 1.5rem;
}

header nav .dropup .dropdown-toggle {
    padding-left: 0.5rem;
}

    header nav .dropup .dropdown-toggle .nav-link.link-text {
        padding: 0.3rem 1rem;
    }

header nav .dropup .dropdown-menu {
    margin-left: 2.5rem;
}

header nav span.nav-link,
header nav a.nav-link,
header nav a.nav-link:link,
header nav a.nav-link:visited,
header nav a.nav-link:hover,
header nav a.nav-link:active {
    color: var(--text-primary-header);
}


header nav .dropup .dropdown-menu .nav-link,
header nav .dropup .dropdown-menu a.nav-link:link,
header nav .dropup .dropdown-menu a.nav-link:visited,
header nav .dropup .dropdown-menu a.nav-link:hover,
header nav .dropup .dropdown-menu a.nav-link:active {
    color: var(--blue);
}

.nav-link i.fas {
    display: flex;
    justify-content: center;
}

@media (max-width: 575px) {
    header nav.navbar .nav-link {
        padding-left: var(--navlink-position);
        padding-right: var(--navlink-position);
        margin-left: var(--navlink-position);
        margin-right: var(--navlink-position);
    }

    body.menu-collapse ul.navbar-menu li.nav-item a div {
        justify-content: start;
    }

    body header nav.navbar.navbar-sub {
        width: 100% !important;
        display: inline-block;
        position: relative;
        left: 0px !important;
        height: 250px;
        box-shadow: unset;
    }

    body header nav.navbar .container-menu {
        overflow: auto;
        max-height: 80vh;
        margin-top: -1rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-top: 1rem;
        padding-right: 0.75rem;
    }

    div.collapsable a.nav-link.active {
        border-bottom-left-radius: 0rem !important;
        border-bottom-right-radius: 0rem !important;
        margin-bottom: 0rem !important;
    }

    div.collapsable div.collapse.show,
    div.collapsable div.collapsing {
        margin-left: var(--navlink-position);
        margin-right: var(--navlink-position);
        border-bottom-left-radius: var(--menu-border-radius);
        border-bottom-right-radius: var(--menu-border-radius);
        overflow: hidden;
    }

    div.collapsable a.nav-link.active:not(.collapsed) {
        color: var(--white);
        background-color: var(--menu-active-color);
        border-top-left-radius: var(--menu-border-radius);
        border-top-right-radius: var(--menu-border-radius);
    }
}

header nav.navbar .login-container ul {
    list-style: none;
}

@media (min-width: 576px) {
    body {
        padding-left: var(--navbar-width);
    }
        body.navbar-sub-expanded {
            padding-left: calc(var(--navbar-width) + var(--navbar-sub-width));
        }

        body.menu-collapse {
            padding-left: var(--navbar-width-small);
        }

            body.menu-collapse.navbar-sub-expanded {
                padding-left: calc(var(--navbar-width-small) + var(--navbar-sub-width));
            }

    header .logo-container {
        top: unset;
        position: relative;
    }

        header .logo-container .navbar-brand {
            margin-right: 0rem;
        }

    header nav.navbar {
        align-items: flex-start;
        position: fixed;
        top: 0px;
        left: 0px;
        height: 100vh;
        width: var(--navbar-width);
        -webkit-transition: width var(--menu-transition-speed) ease-in-out;
        -moz-transition: width var(--menu-transition-speed) ease-in-out;
        -o-transition: width var(--menu-transition-speed) ease-in-out;
        transition: width var(--menu-transition-speed) ease-in-out;
    }

        header nav.navbar .container-fluid,
        header nav.navbar .dropdown-toggle {
            overflow-x: hidden;
        }

    body.menu-collapse header nav.navbar {
        width: var(--navbar-width-small);
    }

    header nav.navbar,
    header nav.navbar-collapse,
    header nav.navbar .container-fluid {
        flex-direction: column;
    }

    header nav.navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }

    header nav.navbar-nav.navbar-menu {
        margin-left: 0px;
        margin-bottom: 1px;
    }

    body.menu-collapse header nav.navbar .nav-link {
        text-align: center;
    }

    header nav.navbar .nav-link {
        text-align: left;
        line-height: 1.9rem;
    }

    body.menu-collapse header nav.navbar .link-text {
        display: none;
    }

    header nav.navbar .link-text {
        display: inline-block;
    }

    body header nav.navbar.navbar-sub {
        z-index: -1 !important;
    }

    body {
        -webkit-transition: padding-left var(--menu-transition-speed) ease-in-out;
        -moz-transition: padding-left var(--menu-transition-speed) ease-in-out;
        -o-transition: padding-left var(--menu-transition-speed) ease-in-out;
        transition: padding-left var(--menu-transition-speed) ease-in-out;
    }
}


body header nav.navbar.navbar-sub .k-loading-image {
    background: var(--gray-light);
    color: var(--white);
}