@charset "UTF-8";
/* Bar Chart based on https://speckyboy.com/code-snippets-css3-bar-graphs/
* Minimalist bar graph
*/

.chart{
  display:table;
  table-layout: fixed;   
  
  width:60%;
  max-width:700px;
  height:250px;
  margin:0 auto 20px auto;
  
  background-size: 80% 50px;
  background-position: left top;
}
.chart > li{
    position:relative;
    display:table-cell;
    vertical-align:bottom;
    height:200px;
  }
  
.chart span{
    margin:0 1em;
    display: block;
    background-color: #4f2683;
}
.chart span:before{
      position:absolute;
      left:0;right:0;top:100%;
      padding:5px 1em 0;
      display:block;
      text-align:center;
      content: attr(title);
	  }
  /* Pie Chart based on https://keithclark.co.uk/articles/single-element-pure-css-pie-charts/ */
.pieplate{
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: row;
  align-items: center;
  width: 880px;
}
.pie {
  /* Basic layout */
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: 15px 20px 30px 15px;

  /* A little styling */
  border: .15em solid #fff;
  box-shadow: 0 .075em .5em .05em rgba(0,0,0,.5);

  /* fixes a minor clipping issue in Chrome */
  background-origin: border-box;
  background-image: conic-gradient(
    #4f2683 calc(3.6deg * var(--segment1, 100)), 
    #EFEFEF 0 calc(3.6deg * var(--segment2, 100)), 
    #807f83 0 calc(3.6deg * var(--segment3, 100)), 
    #000000 0 calc(3.6deg * var(--segment4, 100)),
    LightBlue 0);
 
}
li.slice1::marker{
  content: •;
  color: #4f2683;
  font-size:2em;
  padding:0px;
}
li.slice2::marker{
  content: •;
  color: #807f83;
  font-size:2em;
  padding:0px;
}
li.slice3::marker{
  content: •;
  color: #EFEFEF;
  box-shadow:20px 20px;
  font-size:2em;
  padding:0px;
}
li.slice4::marker{
  content: •;
  color: black;
  font-size:2em;
  padding:0px;
}
li.slice5::marker{
  content: •;
  color: LightBlue;
  font-size:2em;
  padding:0px;
}
div.legend{
  width: 380px;
  margin: 0px 25px;
  padding: 10px;
  border: .15em solid #fff;
  box-shadow: 0 .075em .5em .05em rgba(0,0,0,.5);
  transition: width 2s;
}
ul.legend {
  list-style-position:outside;
}