/**
 * Selection Bonuses
 */
.selection--content {
    display: none;
    background: #3B3854;
    padding: 24px;
    gap: 24px;
    border-radius: 0 0 16px 16px;
    flex-direction: column;
}

.selection-bonuses-wrapper .h2{
    margin-bottom: var(--gap);
}

.selection--content.active {
    display: flex;
}

.selection--content.results{
    border-radius: 16px;
}

.selection-bonuses {
    display: flex;
    flex-direction: column;
}

.selection-bonuses--header {
    display: flex;
    gap: 10px;
}

.selection-bonuses--header button {
    flex: 1;
    height: 52px;
    padding: 12px 8px 8px 8px;
    gap: 8px;
    border-radius: 12px 12px 0 0;
    background: #1C1A2B;
    border: solid 1px #1C1A2B;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    color: #FFFFFF4D;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selection-bonuses--header button.active {
    background: #3B3854;
    color: #FFFFFFB2;
    border: solid 1px #3B3854;
}

.selection-bonuses--header button .sprite {
    fill: white;
    fill-opacity: .2;
}

.selection-bonuses--header button.active .sprite {
    fill: #809FFF;
    fill-opacity: 1;
}

.sprite.roulette,
.sprite.present,
.sprite.bet {
    height: 32px;
    width: 32px;
    display: none;
}

.selection--heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    color: #FFFFFF;
    text-align: center;
}

.selection--body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selection--buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.selection--buttons button {
    width: 200px;
}

.selection-checkbox {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-align: center;
    align-items: center;
    background: #1C1A2B;
    height: 99px;
    padding: 12px;
    gap: 8px;
    border-radius: 12px;
    flex: 1 1 calc(50% - 8px);
    position: relative;
    cursor: pointer;
}

.selection-checkbox.is-active {
    box-shadow: inset 0 0 0 3px var(--color-secondary);
}

.selection-checkbox .sprite {
    height: 48px;
    width: 48px;
    display: block;
    fill: #809FFF;
}

.selection-checkbox [type="radio"],
.selection-checkbox [type="checkbox"] {
    display: none;
}

.selection-checkbox .checkmark {
    position: absolute;
    width: 16px;
    height: 8px;
    left: 10px;
    top: 10px;
    transform: rotate(-45deg);

}

.selection-checkbox input:checked ~ .checkmark {
    border-bottom: solid #809FFF 2px;
    border-left: solid #809FFF 2px;
}

.selection-checkbox input:checked ~ label{
    border: solid #809FFF 2px;
}

.selection-bonuses .top-collection{
    background: #3B3854;
    gap: 10px;
    border-radius: 16px;
    margin: 0;
}
.selection-bonuses .top-collection .top-collection__item{
    background: #504E6B;
}

@media (min-width: 576px) {
    .selection-checkbox {
        flex: 1 1 calc(33.333% - 8px);
    }
}


@media (min-width: 768px) {
    .sprite.roulette,
    .sprite.present,
    .sprite.bet {
        display: block;
    }

    .selection-bonuses--header button {
        font-size: 14px;
        padding: 12px 18px 8px 18px;
    }

    .selection-checkbox {
        flex: 1 1 calc(25% - 8px);
    }

    .selection-checkbox.large{
        height: 206px;
        justify-content: center;
    }


}