:root {
  --font-family: 'Darker Grotesque', sans-serif;
}

/* --- Chart Placement --- */

#sg-chart-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#sg-chart-container .streamgraph {
  min-width: 300px;
  max-width: 900px;
  width: 100%;
  flex-basis: auto;
  /* default value */
  flex-grow: 1;
  margin: 30px 100px 30px 20px;
}

@media screen and (max-width: 600px) {
  #sg-chart-container .streamgraph {
    max-width: 100%;
  }
}

svg {
  font-family: var(--font-family);
}

/***** Small screen adjustments *****/

@media screen and (max-width: 1600px) {
  #sg-chart-container .streamgraph {
    margin: 30px 0px;
  }
}

/* --- Chart specific --- */

.streamgraph .title {
  font-size: 30px;
  font-weight: 400;
}

.streamgraph .stream-group .measurable,
.streamgraph .stream-group .label-path {
  font-size: 16px;
  text-anchor: middle;
  letter-spacing: 0.02rem;
}

.streamgraph .label-candidate-top {
  fill: white;
}

.streamgraph .end-label {
  font-size: 0.9rem;
  font-weight: 500;
}

.streamgraph .axis-date-label {
  text-anchor: middle;
  font-weight: 400;
  font-size: 1.0rem;
}

.streamgraph .axis-date-line {
  fill: none;
  stroke: #696970;
  stroke-width: 1.5px;
  stroke-linecap: round;
  shape-rendering: crispEdges;

}

.streamgraph .total-end-label,
.streamgraph .total-percentage-note {
  font-size: 1rem;
  font-weight: 600;
}

.streamgraph .total-percentage-note {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.streamgraph .hover-name {
  font-size: 1.3rem;
  font-weight: 500;
}

.streamgraph .hover-value-total {
  font-size: 1.0rem;
  opacity: 0.8;
  font-weight: 400;
}

.streamgraph .hover-value {
  font-size: 1.0rem;
  opacity: 0.8;
  font-weight: 400;
}

.streamgraph .hover-rect {
  fill: white;
  opacity: 0.95;
}

.streamgraph .hover-line,
.streamgraph .hover-line-top,
.streamgraph .total-line,
.streamgraph .hover-rect {
  shape-rendering: crispEdges;
}

/* .streamgraph .total-line { */
/* stroke-linecap: round; */
/* } */

/* ----------- legend ------------- */

#streamgraph-legend {
  max-width: 900px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 600;
  color: rgb(108, 108, 124);
  letter-spacing: 0.01rem;
}

.streamgraph-legend-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0.1rem 0.5rem;
}

.streamgraph-legend-item img {
  width: 100%;
  margin: 5px;
  max-width: 16px;
  height: auto;
}

#sg-chart-viewport {
  max-width: 100%;
  overflow-x: scroll;
  padding: 0 5px;
  margin: 0 5px 10px;
}

#sg-chart-container {
  min-width: 900px;
  background-color: #f6f7fa;
  border: 1px solid #eaebee;
  padding-right: 35px;
}