.sidebar {
    position: fixed;
    display: block;
    top: 50px;
    bottom: 0;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    min-height: 100%;
    max-height: none;
    background-color: #f5f5f5;
    padding: 5px;
}

.sidebar-left {
    left: 0;
    border-right: 1px solid #eee;
}

.sidebar-right {
    right: 0;
    min-width: 300px;
    max-width: 300px;
    border-left: 1px solid #eee;
}

.calcite-sidebar {
    
   
}

/* Sidebar navigation */
.nav-sidebar {
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

.nav-sidebar > li > a {
    padding-right: 20px;
    padding-left: 20px;
    color: #5bc0de;
}

.nav-sidebar > li > a:visited {
    background-color: #f5f5f5;
}

.nav-sidebar > li > a:hover {
    color: #428bca;
    /*background-color: lightgray;*/
}

.nav-sidebar > li > a:active {
    background-color: #f5f5f5;
}

/* OFF CANVAS */
/* css to override hiding the sidebar according to different screen sizes */
.row .sidebar.sidebar-left.sidebar-xs-show {
    left: 0;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
}

/*right sidebar is untested */
.row .sidebar.sidebar-right.sidebar-xs-show {
    right: 0;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    -moz-transform: translate(0,0);
    transform: translate(0,0);
}

@media (min-width: 768px) {
    .row .sidebar.sidebar-left.sidebar-sm-show {
        left: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        -moz-transform: translate(0,0);
        transform: translate(0,0);
    }

    /*right sidebar is untested */
    .row .sidebar.sidebar-right.sidebar-sm-show {
        right: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        -moz-transform: translate(0,0);
        transform: translate(0,0);
    }
}

@media (min-width: 992px) {
    .row .sidebar.sidebar-left.sidebar-md-show {
        left: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        -moz-transform: translate(0,0);
        transform: translate(0,0);
    }

    .row .sidebar.sidebar-right.sidebar-md-show {
        right: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        -moz-transform: translate(0,0);
        transform: translate(0,0);
    }
}

@media (min-width: 1170px) {
    .row .sidebar.sidebar-left.sidebar-lg-show {
        left: 0;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }

    .row .sidebar.sidebar-right.sidebar-lg-show {
        right: 0;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
}

/* animation class - optional: without it the sidebar would just pop in and out*/
.sidebar-animate {
    -webkit-transition: -webkit-transform 300ms ease;
    -moz-transition: -moz-transform 300ms ease;
    -o-transition: transform 300ms ease;
    transition: transform 300ms ease;
}

/* Left panel positioning classes */
.sidebar.sidebar-left {
    -webkit-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -ms-transform: translate(-100%,0);
    -o-transform: translate(-100%,0);
    transform: translate(-100%,0);
}

.sidebar.sidebar-left.sidebar-open {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}

.sidebar.sidebar-right {
    -webkit-transform: translate(100%,0);
    -moz-transform: translate(100%,0);
    -ms-transform: translate(100%,0);
    -o-transform: translate(100%,0);
    transform: translate(100%,0);
}

.sidebar.sidebar-right.sidebar-open {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}