/* ----Sidebar--------------------------------------------------*/
body, html, .row-offcanvas { height: calc(100vh - 52px); }

body { padding-top: 50px; }

#sidebar { width: inherit; min-width: 220px; max-width: 220px; background-color: #2f2f2f; float: right; height: 100%; position: relative; overflow-y: auto; overflow-x: hidden; padding-top: 7px; }
#main { height: 100%; overflow: auto; padding-top: 7px; }

.menu-toggle { position: relative; float: right; margin-right: 15px; padding: 9px 10px; margin-top: 8px; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid #333; border-radius: 4px; }
    .menu-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background: #333; }
        .menu-toggle .icon-bar + .icon-bar { margin-top: 4px; }
    .menu-toggle:hover, .menu-toggle:focus { background-color: #333; outline: 0; }
        .menu-toggle:hover .icon-bar, .menu-toggle:focus .icon-bar { background: #fff; }

@media (min-width:1025px) {
    .menu-toggle { display: none; }
}

@media screen and (max-width: 1024px) {
    .row-offcanvas { position: fixed; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: calc(100% + 220px); }

    .row-offcanvas-right { right: -220px; }

        .row-offcanvas-right.active { right: 0; }

    .sidebar-offcanvas { position: absolute; top: 0; }
}