style.css

.main-container {
    color: white;
    overflow: visible;
}

.position-box {
    display: inline-block;
    border-radius: 3px;
    padding: 2px;
    position: relative;
    border: 1px solid transparent;
}

#NOCOLOUR {
    color: black;
    border: 1px solid black;
    margin-right: 5px;
}

#L1 {
    background-color :#004d00;
    
}
#L2 {
    background-color :#669900;
}
#L3 {
    background-color: #868600;
}
#L4 {
    background-color: #ff0000;
}
#D1 {
    background-color :#3D9970;
}
#D2 {
    background-color: #669900;
}
#D3 {
    background-color: #600f00;
}
#PP1 {
    background-color :#004d00;
    margin-left: 5px;
}
#PP2 {
    background-color:  #669900;
    margin-left: 5px;
}
#G1 {
    background-color: #004d00;
}
#G2 {
    background-color: #669900;
}
#OUT {
    background-color: #f0162f;
}
#NA {
    background-color: black;
}
#ODDS {
    background-color: #275e75;
    border-radius: 3px;
    margin-left: 5px;
}

/* add a new class for the percent, make it shades of green in 10%  */
/* Shades from red to green with yellow in the middle */
#percent-10 {
    background-color: #ff0000; /* Red */
    margin-right: 5px;
}

#percent-20 {
    background-color: #ff4000;
    margin-right: 5px;
}

#percent-30 {
    background-color: #ff8000;
    margin-right: 5px;
}

#percent-40 {
    background-color: #ffbf00;
    margin-right: 5px;
}

#percent-50 {
    background-color: #868600; /* Yellow */
    margin-right: 5px;
}

#percent-60 {
    background-color: #99cc00;
    margin-right: 5px;
}

#percent-70 {
    background-color: #669900;
    margin-right: 5px;
}

#percent-80 {
    background-color: #336600;
    margin-right: 5px;
}

#percent-90 {
    background-color: #006600; /* Dark Green */
    margin-right: 5px;
}

#percent-100 {
    background-color: #004d00; /* Darker Green */
    margin-right: 5px;
}