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

.star-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.rating-wrap {
    max-width: 480px;
    margin: 0 auto 0 auto;
    padding: 0 15px 0 15px;
    /* box-shadow: 0 0 3px 0 rgba(0,0,0,.2); */
    text-align: center;
}

.center {
    width: 162px;
    margin: auto;
}

#rating-value {
    width: auto;
    min-height: 42px;
    margin: 40px auto 0;
    padding: 10px 5px;
    text-align: center;
    /*box-shadow: inset 0 0 2px 1px rgba(46,204,113,.2);*/
}

/*styling star rating*/
.rating {
    border: none;
    float: left;
}

.rating > input {
    display: none;
}

.rating > label:before {
    content: '\f005';
    font-family: FontAwesome, serif;
    margin: 5px;
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

.rating > .half:before {
    content: '\f089';
    position: absolute;
    cursor: pointer;
}

.rating > label {
    color: #ddd;
    float: right;
    cursor: pointer;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: var(--accent);
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
    color: var(--accent);
}