*{
   box-sizing: border-box;
   font-family: sans-serif;
 }

span{
  display: inline-block;
}

tr[class="read"] {background-image: linear-gradient(to top, rgb(151,255,151), rgb(205,255,205));
}

tr[class="to-read"] {background-image: linear-gradient(to top, rgb(212,227,212), rgb(241,246,241));
  }

tr[class="in-progress"]{
  background-image: linear-gradient(to top, rgb(255,221,153), rgb(255,238,203))}

tr[class="to-read"] span[class="status"] { border: 1px solid rgb(230,19,0);
background-image: linear-gradient(to top,rgb(255,23,2),rgb(255,126,114));
margin: 5px;
border-radius: 10px;
text-align: center;
}

tr[class="read"] span[class="status"] {
  border: 1px solid rgba(29,201,29);
background-image: linear-gradient(to top,rgb(37,224,37),rgb(138,232,138));
margin: 5px;
border-radius: 10px;
text-align: center;
}

tr[class="in-progress"] span[class="status"] { border: 1px solid rgb(194,133,10);
background-image: linear-gradient(to top,rgb(242,166,14),rgb(248,207,124));
margin: 5px;
border-radius: 10px;
text-align: center;
}


span[class="status"], span[class^="rate"] {
  height: 30px;
  width: 120px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 18px;
}

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

span[class~="one"] span:first-child{
  background-color: red;
  background-image: linear-gradient (to right,white, red);
}
span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2) {
  background-image: linear-gradient(to right,white, yellow);
}
span[class~="three"] span{
  background-image: linear-gradient(to right, rgb(37,224,37),rgb(138,232,138));
}