﻿.content-rate {
    position: absolute;
    width: 100%;
    height: 20px;
    font-size: 0;
    direction: ltr;
    text-align: right;
    top: 63px;
    right: 20px;
}

    .content-rate .rate-element {
        width: 11px;
        height: 20px;
        display: inline-block;
        vertical-align: top;
        position: relative;
    }

        .content-rate .rate-element.half-star-left {
            background: url(/icons/half-star-left.png) no-repeat right top;
            background-size: 11px auto;
            opacity: 0.4;
        }


    .content-rate .active-rate-left-fix {
        background: url(/icons/half-star-left.png) no-repeat right bottom 2px !important;
        background-size: 11px auto !important;
    }

    .content-rate .active-rate-left,
    .content-rate .rate-element.half-star-left:hover {
        background: url(/icons/half-star-left.png) no-repeat right bottom 2px !important;
        background-size: 11px auto !important;
        filter: unset !important;
    }

    .content-rate .rate-element.half-star-right {
        background: url(/icons/half-star-right.png) no-repeat left top;
        background-size: 11px auto;
        opacity: 0.4;
    }


    .content-rate .active-rate-right-fix {
        background: url(/icons/half-star-right.png) no-repeat left bottom 2px !important;
        background-size: 11px auto !important;
    }

    .content-rate .active-rate-right,
    .content-rate .rate-element.half-star-right:hover {
        background: url(/icons/half-star-right.png) no-repeat left bottom 2px !important;
        background-size: 11px auto !important;
        filter: unset !important;
    }

    .content-rate .active-rate-right-fix,
    .content-rate .active-rate-left-fix {
        filter: saturate(8);
    }

.content-rate-text {
    font-size: 13px;
    direction: rtl;
    margin-left: 10px;
    color: #aaa;
    position: absolute;
    right: 0;
    border: 1px solid #eee;
    width: 150px;
    padding: 5px;
    border-radius: 9px;
    top: 30px;
    text-shadow: 0 0 0.5px #fff;
    background: linear-gradient(#e7e7e7, #eee)
}

    .content-rate-text strong {
        color: #811;
    }

    .content-rate-text:before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: -10px;
        right: 80%;
        margin-right: -5px;
        border-bottom: 10px solid #eee;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
    }
