.sidebar {
  position: fixed;
  width: 200px;
  height: 85vh;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

.list-topic {
  font-size: 1.1rem;
  margin: 1rem 0;
  border-bottom: 1px solid;
}

.list-topic > a {
  color: var(--primary-color);
}

.list-subtopic > li {
  padding: 1rem;
}

.list-subtopic > li > a {
  font-size: 1.1rem;
  color: var(--secondary-color);
}

.sidebar .active-page {
  border-bottom: 2px solid var(--secondary-color);
}

@media only screen and (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .sidebar {
    display: none;
  }
}

@media only screen and (min-width: 850px) {
  .sidebar {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .sidebar {
    display: block;
    position: fixed;
    width: 200px;
    height: 85vh;
    overflow-y: scroll;
  }
}