/* Ensure the overall sidebar and menu list have no left padding */
.sidebar {
    height: calc(100vh - 45px);
    box-shadow: 0px 2px 6px 0px #777;
    position: fixed;
    z-index: 9999;
    width: 65px;
    background-color: whitesmoke !important;
    padding-left: 0 !important; /* Important to override any default Bootstrap/browser padding */
    padding-right: 0 !important;
}
.body-content-wrapper {
    max-width: calc(100vW - 65px);
    margin-left: 65px;
    padding-left: 0;
    padding-right: 0;
}

/* The arrow icon is replaced by chevron-right in the sidebar.js file*/

/* Main image item rules */
#sidemenu .sidebar-main-item.k-item { /* Added .k-item for specificity as sidebar-main-item is likely also k-item */
    width: 100%; /* Ensure the LI takes full width of its parent UL */
    display: block;
    padding-left: 0px !important; /* Remove any left padding on the LI itself */
    padding-right: 0 !important; /* Remove any right padding on the LI itself */
    /* Keep your vertical padding if needed, e.g., padding: 10px 0; */
    text-align: center; /* Adjust as per your icon/text alignment */
    /* Add transition for smoother hover effects if you're not using it on the .k-link */
    transition: background-color 0.3s ease;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-top: 3px;
    margin-bottom: 3px;
}

/*  Main item hover rule */
#sidemenu .sidebar-main-item.k-item.k-hover {
    background-color: white;
}

/* Adjustments for expanded menu items */
#sidemenu .sidebar-main-item .k-menu-item {
    min-width: 160px;
    margin-top: 2px;
    margin-bottom: 2px;
    line-height: 12px; /* Keep line-height, no hover */
    padding-top: 2px !important; /* 2nd Level MENU - height is smaller */
    padding-bottom: 2px !important;
}
/* To get a minimum width on pop out menus*/
#sidemenu .sidebar-main-item .k-menu-item .k-menu-link {
    height: 32px;
}
/* This will set the width of any menu item with a sub menu - in order to move the chevron right */
#sidemenu .sidebar-main-item .sidebar-menu-link {
    min-width: 110px;
    text-align: start;
}
/*Color of active menu items*/
#sidemenu .sidebar-main-item .k-menu-item .k-menu-link.k-active,
#sidemenu .sidebar-main-item .k-menu-group .k-item > .k-link:active {
    background-color: #ededed;
    color: var(--kendo-color-on-app-surface, #424242);
}