styles.css

* {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: sans-serif;
}

:root {
  --primary-color: grey;
  --secondary-color: lightgrey;
}

.clickable:hover {
  cursor: pointer;
  background-color: var(--secondary-color);
}

.active {
  background-color: var(--secondary-color);
}

.panel-padding {
  padding: 0.25rem 0.5rem;
}

.main {
  display: flex;
  justify-content: center;
  width: 50%;
  height: 30rem;
  margin: 0 auto;
  border: 1px solid var(--primary-color);
}

.left-panel {
  flex: 1;
  border-right: 1px solid var(--primary-color);
}

.left-panel .node {
  margin-left: 1rem;
}

.left-panel .active-node {
  background-color: var(--secondary-color);
}

.right-panel {
  flex: 4;
}

.right-panel .body .document-wrapper {
  position: relative;
}

.right-panel .body .document-icon {
  position: absolute;
  left: -2rem;
}

.right-panel .row {
  display: flex;
}

.right-panel .body .row {
  padding-bottom: 0.125rem;
}

.right-panel .body .row:last-child {
  padding-bottom: 0;
}

.text-container {
  display: flex;
  position: relative;
  padding: 0.125rem 0.25rem;
}

.text-container:target {
  background-color: var(--secondary-color);
}

.chevron {
  position: absolute;
  left: -.75rem;
}

.node:hover {
  cursor: pointer;
}

.header {
  border-top: 1px solid var(--primary-color);
  border-bottom: 1px solid var(--primary-color);
  color: var(--primary-color);
}

.row .cell-3 {
  flex: 3;
  margin-left: 4rem;
}

.row .cell-1 {
  flex: 1;
}

.row .cell-numeric {
  text-align: right;
}

@media only screen and (max-width: 1400px) {
  .main {
    width: 75%;
  }
}


@media only screen and (max-width: 1000px) {
  .main {
    flex-flow: column;
  }

  .left-panel {
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--primary-color); 
  }
}