.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: $base-margin*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;
}

span.activepage{
  color: $white;
}

/* Top-Bar Styles */
.contain-to-grid .top-bar{
  @extend .row;
}

.title-area{
  li.name{
    img{
      padding-top: $base-padding*2;
      height: 35px;
    }
  }
}

.top-bar{
  a{
    text-decoration: none;
  }
}

.dropdown-open-link{
  min-width: 201px; //The 1 px accounts for the border on the dropdown
}

.top-bar-nav.fixed{
  max-height: 50px;
}

ul.dropdown:not(.nested){
  -webkit-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
  -moz-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
  box-shadow: 0px 8px 20px -5px rgba(50,50,50,0.5);
  border-left: solid 1px darken($brand-blue-light, 5%);
  border-right: solid 1px darken($brand-blue-light, 5%);
  margin-top: -5px;
}

.dropdown{
  .nested{
    margin-top: -1px;
    border-right: solid 1px darken($brand-blue-light, 5%);
    border-left: solid 1px darken($brand-blue-light, 5%);

    li{
      background: lighten($brand-blue-light, 3%);
    }
  }

  .title.back{
    a{
      font-weight: bold;
    }
  }
}


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