:root {
    --star-0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cpath style='fill:%23e4e4e4' d='m12 .6 3.7 7.5L24 9.3l-6 5.9 1.4 8.2-7.4-3.9-7.4 3.9L6 15.2 0 9.3l8.3-1.2z'/%3E%3C/svg%3E");
    --star-25: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cstyle%3E.st0,.st1%7Bclip-path:url(%23SVGID_00000092455460265698614790000010879890060092197011_);fill:%23fc0%7D.st1%7Bfill:%23e4e4e4%7D%3C/style%3E%3Cdefs%3E%3Cpath id='SVGID_1_' d='m12 .6 3.7 7.5L24 9.3l-6 5.9 1.4 8.2-7.4-3.9-7.4 3.9L6 15.2 0 9.3l8.3-1.2z'/%3E%3C/defs%3E%3CclipPath id='SVGID_00000159459878385623390210000015824057165073093293_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible'/%3E%3C/clipPath%3E%3Cpath style='clip-path:url(%23SVGID_00000159459878385623390210000015824057165073093293_);fill:%23fc0' d='M0 0h6v24H0z'/%3E%3Cpath style='clip-path:url(%23SVGID_00000159459878385623390210000015824057165073093293_);fill:%23e4e4e4' d='M6 0h18v24H6z'/%3E%3C/svg%3E");
    --star-50: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cstyle%3E.st0,.st1%7Bclip-path:url(%23SVGID_00000127032490213728433860000014583462897341802394_);fill:%23fc0%7D.st1%7Bfill:%23e4e4e4%7D%3C/style%3E%3Cdefs%3E%3Cpath id='SVGID_1_' d='m12 .6 3.7 7.5L24 9.3l-6 5.9 1.4 8.2-7.4-3.9-7.4 3.9L6 15.2 0 9.3l8.3-1.2z'/%3E%3C/defs%3E%3CclipPath id='SVGID_00000002349232085399969540000004172963953811535545_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible'/%3E%3C/clipPath%3E%3Cpath style='clip-path:url(%23SVGID_00000002349232085399969540000004172963953811535545_);fill:%23fc0' d='M0 0h12v24H0z'/%3E%3Cpath style='clip-path:url(%23SVGID_00000002349232085399969540000004172963953811535545_);fill:%23e4e4e4' d='M12 0h12v24H12z'/%3E%3C/svg%3E");
    --star-75: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cstyle%3E.st0,.st1%7Bclip-path:url(%23SVGID_00000155142504984522496490000004323369655012619156_);fill:%23fc0%7D.st1%7Bfill:%23e4e4e4%7D%3C/style%3E%3Cdefs%3E%3Cpath id='SVGID_1_' d='m12 .6 3.7 7.5L24 9.3l-6 5.9 1.4 8.2-7.4-3.9-7.4 3.9L6 15.2 0 9.3l8.3-1.2z'/%3E%3C/defs%3E%3CclipPath id='SVGID_00000111157612853679313530000015690585203751538324_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible'/%3E%3C/clipPath%3E%3Cpath style='clip-path:url(%23SVGID_00000111157612853679313530000015690585203751538324_);fill:%23fc0' d='M0 0h18v24H0z'/%3E%3Cpath style='clip-path:url(%23SVGID_00000111157612853679313530000015690585203751538324_);fill:%23e4e4e4' d='M18 0h6v24h-6z'/%3E%3C/svg%3E");
    --star-100: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24' xml:space='preserve'%3E%3Cpath style='fill:%23fc0' d='m12 .6 3.7 7.5L24 9.3l-6 5.9 1.4 8.2-7.4-3.9-7.4 3.9L6 15.2 0 9.3l8.3-1.2z'/%3E%3C/svg%3E");
}

.power-bio-box-article-rating-wrapper {
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

.power-bio-box-article-rating-wrapper .hidden {
    display: none !important;
}

.power-bio-box-article-rating {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    /*border: 1px solid rgba(0,0,0,.25);*/
}

.power-bio-box-article-rating-caption,
.power-bio-box-article-rating-content {
    padding: .5rem;
}

.power-bio-box-article-rating-caption {
    text-align: right;
}

.power-bio-box-article-rating-content {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: .75rem;
    line-height: 1.25;
}

.power-bio-box-article-rating-content em {
    color: rgba(0,0,0,.5);
}

.power-bio-box-article-rating-stars {
    display: flex;
    width: 120px;
    margin: 0 auto;
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star {
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star-0 {
    background-image: var(--star-0);
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star-25 {
    background-image: var(--star-25);
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star-50 {
    background-image: var(--star-50);
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star-75 {
    background-image: var(--star-75);
}

.power-bio-box-article-rating-stars .power-bio-box-article-rating-star-100 {
    background-image: var(--star-100);
}

.power-bio-box-article-rating-content .power-bio-box-article-rating-count {
    padding-left: 1rem;
}

.power-bio-box-article-rating-action {
    text-align: center;
}

.power-bio-box-article-rating-action {
    margin: 0 !important;
}

.power-bio-box-article-rating-action button {
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    background: transparent !important;
    color: rgba(0,0,0,.5) !important;
    transition: all 500ms;
}

.power-bio-box-article-rating-action button:hover,
.power-bio-box-article-rating-action button:active,
.power-bio-box-article-rating-action button:focus {
    background: transparent !important;
    color: rgba(0,0,0,.75) !important;
}

.power-bio-box-article-rating-form {
    max-width: 24rem;
    margin: .25rem auto;
    padding: 1rem;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.25);
}

.power-bio-box-article-rating-form h3 {
    font-size: 1.5rem !important;
    margin: 0 0 1rem !important;
}

.power-bio-box-article-rating-form-stars {
    display: flex;
    flex-direction: row-reverse;
    width: 120px;
    height: 24px;
    margin: 0 auto;
}

.power-bio-box-article-rating-form-stars input[type="radio"] {
    display: none;
}

.power-bio-box-article-rating-form-stars label {
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--star-0);
}

.power-bio-box-article-rating-form-stars input[type="radio"] + label {
    counter-reset: checkbox;
}

.power-bio-box-article-rating-form-stars label:hover ~ label,
.power-bio-box-article-rating-form-stars label:hover,
.power-bio-box-article-rating-form-stars input[type="radio"]:checked ~ label {
    background-image: var(--star-100);
    counter-increment: checkbox;
}

.power-bio-box-article-rating-error {
    color: #c66;
}

.power-bio-box-article-rating-form-process-indicator {
    display: flex;
    margin: 1rem .5rem 0;
    justify-content: center;
    align-items: center;
}

.power-bio-box-article-rating-form-loader {
    width: 24px;
    height: 24px;
    border: 4px solid rgba(0,0,0,.1);
    border-top-color: rgba(0,0,0,.5);
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.power-bio-box-article-rating-form button {
    display: inline-block !important;
    margin: 1rem .5rem 0 !important;
    padding: .5rem 2rem !important;
    color: rgba(0,0,0,.5) !important;
    border: 1px solid rgba(0,0,0,.2) !important;
    background: transparent !important;
    transition: all 300ms;
}

.power-bio-box-article-rating-form button:hover,
.power-bio-box-article-rating-form button:active,
.power-bio-box-article-rating-form button:focus {
    color: rgba(0,0,0,.75) !important;
    border: 1px solid rgba(0,0,0,.75) !important;
    background-color: rgba(0,0,0,.1) !important;
}

.power-bio-box-article-rating-form button:disabled {
    color: rgba(0,0,0,.1) !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    background-color: rgba(0,0,0,.1) !important;
}

@media screen and (max-width: 575px) {
    .power-bio-box-article-rating,
    .power-bio-box-article-rating-content {
        display: block;
    }

    .power-bio-box-article-rating-caption {
        padding-bottom: .25rem;
    }

    .power-bio-box-article-rating-caption,
    .power-bio-box-article-rating-content {
        text-align: center;
    }

    .power-bio-box-article-rating-content {
        padding-top: .25rem;
    }

    .power-bio-box-article-rating-content .power-bio-box-article-rating-count {
        padding: .25rem 0 0 0;
    }
}