.hideTopNavInDesktop 
{
    display: none !important;
}

.regla-topnav {
    display: flex;
    height: 50px;
    max-height: 50px;
    justify-items: center;
    -webkit-justify-content: inherit;
    justify-content: space-between;
    background-color: var(--regla-topAndSide-bar) !important;
}

.regla-topnav-ReglaLogo {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
}

.regla-topnav-userProfile {
    display: flex;
    justify-content: space-between;
    min-width: max-content;
    align-items: center;
}

@media (max-width: 768px) 
{
    .hideTopNavInDesktop 
    {
        display: block !important;
    }
}

#RadzenLayoutMainSiteLayout > .rz-header {
    border-bottom: none !important;
    min-height: auto;
}

#RadzenLayoutMainSiteLayout > .rz-sidebar {
    background-color: var(--regla-topAndSide-bar);
    border: none;
    /*  This removes an ugly bottom line which the top header has making the component look cleaner. 
        Thi cant be higher than 100! goign higher will result in the sidenav going above Radzens masking element */
    z-index: 99;
}

#RadzenLayoutMainSiteLayout .rz-panel-menu {
    background-color: transparent !important;
}

    #RadzenLayoutMainSiteLayout .rz-panel-menu > li {
        border: none !important;
    }

#RadzenLayoutMainSiteLayout_ExpandSideBTN {
    background-color: transparent !important;
    font-weight: normal !important;
    text-align: start;
    padding-left: 1.2em;
}


/* ---------------------  Custom main site layout and Sidenav stuff ----------------------- */
.custom-site-system-groups-mobile {
    font-weight: normal !important;
}

    .custom-site-system-groups-mobile > li > .rz-navigation-item {
        background-color: transparent !important;
    }

.custom-site-system-groups-mobile-system-item > .rz-navigation-item-wrapper {
    background-color: transparent !important;
}

.custom-site-system-groups {
    font-weight: normal !important;
}

    .custom-site-system-groups > li > .rz-navigation-item-wrapper:hover {
        background-color: var(--regla-blue-700) !important;
    }

/*rz-state-focused*/
.custom-site-system-groups-system-permenantactivehover {
    background-color: var(--regla-blue-700) !important;
}

.custom-site-system-groups-system-currentlocation > .rz-navigation-item-wrapper:before {
    position: absolute;
    content: "";
    inset-block-start: 0;
    inset-block-end: 0;
    width: 4px;
    background-color: var(--rz-primary) !important;
}

.custom-site-system-groups-system-item > .rz-navigation-item-wrapper {
    background-color: var(--regla-topAndSide-bar) !important;
}

.custom-site-system-groups-system-item > .rz-navigation-item-wrapper:hover {
    background-color: var(--regla-blue-700) !important;
}


/* coordinates should be assigned in the style attribute programatically */
.custom-site-system-groups-system-item-popup {
    overflow: hidden;
    position: absolute;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    z-index: 99;
    background-color: var(--regla-blue-700) !important;
}