/*
    Navbar top style
*/
:root {
    --navbartop-height: 3.5rem;
}

.navbar {
    --bs-navbar-color: var(--bs-secondary);
    --bs-navbar-hover-color: var(--bs-secondary);
    --bs-navbar-active-color: var(--bs-navbar-hover-color);
    --bs-navbar-brand-color: var(--bs-secondary);
    --bs-navbar-brand-hover-color: var(--bs-secondary);
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-padding-y: 0.25rem;
    --bs-nav-link-padding-y: 0.5rem;
}

#navbartop {
    background-image: linear-gradient(to right, var(--sidebar-background-color) var(--sidebar-width-expanded), rgba(var(--bs-primary-rgb), 0.95) var(--sidebar-width-expanded), rgba(var(--bs-primary-rgb), 1));
    height: var(--navbartop-height);
    min-height: var(--navbartop-height);
    max-height: var(--navbartop-height);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

#navbartop .nav-link.dropdown-toggle.nav-user-icon::after {
    display: none;
}

#navbartop .nav-link.dropdown-toggle.nav-user-icon:hover {
    box-shadow: 0 0 11px rgba(var(--bs-secondary-rgb), .4);
    border-radius: 1rem;
}

#navbartop .nav-link.dropdown-toggle.nav-user-icon>svg {
    width: 2rem;
    height: 2rem;
}

#navbartop .navbar-brand {
    padding-top: calc(var(--bs-nav-link-padding-y) + var(--bs-navbar-padding-y) + 1px);
    padding-bottom: calc(var(--bs-nav-link-padding-y) + var(--bs-navbar-padding-y) + 1px);
    width: calc(var(--sidebar-width-expanded) - var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

#navbartop .navbar-brand-icon {
    display: inline-block;
    height: 2rem;
    width: auto;
}

#navbartop .navbar-brand-icon-sm {
    display: none;
}

#navbartop .navbar-text {
    padding-left: 0.5rem;
}

.navbar-top-left-content .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-navbar-color);
    --bs-breadcrumb-color: var(--bs-navbar-color);
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.navbar-top-left-content h5 {
    margin: 0;
    padding: 0;
}

#navbartop .notification a>i.bi.bi-bell-fill,
#navbartop .notification a:hover>i.bi.bi-bell {
    display: none;
}

#navbartop .notification a:hover>i.bi.bi-bell-fill,
#navbartop .notification a>i.bi.bi-bell {
    display: block;
}

#navbartop .notification span.badge {
    top: 10%;
    left: 90%;
}

#navbartop .notification div.dropdown-menu {
    width: 375px;
    padding-bottom: 0.15rem;
}

#navbartop .notification div.dropdown-menu .card-body {
    min-height: 100px;
}

#navbartop .notification div.dropdown-menu .card-body.overflow-auto {
    max-height: 550px;
}

#navbartop .notification .notification-bottom a {
    font-size: 0.7rem;
}

@media(max-width: 450px) {
    #navbartop .notification div.dropdown-menu {
        width: 250px;
    }
}

@media(max-width: 991.98px) {
    #navbartop {
        background-image: linear-gradient(to right, var(--sidebar-background-color) var(--sidebar-width-collapsed), rgba(var(--bs-primary-rgb), 0.95) var(--sidebar-width-collapsed), rgba(var(--bs-primary-rgb), 1));
    }

    #navbartop .navbar-brand {
        width: calc(var(--sidebar-width-collapsed) - var(--bs-gutter-x) * .5);
        min-width: calc(var(--sidebar-width-collapsed) - var(--bs-gutter-x) * .5);
        text-align: center;
    }

    #navbartop .navbar-brand-icon,
    #navbartop .navbar-brand-text {
        display: none;
    }

    #navbartop .navbar-brand-icon-sm {
        display: inline-block;
        height: 2rem;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    #navbartop .navbar-brand {
        width: calc(var(--sidebar-width-collapsed) - var(--bs-gutter-x) * .5);
        min-width: calc(var(--sidebar-width-collapsed) - var(--bs-gutter-x) * .5);
        text-align: center;
    }

    .navbar-top-left-content h5 {
        font-size: 0.9rem;
    }
}