@media (max-width: 1080px) {
    #sidemenu-wrapper {
        top: 54px;
        bottom: 0px;
        /* height: calc(100vh - 135px); */
    }
  }
  
  /* Show screen-lg and hide screen-sm for screens larger than 1080px */
  @media (min-width: 1081px) {
    #sidemenu-wrapper {
        top: 57px;
        height: calc(100vh - 57px);
    }

  }

#sidemenu-wrapper {
    position: fixed;
    left: -225px;
    /* Start hidden outside the screen */
    width: 225px;
    z-index: 3000;
    background-color: var(--jf-theme-sidemenu-color);
    /* background-color: rgb(54, 54, 82, 1); */
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: left 0.3s ease-in-out;
    /* Smooth slide-in animation */

}


/* Class to show the menu */
#sidemenu-wrapper.sidemenu-closed {
    box-shadow: none!important;
}
/* Class to show the menu */
#sidemenu-wrapper.sidemenu-open {
    left: 0;
}

#sidemenu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2999 !important;
    display: none;
}

#sidemenu-wrapper .sidemenu-content {
    display: flex;
    flex-direction: column;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    height: 100%;
}

#sidemenu-wrapper .sidemenu-content .sidemenu-content-item {
    margin-top: 0.5rem;
    font-size: 16px;

    a:not(.logoutBtn) {
        text-decoration: none;
        color: inherit;
    }

    a:not(.logoutBtn):hover {
        color: var(--jf-theme-primary-light-color) !important;
    }


    a.logoutBtn {
        text-decoration: none;
    }

    a.logoutBtn:hover {
        color: #ff1027 !important;
    }
}

#friends-badge,
#access-requests-badge {
    background-color: #ff5969;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 4px;
}

#sidemenu-wrapper .sidemenu-content .sidemenu-content-info {
    margin-top: 0.5rem;
    font-size: 11px;
    color: var(--jf-theme-sidemenu-text-color);
}