body {
    /*background: #30303A;*/
    /* font-family: Roboto; */
    color: black;
    font-size: 1.5em;
    /*font-family: arial;*/
}

/* .container{
    width: 100%;
} */

nav{
    
}
#chart {

    width: 100%;

    background: #30303A;
    
    /* height: 50em; */

height: 80em;
    margin: 30px auto 0;


    left: 500px;
    




    /* display: block; */
    -ms-transform: rotate(90deg);
  transform: rotate(90deg);
    /* overflow-x: scroll; 
     overflow-y: scroll; */
}

#chart .numbers {
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
    /* float: left; */
    position: relative;
}

#chart .numbers .max {
    bottom: 100%;
}

#chart .numbers .half {
    bottom: 50%;
}

#chart .numbers .zero {
    bottom: -1px;
}

#chart .numbers li {
    text-align: right;
    padding-right: 1em;
    list-style: none;
    height: 29px;
    border-bottom: 1px solid #444;
    bottom: 30px;
    position: absolute;
    right: 0;
    width: 30px;
}

#chart .numbers li:last-child {
    height: 30px;
}

#chart .numbers li span {
    color: black;
    position: absolute;
    bottom: 0;
    right: 10px;
}

#chart .bars {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    width: auto;
    height: 100%;
    padding: 0;
    /* margin: 50px; */
    box-shadow: 0 0 0 1px #444;
margin: 0;
}

#chart .bars li {
    flex: auto;

    
    height: 100%;
    /* margin: 0; */
    margin-right: 10px;
    text-align: center;
    position: relative;
    list-style-type : none;

    
    width: 10px;
}

#chart .bars li .bar {
    /* width: 80%; */
    background: #49E;
    position: absolute; 

    bottom: 0;
    /* left: 50%; */
    /* margin-left: -40%; */
    height: 0;
    transition: height 1s;

    width: 10px;
    margin-right: 0;
    /* left: 1em; */

}

#chart .bars li .per {
    color:white;
    position: absolute;
    width: 100%;
    text-align: center;
    top: -25px;

    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}

#chart .bars li span {
    color:black;
    width: 100%;
    position: absolute;


    bottom: -5em;

    left: -2em;
    
    text-align: center;


    width: max-content;
    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}












/* second chart css ------------------------------------------------------------------------------*/



body {
    /*background: #30303A;*/
    /* font-family: Roboto; */
    color: black;
}
/* .container{
    width: 100%;
} */

#chart2 {

    width: 100%;

    background: #30303A;
    
    /* height: 50em; */

height: 80em;
    margin: 30px auto 0;


    left: 500px;
    




    /* display: block; */
    -ms-transform: rotate(90deg);
  transform: rotate(90deg);
    /* overflow-x: scroll; 
     overflow-y: scroll; */
}

#chart2 .numbers {
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
    /* float: left; */
    position: relative;
}

#chart2 .numbers .max {
    bottom: 100%;
}

#chart2 .numbers .half {
    bottom: 50%;
}

#chart2 .numbers .zero {
    bottom: -1px;
}

#chart2 .numbers li {
    text-align: right;
    padding-right: 1em;
    list-style: none;
    height: 29px;
    border-bottom: 1px solid #444;
    bottom: 30px;
    position: absolute;
    right: 0;
    width: 30px;
}

#chart2 .numbers li:last-child {
    height: 30px;
}

#chart2 .numbers li span {
    color: black;
    position: absolute;
    bottom: 0;
    right: 10px;
}

#chart2 .bars2 {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    width: auto;
    height: 100%;
    padding: 0;
    /* margin: 50px; */
    box-shadow: 0 0 0 1px #444;
margin: 0;
}

#chart2 .bars2 li {
    flex: auto;

    
    height: 100%;
    /* margin: 0; */
    margin-right: 10px;
    text-align: center;
    position: relative;
    list-style-type : none;

    
    width: 10px;
}

#chart2 .bars2 li .bar2 {
    /* width: 80%; */
    /* background: #49E; */
    background: red;
    position: absolute; 

    bottom: 0;
    /* left: 50%; */
    /* margin-left: -40%; */
    height: 0;
    transition: height 1s;

    width: 10px;
    margin-right: 0;
    /* left: 1em; */

}

#chart2 .bars2 li .per2 {
    color:white;
    position: absolute;
    width: 100%;
    text-align: center;
    top: -25px;

    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}

#chart2 .bars2 li span {
    color:black;
    width: 100%;
    position: absolute;


    bottom: -5em;

    left: -2em;
    
    text-align: center;


    width: max-content;
    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}





/* third chart css ------------------------------------------------------------------------------*/



body {
    /*background: #30303A;*/
    /* font-family: Roboto; */
    color: black;
}
/* .container{
    width: 100%;
} */

#chart3 {

    width: 100%;

    background: #30303A;
    
    /* height: 50em; */

height: 80em;
    margin: 30px auto 0;


    left: 500px;
    




    /* display: block; */
    -ms-transform: rotate(90deg);
  transform: rotate(90deg);
    /* overflow-x: scroll; 
     overflow-y: scroll; */
}

#chart3 .numbers {
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
    /* float: left; */
    position: relative;
}

#chart3 .numbers .max {
    bottom: 100%;
}

#chart3 .numbers .half {
    bottom: 50%;
}

#chart3 .numbers .zero {
    bottom: -1px;
}

#chart3 .numbers li {
    text-align: right;
    padding-right: 1em;
    list-style: none;
    height: 29px;
    border-bottom: 1px solid #444;
    bottom: 30px;
    position: absolute;
    right: 0;
    width: 30px;
}

#chart3 .numbers li:last-child {
    height: 30px;
}

#chart3 .numbers li span {
    color: black;
    position: absolute;
    bottom: 0;
    right: 10px;
}

#chart3 .bars3 {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    width: auto;
    height: 100%;
    padding: 0;
    /* margin: 50px; */
    box-shadow: 0 0 0 1px #444;
margin: 0;
}

#chart3 .bars3 li {
    flex: auto;

    
    height: 100%;
    /* margin: 0; */
    margin-right: 10px;
    text-align: center;
    position: relative;
    list-style-type : none;

    
    width: 10px;
}

#chart3 .bars3 li .bar3 {
    /* width: 80%; */
    /* background: #49E; */
    background:green;
    position: absolute; 

    bottom: 0;
    /* left: 50%; */
    /* margin-left: -40%; */
    height: 0;
    transition: height 1s;

    width: 10px;
    margin-right: 0;
    /* left: 1em; */

}

#chart3 .bars3 li .per3 {
    color:white;
    position: absolute;
    width: 100%;
    text-align: center;
    top: -25px;

    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}

#chart3 .bars3 li span {
    color:black;
    width: 100%;
    position: absolute;


    bottom: -5em;

    left: -2em;
    
    text-align: center;


    width: max-content;
    -ms-transform: rotate(-90deg); 
  transform: rotate(-90deg);
}