.progressh {
    width: 50px;
    height: 20px;
    border: 1px solid black;
    position: relative;
    margin-left: 15px;
    background: #fb7474;
}

.perch:after {
    content: '\A';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}




.progress {
    width: 20px;
    height: 30px;
    border: 1px solid black;
    position: relative;
    margin-left: 15px;
}

.perc:after {
    content: '\A';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}

.perc-1:after {
    background: white;
    height: 100%;
}

.perc0:after {
    background: red;
    height: 0%;
}
.perc1:after {
    background: red;
    height: 1%;
}
.perc2:after {
    background: red;
    height: 2%;
}
.perc3:after {
    background: red;
    height: 3%;
}
.perc4:after {
    background: red;
    height: 4%;
}
.perc5:after {
    background: red;
    height: 5%;
}
.perc6:after {
    background: red;
    height: 6%;
}
.perc7:after {
    background: red;
    height: 7%;
}
.perc8:after {
    background: red;
    height: 8%;
}
.perc9:after {
    background: red;
    height: 9%;
}
.perc10:after {
    background: red;
    height: 10%;
}
.perc11:after {
    background: red;
    height: 11%;
}
.perc12:after {
    background: red;
    height: 12%;
}
.perc13:after {
    background: red;
    height: 13%;
}
.perc14:after {
    background: red;
    height: 14%;
}
.perc15:after {
    background: red;
    height: 15%;
}
.perc16:after {
    background: red;
    height: 16%;
}
.perc17:after {
    background: red;
    height: 17%;
}
.perc18:after {
    background: red;
    height: 18%;
}
.perc19:after {
    background: red;
    height: 19%;
}

.perc20:after {
    background: red;
    height: 20%;
}

.perc21:after {
    background: red;
    height: 21%;
}

.perc22:after {
    background: red;
    height: 22%;
}

.perc23:after {
    background: red;
    height: 23%;
}

.perc24:after {
    background: red;
    height: 24%;
}

.perc25:after {
    background: red;
    height: 25%;
}

.perc26:after {
    background: red;
    height: 26%;
}

.perc27:after {
    background: red;
    height: 27%;
}

.perc28:after {
    background: red;
    height: 28%;
}

.perc29:after {
    background: red;
    height: 29%;
}


.perc30:after {
    background: red;
    height: 30%;
}

.perc31:after {
    background: red;
    height: 31%;
}

.perc32:after {
    background: red;
    height: 32%;
}

.perc33:after {
    background: red;
    height: 33%;
}

.perc34:after {
    background: red;
    height: 34%;
}

.perc35:after {
    background: red;
    height: 35%;
}

.perc36:after {
    background: red;
    height: 36%;
}

.perc37:after {
    background: red;
    height: 37%;
}

.perc38:after {
    background: red;
    height: 38%;
}

.perc39:after {
    background: red;
    height: 39%;
}


.perc40:after {
    background: red;
    height: 40%;
}

.perc41:after {
    background: red;
    height: 41%;
}

.perc42:after {
    background: red;
    height: 42%;
}

.perc43:after {
    background: red;
    height: 43%;
}

.perc44:after {
    background: red;
    height: 44%;
}

.perc45:after {
    background: red;
    height: 45%;
}

.perc46:after {
    background: red;
    height: 46%;
}

.perc47:after {
    background: red;
    height: 47%;
}

.perc48:after {
    background: red;
    height: 48%;
}

.perc49:after {
    background: red;
    height: 49%;
}



.perc50:after {
    background: gray;
    height: 50%;
}

.perc51:after {
    background: gray;
    height: 51%;
}

.perc52:after {
    background: gray;
    height: 52%;
}

.perc53:after {
    background: gray;
    height: 53%;
}

.perc54:after {
    background: gray;
    height: 54%;
}

.perc55:after {
    background: gray;
    height: 55%;
}

.perc56:after {
    background: gray;
    height: 56%;
}

.perc57:after {
    background: gray;
    height: 57%;
}

.perc58:after {
    background: gray;
    height: 58%;
}

.perc59:after {
    background: gray;
    height: 59%;
}




.perc60:after {
    background: gray;
    height: 60%;
}

.perc61:after {
    background: gray;
    height: 61%;
}

.perc62:after {
    background: gray;
    height: 62%;
}

.perc63:after {
    background: gray;
    height: 63%;
}

.perc64:after {
    background: gray;
    height: 64%;
}

.perc65:after {
    background: gray;
    height: 65%;
}

.perc66:after {
    background: gray;
    height: 66%;
}

.perc67:after {
    background: gray;
    height: 67%;
}

.perc68:after {
    background: gray;
    height: 68%;
}

.perc69:after {
    background: gray;
    height: 69%;
}





.perc70:after {
    background: lightgreen;
    height: 70%;
}

.perc71:after {
    background: lightgreen;
    height: 71%;
}

.perc72:after {
    background: lightgreen;
    height: 72%;
}

.perc73:after {
    background: lightgreen;
    height: 73%;
}

.perc74:after {
    background: lightgreen;
    height: 74%;
}

.perc75:after {
    background: lightgreen;
    height: 75%;
}

.perc76:after {
    background: lightgreen;
    height: 76%;
}

.perc77:after {
    background: lightgreen;
    height: 77%;
}

.perc78:after {
    background: lightgreen;
    height: 78%;
}

.perc79:after {
    background: lightgreen;
    height: 79%;
}





.perc80:after {
    background: green;
    height: 80%;
}

.perc81:after {
    background: green;
    height: 81%;
}

.perc82:after {
    background: green;
    height: 82%;
}

.perc83:after {
    background: green;
    height: 83%;
}

.perc84:after {
    background: green;
    height: 84%;
}

.perc85:after {
    background: green;
    height: 85%;
}

.perc86:after {
    background: green;
    height: 86%;
}

.perc87:after {
    background: green;
    height: 87%;
}

.perc88:after {
    background: green;
    height: 88%;
}

.perc89:after {
    background: green;
    height: 89%;
}



.perc90:after {
    background: green;
    height: 90%;
}

.perc91:after {
    background: green;
    height: 91%;
}

.perc92:after {
    background: green;
    height: 92%;
}

.perc93:after {
    background: green;
    height: 93%;
}

.perc94:after {
    background: green;
    height: 94%;
}

.perc95:after {
    background: green;
    height: 95%;
}

.perc96:after {
    background: green;
    height: 96%;
}

.perc97:after {
    background: green;
    height: 97%;
}

.perc98:after {
    background: green;
    height: 98%;
}

.perc99:after {
    background: green;
    height: 99%;
}

.perc100:after {
    background: green;
    height: 100%;
}



.perch-1:after {
    background: white;
    width: 100%;
}

.perch0:after {
    background: lightgreen;
    width: 0%;
}

.perch1:after {
    background: lightgreen;
    width: 1%;
}

.perch2:after {
    background: lightgreen;
    width: 2%;
}

.perch3:after {
    background: lightgreen;
    width: 3%;
}

.perch4:after {
    background: lightgreen;
    width: 4%;
}

.perch5:after {
    background: lightgreen;
    width: 5%;
}

.perch6:after {
    background: lightgreen;
    width: 6%;
}

.perc7:after {
    background: lightgreen;
    width: 7%;
}

.perch8:after {
    background: lightgreen;
    width: 8%;
}

.perch9:after {
    background: lightgreen;
    width: 9%;
}

.perc10:after {
    background: lightgreen;
    width: 10%;
}

.perc11:after {
    background: lightgreen;
    width: 11%;
}

.perch12:after {
    background: lightgreen;
    width: 12%;
}

.perch13:after {
    background: lightgreen;
    width: 13%;
}

.perch14:after {
    background: lightgreen;
    width: 14%;
}

.perch15:after {
    background: lightgreen;
    width: 15%;
}

.perch16:after {
    background: lightgreen;
    width: 16%;
}

.perch17:after {
    background: lightgreen;
    width: 17%;
}

.perch18:after {
    background: lightgreen;
    width: 18%;
}

.perch19:after {
    background: lightgreen;
    width: 19%;
}

.perch20:after {
    background: lightgreen;
    width: 20%;
}

.perch21:after {
    background: lightgreen;
    width: 21%;
}

.perch22:after {
    background: lightgreen;
    height: 22%;
}

.perch23:after {
    background: lightgreen;
    width: 23%;
}

.perch24:after {
    background: lightgreen;
    width: 24%;
}

.perch25:after {
    background: lightgreen;
    width: 25%;
}

.perch26:after {
    background: lightgreen;
    width: 26%;
}

.perch27:after {
    background: lightgreen;
    width: 27%;
}

.perch28:after {
    background: lightgreen;
    width: 28%;
}

.perch29:after {
    background: lightgreen;
    width: 29%;
}


.perch30:after {
    background: lightgreen;
    width: 30%;
}

.perch31:after {
    background: lightgreen;
    width: 31%;
}

.perch32:after {
    background: lightgreen;
    width: 32%;
}

.perch33:after {
    background: lightgreen;
    width: 33%;
}

.perch34:after {
    background: lightgreen;
    width: 34%;
}

.perch35:after {
    background: lightgreen;
    width: 35%;
}

.perch36:after {
    background: lightgreen;
    width: 36%;
}

.perch37:after {
    background: lightgreen;
    width: 37%;
}

.perch38:after {
    background: lightgreen;
    width: 38%;
}

.perch39:after {
    background: lightgreen;
    width: 39%;
}


.perch40:after {
    background: lightgreen;
    width: 40%;
}

.perch41:after {
    background: lightgreen;
    width: 41%;
}

.perch42:after {
    background: lightgreen;
    width: 42%;
}

.perch43:after {
    background: lightgreen;
    width: 43%;
}

.perch44:after {
    background: lightgreen;
    width: 44%;
}

.perch45:after {
    background: lightgreen;
    width: 45%;
}

.perch46:after {
    background: lightgreen;
    width: 46%;
}

.perch47:after {
    background: lightgreen;
    width: 47%;
}

.perch48:after {
    background: lightgreen;
    width: 48%;
}

.perch49:after {
    background: lightgreen;
    width: 49%;
}



.perch50:after {
    background: lightgreen;
    width: 50%;
}

.perch51:after {
    background: lightgreen;
    width: 51%;
}

.perch52:after {
    background: lightgreen;
    width: 52%;
}

.perch53:after {
    background: lightgreen;
    width: 53%;
}

.perch54:after {
    background: lightgreen;
    width: 54%;
}

.perch55:after {
    background: lightgreen;
    width: 55%;
}

.perch56:after {
    background: lightgreen;
    width: 56%;
}

.perch57:after {
    background: lightgreen;
    width: 57%;
}

.perch58:after {
    background: lightgreen;
    width: 58%;
}

.perch59:after {
    background: lightgreen;
    width: 59%;
}




.perch60:after {
    background: lightgreen;
    width: 60%;
}

.perch61:after {
    background: lightgreen;
    width: 61%;
}

.perch62:after {
    background: lightgreen;
    width: 62%;
}

.perch63:after {
    background: lightgreen;
    width: 63%;
}

.perch64:after {
    background: lightgreen;
    width: 64%;
}

.perch65:after {
    background: lightgreen;
    width: 65%;
}

.perch66:after {
    background: lightgreen;
    width: 66%;
}

.perch67:after {
    background: lightgreen;
    width: 67%;
}

.perch68:after {
    background: lightgreen;
    width: 68%;
}

.perch69:after {
    background: lightgreen;
    width: 69%;
}





.perch70:after {
    background: lightgreen;
    width: 70%;
}

.perch71:after {
    background: lightgreen;
    width: 71%;
}

.perch72:after {
    background: lightgreen;
    width: 72%;
}

.perch73:after {
    background: lightgreen;
    width: 73%;
}

.perch74:after {
    background: lightgreen;
    width: 74%;
}

.perch75:after {
    background: lightgreen;
    width: 75%;
}

.perch76:after {
    background: lightgreen;
    width: 76%;
}

.perch77:after {
    background: lightgreen;
    width: 77%;
}

.perch78:after {
    background: lightgreen;
    width: 78%;
}

.perch79:after {
    background: lightgreen;
    width: 79%;
}





.perch80:after {
    background: lightgreen;
    width: 80%;
}

.perch81:after {
    background: lightgreen;
    width: 81%;
}

.perch82:after {
    background: lightgreen;
    width: 82%;
}

.perch83:after {
    background: lightgreen;
    width: 83%;
}

.perch84:after {
    background: lightgreen;
    width: 84%;
}

.perch85:after {
    background: lightgreen;
    width: 85%;
}

.perch86:after {
    background: lightgreen;
    width: 86%;
}

.perch87:after {
    background: lightgreen;
    width: 87%;
}

.perch88:after {
    background: lightgreen;
    width: 88%;
}

.perch89:after {
    background: lightgreen;
    width: 89%;
}



.perch90:after {
    background: lightgreen;
    width: 90%;
}

.perch91:after {
    background: lightgreen;
    width: 91%;
}

.perch92:after {
    background: lightgreen;
    width: 92%;
}

.perch93:after {
    background: lightgreen;
    width: 93%;
}

.perch94:after {
    background: lightgreen;
    width: 94%;
}

.perch95:after {
    background: lightgreen;
    width: 95%;
}

.perch96:after {
    background: lightgreen;
    width: 96%;
}

.perch97:after {
    background: lightgreen;
    width: 97%;
}

.perc98:after {
    background: lightgreen;
    width: 98%;
}

.perch99:after {
    background: lightgreen;
    width: 99%;
}

.perch100:after {
    background: lightgreen;
    width: 100%;
}