html, body {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}

.fill {
  height: calc(100vh - 80px);
}

.transition-width {
  transition: width 1s ease-in-out;
}

body {
  padding-top: 60px;
  /* space for the top nav bar */
}
.poc_header{
  font-size: 25px;
    margin-left: 20px;
    vertical-align: bottom;
}
#sidebar {
  overflow: auto;
  width: 100%;
  height: calc(100vh - 115px);
}

#apsViewer {
  width: 100%;
}

#dashboard {
  overflow: auto;
  height: calc(94vh);
}

.dashboardPanel {
  width: 100%;
  height: calc(44vh);
  padding: 4%;
  display: block;
}

.dashboardTitle {
  margin-bottom: 10px;
}


#tree {
  margin: 0.5em;
}

@media (max-width: 768px) {
  #sidebar {
      width: 100%;
      top: 3em;
      bottom: 75%;
  }
  #preview {
      width: 100%;
      top: 25%;
      bottom: 0;
  }
}

.icon-hub:before {
  background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/apps-16.svg); /* or https://raw.githubusercontent.com/primer/octicons/main/icons/stack-16.svg */
  background-size: cover;
}

.icon-project:before {
  
  background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/project-16.svg); /* or https://raw.githubusercontent.com/primer/octicons/main/icons/organization-16.svg */
  background-size: cover;
}

.icon-my-folder:before {
  background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/file-directory-16.svg);
  background-size: cover;
}

.icon-item:before {
  background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/file-16.svg);
  background-size: cover;
}

.icon-version:before {
  background-image: url(https://raw.githubusercontent.com/primer/octicons/main/icons/clock-16.svg);
  background-size: cover;
}