body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

.native {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: green;
}
.introduced {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: red;
}
.cryptogenic {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: yellow;
}
.failed {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: pink;
}

.figure-caption {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: black;
        width: 300px;
}

#sticky-banner {
  position: sticky;
  top: 56px; /* adjust this value to match the height of your navbar */
  z-index: 1000; /* adjust this value to make sure the banner appears above other elements */
}



#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}
#main {
  height:100%;
  overflow:auto;
}

/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -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-left
  {
    left: -220px;
  }

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

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