$leftWidth: 200px;
$leftPaddingX: 30px;

body {
  margin: 0;
  padding: 0;
}

.app-container {
  .left {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: $leftWidth;
    min-height: 500px;
    padding: 20px $leftPaddingX;
    .sidebar {
      padding: 0;
      list-style-type: none;
      a {
        display: block;
        text-decoration: none;
        color: #35495e;
        padding: 5px 10px;
        border-radius: 4px;
        letter-spacing: .25px;
      }
      .router-link-active {
        color: #fff;
        background-color: #41b883;
      }
      .router-link-active + .sub {
        display: block;
      }
      li {
        font-size: 16px;
        .sub {
          display: none;
          padding-left: 20px;
          list-style-type: none;
          li {
            font-size: 14px;
          }
          .router-link-active {
            color: #41b883;
            background: #fff;
          }
        }
      }
    }
  }
  .right {
    margin-left: $leftWidth + $leftPaddingX * 2;
    border-left: 1px solid #c6c6c6;
    h1 {
      margin: 0;
      padding: 30px;
      text-align: center;
    }
    h2 {
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    .chart-container {
      width: 80%;
      height: 300px;
      margin: auto;
      padding-bottom: 50px;
    }
    .tall {
      height: 600px;
    }
  }
}
