.bookmakerOverviewWrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bookmakerOverview {
    position: relative;
    display: flex;
    background-color: #fff;
    border: thin solid #E6E6E6;
    border-radius: 10px;
    overflow: hidden;
}

.bookmakerOverviewOrdering {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1rem
}

.btn.--gray {
    background-color: #e9e9e9;
    border-color: #e9e9e9;
    color: #000
}

.ordering .ordering__input:checked + .btn {
    background-image: linear-gradient(to bottom, #ffe354, #f6d113 100%);
}

.ordering {
    display: flex;
    gap: .35rem;
    overflow: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

.ordering .btn {
    margin-bottom: 0;
    white-space: nowrap;
}

.bookmakerOverviewOrdering .bookmakerOverviewOrdering__label {
    white-space: nowrap;
}

.bookmakerOverview.--recommended {
    border-width: medium;
    border-color: #000;
    border-color: var(--brand-color, #000);
    overflow: unset;
}

.bookmakerOverview.--recommended .bookmakerOverview__rank {
    background-color: #000;
    background-color: var(--brand-color, #000);
    color: #fff;
    color: var(--brand-text-color, #fff);
    border-top-right-radius: 5px;
}


.bookmakerOverview.--compact .bookmakerOverview__actions .bookmakerOverview__actionsInner {
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem
}

.bookmakerOverview.--compact .bookmakerOverview__branding {
    gap: .25rem
}

.bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button {
    padding: 1rem;
    box-shadow: none;
    box-shadow: initial
}

.bookmakerOverview.--compact .bookmakerOverview__offer {
    flex: 1 1 70%;
    max-width: 70%;
    padding: 1rem;
}

.bookmakerOverview.--compact .bookmakerCard__buttons {
    flex: 1 1 30%;
    max-width: 30%;
    margin-top: 0
}

.bookmakerOverview .bookmakerOverview__logo {
    width: 100px;
    height: 40px;
    -o-object-fit: contain;
    object-fit: contain
}

.bookmakerOverview .bookmakerOverview__recommendedBy {
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5rem 1rem;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    white-space: nowrap;
    background-color: #000;
    background-color: var(--brand-color, #000);
    color: #fff;
    color: var(--brand-text-color, #fff);
    border-radius: 5px
}

.bookmakerOverview ul {
    list-style-type: none;
    padding-left: 0 !important
}

.bookmakerOverview ul li:before {
    content: normal !important;
    content: initial !important
}

.bookmakerOverview .bookmakerOverview__branding {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    flex: 0 0 20%
}

.bookmakerOverview .bookmakerOverview__details {
    background-color: #ececec;
    flex: 0 0 30%
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__detailsListIcon {
    width: 2rem
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__detailsList .bookmakerOverview__detailsListItem {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__detailsList .bookmakerOverview__detailsListItem .bookmakerOverview__detailsListItemInner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 2rem;
    font-size: 1rem;
    margin-bottom: 0 !important;
    min-height: 50px
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__detailsList .bookmakerOverview__detailsListItem .bookmakerOverview__detailsListItemInner:has(.bookmakerOverview__additionalInfoState) {
    padding: 1.25rem 5rem 1.25rem 2rem
}

@media (min-width: 1140px) {
    .bookmakerOverview .bookmakerOverview__details .bookmakerOverview__detailsList .bookmakerOverview__detailsListItem:not(:first-child):not(:last-child) {
        border-top: thin solid rgba(0, 0, 0, .05)
    }
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__toggleAdditionalInfo {
    margin-bottom: 0;
    position: absolute;
    right: 2rem;
    transform: rotate(90deg);
    cursor: pointer
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__additionalInfo {
    padding: 1rem 2rem;
    display: none;
    font-size: 1.4rem
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__additionalInfoState:checked ~ .bookmakerOverview__additionalInfo {
    display: block
}

.bookmakerOverview .bookmakerOverview__details .bookmakerOverview__additionalInfoState:checked ~ .bookmakerOverview__detailsListItemInner .bookmakerOverview__toggleAdditionalInfo {
    transform: rotate(-90deg)
}

.bookmakerOverview .bookmakerOverview__offer {
    width: 100%;
    padding: 1.5rem 2rem;
    font-weight: 700;
    font-size: 1rem
}

.bookmakerOverview .bookmakerCard__buttons {
    margin-top: .5rem;
    display: flex;
    width: 100%;
    gap: 1rem
}

.bookmakerOverview .bookmakerCard__buttons .bookmakerCard__buttons__button {
    display: inline-flex;
    flex: 1 1 50%;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 4px #0000001a
}

.bookmakerOverview .bookmakerCard__buttons .bookmakerCard__buttons__button.--register {
    background-color: #000;
    background-color: var(--brand-color, #000);
    border-color: #000;
    border-color: var(--brand-color, #000);
    color: #fff;
    color: var(--brand-text-color, #fff)
}

.bookmakerOverview .bookmakerCard__buttons .bookmakerCard__buttons__button.--register:hover {
    background-color: #000;
    border-color: #000;
    color: #fff
}

.bookmakerOverview .bookmakerOverview__separator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    border-top: thin solid rgba(0, 0, 0, .05)
}

.bookmakerOverview .bookmakerOverview__actions {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: flex-start;
    flex: 3 1 50%
}

.bookmakerOverview .bookmakerOverview__actions .bookmakerOverview__actionsInner {
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 500px;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem
}

.bookmakerOverview .bookmakerCard__checkedDate {
    display: block;
    width: 50%;
    text-align: center;
    margin-top: .5rem
}

.bookmakerOverview .bookmakerOverview__rank {
    position: absolute;
    top: 0;
    right: 0;
    padding: .25rem .5rem;
    background-color: #e6e6e6;
    color: #000;
    border-bottom-left-radius: 10px;
    font-weight: 700;
    font-size: .8rem;
}

.bookmakerOverview.--compact .bookmakerOverview__reviewLink,
.bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button.--detail {
    text-decoration: underline;
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 400;
    color: initial;
}

.bookmakerOverview.--compact .bookmakerOverview__reviewLink:hover,
.bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button.--detail:hover {
    text-decoration: none
}


@media (max-width: 1140px) {
    .bookmakerOverview {
        flex-wrap: wrap
    }

    .bookmakerOverview .bookmakerOverview__actions {
        order: 1;
        flex: 1 1 80%;
        width: 80%;
        max-width: 80%
    }

    .bookmakerOverview .bookmakerOverview__branding {
        flex: 1 1 20%;
        width: 20%;
        max-width: 20%;
        padding-top: 2rem
    }

    .bookmakerOverview .bookmakerOverview__details {
        order: 2;
        flex: 1 1 100%;
        width: 100%
    }

    .bookmakerOverview .bookmakerOverview__detailsList {
        display: grid;
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 992px) {
    .bookmakerOverview .bookmakerOverview__actions, .bookmakerOverview .bookmakerOverview__branding, .bookmakerOverview .bookmakerOverview__details {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%
    }

    .bookmakerOverview.--compact {
        padding-bottom: 4rem
    }

    .bookmakerOverview.--compact .bookmakerCard__buttons {
        flex: 0 0 0;
        width: 0;
        max-width: 0
    }

    .bookmakerOverview.--compact .bookmakerOverview__branding {
        position: static;
        flex: 1 1 25%;
        width: 25%;
        max-width: 25%;
        padding-top: 1.5rem;
        padding-bottom: .25rem;
    }

    .bookmakerOverview.--compact .bookmakerOverview__actions {
        flex: 1 1 75%;
        width: 75%;
        max-width: 75%;
        padding-top: 1.5rem
    }

    .bookmakerOverview.--compact .bookmakerOverview__actions .bookmakerOverview__actionsInner {
        gap: 0
    }

    .bookmakerOverview.--compact .bookmakerOverview__offer {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        padding: .25rem 1rem
    }

    .bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button.--register, .bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button.--detail {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50%;
        border-radius: 0 0 0 10px;
        box-shadow: none;
        box-shadow: initial
    }

    .bookmakerOverview.--compact .bookmakerCard__buttons .bookmakerCard__buttons__button.--register {
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0 0 10px 10px;

    }

    .bookmakerOverview.--recommended {
        margin-top: 1rem
    }

    .bookmakerOverview.--recommended .bookmakerCard__buttons .bookmakerCard__buttons__button.--register {
        border-radius: 0 0 7px 7px;
    }

    .bookmakerOverview .bookmakerOverview__actions {
        align-items: center
    }
}

@media (max-width: 768px) {
    .bookmakerOverview .bookmakerOverview__detailsList {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 568px) {
    .bookmakerOverview .bookmakerOverview__detailsList {
        grid-template-columns:1fr
    }

    .bookmakerOverview .bookmakerCard__buttons {
        flex-wrap: wrap
    }

    .bookmakerOverview .bookmakerCard__checkedDate {
        width: 100%;
        padding-top: .5rem
    }

    .bookmakerOverview .bookmakerOverview__actions .bookmakerOverview__actionsInner {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .bookmakerOverview.--compact .bookmakerOverview__branding, .bookmakerOverview.--compact .bookmakerOverview__actions, .bookmakerOverview.--compact .bookmakerOverview__offer {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%
    }
    .bookmakerOverview.--compact .bookmakerOverview__offer {
        text-align: center;
    }

    .bookmakerOverview.--compact .bookmakerOverview__branding {
        padding-bottom: 1rem
    }

    .bookmakerOverview.--compact .bookmakerOverview__actions {
        padding-top: 0
    }
}