/* 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;
}
#sidemenu{
    border: 0px;
}
#sidemenu > li.sidebar-main-item > div > ul > li > div > ul > li,
#sidemenu > li.sidebar-main-item > div > ul > li {
    min-width: 10rem;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.sidebar-main-item {
    margin-top: 0 !important;    
}
.sidebar-main-item.k-hover {
    background-color: white !important;
}
.sidebar-main-item > .k-link.k-menu-link {
    padding-left: 2px !important;
    padding-right: 0px !important;
}
.k-menu-expand-arrow {
    margin-inline-end: 0 !important;
}
.k-menu-group {
    background-color: white !important;
}

.k-menu-expand-arrow-icon:before,
.k-icon.k-i-arrow-60-right.k-menu-expand-arrow:before {
    content: "\e014";
    margin: 0px 0px 0px 0px !important;
}   

/* Ensure the overall sidebar and menu list have no left padding */
.sidebar {
    padding-left: 0 !important; /* Important to override any default Bootstrap/browser padding */
    padding-right: 0 !important;
}

#sidemenu.k-menu {
    padding-left: 0 !important; /* Crucial: Remove default padding from the UL */
    margin-left: 0 !important; /* And any default margin */
    width: 100%; /* Ensure the UL takes full width */
}

#sidemenu:hover .k-menu {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

li#sidemenu_mn_active { /* Fills top + bottom of sidebar menu item with white color + make it larger */
    background-color: #fff;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

a.k-link.k-menu-link {
    box-shadow: none !important; /* For each menu link, double lines top + bottom are removed */
    margin-right: 10px; /* Menu with narrow text will have wider space  */
}

/* Your .sidebar-main-item (which is also a k-item) */
.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: 0 !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: 5px !important;
    padding-bottom: 5px !important;
}

/*  Kendo hover rule */
.k-hover > .k-link {
    color: white;
}

/* IMPORTANT: Override Kendo's default padding on the .k-link */
#sidemenu .k-item .k-link {
    padding-left: 12px !important; /* Remove Kendo's left padding on the link */
    padding-right: 0px !important; /* Remove right padding also for full width */
    width: 100%; /*Ensure the link fills the width of its parent LI */
    box-sizing: border-box; /*Include padding/border in the element's total width 
                                    You can put your desired vertical padding here, e.g.: */
    /* If using flexbox inside .k-link for icon/text alignment: */
    display: flex;
    justify-content: flex-start; /* Default for collapsed sidebar */
    align-items: center;
    transition: padding-left 0.3s ease; /*For smooth text alignment on expand */
    line-height: 2px;
}

/* Adjustments for expanded sidebar */
.sidebar:hover #sidemenu .k-item .k-link {
    line-height: 12px;
}

.sidebar #sidemenu .k-item .k-link { /* Main Icons + 2nd Level Menu */
    line-height: 12px; /* Keep line-height, no hover */   
    padding-top: 8px !important; /* 2nd Level MENU - height is smaller */
    padding-bottom: 7px !important;
}

/* Adjustments for menu items ie., Workorders > Workorders */
.sidebar-menu-link {
    display: flex;
    justify-content: left;
    min-width: 7rem; /* spacing after arrow */
}

/* If you have a separate div inside .k-link for the icon, ensure it doesn't have excess margin */
.k-link .k-icon,
.k-link .k-image, /* If using k-image for icons */
.k-link .k-menu-link-text {
    margin-left: 0;
    margin-right: 0;
}

.mainIcons#sidemenu { /* Main square icons  */
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /*margin-top: 5px;*/
}

.k-menu-link-text {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2; /* Report Menu ie., Payroll - adds more height */
}

.k-menu-expand-arrow {
    margin-inline-end: -4px;
    display: inline-flex;
    flex-flow: row nowrap;
    min-width: 2rem; /* Reports Icon Arrow - 2nd Level Menu - adds spacing after arrow */
}