.main .mainContentBox.multi-cols {
}
.main .mainContentBox.multi-cols .sidebar {
    flex: 0 0 var(--dgl-sidebar-width);
}


@media (min-width: 768px) {
    .main .mainContentBox.multi-cols {
    }
    .main .mainContentBox.multi-cols .sidebar {
        flex: 0 0 var(--dgl-sidebar-width);
        width: var(--dgl-sidebar-width);
    }
}
@media (min-width : 1200px) {
    .main .mainContentBox.multi-cols {
        display: flex;
        gap: var(--dgl-sidebar-gap);
    }
    .main .mainContentBox.multi-cols .mainBody {
        flex: 1 1 calc(100% - var(--dgl-sidebar-width) - var(--dgl-sidebar-gap));
        max-width: calc(100% - var(--dgl-sidebar-width) - var(--dgl-sidebar-gap));
    }
    .main .mainContentBox.multi-cols .sidebar {
        flex: 0 0 var(--dgl-sidebar-width);
        width: var(--dgl-sidebar-width);
    }

    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile {
        display: flex;
        flex: 0 0 100%;
        position: -webkit-sticky;
        position: sticky;
        top: 15rem;
        bottom: initial;
        z-index: initial;
        flex-direction: column;
        max-width: none;
        visibility: initial !important;
        background-color: transparent;
        background-clip: border-box;
        outline: initial;
        transition: none;
    }
    body.ecommerce.sticky-header .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile {
        top: 4rem;
    }
    .main .mainContentBox .sidebar>button[data-bs-target="#sidebar_offcanvas"] {
        display: none;

    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile .offcanvas-header {
        align-items: initial;
        justify-content: left;
        padding: 0 0 0 0;
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile .offcanvas-header .offcanvas-title {
        line-height: 2.4rem;
        font-size: 1.5rem;
        padding: 0 0 1.5rem 0;
        margin: 0 0 1.5rem 0;
        border-bottom: solid 1px var(--dgl-color-separators);
        display: block;
        flex: 1;        
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile .offcanvas-header .btn-close {
        display: none;
    }
    .main .mainContentBox .sidebar>.offcanvas-backdrop {
        display: none;
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile .offcanvas-body {
        flex-grow: 1;
        padding: initial;
        overflow-y: initial;
    }
}


@media (max-width : 1199px) {
    .main .mainContentBox .sidebar>button[data-bs-target="#sidebar_offcanvas"] {
        position: fixed;
        top: var(--dgl-offcanvas-toggler-top);
        left: calc(var(--dgl-offcanvas-toggler-lef) -var(--dgl-page-scrollbars-width));
        transform: translate(-100%,0);
        background-color: var(--dgl-offcanvas-toggler-bg);
        z-index: 99;
    }
    body.sticky-header .main .mainContentBox .sidebar>button[data-bs-target="#sidebar_offcanvas"] {
        top: var(--dgl-offcanvas-toggler-sticky-top);
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile {
        position: fixed;
        width : 100%;
        max-width: var(--dgl-sidebar-width);
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile.offcanvas-end-lg {
        top: 0;
        right: 0;
        transform: translateX(100%);
    }
    .main .mainContentBox .sidebar>.sidebarContent.offcanvas.offcanvas-mobile.show {
        transform: none;
    }
}