/* Sidebar Styles */ .main-sidebar { background: #222; /* Dark background for sidebar */ color: #fff; width: 250px; /* Default width */ height: 100dvh !important; position: fixed; top: 20 !important; left: 0; transition: all 0.3s ease; /* Ensure sidebar content scrolls if needed */ } .sidebar-header { text-align: start; padding: 15px; background: #333; color: #fff; border-radius: 5px; margin-bottom: 15px; } .sidebar-header i { font-size: 1.5rem; margin-top: 10px; } .sidebar-header .menu-text { font-size: 14px; font-weight: bold; } /* Navigation Menu */ .nav-link { display: flex; align-items: center; color: #fff; padding: 10px; border-radius: 5px; transition: background-color 0.3s ease; text-decoration: none; } .nav-link:hover { background-color: #F8BE12; /* Highlight color on hover */ color: #fff; } .menu-text { margin-left: 10px; font-weight: bold; color: #fff; } /* Sidebar Icon Sizes */ .nav-icon { font-size: 20px; } /* Content Wrapper */ #content-wrapper { margin-left: 250px; padding: 15px; height: 700px !important; transition: margin-left 0.3s ease; } ul { display: flex; row-gap: 10px; margin-top: 40px; } i{ margin-top: -15px; margin-right: 10px; } /* Responsive Design */ @media (max-width: 991px) { .main-sidebar { display: none; z-index: 100 !important; } #content-wrapper { margin-left: 60px; } #sidebarToggle{ display: block !important; margin-left: 0px; } .m-0{ font-size: 15px !important; margin-left: 50px; } img{ display: none !important; } .main-header{ margin-left: -210px; z-index: 0; width: auto; } }