.offcanvasX.intermediate {
    transition: none !important;
}

.offcanvasX {
    margin-top: 60px;
    width: 280px !important;

    min-height: calc(100vh - 60px) !important;   
    max-height: calc(100vh - 60px) !important;

    box-shadow: 9px 0px 12px -12px rgba(0,0,0,0.45) !important;
}


    .offcanvasX .nav-link {
        color: var(--bs-nav-link-color);
    }

    .offcanvasX ul li ul {
        margin-left: 1rem !important;
        /*not too much indent please*/
    }

@media screen {
    .offcanvasX.offcanvas-end.hiding + .container-fluid main .navbar-secondary, .offcanvasX.offcanvas-end.show + .container-fluid main .navbar-secondary, .offcanvasX.offcanvas-end.showing + .container-fluid main .navbar-secondary {
        padding-right: 280px !important;
    }

    .offcanvasX.offcanvas-start.hiding + .container-fluid main .navbar-secondary,
    .offcanvasX.offcanvas-start.show + .container-fluid main .navbar-secondary,
    .offcanvasX.offcanvas-start.showing + .container-fluid main .navbar-secondary {
        padding-left: 280px !important;
    }


    .offcanvasX.offcanvas-end.hiding + .container-fluid,
    .offcanvasX.offcanvas-end.show + .container-fluid,
    .offcanvasX.offcanvas-end.showing + .container-fluid {
        padding-right: 288px;
    }

    .offcanvasX.offcanvas-start.hiding + .container-fluid,
    .offcanvasX.offcanvas-start.show + .container-fluid,
    .offcanvasX.offcanvas-start.showing + .container-fluid {
        padding-left: 288px !important;
    }


    .offcanvasX.show:not(.hiding), .offcanvasX.showing {
        transform: none;
    }

    .offcanvasX.hiding, .offcanvasX.show, .offcanvasX.showing {
        visibility: visible;
    }

    .offcanvasX .nav-link:focus,
    .offcanvasX .nav-link:hover,
    .offcanvasX .nav-link.active {
        color: var(--bs-nav-link-hover-color);
    }
}