body {
  margin: 0;
  overflow: flow;
}
/* .city {
  fill: red;
  stroke: #fff;
  stroke-width: 2px;
} */

/* color for headings */

h1 {
color: darkblue;
    display: flex;
  justify-content: center;
  align-items: center;
}
  .heatmap-container {
    display: flex;
    align-items: center;
  }

  .heatmap-container img {
    margin-right: 10px;
  }
.svgContainer {
    display: none;
  }
.container {
  display: flex;
  /* flex-direction: row; */
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.container2 {
  display: flex;
  /* flex-direction: row; */
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.svg-container {
  display: flex;
  justify-content: center;
}
/* one should avoid margins and width in flexbox */
#myBoard {
  /*margin: 200px 75px 50px;*/
  /*width: 300px;*/
  max-width: 70%;
  flex-grow: 1;
  justify-content: flex-start;
  min-width: 250px;
	margin-top: auto;
 margin-bottom: auto;
 margin-left: 50px;
}

#myBoardelite {
  /*margin: 200px 75px 50px;*/
  /*width: 300px;*/
  max-width: 70%;
  flex-grow: 1;
  justify-content: flex-start;
  min-width: 250px;
 margin-top: auto;
 margin-bottom: auto;
 margin-left: 50px;
}

#sunburst {
  /*width="40%";
  height="80%"; */
  /*justify-content: center;*/
/*  	width: 100%;
  height: 100%; */
  min-width: 600px;
  flex-grow:3;
  max-width: 100%;
  min-height: 90%;
  max-height: 100%;
  justify-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 50px;
  /*margin-left:100px;*/
}

#sunburst-elite {
  /*width="40%";
  height="80%"; */
  /*justify-content: center;*/
/*  	width: 100%;
  height: 100%; */
  min-width: 500px;
  flex-grow: 3;
  max-width: 100%;
  min-height: 90%;
  max-height: 100%;
  justify-content: flex-end;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 50px;
  /*margin-left:100px;*/
}

#svgImage{
min-width: 250px;
max-width: 65%;
min-height: auto;
max-height: auto;
margin: 0px 0px 0px 0px;
}
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.sliders {
  display: flex;
  /* justify-content: left; */
  justify-content: center;
  /*align-items: center; */
  /* margin-left:5%; */
  /*  z-index: "100"; */
  margin-bottom: 5px;
}


.slider {
 /*width: 20%; */
 margin: 0 5px;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.buttons button {
  margin: 0 5px;
}

/*
.board-and-chart{
  display: flex;
}
.chart-SVG{
  flex-grow: 1;
  min-height: 0;
}
*/
/*
button{
  width = 50px;
  height = 20px;
}
*/
/*
svg{
  width=100%;
  height=100%;
}
*/