@media (max-width: 991px){
    .offcanvas,
    .offcanvas-body{
        position: relative;
        transition: all 0.4s;
    }
    .offcanvas-body::after{
        content: "";
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: rgb(0 0 0 / 50%);
    }
    .offcanvas-sidebar{
        position: fixed;
        top: 0px;
        left: 0px;
        width: 350px;
        height: 100vh;
        padding: 20px 20px;
        padding-top: 65px;
        overflow: hidden;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        align-items: normal;
        z-index: 9999;
        transition: all ease .4s;
        background-color: #fff;
    }
    .offcanvas.active .offcanvas-sidebar{
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
    }
    .offcanvas.active .offcanvas-sidebar::-webkit-scrollbar{
        width: 7px;
    }
    .offcanvas.active .offcanvas-sidebar::-webkit-scrollbar-track{
        background-color: #ccc;
    }
    .offcanvas.active .offcanvas-sidebar::-webkit-scrollbar-thumb{
        background-color: #1bbde4;
    }
    #header-default .offcanvas.active .navbar-toggler-close{
        position: fixed;
        left: 288px;
        top: 15px;
        padding: 10px 15px;
        background-color: #db3833;
        color: #fff;
        border: 0;
        z-index: 99999;
        animation-duration: .4s;
        animation-name: fadeInLeft;
    }
    #header-default .offcanvas.active .navbar-toggler-close i:before{
        font-size: 24px;
    }

    /* login bar  */
    body.logged-in.admin-bar .offcanvas.active .navbar-toggler-close{
        margin-top: 32px;
    }
    body.logged-in.admin-bar .offcanvas-sidebar{
        padding-top: 100px;
    }
}
@media (max-width: 782px){
    /* login bar  */
    body.logged-in.admin-bar .offcanvas.active .navbar-toggler-close{
        margin-top: 46px;
    }
    body.logged-in.admin-bar .offcanvas-sidebar{
        padding-top: 110px;
    }
}

@media (max-width: 350px){
    .offcanvas-sidebar{
        width: 100%;
    }
    #header-default .offcanvas.active .navbar-toggler-close{
        left: inherit;
        right: 20px;
    }
}