:root {
    --rpi-lt: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    --rpi-gt: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}

.rpi .rpi-slides-root {
    --slider-btn: var(--rpi-slider-btn, 1.125em);
    --slider-padding: var(--rpi-slider-btn-padding, .5em);
    --slider-ltgt-border-color: var(--root-bg, #f3f3f3);
    --ltgt-border-width: var(--slider-ltgt-border-width, 0px);
    padding: 0 calc(var(--rpi-slider-btn-padding) / 2 + var(--rpi-slider-btn) / 2 + var(--ltgt-border-width) * 2);
}

.rpi .rpi-slides {
    --gap: var(--rpi-slider-gap, 12px);
    --card-gap: var(--gap);
    display: flex!important;
    flex: 1 !important;
    gap: var(--gap)!important;
    flex-wrap: nowrap!important;
    overflow: hidden !important;
    overflow-x: auto!important;
    scroll-snap-type: x mandatory!important;
    scroll-behavior: var(--rpi-slider-behavior, smooth)!important;
    -webkit-overflow-scrolling: touch!important;
    scrollbar-width: none!important;
}

.rpi .rpi-slides::-webkit-scrollbar {
    display: none!important;
}

.rpi .rpi-slide {
    overflow: hidden !important;
    padding: var(--rpi-card-slider-padding, 4px 3px)!important;
    scroll-snap-align: start !important;
    transition: transform 0.5s!important;
}

/*-------------------------------- Slider controls --------------------------------*/
.rpi .rpi-ltgt {
    --ltgt-pos: calc(-1 * (2 * var(--ltgt-border-width) + (var(--slider-padding) + var(--slider-btn)) / 2) - var(--offset, 0px));
    position: var(--slider-ltgt-position, absolute)!important;
    padding: var(--slider-padding)!important;
    z-index: 1!important;
    border: 0 solid #e5e7eb!important;
    border-radius: 9999px!important;
    border: var(--ltgt-border-width) solid var(--slider-ltgt-border-color)!important;
    background-color: var(--slider-ltgt-bg, rgb(255 255 255 / 1))!important;
    box-shadow: var(--slider-ltgt-shadow)!important;
    transition: background-color .2s ease-in-out!important;
}

.rpi .rpi-ltgt:hover {
    background-color: var(--slider-ltgt-bg, rgb(249 250 251 / 1))!important;
}

.rpi .rpi-ltgt.rpi-lt {
    left: 0!important;
    margin-left: var(--ltgt-pos)!important;
}

.rpi .rpi-ltgt.rpi-gt {
    right: 0!important;
    margin-right: var(--ltgt-pos)!important;
}

.rpi-lt::before,
.rpi-gt::after {
    position: relative!important;
    content: '';
    display: block;
    width: var(--slider-btn);
    height: var(--slider-btn);
    background-color: var(--slider-btn-color, #777777);
}

.rpi-lt::before {
    -webkit-mask: var(--rpi-lt);
    mask: var(--rpi-lt);
}

.rpi-gt::after {
    -webkit-mask: var(--rpi-gt);
    mask: var(--rpi-gt);
}

[dir=rtl] .rpi-lt::before,
[dir=rtl] .rpi-gt::after {
    transform: rotate(180deg);
}

/*-------------------------------- Slider dots --------------------------------*/
.rpi .rpi-dots-wrap {
    position: absolute!important;
    top: calc(100% - 1px)!important;
    left: 0!important;
    right: 0!important;
    display: flex!important;
    justify-content: center!important;
    margin: 0 auto!important;
    padding-top: var(--slider-dot-padding-top, .5em)!important;
    max-width: 100%!important;
    width: calc(var(--slider-dots-visible) * var(--slider-dot-size) + (var(--slider-dots-visible) - 1) * var(--slider-dot-gap))!important;
}

.rpi .rpi-dots {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll!important;
    gap: var(--slider-dot-gap);
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /*scroll-behavior: smooth;*/
    -webkit-overflow-scrolling: touch;
}

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