.navbar {
  padding: 15px 10px;
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 40px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
  box-shadow: none;
  outline: none !important;
  border: none;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  align-items: stretch;
}

#apd-sidebar {
  min-width: 200px;
  max-width: 200px;
  background: $app_sidebar_bg;
  color: #fff;
  transition: all 0.3s;
  .nav-link {
    box-shadow: unset !important;
    .apbd-tab-counter {
      position: absolute;
      top: 17px;
      right: 8px;
    }
  }
  &.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;

    .sidebar-header {
      h3, .CTAs {
        display: none;
      }
      strong {
        display: block;
      }
    }

    ul {
      > li {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      }
      ul a {
        padding: 10px !important;

      }
      li a {
        padding: 40px 10px 10px 10px;
        font-size: 0.85em;
        text-align: center;
        i {
          display: block;
          font-size: 1.8em;
          /* padding-left: -26px; */
          position: absolute;
          background: none;
          border: none;
          left: 79%;
          top: 26px;
          padding: 4px;
        }
        > span {
          &.apd-title {
            margin-left: -9px;
            margin-right: -9px;
            font-size: 12px;
            font-weight: bold;
            display: none;

          }
          &.apd-sub-title {
            display: none;

          }

        }
      }
    }

    .dropdown-toggle::after {
      top: auto;
      bottom: 10px;
      right: 50%;
      -webkit-transform: translateX(50%);
      -ms-transform: translateX(50%);
      transform: translateX(50%);
    }
  }

  ul {
    &.components {
      padding: 20px 0;
      border-bottom: 1px solid #47748b;
    }
    li {
      margin-bottom: 0 !important;
      border-bottom: 1px solid darken($app_sidebar_bg, 20);;
      a {
        text-align: left;
        position: relative;
        padding: 10px 10px 10px 45px;
        font-size: 1.1em;
        display: block;
        color:#fff;
        &:hover {
          color: #7386D5;
          background: darken($app_sidebar_bg, 10);
        }
        > span {
          &.apd-title {
            font-size: 14px;
            margin-top: 5px;


          }
          &.apd-sub-title {
            font-size: 10px;
          }
          display: block;
        }

        i {

          position: absolute;
          top: 50%;
          margin-top: -17px;
          margin-left: -41px;
          font-size: 18px;
          padding: 6px;
          border-radius: 50%;
          background: rgba(0, 0, 0, .3);
          border: 2px solid rgba(255, 255, 255, .2);
          margin-right: 10px;
          width: 32px;
          height: 32px;
        }
        &.active {
          background: darken($app_sidebar_bg, 10) !important;
          i {
            /*background: darken($app_sidebar_bg, 20);*/
            border-color: rgba(255, 255, 255, 0.5);
            color: #fff;
          }
          &::after {
            top: 50%;
            margin-top: -16px;
            content: "";
            position: absolute;
            right: -10px;
            border-left: 15px solid #061620;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            z-index: 99;
          }

        }

      }
    }
  }

  .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
    strong {
      display: none;
      font-size: 1.8em;
    }
  }

}

#apd-sidebar ul li.active > a,
a[aria-expanded="true"] {
  color: #fff;
  background: #6d7fcc;
}

a[data-toggle="collapse"] {
  position: relative;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #6d7fcc;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #7386D5;
}

a.article,
a.article:hover {
  background: #6d7fcc !important;
  color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 15px;
  min-height: 65vh;
  transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {

  #apd-sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
    overflow: hidden;
    &.active{
      overflow: unset !important;

    }

  }

  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }

  #apd-sidebar.active {
    margin-left: 0 !important;
  }

  #apd-sidebar .sidebar-header h3,
  #apd-sidebar .CTAs {
    display: none;
  }

  #apd-sidebar .sidebar-header strong {
    display: block;
  }

  #apd-sidebar ul li a {
    padding: 20px 10px;
    &::after {
      visibility: hidden;
    }

  }

  #apd-sidebar.active ul li a.active::after {
    visibility: visible;
  }

  #apd-sidebar ul li a span {
    font-size: 0.85em;
  }

  #apd-sidebar ul li a i {
    margin-right: 0;
    display: block;
  }

  #apd-sidebar ul ul a {
    padding: 10px !important;
  }

  #apd-sidebar ul li a i {
    font-size: 1.3em;
  }

  #apd-sidebar {
    margin-left: 0;
  }

  #apd-sidebarCollapse span {
    display: none;
  }
}