.app__aside,
.app__content {
  display: block;
}
.app__aside {
  z-index: 10;
}
.app__aside--black,
.app__toolbar--black {
  background-color: #4a4a4a;
  color: #f4f5f5;
}
.app__title--black {
  background-color: #605f5f;
  color: #f4f5f5;
}
.app__content--black {
  background-color: #292929;
  color: #f4f5f5;
}
.app__aside--blue,
.app__toolbar--blue {
  background-color: #388cbf;
  color: #f4f5f5;
}
.app__title--blue {
  background-color: #5bb2e7;
  color: #f4f5f5;
}
.app__content--blue {
  background-color: #216995;
  color: #f4f5f5;
}
.app__aside--gray,
.app__toolbar--gray {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.app__content--white,
.app__title--gray {
  background-color: #f3f3f3;
  color: #626262;
}
.app__content--gray {
  background-color: #dfdfdf;
  color: #626262;
}
.app__aside--green,
.app__toolbar--green {
  background-color: #5ee6a5;
  color: #408665;
}
.app__title--green {
  background-color: #96f5c7;
  color: #3b7d5e;
}
.app__content--green {
  background-color: #4fd695;
  color: #2b694c;
}
.app__aside--orange,
.app__toolbar--orange {
  background-color: #ffbc89;
  color: #b5792b;
}
.app__title--orange {
  background-color: #ffc794;
  color: #b5792b;
}
.app__content--orange {
  background-color: #fba05a;
  color: #8a5817;
}
.app__aside--purple,
.app__toolbar--purple {
  background-color: #d08bfa;
  color: #3f0658;
}
.app__title--purple {
  background-color: #ddaff9;
  color: #2c063e;
}
.app__content--purple {
  background-color: #ca89f2;
  color: #340f45;
}
.app__aside--red,
.app__toolbar--red {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.app__title--red {
  background-color: #e84a4a;
  color: #ffe3e3;
}
.app__content--red {
  background-color: #c22828;
  color: #ffe3e3;
}
.app__aside--yellow,
.app__toolbar--yellow {
  background-color: #fffba4;
  color: #7d7945;
}
.app__title--yellow {
  background-color: #fffcbd;
  color: #847e37;
}
.app__content--yellow {
  background-color: #fffba3;
  color: #7d7945;
}
.app__aside--white,
.app__title--white,
.app__toolbar--white {
  background-color: #fff;
  color: #949494;
}
.app__aside {
  position: absolute;
  top: 0;
  left: 0;
}
.app {
  position: relative;
}
.app__title,
.app__toolbar {
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
}
.app__aside,
.app__content {
  min-height: 100vh;
}
.app__aside,
.app__content {
  margin: 0;
}
.app__aside,
.app__content {
  width: 100%;
}
.app__aside {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  left: -100%;
  transition: 0.4181s left ease-out;
}
@media (min-width: 1100px) {
  .app__aside,
  .app__content {
    margin: 0;
  }
  .app__aside {
    width: 37.5%;
  }
}
@media (min-width: 1440px) {
  .app__aside {
    left: 0%;
  }
  .app__aside,
  .app__content {
    margin: 0;
  }
  .app__aside {
    width: 31.25%;
  }
}
@media (min-width: 1600px) {
  .app__aside,
  .app__content {
    margin: 0;
  }
  .app__aside {
    width: 18.75%;
  }
}
.app__aside--expanded {
  left: 0%;
}
@media (min-width: 1100px) {
  .app__content {
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .app__content {
    left: 31.25%;
  }
  .app__content {
    width: 68.75%;
  }
  .app__content {
    position: relative;
  }
}
@media (min-width: 1600px) {
  .app__content {
    left: 18.75%;
  }
  .app__content {
    width: 81.25%;
  }
  .app__content {
    position: relative;
  }
}
.app__title,
.app__toolbar {
  height: 54px;
  line-height: 1;
}
.app__title,
.app__toolbar {
  padding: 1.5em 2em;
}