bars.css

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Styles */
body {
    font-family: "Newsreader", serif;
    font-optical-sizing: auto;
    background-color: #f5f5f5;
}


/* consumtions */
.consumption {
  background-image: url('bulbs.jpg'); bottom center cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 40px;
  height: 50vw;
  width: 100%;
  display: table;
  table-layout:fixed;
  border-collapse: collapse;
}


.space, .bar, .stat, .percentage {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
  
  
.space, .bar {
  display: table-cell;
  vertical-align: top;
  position: relative;
}

.space {
  width: 4vw;
  background-color: #15523e;
}
  
.bar {
  width: 20vw;
  background-color: transparent;
}

.stat {
  width: 20vw;
  background-color: #15523e;
  color: whitesmoke;
  margin: 0;
  padding: 0;
}

.pa .stat {
  height: 45vw;
}

.pa .percentage {
  height: 5vw;
}

.fl  .stat {
  height: 35vw;  
}

.fl .percentage {
  height: 15vw;
}

.fl .stat .desc {
  position: absolute;
  bottom: 16vw;
}



.ca .stat {
  height: 28vw;
}

.ca .percentage {
  height: 22vw;
}
  



.tx .stat {
  height: 6vw;
}

.tx .percentage {
  height: 44vw;
}  

/* end consumtions */
/* arrows details */

summary{
  color:#15523e
}