#sidePanel:not(.active) {
    transition: left .25s ease-in-out, top .25s ease-in-out;
}

@media (min-width: 992px) {
    #sidePanel {
        height: 100vh;
    }

    #sidePanelSlider {
        cursor: grab;
        top: 50%;
        right: 0;
        height: 100%;
        width: 32px;
        transform: translate(50%, -50%);
    }

    #side-panel-handle {
        height: 128px !important;
    }
}

@media (max-width: 992px) {
    #sidePanel {
        height: 75vh;
    }

    #sidePanelSlider {
        right: unset;
        left: 50%;
        top: 0;
        height: 32px;
        width: 100%;
        transform: translate(-50%, -50%);
    }

    #side-panel-handle {
        width: 128px !important;
    }
}