.campaign-compare-view-shortcode .campaign-compare-view-wrapper {
    display: block !important;
}

.campaign-shortcode__compare-view {
    font-family: var(--bm-font-family);
    position: relative;
    display: flex;
    padding-top: 15px;
    background: white;
}

.campaign-shortcode__compare-view.active-y-scroll {
    z-index: 988;
}

.campaign-shortcode__compare-view__body-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.campaign-shortcode__compare-view__body {
    display: flex;
    flex: 1;
}

.campaign-shortcode__compare-view__row {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 50px;
    max-width: 100px;
}

.campaign-shortcode__compare-view__left-bar {
    line-height: 1;
    width: 190px;
    min-width: 190px;
}

.campaign-shortcode__compare-view__row-names {
    max-width: 190px;
}

.campaign-shortcode__compare-view__row-names .campaign-shortcode__compare-view__row__cell {
    border-right: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__section-name {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    margin-top: -32px;
    padding: 0 8px 0 40px;
    cursor: pointer;
    color: #0C5BF3;
    border-left: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__section-name::before {
    position: absolute;
    top: 6px;
    left: 12px;
    display: block;
    content: url("../images/section-arrow.svg");
    color: #0C5BF3;
}

.campaign-shortcode__compare-view__section.collapsed:first-child,
.campaign-shortcode__compare-view__section-first-visible {
    border-top: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__section.collapsed .campaign-shortcode__compare-view__section-name::before {
    top: 9px;
    transform: rotate(-180deg);
}

.campaign-shortcode__compare-view__section.hidden {
    display: none;
}

.campaign-shortcode__compare-view__notes {
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 46px;
    margin-top: 92px;
    gap: 10px;
}

.campaign-shortcode__compare-view__notes > div {
    display: flex;
    align-items: center;
    color: #404463;
}

.campaign-shortcode__compare-view__notes > div::before {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    content: "";
    border-radius: 50%;
}

.campaign-shortcode__compare-view__notes__winner::before {
    background-color: #E7EFFE;
}

.campaign-shortcode__compare-view__notes__loser::before {
    background-color: #FAEBE7;
}

.campaign-shortcode__compare-view__section {
    overflow-y: hidden;
    width: 100%;
    padding-top: 32px;
    transition: max-height 0.3s ease-in-out;
    border-bottom: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__section.collapsed {
    max-height: 0 !important;
}

.campaign-shortcode__compare-view__section-last-visible:last-child:not(.collapsed) {
    border-bottom: 0;
}

.campaign-shortcode__compare-view__row-data:last-child .campaign-shortcode__compare-view__section {
    border-right: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__row-data:last-child .campaign-shortcode__compare-view__section .campaign-shortcode__compare-view__row__cell {
    border-right: 0;
}

.campaign-shortcode__compare-view__row__logo-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 102px;
    margin: 1px 1px 0 1px;
    border-radius: 4px;
    background-color: #ffffff;
}

.campaign-shortcode__compare-view__row__logo-image {
    position: relative;
    height: auto;
    transform: rotate(-90deg);
}

.campaign-shortcode__compare-view__row__logo-image img {
    position: absolute;
    top: -24px;
    left: -50px;
    width: 100px;
    max-width: 100px;
    border-radius: 5px;
}

.campaign-shortcode__compare-view__row__bonus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2px);
    height: 32px;
    margin: 2px 1px 1px 1px;
    color: #FFFFFF;
    border-radius: 4px;
    background-color: #F24277;
}

.campaign-shortcode__compare-view__row__bonus:hover {
    text-decoration: none;
    color: #FFFFFF;
}

.campaign-shortcode__compare-view__row__cell {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 32px;
    padding: 10px;
    text-wrap: nowrap;
    color: #747D94;
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: #E4E4EE;
}

.campaign-shortcode__compare-view__row__cell.positive::before {
    content: url("../images/tick-blue.svg");
}

.campaign-shortcode__compare-view__row__cell.negative::before {
    content: url("../images/cross-purple.svg");
}

.campaign-shortcode__compare-view__row__cell.loser {
    color: #404463;
    border-top-color: #FFD6E1;
    border-left-width: 1px;
    border-left-color: #FFD6E1;
    background-color: #FAEBE7;
}

.campaign-shortcode__compare-view__row__cell.winner {
    color: #404463;
    border-top-color: #CCDDFF;
    border-left-width: 1px;
    border-left-color: #CCDDFF;
    background-color: #E7EFFE;
}

.campaign-shortcode__compare-view__row-names .campaign-shortcode__compare-view__row__cell {
    font-weight: 400;
    justify-content: start;
    max-width: 200px;
    color: #404463;
    border-left-width: 1px;
}

.campaign-shortcode__compare-view__row-names > .campaign-shortcode__compare-view__row__cell:first-child {
    border-radius: 8px 0 0 0;
}

.campaign-shortcode__compare-view__section:last-child .campaign-shortcode__compare-view__row__cell:last-child {
    border-bottom: 1px solid #E4E4EE;
}

.campaign-shortcode__compare-view__row-names .campaign-shortcode__compare-view__section:last-child .campaign-shortcode__compare-view__row__cell:last-child {
    border-radius: 0 0 0 8px;
}

.campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view__row__logo-link {
    position: fixed;
    z-index: 1001;
    top: 10px;
}

.scroll-logo-bgc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;
    background-color: white;
}

.campaign-shortcode__compare-view.active-y-scroll .scroll-logo-bgc {
    z-index: 1001;
}

.campaign-shortcode__compare-view__body-wrapper .scroll-logo-bgc {
    top: -10px;
}

.campaign-shortcode__compare-view.active-y-scroll .scroll-logo-bgc {
    position: fixed;
    z-index: 999;
    display: block;
    pointer-events: none;
}

.campaign-shortcode__compare-view:not(.active-y-scroll) .campaign-shortcode__compare-view__row__logo-link {
    left: 0 !important;
}

.campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view__row-data {
    margin-top: 101px;
}

.campaign-shortcode__compare-view__row__logo-number {
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    z-index: 9;
    top: -9px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transform: translateX(-50%);
    color: #ffffff;
    border-radius: 6px 0 6px 0;
    background-color: #0C5BF3;
}

.campaign-compare-view-wrapper.active-y-scroll .campaign-shortcode__compare-view__row__logo-number {
    z-index: 1000;
}

.campaign-full-width-shortcode-wrapper .campaign_sport_filters__compare-toggle-wrapper {
    display: none;
}

.campaign-shortcode-table .campaign_sport_filters__quick_block_dropdown {
    z-index: 1003;
}

@media screen and (min-width: 992px) {
    .right-fade::after {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 50px;
        height: 100%;
        content: '';
        background-image: linear-gradient(to left, #fff 16%, hsla(0, 0%, 100%, 0) 100%);
    }

    .campaign-compare-view-wrapper.active-y-scroll.right-fade::after {
        z-index: 988;
    }

    .scroll-logo-bgc {
        width: calc(100% + 50px);
        margin-left: -25px;
    }

    .campaign-compare-view-wrapper {
        position: relative;
        max-width: 1200px;
        margin: auto;
    }

    .campaign-shortcode__compare-view {
        width: calc(100% + 50px);
        margin-top: 10px;
        margin-left: -25px;
        padding: 15px 25px;
        clip-path: inset(0 0 0 0);
    }

    .campaign-compare-view-wrapper .campaign-shortcode__compare-view {
        position: relative;
        display: flex;
        max-width: inherit;
        background-color: white;
    }

    .campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view {
        z-index: 988;
    }

    .campaign-shortcode__compare-view__row {
        background-color: white;
    }

    .campaign-shortcode__compare-view__body-wrapper {
        width: 1010px;
    }

    .campaign-compare-view-wrapper .campaign-shortcode__compare-view__body-wrapper {
        overflow: hidden;
        max-width: 100%;
        margin-top: -20px;
        padding-right: 1px;
        clip-path: inset(0 0 0 0);
    }

    .campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view__body-wrapper {
        z-index: 1001;
    }

    .campaign-compare-view-wrapper .campaign-shortcode__compare-view__body {
        position: relative;
        overflow-x: scroll;
        max-width: 100%;
        padding-top: 20px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .campaign-compare-view-wrapper .campaign-shortcode__compare-view__body::-webkit-scrollbar {
        display: none;
    }

    .campaign-compare-view-wrapper__prev-btn, .campaign-compare-view-wrapper__next-btn {
        position: absolute;
        z-index: 2;
        top: 53px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        cursor: pointer;
        border: 10px solid #E1E7EF;
        border-radius: 56px;
        background-color: #fff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .campaign-compare-view-wrapper.active-y-scroll .campaign-compare-view-wrapper__prev-btn,
    .campaign-compare-view-wrapper.active-y-scroll .campaign-compare-view-wrapper__next-btn {
        z-index: 989;
    }

    .campaign-compare-view-wrapper.active-y-scroll .campaign-compare-view-wrapper__prev-btn {
        position: fixed;
        top: 33px;
        left: 190px;
    }

    .campaign-compare-view-wrapper.active-y-scroll .campaign-compare-view-wrapper__next-btn {
        position: fixed;
        top: 33px;
        right: 0;
    }

    .campaign-compare-view-wrapper__prev-btn:hover,
    .campaign-compare-view-wrapper__next-btn:hover {
        border-color: #fff;
    }

    .campaign-compare-view-wrapper__prev-btn {
        left: 160px;
    }

    .campaign-compare-view-wrapper__next-btn {
        right: -30px;
    }

    .campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view__notes {
        margin-top: 90px;
    }
}

@media screen and (max-width: 991px) {
    .scroll-logo-bgc {
        height: 122px;
    }

    .campaign-shortcode__compare-view {
        display: block;
    }

    .campaign-shortcode__compare-view__body {
        position: relative;
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: calc(100vw - 30px);
        padding-top: 9px;
    }

    .campaign-shortcode__compare-view__left-bar {
        position: relative;
        width: 100%;
        min-width: auto;
    }

    .campaign-shortcode__compare-view__section {
        margin-top: 35px;
        padding-top: 0;
        padding-bottom: 35px;
    }

    .campaign-shortcode__compare-view__section ~ .campaign-shortcode__compare-view__section {
        margin-top: 0;
    }

    .campaign-shortcode__compare-view__section-first-visible {
        margin-top: 35px !important;
    }

    .campaign-shortcode__compare-view__section.collapsed {
        max-height: 35px !important;
    }

    .campaign-shortcode__compare-view__row-data {
        max-width: 50px;
    }

    .campaign-shortcode__compare-view__row__cell {
        margin-top: 35px;
        border-right: 0;
        border-bottom: 1px solid #E4E4EE;
        border-left: 1px solid #E4E4EE;
    }

    .campaign-shortcode__compare-view__row-data:last-child .campaign-shortcode__compare-view__row__cell {
        border-right: 1px solid #E4E4EE;
    }

    .campaign-shortcode__compare-view__notes {
        position: absolute;
        top: 137px;
        right: 10px;
        margin-top: 0;
    }

    .campaign-shortcode__compare-view__row-names {
        position: absolute;
        z-index: 999;
        margin-top: 117px;
        pointer-events: none;
    }

    .campaign-shortcode__compare-view__row-names .campaign-shortcode__compare-view__row__cell {
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        position: relative;
        padding-left: 0;
        border: 0;
    }

    .campaign-shortcode__compare-view__section-name {
        position: relative;
        margin: 0 0 -32px 0;
        pointer-events: all;
        border: 0;
    }

    .campaign-shortcode__compare-view__section,
    .campaign-shortcode__compare-view__section.collapsed,
    .campaign-shortcode__compare-view__row-names .campaign-shortcode__compare-view__section:last-child .campaign-shortcode__compare-view__row__cell:last-child {
        border: 0;
    }

    .campaign-shortcode__compare-view__row-data:last-child .campaign-shortcode__compare-view__section {
        border-right: 0;
    }

    .campaign-shortcode__compare-view__row-data:last-child .campaign-shortcode__compare-view__section .campaign-shortcode__compare-view__row__cell {
        border-right: 1px solid #E4E4EE;
    }

    .campaign-compare-view-wrapper .campaign-shortcode__compare-view {
        display: block !important;
    }

    .campaign-compare-view-wrapper__prev-btn, .campaign-compare-view-wrapper__next-btn {
        display: none !important;
    }

    .campaign-shortcode__compare-view.active-y-scroll .campaign-shortcode__compare-view__row__logo-link {
        pointer-events: none;
    }
}
