.dashboard-title{
  font-size: $base-font-size*0.875;
  font-weight: normal;
  color: $charcoal;
  text-transform: uppercase;
  background: $white;
  padding: $base-padding*3;
}

.dashboard-title{
  &:first-child{
    @extend .mt0;
  }
}

.dashboard-nav{
  width: 100%;
  background: $white;
  display: block;
  margin-top: $base-margin*2;
  text-transform: capitalize;
  padding: $base-margin*0;
  overflow: hidden;

  a{
    font-family: $font-family-sans-serif;
    font-size: $base-font-size*1.125;
    color: $charcoal;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 18px;

    span{
      margin-top: $base-margin*3;
    }

    &.nav-open ~ .inner-nav{
      max-height: 200px;
      visibility: visible;
      opacity: 1;
      margin-top: 0;

      .sub-nav:active,
      .sub-nav:focus{
        text-decoration: underline;
      }
    }
  }

  &.activepage{
    background: $brand-blue-light;

    a{
      color: $white;
      max-height: inherit;
    }

    span.nav-icon{
      color: $white;
    }

    .inner-nav{
      max-height: 200px;
      visibility: visible;
      opacity: 1;
      margin-top: 0;
    }

    a.sub-nav.activepage{
      text-decoration: underline;
    }
  }

  .inner-nav{
    li:hover,
    li:active{
      text-decoration: underline;
    }
  }


  span{
    display: block;
    font-size: $base-font-size*0.75;
  }
}

.inner-nav{
  visibility: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.15s ease-out;
  -moz-transition: max-height 0.15s ease-out;
  transition: max-height 0.15s ease-out;
  margin-left: 74px;
  margin-top: -$base-margin*3;
  list-style: none;

  li{
    color: $white;
  }

  a{
    padding: 0 0 $base-margin*2 0;
    font-size: $base-font-size*0.875;
  }
}

a.activepage{
  background: $brand-blue-light;
  color: $white;
}

.sidebar{
  @extend .white-trans;
  padding: $base-padding*4;

  p{
    margin-bottom: $base-margin*2;
  }
}

span.nav-icon{
  width: 40px;
  height: 29px;
  float: left;
  margin: $base-margin*2;
  margin-top: $base-margin*4;
  font-size: $base-font-size*1.5;
  color: $smoke;
  text-align: center;
  @include breakpoint(small only){
    margin: $base-margin*2 $base-margin $base-margin*2 0;
    color: $white;
  }
}

span.activepage{
  color: $white;
}

.sub-nav{
  margin-left: -14px;
}