/*project specific adaptations*/

/*
decrease height on small width to give room to the legend below.
mostly determined empirically :-/

see also iframeResize.mjs
*/


/*
Why do we have to tell the chart it's height manually via media queries?

First, notice, that according to billboard docu:
"If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to."

It says nothing about height.

It seems that, the chart is not the last element during DOM buildup.
So it gets created - the height being that of .chartcontainer 
at that moment - but during further DOM buildup the 
available vertical space changes.

Billboard probably sticks with the initial height.

That's why it has to be told it's height somehow 
after DOM creation finished completely.
*/



/* rows 2+3+4+6+7+8 = 44% height */

/* for narrow, until 576 */
@media (max-width: 576px) {
  #chartcontainer {
    height:64%; /* row 4*/
    flex-wrap: wrap;
  }
  #chart {
    height: 90%;
    width:100% !important;
  }
  div.bb-legend-item {
    /* border-color is set by the chart-component */
    border-top-style: solid;
    border-top-width: 8px;
    width: 40px !important;
    margin-right: 10px;
    justify-content: center;
  }
  span.legendItemColor {
    display: none;
  }
  #legend {
    display:flex; 
    justify-content:flex-start;
    margin-left: 50px;
    width: 100%;
  }
}


/* rows 2+3+4+6+7+8 = 40%   (row 2 goes smaller below 768px) */

/* from 576 onwards */
@media (min-width: 576px) {
  #chartcontainer {
    height:80%;
  }
  #chart {
    height: 100%;
  }
}

@media (min-width: 1235px) {
  #chartcontainer {
    max-height:35%;
  }
  #chart {
    height: 100%;
  }
}

@media (min-width: 1550px) {
  #chartcontainer {
    max-height:50%;
  }
  #chart {
    height: 100%;
  }
}

.modal-title {
  font-size: 2rem;
}

.legendItemColor {
	display: inline-block;
	height: 26px;
	width: 26px;
}

.bb-legend-item {
  font-size: 1rem;
}