body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* BUTTON */
#menuBtn {
    background: #232f3e;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
}

/* OVERLAY */
#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    display: none;
    z-index: 999;
}

/* SIDEBAR */
#sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 320px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transition: 0.3s;
    overflow-y: auto;
}

/* HEADER */
.sidebar-header {
    /*background: #232f3e;*/
    color: #000;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* MENU */
.menu-content {
    padding: 15px;
}

.menu-content h4 {
    margin-top: 15px;
}

.menu-content ul {
    list-style: none;
    padding: 0;
}

.menu-content li {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.menu-content li:hover {
    background: #f3f3f3;
}

hr {
    border: 0.5px solid #ddd;
}



/* BUTTON */
#catBtn {
    padding: 10px 15px;
    /*background: #232f3e;*/
    color: #fff;
    border: none;
    cursor: pointer;
}

/* OVERLAY */
#catoverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 998;
}

/* SIDEBAR */
#catsidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
}

/* TABS */
.top-tabs, .bottom-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
}

#catsidebar .bottom-tab, .menu-top .tab {
    flex: 1;
    text-align: center;
    padding: 15px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

#catsidebar .bottom-tab.active, .menu-top .tab.active {
    border-bottom: 2px solid blue;
    font-weight: bold;
}

/* CONTENT */
#catsidebar .bottom-tab-content, .menu-top .tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
}

#catsidebar .bottom-tab-content.active, .menu-top .tab-content.active{
    display: block;
}

/* MENU LIST */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-list li{
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.menu2 li a{
    display: block;padding: 15px;
}
.categorymenus li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
}


.menu-list li .menulink {
        padding-left: 22px;
    position: relative;
}


.menu-list li .menulink img{
    position: absolute;
    left: 0;
    top: 0;
    max-width: 22px;
}

.menu-list li .menulink span{
     padding-left: 6px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}
.menu-list li a {
    color: #000;
    font-weight: bold;
    font-size: 16px;
    
}
.categorymenus li a{
    width: 100%;height: 100%;display: flex;
}

.menu-list li a:hover {
    color: #fff;

}
.menu-list li .menulink span:hover {
    color: #fff;

}
.menu-list li:hover {
    background: blue;
}
/* BOTTOM MENU */
.mobile-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background: #3170e1;
    /*border-top: 1px solid #ddd;*/
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    
    padding: 8px 0;
    z-index: 100;
}

.mobile-bottom-menu i.fa{
    font-size: 28px;
}

/* MENU ITEM */
.menu-item {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ICON */

.menu-item .icon {
    font-size: 20px;
    margin-bottom: 2px;
}
.icon {
    width: 22px;
    height: 22px;
    stroke: #000;
    stroke-width: 2;
    fill: none;
}

/* Active color */
.menu-item.active .icon {
    stroke: #fff;
}
.mobile-bottom-menu .icon{
    color: #fff;
} 
/* HIDE ON DESKTOP */
@media (min-width: 768px) {
    .mobile-bottom-menu {
        display: none;
    }

    
}