:root {
    --five-star-color: #2AC769;
    --four-star-color: #94F5BB;
    --three-star-color: #F5F542;
    --two-star-color: #FFBC1F;
    --one-star-color: #FF6262;
}

.ratings {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    color: transparent;
    overflow: hidden;
}

.full-stars {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    overflow: hidden;
    color: #FBB034;
}

.empty-stars:before,
.full-stars:before {
    content: "\2605\2605\2605\2605\2605";
    letter-spacing: 10px;
}


.empty-stars:before {
    -webkit-text-stroke: 1px #c4c4c4;
}

.full-stars:before {
    -webkit-text-stroke: 1px transparent;
}


.reviews-stats-wrapper svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(17, 154, 226, 0.1);
    stroke-width: 10;
    stroke-linecap: round;
    transform-origin: center center;
    transform: translate(35px, 35px);
}

.reviews-stats-wrapper svg.mobile circle {
    transform: translate(16px, 16px);
}

svg circle:nth-child(1) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.reviews-stats-wrapper svg circle:nth-child(1) {
    stroke-dashoffset: calc(440 - (440 * 100) / 100);
    stroke: var(--one-star-color);
}

svg circle:nth-child(2) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.reviews-stats-wrapper svg circle:nth-child(2) {
    stroke-dashoffset: calc(440 - (440 *  -1 *  calc(100 - var(--star1))) / 100);
    stroke: var(--two-star-color);
}


svg circle:nth-child(3) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.reviews-stats-wrapper svg circle:nth-child(3) {
    stroke-dashoffset: calc(440 - (440 *  -1 *  calc(100 - var(--star1) - var(--star2))) / 100);
    stroke: var(--three-star-color);
}


svg circle:nth-child(4) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.reviews-stats-wrapper svg circle:nth-child(4) {
    stroke-dashoffset: calc(440 - (440 * -1 * calc(100 - var(--star1) - var(--star2) - var(--star3))) / 100);
    stroke: var(--four-star-color);
}

svg circle:nth-child(5) {
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
}

.reviews-stats-wrapper svg circle:nth-child(5) {
    stroke-dashoffset: calc(440 - (440 *  -1 *  calc(100 - var(--star1) - var(--star2) - var(--star3) - var(--star4))) / 100);
    stroke: var(--five-star-color);
}

.review-progress {
    height: 12px;
}

.review-progress::-webkit-progress-bar {
    height: 12px;
    width: 100%;
    margin: 0 auto;
    border-radius: 100px;
    background-color: #e5e5e5;
}

.review-progress::-webkit-progress-value {
    display: inline-block;
    float: left;
    height: 12px;
    padding-left: 10px;
    border-radius: 100px;
}

.review-progress.five-star::-webkit-progress-value {
    background-color: var(--five-star-color);
}

.review-progress.four-star::-webkit-progress-value {
    background-color: var(--four-star-color);
}

.review-progress.three-star::-webkit-progress-value {
    background-color: var(--three-star-color);
}

.review-progress.two-star::-webkit-progress-value {
    background-color: var(--two-star-color);
}

.review-progress.one-star::-webkit-progress-value {
    background-color: var(--one-star-color);
}