﻿.customer-reviews-wrapper {
  display: flex;
  width: 470px;
  margin: auto;
}

.customer-reviews-wrapper .col-left {
  width: 130px;
  padding-top: 15px;
}

.customer-reviews-wrapper .col-right {
  width: 340px;
}

.customer-reviews-wrapper div.stars {
  font-size: 13px;
  letter-spacing: 1.5px;
}

.customer-reviews-wrapper div.stars .orange {
  color: #fdd101;
}

.customer-reviews-wrapper div.stars .grey {
  color: rgb(220, 220, 220);
}

.circle-wrap {
  width: 100px;
  height: 100px;
  background: #e6e2e7;
  border-radius: 50%;
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 100px, 50px);
}

.circle-wrap .circle .mask .fill {
  clip: rect(0px, 50px, 100px, 0px);
  background-color: #fdd101;
}

.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
  animation: fill ease-in-out 3s;
}

.circle-wrap .inside-circle {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  line-height: 20px;
  text-align: center;
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  z-index: 100;
}

.circle-wrap .inside-circle span {
  display: block;
}

.circle-wrap .inside-circle .ico-star-full:before {
  font-size: 2em;
}

.circle-wrap .inside-circle .ico-star-full {
  color: #fdd101;
  margin: 8px 0px 4px 0;
}

.circle-wrap .inside-circle .rate {
  color: #fdd101;
  line-height: 20px;
  font-size: 20px;
  font-weight: 500;
}

.circle-wrap .inside-circle span:nth-child(3) {
  font-size: 14px;
  line-height: 20px;
}

.stars-row {
  display: flex;
  align-items: center;
}

.line {
  height: 5px;
  width: 200px;
  margin: 0 7px;
  background: rgb(220, 220, 220);
}

.line-inner {
  height: 5px;
  background: #fdd101;
}

.stars-total {
  line-height: 29px;
}

.reviews-count,
.stars-total {
  font-size: 14px;
}
