/*
 * Off Canvas
 * --------------------------------------------------
 */
.row-offcanvas .sidebar-offcanvas .list-group {
    position: relative;
}

.sidebar-offcanvas {
    height: 100vh;
}

@media (max-width: 992px) {
    .main-container {
        overflow: hidden;
    }

    .navbar-toggle {
        display: inline-block;
    }

    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
        margin-right: 0;
        margin-left: 0;
    }

    .row-offcanvas {
        position: relative;
        -webkit-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }

        .row-offcanvas .sidebar-offcanvas .list-group {
            position: fixed;
            width: 70%;
            z-index: 100;
            top: 90px;
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            -ms-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }

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

        .row-offcanvas-left{
            left: 0;
        }



    .row-offcanvas-right .sidebar-offcanvas, .row-offcanvas .sidebar-offcanvas .list-group  {
        right: -70%; /* 6 columns */
    }

    .row-offcanvas-left .sidebar-offcanvas, .row-offcanvas .sidebar-offcanvas .list-group  {
        left: -70%; /* 6 columns */
    }
    .row-offcanvas-left.active .sidebar-offcanvas .list-group {
        right: 0; /* 6 columns */
    }
    .row-offcanvas-left.active .sidebar-offcanvas .list-group {
        left: 0; /* 6 columns */
    }

    .row-offcanvas-right.active {
        right: 70%; /* 6 columns */
            margin-right: 0;
    }

    .row-offcanvas-left.active{
        left: 70%; /* 6 columns */
            margin-left: 0;
            margin-right: -30px;
    }
    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 70%; /* 6 columns */
        height: 100vh;
        padding-right: 0;
    }
}