/*! RATING WIDGET: Common styles for all UI variants */

:root {
    --color-primary: #00B0DC;
    --color-secondary: #fac405;
    --color-neutral: #333333;
}

@font-face {
    font-family: "RatingWidgetMuli";
    src: url("fonts/muli-webfont.eot");
    src: url("fonts/muli-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/muli-webfont.woff2") format("woff2"), url("fonts/muli-webfont.woff") format("woff"), url("fonts/muli-webfont.ttf") format("truetype"), url("fonts/muli-webfont.svg#muliregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

.rating-widget,
.rating-widget::before,
.rating-widget::after,
.rating-widget *,
.rating-widget *::before,
.rating-widget *::after {
    box-sizing: border-box;
}

.rating-widget {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    font-family: "Century Gothic", "CenturyGothic", "RatingWidgetMuli", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-neutral);
    background-color: var(--color-primary);
    transition: background-color 0.2s ease-in-out;
}

.rating-widget:hover {
    background-color: var(--color-secondary);
}

.rating-widget img,
.rating-widget svg {
    max-width: 100%;
}

.rating-widget,
.rating-widget:link,
.rating-widget:visited,
.rating-widget:hover,
.rating-widget:active,
.rating-widget *,
.rating-widget:link *,
.rating-widget:visited *,
.rating-widget:hover *,
.rating-widget:active * {
    text-decoration: none !important;
}

.rating-widget p {
    margin: 0;
    padding: 0;
}

.rating-widget strong,
.rating-widget__heading,
.rating-widget__rescore,
.rating-widget__score {
    font-weight: 700;
}

.rating-widget__heading {
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.rating-widget__asset {
    font-size: 30px;
    line-height: 1;
    display: flex;
    justify-content: center;
}

.rating-widget__star {
    display: inline-block;
    white-space: nowrap;
    text-indent: 100%;
    overflow: hidden;
}