header {
  padding: 1em;
}

#text-area{
  flex: 1;
  order: 2;
  background: #333;
  margin-left: 20px;
}

hr {
  margin-top: 1em;
}

#logo {
  width: 400px;
}

.tablinks {
  padding: 1em;
  background-color: #022873;
  color: white;
  margin-top: 10px;
  font-size: 1.2em;
}

.monitor-label {
  margin: 1em;
}
.tablinks:hover {
  background-color: #053FC0;
  }

.active{
  background-color: #053FC0;
}

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}


#sunburst-container {
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  /* display: none; */
}

#sun-container {
  width: 95%;
  height: auto;
  margin-right: -40px;
}

#package-data {
  width: 5%;
  margin-left: 10%;
}

.package-info {
  border: 5px solid black;
  padding: 10px;
}

.package-name {
  text-align: center;
}


html, body {
  background-color: #001635;
  color: white;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  font-size: 0.9em;
}

#itemtitles {
  margin: 2px 0 0 20px;
  min-height: 1.2em;
}
#itemtitles div {
  position: absolute;
  float: left;
  top: 100px;
}

.node rect {
  cursor: move;
  shape-rendering: crispEdges;
  fill: #001648 !important;
  stroke-width: 3 !important;
}

.node text {
  pointer-events: none;
  font-size: 0.7em;
  font-family: Helvetica, sans-serif;
  text-align: center;
  fill: white;
}

#tooltip {
  color: #001128;
  position: absolute;
  pointer-events: none;
  font-size: 0.8em;
  font-family: sans-serif;
  padding: 5px;
  width: auto;
  height: auto;
  background-color: #F2F2F2;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -mox-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rbga(0, 0, 0, 0.4);
  pointer-events: none;
}

.value {
  white-space: pre-line;
  margin: 0;
}

#chart1-wrapper {
  display: flex;
  flex-direction: column;
  height: auto;
  width: calc(100vw - 100px);
  display: block;
}



#chart2-wrapper {
  display: flex;
  flex-direction: column;
  /*height: calc(100vh - 100px); * output container is small for display  */
  height: auto;
  /*width: calc(100vw - 100px);*/
}

#bisankey-container {
  order: 1;
  padding: 10px;
  height: auto;
  margin-top: 5px;
  margin-bottom: 30px;
}


#chart-info {
  order:2;
  height: auto;
  padding: 10px;
}

.func-name {
  text-align: center;
}


.chart-info {
  border: 1px solid #001128;
  width: 330px;
  padding: 16px;
  color: #001128;
}

#chart-info {
  padding: 10px;
  margin: 0;
  list-style: none;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-flow: row wrap;
}

#chart-info p {
  display: flex;
  flex-wrap: wrap;
}

.stack-data {
  max-width: 300px;
}

.node-type {
  overflow: hidden;
  white-space: nowrap;
}

.func-info {
  border: 2px solid black;
}

foreignObject .node-type {
  text-align: center;
  font-size: 3em;
}
