.popover-slide-left {
    position: fixed;
    left: 0px;
    top: 57px;
    overflow-y: auto;
    padding-top: 2.5rem !important;
    transform: translateX(calc(-100% - 250px));
    width: 100%;
    height: calc(100vh - 57px);
    z-index: 1025;
    background-color: #fff;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0px -4px 28px rgba(0,0,0,.25);
    clip-path: inset(0px -70px 0px 0px);
    transition: 0.3s all;
}

.popover-slide-right {
    position: fixed;
    right: 0px;
    top: 57px;
    overflow-y: auto;
    padding-top: 2.5rem !important;
    transform: translateX(100%);
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100vw;
    height: calc(100vh - 57px);
    z-index: 1025;
    background-color: #fff;
    border-left: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    clip-path: inset(0px 0px 0px -70px);
    transition: 0.3s all;
}

@media (min-width: 992px) {
    .popover-slide-left {
        left: 250px;
        width: calc(90% - 250px);
        padding-top: 1.5rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    body.sidebar-collapse .popover-slide-left {
        width: calc(90% - 250px);
        left: 6.6rem;
        padding-top: 1.5rem;
        padding-left: 3rem;
        padding-right: 3rem ;
    }
    body.sidebar-collapse .popover-slide-w50 {
        width: calc(50% - 6.6rem);
    }
    .popover-slide-right {
        width: calc(90% - 250px);
        padding-top: 1.5rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .popover-slide-w50 {
        width: calc(50% - 250px);
    }
}

.popover-slide-active {
    transform: translateX(0%) !important;
    box-shadow: 0px -4px 28px rgba(0,0,0,.25);
}

.close-popover-left {
    position: fixed;
    left: 8px;
    top: 15px;
}
.close-popover-right {
    position: fixed;
    right: 8px;
    top: 15px;
}

#close_popover {
    position: fixed;
    left: 8px;
    top: 15px;
}