.rating {

    position: absolute;
    right: 0;
    top: 85px;
}
.star {
    font-size: x-large;
    width: 24px;
    display: inline-block;
    color: #c2c2c2;
    margin-bottom: 20px;
    cursor: pointer;
}

    .star:before {
        content: '\2605';
        position: absolute;
    }

    .star.on {
        color: #1a76d2;
    }

    .star.zero:after {
        content: '\2605';
        color: #1a76d2;
        position: absolute;
        overflow: hidden;
        width: 0;
    }

    .star.onU {
        color: #fdbe00;
    }

    .star.zeroU:after {
        content: '\2605';
        color: #fdbe00;
        position: absolute;
        overflow: hidden;
        width: 0;
    }

    .star.zero:hover::after {
        width: 0 !important;
    }

.p25:after {
    width: 7px !important;
}

.p50:after {
    width: 10px !important;
}

.p75:after {
    width: 13px !important;
}

.star:hover {
    color: #fdbe00 !important;
}

.cross {
    color: #A0A0A0;
    cursor: pointer;
    float: left;
    font-size: 24px;
    margin-top: 5px;
    margin-right: 10px;
}

.cross:hover {
    color: #fdbe00;
}

.cross.on {
        color: #fdbe00;
    }
.cross.off {
        color: #A0A0A0;
}

/*.cross {
    font-size: 18px;
    width: 20px;
    display: inline-block;
    color: #A0A0A0;
    margin: -6px 16px 27px 3px;
    cursor: pointer;
}

.cross.on {
        color: #fdbe00;
    }
.cross.off {
        color: #A0A0A0;
}
.cross:before {
        content: '\2299';
        position: absolute;
        font-size:26px;
}
.cross:after {
        content: '\271A';
        position: absolute;
        padding: 8px 0px 0px 5px;
}
.cross:hover {
    color: #fdbe00 !important;
}*/