body {
  background-color: #ececec;
  margin: 0 auto;
}
#navbar {
  background-color: #625c5c;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
}
#logo-container {
  width: 300px;
  float: left;
  display: flex;
  justify-content: flex-start;
  padding: 15px;
}
#logo-container img {
  height: 60px;
  margin-right: 15px;
}
#logo-container h2 {
  display: inline-block;
  color: white;
}
#profile-container {
  width: auto;
  float: right;
}
#profile-container > img {
  height: 60px;
  border-radius: 50%;
}
.main {
  height: calc(100vh - 81px);
  position: relative;
  overflow: hidden;
}
#sidebar {
  background-color: #625c5c;
  height: 100%;
  width: 150px;
  float: left;
}
#container > h2 {
  color: #555;
  margin: 0 0 15px 0;
  text-decoration: underline;
}
#container {
  padding: 15px;
  float: left;
  width: calc(100vw - 180px);
}
.green-bg {
  background-color: #06ce83;
}
.purple-bg {
  background-color: #a25aff;
}
.red-bg {
  background-color: #f24e1d;
}
.cyan-bg {
  background-color: #1cbcfd;
}
#tile-container,
#circle-container {
  display: flex;
}
#tile-container {
  margin-bottom: 15px;
}
.tile {
  height: 200px;
}
.tile h2,
.tile h3 {
  color: white;
}
.tile,
.circle,
.chart {
  width: calc((100%) / 4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.circle,
.chart {
  height: calc((100vw - 180px) / 4);
}
.circle {
  border-radius: 50%;
}
#tile-container > div,
#circle-container > div {
  margin-right: 15px;
}
#tile-container > div:last-child,
#circle-container > div:last-child {
  margin-right: 0;
}
.inner-one {
  width: 70%;
  height: 70%;
}
.inner-one h2,
.inner-four h2 {
  color: #fff;
}
.inner-two {
  width: 90%;
  height: 90%;
  background-color: #fff;
}
.inner-two h2 {
  color: #555;
}
.inner-three {
  width: 90%;
  height: 90%;
  background-color: #ff7262;
}
.inner-four {
  width: 70%;
  height: 70%;
}
.inner-three,
.inner-four,
.inner-two,
.inner-one {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bar {
  width: 15px;
  position: absolute;
  overflow: hidden;
}
.chart {
  position: relative;
}
.chart div {
  bottom: 0;
}
.one {
  left: 0;
  height: calc((100%) - 30px);
}
.two {
  left: 45px;
  height: calc(100% - 10px);
}
.three {
  left: 90px;
  height: calc(100% - 70px);
}
.four {
  left: 135px;
  height: calc(100% - 100px);
}
.five {
  left: 180px;
  height: calc(100% - 20px);
}
.six {
  left: 225px;
  height: calc(100% - 50px);
}
.line {
  width: 100%;
  height: 15px;
  background-color: #625b5b;
  position: absolute;
}
#sidebar nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 30px 30px 30px;
}
#sidebar nav a {
  color: #fff;
  padding: 5px;
}
#sidebar nav a:first-child {
  padding-top: 0;
}
#sidebar nav a.active {
  color: #06ce83;
  text-decoration: none;
}