dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: white;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  max-width: 50%;
  position: relative;
  padding: 20px;
}

dt {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 20px;
/*  margin-left: 130px;*/
}

.barstatstext {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 40px;
  width: 200px;
  background-color: white;
  position: absolute;
  left: 0;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.percentage {
  font-size: 1em;
  line-height: 1;
  width: 100%;
  height: 40px;
  margin-left: 200px;
}

.percentage:after {
  content: "";
  display: block;
  background-color: #B170F4;
  width: 50px;
  margin-bottom: 10px;
  height: 90%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
}
.percentage:hover:after, .percentage:focus:after {
  background-color: #B170F4; /*#aaa*/;
}

.percentage-1:after {
  width: 1%;
}

.percentage-2:after {
  width: 2%;
}

.percentage-3:after {
  width: 3%;
}

.percentage-4:after {
  width: 4%;
}

.percentage-5:after {
  width: 5%;
}

.percentage-6:after {
  width: 6%;
}

.percentage-7:after {
  width: 7%;
}

.percentage-8:after {
  width: 8%;
}

.percentage-9:after {
  width: 9%;
}

.percentage-10:after {
  width: 10%;
}

.percentage-11:after {
  width: 11%;
}

.percentage-12:after {
  width: 12%;
}

.percentage-13:after {
  width: 13%;
}

.percentage-14:after {
  width: 14%;
}

.percentage-15:after {
  width: 15%;
}

.percentage-16:after {
  width: 16%;
}

.percentage-17:after {
  width: 17%;
}

.percentage-18:after {
  width: 18%;
}

.percentage-19:after {
  width: 19%;
}

.percentage-20:after {
  width: 20%;
}

.percentage-21:after {
  width: 21%;
}

.percentage-22:after {
  width: 22%;
}

.percentage-23:after {
  width: 23%;
}

.percentage-24:after {
  width: 24%;
}

.percentage-25:after {
  width: 25%;
}

.percentage-26:after {
  width: 26%;
}

.percentage-27:after {
  width: 27%;
}

.percentage-28:after {
  width: 28%;
}

.percentage-29:after {
  width: 29%;
}

.percentage-30:after {
  width: 30%;
}

.percentage-31:after {
  width: 31%;
}

.percentage-32:after {
  width: 32%;
}

.percentage-33:after {
  width: 33%;
}

.percentage-34:after {
  width: 34%;
}

.percentage-35:after {
  width: 35%;
}

.percentage-36:after {
  width: 36%;
}

.percentage-37:after {
  width: 37%;
}

.percentage-38:after {
  width: 38%;
}

.percentage-39:after {
  width: 39%;
}

.percentage-40:after {
  width: 40%;
}

.percentage-41:after {
  width: 41%;
}

.percentage-42:after {
  width: 42%;
}

.percentage-43:after {
  width: 43%;
}

.percentage-44:after {
  width: 44%;
}

.percentage-45:after {
  width: 45%;
}

.percentage-46:after {
  width: 46%;
}

.percentage-47:after {
  width: 47%;
}

.percentage-48:after {
  width: 48%;
}

.percentage-49:after {
  width: 49%;
}

.percentage-50:after {
  width: 50%;
}

.percentage-51:after {
  width: 51%;
}

.percentage-52:after {
  width: 52%;
}

.percentage-53:after {
  width: 53%;
}

.percentage-54:after {
  width: 54%;
}

.percentage-55:after {
  width: 55%;
}

.percentage-56:after {
  width: 56%;
}

.percentage-57:after {
  width: 57%;
}

.percentage-58:after {
  width: 58%;
}

.percentage-59:after {
  width: 59%;
}

.percentage-60:after {
  width: 60%;
}

.percentage-61:after {
  width: 61%;
}

.percentage-62:after {
  width: 62%;
}

.percentage-63:after {
  width: 63%;
}

.percentage-64:after {
  width: 64%;
}

.percentage-65:after {
  width: 65%;
}

.percentage-66:after {
  width: 66%;
}

.percentage-67:after {
  width: 67%;
}

.percentage-68:after {
  width: 68%;
}

.percentage-69:after {
  width: 69%;
}

.percentage-70:after {
  width: 70%;
}

.percentage-71:after {
  width: 71%;
}

.percentage-72:after {
  width: 72%;
}

.percentage-73:after {
  width: 73%;
}

.percentage-74:after {
  width: 74%;
}

.percentage-75:after {
  width: 75%;
}

.percentage-76:after {
  width: 76%;
}

.percentage-77:after {
  width: 77%;
}

.percentage-78:after {
  width: 78%;
}

.percentage-79:after {
  width: 79%;
}

.percentage-80:after {
  width: 80%;
}

.percentage-81:after {
  width: 81%;
}

.percentage-82:after {
  width: 82%;
}

.percentage-83:after {
  width: 83%;
}

.percentage-84:after {
  width: 84%;
}

.percentage-85:after {
  width: 85%;
}

.percentage-86:after {
  width: 86%;
}

.percentage-87:after {
  width: 87%;
}

.percentage-88:after {
  width: 88%;
}

.percentage-89:after {
  width: 89%;
}

.percentage-90:after {
  width: 90%;
}

.percentage-91:after {
  width: 91%;
}

.percentage-92:after {
  width: 92%;
}

.percentage-93:after {
  width: 93%;
}

.percentage-94:after {
  width: 94%;
}

.percentage-95:after {
  width: 95%;
}

.percentage-96:after {
  width: 96%;
}

.percentage-97:after {
  width: 97%;
}

.percentage-98:after {
  width: 98%;
}

.percentage-99:after {
  width: 99%;
}

.percentage-100:after {
  width: 100%;
}


/*********** vertical ***********/

.dl-vert dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: white;
  -webkit-box-orient: normal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  max-height: 500px;
  padding: 20px;
}

.dt-vert dt {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  height: 100%;
  display: block;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 20px;
/*  margin-left: 130px;*/
}

.barstatstext-vert {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
/*  height: 40px;
  width: 200px;*/
  background-color: white;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.percentage-vert {
  font-size: 1em;
/*  line-height: 1;*/
  width: 40px;
  height: 100%;
/*  margin-left: 200px;*/
/*
  background: -webkit-repeating-linear-gradient(bottom, #ddd, #ddd 1px, #fff 1px, #fff 5%);
  background: repeating-linear-gradient(to top, #ddd, #ddd 1px, #fff 1px, #fff 5%);
*/
  background: -webkit-repeating-linear-gradient(top, blue, red);
  background: repeating-linear-gradient(to bottom, blue, red);

}

.percentage-vert:after {
  content: "";
  display: block;
  background-color: #3d9970;
  width: 50px;
  margin-bottom: 10px;
  height: 90%;
  position: relative;
  left: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
/*  cursor: pointer;*/
}
.percentage-vert:hover:after, .percentage-vert:focus:after {
  background-color: #aaa;
}

.percentage-vert-1:after {
  height: 1%;
}

.percentage-vert-2:after {
  height: 2%;
}

.percentage-vert-3:after {
  height: 3%;
}

.percentage-vert-4:after {
  height: 4%;
}

.percentage-vert-5:after {
  height: 5%;
}

.percentage-vert-6:after {
  height: 6%;
}

.percentage-vert-7:after {
  height: 7%;
}

.percentage-vert-8:after {
  height: 8%;
}

.percentage-vert-9:after {
  height: 9%;
}

.percentage-vert-10:after {
  height: 10%;
}

.percentage-vert-11:after {
  height: 11%;
}

.percentage-vert-12:after {
  height: 12%;
}

.percentage-vert-13:after {
  height: 13%;
}

.percentage-vert-14:after {
  height: 14%;
}

.percentage-vert-15:after {
  height: 15%;
}

.percentage-vert-16:after {
  height: 16%;
}

.percentage-vert-17:after {
  height: 17%;
}

.percentage-vert-18:after {
  height: 18%;
}

.percentage-vert-19:after {
  height: 19%;
}

.percentage-vert-20:after {
  height: 20%;
}

.percentage-vert-21:after {
  height: 21%;
}

.percentage-vert-22:after {
  height: 22%;
}

.percentage-vert-23:after {
  height: 23%;
}

.percentage-vert-24:after {
  height: 24%;
}

.percentage-vert-25:after {
  height: 25%;
}

.percentage-vert-26:after {
  height: 26%;
}

.percentage-vert-27:after {
  height: 27%;
}

.percentage-vert-28:after {
  height: 28%;
}

.percentage-vert-29:after {
  height: 29%;
}

.percentage-vert-30:after {
  height: 30%;
}

.percentage-vert-31:after {
  height: 31%;
}

.percentage-vert-32:after {
  height: 32%;
}

.percentage-vert-33:after {
  height: 33%;
}

.percentage-vert-34:after {
  height: 34%;
}

.percentage-vert-35:after {
  height: 35%;
}

.percentage-vert-36:after {
  height: 36%;
}

.percentage-vert-37:after {
  height: 37%;
}

.percentage-vert-38:after {
  height: 38%;
}

.percentage-vert-39:after {
  height: 39%;
}

.percentage-vert-40:after {
  height: 40%;
}

.percentage-vert-41:after {
  height: 41%;
}

.percentage-vert-42:after {
  height: 42%;
}

.percentage-vert-43:after {
  height: 43%;
}

.percentage-vert-44:after {
  height: 44%;
}

.percentage-vert-45:after {
  height: 45%;
}

.percentage-vert-46:after {
  height: 46%;
}

.percentage-vert-47:after {
  height: 47%;
}

.percentage-vert-48:after {
  height: 48%;
}

.percentage-vert-49:after {
  height: 49%;
}

.percentage-vert-50:after {
  height: 50%;
}

.percentage-vert-51:after {
  height: 51%;
}

.percentage-vert-52:after {
  height: 52%;
}

.percentage-vert-53:after {
  height: 53%;
}

.percentage-vert-54:after {
  height: 54%;
}

.percentage-vert-55:after {
  height: 55%;
}

.percentage-vert-56:after {
  height: 56%;
}

.percentage-vert-57:after {
  height: 57%;
}

.percentage-vert-58:after {
  height: 58%;
}

.percentage-vert-59:after {
  height: 59%;
}

.percentage-vert-60:after {
  height: 60%;
}

.percentage-vert-61:after {
  height: 61%;
}

.percentage-vert-62:after {
  height: 62%;
}

.percentage-vert-63:after {
  height: 63%;
}

.percentage-vert-64:after {
  height: 64%;
}

.percentage-vert-65:after {
  height: 65%;
}

.percentage-vert-66:after {
  height: 66%;
}

.percentage-vert-67:after {
  height: 67%;
}

.percentage-vert-68:after {
  height: 68%;
}

.percentage-vert-69:after {
  height: 69%;
}

.percentage-vert-70:after {
  height: 70%;
}

.percentage-vert-71:after {
  height: 71%;
}

.percentage-vert-72:after {
  height: 72%;
}

.percentage-vert-73:after {
  height: 73%;
}

.percentage-vert-74:after {
  height: 74%;
}

.percentage-vert-75:after {
  height: 75%;
}

.percentage-vert-76:after {
  height: 76%;
}

.percentage-vert-77:after {
  height: 77%;
}

.percentage-vert-78:after {
  height: 78%;
}

.percentage-vert-79:after {
  height: 79%;
}

.percentage-vert-80:after {
  height: 80%;
}

.percentage-vert-81:after {
  height: 81%;
}

.percentage-vert-82:after {
  height: 82%;
}

.percentage-vert-83:after {
  height: 83%;
}

.percentage-vert-84:after {
  height: 84%;
}

.percentage-vert-85:after {
  height: 85%;
}

.percentage-vert-86:after {
  height: 86%;
}

.percentage-vert-87:after {
  height: 87%;
}

.percentage-vert-88:after {
  height: 88%;
}

.percentage-vert-89:after {
  height: 89%;
}

.percentage-vert-90:after {
  height: 90%;
}

.percentage-vert-91:after {
  height: 91%;
}

.percentage-vert-92:after {
  height: 92%;
}

.percentage-vert-93:after {
  height: 93%;
}

.percentage-vert-94:after {
  height: 94%;
}

.percentage-vert-95:after {
  height: 95%;
}

.percentage-vert-96:after {
  height: 96%;
}

.percentage-vert-97:after {
  height: 97%;
}

.percentage-vert-98:after {
  height: 98%;
}

.percentage-vert-99:after {
  height: 99%;
}

.percentage-vert-100:after {
  height: 100%;
}