.sidebar {
  margin: 0;
  margin-top: 60px;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}


.offcanvas-body {
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.offcanvas-body nav ul li a {
  color: #fff;
}

.offcanvas-body nav ul li a:hover {
  color: #555;
}

.offcanvas-body nav ul li a:active {
  color:grey;
}

.offcanvas-body nav ul li .dropdown a:active{
  color: #555;
}

.offcanvas-body nav ul li .dropdown a{
  color: #000;
}

/* .offcanvas-body.navbar.navbar-nav.nav-item.nav-link a {
  color: #fff;
} */

/* .offcanvas-body.nav-item {
  background-color: #111;
  color: #f1f1f1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
} */

/* .offcanvas-body .offcanvas-body.nav-item.nav-link.dropdown.nav-item.nav-link a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  background-color: rgb(112, 9, 9);
  display: block;
  transition: 0.3s;
} */

/* .offcanvas-body.navbar.navbar-nav.nav-item a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  background-color: #111;
  display: block;
  transition: 0.3s;
} */

/* .navbar-nav.nav-item:hover{
  color:#fdfdfe;
  background-color:#555;
} */

/* .navbar-nav .dropdown.active>a{
  color:#fff;
  background-color:transparent;
}

.navbar-nav.nav-item a:hover{
  color:#fdfdfe;
  background-color:#555;
}

nav.navbar-nav.nav-item a:hover{
  color:#a6a6cc;
  background-color:#555;
}

.navbar-nav.nav-item.nav-link:hover{
  color:#fdfdfe;
  background-color:#000;
} */
/* @media screen and (min-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
} */