/***
* Datei:           barchart-zufall.css
* Internetsite:    www.realmath.de
* Autor:           Andreas Meier
* Datum:           28-10-2020
* Letztes Update:  06-08-2022
***/


.barchart-Wrapper {
  display: table;
  position: relative;
  margin: 20px 0;
  height: 165px;
}

.barChart-Container {
  display: table-cell;
  width: 280px;
  height: 100%;
  padding-left: 25px;
}

.barchart {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 270px;
  border-bottom: 1px solid #050505;
}

.barchart-Col {
  position: relative;
  vertical-align: bottom;
  display: table-cell;
  height: 100%;
}

.barchart-Col+.barchart-Col {
  border-left: 4px solid transparent;
}

.barchart-Bar {
  position: relative;
  height: 0;
  transition: height 0.1s 0.2s; /* Verzoegerung  */
  width: 18px;
  margin: auto;
}

.barchart-Bar:after {
  content: attr(attr-height);
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}

.barchart-BarFooter {
  position: absolute;
  text-align: center;
  height: 10%;
  width: 100%;
}

.barchart-BarFooter h7 {
  background: none;
  color: #006600;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;

}

.barchart-yAchsCol {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;

}

.barchart-yAchs {
  height: 10%; /* entspricht 10 y-Werten  */
  vertical-align: middle;
  position: relative;
  width: 100%;
}

.barchart-yAchs:after {
  border-bottom: 1px dotted #050505;
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0em;
}

.barchart-yAchsText {
  position: absolute;
  top: -12px;
  z-index: 1;
  background: #F9F9EB;
  padding-right: 5px;
  color: #4d4d4d;
  font-size: 13px;
  font-family: arial, helvetica, sans-serif;
}

.blue-bar {
  background-color: cornflowerblue;
}