.custom-logo-background {
    background-image: url('../img/logo.jpg'); /* Replace with your image path */
    background-size: cover; /* This makes the background cover the entire element */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center center; /* Centers the image */
    height: 170px;
}
.custom-logo-background-small {
    background-image: url(../img/logo-small.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    margin: 0 13px;
}

/* General link styling - removes text decoration and sets the color */
.nav li a {
    text-decoration: none; /* No underline by default */
    color: #a7b1c2; /* This color should match the first level color */
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides text that overflows */
    width: 100%; /* Adjust as needed */
}

/* Styling for hover state - adds underline on hover */
.nav li a:hover,
.nav li a:focus {
    text-decoration: underline; /* Only underline on hover/focus */
    color: #a7b1c2; /* Maintain the same color on hover */
}

/* Styling to handle overflow with tooltips */
/* Apply ellipsis for all states except when .mini-navbar is present */
body:not(.mini-navbar) .nav li a {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden; /* Hides text that overflows */
    text-overflow: ellipsis; /* Adds an ellipsis to text that overflows */
    display: block; /* Ensures the entire area is clickable and tooltip is shown */
}


/* Bootstrap tooltip */
.nav li a[data-toggle="tooltip"] {
    position: relative;
}

.nav-second-level li a {
    padding-left: 23px;
}

/* Base styling for nested lists */
.nav li ul {
    padding-left: 0;
    list-style: none;
}

/* Specific styling for the second level menu items */
.nav-second-level li {
    padding-left: 15px; /* Adjust as needed */
}

.nav-second-level li a {
    /*font-size: 0.95em;*/ /* Slightly smaller than the top level */
}

/* Specific styling for the third level menu items */
.nav-third-level li {
    padding-left: 30px; /* Adjust as needed */
}

.nav-third-level li a {
    /*font-size: 0.9em;*/ /* Smaller text size for third-level items */
}

/* Specific styling for the fourth level menu items */
.nav-fourth-level li {
    padding-left: 45px; /* Adjust as needed */
}

.nav-fourth-level li a {
    /*font-size: 0.85em;*/ /* Even smaller text size for fourth-level items */
}

/* Optional: change the color for third and fourth level links to distinguish them */
.nav-third-level li a, .nav-fourth-level li a {
    color: #a9b7c6; /* Lighter color for sub-menu items */
}
.nav li.active > a {
    background-color: #1ab394; /* Change to your active color */
    color: #FFF; /* Change to your active text color */
}

.nav li.active > a:hover {
    background-color: #18a689; /* Change to your active hover color */
}

/* Reset background color for nested li elements (second level and beyond) */
.nav .nav-second-level li.active > a,
.nav .nav-third-level li.active > a,
.nav .nav-fourth-level li.active > a {
    background-color: transparent; /* No background color for nested li elements */
    color: #f3f3f4; /* Text color for active nested items, change as needed */
}

/* Ensure text is readable when the hamburger menu is toggled */
.navbar-collapse.collapsing,
.navbar-collapse.show,
.navbar-collapse.in {
    color: #FFF; /* Or any color that makes the text readable on your background */
}

/* Adjust the color for links within the collapsed menu */
.navbar-collapse.collapsing a,
.navbar-collapse.show a,
.navbar-collapse.in a {
    color: #FFF; /* Or any color that makes the text readable on your background */
}


/* Override the display property for the 2nd, 3rd, and 4th level menu text in the mini-navbar */
body.mini-navbar .nav-second-level .nav-label,
body.mini-navbar .nav-third-level .nav-label,
body.mini-navbar .nav-fourth-level .nav-label {
    display: inline !important; /* or 'block' if you want it to take up the full width */
}

/* Make sure the parent elements are also visible */
body.mini-navbar .nav-second-level,
body.mini-navbar .nav-third-level,
body.mini-navbar .nav-fourth-level {
    /*display: block !important;*/
}

/* Base positioning for all list items */
.nav li {
    position: relative; /* This establishes a new stacking context */
}

/* Ensure dropdowns are above their parent list item but below the next level's list items */
.nav .nav-second-level {
    z-index: 10;
}

.nav .nav-second-level .nav-third-level {
    z-index: 20;
}

.nav .nav-third-level .nav-fourth-level {
    z-index: 30;
}

/* Specific z-index for list items at each level to be above their dropdowns */
.nav > li {
    z-index: 40; /* Base level list items */
}

.nav .nav-second-level > li {
    z-index: 50; /* Second level list items */
}

.nav .nav-third-level > li {
    z-index: 60; /* Third level list items */
}

.nav .nav-fourth-level > li {
    z-index: 70; /* Fourth level list items */
}

.nav-second-level li:last-child {
    padding-bottom: 0px;
}

.m-l-xs {
	margin-left: 5px;
}

.golden-lock {
    color: #B8860B;
}

.explanation {
    color: darkorange;
    font-weight: bold;
}
.alert-icon {
    color: red; /* Red color for alert icon */
}
/* Debugging background colors for each level of UL */
/*.nav > li > ul.nav-second-level {
    background-color: #c648d7  !important; 
}

.nav .nav-second-level > li > ul.nav-third-level {
    background-color: #ccffcc !important; 
}

.nav .nav-third-level > li > ul.nav-fourth-level {
    background-color: #ccccff !important;
}*/