:root {
    --left-color: #248ace;
    --right-color: #ffffff;
    --left-color-stop: 20%;
    --item-border-thickness: 3px;
    --item-border-color: #0d67bf;
    --item-border-radius: 40px;
    --item-height: 2.85em;
    --icon-percent-width: 50%;
}

.XXXXX__slider {
    position: relative;
}

.XXXXX .slick-slider {
    user-select: text;
}

.XXXXX .slick-list {
    margin: 0 auto;
}

.XXXXX .slick-track {
    display: flex !important;
}

.XXXXX .slick-slide {
    margin: 0 15px;
    padding: 0 15px;
    height: inherit !important;
}

.XXXXX__list-item {
    background: linear-gradient(
        to right,
        var(--left-color) 0%,
        var(--left-color) var(--left-color-stop),
        var(--right-color) var(--left-color-stop),
        var(--right-color) 100%
    );
    border: var(--item-border-thickness) solid var(--item-border-color);
    border-radius: var(--item-border-radius);
    height: var(--item-height);
    margin-bottom: 1em;
    overflow: hidden;
}

.XXXXX__list-item,
.XXXXX__label,
.XXXXX__svg-container {
    display: flex;
    text-decoration: none;
}

.XXXXX__label,
.XXXXX__svg-container {
    align-items: center;
    justify-content: center;
    height: 100%;
}

.XXXXX__list-icon {
    width: var(--left-color-stop);
    display: flex;
    align-items: center;
    justify-content: center;
}

.XXXXX__svg-container {
    width: var(--icon-percent-width);
    color: #ffffff;
}

.XXXXX__svg-container svg {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
}

.XXXXX__label {
    flex-grow: 1;
    font-size: 16px;
    color: #010;
    text-decoration: none;
}

.XXXXX__column {
    margin: 0 auto;
    max-width: 400px;
}

.XXXXX .slick-dots {
    top: calc(100% + 50px);
}

.XXXXX .slick-dots li {
    background-color: #000000;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.25;
    width: 25px;
    height: 25px;
}

.XXXXX .slick-dots li.slick-active button:before,
.XXXXX .slick-dots li button:before {
    color: transparent;
}

.XXXXX .slick-dots li:hover,
.XXXXX .slick-dots li:focus {
    opacity: 0.5;
}

.XXXXX .slick-dots li.slick-active {
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    /* dot issue fix */
    .XXXXX .slick-dots li:hover,
    .XXXXX .slick-dots li:focus {
        opacity: 0.5;
    }
}

@media only screen and (min-width: 992px) {
    .XXXXX .slick-track {
        justify-content: center;
        max-width: 1140px;
        margin: 0 auto;
    }
}