/* - - - - - RATINGS */
/* - - - - - RATINGS */
.red {
    color: red;
}
  .gray {
    color: rgba(94, 77, 76, 0.4);
}
.rating:not(:checked) > input {
  display: none;
}

/* - - - - - RATE */

#rate:not(:checked) > label {
  cursor:pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: block;
  
  color: rgba(94, 77, 76, 0.4);
  line-height: 33px;
  text-align: center;
}
#rate:not(:checked) > label:hover,
#rate:not(:checked) > label:hover ~ label {
   color: #2da61a93;
}
#rate > input:checked + label:hover,
#rate > input:checked + label:hover ~ label,
#rate > input:checked ~ label:hover,
#rate > input:checked ~ label:hover ~ label,
#rate > label:hover ~ input:checked ~ label {
  color: #2ca61a;
}
#rate > input:checked ~ label {
  color: #2ca61a;
}
/* - - - - - LIKE */

#like:not(:checked) > label {
  cursor:pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: block;
  
  color: rgba(94, 77, 76, 0.4);
  line-height: 33px;
  text-align: center;
}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
  color: #5c946e;
}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
    color: #5c946e;
}
#like > input:checked ~ label {
    color: #5c946e;
}