.dash-sidebar-nav{
  font-size: 26px;
  list-style-type: none;
  margin: 24px 20px 0 0;
  padding: 0;
  width: 210px;

  @media (min-width: 1200px){width: 250px;}
  & li {
    & a{
      color: #555555;
      margin: 0 0 10px;
      text-align: right;
      text-transform: uppercase;
      padding-right: 20px;
      background-color: transparent;
      border-right: 3px solid #555555;
      text-shadow: none;
    }
  }
}

.dashboard{
  margin-top:40px;
  @media (max-width: 767px){margin-top:0;}

  & .dashboard-section{
    margin:60px 0 0 0;
    &:first-child{
      margin-top:0;
      border-bottom: 1px solid #e9e9e9;
    }
  }

  & .dashboard-unit{
    padding: 0;
    z-index: 1;
    overflow: hidden;
    padding-bottom:30px;

    & select{width:100%;}
    & h3{margin-bottom:60px;}

    &:hover{& .dashboard-img{
      border-color: rgba(153, 153, 153, 0.3);
      & img {.opacity(80);}
    }}

    & .dashboard-img-wrapper{
      text-align:center;
      @media (max-width: 979px) and (min-width: 768px){width:100%;}
      @media (min-width: 1200px) {text-align:left;}
    }
    & .dashboard-img {
      display:inline-block;
      margin:0 0 30px;
      max-width: 180px;
      max-height: 180px;
      .box-shadow(0 0 10px rgba(51, 51, 51, 0.9) inset);
      border: 10px solid #e9e9e9;
      .transition(all 0.2s);
      .border-radius(500px);

      z-index: -1;
      & img{
        .transition(all 0.2s);
        .border-radius(inherit);
        .opacity(40);
      }
      &.img-polaroid{padding:0;}
    }

    & .profile-info-wrapper{
      min-width:370px;
      text-align:center;
      @media (max-width:410px){width:100%;min-width:100%;}
      @media (max-width: 979px) and (min-width: 768px){width:100%;}
      @media (min-width: 1200px) {text-align:left; margin-left:0;}
    }
    & .profile-info{
      min-width:370px;
      @media (max-width:410px){width:100%; min-width:100%;}

      font-size: 30px;
      line-height: 1.5em;
      font-weight: 300;
      display:inline-block;
      text-align:left;

      & label {
        font-size: 30px;
        line-height: 1.5em;
        font-weight: 300;
        margin-right:10px;
        margin-bottom:0;

        @media (max-width:410px){width:100%;}
      }
    }

    & .payments{
      font-size:20px;
      margin-bottom:60px;
      max-width: 500px;
      @media (max-width:768px){margin: 0 auto;}
    }

    & .containers{
      margin-bottom:60px;
      max-width: 600px;
      font-size:18pt;
    }

    & .btn-charge{margin-top:10px;}

    & .ballance-label{
      margin-bottom:20px;
      font-size: 20px;

      & b{
        font-size:56px;
        line-height:70px;
        margin:0 auto;
        display:block;
        &.positive{color:green;}
        &.negative{color:red;}
      }
      & span { }
    }
  }
}
