styles.css

/* This is a 'default' style that should try to match Dataverse.
* It should minimize the differences when using that 'Metrics' link
* from within Dataverse to get to the metrics page.
*
* See: https://guides.dataverse.org/en/latest/style/foundations.html
*/

a {
  color: #337AB7;
}
a:hover {
  color: #23527C;
}

/* metrics download */
.metrics-download-button {
  float: right;
  z-index: 25;
  position: relative;
  text-decoration: none;
}
/* metrics not-download, but referring to other download */
.metrics-download-redundant {
  float: right;
  color: lightgrey;
  z-index: 25;
  position: relative;
  text-decoration: none;
}

#title, #subtitle {
  text-align: center;
}
#dvtree {
  background: cornsilk;
  max-height: 250px;
  overflow-y: auto;
  padding-left: 1em;
}
#dvselect {
  background: aliceblue;
}
#selectString {
  padding-left: 1em;
}
#metrics-page-header {
 margin-bottom: 50px;
}

/* the graphs */
.viz {
  height: 500px;
  margin: 3em;
}

/* panels/cards containing the graphs */
.card {
    margin-bottom: 15px;
}
.card-header a {
  text-decoration: none;
}
/* collapse indicator */
.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}
/* separate graphs more clearly vertically */
/* bottom line for each column, except when on the last row within a panel body */
.card-body .row:not(:last-child) div[class^="col-"] {
  border-bottom: solid lightgrey 1px;
}