.betslipBlock {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.betslipHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 0;
    background-color: var(--body-card-game-custom-bg);
}

.innerHead {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 26px 7px 19px;
    border-right: 1px solid #D4DEE8;
}

.betsTitle {
    font-size: 11px;
    font-weight: 500;
    color: var(--body-card-game-custom-header-text);
}



.closeBtn {
    margin: 0 23px 0 14px;
}

.closeBtn img {
    max-width: 15px;
    max-height: 14px;
    width: 100%;
    height: 100%;
}

.betsContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    background-color: var(--body-card-game-custom-bg-block);
    padding: 10px 19px 15px;
}

.betsWrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 7px 4px;
}

.contentRow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: calc(50% - 2px);
    background-color: var(--body-card-game-custom-header-bg-card);
    border-radius: 10px;
    padding: 7px 12px;
}

.contentRow .teamInfo {
    width: 100%;
}

.contentRow .matchDetails {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

.contentRow .oddButton {
    margin-left: auto;
}

.dateBlock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 4px 7px 0;
    border-right: 1px solid #D4DEE8;
    font-size: 8px;
    color: var(--body-card-game-custom-header-date);
}

.matchInfo {
    display: flex;
    flex-direction: row;
    gap: 14px;
}

.matchInfo img {
    max-width: 15px;
    max-height: 15px;
    width: 100%;
    height: 100%;
}

.matchInfo p {
    white-space: nowrap;
}

.infoRow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 9px 15px;
    background-color: var(--body-card-game-custom-header-bg-bonus);
    border-radius: 10px;
    
}

.infoRow p.title {
    font-size: 16px;
    font-weight: 500;
    color: var(--body-card-game-custom-header-title-bonus);
}
.infoRow p.value {
    font-size: 16px;
    font-weight: 500;
    color: var(--body-card-game-custom-header-value-bonus);
}

.betsContent .button {
    max-width: 100%;
    text-transform: uppercase;
    color: var(--body-card-game-custom-green-btn-text);
    background-color: var(--body-card-game-custom-green-btn-bg);
}

.betsContent .button:hover {
    background-color: var(--body-card-game-custom-green-btn-bg-hover);
    color: var(--body-card-game-custom-green-btn-text-hover);
}

.betsSlider {
    width: 30px;
}

.betsSlider img {
    max-width: 14px;
    max-height: 14px;
    width: 100%;
    height: 100%;
}

.betsSlider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Swiper Navigation Buttons */
.betsSlider .swiper-button-prev,
.betsSlider .swiper-button-next {
    color: #FFF;
    background-color: transparent;
    /* width: 3px;
    height: 5px; */
    top: 0;
    bottom: 0;
    margin: auto 0;
    transition: all 0.3s ease;
}

.betsSlider .swiper-button-prev:after {
    background-image: url("../img/icons/ico-prev.svg");
}

.betsSlider .swiper-button-next:after {
    background-image: url("../img/icons/ico-next.svg");
}

.betsSlider .swiper-button-prev:after,
.betsSlider .swiper-button-next:after {
    content: "";
    width: 3px;
    height: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.betsSlider .swiper-button-prev:hover,
.betsSlider .swiper-button-next:hover {
    color: #FFF;
}

.betsSlider .swiper-button-prev {
    left: -10px;
}

.betsSlider .swiper-button-next {
    right: -10px;
}

@media (max-width: 768px) {
    .contentRow {
        width: 100%;
    }
}
@media (max-width: 568px) {
    .infoRow p {
        font-size: 10px;
    }
}

@container mainContent (min-width: 910px) {
    .dateBlock {
        font-size: 10px;
    }

    .betsTitle {
        font-size: 13px;
    }
}

@container mainContent (min-width: 1366px) {
    .dateBlock {
        font-size: 12px;
    }
    
    .betsTitle {
        font-size: 17px;
    }
}