/* The navigation menu links */
.sidenav a {
  padding: 8px 0 8px 0;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #3a3a3a;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#wrapper {
  transition: margin-right .5s;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

    .treeview-animated.w-20 {
      width: 20rem;
      font-size: 14px;
    }

    .treeview-animated h6 {
      font-size: 1.4em;
    }

    .treeview-animated ul {
      position: relative;
      list-style: none;
      padding-left: 1em;
    }

    .treeview-animated-list li {
      padding: 0.2em 0 0 0.2em;
    }

    .treeview-animated-element {
      padding: 0.2em 0.2em 0.2em 0.6em;
      cursor: pointer;
      transition: all .1s linear;
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
      font-size:18px ;
    }

    .treeview-animated-element:hover {
      color: #3b3b3b !important;
      background-color: #fff;
    }

    .treeview-animated-element.opened {
      color: #3b3b3b;
      background-color: #fff;
    }

    .treeview-animated-element.opened:hover {
      color: #3b3b3b;
      background-color: #fff;
    }

    .treeview-animated-items .nested::before {
      content: "";
      display: block;
      position: absolute;
      background-color: grey;
      left: 5px;
      width: 5px;
      height: 100%;
    }
    .treeview-animated-items .nested > li > a > div {
        font-size:14px;

    }
    .treeview-animated-items .nested > li > a {
        padding-right:20px ;
    }
    .treeview-animated-items .activate {
        color: #3b3b3b;
        background-color: #fff;
    }
    .treeview-animated-items .closed {
      display: block;
      padding: 0.2em 0.2em 0.2em 0.4em;
      margin-right: 0;
      border-top-left-radius: 0.3em;
      border-bottom-left-radius: 0.3em;
    }


    .treeview-animated-items .closed:hover {
      color: #3b3b3b;
      background-color: #fff;
    }

    .treeview-animated-items .active2 {
      transition: all .1s linear;
      color: #2d2d2d;
    }

    .treeview-animated-items .active2 i {
      color: #fff;
    }

    .treeview-animated-items .active2:hover {
    }

    .treeview-animated-items .open {
      transition: all .1s linear;
    }

    .treeview-animated-items .open i {
      color: #fff;
    }


    .treeview-animated ul li .open div:hover {
      background-color: rgb(50, 160, 255);
    }

    .treeview-animated-items .closed .fa-angle-right {
      transition: all .1s linear;
      font-size: 20px;
    }

    .closed .fa-angle-right.down {
      position: relative;
      color: #f8f9fa;
      transform: rotate(90deg);
    }
@media (min-width: 768px){
    .sidenav {
        width:260px ;
    }
    #wrapper{
        margin-right:260px;
    }
}