.rating h3 {font-size:3rem}
.rating .fa-star {color: #e6d0c4}
.rating .active { color: #ae8773}
.rating .frame { background-color: #fff; flex-wrap: wrap; display: flex; padding:2rem}
.rating .fa-user-circle {font-size:2rem; color: #e2e9eb; display: block; margin-bottom:.5rem}
.rating time {display: block; font-size:.9rem}
.rating-label { font-weight: bold; font-size:13px } .rating-bar { width: 300px; padding: 8px; border-radius: 5px } .bar-container { width: 100%; background-color: #e6d0c4; text-align: center; color: white; border-radius: 20px; cursor: pointer }
.rating table .text-center {font-size:13px}

.bar-10 { width: 100%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-9 { width: 90%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-8 { width: 80%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-7 { width: 70%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-6 { width: 60%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-5 { width: 50%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-4 { width: 40%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-3 { width: 30%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-2 { width: 20%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-1 { width: 10%; height: 10px; background-color: #ae8773; border-radius: 20px }
.bar-0 { width: 0%; height: 10px; background-color: #ae8773; border-radius: 20px }

.rating ul {margin:0; padding:0; list-style-type: none; position: relative;}
.rating li {padding-left:1.5rem;  }
.rating .plus li:before  {color: green; content:"\f055"; font-family: "Font Awesome 5 Free"; padding-right:.5rem; position: absolute; left:0}
.rating .minus li:before {color: #ce2929; content:"\f056"; font-family: "Font Awesome 5 Free"; padding-right:.5rem; position: absolute; left:0}