.rating-widget { display: flex; align-items: center; position: relative; }
.rating-widget .message { font-size: 12px; font-weight: 700; color: #e63c6a; }
.rating-widget:not(.already) .message:before { content: 'Понравилось?'; }
.rating-widget.already .message:before { content: 'Понравилось:'; }
.rating-widget .message + .button { margin-left: 10px; }
.rating-widget > .button + .button { margin-left: 5px; }
.rating-widget > .button { position: relative; width: 40px; height: 40px; background-color: #f1e5e2; border-radius: 50%; }
.rating-widget:not(.already):not(.popover) > .button { cursor: pointer; }
.rating-widget.already:not(.loading) > .button { display: flex; justify-content: center; align-items: center; }

.rating-widget.already.loading > .button:before { content: ''; }

.rating-widget[data-show_always] .button:before,
.rating-widget.already:not(.loading) .button:before { content: attr(data-count); }

.rating-widget[data-show_always] > .button,
.rating-widget.already > .button { color: #ffffff; font-size: 12px; font-weight: 700; }

.rating-widget[data-show_always] > .button.like,
.rating-widget.already > .button.like { background-color: #e63c6a; }

.rating-widget[data-show_always] > .button.dislike,
.rating-widget.already > .button.dislike { background-color: #444444; }

.rating-widget:not(.already) > .button:before { position: absolute; display: block; content: ''; width: 17px;/*18px;*/ height: 18px; left: 50%; top: 50%;background-image: url(../images/post-rating-icons.svg); background-repeat: no-repeat; }
.rating-widget:not(.already) > .button.like:before { background-position: 0 0; transform: translate(-50%, -70%); }
.rating-widget:not(.already) > .button.dislike:before { background-position: -18px 0; transform: translate(-50%, -30%); }
.rating-widget:not(.already):not(.popover) .button.like:hover,
.rating-widget > .button.like.hover { background-color: #e63c6a; }
.rating-widget:not(.already):not(.popover) > .button.like:hover:before,
.rating-widget > .button.like.hover:before { background-position: 0 -18px; }
.rating-widget:not(.already):not(.popover) > .button.dislike:hover,
.rating-widget > .button.dislike.hover { background-color: #444444; }
.rating-widget:not(.already):not(.popover) > .button.dislike:hover:before,
.rating-widget > .button.dislike.hover:before { background-position: -18px -18px; }


.rating-widget ._popover { box-sizing: initial; position: absolute; min-width: 250px; min-height: 40px; right: 0px; bottom: calc(100% + 9px); padding: 15px; background-color: white; z-index: 10000; border: 1px solid #b5b5b5; border-radius: 10px; margin-right: -65px; box-shadow: 0 0 5px #afafaf; }
.rating-widget ._popover:before { display: block; content: ''; position: absolute; border-width: 10px 10px 0 10px; border-color: #b5b5b5 transparent; border-style: solid; top: 100%; right: 55px; }
.rating-widget ._popover:after { display: block; content: ''; position: absolute; border-width: 9px 9px 0 9px; border-color: white transparent; border-style: solid; top: 100%; right: 56px; }
.rating-widget ._popover .button { position: absolute; top: -15px; right: 16px; width: 30px; height: 30px; border: 1px solid #b5b5b5; background-color: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.rating-widget ._popover .button:hover { background-color: #b5b5b5; cursor: pointer; }
.rating-widget ._popover .button:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 20px; text-rendering: auto; box-sizing: border-box; }
.rating-widget ._popover .close:hover:before { color: #ffffff; }

HTML.fontface-fontawesome .rating-widget ._popover .button.close:before { content: "\f00d"; }
HTML.fontface-fontawesome .rating-widget ._popover .button.apply:before { content: "\f00c"; }


.rating-widget ._popover .button.apply { background-color: #66BB6A; border-color: #66BB6A; color: #ffffff; }
.rating-widget ._popover .button.apply:hover { background-color: #74d678; border-color: #74d678; }


.rating-widget ._popover .content .header { font-size: 14px; font-weight: 700; }
.rating-widget ._popover .content .answers {}
.rating-widget ._popover .content .answers > DIV { margin: 10px 0; font-size: 12px; line-height: 14px; }
.rating-widget ._popover .content .answers > DIV INPUT { display: block; overflow: hidden; width: 0; height: 0; opacity: 0; }
.rating-widget ._popover .content .answers > DIV LABEL { display: flex; vertical-align: middle; cursor: pointer; }
.rating-widget ._popover .content .answers > DIV LABEL:hover { font-weight: 700; }
.rating-widget ._popover .content .answers > DIV LABEL:before { display: inline-block; content: ''; width: 8px; height: 8px; background-color: transparent; border: 2px solid #509453; border-radius: 50%; margin-right: 5px; }
.rating-widget ._popover .content .answers > DIV LABEL:hover:before { background-color: #eaeaea; }
.rating-widget ._popover .content .answers > DIV INPUT:checked ~ LABEL { font-weight: 700; }
.rating-widget ._popover .content .answers > DIV INPUT:checked ~ LABEL:before { background-color: #509453; }


.rating-widget ._popover .content .answers > DIV INPUT ~ TEXTAREA { margin: 10px 0 0 0; width: 100%; box-sizing: border-box; min-height: 70px; outline: none; padding: 3px; font-size: 13px; }
.rating-widget ._popover .content .answers > DIV INPUT:not(:checked) ~ TEXTAREA { display: none; }
.rating-widget ._popover .content .answers > DIV INPUT:checked ~ TEXTAREA { display: block; }

.rating-widget ._popover .submit { border: 0; background-color: #bdbdbd; color: #ffffff; margin-left: -15px; margin-right: -15px; margin-bottom: -15px; border-radius: 0 0 9px 9px; text-align: center; padding: 5px 10px; font-size: 16px; cursor: not-allowed; }
.rating-widget ._popover .submit:not(.disabled) { background-color: #66BB6A; cursor: pointer; }
.rating-widget ._popover .submit:not(.disabled):hover { background-color: #74d678; }


/* Rating */
@media only screen and (max-width: 600px) and (min-width: 520px) {
    .rating-widget .message:before { display: none; }
}

@media only screen and (max-width: 520px) {
    .rating-widget { display: inline-flex; }
    .rating-widget ._popover { right: 50% !important; transform: translateX(50%) !important; margin-right: auto !important; }
}

.rating-widget ._popover .content .ya-share2 { margin-bottom: 10px; }



.rating-widget ._popover .comment-wrap { margin-top: 10px; }
.rating-widget ._popover TEXTAREA { overflow: hidden; box-sizing: border-box; min-height: 45px; max-height: 150px; width: 100%; background-color: #fff; white-space: pre-wrap; border: 1px solid #e1e4e6; font-size: 12px; line-height: 15px; padding: 10px 8px 10px 8px; resize: none; border-radius: 2px; background-clip: padding-box; box-shadow: 0 0 1px rgba(0,0,0,.01), 0 2px 1px rgba(0,0,0,.04); transition-duration: .25s; outline: 0; }
.rating-widget ._popover TEXTAREA:focus { box-shadow: 0 0 5px 3px rgba(95,151,216,.14); }