tr[class="read"] {
    background-image: linear-gradient(#b1ffae);
}

tr[class="to-read"] {
    background-image: linear-gradient(#e5eee5);
}

tr[class="in-progress"] {
    background-image: linear-gradient(#ffe5b3);
}

span {
    display: inline-block;
}

tr[class="to-read"] span[class="status"] {
    border: 1px solid black;
    background-image: linear-gradient(#ff5343, #ff5343);
}

tr[class="read"] span[class="status"] {
    border: 1px solid black;
    background-image: linear-gradient(#57e757, #57e757);
}


tr[class="in-progress"] span[class="status"] {
    border: 1px solid black;
    background-image: linear-gradient(#f5b940, #f5b940);
}

span[class="status"], span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
}

span[class^="rate"]>span {
    border: 2px solid grey;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 10px;
    background-color: white;
}


span[class~="one"] :nth-child(1) {
    background-image: linear-gradient(#232323 70%, #345667 30%);
}

span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2) {
    background-image: linear-gradient(#232323 30%, #345667 30%);
}

span[class~="three"] span {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}