/* Intro */
.page-intro {
  display: block;
}

/* Intro */

/* Treeview */
.sidebar-treeview {
  overflow-y: auto;
}

.sidebar-treeview ul {
  padding-left: 1rem;
  list-style-type: none;
}

.sidebar-treeview ul.nested {
  margin-left: .1rem;
  padding-left: .3rem;
}

.sidebar-treeview i {
  margin-right: .15rem;
}

.sidebar-treeview a {
  display: block;
}

.sidebar-treeview .treeview-element {
  padding-left: .65rem;
}

.sidebar-treeview .leaf {
  padding: 0.1rem 0.1rem;
}

.sidebar-treeview .leaf.hovered {
  background-color: #e0e0e0;
  border-radius: .25rem;
}

.sidebar-treeview .leaf.clicked {
  color: #f8f9fa;
  border-radius: .25rem;
  background-color: #616161;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.sidebar-treeview .collapsed i {
  transition: all .1s linear;
}

.sidebar-treeview .collapsed.activated i {
  transform: rotate(90deg);
  transition: all .1s linear;
}

.sidebar-treeview .nested {
  display: none;
  border-left: 3px dotted gray;
}

/* Treeview */

/* Mask */
.sidebar-treeview,
.graph-cover {
  position: relative;
}

.textarea-mask img {
  width: 25%;
}

/* Mask */

/* Graph */
#source_textarea {
  background-color: white;
  border-top-left-radius: .125rem;
  height: 2.5rem;
}

#graph_query_button {
  padding: .3rem 1.5rem;
  font-size: 1rem;
}

.row-graph {
  height: 82vh;
}

/* Graph */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}