@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css);

#FoodRating, #ServiceRating, #CleanlinessRating, #PromptDeliveryRating {
    display: flex;
    border: none;
    float: left;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

    #FoodRating > input, #ServiceRating > input, #CleanlinessRating > input, #PromptDeliveryRating > input {
        position: absolute;
        filter: blur(10000px) !important;   
    }

#FoodRating > label:before, #ServiceRating > label:before, #CleanlinessRating > label:before, #PromptDeliveryRating > label:before {
    content: '\f005';
    font-family: FontAwesome;
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

#FoodRating > .half:before, #ServiceRating > .half:before, #CleanlinessRating > .half:before, #PromptDeliveryRating > .half:before {
    content: '\f089';
    position: absolute;
    cursor: pointer;
}


#FoodRating > label, #ServiceRating > label, #CleanlinessRating > label, #PromptDeliveryRating > label {
    color: #ddd;
    float: right;
    cursor: pointer;
}

/* For FOOD RATING */
    #FoodRating > input:checked ~ label,
    #FoodRating:not(:checked) > label:hover,
    #FoodRating:not(:checked) > label:hover ~ label {
        color: #F4CE14;
    }

        #FoodRating > input:checked + label:hover,
        #FoodRating > input:checked ~ label:hover,
        #FoodRating > label:hover ~ input:checked ~ label,
        #FoodRating > input:checked ~ label:hover ~ label {
            color: #F4CE14;
        }


/* For SERVICE RATING */
    #ServiceRating > input:checked ~ label,
    #ServiceRating:not(:checked) > label:hover,
    #ServiceRating:not(:checked) > label:hover ~ label {
        color: #F4CE14;
    }

        #ServiceRating > input:checked + label:hover,
        #ServiceRating > input:checked ~ label:hover,
        #ServiceRating > label:hover ~ input:checked ~ label,
        #ServiceRating > input:checked ~ label:hover ~ label {
            color: #F4CE14;
        }


/* For CLEANLINESS RATING */
    #CleanlinessRating > input:checked ~ label,
    #CleanlinessRating:not(:checked) > label:hover,
    #CleanlinessRating:not(:checked) > label:hover ~ label {
        color: #F4CE14;
    }

        #CleanlinessRating > input:checked + label:hover,
        #CleanlinessRating > input:checked ~ label:hover,
        #CleanlinessRating > label:hover ~ input:checked ~ label,
        #CleanlinessRating > input:checked ~ label:hover ~ label {
            color: #F4CE14;
        }


/* For PROMPT DELIVERY RATING */
    #PromptDeliveryRating > input:checked ~ label,
    #PromptDeliveryRating:not(:checked) > label:hover,
    #PromptDeliveryRating:not(:checked) > label:hover ~ label {
        color: #F4CE14;
    }

        #PromptDeliveryRating > input:checked + label:hover,
        #PromptDeliveryRating > input:checked ~ label:hover,
        #PromptDeliveryRating > label:hover ~ input:checked ~ label,
        #PromptDeliveryRating > input:checked ~ label:hover ~ label {
            color: #F4CE14;
        }