/*Classes identified with the ID selector are for styles that never change. The .profile-navbar and .profile-navbar-inverse classes are toggled as appropriate, so should only contain styles pertinent to them*/
:root {
	--ck-profile-navbar-height:50px;
    --ck-profile-navbar-zindex:1030;

}
/*
	 colors defined here just so we know what to override on local stylesheets
*/

#profile_navbar {
    height: var(--ck-profile-navbar-height);
    z-index: var(--ck-profile-navbar-zindex); /* needs to stay offcanvas and below BS modal*/
    position: sticky;
    top: 0;
    background-color: var(--bs-light);
    border-color: var(--bs-light); /*changes in script to have dark line after scroll past nav*/
}

    #profile_navbar .nav-link {
        color: var(--bs-primary);
    }

        #profile_navbar .nav-link:hover {
            color: var(--ck-primary-comp);
        }

    #profile_navbar.profile-navbar-inverse {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

        #profile_navbar.profile-navbar-inverse .nav-link {
            color: #FFFFFF;
        }

            #profile_navbar.profile-navbar-inverse .nav-link:hover {
                color: var(--ck-primary-comp);
            }



    #profile_navbar #profile_navbar_logo {
        height: 30px;
        max-height: 30px;
        display: none;
    }
	#profile_navbar.profile-navbar-inverse #profile_navbar_logo {
		display: block;
	}


    #profile_navbar .navbar-icons .badge {
        font-weight: normal;
        font-size: 0.6em;
        vertical-align: top;
        margin-left: -3px; /*appear over top the affected icon*/
        margin-top: -3px;
    }


	

#social_onlineStatus_icons {
}
	#social_onlineStatus_icons li img {
		width: 35px;
		height: 35px;
		text-align:center;
	}

.profile-navbar-inverse #social_onlineStatus_icons {
    color: #FFF;
    background-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity,1)) !important;
}



#profile_menu_offcanvas {
    width: 350px;
    border-left:1px solid #FFF;
}

    #profile_menu_offcanvas .offcanvas-header {
        align-items:start;
    }

UL.profile-menu-offcanvas-items {
    list-style: none outside none;
    display: block;
    margin: 0 0 2rem;
    padding: 0;
}
    ul.profile-menu-offcanvas-items .divider {
        height: 1px;
        margin: 9px 0px;
        background-color:#CFCFCF;
        overflow: hidden;
    }
    ul.profile-menu-offcanvas-items .header {
        display: block;
        padding: 3px 20px;
        font-size: 0.875rem;
        color:#999999;
    }

    UL.profile-menu-offcanvas-items > li > a {
        color: rgba(0,0,0,0.65);
    }


    UL.profile-menu-offcanvas-items > li > a:hover {
        background-color: var(--bs-light);
        text-decoration: none;
        color:var(--ck-primary-comp);

    }

    UL.profile-menu-offcanvas-items li a,
    UL.profile_menu_offcanvas-items li span {
        padding: 0.75rem 1.2rem;
        display: block;
        text-decoration: none;
    }
    UL.profile-menu-offcanvas-items li ul {
        border-bottom: 0;
        margin: 0
    }
        UL.profile-menu-offcanvas-items li ul li a,
        UL.profile-menu-offcanvas-items li ul li span {
            padding-left: 30px;
        }



/*without this, public side would always see the padding left by admin nav bar. Should only be on admin side*/
#admin_nav {
    --bs-navbar-padding-y: 0; /*padding put on links for full height border look*/
    z-index: 1031; /*simply needs to be higher than profile navbar, but firefox doesn't like calc() with z-index so hardcoding*/
}
.ckcommon-intranet #admin_nav {
    top:50px;
}
/*admin side nav*/
#admin_nav .navbar-brand {
    --bs-navbar-brand-font-size: 0.875rem;
    --bs-navbar-brand-color:var(--bs-primary);
    font-weight:bold;

}
#admin_nav .navbar-toggler {
    --bs-border-width: 0;
    --bs-navbar-toggler-padding-y:1rem;
}
    #admin_nav .navbar-toggler:hover {
        color: var(--ck-primary-comp);
    }
    #admin_nav .navbar-toggler:focus {
        color: var(--ck-primary);
        box-shadow:none;
    }


    

#admin_nav_offcanvas .nav-link  {
    --bs-nav-link-hover-color:var(--ck-primary-comp);
    --bs-nav-link-padding-x:1.2rem;
    --bs-nav-link-padding-y:0.875rem;
    --bs-navbar-nav-link-padding-x:1rem;
}
    #admin_nav_offcanvas .nav-link:hover {
        background-color:var(--bs-light);
    }


/*admin side offcanvas*/
@media (max-width: 991.98px) {
    .admin-nav-tooltip {
        display: none !important;
    }
    #admin_nav_offcanvas {
        width: 350px;
        border-left: 1px solid #FFF;
    }

        #admin_nav_offcanvas .nav-item {
            border-bottom: 1px solid var(--bs-light);
            --bs-nav-link-padding-y: 0.75rem;
        }
            #admin_nav_offcanvas .nav-item .dropdown-menu {
                border: 0;
                border-left: 1px solid #F0F0F0;
                border-radius: 0;
                margin-left: 0.75rem;
                font-size: 0.875rem;
                margin-bottom: 1rem;
            }

        #admin_nav_offcanvas .nav-link {
            border: 0;
            margin: 0;
        }
            #admin_nav_offcanvas .nav-link.dropdown-toggle:after {
                position: absolute;
                right: 1rem;
                top: 1rem;
            }

}


/*until regular css can act like a media query, need to duplicate the same style to simulate collapsed navbar on public side*/
body:has(.admin-public-offcanvas) .admin-nav-tooltip {
    display: none !important;
}

#admin_nav_offcanvas.admin-public-offcanvas {
    width: 350px;
    border-left: 1px solid #FFF;
}

    #admin_nav_offcanvas.admin-public-offcanvas .nav-item {
        border-bottom: 1px solid var(--bs-light);
        --bs-nav-link-padding-y: 0.75rem;
    }

        #admin_nav_offcanvas.admin-public-offcanvas .nav-item .dropdown-menu {
            border: 0;
            border-left: 1px solid #F0F0F0;
            border-radius: 0;
            margin-left: 0.75rem;
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }

    #admin_nav_offcanvas.admin-public-offcanvas .nav-link {
        border: 0;
        margin: 0;
    }
        #admin_nav_offcanvas.admin-public-offcanvas .nav-link.dropdown-toggle:after {
            position: absolute;
            right: 1rem;
            top: 1rem;
        }

    #admin_nav_offcanvas.admin-public-offcanvas .nav-link-label {
        display: inline !important; /*show the label which BS nav normally hides to show just icons. Something automatically controlled by navbar-expand-lg on admin side*/
    }

#admin_nav.admin-public-offcanvas .navbar-brand {
    display: none;
}
#admin_nav.admin-public-offcanvas .navbar-toggler {
    display: none;
}

    

/*Public side is always offcanvas, so do not show borders at any time and always show link text. The trigger is the navbar-expand-lg class which is only present on intranet */
/*
#admin_nav:not(.navbar-expand-lg) .nav-item {
    border-bottom: 1px solid #E0E0E0;
    --bs-nav-link-padding-y: 0.75rem;
}

    #admin_nav:not(.navbar-expand-lg) .nav-item .dropdown-menu {
        border: 0;
        border-left: 1px solid #F0F0F0;
        border-radius: 0;
        margin-left: 0.75rem;
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

#admin_nav:not(.navbar-expand-lg) .admin_nav_offcanvas {
    width: 350px;
    box-shadow: inset 10px 10px 20px -19px rgba(0,0,0,1);
    border-left: 1px solid #FFF;
}
#admin_nav:not(.navbar-expand-lg) .nav-link {
    border:0;
    margin:0;
}
#admin_nav:not(.navbar-expand-lg) .nav-link.dropdown-toggle:after {
    position:absolute;
    right:0.5rem;
    top: 1rem;
}

#admin_nav:not(.navbar-expand-lg) .nav-link-label {
    display:inline !important;
}
#admin_nav:not(.navbar-expand-lg) .navbar-brand {
    display: none;
}
#admin_nav:not(.navbar-expand-lg) .navbar-toggler {
    display: none;
}
*/