body
{
    background: var(--mainBgColor);
}
html.light-mode .main-banner .swiper-pagination-bullet-active
{
    background-image: url(../../bcgamebettingde/image/swiper-bullet-active.png);
}
html.light-mode .main-banner .arrow.prev, html.light-mode section .arrows .arrow.prev
{
    background-image: url(../../bcgamebettingde/image/arrow-left-active.svg);
}
html.light-mode .main-banner .arrow.prev.swiper-button-disabled, html.light-mode section .arrows .arrow.prev.swiper-button-disabled
{
    background-image: url(../../bcgamebettingde/image/arrow-left1.svg);
}
html.light-mode .main-banner .arrow.next, html.light-mode section .arrows .arrow.next
{
    background-image: url(../../bcgamebettingde/image/arrow-right-active.svg);
}
html.light-mode .main-banner .arrow.next.swiper-button-disabled, html.light-mode section .arrows .arrow.next.swiper-button-disabled
{
    background-image: url(../../bcgamebettingde/image/arrow-right1.svg);
}
html.dark-mode .main-banner .swiper-pagination-bullet-active
{
    background-image: url(../../bcgamebettingde/image/swiper-bullet-active1.png);
}
html.dark-mode .main-banner .arrow.prev, html.dark-mode section .arrows .arrow.prev
{
    background-image: url(../../bcgamebettingde/image/arrow-left-active1.svg);
}
html.dark-mode .main-banner .arrow.prev.swiper-button-disabled, html.dark-mode section .arrows .arrow.prev.swiper-button-disabled
{
    background-image: url(../../bcgamebettingde/image/arrow-left2.svg);
}
html.dark-mode .main-banner .arrow.next, html.dark-mode section .arrows .arrow.next
{
    background-image: url(../../bcgamebettingde/image/arrow-right-active1.svg);
}
html.dark-mode .main-banner .arrow.next.swiper-button-disabled, html.dark-mode section .arrows .arrow.next.swiper-button-disabled
{
    background-image: url(../../bcgamebettingde/image/arrow-right2.svg);
}
header .bottom-line
{
    background-color: var(--mainHeaderBottomRowBgColor);
}
main .main-banner
{
    width: 100%;
    height: 30rem;
    overflow: hidden;
    position: relative;
    background-color: var(--mainHeaderBottomRowBgColor);
    border-radius: var(--componentsBorderRadius);
    margin-top: 1rem!important;
}
main .main-banner .swiper-wrapper .main-banner-slide
{
    width: 100%!important;
    height: 100%!important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
main .main-banner .swiper-pagination
{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2.2rem;
    position: absolute;
    bottom: 1.5rem;
}
main .main-banner .swiper-pagination .swiper-pagination-bullet
{
    width: 1.2rem;
    height: 1.2rem;
    background-color: #fff;
    opacity: .7;
    cursor: pointer;
}
main .main-banner .swiper-pagination .swiper-pagination-bullet-active
{
    width: 2.2rem;
    height: 2.2rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    opacity: 1;
}
main .main-banner .arrow
{
    width: 5rem;
    height: 5rem;
    z-index: 5;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--mainSwiperArrowActive);
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background-size: 2.5rem 2.5rem;
}
main .main-banner .arrow.swiper-button-disabled
{
    border: 1px solid var(--mainSwiperDisabledArrow);
}
main .main-banner .arrow.prev
{
    left: 2rem;
}
main .main-banner .arrow.next
{
    right: 2rem;
}
main .middle
{
    overflow-x: hidden;
}
main .middle section
{
    margin-top: 3rem;
}
main .middle section .loader-wrapper
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 10rem;
}
main .middle section .section-title
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
main .middle section .section-title .title
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem;
}
main .middle section .section-title .title .icon
{
    width: 28px;
}
main .middle section .section-title .title .text
{
    font-size: 2rem;
    font-family: Roboto-Black;
    color: var(--mainTitleTextColor);
}
main .middle section .arrows
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .6rem;
}
main .middle section .arrows .arrow
{
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--mainSwiperArrowActive);
    cursor: pointer;
}
main .middle section .arrows .arrow.swiper-button-disabled
{
    border: 1px solid var(--mainSwiperDisabledArrow);
}
main .middle section .section-content
{
    margin-top: 1.5rem;
    position: relative;
    display: none;
}
main .middle section .section-content::after
{
    position: absolute;
    content: '';
    width: 11.5rem;
    background: var(--mainPageShadow);
    right: 0;
    top: 0;
    height: 100%;
    z-index: 9;
}
main .middle section .section-content ul li
{
    list-style-type: none;
    border-radius: var(--componentsBorderRadius);
    overflow: hidden;
}
main .middle section .section-content ul li a
{
    display: block;
    width: 100%;
    height: 100%;
}
main .middle section .section-content ul li a img
{
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
main .middle section.category-banners .banners
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
}
main .middle section.category-banners .banners .banner
{
    height: 11.5rem;
    width: 42rem;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--mainHeaderBottomRowBgColor);
}
main .middle section.category-banners .banners .banner img
{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
main .middle section.popular-games
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
main .middle section.popular-games .casino-games, main .middle section.popular-games .live-casino-games, main .middle section.popular-games .mini-games
{
    width: 42rem;
}
main .middle section.popular-games .heading
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
main .middle section.popular-games .heading .title
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .4rem;
}
main .middle section.popular-games .heading .title .text
{
    font-family: Roboto-Black;
    font-size: 2rem;
    color: var(--mainTitleTextColor);
}
main .middle section.popular-games .content
{
    margin-top: 1.5rem;
    overflow: hidden;
}
main .middle section.popular-games .content .banners
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
main .middle section.popular-games .content .banners .slides
{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem;
}
main .middle section.popular-games .content .banners .slides li
{
    background-color: var(--mainHeaderBottomRowBgColor);
    height: 16.5rem!important;
    border-radius: 5px;
    overflow: hidden;
}
main .middle section.popular-games .content .banners .slides li img
{
    height: 100%;
    width: 100%;
    -o-object-fit: 100%;
    object-fit: 100%;
}
main .middle section.promotions .section-content::after
{
    display: none!important;
}
main .middle section.promotions .section-content .promo
{
    height: 31.3rem;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--mainComponentsBgColor);
}
main .middle section.promotions .section-content .promo img
{
    width: 100%;
    height: 40%;
}
main .middle section.promotions .section-content .promo .info
{
    margin-top: auto;
    height: 22rem;
}
main .middle section.promotions .section-content .promo .info h2
{
    color: var(--textColor);
    font-size: 1.6rem;
    margin: 2rem 2.1rem;
}
main .middle section.promotions .section-content .promo .info .text-content
{
    height: 7rem;
    overflow: hidden;
    color: var(--textColor)!important;
    padding: 0 2.1rem;
}
main .middle section.promotions .section-content .promo .info .text-content *
{
    font-size: 1.4rem;
}
main .middle section.promotions .section-content .btn-wrapper
{
    position: absolute;
    bottom: 1.5rem;
    left: 2.1rem;
}
main .middle section.promotions .section-content .btn-wrapper .btn
{
    min-width: 9.1rem;
    height: 3.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--textColor);
    background: 0 0;
    border: 1px solid var(--btnBgColor);
    font-size: 1.2rem;
}
main .middle section.cold-games .section-content .hot-cold-game, main .middle section.hot-games .section-content .hot-cold-game
{
    height: 16.5rem;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    cursor: pointer;
}
main .middle section.cold-games .section-content .hot-cold-game img, main .middle section.hot-games .section-content .hot-cold-game img
{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
main .middle section.cold-games .section-content .hot-cold-game .rtp, main .middle section.hot-games .section-content .hot-cold-game .rtp
{
    position: absolute;
    left: .7rem;
    top: 1rem;
    font-size: 1rem;
    border-radius: 5px;
    width: 7.5rem;
    height: 2.3rem;
    font-family: Roboto-Black;
    background-color: var(--mainHotColdGamesRtpBgColor);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
main .middle section.cold-games.hot-games .rtp, main .middle section.hot-games.hot-games .rtp
{
    color: var(--mainHotGamesRtpTextColor);
}
main .middle section.cold-games.cold-games .rtp, main .middle section.hot-games.cold-games .rtp
{
    color: var(--mainColdGamesRtpTextColor);
}
main .middle section.new-casino-games .section-content ul li, main .middle section.table-games .section-content ul li
{
    height: 16.5rem;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background-color: var(--mainHeaderBottomRowBgColor);
    cursor: pointer;
}
main .middle section.new-casino-games .section-content ul li img, main .middle section.table-games .section-content ul li img
{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
main .middle section.new-casino-games.table-games, main .middle section.table-games.table-games
{
    margin-bottom: 5rem;
}
main .middle section.game-providers .section-content ul li
{
    height: 7.6rem;
    background-color: #00263d;
    border-radius: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}