.navbar-version-2 {
    font-family: 'Inter', sans-serif;
    background: var(--navbar-background-color, #ffffff);
    /* border: 1px solid red; */
    box-shadow: none;
    padding: 10px 14px 10px;
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.1);

    & .container-fluid {
        display: flex;
    }

    & .navbar-collapse {
        flex-grow: 1;
        padding-left: 50px;
    }

    & .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #5599FF;
        /* Default background color */
        color: #fff;
        /* Text color */
        font-weight: normal;
        font-size: 22px;
        text-align: center;
        line-height: 35px;
        /* Ensure the text is centered vertically */
    }

    & .dropdown-navbar {
        right: 0;
        left: unset;
    }

    & .navbar-buttons {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        gap: 24px;
        border-radius: 4px;
        /* background-color: var(--navbar-buttons-background-color, --app-background-color-primary); */
        /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; */
        padding: 3px 0px;
        align-self: center;
    }

    & .navbar-buttons li {
        display: flex;
        gap: 10px;
        align-items: center;
        color: var(--app-font-color-primary, rgb(41, 41, 41));
        padding: 7px 15px;

        & a {
            color: inherit;
            font-size: 16px;
            font-weight: 500;
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            text-shadow: 0 0 var(--app-font-color-primary, rgb(41, 41, 41));

            &:hover {
                color: inherit;
            }
        }

        &:hover {
            text-decoration: none;
            color: rgb(25, 118, 210);
        }

        & svg {
            fill: currentColor;
        }
    }

    & .help-center-menu .dropdown-item {
        padding: 5px 10px;
        display: flex;
        gap: 5px;
        align-items: center;
        color: var(--app-font-color-primary, rgb(41, 41, 41)) !important;
        text-wrap: nowrap;

        &:hover {
            background: unset;
            color: rgb(25, 118, 210);
        }
    }

    & .dropdown-menu li.notification-box:hover,
        .dropdown-menu li.notification-box.active {
        background: #f0f0f0;
    }

    & .notification-box .notification-created {
        /* Color is based on base_custom.css .text-warning*/
        color: #727272;
    }

    & .notification-container {
        font-weight: normal;
    }

    & .dropdown-menu .dropdown-item {
        font-size: 16px; /* Ensure 1rem-equivalent sizing (matches dashboard) when root font-size isn't set */
        font-weight: 400;
    }

    & .navbar-collapse.collapse {
        display: flex;
    }

    & .help-center-menu .dropdown-toggle.show {
        display: flex !important;
    }
}

.navbar-version-2.is-bootstrap-5 {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;

    & .navbar-collapse {
        display: flex;
        flex-basis: unset;
    }

    & .navbar-buttons {
        flex-direction: row;
    }

    & .dropdown-toggle::after {
        display: none;
    }

    & .dropdown-menu {
        position: absolute;
    }

    & .navbar-toggle {
        display: none;
    }

    /* hide scrollbar but keep scrolling */
    & .notification-container,
        #dropdown_menu_container {
        overflow: auto;                 /* or overflow-y: auto / overflow-x: auto */
        -ms-overflow-style: none;       /* IE and Edge */
        scrollbar-width: none;          /* Firefox */
    }

    /* WebKit browsers (Chrome, Safari, Opera) */
    & .notification-container::-webkit-scrollbar,
        #dropdown_menu_container::-webkit-scrollbar {
        display: none;
    }

    & .dropdown-menu {
        font-size: 14px;
    }
}

/* Override css styles set in custom.css and base_custom.css */
.dark-mode {
    --navbar-buttons-background-color: rgb(18, 18, 18);
    --navbar-background-color: #121212;
}


@media screen and (max-width: 1500px) {
    .navbar-version-2 {
        .navbar-header {
            width: 15%;
            margin-top: 0px;
        }

        .container-fluid {
            margin-bottom: 0px;
        }
    }
}

@media (min-width: 768px) {
    .navbar-version-2 .navbar-collapse.collapse {
        display: flex !important;
    }
}