.rate {
    display: inline-block;
}

.rate:not(:checked) > input {
    position: absolute;
    top: -9999px;
}
.rate:not(:checked) > label.star-label {
    float: right;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}
.rate:not(:checked) > label.star-label:before {
    font-size: 20px;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 "; 
}
.rate > input:checked ~ label.star-label {
    color: #ffc700;    
}
.rate:not(:checked,.display) > label.star-label:hover,
.rate:not(:checked,.display) > label.star-label:hover ~ label.star-label {
    color: #deb217;  
}
.rate:not(.display) > input:checked + label.star-label:hover,
.rate:not(.display) > input:checked + label.star-label:hover ~ label.star-label,
.rate:not(.display) > input:checked ~ label.star-label:hover,
.rate:not(.display) > input:checked ~ label.star-label:hover ~ label.star-label,
.rate:not(.display) > label.star-label:hover ~ input:checked ~ label.star-label {
    color: #c59b08;
}


.rate-display {
    display: inline-block;
    align-content: center;
}
.rate-display > input {
    display: none;
}
.rate-display > label.star-label {
    float: right;
    color: #ccc;
    font-size: 12px;
    /* line-height: normal; */
}
.rate-display > label.star-label:before {
    font-size: 14px;
    cursor: default;
    font-family: FontAwesome;
    content: "\f005 "; 
}

.rate-display .half:before {
    content: "\f089 " !important; 
    position: absolute;
}

.rate-display input:checked ~ label.star-label { color: #ffc700; }