.star-rating {
    font-size: 28px;
}

[data-star] {
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
}

    [data-star]::before {
        display: block;
        content: '★★★★★';
        color: #ddd;
    }

    [data-star]::after {
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 0;
        content: '★★★★★';
        width: 0;
        color: orange;
        overflow: hidden;
        height: 100%;
    }

[data-star^="0.1"]::after, [data-star^=".1"]::after {
    width: 2%
}

[data-star^="0.2"]::after, [data-star^=".2"]::after {
    width: 4%
}

[data-star^="0.3"]::after, [data-star^=".3"]::after {
    width: 6%
}

[data-star^="0.4"]::after, [data-star^=".4"]::after {
    width: 8%
}

[data-star^="0.5"]::after, [data-star^=".5"]::after {
    width: 10%
}

[data-star^="0.6"]::after, [data-star^=".6"]::after {
    width: 12%
}

[data-star^="0.7"]::after, [data-star^=".7"]::after {
    width: 14%
}

[data-star^="0.8"]::after, [data-star^=".8"]::after {
    width: 16%
}

[data-star^="0.9"]::after, [data-star^=".9"]::after {
    width: 18%
}

[data-star^="1"]::after {
    width: 20%
}

[data-star^="1.1"]::after {
    width: 22%
}

[data-star^="1.2"]::after {
    width: 24%
}

[data-star^="1.3"]::after {
    width: 26%
}

[data-star^="1.4"]::after {
    width: 28%
}

[data-star^="1.5"]::after {
    width: 30%
}

[data-star^="1.6"]::after {
    width: 32%
}

[data-star^="1.7"]::after {
    width: 34%
}

[data-star^="1.8"]::after {
    width: 36%
}

[data-star^="1.9"]::after {
    width: 38%
}

[data-star^="2"]::after {
    width: 40%
}

[data-star^="2.1"]::after {
    width: 42%
}

[data-star^="2.2"]::after {
    width: 44%
}

[data-star^="2.3"]::after {
    width: 46%
}

[data-star^="2.4"]::after {
    width: 48%
}

[data-star^="2.5"]::after {
    width: 50%
}

[data-star^="2.6"]::after {
    width: 52%
}

[data-star^="2.7"]::after {
    width: 54%
}

[data-star^="2.8"]::after {
    width: 56%
}

[data-star^="2.9"]::after {
    width: 58%
}

[data-star^="3"]::after {
    width: 60%
}

[data-star^="3.1"]::after {
    width: 62%
}

[data-star^="3.2"]::after {
    width: 64%
}

[data-star^="3.3"]::after {
    width: 66%
}

[data-star^="3.4"]::after {
    width: 68%
}

[data-star^="3.5"]::after {
    width: 70%
}

[data-star^="3.6"]::after {
    width: 72%
}

[data-star^="3.7"]::after {
    width: 74%
}

[data-star^="3.8"]::after {
    width: 76%
}

[data-star^="3.9"]::after {
    width: 78%
}

[data-star^="4"]::after {
    width: 80%
}

[data-star^="4.1"]::after {
    width: 82%
}

[data-star^="4.2"]::after {
    width: 84%
}

[data-star^="4.3"]::after {
    width: 86%
}

[data-star^="4.4"]::after {
    width: 88%
}

[data-star^="4.5"]::after {
    width: 90%
}

[data-star^="4.6"]::after {
    width: 92%
}

[data-star^="4.7"]::after {
    width: 94%
}

[data-star^="4.8"]::after {
    width: 96%
}

[data-star^="4.9"]::after {
    width: 98%
}

[data-star^="5"]::after {
    width: 100%
}

/* Rating Star Widgets Style */
.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .rating-stars ul > li.star, .rating-stars ul > li {
        display: inline-block;
    }

        /* Idle State of the stars */
        .rating-stars ul > li.star > i.fa {
            font-size: 2em; /* Change the size of the stars */
            color: #ccc; /* Color on idle state */
        }

        /* Hover state of the stars */
        .rating-stars ul > li.star.hover > i.fa {
            color: #FFCC36;
        }

        /* Selected state of the stars */
        .rating-stars ul > li.star.selected > i.fa {
            color: #FF912C;
        }

#ratelink {
    font-size: 17px;
    line-height: 1.5em;
    padding-left: 0.6em;
}

    #ratelink:hover {
        color: grey;
    }

@media only screen and (max-width: 769px) {
    #ratelink {
        padding-left: 0;
        padding-bottom: 0.9em;
    }

    .stats {
        margin-bottom: 0.5em;
        line-height: 1.5em;
        font-size: 17px;
    }

    #ratethis {
        font-size: 31px;
    }

    .rating-widget {
        padding-bottom: 2em;
    }
}


@media only screen and (max-width: 321px) {
    .star-rating {
        font-size: 24px !important;
    }

    .stats {
        font-size: 14px !important;
        line-height: 1.6em !important;
    }
}