.user-canvas-container, .sidebar-nav {
    position: fixed;
    background-color: rgb(255, 255, 255);
    /*border-top: 2px solid rgb(40, 125, 250);*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    max-width: 310px;
    overflow-x: hidden;
    z-index: 999;
    transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1) 0s;
    box-shadow: rgba(82, 85, 90, 0.1) 0px 0px 40px;
}

.user-canvas-container {
    max-width: 360px !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .user-canvas-container, .sidebar-nav {
        transform: translateX(-100%);
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .user-canvas-container, .sidebar-nav {
        transform: translateX(-100%);
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .user-canvas-container, .sidebar-nav {
        transform: translateX(-100%);
    }
}

.user-canvas-container .author-content, .sidebar-nav .author-content {
    padding: 20px;
}

.user-canvas-container.active, .sidebar-nav.active {
    transform: translateX(0px);
}

.user-canvas-container {
    left: auto;
    right: 0px;
    width: 350px;
    transform: translateX(100%);
}