/* ======================================================================== */
/* CSS FOR NAVBAR */

/* ------------------------------------------------------------------------ */
/* App Header */

.app-header .navbar-nav .dropdown-menu {
    position: absolute;
}

.app-header .navbar-nav .dropdown-menu-right {
    right: 0;
    left: auto;
}
.navbar.navbar-dark .navbar-nav .nav-link img.img-avatar

.app-header .navbar-nav .dropdown-menu-left {
    right: auto;
    left: 0;
}

/* ------------------------------------------------------------------------ */
/* Navbar & Brand */

.navbar {
    background-color: #F5F5F5; /* Default White */
    padding: 0 !important;
    font-size: calc(1rem - 2px);
}

.navbar-brand {
    padding: 0 !important;
}

    .navbar-brand img {
        height: 40px;
    }

.navbar .navbar-nav .nav-link {
    color: rgba(0,0,0,.70); /* Theme Tint */
}

    .navbar .navbar-nav .nav-link:hover {
        color: rgba(0,0,0,1) !important; /* Theme Tint */
    }

    .navbar .navbar-nav .nav-link:active {
        color: rgba(0,0,0,1) !important; /* Theme Tint */
    }

/* Dark Version */

.navbar.navbar-dark {
    background-color: #333; /* Theme Color */
}

    .navbar.navbar-dark .navbar-nav .nav-link {
        color: rgba(255,255,255,.70); /* Default Tint */
    }

        .navbar.navbar-dark .navbar-nav .nav-link:hover {
            color: rgba(255,255,255,1) !important; /* Default Tint */
        }

        .navbar.navbar-dark .navbar-nav .nav-link:active {
            color: rgba(255,255,255,1) !important; /* Default Tint */
        }

/* ------------------------------------------------------------------------ */
/* Dropdowns for navbar */

.navbar .navbar-nav ul.dropdown-menu {
    border-radius: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #F5F5F5;
    font-size: calc(1rem - 2px);
    top: 37px
}

    .navbar .navbar-nav ul.dropdown-menu .dropdown .dropdown-menu {
        /*top: 0;
        left: calc(100% - 3px) !important;
        margin-left: .1rem;
        margin-right: .1rem;
        margin-top: -1px;*/
        top: 0;
        left: 0;
        margin-top: -1px;
        margin-left: calc(100%);
    }

    .navbar .navbar-nav ul.dropdown-menu li {
        border-bottom: solid 1px rgba(0,0,0,.15);
        padding: 1px;
    }

        .navbar .navbar-nav ul.dropdown-menu li:last-of-type {
            border-bottom: 0;
        }

        .navbar .navbar-nav ul.dropdown-menu li a.nav-link {
            color: rgba(0,0,0,.70);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }

            .navbar .navbar-nav ul.dropdown-menu li a.nav-link:hover {
                color: black !important;
                background-color: rgba(255,255,255,255.45);
            }

        .navbar .navbar-nav ul.dropdown-menu li.dropdown a.nav-link::after {
            transform: rotate(-90deg);
            float: right;
            margin-top: 10px;
        }

    .navbar .navbar-nav ul.dropdown-menu .dropdown-divider {
        height: 0;
        margin: 0 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(0,0,0,.30);
    }

/* Dark Version */

.navbar.dropdowns-dark .navbar-nav ul.dropdown-menu {
    background-color: #333;
}

    .navbar.dropdowns-dark .navbar-nav ul.dropdown-menu li {
        border-bottom: solid 1px rgba(255,255,255,.15);
        padding: 1px;
    }

        .navbar.dropdowns-dark .navbar-nav ul.dropdown-menu li:last-of-type {
            border-bottom: 0;
        }

        .navbar.dropdowns-dark .navbar-nav ul.dropdown-menu li a.nav-link {
            color: rgba(255,255,255,.70);
        }

            .navbar.dropdowns-dark .navbar-nav ul.dropdown-menu li a.nav-link:hover {
                color: white !important;
                background-color: rgba(0,0,0,0.30);
            }

    .navbar.dropdowns-dark .navbar-nav ul.dropdown-menu .dropdown-divider {
        border-bottom: 1px solid rgba(255,255,255,30);
    }


/* ------------------------------------------------------------------------ */
/* Dropdowns under right side */

.navbar .navbar-nav div.dropdown-menu {
    border-radius: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #F5F5F5;
    font-size: calc(1rem - 2px);
    border-right: none;
    top: 39px;
}

    .navbar .navbar-nav div.dropdown-menu a {
        border-bottom: solid 1px rgba(0,0,0,.15);
    }

        .navbar .navbar-nav div.dropdown-menu a:last-of-type {
            border-bottom: 0;
        }

        .navbar .navbar-nav div.dropdown-menu a.dropdown-item {
            color: rgba(0,0,0,.70);
            transition: font-weight 0s;
        }

            .navbar .navbar-nav div.dropdown-menu a.dropdown-item:hover {
                color: black !important;
                background-color: rgba(255,255,255,255.45);
            }

    .navbar .navbar-nav div.dropdown-menu #notifications-content a {
        padding: 5px 0px 5px 5px;
    }

        .navbar .navbar-nav div.dropdown-menu #notifications-content a:last-of-type {
            border: 0;
        }

/* Dark Version */
.navbar.dropdowns-dark .navbar-nav div.dropdown-menu {
    background-color: #333;
}

    .navbar.dropdowns-dark .navbar-nav div.dropdown-menu a {
        border-bottom: solid 1px rgba(255,255,255,.15);
        padding: 1px;
    }

        .navbar.dropdowns-dark .navbar-nav div.dropdown-menu a:last-of-type {
            border-bottom: 0;
        }

        .navbar.dropdowns-dark .navbar-nav div.dropdown-menu a.dropdown-item {
            color: rgba(255,255,255,.70);
        }

            .navbar.dropdowns-dark .navbar-nav div.dropdown-menu a.dropdown-item:hover {
                color: white !important;
                background-color: rgba(0,0,0,0.30);
            }

/* ------------------------------------------------------------------------ */
/* Extra's */

/* Icons inside dropdown items get margin right in order to put space betweed icon and text */
.dropdown-menu a i {
    margin-right: 0.5rem;
}

.dropdown-menu div i {
    margin-right: 0.5rem;
}

.navbar .navbar-nav div.dropdown-menu .dropdown-info {
    font-style: italic;
    text-align: center;
}

/* Dropdown Headers */
.navbar .navbar-nav div.dropdown-menu .dropdown-header {
    display: block;
    white-space: nowrap;
    padding: 0 1.5rem;
    padding: 8px 20px;
    margin-bottom: 0;
    color: #333;
    background-color: rgba(0,0,0,0.05);
    border-bottom: solid 1px rgba(0,0,0,.15);
    font-weight: bold;
    text-align: center;
}
/* Dark version */
.navbar.dropdowns-dark .navbar-nav div.dropdown-menu .dropdown-header {
    color: #F5F5F5;
    background-color: rgba(255,255,255,0.05);
    border-bottom: solid 1px rgba(255,255,255,.15);
}

/* User Image */
.navbar .navbar-nav .nav-link img.img-avatar {
    height: 23px;
    margin: 0 5px;
    border-radius: 0;
    border: solid 2px rgba(0,0,0,0.5);
    transition: all ease-in-out 0.1s
}

    .navbar .navbar-nav .nav-link img.img-avatar:hover {
        transform: scale(1.1,1.1);
        border: solid 2px rgba(0,0,0,0.90);
    }

/* Dark Version */
.navbar.navbar-dark .navbar-nav .nav-link img.img-avatar {
    border: solid 1px rgba(255,255,255,0.5);
}

    .navbar.navbar-dark .navbar-nav .nav-link img.img-avatar:hover {
        border: solid 1px rgba(255,255,255,0.90);
    }

/* ------------------------------------------------------------------------ */
/* Media Queries*/
@media (max-width: 768px) {
    .nav-link {
        text-align: center;
    }

    .navbar .navbar-nav {
        border-top: solid 1px rgba(0,0,0,0.1)
    }

    .navbar.navbar-dark .navbar-nav {
        border-top: solid 1px rgba(255,255,255,0.1)
    }

    .navbar .navbar-nav ul.dropdown-menu {
        width: 100%;
        position: relative;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0,0,0,0.05);
    }

        .navbar .navbar-nav ul.dropdown-menu .dropdown .dropdown-menu {
            width: 100%;
            top: 0px;
            bottom: 0px;
            left: 0px !important;
            right: 0px;
            margin-left: auto;
            margin-right: auto;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
            background-color: rgba(0,0,0,0.05);
        }

    .navbar .navbar-nav div.dropdown-menu {
        width: 100%;
        position: relative;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: rgba(0,0,0,0.05);
    }

    .navbar.navbar-dark .navbar-nav div.dropdown-menu {
        background-color: rgba(255,255,255,0.05);
    }

    /* ------------------------------------------------------------------------ */
    /*Left Side*/

    .navbar.navbar-dark .navbar-nav ul.dropdown-menu {
        background-color: rgba(255,255,255,0.05);
    }

        .navbar.navbar-dark .navbar-nav ul.dropdown-menu .dropdown .dropdown-menu {
            background-color: rgba(255,255,255,0.05);
        }

        .navbar.navbar-dark .navbar-nav ul.dropdown-menu li a.nav-link {
            color: rgba(255,255,255,.70);
        }

            .navbar.navbar-dark .navbar-nav ul.dropdown-menu li a.nav-link:hover {
                color: white !important;
                background-color: rgba(0,0,0,0);
            }

    .navbar .navbar-nav ul.dropdown-menu li.dropdown a.nav-link::after {
        transform: rotate(0deg);
        float: none;
        margin-top: 0px;
    }





    /* ------------------------------------------------------------------------ */
    /*Right Side*/




        .navbar .navbar-nav div.dropdown-menu a.dropdown-item {
            text-align: center;
        }

            .navbar .navbar-nav div.dropdown-menu a.dropdown-item i {
                display: none;
            }

            .navbar .navbar-nav div.dropdown-menu a.dropdown-item:hover {
                color: #000 !important;
                background-color: rgba(0,0,0,0) !important;
            }




        .navbar.navbar-dark .navbar-nav div.dropdown-menu a.dropdown-item {
            color: rgba(255,255,255,.70);
            text-align: center;
        }

            .navbar.navbar-dark .navbar-nav div.dropdown-menu a.dropdown-item i {
                display: none;
            }

            .navbar.navbar-dark .navbar-nav div.dropdown-menu a.dropdown-item:hover {
                color: #fff !important;
                background-color: rgba(0,0,0,0) !important;
            }

    /* ------------------------------------------------------------------------ */
    /*Icon Toggler*/
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
    }

    .navbar .navbar-toggler, .navbar.navbar-dark .navbar-toggler {
        border-color: rgba(0,0,0,0);
    }
}

/* ------------------------------------------------------------------------ */
/* Navbar differences in account info */
@media (max-width: 768px) {
    #account-status {
        display: none !important;
    }

    #account-status-small {
        display: flex !important;
    }
}

#account-status {
    display: flex;
}

#account-status-small {
    display: none;
}

/* ------------------------------------------------------------------------ */
/* !NOT SURE! */
.menuUserName {
    display: none;
}

/* ======================================================================== */

/*.navbar ul.navbar-nav > li:nth-of-type(12) ~ li > a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 6ch;
}

.navbar ul.navbar-nav > li:nth-of-type(12) ~ li:hover > a {
    overflow: visible;
    white-space: normal;
    width: auto;
}*/