.tn-node-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
    color: inherit;
    font-size: 14px;
    font-weight: 750;
}

.tn-node-rating[hidden],
.tn-node-rating [hidden] {
    display: none !important;
}

.tn-node-rating__aggregate {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.tn-node-rating__aggregate i {
    color: #ffc83d;
    font-size: 24px;
}

.tn-node-rating__aggregate strong {
    font-size: 21px;
    line-height: 1;
}

.tn-node-rating__aggregate span {
    font-size: 13px;
}

.tn-node-rating__divider {
    width: 1px;
    height: 25px;
    background: currentColor;
    opacity: .42;
}

.tn-node-rating__open {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 7px 18px;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.tn-node-rating__open:hover {
    background: rgba(255, 255, 255, .12);
}

.tn-node-rating__open:focus-visible,
.tn-node-rating__stars button:focus-visible,
.tn-node-rating__cancel:focus-visible {
    outline: 2px solid #315cff;
    outline-offset: 2px;
}

.tn-node-rating__picker {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 14px;
    border: 1px solid currentColor;
    border-radius: 7px;
}

.tn-node-rating__picker > span {
    margin-right: 2px;
    white-space: nowrap;
}

.tn-node-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.tn-node-rating__stars button,
.tn-node-rating__cancel {
    width: 30px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #aeb7c6;
    cursor: pointer;
    font-size: 19px;
    transition: color .15s ease, transform .15s ease;
}

.tn-node-rating__stars button:hover,
.tn-node-rating__stars button.is-selected {
    color: #ffc83d;
}

.tn-node-rating__stars button:hover {
    transform: translateY(-1px);
}

.tn-node-rating__stars button:disabled {
    cursor: wait;
    opacity: .65;
}

.tn-node-rating__cancel {
    color: inherit;
    font-size: 14px;
    opacity: .72;
}

.tn-node-rating__status {
    flex-basis: 100%;
    font-size: 13px;
}

.tn-node-rating__status.is-error {
    color: #ffb4ab;
}

.tn-node-rating input[name="__RequestVerificationToken"] {
    display: none;
}

@media (max-width: 620px) {
    .tn-node-rating {
        gap: 9px 11px;
    }

    .tn-node-rating__picker {
        max-width: 100%;
        flex-wrap: wrap;
    }
}