/*-------------------------------- Common --------------------------------*/
.rpi {
    --visible: visible;
    --font-family: Arial;

    --head-fs: 1em;
    --head-grade-fs: 1.125em;
    --head-logo-size: 14px;
    --head-star-color: #fb7900;
    --head-text-fs: 1em;
    --head-based-fs: .85em;
    --head-btn-fs: .65em;
    --head-card-br: none;
    --head-card-br-color: #cccccc;
    --head-card-bg: #f5f5f5;
    --head-card-bg-color: #f5f5f5;
    --head-card-radius: 5px;
    --head-card-shadow: none;
    --head-img-size: 48px;

    --fs: 1em;
    --name-fs: 13px;
    --text-fs: 15px;
    --rev-time-fs: .75em;
    --logo-size: 14px;
    --star-size: 1.125em;
    --stars-gap: 0.25em;
    --bubble-size: 1em;
    --img-size: 44px;
    --rev-text-lh: 1.25em;
    --flex-align-items: center;
    --info-gap: 0.25em;
    --card-gap: 16px;
    --card-padding: .75em;
    --card-br: none;
    --card-br-color: #cccccc;
    --card-bg: #f5f5f5;
    --card-bg-color: #f5f5f5;
    --card-radius: 5px;
    --card-shadow: none;
    --meta-margin: 1em;
    --left-margin: .5em;
    --body-gap: 8px;

    --flex-text-align: left;
    --flex-direction: row;
    --flex-justify-content: left;
    --stars-justify-content: left;

    --text-lines: 6;
    --text-line-height: 22px;
    --media-lines: 2;
    --media-height: calc(var(--media-lines) * var(--text-line-height));
    --reply-lines: 2;
    --reply-height: calc(var(--reply-lines) * var(--text-line-height));

    --reply-margin: 6px;
    --reply-padding: 6px;
    --card-color: #333333;
    --name-color: #154fc1;
    --time-color: #555555;
    --star-color: #fb7900;
    --readmore-color: #136aaf;

    --avaborder-margin: calc(-1 * (var(--img-size) / 2 + var(--card-padding)));
    --avaborder-margin-left: var(--avaborder-margin);
    --avaborder-padding: calc(var(--img-size) / 2);
    --avaborder-padding-left: var(--avaborder-padding);

    --bubble-flex-margin-left: calc(var(--card-padding) + var(--left-margin));
    --slider-bubble-flex-margin-left: calc(var(--card-padding) + var(--slider-card-margin) + var(--left-margin));
    --bubble-width-before: calc(var(--card-padding) + var(--left-margin) + var(--img-size)/2 - hypot(var(--bubble-size), var(--bubble-size))/2);
    --bubble-width-after: calc(100% - (var(--card-padding) + var(--left-margin) + var(--img-size)/2 + hypot(var(--bubble-size), var(--bubble-size))/2));
    --bubble-width-center: calc(50% - hypot(var(--bubble-size), var(--bubble-size))/2);
    --triangle-left: calc(var(--card-padding) + var(--left-margin) + var(--img-size)/2 - var(--bubble-size)/2);
    --triangle-center: calc(50% - var(--bubble-size)/2);

    --tag-fs: 1em;
    --tag-bg: #ffffff;
    --tag-logo-size: 0.85em;
    --tag-star-size: 1.1em;
    --tag-text-color: #333333;

    --flash-width: 100%;
    --flash-height: auto;

    --slider-card-gap: 8px;
    --slider-card-margin: 8px;
    --slider-btn-size: 1em;
    --slider-btn: var(--slider-btn-size);
    --slider-dot-size: 8px;
    --slider-head-card-br: none;
    --slider-head-card-br-color: #cccccc;
    --slider-head-card-bg: transparent;
    --slider-head-card-bg-color: #f5f5f5;
    --slider-head-card-radius: none;
    --slider-head-card-shadow: none;

    display: block;
    direction: ltr;
    font-size: var(--font-size, 16px);
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    text-align: left;
    line-height: normal;
    overflow: visible;
    text-decoration: none;
    list-style-type: disc;
    box-sizing: border-box;
    visibility: visible!important;
}

.rpi *,
.rpi *:before,
.rpi *:after {
    box-sizing: inherit;
}

.rpi a {
    display: inline;
    margin: 0!important;
    padding: 0!important;
    color: inherit!important;
    text-decoration: none!important;
    border: none!important;
    outline: none!important;
    box-shadow: none!important;
    background: none!important;
}

.rpi .rpi-readmore {
    display: block;
    color: var(--readmore-color);
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}

.rpi-hide {
    display: none;
}

/*-------------------------------- Logo --------------------------------*/
.rpi-logo,
.rpi-logo_after,
.rpi-logos {
    display: flex;
    align-items: center;
}

.rpi-logos {
    gap: 4px;
}

.rpi-logo::before,
.rpi-logo_after::after {
    display: block;
    content: '';
    width: var(--logo-size, 14px);
    height: var(--logo-size, 14px);
    border-radius: 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    z-index: 3;
}
.rpi-logo-google::before,
.rpi-logo-google.rpi-logo_after::after {
    background-image: url('../img/icons.svg#rpi-logo-g');
}
.rpi-logo-facebook::before,
.rpi-logo-facebook.rpi-logo_after::after {
    background-image: url('../img/icons.svg#rpi-logo-f');
}
.rpi-logo-yelp::before,
.rpi-logo-yelp.rpi-logo_after::after {
    background-image: url('../img/icons.svg#rpi-logo-y');
}
.rpi-logo-yelp.rpi-logo_after::before {
    content: 'yelp';
    background-image: none;
}

.rpi-card-inner > .rpi-logos,
.rpi-card-inner.rpi-logo::before {
    position: absolute;
    top: 7px;
    right: 7px;
    border-radius: 50%;
}
.rpi-logo.rpi-logo-left::before {
    right: auto;
    left: 7px;
}
.rpi-header .rpi-card-inner > .rpi-logos,
.rpi-header .rpi-card-inner.rpi-logo::before {
    background-color: var(--head-card-bg);
}
.rpi-slider .rpi-header .rpi-card-inner > .rpi-logos,
.rpi-slider .rpi-header .rpi-card-inner.rpi-logo::before {
    background-color: var(--slider-head-card-bg);
}
.rpi-content .rpi-card-inner > .rpi-logos,
.rpi-content .rpi-card-inner.rpi-logo::before {
    background-color: var(--card-bg);
}

.rpi-body.rpi-logo::before {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--card-bg);
}
.rpi-body.rpi-logo.rpi-logo-left::before {
    right: auto;
    left: 0;
}

.rpi-stars.rpi-logo::before {
    margin: 0.1em 0.1em 0 0;
    /*width: calc(var(--star-size) - 0.25em);
    height: calc(var(--star-size) - 0.25em);
    vertical-align: middle;*/
}
.rpi-img.rpi-logo::before {
    display: flex;
    position: absolute;
    bottom: calc(15% - var(--logo-size)/2);
    right: calc(15% - var(--logo-size)/2);
    background-color: #f5f5f5;
    border-radius: 50%;
}

.rpi-review_us .rpi-logo_after::after {
    vertical-align: middle;
    border-radius: 50%;
    background-color: #ffffff;
}
.rpi-review_us .rpi-logo-yelp::after {
    border: 1px solid;
}

.rpi-header .rpi-logo::before,
.rpi-header .rpi-logo_after::after {
    width: var(--head-logo-size, 14px);
    height: var(--head-logo-size, 14px);
}

.rpi-based .rpi-logo_after.rpi-logo-yelp {
    color: #333;
    font-weight: 600;
}

/*-------------------------------- Stars --------------------------------*/
.rpi-stars {
    display: inline-flex;
    margin: 0;
    padding: 0;
    gap: var(--stars-gap);
    align-items: center;
    justify-content: var(--stars-justify-content, left);
}

.rpi-stars[data-rating]::before,
.rpi-star:first-child[data-rating]::before {
    content: attr(data-rating);
    color: var(--star-color);
    font-size: var(--head-grade-fs);
    font-weight: var(--head-grade-weight, 900);
}

.rpi-star {
    display: inline-flex;
    margin: 0;
    padding: 0;
    gap: var(--stars-gap, 4px);
    align-items: center;
}

.rpi-star::after {
    content: '';
    display: block;
    width: var(--star-size);
    height: var(--star-size);
    -webkit-mask: url('../img/icons.svg#rpi-star');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask: url('../img/icons.svg#rpi-star');
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: var(--star-color);
}

.rpi-star-h::after {
    -webkit-mask: url('../img/icons.svg#rpi-star-h');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask: url('../img/icons.svg#rpi-star-h');
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: var(--star-color);
}

.rpi-star-o::after {
    -webkit-mask: url('../img/icons.svg#rpi-star-o');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask: url('../img/icons.svg#rpi-star-o');
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: #ccc;
}

.rpi-header .rpi-star::after,
.rpi-header .rpi-star-h::after,
.rpi-header .rpi-star-o::after {
    width: var(--head-star-size, var(--star-size));
    height: var(--head-star-size, var(--star-size));
}

.rpi-header .rpi-star::after,
.rpi-header .rpi-star-h::after {
    background-color: var(--head-star-color);
}

/*-------------------------------- Img --------------------------------*/
.rpi .rpi-img {
    position: relative;
    display: block;
    width: var(--img-size);
    height: var(--img-size);
    border-radius: 50%;
}

.rpi img.rpi-img {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    min-width: initial;
    max-width: initial;
    object-fit: cover;
    object-position: top;
    box-shadow: var(--card-shadow);
}

.rpi .rpi-header .rpi-img {
    width: var(--head-img-size);
    height: var(--head-img-size);
    /* !!!??? margin-left: 2px; ???!!! */
}

.rpi .rpi-header img.rpi-img {
    min-width: var(--head-img-size);
    box-shadow: var(--head-card-shadow);
}

/*-------------------------------- yelp stars --------------------------------*/
.rpi-stars-yelp .rpi-star {
    border-radius: 3px;
}
.rpi-stars-yelp .rpi-star::after {
    mask-size: 70%;
    mask-position: center;
    vertical-align: top;
    background-color: #fff;
}
.rpi-stars-yelp .rpi-star-o::after {
    -webkit-mask: url('../img/icons.svg#rpi-star');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask: url('../img/icons.svg#rpi-star');
    mask-repeat: no-repeat;
    mask-size: 70%;
    mask-position: center;
}

.rpi-yelp50 {
    --star-color: #fb433c;
}
.rpi-yelp40,.rpi-yelp45 {
    --star-color: #ff643d;
}
.rpi-yelp30,.rpi-yelp35 {
    --star-color: #ff8742;
}
.rpi-yelp20,.rpi-yelp25 {
    --star-color: #ffad48;
}
.rpi-yelp10,.rpi-yelp15 {
    --star-color: #ffcc4b;
}

.rpi-yelp50 .rpi-star {
    background-color: #fb433c;
}
.rpi-yelp40 .rpi-star,
.rpi-yelp45 .rpi-star {
    background-color: #ff643d;
}
.rpi-yelp45 .rpi-star:nth-child(5) {
    background: linear-gradient(90deg, #ff643d 50%, #bbbac0 50%);
}
.rpi-yelp30 .rpi-star,
.rpi-yelp35 .rpi-star {
    background-color: #ff8742;
}
.rpi-yelp35 .rpi-star:nth-child(5) {
    background-color: #bbbac0;
}
.rpi-yelp35 .rpi-star:nth-child(4) {
    background: linear-gradient(90deg, #ff8742 50%, #bbbac0 50%);
}
.rpi-yelp40 .rpi-star:nth-child(5),
.rpi-yelp30 .rpi-star:nth-child(5),
.rpi-yelp30 .rpi-star:nth-child(4),
.rpi-yelp20 .rpi-star,
.rpi-yelp25 .rpi-star,
.rpi-yelp10 .rpi-star,
.rpi-yelp15 .rpi-star {
    background-color: #bbbac0;
}
.rpi-yelp20 .rpi-star:nth-child(1),
.rpi-yelp20 .rpi-star:nth-child(2),
.rpi-yelp25 .rpi-star:nth-child(1),
.rpi-yelp25 .rpi-star:nth-child(2) {
    background-color: #ffad48;
}
.rpi-yelp25 .rpi-star:nth-child(3) {
    background: linear-gradient(90deg, #ffad48 50%, #bbbac0 50%);
}
.rpi-yelp10 .rpi-star:nth-child(1),
.rpi-yelp15 .rpi-star:nth-child(1) {
    background-color: #ffcc4b;
}
.rpi-yelp15 .rpi-star:nth-child(2) {
    background: linear-gradient(90deg, #ffcc4b 50%, #bbbac0 50%);
}

/*-------------------------------- Helpers --------------------------------*/
.rpi-pop {
    top: 100% !important;
    bottom: auto !important;
    opacity: 0;
    -webkit-transform: translate(0px, 0%);
    -ms-transform: translate(0px, 0%);
    transform: translate(0px, 0%);
    -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
    transition: opacity 300ms ease, -webkit-transform 300ms ease;
    transition: transform 300ms ease, opacity 300ms ease;
    transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease;
}

.rpi-pop-up {
    opacity: 1;
    -webkit-transform: translate(0px, -100%);
    -ms-transform: translate(0px, -100%);
    transform: translate(0px, -100%);
    text-align: left;
}

.rpi-pop-down {
    opacity: .5;
    -webkit-transition: opacity 150ms ease;
    transition: opacity 150ms ease;
    transition: opacity 150ms ease;
    transition: opacity 150ms ease;
}

.rpi-clickable {
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}

.rpi-clickable:hover {
    box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .24);
}

.rpi-clickable:active {
    box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 0px 1px rgba(0, 0, 0, .24);
}

.rpi-scroll::-webkit-scrollbar {
    width: 4px;
}

.rpi-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.rpi-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ccc;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.rpi-scroll::-webkit-scrollbar-thumb:window-inactive {
    background: #ccc;
}

/*-------------------------------- Margin & Padding --------------------------------*/
.rpi-card-inner {
    padding: var(--card-padding);
}

/*-------------------------------- Margin & Padding: bubble flex --------------------------------*/
.rpi-bubble__flex {
    margin-left: var(--bubble-flex-margin-left);
}
.rpi-bubble__flex_up {
    margin-bottom: var(--meta-margin);
}
.rpi-bubble__flex_down {
    margin-top: var(--meta-margin);
}

.rpi-slider .rpi-bubble__flex {
    margin-left: var(--slider-bubble-flex-margin-left);
}

/*-------------------------------- Margin & Padding: body --------------------------------*/
.rpi-normal-up__body {
    margin-top: var(--meta-margin);
}
.rpi-normal-down__body {
    margin-bottom: var(--meta-margin);
}

.rpi-flex {
    gap: var(--flex-gap, 0.75em);
}

.rpi-info {
    gap: var(--info-gap);
}

/*-------------------------------- Flex --------------------------------*/
.rpi-flex,
.rpi-flexwrap {
    position: relative;
    display: var(--ms-flex-display, -ms-flexbox);
    display: var(--flex-display, flex);
    -ms-flex-wrap: var(--ms-flex-wrap, nowrap);
    flex-wrap: var(--flex-wrap, nowrap);
    align-items: var(--flex-align-items, center);
}

.rpi-flex {
    text-align: var(--flex-text-align, left);
    flex-direction: var(--flex-direction, row);
    justify-content: var(--flex-justify-content, left);
}

.rpi-flexwrap {
    row-gap: 8px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rpi-shift-up__flex {
    --flex-align-items: var(--center-align-items, star);
}

.rpi-shift-down__flex {
    --flex-align-items: var(--center-align-items, end);
}

/*-------------------------------- Card --------------------------------*/
.rpi-cards {
    display: flex;
    display: -ms-flexbox;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: center;
    scrollbar-width: none;
}

.rpi-card {
    display: block;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    /*transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;*/
}

.rpi-content .rpi-card {
    font-size: var(--fs);
}

.rpi-card-inner {
    display: block;
    position: relative;
    color: var(--card-color);
}

.rpi-card-inner.rpi-flexwrap {
    display: flex;
}

.rpi-header .rpi-card-inner {
    container-name: header;
    container-type: inline-size;
    border: var(--head-card-br);
    border-color: var(--head-card-br-color);
    border-radius: var(--head-card-radius);
    background-color: var(--head-card-bg);
    box-shadow: var(--head-card-shadow);
}

.rpi-slider .rpi-header .rpi-card-inner {
    border: var(--slider-head-card-br);
    border-color: var(--slider-head-card-br-color);
    border-radius: var(--slider-head-card-radius);
    background-color: var(--slider-head-card-bg);
    box-shadow: var(--slider-head-card-shadow);
}

.rpi-content .rpi-card-inner {
    border: var(--card-br);
    border-color: var(--card-br-color);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}

/*-------------------------------- Card bubble: top & down borders --------------------------------*/
.rpi-bubble__inner.rpi-bubble__inner_up {
    border-top-width: 0;
}
.rpi-bubble__inner.rpi-bubble__inner_down {
    border-bottom-width: 0;
}

.rpi-slider .rpi-bubble__inner.rpi-bubble__inner_up {
    margin-top: 0;
}
.rpi-slider .rpi-bubble__inner.rpi-bubble__inner_down {
    margin-bottom: 0;
}

.rpi-bubble__inner::before,
.rpi-bubble__inner::after {
    content: "";
    position: absolute;
    display: block;
    height: 4px;
    background-color: inherit;
}
.rpi-bubble__inner::before {
    left: 0;
    width: var(--bubble-width-before);
}
.rpi-bubble__inner::after {
    right: 0;
    width: var(--bubble-width-after);
}

.rpi-bubble__inner_up::before,
.rpi-bubble__inner_up::after {
    top: 0;
    border-top: 1px solid #ccc;
    border-color: inherit;
}
.rpi-bubble__inner_up::before {
    border-top-left-radius: inherit;
}
.rpi-bubble__inner_up::after {
    border-top-right-radius: inherit;
}

.rpi-bubble__inner_down::before,
.rpi-bubble__inner_down::after {
    bottom: 0;
    border-bottom: 1px solid #ccc;
    border-color: inherit;
}
.rpi-bubble__inner_down::before {
    border-bottom-left-radius: inherit;
}
.rpi-bubble__inner_down::after {
    border-bottom-right-radius: inherit;
}

/*-------------------------------- Card bubble: triangle --------------------------------*/
.rpi-card-inner i {
    display: none;
}

.rpi-triangle {
    position: absolute;
    left: var(--triangle-left);
    width: var(--bubble-size);
    height: var(--bubble-size);
    background-color: inherit;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rpi-triangle.rpi-triangle_up {
    display: block;
    top: calc(var(--bubble-size)/-2);
}
.rpi-triangle__br_up {
    border-top: 1px solid;
    border-left: 1px solid;
    border-color: inherit;
}

.rpi-triangle.rpi-triangle_down {
    display: block;
    bottom: calc(var(--bubble-size)/-2);
}
.rpi-triangle__br_down {
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-color: inherit;
}

/*-------------------------------- Avatar border --------------------------------*/
.rpi-avaborder-up {
    padding-left: var(--avaborder-padding-left);
    padding-top: var(--center-avaborder-padding, 0);
}
.rpi-avaborder-up div.rpi-flex {
    margin-left: var(--avaborder-margin-left);
    margin-top: var(--center-avaborder-margin, 0);
}

.rpi-avaborder-down {
    --flex-direction: var(--center-avaborder-flex-direction, row);
    padding-left: var(--avaborder-padding-left);
    padding-bottom: var(--center-avaborder-padding, 0);
}
.rpi-avaborder-down div.rpi-flex {
    margin-left: var(--avaborder-margin-left);
    margin-bottom: var(--center-avaborder-margin, 0);
}

/*-------------------------------- Columns New --------------------------------*/
.rpi-col-xs {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.rpi-card.rpi-card_block {
    --col: 1!important;
    --gap: 1!important;
}

.rpi-header,
.rpi-content,
.rpi-col-xs .rpi-card,
.rpi-col-xs .rpi-header_row,
.rpi-col-xs .rpi-content_row,
.rpi-col-x .rpi-header_row + .rpi-content_row .rpi-card {
    --col: 1;
    --gap: 0;
}

.rpi-col-xl .rpi-header_row + .rpi-content_row {
    --col: 1.2;
    --gap: 1;
}

.rpi-col-l .rpi-header_row + .rpi-content_row {
    --col: 1.25;
    --gap: 1;
}

.rpi-col-m .rpi-header_row + .rpi-content_row {
    --col: 1.333333;
    --gap: 1;
}

.rpi-col-s .rpi-header_row + .rpi-content_row {
    --col: 1.5;
    --gap: 1;
}

.rpi-col-x .rpi-card,
.rpi-col-x .rpi-header_row,
.rpi-col-x .rpi-header_row + .rpi-content_row,
.rpi-col-s .rpi-header_row + .rpi-content_row .rpi-card {
    --col: 2;
    --gap: 1;
}

.rpi-col-s .rpi-card,
.rpi-col-s .rpi-header_row,
.rpi-col-m .rpi-header_row + .rpi-content_row .rpi-card {
    --col: 3;
    --gap: 2;
}

.rpi-col-m .rpi-card,
.rpi-col-l .rpi-card,
.rpi-col-m .rpi-header_row {
    --col: 4;
    --gap: 3;
}

.rpi-col-xl .rpi-card,
.rpi-col-l .rpi-header_row {
    --col: 5;
    --gap: 4;
}

.rpi-col-xl .rpi-header_row {
    --col: 6;
    --gap: 5;
}

.rpi-header_row,
.rpi-content_row,
.rpi-grid .rpi-card {
    -ms-flex: 1 0 calc((100% - var(--card-gap)*var(--gap)) / var(--col));
    flex: 1 0 calc((100% - var(--card-gap)*var(--gap)) / var(--col));
    width: calc((100% - var(--card-gap)*var(--gap)) / var(--col));
}

.rpi-slider .rpi-card {
    -ms-flex: 1 0 calc((100% - (var(--slider-card-gap))*var(--gap)) / var(--col));
    flex: 1 0 calc((100% - (var(--slider-card-gap))*var(--gap)) / var(--col));
    width: calc((100% - (var(--slider-card-gap))*var(--gap)) / var(--col));
}

.rpi-slider .rpi-header,
.rpi-slider .rpi-content {
    -ms-flex: 1 0 calc((100% - var(--slider-card-gap)) / var(--col, 1));
    flex: 1 0 calc((100% - var(--slider-card-gap)) / var(--col, 1));
    width: calc((100% - var(--slider-card-gap)) / var(--col, 1));
}

.rpi-header_top,
.rpi-content_top {
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    width: 100%;
}

/*-------------------------------- Header ratings --------------------------------*/
.rpi-cnt,
.rpi-slider-btn {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    align-items: center;
    -ms-flex-align: center;
}

.rpi-header,
.rpi-content {
    min-width: 0;
}

.rpi-header .rpi-card {
    font-size: var(--head-fs);
}

.rpi-header .rpi-flex {
    -ms-flex: 1 0 60%;
    flex: 1 0 60%;
    overflow: hidden;
    text-align: var(--head-flex-text-align, left);
    flex-direction: var(--head-flex-direction, row);
}

.rpi-slider .rpi-header .rpi-flex {
    text-align: var(--slider-head-flex-text-align, left);
}

.rpi-header .rpi-info {
    -ms-flex: 1 0 calc(100% - var(--img-size) - var(--card-padding));
    flex: 1 0 calc(100% - var(--img-size) - var(--card-padding));
    line-height: 1.4;
    text-wrap: wrap;
    overflow: hidden;
}

.rpi-score,
.rpi-based {
    display: flex;
    gap: var(--score-gap, 4px);
    align-items: center;
    justify-content: var(--slider-head-flex-text-align, var(--head-flex-text-align, start));
}

.rpi-header .rpi-scale,
.rpi-header .rpi-name {
    /*display: grid;*/
    justify-content: var(--slider-head-flex-text-align, var(--head-flex-text-align, start));
    font-size: var(--head-text-fs);
    font-weight: 700;
    color: var(--head-scale-color, #154fc1);
    white-space: normal;
    vertical-align: middle;
}

.rpi-based {
    flex-wrap: wrap;
    font-size: var(--head-based-fs);
    color: var(--head-based-color, #777777);
}

/*-------------------------------- Review info --------------------------------*/
.rpi-info {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /*justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;*/
}

.rpi-content .rpi-info {
    overflow: hidden;
}

.rpi-name {
    display: flex !important;
    align-items: center;
    gap: 4px;
    color: var(--name-color);
    font-size: var(--name-fs);
    font-weight: var(--name-weight, normal);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    line-height: var(--rev-text-lh);
}

a.rpi-name {
    color: var(--name-color)!important;
}

.rpi-time {
    color: var(--time-color);
    font-size: var(--rev-time-fs);
    white-space: nowrap;
    line-height: var(--rev-text-lh);
}
.rpi-time + .rpi-stars {
    margin-top: 2px
}

.rpi-text .rpi-stars {
    display: inline-flex;
    vertical-align: middle;
}

.rpi-body {
    position: relative;
    display: flex;
    gap: var(--body-gap);
    flex-direction: column;
}

.rpi-text {
    --text-height: var(--text-height-auto, calc(var(--text-lines) * var(--text-line-height)));
    display: -webkit-box;
    font-size: var(--text-fs);
    text-align: var(--text-align, left);
    line-height: var(--text-line-height);
    max-height: var(--text-height);
    overflow: auto;
    overflow-x: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: inherit;
}

[dir="rtl"] .rpi-text {
    display: block;
}

.rpi-media {
    display: block;
    max-height: var(--media-height);
    overflow: hidden;
    text-align: var(--rev-txtalgn, left);
}

.rpi-thumb {
    position: relative;
    display: inline-block;
    width: var(--media-height);
    height: var(--media-height);
    margin-right: 4px;
    overflow: hidden;
    border-radius: 4px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.rpi-reply {
    display: block;
    color: var(--time-color);
    font-size: 14px;
    line-height: var(--text-line-height);
    max-height: var(--reply-height);
    margin: 0 0 0 var(--reply-margin);
    padding: 0 0 0 var(--reply-padding);
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid #999;
    /*max-height: 4.05em;*/
    text-align: var(--rev-txtalgn, left);
}

.rpi-content .rpi-url {
    display: inline-block;
    padding: 8px!important;
    color: var(--morev-color, #333333)!important;
}

/*-------------------------------- Review body/media/reply same heights --------------------------------*/
.rpi-sh .rpi-text {
    height: var(--text-height);
}

.rpi-sh .rpi-body:has(.rpi-media) .rpi-text {
    --text-media-height: calc(var(--text-height) - var(--media-height));
    height: var(--text-media-height);
}
.rpi-sh .rpi-body:has(.rpi-reply) .rpi-text {
    height: calc(var(--text-media-height, var(--text-height)) - var(--reply-height));
}

.rpi-sh .rpi-text:not(:empty):last-child {
    margin-bottom: var(--body-gap);
}

.rpi-sh .rpi-reply {
    height: var(--reply-height);
}

/*-------------------------------- List & Grid --------------------------------*/
.rpi-list,
.rpi-grid {
    align-items: start;
    -ms-flex-align: start;
}

.rpi-list,
.rpi-grid,
.rpi-list .rpi-cards,
.rpi-grid .rpi-cards {
    gap: var(--card-gap);
}

.rpi-list .rpi-body:empty {
    margin-top: 0;
    margin-bottom: 0;
}

/*-------------------------------- Slider --------------------------------*/
.rpi-slider {
    gap: var(--slider-card-gap);
}

.rpi-slider .rpi-content {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.rpi-slider .rpi-cards {
    gap: var(--slider-card-gap);
}

.rpi-slider .rpi-header_top.rpi-header_pad,
.rpi-slider.rpi-col-xs .rpi-header.rpi-header_pad {
    padding: 0 var(--slider-btn)!important;
}

.rpi-slider .rpi-content .rpi-cards {
    position: relative;
    display: flex;
    flex: 1;
    width: 100%;
    overflow-x: scroll;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    /*scroll-behavior: smooth;*/
    -webkit-overflow-scrolling: touch;
}

.rpi-slider .rpi-content .rpi-cards::-webkit-scrollbar {
    display: none;
}

.rpi-slider .rpi-card {
    scroll-snap-align: start;
}

.rpi-slider .rpi-card-inner {
    margin: var(--slider-card-margin);
}

.rpi-slider-btn {
    gap: 0.5em;
    -ms-flex: 1 0 var(--btn-flex-size, 40%);
    flex: 1 0 var(--btn-flex-size, 40%);
    justify-content: var(--btn-justify-content, end);
}

@container header (width < 480px) {
    .rpi-slider-btn {
        --btn-flex-size: 100%;
        --btn-justify-content: center;
    }
}

/*-------------------------------- Slider controls --------------------------------*/
.rpi-slider-prev::before,
.rpi-slider-next::after {
    position: relative!important;
    content: '';
    display: block;
}

.rpi-slider-prev::before,
.rpi-slider-next::after {
    position: absolute;
    opacity: .7;
    text-align: center;
    width: var(--slider-btn);
    height: var(--slider-btn);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-color: var(--slider-btn-color, #777777);
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    transition: all .2s ease-in-out;
}

.rpi-slider-prev::before {
    -webkit-mask: url('../img/icons.svg#rpi-prev');
    mask: url('../img/icons.svg#rpi-prev');
}

.rpi-slider-next::after {
    -webkit-mask: url('../img/icons.svg#rpi-next');
    mask: url('../img/icons.svg#rpi-next');
}

.rpi-slider-prev:hover::before,
.rpi-slider-next:hover::after {
    opacity: 1;
}

[dir="rtl"] .rpi-slider-next::after,
[dir="rtl"] .rpi-slider-prev::before {
    transform: rotate(180deg);
}

/*-------------------------------- Slider dots --------------------------------*/
.rpi-dots-wrap {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    margin: 0 calc(var(--slider-btn) + var(--slider-dot-margin-edges, 2em));
    padding-top: var(--slider-dot-padding-top, 1em);
}

.rpi-dots {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 10px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /*scroll-behavior: smooth;*/
    -webkit-overflow-scrolling: touch;
}

.rpi-dot {
    display: inline-block;
    width: var(--slider-dot-size);
    height: var(--slider-dot-size);
    margin: 0;
    padding: 0;
    background-color: var(--slider-dot-color, #999999);
    border-radius: 20px;
    cursor: pointer;
    opacity: .4;
    vertical-align: middle;
    flex: 1 0 auto;
    transform: scale(.6);
    scroll-snap-align: center;
}
.rpi-dot:hover {
    opacity: 1;
}
.rpi-dot.active {
    opacity: 1;
    transform: scale(1);
    background-color: var(--slider-act-dot-color, #154fc1);
}
.rpi-dot.s2 {
    transform: scale(.9);
}
.rpi-dot.s3 {
    transform: scale(.8);
}

/*-------------------------------- Review us button --------------------------------*/
.rpi-review_us {
    display: inline-block;
    color: var(--head-btn-txt-color, #ffffff);
    font-size: var(--head-btn-fs);
    outline: none ;
    line-height: 16px;
    border-radius: 27px;
    background-color: var(--head-btn-color, #0a6cff);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    vertical-align: middle;
}

.rpi-review_us:last-child {
    margin-right: 0;
}

.rpi-review_us:hover {
    color: #fff;
    background: #1f67e7;
}

.rpi-review_us:active {
    color: #fff;
    background: #0a6cff;
}

.rpi-review_us a,
.rpi-review_us[onclick] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px!important;
}

/*-------------------------------- Tag theme --------------------------------*/
.rpi-tag {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 16px;
    font-size: var(--tag-fs);
    max-width: none;
    z-index: 2147482999;
}

.rpi-tag.right {
    left: auto;
    right: 16px;
}

.rpi-tag.embed {
    display: inline-block;
    position: relative;
    padding: 0;
    z-index: auto;
}

.rpi-tag-cnt {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: var(--tag-gap, 4px);
    outline-width: 0;
    overflow: visible;
    padding: 8px 12px;
    cursor: pointer;
    color: #333;
    font-weight: 400;
    line-height: 18px;
    border: none;
    border-radius: 32px;
    background-color: var(--tag-bg);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 23%);
    user-select: none;
    transition: all .2s ease-in-out;
}

.rpi-tag.push .rpi-tag-cnt:hover {
    transform: translate(0px, -2px)!important;
}

.rpi-tag .rpi-logo::before {
    width: var(--tag-logo-size, 14px);
    height: var(--tag-logo-size, 14px);
}

.rpi-tag .rpi-stars {
    white-space: nowrap;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

/*.rpi-tag .rpi-star {
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 6px;
}*/

.rpi-tag.expand .rpi-stars {
    width: 0;
}
.rpi-tag.expand:hover .rpi-stars {
    width: 115px;
}

/*.rpi-tag .rpi-tag-review .rpi-stars[data-reviewus] {
    display: none;
}
.rpi-tag .rpi-tag-review .rpi-tag-stars:hover .rpi-stars {
    display: none;
}
.rpi-tag .rpi-tag-review .rpi-tag-stars:hover .rpi-stars[data-reviewus] {
    display: block;
}
.rpi-tag .rpi-tag-review .rpi-stars[data-reviewus] svg:hover ~ svg use {
    fill: #ccc;
}*/

.rpi-tag-grade {
    color: var(--star-color);
    font-size: var(--tag-star-size);
    font-weight: 700;
}

.rpi-tag-text {
    color: var(--tag-text-color);
    font-size: var(--tag-star-size);
    margin: 0 0 0 12px;
    line-height: 1.7em;
    white-space: nowrap;
}

.rpi-tag .rpi-sb {
    --sb-left: auto;
    --sb-right: 0;
}

/*-------------------------------- Tag sidebar --------------------------------*/
.rpi-sb {
    --sbh-height: 0px;
    --sbf-height: 0px;
    position: fixed;
    display: none;
    width: 0;
    height: calc(100% - var(--sb-top-offset, 60px));
    left: var(--sb-left, 20px);
    right: var(--sb-right, 20px);
    bottom: var(--sb-bottom, 20px);
    overflow: hidden;
    z-index: 2147483000;
    opacity: 0;
    border-radius: var(--sb-border-radius, 8px);
    box-shadow: rgb(189, 189, 189) 0px 2px 10px 0px;
    transition: width .3s ease-in-out, opacity .3s ease-in-out;
}

.rpi-sb.rpi-left {
    left: 0;
}

@media(max-width: 460px) {
    .rpi-sb,.rpi-sbhi,.rpi-sbci {
        width:100%!important;
    }
}

.rpi-sb .rpi {
    min-width: 330px;
}

.rpi-sb[data-layout="list"] .rpi {
    --card-gap: 0;
    --card-bg: none;
    --text-lines: auto;
    --head-card-bg: none;
}

.rpi-sbb {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(250,250,251,.98);
    border-left: 1px solid #dadee2;
    box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
    z-index: 2147483000
}

.rpi-sbc {
    position: absolute;
    top: calc(0px + var(--sbh-height, 0px));
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - var(--sbh-height, 0) - var(--sbf-height, 0));
    overflow: hidden;
    overflow-y: auto;
    z-index: 2147483001;
    -webkit-transform: translateZ(0);
}

.rpi-sbhi,.rpi-sbci {
    position: relative;
    margin: 0;
    padding: 0;
    width: 358px;
    min-height: 100%;
}

.rpi-sbh, .rpi-sbf {
    position: absolute;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 2147483002;
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .12);
    box-sizing: border-box;
}

.rpi-sbh {
    top: 0;
    height: var(--sbh-height, 0);
}

.rpi-sbf {
    display: flex;
    align-items: center;
    justify-content: space-around;
    bottom: 0;
    height: var(--sbf-height, 0);
}

.rpi-sbf label {
    cursor: pointer;
}