.Blick {
    width: 15px;
    height: 220px;
    position: relative;
    background: linear-gradient(92.4deg, #6fd4ff00, #7ef0ff 47.37%, #52f5ff 59.09%, #5ecfff00 98.63%);
    transform: rotate(-45deg);
    filter: blur(3px);
    opacity: .61
}

.Blick__middle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 5.21px;
    height: 100%;
    background: linear-gradient(92.4deg, #f695ff00, #88eaff 49.45%, #8df8ff 59.09%, #81d2ff00 98.63%);
    filter: blur(15px);
    opacity: .61
}

.Blick__top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 2.28px;
    height: 100%;
    background: linear-gradient(92.4deg, #fff0, #fff 49.45%, #fff 59.09%, #fff0 98.63%);
    opacity: .48;
    mix-blend-mode: screen
}

.Spin {
    position: relative
}

.Spin__item {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.Spin__item:before {
    content: "";
    display: block;
    margin: 0 auto;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both
}

.Spin__s {
    width: 22px;
    height: 22px
}

.Spin__s .Spin__item:before {
    width: 16%;
    height: 2px
}

.Spin__xl {
    width: 72px;
    height: 72px
}

.Spin__xl .Spin__item:before {
    width: 15%;
    height: 6px
}

.Spin__primary .Spin__item:before, .Spin__secondary .Spin__item:before, .Spin__gradient .Spin__item:before {
    background-color: var(--white)
}

.Spin__transparent .Spin__item:before, .Spin__white .Spin__item:before {
    background-color: var(--primary)
}

.Spin__item-2 {
    transform: rotate(30deg)
}

.Spin__item-2:before {
    animation-delay: -1.1s
}

.Spin__item-3 {
    transform: rotate(60deg)
}

.Spin__item-3:before {
    animation-delay: -1s
}

.Spin__item-4 {
    transform: rotate(90deg)
}

.Spin__item-4:before {
    animation-delay: -.9s
}

.Spin__item-5 {
    transform: rotate(120deg)
}

.Spin__item-5:before {
    animation-delay: -.8s
}

.Spin__item-6 {
    transform: rotate(150deg)
}

.Spin__item-6:before {
    animation-delay: -.7s
}

.Spin__item-7 {
    transform: rotate(180deg)
}

.Spin__item-7:before {
    animation-delay: -.6s
}

.Spin__item-8 {
    transform: rotate(210deg)
}

.Spin__item-8:before {
    animation-delay: -.5s
}

.Spin__item-9 {
    transform: rotate(240deg)
}

.Spin__item-9:before {
    animation-delay: -.4s
}

.Spin__item-10 {
    transform: rotate(270deg)
}

.Spin__item-10:before {
    animation-delay: -.3s
}

.Spin__item-11 {
    transform: rotate(300deg)
}

.Spin__item-11:before {
    animation-delay: -.2s
}

.Spin__item-12 {
    transform: rotate(330deg)
}

.Spin__item-12:before {
    animation-delay: -.1s
}

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, to {
        opacity: 0
    }
    40% {
        opacity: 1
    }
}

@keyframes sk-circleFadeDelay {
    0%, 39%, to {
        opacity: 0
    }
    40% {
        opacity: 1
    }
}

.Button {
    display: flex;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    height: 52px;
    text-transform: uppercase
}

@media (max-width: 320px) {
    .Button {
        font-size: 12px;
        line-height: 130%;
        font-weight: 600
    }
}

.Button__width-content {
    width: fit-content;
    padding: 8px 12px
}

.Button__blick {
    position: absolute;
    width: 32px;
    height: 199px;
    top: -50px;
    left: -20px;
    z-index: 10
}

.Button__primary {
    background: var(--primary);
    border: none;
    color: var(--white)
}

.Button__primary:hover {
    background: var(--hoverPrimary)
}

.Button__primary.Button__disabled {
    background: var(--light-blue)
}

.Button__primary svg, .Button__primary path, .Button__primary rect {
    fill: var(--white)
}

.Button__secondary {
    background: var(--secondary);
    border: none;
    color: var(--white)
}

.Button__secondary:hover {
    background: var(--secondary-dark)
}

.Button__secondary.Button__disabled {
    background: var(--light-pink)
}

.Button__secondary.Button__disabled .Spin {
    opacity: .5
}

.Button__transparent {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary)
}

.Button.Button__disabled {
    border-color: var(--light-blue);
    color: var(--light-blue)
}

.Button.Button__disabled .Spin {
    opacity: .5
}

.Button__gradient {
    background: var(--gradient);
    border: none;
    color: var(--white);
    box-shadow: 0 2px 3px #00000026
}

.Button__gradient:hover {
    background: var(--primary-dark)
}

.Button__gradient.Button__disabled {
    opacity: .5
}

.Button__gradient svg, .Button__gradient path, .Button__gradient rect {
    fill: var(--white)
}

.Button__banger-gradient {
    background: var(--gradient);
    border: none;
    color: var(--white);
    box-shadow: 0 2px 3px #00000026
}

.Button__banger-gradient:hover {
    background: var(--primary-dark)
}

.Button__banger-gradient.Button__disabled {
    opacity: .5
}

.Button__banger-gradient svg, .Button__banger-gradient path, .Button__banger-gradient rect {
    fill: var(--white)
}

.Button__gradient-button-promo {
    background: var(--gloryGradient04);
    border: none;
    color: var(--white);
    box-shadow: 0 2px 3px #00000026
}

.Button__gradient-button-promo:hover {
    background: var(--primary-dark)
}

.Button__gradient-button-promo.Button__disabled {
    opacity: .5
}

.Button__gradient-button-promo svg, .Button__gradient-button-promo path, .Button__gradient-button-promo rect {
    fill: var(--white)
}

.Button__glory-gradient {
    background: var(--gloryGradient03);
    border: none;
    color: var(--white);
    box-shadow: 0 2px 3px #00000026
}

.Button__glory-gradient:hover {
    background: var(--primary-dark)
}

.Button__glory-gradient.Button__disabled {
    opacity: .5
}

.Button__glory-gradient svg, .Button__glory-gradient path, .Button__glory-gradient rect {
    fill: var(--white)
}

.Button__white {
    background: var(--white);
    border: none;
    color: var(--primary)
}

.Button__white:hover {
    color: var(--primary-dark)
}

.Button__white.Button__disabled {
    opacity: .5
}

.Button__white-border {
    background: var(--white);
    border: 2px solid var(--border-grey);
    color: var(--textPrimary);
    border-radius: 16px;
    transition: background .2s ease-out
}

.Button__white-border:hover {
    background: var(--bg)
}

.Button__white-border.Button__disabled {
    opacity: .5
}

.Button__green {
    background: var(--success);
    border: none;
    color: var(--white)
}

.Button__green:hover, .Button__green.Button__disabled {
    background: var(--success)
}

.Button__green.Button__disabled .Spin {
    opacity: .5
}

.Button__light-green {
    background: var(--light-green);
    border: none;
    color: var(--white)
}

.Button__light-green:hover {
    background: var(--light-green)
}

.Button__light-green.Button__disabled, .Button__light-green.Button__disabled .Spin {
    opacity: .5
}

.Button__red {
    background: var(--red-back);
    border: none;
    color: var(--white)
}

.Button__red:hover {
    background: var(--red-back)
}

.Button__red.Button__disabled, .Button__red.Button__disabled .Spin {
    opacity: .5
}

.Button__dark-blue {
    background: var(--backgroundDarkBlue);
    border: inherit
}

.Button__dark-blue:hover {
    background: var(--backgroundDarkBlue)
}

.Button__dark-blue.Button__disabled, .Button__dark-blue.Button__disabled .Spin {
    opacity: .5
}

.Button__dark {
    background: var(--backgroundDark);
    border: inherit
}

.Button__dark:hover {
    background: var(--backgroundDark)
}

.Button__dark.Button__disabled, .Button__dark.Button__disabled .Spin {
    opacity: .5
}

.Button__blue {
    background: var(--brand);
    border: inherit;
    color: var(--white)
}

.Button__blue:hover {
    background: var(--brand);
    color: var(--white)
}

.Button__blue.Button__disabled, .Button__blue.Button__disabled .Spin {
    opacity: .5
}

.Button__chicks {
    background-size: 200px;
    height: 55px;
    margin-top: -10px;
    z-index: 1;
    font-size: 24px;
    line-height: 24.15px;
    background-image: url(landings/wheels/chicksTurkey/button_long.png);
    background-repeat: no-repeat, repeat;
    background-position: center top;
    background-color: transparent;
    border: none;
    width: 100%;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    color: var(--white);
    font-size: 18px;
    line-height: 25px;
    font-weight: 800
}

@media (max-width: 576px),(max-height: 576px) {
    .Button__chicks {
        font-size: 14px;
        line-height: 17.51px;
        font-weight: 800;
        background-size: 143px;
        height: 40px;
        margin-top: -25px
    }
}

.Button__chicks:hover {
    filter: brightness(120%)
}

.Button__chicks.Button__disabled {
    opacity: .5
}

.Button__chicks svg, .Button__chicks path, .Button__chicks rect {
    fill: var(--white)
}

.Button__orange {
    background: var(--orange2);
    border: inherit;
    color: var(--white)
}

.Button__orange:hover {
    background: var(--orange2)
}

.Button__s {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    height: 32px;
    border-radius: 4px
}

.InputSearch {
    position: relative;
    width: 100%;
    height: 44px
}

.InputSearch__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    width: 28px;
    height: 28px
}

.InputSearch__icon svg, .InputSearch__icon path {
    fill: var(--textPrimary)
}

.InputSearch__input {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    background: transparent;
    padding: 8px 16px 8px 52px;
    border: 1px solid var(--borderPrimary);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    color: var(--textPrimary)
}

.InputSearch__input:focus {
    border-color: var(--primary);
    padding-right: 48px
}

.InputSearch__input::placeholder {
    color: var(--grey)
}

.InputSearch__clear {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23BCC4CC'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='white'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.InputSearch__clear.dark {
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23989898'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='%231C1C20'/%3e%3c/svg%3e")
}

.NotificationCircle {
    position: relative;
    width: 8px;
    height: 8px;
    background-color: var(--secondary);
    border-radius: 50%;
    z-index: 2
}

.NotificationCircle__after {
    width: 8px;
    height: 8px;
    content: "";
    left: 0;
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    animation: notify-circle-shine 1.5s infinite
}

@keyframes notify-circle-shine {
    0% {
        background-color: var(--secondary);
        opacity: 1;
        transform: scale(1)
    }
    to {
        background-color: var(--secondary);
        opacity: .5;
        transform: scale(2.5)
    }
}

.Checkbox {
    position: relative;
    display: grid;
    grid-template-columns:.1px 22px 1fr;
    align-items: baseline;
    cursor: pointer
}

.Checkbox__label {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-left: 10px
}

.Checkbox__label a {
    color: var(--active);
    text-decoration: none
}

.Checkbox > input {
    opacity: 0;
    position: relative;
    z-index: -999;
    width: .1px;
    height: .1px;
    padding: 0;
    margin: 0
}

.Checkbox > input:checked + .Checkbox__custom svg {
    opacity: 1
}

.Checkbox__custom {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--checkboxBorder);
    background: transparent;
    width: 22px;
    height: 22px;
    border-radius: 4px
}

.Checkbox__custom svg {
    width: 13px;
    height: 13px;
    opacity: 0;
    transition: opacity .1s ease-out
}

.Checkbox__custom.active {
    border-color: var(--active)
}

.Checkbox__custom.active svg, .Checkbox__custom.active path, .Checkbox__custom.active rect {
    stroke: var(--active)
}

.Checkbox__custom.borderNone {
    border: none
}

.Checkbox__custom_error {
    border-color: var(--error)
}

.SkeletonBanners {
    width: 100%;
    height: 382px;
    background: var(--bannerSkeletonBg);
    border-radius: 8px;
    padding: 60px 40px
}

@media (max-width: 1180px) {
    .SkeletonBanners {
        height: 150px
    }
}

.SkeletonBanners__mobile {
    padding: 0 16px
}

.SkeletonBanners__title {
    margin-bottom: 19px
}

.SkeletonBanners__subtitle {
    margin-bottom: 42px
}

.SkeletonBanners__desc {
    margin-bottom: 28px
}

.BannerItem {
    position: relative;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .BannerItem {
        cursor: pointer
    }
}

.BannerItem__img {
    border-radius: 16px;
    display: block
}

@media (max-width: 768px) {
    .BannerItem__img {
        border-radius: 8px
    }
}

.BannerItem-text {
    position: absolute;
    padding: 60px 0 0 40px;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column
}

@media (max-width: 768px) {
    .BannerItem-text {
        padding: 20px 0 0 16px
    }
}

@media (max-width: 375px) {
    .BannerItem-text {
        padding: 8px 0 0 8px
    }
}

.BannerItem-text__title {
    width: 800px;
    white-space: break-spaces;
    font-family: Unbounded;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    color: var(--textPrimary);
    text-transform: uppercase
}

@media (max-width: 768px) {
    .BannerItem-text__title {
        width: 300px;
        font-size: 18px;
        font-weight: 800
    }
}

.BannerItem-text__desc {
    width: 700px;
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 20px
}

@media (max-width: 768px) {
    .BannerItem-text__desc {
        width: 200px;
        font-size: 12px;
        line-height: 120%;
        font-weight: 400;
        margin-top: 8px
    }
}

@media (max-width: 375px) {
    .BannerItem-text__desc {
        margin-top: 4px
    }
}

.BannerItem-text__btn {
    position: fixed;
    bottom: 60px;
    width: 343px;
    text-transform: uppercase;
    cursor: pointer
}

@media (max-width: 768px) {
    .BannerItem-text__btn {
        display: none
    }
}

.BannerItem__mob {
    position: fixed;
    bottom: 20px;
    left: 16px;
    display: flex;
    width: 151px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    background-color: var(--active);
    color: var(--textGameModeActiveColor);
    border-radius: 4px;
    text-transform: uppercase
}

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

@media (max-width: 1180px) {
    .CarouselBanners {
        border-radius: 0;
        width: 100vw
    }
}

.CarouselBanners__carousel {
    width: 100%;
    height: 100%;
    position: relative
}

.CarouselBanners__image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

@media (max-width: 1180px) {
    .CarouselBanners__image {
        border-radius: 8px
    }
}

.CarouselBanners__slide {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.CarouselBanners__slide img {
    width: 100%;
    object-fit: cover;
    display: block
}

@media (max-width: 1180px) {
    .CarouselBanners__slide.swiper-slide-next {
        justify-content: flex-start
    }

    .CarouselBanners__slide.swiper-slide-next .CarouselBanners__image {
        margin-left: -5px
    }

    .CarouselBanners__slide.swiper-slide-prev {
        justify-content: flex-end
    }

    .CarouselBanners__slide.swiper-slide-prev .CarouselBanners__image {
        margin-right: -5px
    }
}

.CarouselBanners .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%);
    z-index: 2
}

@media (max-width: 1180px) {
    .CarouselBanners .swiper-pagination {
        bottom: 8px
    }
}

.CarouselBanners .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--bulletsColor);
    border-radius: 10px;
    margin-right: 8px
}

.CarouselBanners .swiper-pagination-bullet:last-child {
    margin-right: 0
}

.CarouselBanners .swiper-pagination-bullet-active {
    background: var(--bulletActiveColor)
}

.CarouselBanners.single-banner .swiper-button-prev, .CarouselBanners.single-banner .swiper-button-next, .CarouselBanners.single-banner .swiper-pagination {
    display: none
}

.Progressbar {
    display: flex;
    align-items: center;
    padding: 4px;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid var(--grey);
    border-radius: 15px
}

.Progressbar__m {
    height: 20px
}

.Progressbar__s {
    height: 18px
}

.Progressbar-header {
    display: flex;
    justify-content: space-between
}

.Progressbar-header__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    opacity: .8
}

.Progressbar-header__amount {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.Progressbar-header__amount_widget {
    color: var(--textSecondary)
}

.Progressbar-header__info {
    display: none
}

@media (max-width: 1180px) {
    .Progressbar-header__info {
        display: flex;
        font-size: 12px;
        line-height: 130%;
        font-weight: 600;
        color: var(--active)
    }
}

.Progressbar__front {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--gradient);
    transition: width .2s linear;
    height: 12px;
    border-radius: 15px
}

.BonusWidget {
    display: flex;
    flex-flow: column;
    margin-top: 32px;
    background: var(--bgSecondary);
    border-radius: 16px
}

@media (max-width: 1180px) {
    .BonusWidget {
        margin-top: 0;
        margin-bottom: 8px;
        border-radius: 8px;
        cursor: pointer
    }
}

.BonusWidget-header {
    display: flex;
    justify-content: space-between;
    background: var(--headerBonus);
    padding: 10px 16px;
    border-radius: 16px 16px 0 0
}

@media (max-width: 1180px) {
    .BonusWidget-header {
        display: none
    }
}

.BonusWidget-header__title {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.BonusWidget-header__info {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active);
    cursor: pointer
}

.BonusWidget-container {
    display: flex;
    padding: 16px
}

@media (max-width: 1180px) {
    .BonusWidget-container {
        padding: 12px 16px;
        gap: 12px
    }
}

.BonusWidget-container-reward {
    display: flex;
    flex-flow: column
}

.BonusWidget-container-reward__title {
    width: 87px;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.BonusWidget-container-reward-value {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px
}

.BonusWidget-container-reward-value__img {
    width: 16px;
    height: 16px
}

.BonusWidget-container-reward-value__text {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.BonusWidget-container__timer {
    display: flex;
    margin: 0 62px 0 121px
}

@media (max-width: 1180px) {
    .BonusWidget-container__timer {
        display: none
    }
}

.BonusWidget-container__progress {
    width: 100%
}

.Timer {
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    font-size: inherit
}

.Timer-is-promo {
    font-family: Unbounded
}

.Timer-is-promo__hr {
    margin: 0 35px !important
}

.Timer__promo {
    font-family: Unbounded;
    font-size: 64px;
    font-style: normal;
    font-weight: 800
}

.Timer_tournament {
    font-weight: 700
}

.Timer-bonus {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.Timer-bonus-item {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 45px;
    padding: 4px 8px
}

.Timer-bonus-item__value {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.Timer-bonus-item__value-small {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600
}

.Timer-bonus-item__value-medium {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700
}

.Timer-bonus-item__value-large {
    font-size: 48px;
    line-height: 110%;
    font-weight: 800
}

.Timer-bonus-item__value-warning {
    color: var(--textTournamentColor)
}

.Timer-bonus-item__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.Timer-bonus-item__label-large {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary)
}

.Timer-bonus.disabled {
    opacity: .5
}

.Timer-bonus.disabled .Timer-bonus-item__value {
    color: var(--textSecondary)
}

.Timer-bonus__hr {
    height: 32px;
    margin: 0 4px;
    border-radius: .5px;
    border: none;
    border-left: 1px solid var(--greyBlue)
}

.Timer-bonus__hr-large {
    height: 44px;
    margin: 0 16px;
    border-radius: .5px;
    border: none;
    border-left: 1px solid var(--greyBlue)
}

.NavigationButton {
    padding: 0;
    background: transparent;
    border: none;
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    display: grid;
    grid-template-columns:28px 1fr;
    column-gap: 8px;
    align-items: center;
    text-decoration: none;
    color: var(--textPrimary);
    cursor: pointer
}

.NavigationButton svg, .NavigationButton path, .NavigationButton rect {
    fill: var(--grey)
}

.NavigationButton:hover {
    color: var(--primary);
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.LogoutBlock {
    padding: 8px 0
}

.LoyaltyButton {
    background: var(--primary);
    padding: 8px 12px;
    border-radius: 12px;
    font-family: Unbounded;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--white);
    display: grid;
    align-items: center;
    grid-template-columns:20px 1fr 28px;
    gap: 8px;
    height: 44px
}

.ProfileWidget {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d;
    box-shadow: 0 0 1px #0c1a4b3d;
    padding: 12px
}

.ProfileWidget__info {
    display: flex;
    align-items: center
}

.ProfileWidget__avatar {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 200px;
    position: relative;
    border: 2px solid var(--primary)
}

.ProfileWidget__avatar_img {
    width: 72px;
    height: 72px;
    border-radius: 200px;
    overflow: hidden;
    background: var(--white);
    position: absolute;
    top: 2px;
    left: 2px
}

.ProfileWidget__avatar_img_empty {
    display: flex;
    align-items: center;
    justify-content: center
}

.ProfileWidget__avatar_img img {
    object-fit: cover;
    width: 100%;
    transform: scale(1.8);
    transform-origin: top
}

.ProfileWidget__avatar_coin {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 30px;
    height: 28px
}

.ProfileWidget__avatar_coin img {
    width: 100%;
    object-fit: cover
}

.ProfileWidget__name {
    margin-left: 12px
}

.ProfileWidget__name_title {
    font-family: Unbounded;
    font-size: 14px;
    line-height: 130%;
    font-weight: 700
}

.ProfileWidget__name_id {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.ProfileWidget__name_rank {
    margin-top: 4px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.ProfileWidget__name_rank span {
    color: var(--brandColor);
    font-family: Unbounded;
    text-transform: uppercase
}

.ProfileWidget__name_rank span {
    color: var(--brandColor)
}

.ProfileWidget__rank {
    margin-top: 12px
}

.ProfileWidget__rank_exp {
    margin-top: 4px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.ProfileWidget__rank_exp span {
    color: var(--brandColor)
}

.ProfileWidget__progress {
    height: 8px;
    width: 100%;
    background: var(--bgGrey);
    border-radius: 40px;
    position: relative;
    overflow: hidden
}

.ProfileWidget__progress_bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 8px;
    background: var(--brandColor);
    border-radius: 40px
}

.LoyaltyNickname {
    font-family: Unbounded;
    font-size: 14px;
    line-height: 130%;
    font-weight: 700
}

.ToastButtonClose {
    all: unset;
    height: 24px
}

.ToastButtonClose__icon {
    width: 24px;
    height: 24px
}

.ToastButtonClose__icon > path {
    fill: #0000007a
}

div.Toast__container {
    z-index: 100002
}

@media (max-width: 576px) {
    div.Toast__container {
        margin-bottom: 16px
    }
}

div.Toastify__progress-bar--default {
    background: transparent
}

div.Toast__body {
    padding: 0 !important
}

div.Toast {
    padding: 12px !important;
    border-radius: 8px
}

@media (max-width: 576px) {
    div.Toast {
        max-width: 328px;
        margin: 0 auto 16px
    }
}

div.Toast_green {
    background: #f6ffed
}

div.Toast_red {
    background: #fff1f0
}

div.Toast_yellow {
    background: #fff7e6
}

div.Toast_blue {
    background: #f0f5ff
}

div.Toast_purple {
    background: #f9f0ff
}

div.Toast__progressbar_green {
    background: #52c41a
}

div.Toast__progressbar_red {
    background: #f5222d
}

div.Toast__progressbar_blue {
    background: #2f54eb
}

div.Toast__progressbar_purple {
    background: #722ed1
}

div.Toast__progressbar_yellow {
    background: #fdb43c
}

.ToastInner__content {
    display: flex;
    flex-direction: column
}

.ToastInner__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 4px
}

.ToastInner__description {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--black)
}

.Tooltip {
    position: absolute;
    max-width: 304px;
    padding: 16px;
    background: var(--selectBg);
    border-radius: 8px;
    box-shadow: 0 2px 10px #0003;
    z-index: 15000
}

.Tooltip__content {
    position: relative;
    z-index: 15002
}

.Tooltip__arrow-up:before, .Tooltip__arrow-down:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--selectBg);
    transform: rotate(45deg);
    z-index: 15001
}

.Tooltip__arrow-start:before {
    left: 11px
}

.Tooltip__arrow-center:before {
    left: 50%;
    transform: translate(-50%) rotate(45deg)
}

.Tooltip__arrow-end:before {
    right: 11px
}

.Tooltip__arrow-up:before {
    bottom: -5px;
    border: 5px solid transparent;
    border-top-color: var(--selectBg)
}

.Tooltip__arrow-down:before {
    top: -5px;
    border: 5px solid transparent;
    border-bottom-color: var(--selectBg)
}

.Input {
    position: relative
}

.Input__label {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: all .15s;
    padding: 0 4px;
    color: var(--grey);
    font-size: 16px;
    line-height: 130%;
    font-weight: 400
}

.Input__name {
    height: 56px;
    width: 100%;
    position: relative;
    display: inline-flex;
    padding: 0 16px;
    align-items: center;
    cursor: pointer
}

.Input__name.disabled {
    opacity: .38
}

.Input__name.tooltip {
    padding: 0 50px 0 16px
}

.Input__input {
    border: none;
    width: 100%;
    height: 100%;
    display: flex;
    background: transparent;
    caret-color: var(--textPrimary);
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    position: relative;
    z-index: 2
}

.Input__input.dark {
    color: var(--light-grey)
}

.Input__input::placeholder {
    opacity: 0;
    transition: .15s
}

.Input__input.noLabel::placeholder {
    opacity: 1
}

.Input__input:-webkit-autofill, .Input__input:-webkit-autofill:hover, .Input__input:-webkit-autofill:focus, .Input__input:-webkit-autofill:active {
    transition-delay: 9999s;
    transition-property: background-color color
}

.Input__input:focus::placeholder {
    opacity: 1
}

.Input__input:disabled {
    color: var(--grey);
    opacity: 1 !important
}

.Input__eye {
    opacity: 0;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.Input__eye.moved {
    right: 48px
}

.Input__border {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    z-index: 1
}

.Input__border_left {
    border-left: 1px solid var(--grey);
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 16px
}

.Input__border_center {
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    flex: 0 0 auto;
    width: auto;
    margin: 0 -1px
}

.Input__border_right {
    border-right: 1px solid var(--grey);
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    flex-grow: 1
}

.Input__border.dark .Input__border_left, .Input__border.dark .Input__border_center {
    border-color: var(--light-grey)
}

.Input__border.dark .Input__border_center .Input__label {
    color: var(--grey)
}

.Input__border.dark .Input__border_right {
    border-color: var(--light-grey)
}

.Input__border.withValue .Input__border_center {
    border-top: none;
    align-items: flex-start
}

.Input__border.withValue .Input__border_center .Input__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    top: -11.5px;
    transform: translateY(0);
    color: var(--inputLabelValue)
}

.Input__border.error .Input__border_left, .Input__border.error .Input__border_center {
    border-color: var(--error);
    border-width: 2px
}

.Input__border.error .Input__border_center .Input__label {
    color: var(--error) !important
}

.Input__border.error .Input__border_right {
    border-color: var(--error);
    border-width: 2px
}

.Input__clear {
    opacity: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23BCC4CC'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='white'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.Input__clear.dark {
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23989898'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='%231C1C20'/%3e%3c/svg%3e")
}

.Input__clear.tooltip {
    padding: 0 35px 0 16px
}

.Input__disabled {
    position: absolute;
    top: 25%;
    right: 16px;
    z-index: 2
}

.Input__disabled svg, .Input__disabled path, .Input__disabled rect {
    fill: var(--grey)
}

.Input__locked {
    position: absolute;
    top: 25%;
    right: 16px
}

.Input__locked svg, .Input__locked path {
    stroke: var(--grey)
}

.Input__copied {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.00001%2014.4001L3.60001%2014.4001C2.93726%2014.4001%202.40001%2013.8628%202.40001%2013.2001L2.40001%204.4001C2.40001%203.29553%203.29544%202.4001%204.40001%202.4001L13.2%202.4001C13.8627%202.4001%2014.4%202.93736%2014.4%203.6001L14.4%206.0001M12%2021.6001L19.2%2021.6001C20.5255%2021.6001%2021.6%2020.5256%2021.6%2019.2001L21.6%2012.0001C21.6%2010.6746%2020.5255%209.6001%2019.2%209.6001L12%209.6001C10.6745%209.6001%209.60001%2010.6746%209.60001%2012.0001L9.6%2019.2001C9.6%2020.5256%2010.6745%2021.6001%2012%2021.6001Z'%20stroke='%23989898'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.Input__attention {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Error%20Icon'%3e%3cpath%20id='icon'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM11%2017V15H13V17H11ZM11%207V13H13V7H11Z'%20fill='%23F31F1F'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2
}

.Input__attention.tooltip {
    padding: 0 35px 0 16px
}

.Input__suffix.error {
    margin-right: 32px
}

.Input__support {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    padding: 3px 0 0 10px
}

.Input__support.error {
    color: var(--error)
}

.Input__tooltip {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='10'%20cy='10'%20r='9.25'%20stroke='%239FA0A8'%20stroke-width='1.5'/%3e%3cpath%20d='M8.88257%2011.9336V11.4961C8.88257%2010.9948%208.97371%2010.5778%209.15601%2010.2451C9.3383%209.91244%209.65731%209.56836%2010.113%209.21289C10.6554%208.78451%2011.004%208.45182%2011.1589%208.21484C11.3184%207.97786%2011.3982%207.69531%2011.3982%207.36719C11.3982%206.98438%2011.2706%206.69043%2011.0154%206.48535C10.7602%206.28027%2010.3933%206.17773%209.91479%206.17773C9.48185%206.17773%209.08081%206.23926%208.71167%206.3623C8.34253%206.48535%207.9825%206.63346%207.63159%206.80664L7.05737%205.60352C7.9825%205.08854%208.97371%204.83105%2010.031%204.83105C10.9242%204.83105%2011.6329%205.0498%2012.157%205.4873C12.6811%205.9248%2012.9431%206.52865%2012.9431%207.29883C12.9431%207.64062%2012.893%207.94596%2012.7927%208.21484C12.6925%208.47917%2012.5398%208.7321%2012.3347%208.97363C12.1342%209.21517%2011.7856%209.52962%2011.2888%209.91699C10.865%2010.2497%2010.5802%2010.5254%2010.4343%2010.7441C10.2931%2010.9629%2010.2224%2011.2568%2010.2224%2011.626V11.9336H8.88257ZM8.60229%2014.1143C8.60229%2013.4261%208.93726%2013.082%209.60718%2013.082C9.9353%2013.082%2010.186%2013.1732%2010.3591%2013.3555C10.5323%2013.5332%2010.6189%2013.7861%2010.6189%2014.1143C10.6189%2014.4378%2010.53%2014.6953%2010.3523%2014.8867C10.1791%2015.0736%209.93075%2015.167%209.60718%2015.167C9.28361%2015.167%209.03524%2015.0758%208.86206%2014.8936C8.68888%2014.7067%208.60229%2014.4469%208.60229%2014.1143Z'%20fill='%239FA0A8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 53%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.Input__input:focus ~ .Input__border .Input__border_left, .Input__input:active ~ .Input__border .Input__border_left {
    border-color: var(--active);
    border-width: 2px
}

.Input__input:focus ~ .Input__border .Input__border_center, .Input__input:active ~ .Input__border .Input__border_center {
    border-top: none;
    border-color: var(--active);
    align-items: flex-start;
    border-width: 2px
}

.Input__input:focus ~ .Input__border .Input__border_center .Input__label, .Input__input:active ~ .Input__border .Input__border_center .Input__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--active);
    top: -11.5px;
    transform: translateY(0)
}

.Input__input:focus ~ .Input__border .Input__border_right, .Input__input:active ~ .Input__border .Input__border_right {
    border-color: var(--active);
    border-width: 2px
}

.Input__input:focus ~ .Input__border.error .Input__border_left, .Input__input:active ~ .Input__border.error .Input__border_left {
    border-color: var(--error);
    border-width: 2px
}

.Input__input:focus ~ .Input__border.error .Input__border_center, .Input__input:active ~ .Input__border.error .Input__border_center {
    border-top: none;
    border-color: var(--error);
    align-items: flex-start;
    border-width: 2px
}

.Input__input:focus ~ .Input__border.error .Input__border_center .Input__label, .Input__input:active ~ .Input__border.error .Input__border_center .Input__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--error);
    top: -11.5px;
    transform: translateY(0)
}

.Input__input:focus ~ .Input__border.error .Input__border_right, .Input__input:active ~ .Input__border.error .Input__border_right {
    border-color: var(--error);
    border-width: 2px
}

.Input__input:focus ~ .Input__attention, .Input__input:active ~ .Input__attention {
    display: none
}

.Input__input:focus ~ .Input__clear, .Input__input:active ~ .Input__clear {
    opacity: 1
}

.Input__input:focus ~ .Input__eye, .Input__input:active ~ .Input__eye {
    opacity: 1
}

.InputMask__support.show {
    display: block
}

.InputMask__support {
    display: none
}

.Input__input {
    padding-right: 0
}

.Input__input.withValue:focus ~ .Input__suffix, .Input__input.withValue:active ~ .Input__suffix {
    padding-right: 32px
}

.Input__input:focus ~ .Input__suffix.error, .Input__input:active ~ .Input__suffix.error {
    padding-right: 0
}

.InputMask {
    position: relative
}

.InputMask__label {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    transition: all .15s;
    padding: 0 4px;
    color: var(--grey);
    font-size: 16px;
    line-height: 130%;
    font-weight: 400
}

.InputMask__name {
    height: 56px;
    width: 100%;
    position: relative;
    display: inline-flex;
    padding: 0 16px;
    align-items: baseline;
    cursor: pointer
}

.InputMask__name.disabled, .InputMask__name.copied, .InputMask__name.tooltip {
    padding: 0 50px 0 16px
}

.InputMask__input {
    border: none;
    width: 100%;
    height: 100%;
    display: flex;
    background: transparent;
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    position: relative;
    z-index: 2
}

.InputMask__input.dark {
    color: var(--light-grey) !important
}

.InputMask__input::placeholder {
    opacity: 0;
    transition: .15s
}

.InputMask__input:-webkit-autofill, .InputMask__input:-webkit-autofill:hover, .InputMask__input:-webkit-autofill:focus, .InputMask__input:-webkit-autofill:active {
    transition-delay: 9999s;
    transition-property: background-color color
}

.InputMask__input:focus::placeholder {
    opacity: 1
}

.InputMask__border {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    z-index: 1
}

.InputMask__border_left {
    border-left: 1px solid var(--grey);
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 16px
}

.InputMask__border_center {
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    flex: 0 0 auto;
    width: auto
}

.InputMask__border_right {
    border-right: 1px solid var(--grey);
    border-top: 1px solid var(--grey);
    border-bottom: 1px solid var(--grey);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    flex-grow: 1
}

.InputMask__border.dark .InputMask__border_left, .InputMask__border.dark .InputMask__border_center {
    border-color: var(--light-grey)
}

.InputMask__border.dark .InputMask__border_center .InputMask__label {
    color: var(--grey)
}

.InputMask__border.dark .InputMask__border_right {
    border-color: var(--light-grey)
}

.InputMask__border.withValue .InputMask__border_center {
    border-top: none;
    align-items: flex-start
}

.InputMask__border.withValue .InputMask__border_center .InputMask__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    top: -11.5px;
    transform: translateY(0);
    color: var(--inputLabelValue)
}

.InputMask__border.error .InputMask__border_left, .InputMask__border.error .InputMask__border_center {
    border-color: var(--error);
    border-width: 2px
}

.InputMask__border.error .InputMask__border_center .InputMask__label {
    color: var(--error) !important
}

.InputMask__border.error .InputMask__border_right {
    border-color: var(--error);
    border-width: 2px
}

.InputMask__clear {
    opacity: 0;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23BCC4CC'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='white'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.InputMask__clear.tooltip {
    padding: 0 35px 0 16px
}

.InputMask__clear.dark {
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2%2012C2%206.47715%206.47715%202%2012%202C17.5228%202%2022%206.47715%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012Z'%20fill='%23989898'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.29289%207.29289C7.68342%206.90237%208.31658%206.90237%208.70711%207.29289L12%2010.5858L15.2929%207.29289C15.6834%206.90237%2016.3166%206.90237%2016.7071%207.29289C17.0976%207.68342%2017.0976%208.31658%2016.7071%208.70711L13.4142%2012L16.7071%2015.2929C17.0976%2015.6834%2017.0976%2016.3166%2016.7071%2016.7071C16.3166%2017.0976%2015.6834%2017.0976%2015.2929%2016.7071L12%2013.4142L8.70711%2016.7071C8.31658%2017.0976%207.68342%2017.0976%207.29289%2016.7071C6.90237%2016.3166%206.90237%2015.6834%207.29289%2015.2929L10.5858%2012L7.29289%208.70711C6.90237%208.31658%206.90237%207.68342%207.29289%207.29289Z'%20fill='%231C1C20'/%3e%3c/svg%3e")
}

.InputMask__disabled {
    position: absolute;
    top: 25%;
    right: 16px;
    z-index: 2
}

.InputMask__copied {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6.00001%2014.4001L3.60001%2014.4001C2.93726%2014.4001%202.40001%2013.8628%202.40001%2013.2001L2.40001%204.4001C2.40001%203.29553%203.29544%202.4001%204.40001%202.4001L13.2%202.4001C13.8627%202.4001%2014.4%202.93736%2014.4%203.6001L14.4%206.0001M12%2021.6001L19.2%2021.6001C20.5255%2021.6001%2021.6%2020.5256%2021.6%2019.2001L21.6%2012.0001C21.6%2010.6746%2020.5255%209.6001%2019.2%209.6001L12%209.6001C10.6745%209.6001%209.60001%2010.6746%209.60001%2012.0001L9.6%2019.2001C9.6%2020.5256%2010.6745%2021.6001%2012%2021.6001Z'%20stroke='%23989898'%20stroke-width='1.5'%20stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.InputMask__tooltip {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='10'%20cy='10'%20r='9.25'%20stroke='%239FA0A8'%20stroke-width='1.5'/%3e%3cpath%20d='M8.88257%2011.9336V11.4961C8.88257%2010.9948%208.97371%2010.5778%209.15601%2010.2451C9.3383%209.91244%209.65731%209.56836%2010.113%209.21289C10.6554%208.78451%2011.004%208.45182%2011.1589%208.21484C11.3184%207.97786%2011.3982%207.69531%2011.3982%207.36719C11.3982%206.98438%2011.2706%206.69043%2011.0154%206.48535C10.7602%206.28027%2010.3933%206.17773%209.91479%206.17773C9.48185%206.17773%209.08081%206.23926%208.71167%206.3623C8.34253%206.48535%207.9825%206.63346%207.63159%206.80664L7.05737%205.60352C7.9825%205.08854%208.97371%204.83105%2010.031%204.83105C10.9242%204.83105%2011.6329%205.0498%2012.157%205.4873C12.6811%205.9248%2012.9431%206.52865%2012.9431%207.29883C12.9431%207.64062%2012.893%207.94596%2012.7927%208.21484C12.6925%208.47917%2012.5398%208.7321%2012.3347%208.97363C12.1342%209.21517%2011.7856%209.52962%2011.2888%209.91699C10.865%2010.2497%2010.5802%2010.5254%2010.4343%2010.7441C10.2931%2010.9629%2010.2224%2011.2568%2010.2224%2011.626V11.9336H8.88257ZM8.60229%2014.1143C8.60229%2013.4261%208.93726%2013.082%209.60718%2013.082C9.9353%2013.082%2010.186%2013.1732%2010.3591%2013.3555C10.5323%2013.5332%2010.6189%2013.7861%2010.6189%2014.1143C10.6189%2014.4378%2010.53%2014.6953%2010.3523%2014.8867C10.1791%2015.0736%209.93075%2015.167%209.60718%2015.167C9.28361%2015.167%209.03524%2015.0758%208.86206%2014.8936C8.68888%2014.7067%208.60229%2014.4469%208.60229%2014.1143Z'%20fill='%239FA0A8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 53%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer
}

.InputMask__attention {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Error%20Icon'%3e%3cpath%20id='icon'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM11%2017V15H13V17H11ZM11%207V13H13V7H11Z'%20fill='%23F31F1F'/%3e%3c/g%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2
}

.InputMask__attention.tooltip {
    padding: 0 35px 0 16px
}

.InputMask__suffix.error {
    margin-right: 32px
}

.InputMask__support {
    display: none;
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    padding: 3px 0 0 10px
}

.InputMask__support.error {
    color: var(--error)
}

.InputMask__input:focus ~ .InputMask__border .InputMask__border_left, .InputMask__input:active ~ .InputMask__border .InputMask__border_left {
    border-color: var(--active);
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__border .InputMask__border_center, .InputMask__input:active ~ .InputMask__border .InputMask__border_center {
    border-top: none;
    border-color: var(--active);
    align-items: flex-start;
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__border .InputMask__border_center .InputMask__label, .InputMask__input:active ~ .InputMask__border .InputMask__border_center .InputMask__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--active);
    top: -11.5px;
    transform: translateY(0)
}

.InputMask__input:focus ~ .InputMask__border .InputMask__border_right, .InputMask__input:active ~ .InputMask__border .InputMask__border_right {
    border-color: var(--active);
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__border.error .InputMask__border_left, .InputMask__input:active ~ .InputMask__border.error .InputMask__border_left {
    border-color: var(--error);
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__border.error .InputMask__border_center, .InputMask__input:active ~ .InputMask__border.error .InputMask__border_center {
    border-top: none;
    border-color: var(--error);
    align-items: flex-start;
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__border.error .InputMask__border_center .InputMask__label, .InputMask__input:active ~ .InputMask__border.error .InputMask__border_center .InputMask__label {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--error);
    top: -11.5px;
    transform: translateY(0)
}

.InputMask__input:focus ~ .InputMask__border.error .InputMask__border_right, .InputMask__input:active ~ .InputMask__border.error .InputMask__border_right {
    border-color: var(--error);
    border-width: 2px
}

.InputMask__input:focus ~ .InputMask__attention, .InputMask__input:active ~ .InputMask__attention {
    display: none
}

.InputMask__input:focus ~ .InputMask__clear, .InputMask__input:active ~ .InputMask__clear {
    opacity: 1
}

.InputMask__input:focus ~ .InputMask__suffix, .InputMask__input:active ~ .InputMask__suffix {
    padding-right: 30px
}

.InputMask__input:focus ~ .InputMask__suffix.error, .InputMask__input:active ~ .InputMask__suffix.error {
    padding-right: 0
}

.SuccessNote {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 360px;
    left: calc(50% - 180px);
    bottom: 12px;
    background: var(--success);
    color: var(--white);
    padding: 14px 20px;
    border-radius: 16px
}

@media (min-width: 1180px) {
    .SuccessNote {
        position: absolute;
        bottom: 0
    }
}

.SuccessNoteTransaction {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 319px;
    height: 48px;
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--white);
    background: var(--primary);
    padding: 17px 22px;
    border-radius: 8px
}

.SuccessNoteTransaction__copy {
    position: relative
}

.SuccessNoteTransaction__copy svg, .SuccessNoteTransaction__copy rect, .SuccessNoteTransaction__copy path {
    fill: var(--white)
}

.SuccessNoteTransaction__success {
    position: absolute;
    top: 10px;
    right: 21px;
    width: 16px;
    height: 16px
}

.PageTitle {
    display: grid;
    grid-template-columns:28px 1fr 28px;
    grid-template-rows:28px;
    gap: 16px;
    align-items: center
}

@media (max-width: 1180px) {
    .PageTitle {
        gap: 8px;
        width: 100%
    }
}

.PageTitle.onlyTitle {
    grid-template-columns:1fr
}

.PageTitle.withBackText {
    grid-template-columns:128px 1fr 28px
}

@media (max-width: 1180px) {
    .PageTitle.withBackText {
        grid-template-columns:28px 1fr 28px
    }
}

@media (max-width: 1180px) {
    .PageTitle.withBackText.withoutClose {
        grid-template-columns:28px 1fr
    }
}

.PageTitle__back, .PageTitle__close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 12
}

.PageTitle__back svg, .PageTitle__back path, .PageTitle__close svg, .PageTitle__close path {
    fill: var(--textPrimary)
}

.PageTitle__back.onlyTitle {
    display: none
}

.PageTitle__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary);
    white-space: unset
}

.PageTitle__title.onlyTitle {
    justify-self: start
}

@media (max-width: 1180px) {
    .PageTitle__title.onlyTitle {
        justify-self: inherit
    }
}

@media (max-width: 1180px) {
    .PageTitle__title {
        font-size: 18px;
        line-height: 120%;
        font-weight: 600;
        text-align: center
    }
}

.PageTitle__back {
    display: grid;
    grid-template-columns:28px 100px;
    align-items: center;
    cursor: pointer
}

@media (max-width: 1180px) {
    .PageTitle__back {
        display: block
    }
}

.PageTitle__back_text {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    text-align: left;
    color: var(--textSecondary)
}

@media (max-width: 1180px) {
    .PageTitle__back_text {
        display: none
    }
}

.GameFormSearch {
    width: 100%
}

.GameFormSearch__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary);
    display: flex;
    justify-content: center;
    margin-top: 16px
}

.GameCard {
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden
}

.GameCard:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    padding-bottom: 115.5963302752%
}

@media (max-width: 1180px) {
    .GameCard {
        border-radius: 8px
    }
}

.GameCard__cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0
}

.GameCard__cover img {
    width: 100%
}

.GameCard__name {
    position: absolute;
    width: 90%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%);
    text-align: center;
    top: 58%;
    height: 40%
}

.GameCard__name span {
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    color: var(--white)
}

@media (max-width: 1180px) {
    .GameCard__name span {
        font-size: 12px;
        line-height: 16px;
        font-weight: 700
    }
}

.GameCard__loading {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2
}

.GameCard__play {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gameCardGradient);
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

@media (max-width: 1180px) {
    .GameCard__play {
        padding: 8px
    }
}

.GameCard__play_btn {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    width: 100%;
    height: 51px;
    color: var(--white);
    cursor: pointer
}

@media (max-width: 1180px) {
    .GameCard__play_btn {
        font-size: 10px;
        line-height: 130%;
        font-weight: 600;
        height: 32px
    }
}

.GameCard__play_real {
    background: var(--primary);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    margin-bottom: 8px
}

.GameCard__play_real svg {
    margin-left: 4px
}

.GameCard__play_demo {
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--white)
}

.GameList {
    position: relative
}

.GameList__list {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(188px, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 16px;
    row-gap: 16px
}

@media (max-width: 1370px) {
    .GameList__list {
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 1180px) {
    .GameList__list {
        column-gap: 8px;
        row-gap: 16px;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 768px) {
    .GameList__list {
        grid-template-columns:repeat(auto-fill, minmax(107px, 1fr))
    }
}

.GameList__list_tournament {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(208px, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 16px;
    row-gap: 16px
}

@media (max-width: 1370px) {
    .GameList__list_tournament {
        grid-template-columns:repeat(auto-fill, minmax(208px, 1fr))
    }
}

@media (max-width: 1180px) {
    .GameList__list_tournament {
        column-gap: 8px;
        row-gap: 16px;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 768px) {
    .GameList__list_tournament {
        grid-template-columns:repeat(auto-fill, minmax(107px, 1fr))
    }
}

.GameList__more {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px
}

.GameList__list_empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 104px
}

@media (max-width: 1180px) {
    .GameList__list_empty {
        margin-top: 80px
    }
}

@media (max-width: 576px) {
    .GameList__list_empty {
        margin-top: 58px
    }
}

.GameList__list_empty_icon {
    margin-bottom: 12px
}

.GameList__list_empty_title {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400
}

@media (max-width: 1180px) {
    .GameList__list_empty_title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400
    }
}

.InputPhone {
    position: relative
}

.InputPhone__icon {
    overflow: hidden;
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 17px;
    display: flex;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .15))
}

.InputPhone__countries {
    overflow: auto;
    position: absolute;
    z-index: 2;
    top: 100%;
    width: 100%;
    max-height: 500px;
    background: var(--white);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, transform .3s;
    transform: translateY(10px)
}

.InputPhone__countries.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

@media (max-width: 1024px) {
    .InputPhone__countries {
        position: static;
        max-height: 100%;
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }
}

.InputPhone__countries_header {
    position: sticky;
    z-index: 1;
    top: 0;
    background: var(--white);
    padding: 16px 16px 8px
}

.InputPhone__countries_title {
    color: var(--grey);
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
    text-transform: uppercase;
    margin-bottom: 12px
}

.InputPhone__countries_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 130%;
    cursor: pointer
}

.InputPhone__countries_item_icon {
    overflow: hidden;
    display: flex;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .15))
}

.InputPhone__countries_item_icon img, .InputPhone__countries_item_icon svg {
    width: 100%;
    height: 100%
}

.InputPhone .InputMask__name {
    padding-left: 48px
}

.InputPhone .InputMask__border_center {
    padding-left: 32px
}

.InputPhone .InputMask__border.withValue .InputMask__border_center {
    padding-left: 0
}

.InputPhone .InputMask__input:active ~ .InputMask__border .InputMask__border_center, .InputPhone .InputMask__input:focus ~ .InputMask__border .InputMask__border_center {
    padding-left: 0
}

.PersonalDataBlock {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 20px
}

@media (max-width: 1180px) {
    .PersonalDataBlock {
        background: none;
        padding: 0 0 80px
    }
}

.PersonalDataBlock-data {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: 16px;
    margin-top: 22px
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data {
        display: flex;
        flex-flow: column;
        align-items: center;
        margin-top: 12px
    }
}

.PersonalDataBlock-data__id {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__id {
        order: 1
    }
}

.PersonalDataBlock-data__name {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__name {
        order: 2
    }
}

.PersonalDataBlock-data__country {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__country {
        order: 6
    }
}

.PersonalDataBlock-data__phone {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__phone {
        order: 7
    }
}

.PersonalDataBlock-data__email {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__email {
        order: 4
    }
}

.PersonalDataBlock-data__password {
    width: 100% !important
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__password {
        order: 5
    }
}

.PersonalDataBlock-data__birthday {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__birthday {
        order: 3
    }
}

.PersonalDataBlock-data__currency {
    width: 100%
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__currency {
        order: 8
    }
}

.PersonalDataBlock-data__currency__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    display: flex;
    margin: 0 0 4px 12px
}

.PersonalDataBlock-data__email-btn {
    margin-top: 8px
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__email-btn {
        width: 303px;
        order: 4
    }
}

.PersonalDataBlock-data__submit {
    display: none
}

@media (max-width: 1180px) {
    .PersonalDataBlock-data__submit {
        display: flex;
        width: 100%;
        order: 9;
        margin-top: 20px
    }
}

.MobileNavigationItem {
    display: grid;
    align-items: center;
    grid-template-columns:48px 1fr;
    grid-auto-rows: 44px;
    gap: 8px;
    text-decoration: none;
    color: var(--textPrimary);
    position: relative
}

.MobileNavigationItem__icon {
    width: 28px;
    height: 28px;
    margin-left: 12px
}

.MobileNavigationItem__icon svg {
    width: 100%;
    height: 100%
}

.MobileNavigationItem__icon svg > path {
    fill: var(--mobile-menu-item-icon-color)
}

.MobileNavigationItem__icon_custom svg, .MobileNavigationItem__icon_custom path, .MobileNavigationItem__icon_custom rect {
    fill: var(--grey)
}

.MobileNavigationItem__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--lightGrey);
    padding: 8px 8px 8px 0
}

.MobileNavigationItem__name {
    text-decoration: none;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    display: flex;
    align-items: center
}

.MobileNavigationItem__name .NotificationCircle {
    left: 12px
}

.MobileNavigationItem:hover {
    text-decoration: none
}

.MobileNavigationItem__arrow {
    transform: rotate(180deg);
    width: 28px;
    height: 28px
}

.MobileNavigationItem__arrow svg {
    width: 100%;
    height: 100%
}

.MobileNavigationItem__arrow path {
    fill: var(--grey)
}

.MobileNavigationItem:first-child .MobileNavigationItem__content {
    border: none
}

.MobileMenu {
    background: var(--mobile-menu-background);
    box-shadow: 0 3px 8px -1px #3232470d;
    box-shadow: 0 0 1px #0c1a4b3d;
    border-radius: 12px
}

.InviteFriendLink {
    display: flex;
    width: 100%;
    background-color: var(--bgDark);
    border-radius: 8px;
    background-image: url(/static/invite_coins-FstVoZtu.svg);
    background-repeat: no-repeat;
    background-position-x: right;
    height: 169px
}

.InviteFriendLink-block {
    display: flex;
    flex-flow: column;
    padding: 16px 36px 16px 16px
}

.InviteFriendLink-block__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

.InviteFriendLink-block__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 16px
}

.InviteFriendLink-block-ref {
    display: flex;
    justify-content: space-between;
    width: 381px;
    height: 44px;
    padding: 10px 4px 10px 16px;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--lightGrey);
    background: var(--white);
    margin-top: 30px
}

.InviteFriendLink-block-ref_banger {
    background: transparent
}

.InviteFriendLink-block-ref__link {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary)
}

.InviteFriendLink-block-ref__btn {
    height: 35px;
    min-width: 122px;
    max-width: 122px
}

.InviteFriendLink__img {
    width: 100%
}

.InviteFriendBonus {
    display: flex;
    flex-flow: column;
    background-color: var(--bgDark);
    border-radius: 8px;
    width: 100%;
    gap: 58px;
    padding: 16px
}

@media (max-width: 1180px) {
    .InviteFriendBonus {
        width: 100%;
        padding: 12px 16px 16px;
        align-items: flex-start;
        gap: 16px
    }
}

.InviteFriendBonus-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.InviteFriendBonus-block-title {
    display: flex;
    align-items: center
}

.InviteFriendBonus-block-title__text {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .InviteFriendBonus-block-title__text {
        font-size: 14px;
        line-height: 130%;
        font-weight: 600
    }
}

.InviteFriendBonus-block__amount {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.InviteFriendBonus-btn {
    width: 100%;
    display: flex;
    justify-content: center
}

.InviteFriendEmpty {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: end;
    margin-top: 32px
}

@media (max-width: 1180px) {
    .InviteFriendEmpty {
        align-items: center
    }
}

.InviteFriendEmpty__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary);
    display: flex;
    align-self: flex-start
}

@media (max-width: 1180px) {
    .InviteFriendEmpty__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600
    }
}

.InviteFriendEmpty__img {
    display: flex;
    height: 295px;
    margin-top: 24px
}

@media (max-width: 1180px) {
    .InviteFriendEmpty__img {
        width: 100%;
        height: 100%
    }
}

.InviteFriendRulesItem {
    position: relative;
    width: 100%
}

.InviteFriendRulesItem__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .InviteFriendRulesItem__title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 600
    }
}

.InviteFriendRulesItem__btn {
    display: flex;
    justify-content: space-between;
    height: 44px;
    align-items: center;
    background: transparent;
    border: none;
    border-top: 1px solid var(--selectBg);
    color: var(--textPrimary);
    text-align: left;
    width: 100%;
    padding: 0;
    cursor: pointer
}

.InviteFriendRulesItem__btn.active {
    border-bottom: none
}

.InviteFriendRulesItem__btn:nth-last-child {
    border-bottom: none
}

.InviteFriendRulesItem__arrow {
    display: flex;
    align-items: center;
    transition: all .25s
}

.InviteFriendRulesItem__arrow.active {
    transform: rotate(180deg)
}

.InviteFriendRulesItem-content {
    overflow: hidden;
    height: auto
}

.InviteFriendRulesItem-content-list {
    padding-bottom: 20px
}

.InviteFriendRulesItem-content-list__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400
}

@media (max-width: 1180px) {
    .InviteFriendRulesItem-content-list__desc {
        font-size: 12px;
        line-height: 120%;
        font-weight: 400
    }
}

.InviteFriendRulesItem-nested__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    margin: 8px 0
}

@media (max-width: 1180px) {
    .InviteFriendRulesItem-nested__title {
        font-size: 12px;
        line-height: 130%;
        font-weight: 600
    }
}

.InviteFriendRules {
    position: relative;
    width: 100%;
    margin-top: 32px
}

.InviteFriendRules.active {
    border: 1px solid var(--selectBg);
    border-radius: 8px;
    padding: 0 16px
}

.InviteFriendRules__btn {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    height: 44px;
    align-items: center;
    background: transparent;
    border: 1px solid var(--selectBg);
    border-radius: 8px;
    color: var(--textPrimary);
    text-align: left;
    width: 100%;
    cursor: pointer
}

.InviteFriendRules__btn.active {
    border: none;
    padding: 0
}

.InviteFriendRules__title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .InviteFriendRules__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600
    }
}

.InviteFriendRules__arrow {
    display: flex;
    align-items: center;
    transition: transform .3s ease
}

.InviteFriendRules__arrow.active {
    transform: rotate(180deg)
}

.InviteFriendRules__content {
    overflow: hidden;
    height: auto;
    margin-top: 16px
}

.InviteFriendRules__content.active {
    border: 1px solid var(--selectBg);
    border-radius: 8px
}

.InviteFriendBanner {
    width: 100%;
    position: relative
}

@media (max-width: 1180px) {
    .InviteFriendBanner {
        padding-top: 44px
    }
}

.InviteFriendBanner-img {
    width: 100%;
    margin-top: 24px;
    border-radius: 8px
}

@media (max-width: 1180px) {
    .InviteFriendBanner-img {
        margin-top: 8px
    }
}

.InviteFriendBanner-banner {
    position: absolute;
    top: 64px;
    left: 40px;
    display: flex;
    flex-flow: column;
    gap: 16px
}

@media (max-width: 1180px) {
    .InviteFriendBanner-banner {
        top: 65px;
        left: 16px;
        gap: 4px
    }
}

.InviteFriendBanner-banner__title {
    font-size: 48px;
    line-height: 110%;
    font-weight: 800;
    font-family: Unbounded;
    color: var(--white);
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .InviteFriendBanner-banner__title {
        font-size: 18px;
        line-height: 25px;
        font-weight: 800;
        color: var(--textPrimary);
        font-family: Unbounded
    }
}

.InviteFriendBanner-banner__desc {
    font-size: 20px;
    line-height: 120%;
    font-weight: 400;
    color: var(--white)
}

@media (max-width: 1180px) {
    .InviteFriendBanner-banner__desc {
        font-size: 12px;
        line-height: 120%;
        font-weight: 400;
        color: var(--textPrimary);
        width: 174px
    }
}

.InviteFriendLinkMob__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.InviteFriendLinkMob__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 8px
}

.InviteFriendLinkMob__btn {
    margin-top: 28px
}

.mobile-pagination {
    display: flex;
    margin-top: 16px
}

.mobile-pagination .pagination-link__prev, .mobile-pagination .pagination-link__next {
    display: flex;
    width: 120px;
    height: 36px;
    padding: 10px 8px 10px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bgDark);
    border: none
}

.mobile-pagination .pagination-link__prev svg, .mobile-pagination .pagination-link__prev path, .mobile-pagination .pagination-link__prev rect, .mobile-pagination .pagination-link__next svg, .mobile-pagination .pagination-link__next path, .mobile-pagination .pagination-link__next rect {
    fill: var(--textPrimary)
}

.mobile-pagination .pagination-arrow {
    width: 28px;
    height: 28px
}

.mobile-pagination .pagination-arrow_disabled {
    opacity: .34
}

.mobile-pagination .pagination-arrow_next {
    transform: rotate(180deg)
}

.mobile-pagination .pagination-arrow_next svg, .mobile-pagination .pagination-arrow_next path, .mobile-pagination .pagination-arrow_next rect {
    fill: var(--textPrimary)
}

.mobile-pagination .pagination-link__text {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary)
}

.mobile-pagination .pagination-page-indicator {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    flex-grow: 1;
    text-align: center;
    padding: 8px
}

.mobile-pagination .pagination-page-indicator__current {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.mobile-pagination .pagination-page-indicator__last {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600
}

.mobile-pagination .pagination-page-indicator__last.active {
    color: var(--textPrimary)
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 16px
}

.pagination {
    display: flex;
    align-items: center;
    list-style-type: none;
    height: 32px;
    padding-left: 0;
    border-radius: 4px;
    overflow: hidden
}

.page-item {
    margin-top: 0
}

.page-link {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 0;
    height: 32px;
    padding: 10px;
    justify-content: center;
    background-color: var(--bgDark);
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.page-link:hover {
    text-decoration: none;
    color: inherit
}

.break {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 0;
    height: 32px;
    justify-content: center;
    background-color: var(--bgDark);
    color: var(--textSecondary)
}

.break:hover {
    color: var(--textPrimary);
    text-decoration: none
}

.next {
    margin-top: 0
}

.pagination-link__prev, .pagination-link__next {
    display: flex;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--bgDark);
    border: none
}

.pagination-link__prev svg, .pagination-link__prev path, .pagination-link__prev rect, .pagination-link__next svg, .pagination-link__next path, .pagination-link__next rect {
    fill: var(--textPrimary)
}

.pagination-arrow {
    width: 28px;
    height: 28px
}

.pagination-arrow_disabled {
    opacity: .34
}

.pagination-arrow_next {
    transform: rotate(180deg)
}

.pagination-arrow_next svg, .pagination-arrow_next path, .pagination-arrow_next rect {
    fill: var(--textPrimary)
}

.pagination-link__prev {
    margin-left: 12px
}

@media (max-width: 1180px) {
    .pagination-link__prev {
        margin-left: 0
    }
}

.pagination-link__next {
    margin-left: 4px
}

@media (max-width: 1180px) {
    .pagination-link__next {
        margin-left: 0
    }
}

.active {
    color: var(--textPrimary)
}

.InviteFriendTable {
    margin-top: 32px;
    width: 100%
}

@media (min-width: 1180px) {
    .InviteFriendTable {
        margin-top: 34px
    }
}

.InviteFriendTable__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.InviteFriendTable .table-container {
    height: 219px;
    margin-top: 12px
}

.InviteFriendTable table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed
}

.InviteFriendTable table th, .InviteFriendTable table td {
    text-align: left
}

.InviteFriendTable table th:first-child, .InviteFriendTable table td:first-child {
    text-align: start
}

.InviteFriendTable table th:last-child, .InviteFriendTable table td:last-child {
    text-align: end
}

.InviteFriendTable table th:nth-child(2), .InviteFriendTable table td:nth-child(2) {
    text-align: center
}

.InviteFriendTable table .InviteFriendTable-th, .InviteFriendTable table .InviteFriendTable-tr {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.InviteFriendTable table .InviteFriendTable-th {
    height: 34px;
    font-size: 14px;
    color: var(--textSecondary);
    padding: 8px 16px;
    border-bottom: 1px solid var(--lightGrey);
    font-size: 12px;
    line-height: 120%;
    font-weight: 400
}

.InviteFriendTable table .InviteFriendTable-tr {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    height: 37px;
    font-size: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--lightGrey)
}

.InviteFriendTable table .InviteFriendTable-tr__value {
    width: 80px
}

.InviteFriendTable tbody, .InviteFriendTable thead {
    border: none
}

.SkeletonInviteLink {
    width: 100%;
    height: 219px;
    background: var(--bannerSkeletonBg);
    border-radius: 8px;
    padding: 16px
}

.SkeletonInviteLink__subtitle {
    margin-top: 16px
}

.SkeletonInviteLink__desc {
    margin-top: 30px
}

.SkeletonInviteLink__mobile {
    display: flex;
    flex-flow: column;
    gap: 11px
}

.SkeletonInviteTable {
    width: 100%;
    border-radius: 8px;
    margin-top: 34px;
    display: flex;
    flex-flow: column
}

.SkeletonInviteTable__subtitle {
    margin-top: 8px
}

.SkeletonInviteTable-desc {
    margin-top: 16px;
    display: flex;
    width: 100%;
    justify-content: end
}

.SkeletonInviteTable-desc__left {
    margin-left: 12px
}

.SkeletonInviteTable-desc__right {
    margin-left: 4px
}

.SkeletonInviteTable-mobile {
    display: flex;
    flex-flow: column;
    width: 100%;
    margin-top: 34px
}

.SkeletonInviteTable-mobile__header {
    width: 100%;
    margin-top: 12px
}

.SkeletonInviteTable-mobile-table {
    width: 100%;
    display: flex;
    flex-flow: column;
    margin-top: 4px
}

.SkeletonInviteTable-mobile-paginator {
    width: 100%;
    display: flex;
    margin-top: 16px;
    justify-content: space-between
}

.SkeletonInviteTable-mobile-paginator__arrow {
    display: flex
}

.InviteFriend {
    width: 100%;
    position: relative
}

@media (max-width: 1180px) {
    .InviteFriend__header {
        position: fixed;
        display: flex;
        width: 100%;
        height: 44px;
        left: 0;
        z-index: 20;
        padding: 8px;
        background: var(--dialogBackground)
    }
}

.InviteFriend__header.border {
    box-shadow: 0 1px 1px #0c1a4b26, 0 3px 8px -1px #3232470d
}

.InviteFriend-content {
    width: 100%;
    display: flex;
    gap: 16px
}

.InviteFriend-content-main {
    display: flex;
    flex-flow: column;
    width: 100%
}

.InviteFriend-content-main-data {
    display: flex;
    height: 169px;
    width: 100%;
    margin-top: 32px;
    gap: 16px
}

@media (max-width: 1180px) {
    .InviteFriend-content-main-data {
        height: 100%;
        display: flex;
        flex-flow: column;
        margin-top: 24px;
        gap: 24px
    }
}

.InviteFriend-content-main-note {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 24px;
    display: flex;
    justify-content: center
}

@media (max-width: 1180px) {
    .InviteFriend-content-main-note {
        bottom: 96px
    }
}

.InviteFriend-content-main-note__text {
    width: 175px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--bg-notify);
    box-shadow: 0 4px 8px #00000026;
    text-align: center;
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--contast-text)
}

.InviteFriend-content-main__empty {
    margin-top: 32px
}

.InviteFriend-content-right {
    display: flex;
    min-width: 357px;
    height: 169px;
    margin-top: 32px
}

@media (max-width: 1180px) {
    .InviteFriend-content-right {
        height: 100%;
        min-width: auto;
        width: 100%
    }
}

.LoyaltyBoosterButton {
    padding: 6px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 4px;
    border-radius: 8px;
    border: none;
    background: var(--orange-gradient);
    box-shadow: 0 4px 8px #ff4a1926;
    font-size: 14px;
    line-height: 130%;
    font-weight: 500;
    color: var(--white)
}

.LoyaltyBoosterButton:disabled {
    cursor: auto
}

.LoyaltyBoosterButton__icon_inactive path {
    fill: var(--grey)
}

.LoyaltyBoosterButton_next {
    background: transparent;
    border: 1px dashed rgb(222, 222, 222);
    color: var(--grey);
    font-size: 14px;
    line-height: 130%;
    font-weight: 500;
    cursor: auto;
    box-shadow: none
}

.LoyaltyBoosterButton__text {
    font-size: 14px;
    line-height: 130%;
    font-weight: 500;
    color: var(--white)
}

.LoyaltyBoosterButton__text_next {
    color: var(--black)
}

.TimerProgress {
    height: 2px;
    width: 100%;
    background-color: var(--light-grey);
    border-radius: 20px
}

.TimerProgress__progress {
    width: 0;
    height: 2px;
    background-color: var(--grey);
    border-radius: 20px
}

.TimerProgressActive {
    animation-name: progressTime;
    animation-timing-function: linear;
    animation-play-state: running
}

.TimerProgressFinished {
    width: 100% !important
}

@keyframes progressTime {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

.AccountNavigationBlock {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

.ProfileHeader {
    display: flex;
    width: 100%;
    align-items: center
}

@media (max-width: 1180px) {
    .ProfileHeader {
        height: 44px;
        background: inherit;
        padding: 8px 0;
        justify-content: center
    }
}

.ProfileHeader_account {
    padding: 0;
    margin-bottom: 0;
    background: none;
    height: inherit
}

@media (max-width: 1180px) {
    .ProfileHeader_account {
        display: flex;
        border: 0;
        cursor: pointer
    }
}

.ProfileHeader-btn {
    display: none
}

@media (max-width: 1180px) {
    .ProfileHeader-btn {
        display: flex;
        border: 0;
        cursor: pointer;
        background: transparent;
        padding: 0
    }
}

.ProfileHeader-btn__arrow {
    border: 0;
    cursor: pointer;
    background: inherit
}

@media (max-width: 1180px) {
    .ProfileHeader-btn__arrow_account {
        width: 20px
    }
}

.ProfileHeader__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .ProfileHeader__title {
        font-size: 18px;
        line-height: 120%;
        font-weight: 600;
        align-items: center
    }
}

@media (max-width: 1180px) {
    .ProfileHeader__title_account {
        font-size: 18px;
        line-height: 120%;
        font-weight: 600
    }
}

.AccountPersonalData {
    position: relative;
    display: flex;
    flex-direction: column
}

@media (max-width: 1180px) {
    .AccountPersonalData {
        background: none;
        border-radius: inherit;
        box-shadow: none;
        padding: 0
    }
}

.AccountPersonalData-data {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap: 16px;
    margin-top: 22px
}

@media (max-width: 1180px) {
    .AccountPersonalData-data {
        display: flex;
        flex-flow: column;
        align-items: center;
        background: var(--white);
        border-radius: 16px;
        box-shadow: 0 2px 3px #00000026;
        padding: 12px 16px;
        margin-top: 12px
    }
}

.AccountPersonalData-data__id {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__id {
        order: 1
    }
}

.AccountPersonalData-data__name {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__name {
        order: 2
    }
}

.AccountPersonalData-data__country {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__country {
        order: 5
    }
}

.AccountPersonalData-data__email {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__email {
        order: 4
    }
}

.AccountPersonalData-data__birthday {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__birthday {
        order: 3
    }
}

.AccountPersonalData-data__currency {
    width: 100%
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__currency {
        order: 6
    }
}

.AccountPersonalData-data__currency__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    display: flex;
    margin: 0 0 4px 12px
}

@media (max-width: 1180px) {
    .AccountPersonalData-data__submit {
        display: flex;
        width: 303px;
        order: 8;
        margin-top: 20px
    }
}

.TransactionBlockTab {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    align-items: center;
    border-radius: 8px;
    width: 432px;
    padding: 4px;
    height: 52px;
    background-color: var(--bgGrey)
}

@media (max-width: 1180px) {
    .TransactionBlockTab {
        width: 100%;
        height: 32px;
        padding: 2px;
        margin: 8px 0 0
    }
}

.TransactionBlockTab_button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    border: none;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    overflow: visible;
    height: 100%;
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .TransactionBlockTab_button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400
    }
}

.TransactionBlockTab_button_active {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--active);
    color: var(--white);
    z-index: 1;
    height: 100%;
    width: 100%;
    border-radius: 8px
}

@media (max-width: 1180px) {
    .TransactionBlockTab_button_active {
        height: 28px
    }
}

.TransactionListHead {
    display: grid;
    width: 100%;
    grid-template-columns:minmax(280px, 1fr) minmax(150px, 1fr) minmax(110px, 1fr) minmax(100px, 1fr) minmax(70px, 1fr) 28px;
    column-gap: 8px;
    padding: 16px 12px
}

@media (max-width: 1180px) {
    .TransactionListHead {
        display: none
    }
}

.TransactionListHead__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.TransactionListItemDesktop {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--transactionBorder);
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    overflow: hidden
}

.TransactionListItemDesktop__main, .TransactionListItemDesktop__additional {
    display: grid;
    width: 100%;
    grid-template-columns:minmax(280px, 1fr) minmax(150px, 1fr) minmax(110px, 1fr) minmax(100px, 1fr) minmax(70px, 1fr) 28px;
    align-items: center;
    column-gap: 8px
}

.TransactionListItemDesktop__main {
    background: var(--bg);
    cursor: pointer
}

.TransactionListItemDesktop__logo {
    width: 60px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center
}

.TransactionListItemDesktop__logo svg {
    height: 100%;
    width: 100%
}

.TransactionListItemDesktop__method {
    display: grid;
    grid-template-columns:65px 1fr;
    gap: 5px
}

.TransactionListItemDesktop__method_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.TransactionListItemDesktop__amount {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--primary)
}

.TransactionListItemDesktop__status.success {
    color: var(--success)
}

.TransactionListItemDesktop__status.rejected, .TransactionListItemDesktop__status.error, .TransactionListItemDesktop__status.canceled {
    color: var(--error)
}

.TransactionListItemDesktop__status.pending, .TransactionListItemDesktop__status.request {
    color: var(--warning)
}

.TransactionListItemDesktop__arrow {
    display: flex;
    align-items: center;
    justify-content: center
}

.TransactionListItemDesktop__arrow svg, .TransactionListItemDesktop__arrow path {
    fill: var(--grey)
}

.TransactionListItemDesktop__additional {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400
}

.TransactionListItemDesktop__id {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.TransactionDescription {
    display: flex;
    flex-flow: column;
    gap: 4px;
    margin-top: 9px
}

.TransactionDescription__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    font-size: 10px;
    line-height: 140%;
    font-weight: 400;
    color: var(--textPrimary)
}

.TransactionDescription__item-id {
    max-width: 141px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer
}

.TransactionListItemMobile {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--bgGrey);
    display: flex;
    flex-flow: column;
    padding: 8px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.TransactionListItemMobile-item {
    display: flex;
    justify-content: space-between
}

.TransactionListItemMobile-item-icon {
    display: flex;
    justify-content: center;
    align-items: center
}

.TransactionListItemMobile-item-icon img {
    width: 60px;
    height: 42px
}

.TransactionListItemMobile-item-method {
    display: grid;
    grid-template-columns:65px 1fr;
    gap: 5px;
    min-width: 141px
}

.TransactionListItemMobile-item-method-block {
    display: flex;
    flex-flow: column;
    justify-content: space-between
}

.TransactionListItemMobile-item-method-block__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    white-space: nowrap
}

.TransactionListItemMobile-item-method-block__type {
    font-size: 10px;
    line-height: 140%;
    font-weight: 400;
    color: var(--textSecondary);
    white-space: nowrap
}

.TransactionListItemMobile-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 141px
}

.TransactionListItemMobile-item-info-block {
    display: flex;
    flex-flow: column
}

.TransactionListItemMobile-item-info-block__amount {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active);
    display: flex
}

.TransactionListItemMobile-item-info-block__button {
    display: flex;
    justify-content: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transform: rotate(-90deg)
}

.TransactionListItemMobile-item-info-block__button path {
    fill: var(--textSecondary)
}

.TransactionListItemMobile-list {
    display: flex;
    flex-flow: column
}

.TransactionListItemMobile__status.success {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--success)
}

.TransactionListItemMobile__status.error {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--error)
}

.TransactionListItemMobile__status.pending {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--warning);
    display: flex;
    justify-content: flex-end;
    margin-top: 4px
}

.arrowDown {
    transition: .3s ease-out
}

.arrowUp {
    transition: .3s ease-out;
    transform: rotate(90deg)
}

.TransactionList {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    gap: 16px
}

@media (max-width: 1180px) {
    .TransactionList {
        margin-top: 128px
    }
}

.InviteSortDesktop {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center
}

.InviteSortDesktop__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

@media (max-width: 1180px) {
    .InviteSortDesktop__title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400
    }
}

.InviteSortDesktop__sort {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .InviteSortDesktop__sort {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400
    }
}

.InviteSortDesktop__btn {
    display: flex;
    padding: 0 16px;
    height: 44px;
    align-items: center;
    background: transparent;
    color: var(--textPrimary);
    text-align: left;
    column-gap: 4px;
    border: none;
    cursor: pointer
}

.InviteSortDesktop__btn.active {
    border-color: var(--primary)
}

@media (max-width: 1180px) {
    .InviteSortDesktop__btn {
        width: 100%;
        justify-content: space-between
    }
}

.InviteSortDesktop__arrow {
    display: flex;
    align-items: center;
    justify-content: center
}

.InviteSortDesktop__icon svg, .InviteSortDesktop__icon path {
    stroke: var(--white)
}

.InviteSortDesktop__content {
    overflow: hidden;
    position: absolute;
    top: 36px;
    display: flex;
    width: 270px;
    padding: 8px 0;
    flex-direction: column;
    z-index: 2;
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 0 8px #00000026
}

.InviteSortDesktop__item {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    display: flex;
    align-items: center;
    height: 32px;
    padding: 10px 8px;
    cursor: pointer
}

.InviteSortDesktop__item:hover {
    background-color: var(--bgGrey)
}

.InviteSortDesktop__item.active {
    justify-content: space-between;
    color: var(--primary)
}

.TransactionBlock {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative
}

@media (max-width: 1180px) {
    .TransactionBlock {
        height: 100vh
    }
}

.TransactionBlock-header__block {
    display: flex;
    justify-content: space-between
}

@media (max-width: 1180px) {
    .TransactionBlock-header__block {
        display: flow;
        flex-flow: column
    }
}

@media (max-width: 1180px) {
    .TransactionBlock-header {
        display: flex;
        width: 100%;
        flex-direction: column;
        position: fixed;
        left: 0;
        padding: 8px 12px;
        background: var(--dialogBackground);
        z-index: 2
    }
}

.TransactionBlock-header.border {
    box-shadow: 0 1px 1px #0c1a4b26, 0 3px 8px -1px #3232470d
}

@media (max-width: 1180px) {
    .TransactionBlock__content {
        flex: 1
    }
}

.GameHistoryEmpty__block {
    display: flex;
    flex-direction: column;
    align-items: center
}

.GameHistoryEmpty__image {
    margin-top: 26px;
    width: 295px;
    height: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px
}

@media (max-width: 1180px) {
    .GameHistoryEmpty__image {
        margin-top: 70px
    }
}

@media (max-width: 576px) {
    .GameHistoryEmpty__image {
        width: 247px;
        height: 245px;
        margin-bottom: 0
    }
}

.GameHistoryEmpty__image-icon {
    position: relative;
    z-index: 11;
    top: 20px;
    left: -50px
}

@media (max-width: 576px) {
    .GameHistoryEmpty__image-icon {
        left: -40px;
        width: 100%;
        height: 100%
    }
}

.GameHistoryEmpty__image-wrapper {
    position: relative
}

@media (max-width: 576px) {
    .GameHistoryEmpty__image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.GameHistoryEmpty__image-circle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

@media (max-width: 576px) {
    .GameHistoryEmpty__image-circle {
        top: -10px
    }

    .GameHistoryEmpty__image-circle img {
        width: 250px
    }
}

.GameHistoryEmpty__title {
    text-align: center;
    font-size: 16px;
    line-height: 130%;
    font-weight: 400
}

@media (max-width: 1180px) {
    .GameHistoryEmpty__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 400
    }
}

.GameHistoryEmpty__text {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    text-align: center;
    max-width: 253px;
    margin-top: 8px;
    color: var(--textSecondary);
    white-space: nowrap;
    display: flex;
    justify-content: center
}

.GameHistoryEmpty__btn {
    margin: 28px auto 70px;
    width: 100%;
    max-width: 357px
}

.WelcomeBonusCardFront {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bgBonus);
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0)
}

.WelcomeBonusCardFront-header {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    height: 44px;
    background: var(--headerBonus);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px
}

.WelcomeBonusCardFront-header__description {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.WelcomeBonusCardFront-block {
    display: flex;
    flex-flow: column;
    padding: 12px 16px 16px
}

.WelcomeBonusCardFront-block-info {
    display: flex;
    gap: 16px
}

.WelcomeBonusCardFront-block-info__img {
    width: 88px;
    height: 120px
}

.WelcomeBonusCardFront-block-info-content {
    display: flex;
    flex-flow: column
}

.WelcomeBonusCardFront-block-info-content-title__bonus {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.WelcomeBonusCardFront-block-info-content-title__spins {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.WelcomeBonusCardFront-block-info-content__description {
    display: flex;
    flex-flow: column;
    width: 195px;
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.WelcomeBonusCardFront-block-info-content-time {
    display: flex;
    flex-flow: column;
    margin-top: 4px;
    gap: 4px
}

.WelcomeBonusCardFront-block-info-content-time__name {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.WelcomeBonusCardFront-block__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px
}

.WelcomeBonusCardItem {
    display: flex;
    justify-content: space-between
}

.WelcomeBonusCardItem__name {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.WelcomeBonusCardItem__value {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.WelcomeBonusCardBack {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bgBonus);
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.WelcomeBonusCardBack-header {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--headerBonus);
    border-radius: 8px 8px 0 0
}

.WelcomeBonusCardBack-header__close {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-left: 10px
}

.WelcomeBonusCardBack-header__close svg, .WelcomeBonusCardBack-header__close path {
    fill: var(--textSecondary)
}

.WelcomeBonusCardBack-content {
    padding: 12px 16px 16px
}

.WelcomeBonusCardBack-content__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.WelcomeBonusCardBack-content-list {
    display: flex;
    flex-flow: column;
    margin-top: 12px;
    gap: 8px
}

.WelcomeBonusCardBack-content-list__attribute {
    display: flex;
    justify-content: space-between
}

.WelcomeBonusCardBack-content-list__attribute_name {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.WelcomeBonusCardBack-content-list__attribute_value {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.WelcomeBonusCardBack-content__info {
    font-size: 10px;
    line-height: 140%;
    font-weight: 400;
    margin-top: 12px;
    color: var(--textPrimary);
    opacity: .8;
    width: 100%
}

.WelcomeBonusCardContainer {
    width: 343px;
    -webkit-perspective: 1200;
    perspective: 1200;
    -moz-transform: perspective(1200px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.WelcomeBonusCardContainer.hidden {
    display: none
}

.WelcomeBonusCardWrapper {
    position: relative;
    width: 343px;
    height: 268px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .7s linear;
    -moz-transition: .7s linear;
    -o-transition: .7s linear;
    transition: .7s linear
}

.WelcomeBonusCardWrapper.toggle {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.DescriptionNominal {
    display: flex;
    flex-flow: column;
    padding: 8px 16px;
    gap: 16px;
    justify-content: flex-start
}

.DescriptionNominal-block {
    display: flex;
    flex-flow: column;
    gap: 3px
}

.DescriptionNominal-block__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.DescriptionNominal-block__text {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.DescriptionNominal__list {
    display: flex;
    flex-flow: column;
    gap: 8px
}

.DescriptionSpin {
    display: flex;
    flex-flow: column;
    padding: 8px 16px;
    gap: 16px;
    justify-content: flex-start
}

.DescriptionSpin-block__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.DescriptionSpin-block__text {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.DescriptionSpin__list {
    display: flex;
    flex-flow: column;
    gap: 8px
}

.DescriptionReward {
    display: flex;
    flex-flow: column;
    padding: 8px 16px;
    gap: 16px;
    justify-content: flex-start
}

.DescriptionReward-block {
    display: flex;
    flex-flow: column;
    gap: 3px
}

.DescriptionReward-block__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.DescriptionReward-block__text {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.DescriptionReward__list {
    display: flex;
    flex-flow: column;
    gap: 8px
}

.DescriptionFreeSpins {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.DescriptionFreeSpins__inner {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.DescriptionFreeSpins__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400
}

.DescriptionFreeSpins__value, .DescriptionFreeSpins__played {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--primary)
}

.DescriptionFreeSpins__danger {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--error)
}

.BonusCardBack {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bgBonus);
    border-radius: 8px;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.BonusCardBack-header {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--headerBonus);
    border-radius: 8px 8px 0 0
}

.BonusCardBack-header__close {
    width: 28px;
    height: 28px;
    cursor: pointer;
    margin-left: 10px
}

.BonusCardBack-header__close svg, .BonusCardBack-header__close path {
    fill: var(--textSecondary)
}

.BonusItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px
}

.BonusItem__name {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    opacity: .8
}

.BonusItem__value {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active);
    white-space: nowrap
}

.BonusItem__freeSpins {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.BonusCardInfo {
    display: grid;
    grid-template-columns:88px 1fr;
    column-gap: 12px;
    position: relative
}

.BonusCardInfo__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.BonusCardInfo__title span {
    color: var(--primary)
}

.BonusCardInfo-deactive {
    position: absolute;
    top: -13px;
    left: -16px;
    width: 343px;
    height: 224px;
    z-index: 1;
    background: var(--bgDisactive);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-flow: column;
    align-items: center
}

.BonusCardInfo-deactive__clock {
    margin-top: 41px
}

.BonusCardInfo-deactive__date {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active);
    margin-top: 8px
}

.BonusCardInfo-deactive__text {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    margin-top: 8px;
    text-align: center
}

.BonusCardInfo__img {
    width: 88px;
    border-radius: 8px
}

.BonusCardInfo__name {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.BonusCardInfo__name_val {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--primary)
}

.BonusCardInfo__game {
    width: 88px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden
}

.BonusCardInfo__game img {
    width: 100%
}

.BonusCardInfo__timer {
    margin-top: 8px
}

.BonusCardFace {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bgBonus);
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0)
}

.BonusCardFace-header {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    height: 44px;
    background: var(--headerBonus);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px
}

.BonusCardFace-header__description {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.BonusCardFace-content {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 12px 16px 16px;
    gap: 16px;
    height: calc(100% - 44px)
}

.BonusCardFace-content-progress {
    text-align: left
}

.BonusCardFace-content-progress__title {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-bottom: 4px;
    opacity: .8
}

.BonusCardFace-content-progress__amount {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.BonusCardFace-content-progress__amount_widget {
    color: var(--textSecondary)
}

.BonusCardFace-content__controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 7px
}

.BonusCardFace__queue {
    text-align: center;
    width: 100%;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 130%;
    font-weight: 400
}

.BonusCardContainer {
    width: 343px;
    -webkit-perspective: 1200;
    perspective: 1200;
    -moz-transform: perspective(1200px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d
}

@media (max-width: 576px) {
    .BonusCardContainer {
        width: 335px
    }
}

.BonusCardContainer__wrapper {
    z-index: 3;
    perspective: 1200px
}

.BonusCard {
    position: relative;
    width: 343px;
    height: 317px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translateZ(0px);
    -moz-transform: translateZ(0px);
    transform: translateZ(0)
}

.BonusCard.inverted {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.BonusCard_deactive {
    width: 343px;
    height: 268px
}

.BonusList {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media (max-width: 1180px) {
    .BonusList {
        margin-top: 120px
    }
}

.BonusList__title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textSecondary);
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    margin-bottom: 16px
}

@media (max-width: 1180px) {
    .BonusList__title {
        justify-content: center;
        margin-top: 20px
    }
}

.BonusList__list {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(335px, 360px));
    grid-auto-rows: 1fr;
    gap: 16px
}

@media (max-width: 1180px) {
    .BonusList__list {
        margin-top: 16px;
        grid-template-columns:343px;
        justify-content: center
    }
}

.promo__wrapper {
    position: relative
}

.promo__container {
    display: flex;
    width: 357px;
    background: #fff;
    border-radius: 6px;
    padding: 4px 4px 4px 16px;
    border: 1px solid #D1D4E3;
    margin-right: 60px
}

@media (max-width: 1180px) {
    .promo__container {
        margin-right: 0;
        width: 340px
    }
}

@media (max-width: 320px) {
    .promo__container {
        width: 300px
    }
}

.promo__container-input {
    flex: 1;
    border: none;
    font-size: 14px;
    line-height: 19px;
    color: #666;
    outline: none;
    background: transparent
}

.promo__container-input::placeholder {
    color: #a3a3a3
}

.promo__container-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 36px;
    background: #fb3580;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s;
    margin-left: 20px
}

.promo__container-button:hover {
    opacity: .9
}

.promo__container-button:disabled {
    pointer-events: none
}

.promo__container-error {
    font-size: 12px;
    line-height: 16px;
    color: #f31f1f;
    position: absolute;
    top: 40px;
    left: 5px
}

.Tabs {
    display: flex;
    flex-direction: column
}

.Tabs__buttons {
    position: relative;
    display: grid
}

@media (max-width: 1180px) {
    .Tabs__buttons {
        min-height: 36px;
        padding: 2px;
        background-color: #e1e4f0;
        border-radius: 10px
    }
}

.Tabs__line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    border: .5px solid var(--lightGrey);
    z-index: 1
}

@media (max-width: 1180px) {
    .Tabs__line {
        display: none
    }
}

.Tabs__button {
    all: unset;
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    border-bottom: none;
    color: var(--grey);
    cursor: pointer;
    transition: color .2s ease;
    z-index: 2
}

@media (max-width: 1180px) {
    .Tabs__button {
        font-size: 12px;
        line-height: 130%;
        font-weight: 600;
        padding: 4px;
        border-radius: 8px;
        transition: all .2s ease-in-out;
        border: 2px solid transparent
    }
}

.Tabs__button_active {
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    transition: color .2s ease-in-out
}

@media (max-width: 1180px) {
    .Tabs__button_active {
        border-bottom: none;
        color: var(--grey)
    }
}

.Tabs__mobileButton {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: calc(100% - 4px);
    top: 2px;
    left: 0;
    border: 2px solid var(--primary);
    background: var(--white);
    border-radius: 8px;
    color: var(--primary);
    transition: all .2s ease-in-out;
    z-index: 3
}

.BackButton {
    all: unset;
    font-size: 16px;
    line-height: 105%;
    font-weight: 500;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

@media (max-width: 1180px) {
    .BackButton span {
        display: none
    }
}

.BackButton__arrow {
    transform: rotate(90deg);
    clip: var(--black)
}

.BackButton__arrow path {
    fill: var(--black)
}

.TitleBack {
    padding: 24px 40px 0;
    display: flex;
    align-items: center;
    background: var(--white);
    transition: all 50ms ease-in;
    border-bottom: 1px solid transparent;
    gap: 20px
}

@media (max-width: 1180px) {
    .TitleBack {
        font-size: 24px;
        line-height: 120%;
        font-weight: 600;
        position: fixed;
        top: 54px;
        left: 0;
        padding: 11px 8px;
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        width: 100%;
        transition: all 50ms ease-in;
        background: var(--bgDark);
        z-index: 10
    }
}

.TitleBack__title {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    white-space: nowrap
}

@media (max-width: 1180px) {
    .TitleBack__title {
        font-size: 18px;
        line-height: 120%;
        font-weight: 600
    }
}

div.isScrolled {
    background-color: var(--bgGrey);
    transition: all 50ms ease-in;
    border-bottom: 1px solid var(--lightGrey);
    box-shadow: 0 1px 1px #0c1a4b26, 0 3px 8px -1px #3232470d
}

.LoyaltySkeleton {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: #e1e4f0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s ease-in-out
}

.LoyaltySkeleton_active {
    background-image: linear-gradient(90deg, #e1e4f0, #dbdde7, #e1e4f0 80px);
    background-size: 600px;
    animation: shine-lines 2s infinite;
    transition: opacity .1s ease-in-out;
    opacity: 1
}

@keyframes shine-lines {
    0% {
        background-position: -50px
    }
    40%, to {
        background-position: 150px
    }
}

.LoyaltyUserAvatar {
    position: relative;
    background-color: var(--bgGrey);
    width: 360px;
    height: 360px;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/static/pl-bg-IlBHZkCa.webp)
}

.LoyaltyUserAvatar__avatar {
    width: 360px
}

.LoyaltyRollbackButton {
    all: unset;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--white);
    background-color: #f31f1f;
    border-radius: 10px;
    cursor: pointer
}

.LoyaltyRollbackButton__icon {
    width: 16px;
    height: 16px
}

.LoyaltyRankProgress {
    width: 176px;
    height: 8px;
    border-radius: 40px;
    background-color: var(--bgGrey);
    overflow: hidden
}

.LoyaltyRankProgress__progress {
    width: 0;
    height: 100%;
    background-color: var(--brandColor);
    border-radius: 40px;
    transition: width .2s ease-in-out
}

.LoyaltyCardRank {
    position: relative;
    min-width: 200px;
    height: 200px;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 0 1px #0c1a4b3d, 0 3px 8px -1px #3232470d;
    -webkit-user-select: none;
    user-select: none
}

.LoyaltyCardRank__image {
    position: absolute;
    left: calc((100% - 100px) / 2);
    top: -20px;
    width: 100px;
    height: 100px;
    scale: 1.1;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    opacity: 1;
    transition: all .2s ease-in-out
}

@media (max-width: 1180px) {
    .LoyaltyCardRank__image {
        scale: 1
    }
}

.LoyaltyCardRank__image_active {
    width: 186px;
    height: 186px;
    left: calc((100% - 186px) / 2);
    top: -92px;
    transition: all .2s ease-in-out
}

.LoyaltyCardRank__image_active_rank {
    width: 166px;
    height: 166px;
    left: calc((100% - 166px) / 2);
    top: -90px
}

.LoyaltyCardRank__image_unvisible {
    opacity: 0;
    transition: all .2s ease-in-out
}

.LoyaltyCardRank__content {
    padding: 72px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.LoyaltyCardRank__name {
    font-family: Unbounded, serif;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    margin-bottom: 8px
}

.LoyaltyCardRank__progressbar {
    margin-bottom: 6px
}

.LoyaltyCardRank__level {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--grey)
}

.LoyaltyCardRank__text {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--grey);
    text-align: center
}

.LoyaltyCardRank__experience {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--grey);
    margin-bottom: 6px
}

.LoyaltyCardRank__experience_complete {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--brandColor)
}

.LoyaltyCardRank__button {
    all: unset;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 6px 7px 16px;
    background: var(--primary);
    color: var(--white);
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardRank__button_active {
    background: var(--success)
}

.LoyaltyCardRank__buttonIcon {
    transform: rotate(90deg)
}

.LoyaltyCardRank__buttonIcon path {
    stroke: var(--white)
}

.LoyaltyButtonSlider {
    all: unset;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff61;
    border-radius: 8px;
    transform: rotate(270deg);
    cursor: pointer;
    z-index: 2
}

.LoyaltyButtonSlider_disabled {
    cursor: not-allowed !important
}

.LoyaltyButtonSlider:active {
    background-color: #ffffff80;
    box-shadow: 0 3px 8px -1px #3232470d
}

.LoyaltyButtonSlider__icon path {
    stroke: var(--brandColor)
}

.LoyaltyButtonSlider__icon_revert {
    transform: rotate(180deg)
}

.LoyaltyButtonSlider__icon_disabled path {
    stroke: var(--grey)
}

.LoyaltyCarousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-left: 16px;
    padding-bottom: 12px
}

@media (max-width: 1180px) {
    .LoyaltyCarousel {
        padding-left: 0;
        padding-bottom: 0
    }
}

.LoyaltyCarousel__userRank {
    position: absolute;
    left: 15px;
    top: 15px;
    display: flex;
    flex-direction: column
}

.LoyaltyCarousel__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--grey)
}

@media (max-width: 1180px) {
    .LoyaltyCarousel__title {
        font-size: 10px;
        line-height: 130%;
        font-weight: 600
    }
}

.LoyaltyCarousel__rank {
    margin: 0;
    text-transform: uppercase;
    font-family: Unbounded, serif;
    font-size: 24px;
    line-height: 105%;
    font-weight: 500
}

@media (max-width: 1180px) {
    .LoyaltyCarousel__rank {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600
    }
}

.LoyaltyCarousel__inner {
    display: flex;
    gap: 12px;
    overflow: hidden;
    height: 100%;
    align-items: end;
    cursor: grab
}

.LoyaltyCarousel__inner_isDragging {
    cursor: grabbing
}

@media (max-width: 1180px) {
    .LoyaltyCarousel__inner {
        height: 360px;
        padding-bottom: 30px
    }
}

button.LoyaltyCarousel__prevButton {
    position: absolute;
    top: 84px;
    left: 10px
}

@media (max-width: 1180px) {
    button.LoyaltyCarousel__prevButton {
        display: none
    }
}

button.LoyaltyCarousel__nextButton {
    position: absolute;
    top: 84px;
    right: 10px
}

@media (max-width: 1180px) {
    button.LoyaltyCarousel__nextButton {
        display: none
    }
}

.LoyaltyCarouselContainer {
    position: relative;
    width: 100%;
    background-color: var(--bgDark);
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.LoyaltyCarouselContainer__ButtonBooster {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1
}

.LoyaltyCarouselContainer__ButtonRollback {
    position: absolute !important;
    right: 15px !important;
    top: 15px !important;
    z-index: 1 !important
}

.LoyaltyCarouselContainer__buttons {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.LoyaltyUserInfo {
    display: grid;
    grid-template-columns:360px 1fr;
    gap: 12px;
    background-color: var(--white);
    padding: 40px;
    border-radius: 0 0 40px 40px
}

.LoyaltyTooltip {
    position: relative;
    width: fit-content;
    background-color: var(--white);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

@media (max-width: 1180px) {
    .LoyaltyTooltip {
        padding: 12px;
        max-width: 280px
    }
}

.LoyaltyTooltip__title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--primary)
}

.LoyaltyTooltip__description {
    margin: 0;
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--black);
    max-width: 270px
}

@media (max-width: 1180px) {
    .LoyaltyTooltip__description {
        max-width: none
    }
}

.LoyaltyTooltip__triangle {
    position: absolute
}

.LoyaltyTooltip__actions {
    display: flex;
    align-items: center;
    justify-content: end
}

.LoyaltyTooltip__button {
    height: 32px;
    max-width: 40%
}

.LoyaltyContextOnboarding {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: all;
    z-index: 10
}

.LoyaltyContextOnboarding__runner {
    position: absolute;
    box-shadow: inset #00000080 0 0 0 2px, #00000080 0 0 0 4000px;
    transition: all .5s ease-in-out;
    border-radius: 12px;
    pointer-events: none;
    opacity: .6;
    z-index: 11
}

.LoyaltyOnboardingPopup {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    min-width: 343px;
    height: 540px;
    border-radius: 16px;
    background-color: #d2d4e3;
    transition: all .3s ease-in-out
}

.LoyaltyOnboardingPopup_hide {
    opacity: 0
}

.LoyaltyOnboardingPopup_active {
    min-width: 375px;
    height: 600px;
    transition: all .3s ease-in-out;
    background-color: #fff
}

.LoyaltyOnboardingPopup_finished {
    width: 100%
}

.LoyaltyOnboardingPopup__durations {
    margin-bottom: 10px;
    padding: 0 12px;
    display: grid;
    gap: 4px
}

.LoyaltyOnboardingPopup__header {
    padding: 0 12px;
    display: flex;
    justify-content: end;
    margin-bottom: 10px
}

.LoyaltyOnboardingPopup__image {
    width: 100%
}

.LoyaltyOnboardingPopup__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    margin-bottom: 60px
}

.LoyaltyOnboardingPopup__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    font-family: Unbounded, serif
}

.LoyaltyOnboardingPopup__title_active {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600
}

.LoyaltyOnboardingPopup__icon {
    cursor: pointer
}

.LoyaltyOnboardingPopup__contentInner {
    height: 312px;
    padding: 28px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.LoyaltyOnboardingPopup__button {
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.LoyaltyOnboardingPopup__button_active {
    opacity: 1;
    transition: opacity .2s ease-in-out
}

.LoyaltyOnboardingBannerDesktop {
    padding: 40px;
    position: relative;
    margin: 100px auto;
    width: 900px;
    height: 400px;
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: start
}

.LoyaltyOnboardingBannerDesktop__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 360px
}

.LoyaltyOnboardingBannerDesktop__title {
    margin-bottom: 16px;
    font-family: Unbounded, serif;
    color: var(--black);
    text-transform: uppercase;
    font-size: 32px;
    line-height: 44px;
    font-weight: 700
}

.LoyaltyOnboardingBannerDesktop__description {
    display: block;
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600;
    color: var(--black)
}

.LoyaltyOnboardingBannerDesktop__button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    color: var(--white);
    background-color: #3156eb;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    cursor: pointer;
    z-index: 2
}

.LoyaltyOnboardingBannerDesktop__graffiti {
    position: absolute;
    right: -30px;
    top: -100px;
    z-index: 1
}

.LoyaltyOnboardingBannerDesktop__tiger {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 500px;
    z-index: 2
}

@media (max-width: 1180px) {
    .LoyaltyOnboardingBannerDesktop__tiger {
        display: none
    }
}

.LoyaltyOnboardingBannerDesktop__closeIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 3
}

.LoyaltyOnboardingBannerDesktop__closeIcon > path {
    fill: var(--grey)
}

.LoyaltyOnboarding {
    padding-top: 100px;
    position: absolute;
    display: flex;
    overflow: hidden;
    left: 0;
    top: 0;
    width: calc(100% - 255px);
    min-height: calc(100vh + 70px);
    height: 100%;
    z-index: 10000;
    opacity: 0;
    transition: all .3s ease-in-out;
    pointer-events: none
}

@media (max-width: 1180px) {
    .LoyaltyOnboarding {
        width: 100%
    }
}

.LoyaltyOnboarding_active {
    background-color: #00000080;
    -webkit-user-select: none;
    user-select: none;
    opacity: 1;
    transition: all .3s ease-in-out;
    pointer-events: auto;
    height: calc(100% + 470px)
}

.LoyaltyOnboarding_fixed {
    position: fixed
}

.LoyaltyOnboarding_fixedDesktop {
    position: fixed;
    left: 256px;
    top: 70px
}

.LoyaltyOnboarding__popups {
    margin: 0 auto;
    display: flex;
    align-items: center;
    max-height: 600px;
    max-width: 1124px;
    overflow: hidden;
    gap: 32px
}

@media screen and (max-width: 1180px) {
    .LoyaltyOnboarding__popups {
        max-width: 100vw
    }
}

.loyaltyHelpCard {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 8px -1px #3232470d
}

@media (max-width: 1180px) {
    .loyaltyHelpCard {
        padding: 12px
    }
}

.loyaltyHelpCard__icon {
    font-family: Unbounded, sans-serif;
    border-radius: 50px;
    background: #000;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 576px) {
    .loyaltyHelpCard__icon {
        display: none
    }
}

.loyaltyHelpCard__title {
    font-family: Unbounded, sans-serif;
    color: #3156eb;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    margin-bottom: 12px
}

@media (max-width: 576px) {
    .loyaltyHelpCard__title {
        font-size: 16px;
        line-height: 19px
    }
}

.loyaltyHelpCard__text {
    font-size: 16px;
    line-height: 21px;
    color: #000
}

@media (max-width: 576px) {
    .loyaltyHelpCard__text {
        font-size: 12px;
        line-height: 16px
    }
}

.loyaltyHelpAbout {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 40px
}

@media (max-width: 1180px) {
    .loyaltyHelpAbout {
        grid-template-columns:repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 32px
    }
}

@media (max-width: 576px) {
    .loyaltyHelpAbout {
        grid-template-columns:1fr
    }
}

.loyaltyHelpFaq {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px
}

@media (max-width: 768px) {
    .loyaltyHelpFaq {
        flex-direction: column;
        margin-bottom: 32px
    }
}

.loyaltyHelpFaq__title {
    font-family: Unbounded, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: #000;
    margin-top: 16px
}

@media (max-width: 768px) {
    .loyaltyHelpFaq__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600;
        margin: 0 0 16px
    }
}

.loyaltyHelpFaq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 732px
}

@media (max-width: 768px) {
    .loyaltyHelpFaq__list {
        width: 100%
    }
}

.loyaltyHelpFaq__item {
    background: #fff;
    box-shadow: 0 3px 8px -1px #3232470d;
    padding: 16px;
    border-radius: 16px
}

.loyaltyHelpFaq__item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.loyaltyHelpFaq__item-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600
}

.loyaltyHelpFaq__item-text {
    font-size: 14px;
    line-height: 18px;
    max-width: 660px;
    margin-top: 16px
}

@media (max-width: 768px) {
    .loyaltyHelpFaq__item-text {
        max-width: 95%
    }
}

.loyaltyHelpFaq__icon {
    transform: rotate(0);
    min-width: 24px
}

.loyaltyHelpFaq__icon > path {
    stroke: #8c94b2
}

.loyaltyHelpFaq__icon_open {
    transform: rotate(180deg)
}

.loyaltyHelpTerms {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px
}

@media (max-width: 768px) {
    .loyaltyHelpTerms {
        flex-direction: column
    }
}

.loyaltyHelpTerms__title {
    font-family: Unbounded, sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: #000;
    margin-top: 16px
}

@media (max-width: 768px) {
    .loyaltyHelpTerms__title {
        margin: 0 0 16px;
        font-size: 16px;
        line-height: 130%;
        font-weight: 600
    }
}

.loyaltyHelpTerms__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 732px
}

@media (max-width: 768px) {
    .loyaltyHelpTerms__list {
        min-width: auto;
        width: 100%
    }
}

.loyaltyHelpTerms__list li {
    margin-bottom: 10px
}

.loyaltyHelpTerms__item {
    background: #fff;
    box-shadow: 0 3px 8px -1px #3232470d;
    padding: 16px;
    border-radius: 16px
}

.loyaltyHelpTerms__item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.loyaltyHelpTerms__item-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600
}

.loyaltyHelpTerms__item-text {
    font-size: 14px;
    line-height: 18px;
    max-width: 660px;
    margin-top: 16px
}

@media (max-width: 768px) {
    .loyaltyHelpTerms__item-text {
        max-width: 95%
    }
}

.loyaltyHelpTerms__item-heading {
    margin-bottom: 10px;
    margin-left: -20px
}

.loyaltyHelpTerms .single {
    list-style: none;
    padding: 0;
    margin: 0
}

.loyaltyHelpTerms .lastitem:nth-child(6) {
    margin-bottom: 20px
}

.loyaltyHelpTerms__icon {
    transform: rotate(0);
    min-width: 24px
}

.loyaltyHelpTerms__icon > path {
    stroke: #8c94b2
}

.loyaltyHelpTerms__icon_open {
    transform: rotate(180deg)
}

.LoyaltyCircleProgress {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d;
    background-color: var(--white)
}

.LoyaltyCircleProgress_colored {
    background-color: #fb3580 !important
}

.LoyaltyCircleProgress_bordered {
    border: 2px solid #FB3580 !important
}

.LoyaltyRankProgressbar {
    position: relative
}

.LoyaltyRankProgressbar__levels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.LoyaltyRankProgressbar__progressbar {
    height: 4px;
    background-color: #eef0f8;
    border-radius: 2px;
    width: 100%
}

.LoyaltyRankProgressbar__circles {
    position: absolute;
    bottom: -4px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.LoyaltyRankProgressbar__progress {
    height: 100%;
    border-radius: 2px;
    background-color: #fb3580
}

.LoyaltyRankProgressbar__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--grey)
}

.LoyaltyRankProgressBig {
    background-color: var(--white);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

.LoyaltyRankProgressBig__title {
    font-size: 18px;
    line-height: 25px;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: Unbounded
}

.LoyaltyTagStatusRank {
    display: inline-block;
    padding: 3.2px 14px;
    text-align: center;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    border-radius: 60px
}

.LoyaltyTagStatusRank_collected {
    border: 1px solid #B7EB8F;
    background-color: #f6ffed;
    color: #52c41a
}

.LoyaltyTagStatusRank_nextRank {
    border: 1px solid #D9D9D9;
    background-color: #fafafa;
    color: #8c94b2
}

.LoyaltyTagStatusRank_progress {
    border: 1px solid #FFD591;
    background-color: #fff7e6;
    color: #fdb43c
}

.LoyaltyLevelRewardButton {
    all: unset;
    display: flex;
    justify-content: space-between;
    padding: 16px;
    height: 80px;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d;
    transition: box-shadow .2s ease-in-out
}

.LoyaltyLevelRewardButton:hover {
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 10px #0c1a4b3d;
    transition: all .2s ease-in-out;
    cursor: pointer
}

.LoyaltyLevelRewardButton__info {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.LoyaltyLevelRewardButton__name {
    display: flex;
    align-items: center;
    font-family: Unbounded, sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 800
}

.LoyaltyLevelRewardButton__arrow {
    transform: rotate(180deg);
    width: 20px;
    height: 20px
}

.LoyaltyLevelRewardButton__arrow > path {
    fill: #000
}

.LoyaltyListRanks {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 10px
}

.LoyaltyListRewards {
    margin-bottom: 16px
}

.LoyaltyListRewards__title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--grey);
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    margin-bottom: 4px
}

.LoyaltyListRewards__list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.LoyaltyListRewards__listItem {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyListRewards__listItem_close {
    color: var(--grey)
}

.LoyaltyListRewards__progressbar {
    position: absolute;
    left: -30px;
    height: 100%;
    width: 4px;
    background-color: var(--white)
}

.LoyaltyListRewards__circle {
    position: absolute;
    left: -4px;
    z-index: 3
}

.LoyaltyListRewards__progress {
    position: relative;
    width: 4px;
    background-color: #fb3580;
    z-index: 2
}

.LoyaltyProgressRankDetail {
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

.LoyaltyProgressRankDetail__rank {
    font-size: 18px;
    line-height: 120%;
    font-weight: 700;
    font-family: Unbounded;
    margin-bottom: 14px
}

.LoyaltyProgressRankDetail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px 12px 0 0;
    padding: 16px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

.LoyaltyProgressRankDetail__image {
    height: 80px
}

.LoyaltyProgressRankDetail__rewards {
    padding: 12px
}

.LoyaltyProgressRankDetail__line {
    margin: 0 0 10px;
    border: .5px solid var(--bgGrey)
}

.LoyaltyRankDetailMobile {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 12px;
    margin-left: 40px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

.LoyaltyRankDetailMobile__info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 12px
}

.LoyaltyRankDetailMobile__left {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.LoyaltyRankDetailMobile__name {
    margin: 0;
    display: flex;
    align-items: center;
    font-family: Unbounded;
    font-size: 18px;
    line-height: 120%;
    font-weight: 600
}

.LoyaltyRankDetailMobile__image {
    width: 60px;
    height: 60px
}

.LoyaltyRankDetailMobile__arrow {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    transition: all .2s ease-in-out;
    cursor: pointer
}

.LoyaltyRankDetailMobile__arrow_open {
    transform: rotate(0);
    transition: all .2s ease-in-out
}

.LoyaltyRankDetailMobile__rewards {
    padding: 0 12px
}

.LoyaltyRankDetailMobile__line {
    border: .5px solid var(--bgGrey)
}

.LoyaltyRankDetailMobile__progress {
    position: absolute;
    width: 4px;
    height: calc(100% + 20px);
    background-color: var(--white);
    left: -30px
}

.LoyaltyRankDetailMobile__progressInner {
    background-color: #fb3580;
    width: 100%;
    height: 100%;
    transition: height .2s ease-in-out
}

.LoyaltyRankDetailMobile__progress_first {
    top: 15px
}

.LoyaltyRankDetailMobile__circle {
    position: absolute;
    top: 18px;
    left: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--white);
    z-index: 3
}

.LoyaltyRankDetailMobile__circle_bordered {
    border: 3px solid rgb(251, 53, 128)
}

.LoyaltyRankDetailMobile__circle_first {
    top: 0
}

.LoyaltyListRanksMobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px
}

.LoyaltyAvatarList {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px
}

.LoyaltyAvatarListItem {
    height: 270px;
    background: var(--white);
    border-radius: 12px;
    width: 100%;
    padding: 4px;
    box-shadow: 0 3px 8px -1px #3232470d;
    box-shadow: 0 0 1px #0c1a4b3d;
    position: relative;
    cursor: pointer
}

@media (max-width: 1180px) {
    .LoyaltyAvatarListItem {
        height: 140px
    }
}

@media (max-width: 576px) {
    .LoyaltyAvatarListItem {
        height: 100px
    }
}

@media (max-width: 375px) {
    .LoyaltyAvatarListItem {
        height: 80px
    }
}

.LoyaltyAvatarListItem__img {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.LoyaltyAvatarListItem__img img {
    height: 100%;
    width: 100%;
    object-fit: contain
}

.LoyaltyAvatarListItem__selected {
    position: absolute;
    top: -4px;
    right: -4px
}

.LoyaltyAvatarListItem__locked {
    position: absolute;
    background: #eef0f899;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: not-allowed
}

.LoyaltyUpdateDescription {
    padding: 12px;
    background: var(--white);
    box-shadow: 0 3px 8px -1px #3232470d;
    box-shadow: 0 0 1px #0c1a4b3d;
    border-radius: 12px;
    margin-top: 24px;
    background-image: url(/static/pl-bg-width-4rVdhbLp.webp)
}

.LoyaltyUpdateDescription__title {
    color: var(--black);
    font-family: Unbounded;
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center
}

@media (max-width: 1180px) {
    .LoyaltyUpdateDescription__title {
        text-align: left
    }
}

.LoyaltyUpdateDescription__description {
    color: #000000b2;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    text-align: center;
    max-width: 550px;
    margin: 0 auto
}

@media (max-width: 1180px) {
    .LoyaltyUpdateDescription__description {
        text-align: left;
        max-width: 100%
    }
}

.LoyaltySelectedAvatar {
    padding: 12px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
    position: relative;
    height: 244px;
    box-shadow: 0 3px 8px -1px #3232470d;
    box-shadow: 0 0 1px #0c1a4b3d;
    background-image: url(/static/pl-bg-IlBHZkCa.webp)
}

.LoyaltySelectedAvatar__white {
    background-color: var(--white)
}

.LoyaltySelectedAvatar__grey {
    background-color: var(--bgSecondary)
}

.LoyaltySelectedAvatar__avatar {
    height: 230px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.LoyaltySelectedAvatar__avatar img {
    height: 100%
}

.LoyaltySelectedAvatar__rank {
    color: var(--black);
    font-family: Unbounded;
    font-size: 16px;
    line-height: 105%;
    font-weight: 500;
    text-transform: uppercase
}

.LoyaltySelectedAvatar__rank span {
    font-size: 10px;
    line-height: 130%;
    font-weight: 600;
    text-transform: none;
    color: var(--textSecondary)
}

.LoyaltySelectedAvatar__rankName {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    font-family: Unbounded
}

.LoyaltySelectedAvatar__rankTitle {
    font-size: 10px;
    line-height: 14px;
    font-weight: 700
}

.LoyaltyAvatarMobile {
    padding: 0 16px 16px
}

.TimerText {
    display: flex;
    align-items: start;
    gap: 2px;
    max-width: 200px;
    color: var(--grey)
}

.TimerText__icon {
    min-width: 16px
}

.TimerText__icon path {
    stroke: var(--grey)
}

.TimerText__text {
    max-width: 184px;
    padding-top: 1px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

.TimerText__receive, .TimerText__claim {
    max-width: 120px
}

@media (max-width: 1180px) {
    .TimerText__claim {
        max-width: 135px
    }
}

.LoyaltyCardCashBonus {
    max-height: 360px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

@media (max-width: 1024px) {
    .LoyaltyCardCashBonus {
        max-width: 100%;
        padding: 12px
    }
}

.LoyaltyCardCashBonus__top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px
}

.LoyaltyCardCashBonus__image {
    width: 60px;
    height: 60px
}

.LoyaltyCardCashBonus__titleText {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: Unbounded, "serif";
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 4px
}

.LoyaltyCardCashBonus__titleText_inactive {
    color: var(--grey)
}

.LoyaltyCardCashBonus__wager {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardCashBonus__received {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    margin-bottom: 16px
}

.LoyaltyCardCashBonus__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px
}

.LoyaltyCardCashBonus__listItem {
    display: flex
}

.LoyaltyCardCashBonus__titleInnerList {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardCashBonus__descriptionInnerList {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400
}

.LoyaltyCardCashBonus__icon {
    margin-right: 6px;
    min-width: 16px
}

.LoyaltyCardCashBonus__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.LoyaltyCardCashBonus__btn {
    width: 100px;
    height: 32px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    border-radius: 4px
}

.LoyaltyCardCashBonus__btn_disabled {
    color: var(--white) !important;
    cursor: not-allowed
}

.LoyaltyCardCashBonus__innerList {
    max-width: 300px
}

.LoyaltyCardCashBonus__chevron {
    cursor: pointer;
    transform: rotate(180deg);
    transition: all .2s ease-in-out
}

.LoyaltyCardCashBonus__chevron_inactive {
    cursor: auto
}

.LoyaltyCardCashBonus__chevron_inactive path {
    stroke: var(--grey)
}

.LoyaltyCardCashBonus__chevron_open {
    transform: rotate(0);
    transition: all .2s ease-in-out
}

.LoyaltyFreeSpinsCard {
    max-width: 360px;
    max-height: 360px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d
}

@media (max-width: 1180px) {
    .LoyaltyFreeSpinsCard {
        max-width: 100%;
        padding: 12px
    }
}

.LoyaltyFreeSpinsCard__title {
    display: flex;
    align-items: center;
    font-family: Unbounded, "serif";
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 4px
}

.LoyaltyFreeSpinsCard__title_inactive {
    color: var(--grey)
}

.LoyaltyFreeSpinsCard__chevron {
    cursor: pointer;
    transform: rotate(180deg);
    transition: all .2s ease-in-out
}

.LoyaltyFreeSpinsCard__chevron_inactive path {
    stroke: var(--grey)
}

.LoyaltyFreeSpinsCard__chevron_open {
    transform: rotate(0);
    transition: all .2s ease-in-out
}

.LoyaltyFreeSpinsCard__subtitle {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    font-weight: 600;
    margin-bottom: 16px
}

.LoyaltyFreeSpinsCard__info {
    display: flex;
    gap: 12px;
    margin-bottom: 16px
}

.LoyaltyFreeSpinsCard__infoGame {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 190px
}

.LoyaltyFreeSpinsCard__image {
    width: 100px;
    height: 116px;
    border-radius: 6px
}

.LoyaltyFreeSpinsCard__titleGame {
    font-family: Unbounded, serif;
    font-size: 14px;
    line-height: 130%;
    font-weight: 500;
    margin-bottom: 6px
}

.LoyaltyFreeSpinsCard__costFS {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

button.LoyaltyFreeSpinsCard__button {
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

button.LoyaltyFreeSpinsCard__button_disabled {
    color: var(--white) !important
}

.LoyaltyFreeSpinsCardUnvailableLevel {
    max-width: 360px;
    max-height: 360px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

@media (max-width: 1024px) {
    .LoyaltyFreeSpinsCardUnvailableLevel {
        max-width: 100%;
        padding: 12px
    }
}

.LoyaltyFreeSpinsCardUnvailableLevel__top {
    display: flex;
    justify-content: space-between
}

.LoyaltyFreeSpinsCardUnvailableLevel__image {
    width: 60px;
    height: 60px
}

.LoyaltyFreeSpinsCardUnvailableLevel__subtitle {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyFreeSpinsCardUnvailableLevel__textTimer {
    max-width: 100%
}

.LoyaltyQuestion {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px 12px;
    gap: 20px;
    box-shadow: 0 3px 8px -1px #3232470d;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    background-image: url(/static/graffiti-bonus-BHcF_72R.webp);
    background-size: cover;
    background-repeat: no-repeat
}

.LoyaltyQuestion__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    z-index: 2
}

.LoyaltyQuestion__image {
    position: absolute;
    left: 0;
    width: 100%
}

.LoyaltyQuestion__button {
    z-index: 2
}

.LoyaltyTitle {
    margin: 0;
    font-family: Unbounded, "serif";
    text-transform: uppercase;
    font-size: 18px;
    line-height: 120%;
    font-weight: 600
}

@media (min-width: 1180px) {
    .LoyaltyTitle {
        display: none
    }
}

.LoyaltyCardCashback {
    max-width: 360px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 3px 8px -1px #3232470d, 0 0 1px #0c1a4b3d
}

@media (max-width: 1180px) {
    .LoyaltyCardCashback {
        max-width: 100%;
        padding: 12px
    }
}

.LoyaltyCardCashback__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 3px
}

.LoyaltyCardCashback__image {
    width: 60px;
    height: 60px
}

.LoyaltyCardCashback__titleInner {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px
}

.LoyaltyCardCashback__titleText {
    all: unset;
    display: inline-block;
    font-family: Unbounded, "serif";
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500
}

.LoyaltyCardCashback__titleText_inactive {
    color: var(--grey)
}

.LoyaltyCardCashback__wager {
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardCashback__received {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardCashback__list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.LoyaltyCardCashback__listItem {
    display: flex
}

.LoyaltyCardCashback__titleInnerList {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600
}

.LoyaltyCardCashback__descriptionInnerList {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400
}

.LoyaltyCardCashback__icon {
    margin-right: 6px;
    min-width: 16px
}

.LoyaltyCardCashback__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

@media (max-width: 1180px) {
    .LoyaltyCardCashback__bottom {
        margin-top: 16px
    }
}

.LoyaltyCardCashback__btn {
    width: 100px;
    height: 32px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    border-radius: 4px
}

.LoyaltyCardCashback__btn_disabled {
    color: var(--white) !important;
    cursor: not-allowed
}

.LoyaltyCardCashback__innerList {
    max-width: 300px
}

.LoyaltyCardCashback__chevron {
    cursor: pointer;
    transform: rotate(180deg);
    transition: all .2s ease-in-out
}

.LoyaltyCardCashback__chevron_inactive path {
    stroke: var(--grey)
}

.LoyaltyCardCashback__chevron_open {
    transform: rotate(0);
    transition: all .2s ease-in-out
}

.LoyaltyCardCashback__loss {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--grey)
}

.LoyaltyCardCashback__receivedValue {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400
}

.LoyaltyCardCashback__timer_canGetCashback {
    max-width: 210px
}

.LoyaltyCardCashback__timer_needPlay {
    max-width: 230px
}

.LoyaltyHorizontalScrollContainer {
    display: flex;
    overflow-x: scroll;
    gap: 16px;
    border-radius: 12px
}

.LoyaltyHorizontalScrollContainer > div {
    min-width: calc(100vw - 30px)
}

.LoyaltyLayout {
    position: relative;
    background-color: var(--bgDark)
}

@media (max-width: 1180px) {
    .LoyaltyLayout {
        max-width: 100vw;
        margin: 0 auto 80px;
        overflow: hidden
    }
}

@media (max-width: 1180px) {
    .LoyaltyLayout__userInfo {
        display: none !important
    }
}

.LoyaltyLayout__tabs {
    margin-top: 20px
}

@media (max-width: 1180px) {
    .LoyaltyLayout__tabs {
        margin-top: 90px
    }
}

@media (max-width: 1180px) {
    .LoyaltyLayout__tabsButtonsContainer {
        position: fixed;
        width: 100%;
        top: 100px;
        padding: 8px 16px;
        background-color: var(--bgGrey);
        z-index: 10
    }
}

@media (max-width: 1180px) {
    .LoyaltyLayout__header_unvisible {
        z-index: 10
    }
}

.Notification {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 16px;
    padding: 12px 8px
}

.Notification__circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    background: none;
    margin-right: 8px
}

.Notification__circle.active {
    background: var(--secondary)
}

.Notification-main {
    display: flex;
    flex-direction: column;
    margin-left: 8px
}

.Notification-main__title {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary)
}

.Notification-main__text {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary)
}

.Notification-main__amount {
    font-size: 12px;
    line-height: 130%;
    font-weight: 600;
    color: var(--primary)
}

.Notification-main__amount_withdrawal {
    color: var(--textPrimary)
}

.Notification-main__date {
    font-size: 10px;
    line-height: 140%;
    font-weight: 400;
    color: var(--text-secondary)
}

.NotificationListMobile {
    display: flex;
    flex-flow: column;
    gap: 8px;
    height: 100vh
}

.NotificationListMobile__empty {
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    color: var(--textPrimary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%
}

.TournamentTerms {
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    padding: 16px 20px;
    border: 1px solid var(--selectBg)
}

.TournamentTerms-term {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.TournamentTerms-term__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .TournamentTerms-term__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600;
        justify-content: center
    }
}

.TournamentTerms__arrow {
    width: 28px;
    height: 28px;
    display: flex;
    transition: all .25s;
    transform: rotate(-180deg)
}

@media (max-width: 576px) {
    .TournamentTerms__arrow {
        width: 24px;
        height: 24px
    }
}

.TournamentTerms__arrow_up {
    transition: all .25s;
    transform: rotate(0)
}

.TournamentTerms-list__rules {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 8px;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all
}

@media (max-width: 576px) {
    .TournamentTerms-list__rules {
        font-size: 12px;
        line-height: 120%;
        font-weight: 400;
        margin-top: 10px
    }
}

.SkeletonGameList__grid {
    margin-top: 22px
}

.SkeletonGameList__grid > span {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(188px, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 16px;
    row-gap: 16px
}

@media (max-width: 1370px) {
    .SkeletonGameList__grid > span {
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 1180px) {
    .SkeletonGameList__grid > span {
        column-gap: 8px;
        row-gap: 16px;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 768px) {
    .SkeletonGameList__grid > span {
        grid-template-columns:repeat(auto-fill, minmax(107px, 1fr))
    }
}

.SkeletonGameList__card {
    position: relative
}

.SkeletonGameList__card:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    padding-bottom: 115.5963302752%
}

.SkeletonGameList__more {
    margin-top: 28px
}

.TournamentPrize {
    display: flex;
    justify-content: space-between;
    border-radius: 16px;
    background-image: url(/static/tournament_page_prize-DJeGjGlC.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 180px;
    padding: 54px 80px
}

@media (max-width: 1180px) {
    .TournamentPrize {
        border-radius: 8px;
        flex-direction: column;
        justify-content: space-around;
        padding: 15px 16px
    }
}

.TournamentPrize_block {
    display: inline-flex;
    flex-direction: column;
    align-items: center
}

.TournamentPrize_block-title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .TournamentPrize_block-title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400
    }
}

.TournamentPrize_block-content {
    font-size: 48px;
    line-height: 110%;
    font-weight: 800;
    color: var(--textTournamentColor)
}

@media (max-width: 1180px) {
    .TournamentPrize_block-content {
        font-size: 24px;
        line-height: 33px;
        font-weight: 700
    }
}

.TournamentPrize.banger {
    background-image: url(/static/tournament_page_prize-BKcZgMkX.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.TournamentPrize_timer {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.TournamentPrize_timer-title {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .TournamentPrize_timer-title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400
    }
}

.TournamentBlock {
    display: flex;
    width: 100%;
    justify-content: space-between
}

.TournamentBlock__content {
    display: flex;
    flex-direction: row;
    gap: 32px;
    width: 100%
}

@media (max-width: 1180px) {
    .TournamentBlock__content {
        flex-direction: column;
        gap: 28px
    }
}

.TournamentBlock__text-section {
    display: flex;
    flex-direction: column;
    max-width: 440px
}

@media (max-width: 1180px) {
    .TournamentBlock__text-section {
        max-width: 100%;
        max-height: none
    }
}

.TournamentBlock_name {
    font-size: 36px;
    line-height: 39.6px;
    font-weight: 800;
    color: var(--textTournamentColor);
    text-transform: uppercase
}

.TournamentBlock_description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    margin-top: 16px;
    color: var(--textPrimary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all
}

.TournamentBlock_button {
    margin-top: 28px;
    width: 197px
}

@media (max-width: 1180px) {
    .TournamentBlock_button {
        margin-top: 0;
        width: 100%
    }
}

.TournamentBlock__image-section {
    height: 400px;
    width: 632px;
    justify-content: center;
    display: flex;
    overflow: hidden;
    border-radius: 16px
}

@media (max-width: 1180px) {
    .TournamentBlock__image-section {
        flex-direction: column;
        width: 100%;
        height: auto
    }

    .TournamentBlock__image-section img {
        width: 100%;
        height: auto
    }
}

.TournamentBoard {
    display: flex;
    flex-direction: column
}

.TournamentBoard__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary);
    display: flex
}

@media (max-width: 1180px) {
    .TournamentBoard__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600;
        justify-content: center
    }
}

.TournamentBoard__wrapper {
    display: flex;
    flex-direction: column
}

@media (max-width: 1180px) {
    .TournamentBoard__wrapper {
        padding: 0 16px
    }
}

.TournamentBoard__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--selectBg);
    padding: 16px 200px 16px 135px;
    margin-top: 12px
}

@media (max-width: 1180px) {
    .TournamentBoard__header {
        padding: 16px 0;
        justify-content: space-between
    }
}

.TournamentBoard__header_item {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textTournamentGrey);
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .TournamentBoard__header_item {
        font-size: 14px;
        line-height: 130%;
        font-weight: 600
    }
}

.TournamentBoard__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--selectBg);
    padding: 33px 150px
}

@media (max-width: 1180px) {
    .TournamentBoard__row {
        padding: 12px 0;
        justify-content: space-between
    }
}

.TournamentBoard__row:nth-child(-n+4) {
    color: var(--textTournamentColor)
}

.TournamentBoard__row_item {
    font-size: 48px;
    line-height: 110%;
    font-weight: 800
}

@media (max-width: 1180px) {
    .TournamentBoard__row_item {
        font-size: 24px;
        line-height: 24.15px;
        font-weight: 800
    }
}

.TournamentRules {
    display: flex;
    flex-direction: column
}

.TournamentRules__title {
    display: flex;
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .TournamentRules__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600;
        justify-content: center
    }
}

.TournamentRules__wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 32px
}

@media (max-width: 1180px) {
    .TournamentRules__wrapper {
        flex-direction: column;
        padding: 0;
        gap: 28px
    }
}

.TournamentRules__block {
    display: flex;
    flex-direction: row;
    gap: 10px
}

.TournamentRules__block-icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.TournamentRules__block-icon svg, .TournamentRules__block-icon path, .TournamentRules__block-icon rect {
    fill: var(--bgIcons)
}

.TournamentRules__block_content {
    display: flex;
    flex-direction: column;
    gap: 8px
}

@media (max-width: 1180px) {
    .TournamentRules__block_content {
        gap: 0
    }
}

.TournamentRules__block-title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textTournamentGrey)
}

.TournamentRules__block-value {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

.TournamentRules__icon {
    width: 60px;
    height: 60px
}

@media (max-width: 1180px) {
    .TournamentRules__icon {
        width: 40px;
        height: 40px
    }
}

.Tournament {
    display: flex;
    flex-flow: column;
    justify-content: center;
    max-width: 1104px
}

@media (max-width: 576px) {
    .Tournament {
        margin-top: 0
    }
}

.Tournament__header {
    display: flex;
    align-items: center
}

@media (max-width: 1180px) {
    .Tournament__header {
        position: fixed;
        display: flex;
        width: 100%;
        height: 44px;
        left: 0;
        top: 69px;
        z-index: 20;
        padding: 8px;
        background: var(--dialogBackground)
    }
}

.Tournament__header.notAuth {
    top: 54px
}

.Tournament__header.scroll {
    box-shadow: 0 1px 1px #0c1a4b26, 0 3px 8px -1px #3232470d
}

.Tournament__block {
    padding-top: 24px
}

@media (max-width: 1180px) {
    .Tournament__block {
        padding-top: 44px
    }
}

.Tournament__block.notAuth {
    padding-top: 44px
}

.Tournament__prize {
    margin-top: 60px
}

@media (max-width: 1180px) {
    .Tournament__prize {
        margin-top: 32px;
        padding: 0
    }
}

.Tournament__rules {
    margin-top: 60px
}

@media (max-width: 768px) {
    .Tournament__rules {
        font-size: 14px;
        line-height: 130%;
        font-weight: 400;
        margin-top: 32px
    }
}

.Tournament__title {
    margin-bottom: 28px;
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary);
    display: flex
}

@media (max-width: 1180px) {
    .Tournament__title {
        font-size: 16px;
        line-height: 130%;
        font-weight: 600;
        justify-content: center
    }
}

.Tournament__game-list {
    margin-top: 60px
}

@media (max-width: 1180px) {
    .Tournament__game-list {
        margin-top: 32px;
        padding: 0
    }
}

.Tournament__board {
    margin-top: 60px
}

@media (max-width: 1180px) {
    .Tournament__board {
        margin-top: 32px
    }
}

.Tournament__terms {
    margin-top: 85px
}

@media (max-width: 1180px) {
    .Tournament__terms {
        margin-top: 32px;
        padding: 0
    }
}

.ButtonGirl {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--white);
    border-radius: 8px;
    background: var(--red-back);
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 0 20px;
    position: absolute;
    bottom: 10vh;
    z-index: 5;
    cursor: pointer;
    border: none;
    -webkit-user-select: none;
    user-select: none
}

.ButtonGirl.banger {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    background: var(--gradient3);
    box-shadow: 0 -4px 59px #4737ffd1;
    box-shadow: 0 2px 63px #7c66ff96;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0
}

@media (max-width: 768px) {
    .ButtonGirl.banger {
        width: 343px;
        height: 52px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
        bottom: 100px
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonGirl {
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
        color: var(--white);
        margin-top: 10px;
        width: 343px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        height: 52px;
        bottom: 45px
    }
}

.ButtonGirl:disabled {
    background: var(--disabled)
}

.ButtonGirl-center {
    display: flex;
    flex-flow: row;
    align-items: center
}

.ButtonGirl-center__image {
    display: flex
}

.ButtonGirl-center__text {
    color: #fff;
    text-transform: uppercase;
    margin-left: .4em
}

.ButtonTeenagers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 290px;
    padding: 19px 71px;
    margin-left: calc(50% - 145px);
    position: absolute;
    bottom: 10vh;
    z-index: 4;
    cursor: pointer;
    background: linear-gradient(180deg, var(--blue-light-back) -4.94%, var(--light-green) 50.01%);
    border: 2px solid rgba(255, 255, 255, .5);
    box-shadow: 0 20px 20px var(--btn-shadow);
    border-radius: 16px
}

@media (max-width: 1180px),(max-height: 1180px) {
    .ButtonTeenagers {
        width: 260px;
        padding: 19px 66px;
        margin-left: calc(50% - 130px)
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonTeenagers {
        width: 190px;
        padding: 13px 46px;
        margin-left: calc(50% - 95px);
        bottom: 20vh
    }
}

.ButtonTeenagers:disabled {
    background: var(--disabled)
}

.ButtonTeenagers__text {
    font-size: 35px;
    line-height: 42px;
    font-weight: 900;
    color: var(--white);
    font-family: Alegreya Sans, sans-serif;
    text-transform: uppercase;
    text-shadow: 0 10px 16px rgba(0, 0, 0, .25)
}

@media (max-width: 1180px),(max-height: 1180px) {
    .ButtonTeenagers__text {
        font-size: 30px;
        line-height: 36px;
        font-weight: 900
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonTeenagers__text {
        font-size: 23px;
        line-height: 27.6px;
        font-weight: 900
    }
}

.ButtonWheelCard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    background: transparent;
    background-position: center center;
    top: 30px;
    border: none;
    z-index: 4
}

@media (max-width: 576px) {
    .ButtonWheelCard {
        top: 5px
    }
}

.ButtonWheelCard__text {
    font-size: 16px;
    line-height: 18px;
    font-weight: 800;
    color: var(--white);
    text-shadow: 0 5px 9px rgba(0, 0, 0, .3);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110px;
    width: 110px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2af849 17.79%, #22bc39 82.1%);
    box-shadow: 0 0 0 6px #53e646, 0 7.55px 8.63px #00000040;
    cursor: pointer;
    text-transform: uppercase;
    z-index: 1
}

@media (max-width: 1180px) {
    .ButtonWheelCard__text {
        height: 80px;
        width: 80px;
        font-size: 16px;
        line-height: 18px;
        font-weight: 800
    }
}

@media (max-width: 576px) {
    .ButtonWheelCard__text {
        height: 50px;
        width: 50px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 800
    }
}

.ButtonAviator {
    position: absolute;
    top: -40px;
    left: -5px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.ButtonAviator-button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    background-image: url(landings/wheels/aviator/button_inactive.webp);
    background-repeat: no-repeat;
    background-position: center center;
    width: 310px;
    height: 110px;
    margin-left: 8px;
    margin-top: -19px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-size: 275px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .ButtonAviator-button {
        background-size: 250px;
        margin-left: -2px;
        margin-top: -212px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .ButtonAviator-button {
        background-size: 202px;
        margin-left: 2px;
        margin-top: -107px
    }
}

@media (max-width: 375px) {
    .ButtonAviator-button {
        background-size: 167px;
        margin-top: -89px;
        margin-left: 4px
    }
}

.ButtonAviator-button.banger {
    background-image: url(landings/wheels/aviator/banger_button_inactive.webp);
    margin-bottom: 18px;
    margin-right: 4px;
    background-size: 294px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .ButtonAviator-button.banger {
        background-size: 228px;
        margin-left: 10px;
        margin-top: -185px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .ButtonAviator-button.banger {
        background-size: 220px;
        margin-left: 10px;
        margin-top: -96px
    }
}

@media (max-width: 375px) {
    .ButtonAviator-button.banger {
        background-size: 200px;
        margin-top: -80px;
        margin-left: 18px
    }
}

.ButtonAviator-button:hover {
    filter: brightness(120%)
}

.ButtonAviator-button__text {
    font-size: 30px;
    line-height: 40.85px;
    font-weight: 800;
    color: var(--white);
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    padding: 20px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    position: absolute;
    z-index: 2
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .ButtonAviator-button__text {
        font-size: 24px;
        line-height: 24.15px;
        font-weight: 800
    }
}

@media (max-width: 576px) and (max-height: 768px) {
    .ButtonAviator-button__text {
        font-size: 14px;
        line-height: 17.51px;
        font-weight: 800
    }
}

.ButtonCrazyTime {
    position: absolute;
    bottom: 50px;
    left: -5px;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 3
}

@media (max-width: 768px) {
    .ButtonCrazyTime {
        bottom: 150px
    }
}

@media (max-height: 768px) {
    .ButtonCrazyTime {
        bottom: 20px
    }
}

.ButtonCrazyTime-button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background: linear-gradient(104.17deg, #f2d652 19.76%, #ff3e78 93.27%);
    background-size: cover;
    width: 370px;
    height: 50px;
    border-radius: 74px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 7px 20px #00000087
}

@media (max-width: 768px) {
    .ButtonCrazyTime-button {
        width: 80%
    }
}

.ButtonCrazyTime-button:hover {
    filter: brightness(120%)
}

.ButtonCrazyTime-button__text {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
    padding: 20px;
    position: absolute;
    z-index: 2
}

.ButtonChicks {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1
}

@media (max-width: 1180px) {
    .ButtonChicks {
        top: -43px
    }
}

@media (max-height: 1180px) {
    .ButtonChicks {
        top: -40px
    }
}

@media (max-height: 768px) {
    .ButtonChicks {
        top: -15px
    }
}

@media (max-width: 576px) {
    .ButtonChicks {
        top: -11px
    }
}

@media (max-height: 576px) {
    .ButtonChicks {
        justify-content: right;
        top: 28px;
        left: -255px
    }
}

.ButtonChicks-button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.ButtonChicks-button:hover {
    filter: brightness(120%)
}

.ButtonChicks-button__text {
    font-size: 24px;
    line-height: 33px;
    font-weight: 700;
    color: var(--white);
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    padding: 20px;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    position: absolute;
    z-index: 2
}

@media (max-width: 1180px),(max-height: 1180px) {
    .ButtonChicks-button__text {
        font-size: 20px;
        line-height: 30px;
        font-weight: 700
    }
}

@media (max-width: 576px),(max-height: 768px) {
    .ButtonChicks-button__text {
        font-size: 14px;
        line-height: 130%;
        font-weight: 700
    }
}

.ButtonRoulette {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--white);
    border-radius: 8px;
    background: var(--buttonRoulette);
    box-shadow: 0 4px 8px #00000026;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 0 20px;
    position: absolute;
    bottom: 10vh;
    z-index: 5;
    cursor: pointer;
    border: none;
    -webkit-user-select: none;
    user-select: none
}

.ButtonRoulette.banger {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    background: var(--gradient3);
    box-shadow: 0 -4px 59px #4737ffd1;
    box-shadow: 0 2px 63px #7c66ff96;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0
}

@media (max-width: 768px) {
    .ButtonRoulette.banger {
        width: 343px;
        height: 52px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
        bottom: 100px
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonRoulette {
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
        color: var(--white);
        margin-top: 10px;
        width: 343px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        height: 52px;
        bottom: 45px
    }
}

.ButtonRoulette:disabled {
    background: var(--disabledButtonRoulette)
}

.ButtonRoulette-center {
    display: flex;
    flex-flow: row;
    align-items: center
}

.ButtonRoulette-center__text {
    color: #fff;
    text-transform: uppercase;
    margin-left: .4em
}

.ButtonOlympus {
    border-radius: 16px;
    border: 5px solid var(--olympusBorder);
    background: var(--olympusButton);
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 0 20px;
    position: absolute;
    bottom: 10vh;
    z-index: 5;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer
}

.ButtonOlympus.banger {
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0
}

@media (max-width: 768px) {
    .ButtonOlympus.banger {
        width: 343px;
        height: 52px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 100px
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonOlympus {
        margin-top: 10px;
        width: 343px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        height: 52px;
        bottom: 45px
    }
}

.ButtonOlympus:disabled {
    background: var(--disabled);
    border-color: var(--disabledBorederBonanza)
}

.ButtonOlympus-center {
    display: flex;
    flex-flow: row;
    align-items: center
}

.ButtonOlympus-center__text {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    margin-left: .4em
}

.ButtonBonanza {
    border-radius: 16px;
    border: 6px solid var(--bonanza_border);
    background: linear-gradient(90deg, #0cebeb, #20e3b2, #29ffc6);
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    padding: 0 20px;
    position: absolute;
    bottom: 10vh;
    z-index: 5;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer
}

.ButtonBonanza.banger {
    width: 500px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0
}

@media (max-width: 768px) {
    .ButtonBonanza.banger {
        width: 343px;
        height: 52px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 100px
    }
}

@media (max-width: 768px),(max-height: 768px) {
    .ButtonBonanza {
        margin-top: 10px;
        width: 343px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        height: 52px;
        bottom: 45px
    }
}

.ButtonBonanza:disabled {
    background: var(--disabled);
    border-color: var(--disabledBorederBonanza)
}

.ButtonBonanza-center {
    display: flex;
    flex-flow: row;
    align-items: center
}

.ButtonBonanza-center__text {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
    margin-left: .4em
}

.WheelFrame {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -50px;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center
}

.WheelFrame_girls {
    background-image: url(landings/wheels/girls/frame.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: -50px;
    left: 0;
    background-size: 670px
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame_girls {
        background-size: 336px
    }
}

.WheelFrame_girls-bangladesh {
    background-image: url(landings/wheels/girls/banger_frame.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 670px;
    top: -45px
}

@media (max-width: 1440px) and (max-height: 1024px) {
    .WheelFrame_girls-bangladesh {
        background-size: 600px
    }
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame_girls-bangladesh {
        background-size: 390px;
        top: -50px
    }
}

.WheelFrame_girls_banger {
    background-image: url(landings/wheels/girls/banger_frame.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 670px;
    top: 0
}

@media (max-width: 1440px) and (max-height: 1024px) {
    .WheelFrame_girls_banger {
        background-size: 600px
    }
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame_girls_banger {
        background-size: 390px;
        top: -50px
    }
}

.WheelFrame_teenagers {
    background-image: url(landings/wheels/teenagers/frame.webp);
    top: -35px
}

@media (max-width: 768px),(max-height: 768px) {
    .WheelFrame_teenagers {
        top: -42px;
        background-size: 336px
    }
}

.WheelFrame_cards {
    background-image: url(landings/wheels/cards/frame.webp);
    background-size: 640px;
    bottom: 30px
}

@media (max-width: 1180px) {
    .WheelFrame_cards {
        background-size: 490px;
        top: -27px
    }
}

@media (max-width: 576px) {
    .WheelFrame_cards {
        background-size: 330px;
        top: -34px
    }
}

.WheelFrame_aviator {
    background-image: url(landings/wheels/aviator/frame.webp);
    background-repeat: no-repeat;
    background-position: center center;
    top: -65px;
    left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 590px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame_aviator {
        background-size: 525px;
        top: -160px;
        left: -2px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame_aviator {
        background-size: 440px;
        top: -105px;
        left: 0
    }
}

@media (max-width: 375px) {
    .WheelFrame_aviator {
        background-size: 360px;
        top: -95px
    }
}

.WheelFrame_aviator_banger {
    background-image: url(landings/wheels/aviator/banger_frame.webp);
    background-repeat: no-repeat;
    background-position: center center;
    left: 0;
    top: -60px;
    background-size: 650px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame_aviator_banger {
        background-size: 500px;
        top: -143px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame_aviator_banger {
        background-size: 485px;
        top: -98px;
        left: 0
    }
}

@media (max-width: 375px) {
    .WheelFrame_aviator_banger {
        background-size: 440px;
        top: -90px;
        left: 4px
    }
}

.WheelFrame_chicks-turkey, .WheelFrame_chicks-bangladesh, .WheelFrame_chicks-uzbekistan, .WheelFrame_chicks-azerbaijan {
    background-image: url(landings/wheels/chicksTurkey/frame.webp);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (max-width: 1180px),(max-height: 1180px) {
    .WheelFrame_chicks-turkey, .WheelFrame_chicks-bangladesh, .WheelFrame_chicks-uzbekistan, .WheelFrame_chicks-azerbaijan {
        background-size: 770px;
        top: -45px
    }
}

@media (max-width: 576px),(max-height: 768px) {
    .WheelFrame_chicks-turkey, .WheelFrame_chicks-bangladesh, .WheelFrame_chicks-uzbekistan, .WheelFrame_chicks-azerbaijan {
        background-size: 515px;
        top: -15px
    }
}

@media (max-height: 576px) {
    .WheelFrame_chicks-turkey, .WheelFrame_chicks-bangladesh, .WheelFrame_chicks-uzbekistan, .WheelFrame_chicks-azerbaijan {
        background-position: right center;
        background-size: 515px;
        right: -25px;
        top: 25px
    }
}

.WheelFrame_crazy-time {
    background-image: url(landings/wheels/crazytime/frame.svg);
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 670px;
    z-index: 2
}

@media (max-width: 1180px) {
    .WheelFrame_crazy-time {
        background-size: 570px
    }
}

@media (max-width: 768px) {
    .WheelFrame_crazy-time {
        background-size: 400px
    }
}

.WheelFrame_roulette {
    background-image: url(landings/wheels/roulette/frame.svg);
    top: -20px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: auto
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame_roulette {
        background-size: 308px;
        top: -10px
    }
}

.WheelFrame_sweet-bonanza {
    background-image: url(landings/wheels/bonanza/frame.svg);
    top: -20px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: auto
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame_sweet-bonanza {
        background-size: 308px;
        top: -10px
    }
}

.WheelFrame_olympus {
    background-image: url(landings/wheels/olympus/frame.svg);
    top: -10px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-size: auto
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame_olympus {
        background-size: 308px;
        top: -7px
    }
}

.WheelFrame-lights {
    width: 100%;
    height: 100%;
    position: absolute;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.WheelFrame-lights_teenagers {
    margin-top: -7px
}

.WheelFrame-lights_aviator, .WheelFrame-lights_chicks-turkey, .WheelFrame-lights_chicks-bangladesh, .WheelFrame-lights_chicks-uzbekistan, .WheelFrame-lights_chicks-azerbaijan {
    top: 0;
    left: 0
}

.WheelFrame-lights__first {
    background-image: url(landings/wheels/girls/lights_default.webp);
    background-repeat: no-repeat;
    background-position: center center;
    animation-name: blik1
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame-lights__first {
        background-size: 470px
    }
}

.WheelFrame-lights__first_girls_banger {
    background-size: 800px
}

@media (max-width: 1440px) and (max-height: 1180px) {
    .WheelFrame-lights__first_girls_banger {
        background-size: 720px
    }
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame-lights__first_girls_banger {
        background-size: 470px
    }
}

.WheelFrame-lights__first_teenagers {
    background-image: url(landings/wheels/teenagers/lights_default.webp)
}

@media (max-width: 768px),(max-height: 768px) {
    .WheelFrame-lights__first_teenagers {
        background-size: 380px
    }
}

.WheelFrame-lights__first_cards {
    background-image: url(landings/wheels/cards/lights_default.webp);
    background-size: 710px;
    margin-top: 65px
}

@media (max-width: 1180px) {
    .WheelFrame-lights__first_cards {
        background-size: 560px;
        margin-top: 50px
    }
}

@media (max-width: 576px) {
    .WheelFrame-lights__first_cards {
        background-size: 375px;
        margin-top: 35px
    }
}

.WheelFrame-lights__first_aviator {
    background-image: url(landings/wheels/aviator/stars.webp);
    mix-blend-mode: color-dodge;
    top: 15px;
    left: -18px;
    background-size: 650px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame-lights__first_aviator {
        background-size: 590px;
        top: 15px;
        left: -13px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame-lights__first_aviator {
        background-size: 490px;
        top: 5px;
        left: -15px
    }
}

@media (max-width: 375px) {
    .WheelFrame-lights__first_aviator {
        background-size: 400px;
        top: 10px;
        left: -10px
    }
}

.WheelFrame-lights__first_aviator_banger {
    background-image: url(landings/wheels/aviator/banger_stars.webp);
    mix-blend-mode: color-dodge;
    top: 5px;
    left: -10px;
    background-size: 650px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame-lights__first_aviator_banger {
        background-size: 520px;
        top: 5px;
        left: -10px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame-lights__first_aviator_banger {
        background-size: 490px;
        top: 5px;
        left: -10px
    }
}

@media (max-width: 375px) {
    .WheelFrame-lights__first_aviator_banger {
        background-size: 450px;
        top: 5px;
        left: -5px
    }
}

.WheelFrame-lights__first_chicks-turkey, .WheelFrame-lights__first_chicks-bangladesh, .WheelFrame-lights__first_chicks-uzbekistan, .WheelFrame-lights__first_chicks-azerbaijan {
    background-image: url(landings/wheels/aviator/stars.webp);
    mix-blend-mode: color-dodge;
    background-size: 710px;
    top: 10px;
    left: -10px
}

@media (max-width: 1180px),(max-height: 1180px) {
    .WheelFrame-lights__first_chicks-turkey, .WheelFrame-lights__first_chicks-bangladesh, .WheelFrame-lights__first_chicks-uzbekistan, .WheelFrame-lights__first_chicks-azerbaijan {
        background-size: 570px
    }
}

@media (max-width: 576px),(max-height: 768px) {
    .WheelFrame-lights__first_chicks-turkey, .WheelFrame-lights__first_chicks-bangladesh, .WheelFrame-lights__first_chicks-uzbekistan, .WheelFrame-lights__first_chicks-azerbaijan {
        background-size: 380px;
        top: 6px;
        left: -6px
    }
}

@media (max-height: 576px) {
    .WheelFrame-lights__first_chicks-turkey, .WheelFrame-lights__first_chicks-bangladesh, .WheelFrame-lights__first_chicks-uzbekistan, .WheelFrame-lights__first_chicks-azerbaijan {
        background-position: right center;
        background-size: 380px;
        top: 0;
        left: -75px
    }
}

.WheelFrame-lights__first_crazy-time {
    background-size: 630px;
    background-image: url(landings/wheels/crazytime/lights_1.webp)
}

@media (max-width: 1180px) {
    .WheelFrame-lights__first_crazy-time {
        background-size: 545px
    }
}

@media (max-width: 768px) {
    .WheelFrame-lights__first_crazy-time {
        background-size: 373px;
        top: 0;
        left: 0
    }
}

.WheelFrame-lights__first_roulette {
    margin-top: 40px;
    margin-left: 5px;
    background-image: url(landings/wheels/roulette/light1.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__first_roulette {
        background-size: 350px;
        margin-top: 25px
    }
}

.WheelFrame-lights__first_sweet-bonanza {
    margin-top: 15px;
    margin-left: 0;
    background-image: url(landings/wheels/bonanza/light1.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__first_sweet-bonanza {
        background-size: 343px;
        margin-top: 7px
    }
}

.WheelFrame-lights__first_olympus {
    margin-top: 35px;
    margin-left: 0;
    background-image: url(landings/wheels/olympus/light1.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__first_olympus {
        background-size: 343px;
        margin-top: 14px
    }
}

.WheelFrame-lights__second {
    background-image: url(landings/wheels/girls/lights_variant.webp);
    background-repeat: no-repeat;
    background-position: center center;
    animation-name: blik2
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame-lights__second {
        background-size: 360px
    }
}

.WheelFrame-lights__second_girls_banger {
    background-size: 625px
}

@media (max-width: 1440px) and (max-height: 1180px) {
    .WheelFrame-lights__second_girls_banger {
        background-size: 555px
    }
}

@media (max-width: 768px) and (max-height: 1180px) {
    .WheelFrame-lights__second_girls_banger {
        background-size: 360px
    }
}

.WheelFrame-lights__second_teenagers {
    background-image: url(landings/wheels/teenagers/lights_variant.webp)
}

@media (max-width: 768px),(max-height: 768px) {
    .WheelFrame-lights__second_teenagers {
        background-size: 425px
    }
}

.WheelFrame-lights__second_cards {
    background-image: url(landings/wheels/cards/lights-variant.webp);
    mix-blend-mode: color-dodge;
    background-size: 650px;
    margin-top: 70px
}

@media (max-width: 1180px) {
    .WheelFrame-lights__second_cards {
        background-size: 490px;
        margin-top: 50px
    }
}

@media (max-width: 576px) {
    .WheelFrame-lights__second_cards {
        background-size: 330px;
        margin-top: 35px
    }
}

.WheelFrame-lights__second_aviator {
    background-image: url(landings/wheels/aviator/stars.webp);
    mix-blend-mode: color-dodge;
    transform: rotate(180deg);
    background-size: 650px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame-lights__second_aviator {
        background-size: 590px;
        top: 3px;
        left: 3px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame-lights__second_aviator {
        background-size: 500px;
        top: 2px;
        left: 0
    }
}

@media (max-width: 375px) {
    .WheelFrame-lights__second_aviator {
        background-size: 400px;
        top: 5px;
        left: 0
    }
}

.WheelFrame-lights__second_aviator_banger {
    background-image: url(landings/wheels/aviator/stars.webp);
    mix-blend-mode: color-dodge;
    transform: rotate(180deg);
    top: -5px;
    left: 5px;
    background-size: 670px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .WheelFrame-lights__second_aviator_banger {
        background-size: 520px;
        top: -5px;
        left: 5px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .WheelFrame-lights__second_aviator_banger {
        background-size: 490px;
        top: -5px;
        left: 5px
    }
}

@media (max-width: 375px) {
    .WheelFrame-lights__second_aviator_banger {
        background-size: 450px;
        top: -5px;
        left: 5px
    }
}

.WheelFrame-lights__second_chicks-turkey, .WheelFrame-lights__second_chicks-bangladesh, .WheelFrame-lights__second_chicks-uzbekistan, .WheelFrame-lights__second_chicks-azerbaijan {
    background-image: url(landings/wheels/aviator/stars.webp);
    mix-blend-mode: color-dodge;
    transform: rotate(180deg);
    background-size: 710px;
    top: 0;
    left: 10px
}

@media (max-width: 1180px),(max-height: 1180px) {
    .WheelFrame-lights__second_chicks-turkey, .WheelFrame-lights__second_chicks-bangladesh, .WheelFrame-lights__second_chicks-uzbekistan, .WheelFrame-lights__second_chicks-azerbaijan {
        background-size: 570px
    }
}

@media (max-width: 576px),(max-height: 768px) {
    .WheelFrame-lights__second_chicks-turkey, .WheelFrame-lights__second_chicks-bangladesh, .WheelFrame-lights__second_chicks-uzbekistan, .WheelFrame-lights__second_chicks-azerbaijan {
        background-size: 380px;
        left: 6px
    }
}

@media (max-height: 576px) {
    .WheelFrame-lights__second_chicks-turkey, .WheelFrame-lights__second_chicks-bangladesh, .WheelFrame-lights__second_chicks-uzbekistan, .WheelFrame-lights__second_chicks-azerbaijan {
        background-position: left center;
        background-size: 380px;
        top: 0;
        left: -60px
    }
}

.WheelFrame-lights__second_crazy-time {
    background-size: 524px;
    background-image: url(landings/wheels/crazytime/lights_2.webp)
}

@media (max-width: 1180px) {
    .WheelFrame-lights__second_crazy-time {
        background-size: 459px
    }
}

@media (max-width: 768px) {
    .WheelFrame-lights__second_crazy-time {
        background-size: 312px
    }
}

.WheelFrame-lights__second_roulette {
    margin-top: 85px;
    margin-left: -5px;
    background-image: url(landings/wheels/roulette/light2.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__second_roulette {
        background-size: 355px;
        margin-top: 50px
    }
}

.WheelFrame-lights__second_sweet-bonanza {
    margin-top: 85px;
    margin-left: -5px;
    background-image: url(landings/wheels/bonanza/light2.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__second_sweet-bonanza {
        background-size: 343px;
        margin-top: 35px
    }
}

.WheelFrame-lights__second_olympus {
    margin-top: 85px;
    margin-left: -5px;
    background-image: url(landings/wheels/olympus/light2.svg)
}

@media (max-width: 1180px),(max-height: 768px) {
    .WheelFrame-lights__second_olympus {
        background-size: 343px;
        margin-top: 35px
    }
}

.WheelFrame-lights_fast {
    animation-duration: .5s
}

.WheelFrame-bg {
    display: none
}

.WheelFrame-bg__first_crazy-time {
    display: block;
    background-image: url(landings/wheels/crazytime/coins.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 840px;
    height: 628px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

@media (max-width: 1180px) {
    .WheelFrame-bg__first_crazy-time {
        width: 790px;
        height: 590px;
        margin-left: 15px
    }
}

@media (max-width: 768px) {
    .WheelFrame-bg__first_crazy-time {
        width: 520px;
        height: 389px
    }
}

.WheelFrame-bg__second_crazy-time {
    display: block;
    position: absolute;
    width: 920px;
    height: 900px;
    background-image: url(landings/wheels/crazytime/shine.webp);
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    background-size: contain;
    left: 50%;
    top: 50%;
    transform: translate(-52%, -50%);
    z-index: 0
}

@media (max-width: 1180px) {
    .WheelFrame-bg__second_crazy-time {
        transform: translate(-45%, -45%)
    }
}

@media (max-width: 768px) {
    .WheelFrame-bg__second_crazy-time {
        width: 550px;
        height: 530px
    }
}

@keyframes blik1 {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes blik2 {
    0% {
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.Wheel {
    background: #000;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100%;
    height: 100dvh;
    position: relative;
    overflow: hidden
}

.Wheel_girls-bangladesh {
    background-image: url(landings/wheels/girls/girls_background_bangladesh.webp)
}

.Wheel_girls {
    background-image: url(landings/wheels/girls/girls_background.webp)
}

.Wheel_teenagers {
    background-image: url(landings/wheels/teenagers/background.webp)
}

.Wheel_aviator {
    background-image: url(landings/wheels/aviator/background.webp);
    background-color: var(--bgWheelAviator);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, .25))
}

@media (min-height: 1024px) and (max-width: 1180px) {
    .Wheel_aviator {
        height: 100vh
    }
}

@media (min-height: 812px) and (max-width: 576px) {
    .Wheel_aviator {
        height: 100vh
    }
}

.Wheel_chicks-turkey {
    background-image: url(landings/wheels/chicksTurkey/background_turkey.webp);
    background-position: center center
}

@media (max-width: 1180px) {
    .Wheel_chicks-turkey {
        height: 1024px
    }
}

@media (max-width: 576px) {
    .Wheel_chicks-turkey {
        height: 812px
    }
}

@media (min-height: 1024px) and (max-width: 1180px) {
    .Wheel_chicks-turkey {
        height: 100vh
    }
}

@media (min-height: 812px) and (max-width: 576px) {
    .Wheel_chicks-turkey {
        height: 100vh
    }
}

@media (max-height: 576px) {
    .Wheel_chicks-turkey {
        height: 100vh
    }
}

.Wheel_chicks-bangladesh {
    background-image: url(landings/wheels/chicksTurkey/background_bangladesh.webp);
    background-position: center center
}

@media (max-width: 1180px) {
    .Wheel_chicks-bangladesh {
        height: 1024px
    }
}

@media (max-width: 576px) {
    .Wheel_chicks-bangladesh {
        height: 812px
    }
}

@media (min-height: 1024px) and (max-width: 1180px) {
    .Wheel_chicks-bangladesh {
        height: 100vh
    }
}

@media (min-height: 812px) and (max-width: 576px) {
    .Wheel_chicks-bangladesh {
        height: 100vh
    }
}

@media (max-height: 576px) {
    .Wheel_chicks-bangladesh {
        height: 100vh
    }
}

.Wheel_chicks-uzbekistan {
    background-image: url(landings/wheels/chicksTurkey/background_uzbekistan.webp);
    background-position: center center
}

@media (max-width: 1180px) {
    .Wheel_chicks-uzbekistan {
        height: 1024px
    }
}

@media (max-width: 576px) {
    .Wheel_chicks-uzbekistan {
        height: 812px
    }
}

@media (min-height: 1024px) and (max-width: 1180px) {
    .Wheel_chicks-uzbekistan {
        height: 100vh
    }
}

@media (min-height: 812px) and (max-width: 576px) {
    .Wheel_chicks-uzbekistan {
        height: 100vh
    }
}

@media (max-height: 576px) {
    .Wheel_chicks-uzbekistan {
        height: 100vh
    }
}

.Wheel_chicks-azerbaijan {
    background-image: url(landings/wheels/chicksTurkey/background_azerbaijan.webp);
    background-position: center center
}

@media (max-width: 1180px) {
    .Wheel_chicks-azerbaijan {
        height: 1024px
    }
}

@media (max-width: 576px) {
    .Wheel_chicks-azerbaijan {
        height: 812px
    }
}

@media (min-height: 1024px) and (max-width: 1180px) {
    .Wheel_chicks-azerbaijan {
        height: 100vh
    }
}

@media (min-height: 812px) and (max-width: 576px) {
    .Wheel_chicks-azerbaijan {
        height: 100vh
    }
}

@media (max-height: 576px) {
    .Wheel_chicks-azerbaijan {
        height: 100vh
    }
}

.Wheel_crazy-time {
    background-color: var(--black);
    background-image: url(landings/wheels/crazytime/bg_desktop.webp)
}

.Wheel_cards {
    background-image: url(landings/wheels/cards/background.webp)
}

@media (max-width: 768px) {
    .Wheel_cards {
        background-image: url(landings/wheels/cards/background_mobile.webp);
        background-position: center
    }
}

.Wheel_roulette {
    background: #250505
}

.Wheel_sweet-bonanza {
    background-image: url(landings/wheels/bonanza/background.webp)
}

@media (max-width: 768px) {
    .Wheel_sweet-bonanza {
        background-position: left
    }
}

.Wheel_olympus {
    background-image: url(landings/wheels/olympus/background.webp)
}

@media (max-width: 768px) {
    .Wheel_olympus {
        background-position: center
    }
}

.Wheel__scoreboard {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: -50px
}

.Wheel__scoreboard_girls_banger {
    margin-top: 0
}

@media (max-width: 768px) {
    .Wheel__scoreboard_girls_banger {
        margin-top: -50px
    }
}

.Wheel__scoreboard_cards {
    margin-top: 25px
}

@media (max-width: 1180px) {
    .Wheel__scoreboard_cards {
        margin-top: 34px
    }
}

@media (max-width: 576px) {
    .Wheel__scoreboard_cards {
        margin-top: 5px
    }
}

.Wheel__scoreboard_aviator {
    margin-left: -5px;
    margin-top: -56px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .Wheel__scoreboard_aviator {
        margin-top: -152px;
        margin-left: -18px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .Wheel__scoreboard_aviator {
        margin-top: -98px;
        margin-left: -15px
    }
}

@media (max-width: 375px) {
    .Wheel__scoreboard_aviator {
        margin-top: -88px;
        margin-left: -10px
    }
}

.Wheel__scoreboard_aviator_banger {
    margin-left: -6px;
    margin-top: -60px
}

@media (max-width: 1180px) and (max-height: 1180px) {
    .Wheel__scoreboard_aviator_banger {
        margin-top: -140px
    }
}

@media (max-width: 576px) and (max-height: 1180px) {
    .Wheel__scoreboard_aviator_banger {
        margin-top: -98px;
        margin-left: -7px
    }
}

.Wheel__scoreboard_chicks-turkey, .Wheel__scoreboard_chicks-bangladesh, .Wheel__scoreboard_chicks-uzbekistan, .Wheel__scoreboard_chicks-azerbaijan {
    margin-top: 0;
    margin-left: 0
}

@media (max-width: 1180px),(max-height: 1180px) {
    .Wheel__scoreboard_chicks-turkey, .Wheel__scoreboard_chicks-bangladesh, .Wheel__scoreboard_chicks-uzbekistan, .Wheel__scoreboard_chicks-azerbaijan {
        margin-top: -45px
    }
}

@media (max-width: 576px),(max-height: 768px) {
    .Wheel__scoreboard_chicks-turkey, .Wheel__scoreboard_chicks-bangladesh, .Wheel__scoreboard_chicks-uzbekistan, .Wheel__scoreboard_chicks-azerbaijan {
        margin-top: -10px
    }
}

@media (max-height: 576px) {
    .Wheel__scoreboard_chicks-turkey, .Wheel__scoreboard_chicks-bangladesh, .Wheel__scoreboard_chicks-uzbekistan, .Wheel__scoreboard_chicks-azerbaijan {
        margin-left: calc(100% - 520px);
        margin-top: 25px
    }
}

.Wheel__scoreboard_idle {
    animation-name: idle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.Wheel__scoreboard_crazy-time {
    position: relative;
    z-index: 2;
    margin-top: 1px
}

.Wheel__scoreboard_roulette {
    position: relative;
    z-index: 2;
    margin-top: 0
}

@media (max-width: 1180px),(max-height: 768px) {
    .Wheel__scoreboard_roulette {
        margin-top: 0
    }
}

.Wheel__scoreboard_sweet-bonanza {
    position: relative;
    z-index: 2;
    margin-top: -15px
}

.Wheel__scoreboard_olympus {
    position: relative;
    z-index: 2;
    margin-top: 0
}

@keyframes idle {
    0% {
        transform: rotate(-4deg)
    }
    50% {
        transform: rotate(4deg)
    }
    to {
        transform: rotate(-4deg)
    }
}

.StaticPagesHeader {
    display: flex;
    flex-direction: column
}

.StaticPagesHeader__header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 68px;
    background: var(--bgSecondary);
    border-bottom: 1px solid var(--bgHeaderSeparator)
}

@media (max-width: 768px) {
    .StaticPagesHeader__header {
        height: 70px;
        padding: 21px 0 21px 16px
    }
}

.StaticPagesHeader__header_content {
    width: 100%;
    margin: 0 auto
}

@media (min-width: 768px) {
    .StaticPagesHeader__header_content {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .StaticPagesHeader__header_content {
        max-width: 960px
    }
}

@media (min-width: 1180px) {
    .StaticPagesHeader__header_content {
        max-width: 1104px
    }
}

.StaticPagesHeader__header_logo {
    width: 101px;
    height: 45px;
    cursor: pointer
}

.StaticPagesHeader__header_logo svg {
    width: 100%;
    height: 100%
}

.AboutItem {
    display: flex;
    flex-flow: column
}

.AboutItem__name {
    font-family: Unbounded;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    color: var(--textPrimary)
}

.AboutItem__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active)
}

.AboutItem__description {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    opacity: .7;
    margin-top: 8px
}

.GeneralInfo {
    display: flex;
    flex-flow: column;
    gap: 8px;
    margin-top: 40px
}

@media (max-width: 1180px) {
    .GeneralInfo {
        margin-top: 0
    }
}

.GeneralInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textSecondary);
    padding: 8px 0
}

.GeneralInfo-header {
    display: flex;
    gap: 36px
}

@media (max-width: 1180px) {
    .GeneralInfo-header {
        flex-direction: column;
        gap: 16px
    }
}

.GeneralInfo-header__name {
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
    font-family: Unbounded;
    color: var(--textSecondary);
    width: 219px;
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .GeneralInfo-header__name {
        font-size: 14px;
        line-height: 130%;
        font-weight: 500
    }
}

.GeneralInfo-header-block {
    display: flex;
    flex-flow: column;
    gap: 20px
}

@media (max-width: 1180px) {
    .GeneralInfo-header-block {
        gap: 16px
    }
}

.GeneralInfo-header-block__project {
    font-size: 30px;
    line-height: 130%;
    font-weight: 400;
    font-family: Unbounded;
    color: var(--textPrimary);
    margin-left: 200px
}

@media (max-width: 1180px) {
    .GeneralInfo-header-block__project {
        font-size: 20px;
        line-height: 130%;
        font-weight: 300;
        margin: 0
    }
}

.GeneralInfo-header-block__title {
    font-size: 30px;
    line-height: 130%;
    font-weight: 300;
    font-family: Unbounded;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .GeneralInfo-header-block__title {
        font-size: 20px;
        line-height: 130%;
        font-weight: 300;
        margin: 0
    }
}

.GeneralInfo-header-block__second {
    font-size: 30px;
    line-height: 130%;
    font-weight: 300;
    font-family: Unbounded;
    color: var(--textPrimary);
    position: relative;
    text-align: right
}

@media (max-width: 1180px) {
    .GeneralInfo-header-block__second {
        font-size: 20px;
        line-height: 130%;
        font-weight: 300;
        text-align: left
    }
}

.GeneralInfo-country {
    position: relative
}

.GeneralInfo-country__map {
    position: absolute;
    top: 108px;
    left: 655px;
    width: 100%
}

@media (max-width: 1180px) {
    .GeneralInfo-country__map {
        position: static;
        display: flex;
        margin-top: 20px
    }
}

@media (max-width: 1180px) {
    .GeneralInfo-country__map_img {
        width: inherit
    }
}

.GeneralInfo-country__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    width: 420px;
    margin: 142px 0 0 303px;
    opacity: .7
}

@media (max-width: 1180px) {
    .GeneralInfo-country__desc {
        position: initial;
        width: 100%;
        top: 0;
        left: 0;
        margin: 20px 0 0
    }
}

.GeneralInfo-country__first {
    position: absolute;
    top: 142px;
    left: 283px;
    height: 924px;
    border: 1px solid var(--borderCaterogy);
    flex-shrink: 0;
    opacity: .5
}

@media (max-width: 1180px) {
    .GeneralInfo-country__first {
        display: none
    }
}

.GeneralInfo-country__second {
    position: absolute;
    top: 400px;
    left: 554px;
    height: 800px;
    border: 1px solid var(--borderCaterogy);
    stroke-width: 0;
    flex-shrink: 0;
    opacity: .5
}

@media (max-width: 1180px) {
    .GeneralInfo-country__second {
        position: inherit;
        width: 100%;
        height: 1px;
        background-color: var(--bgGrey);
        margin: 20px 0;
        opacity: .2
    }
}

.GeneralInfo-country__third {
    position: absolute;
    top: 600px;
    left: 829px;
    height: 468px;
    border: 1px solid var(--borderCaterogy);
    stroke-width: 0;
    flex-shrink: 0;
    opacity: .5
}

@media (max-width: 1180px) {
    .GeneralInfo-country__third {
        position: inherit;
        width: 100%;
        height: 1px;
        background-color: var(--bgGrey);
        margin: 20px 0;
        opacity: .2
    }
}

.GeneralInfo-country-info {
    display: grid;
    grid-template-columns:1fr 271px 275px 1fr;
    margin-left: 303px
}

@media (max-width: 1180px) {
    .GeneralInfo-country-info {
        display: flex;
        flex-flow: column;
        margin: 32px 0 0
    }
}

.GeneralInfo-country-info_first {
    margin-top: 76px;
    width: 245px
}

@media (max-width: 1180px) {
    .GeneralInfo-country-info_first {
        width: 100%;
        margin: 0
    }
}

.GeneralInfo-country-info_second {
    width: 245px;
    margin-top: 276px;
    margin-left: 26px
}

@media (max-width: 1180px) {
    .GeneralInfo-country-info_second {
        width: 100%;
        margin: 0
    }
}

.GeneralInfo-country-info_third {
    width: 202px;
    margin-top: 368px;
    margin-left: 30px
}

@media (max-width: 1180px) {
    .GeneralInfo-country-info_third {
        width: 100%;
        margin: 0
    }
}

.ProviderItem {
    display: flex;
    width: 170px;
    height: 170px;
    padding: 45px 45px 8px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 19px;
    border: 1px solid var(--borderCaterogy)
}

.ProviderItem:last-child {
    display: inline-flex;
    padding: 59px 20px 8px 21px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 33px
}

@media (max-width: 1180px) {
    .ProviderItem:last-child {
        padding: 56px 17px 8px;
        gap: 29px
    }
}

@media (max-width: 1180px) {
    .ProviderItem {
        width: 100%;
        padding: 42px 40px 8px 41px;
        gap: 17px
    }
}

.ProviderItem__img {
    width: 80px
}

@media (max-width: 1180px) {
    .ProviderItem__img {
        width: 77px
    }
}

.ProviderItem__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary)
}

.ProviderItem__number {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 33px;
    font-size: 40px;
    line-height: 130%;
    font-weight: 600;
    font-family: Unbounded;
    color: var(--active)
}

.ProviderInfo {
    display: flex;
    flex-flow: column;
    margin-top: 80px
}

@media (max-width: 1180px) {
    .ProviderInfo {
        margin-top: 60px
    }
}

.ProviderInfo__name {
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
    font-family: Unbounded;
    color: var(--textSecondary);
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .ProviderInfo__name {
        font-size: 14px;
        line-height: 130%;
        font-weight: 500
    }
}

.ProviderInfo-list {
    display: grid;
    margin: 16px 0 0 283px;
    gap: 16px
}

@media (max-width: 1180px) {
    .ProviderInfo-list {
        margin: 0
    }
}

.ProviderInfo-list__mobile {
    display: none
}

@media (max-width: 1180px) {
    .ProviderInfo-list__mobile {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 16px;
        margin-top: 16px
    }
}

.ProviderInfo-list__fist {
    display: grid;
    grid-template-columns:repeat(3, 170px);
    gap: 16px
}

@media (max-width: 1180px) {
    .ProviderInfo-list__fist {
        display: none
    }
}

.ProviderInfo-list__second {
    display: grid;
    grid-template-columns:repeat(4, 170px);
    gap: 16px;
    margin-left: 93px
}

@media (max-width: 1180px) {
    .ProviderInfo-list__second {
        display: none
    }
}

.ProviderInfo-list__third {
    display: grid;
    grid-template-columns:repeat(4, 170px);
    gap: 16px
}

@media (max-width: 1180px) {
    .ProviderInfo-list__third {
        display: none
    }
}

.PartnerItem {
    display: flex;
    flex-flow: column;
    padding: 60px 20px 71px;
    gap: 12px
}

@media (max-width: 1180px) {
    .PartnerItem {
        margin-top: 16px;
        padding: 20px;
        border: 1px solid var(--bgGrey)
    }
}

.PartnerItem__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active)
}

.PartnerItem__description {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    opacity: .8
}

.PartnerItem__icon {
    margin-top: 8px
}

.PartnersInfo {
    position: relative;
    display: grid;
    grid-template-columns:1fr 271px 275px 1fr;
    padding: 40px 0;
    margin-top: 39px
}

@media (max-width: 1180px) {
    .PartnersInfo {
        margin-top: 60px;
        padding: 0;
        background: none;
        display: block
    }
}

.PartnersInfo__back {
    position: absolute;
    top: 0;
    left: -100%;
    width: 1000%;
    height: 401px;
    background: #8c94b20f
}

@media (max-width: 1180px) {
    .PartnersInfo__back {
        display: none;
        margin: 0;
        width: 100%
    }
}

.PartnersInfo__title {
    font-size: 20px;
    line-height: 120%;
    font-weight: 500;
    font-family: Unbounded, sans-serif;
    color: var(--textSecondary);
    text-transform: uppercase
}

@media (max-width: 1180px) {
    .PartnersInfo__title {
        font-size: 14px;
        line-height: 130%;
        font-weight: 500
    }
}

.PartnersInfo-card {
    display: flex;
    flex-flow: column;
    gap: 12px
}

.PartnersInfo-card__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active)
}

.PartnersInfo-card__description {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    opacity: .8
}

.PartnersInfo-card__icon {
    margin-top: 8px
}

.InfoHeader {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary);
    padding: 24px 0;
    text-transform: capitalize
}

@media (max-width: 1180px) {
    .InfoHeader {
        height: 44px;
        justify-content: center;
        font-size: 18px;
        line-height: 120%;
        font-weight: 600;
        padding: 8px 0;
        margin-bottom: 8px
    }
}

.ConditionsInfo {
    width: 100%
}

.ConditionsInfo__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap;
    margin: 32px 0 8px
}

.ConditionsInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding: 6px 0 18px
}

.ConditionsInfo__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    white-space: pre-wrap;
    margin-top: 8px
}

.KycAmlInfo {
    width: 100%
}

.KycAmlInfo__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap;
    margin: 32px 0 8px
}

.KycAmlInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding: 6px 0
}

.KycAmlInfo__secondUndertitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap
}

.KycAmlInfo__sub-title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    margin-bottom: 4px
}

.KycAmlInfo__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    white-space: pre-wrap
}

.PrivacyInfo {
    width: 100%;
    display: flex;
    flex-flow: column
}

.PrivacyInfo__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap;
    margin: 32px 0 8px
}

.PrivacyInfo__title:nth-child(2) {
    margin: 0 0 8px
}

@media (max-width: 1180px) {
    .PrivacyInfo__title {
        margin: 18px 0 8px
    }
}

.PrivacyInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding-top: 18px
}

.PrivacyInfo__sub-title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    margin: 12px 0 4px
}

.PrivacyInfo__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    white-space: pre-wrap
}

.CookiesInfo {
    width: 100%
}

.CookiesInfo__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap;
    margin: 32px 0 8px;
    text-transform: capitalize
}

.CookiesInfo__title:nth-child(2) {
    margin: 0 0 8px
}

@media (max-width: 1180px) {
    .CookiesInfo__title {
        margin: 8px 0
    }
}

.CookiesInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding-top: 8px
}

.CookiesInfo__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    white-space: pre-wrap;
    margin-top: 8px
}

.GambleInfo {
    width: 100%;
    display: flex;
    flex-flow: column
}

.GambleInfo__title {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary);
    white-space: pre-wrap;
    margin: 32px 0 8px
}

.GambleInfo__title:nth-child(2) {
    margin: 0 0 8px
}

.GambleInfo__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding: 6px 0 18px
}

.GambleInfo__sub-title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    margin: 12px 0 4px
}

.GambleInfo__description {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    white-space: pre-wrap
}

.GambleInfo__link {
    text-decoration: none;
    color: var(--active)
}

.SupportItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--bgGrey);
    border-radius: 16px;
    gap: 8px;
    max-width: 554px
}

@media (max-width: 1180px) {
    .SupportItem {
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: column;
        gap: 4px
    }
}

.SupportItem-key {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 213px
}

.SupportItem-key__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active)
}

.SupportItem-key__logo {
    display: flex;
    align-items: center
}

.SupportItem-key__logo svg, .SupportItem-key__logo path {
    fill: var(--primary)
}

.SupportItem__description {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textPrimary);
    padding-right: 5px
}

.SupportItem__notice {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.SupportInfo__list {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    width: 100%;
    gap: 14px
}

@media (max-width: 1180px) {
    .SupportInfo__list {
        gap: 16px;
        margin-top: 8px
    }
}

.WelcomeBonusInfoFirst {
    display: flex;
    gap: 16px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst {
        display: flex;
        flex-flow: column
    }
}

.WelcomeBonusInfoFirst-first {
    display: flex;
    flex-flow: column;
    width: 358px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-first {
        width: 100%
    }
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-first__header {
        position: fixed;
        display: flex;
        width: 100%;
        height: 44px;
        left: 0;
        z-index: 20;
        padding: 8px;
        background: var(--dialogBackground)
    }
}

.WelcomeBonusInfoFirst-first__header.border {
    box-shadow: 0 1px 1px #0c1a4b26, 0 3px 8px -1px #3232470d
}

.WelcomeBonusInfoFirst-first__title {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-first__title {
        font-size: 18px;
        line-height: 120%;
        font-weight: 600;
        display: flex;
        text-align: center;
        padding: 8px 16px
    }
}

.WelcomeBonusInfoFirst-first__secondTitle {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary);
    padding-top: 8px;
    margin-top: 44px
}

.WelcomeBonusInfoFirst-first__secondRow {
    font-size: 16px;
    line-height: 130%;
    font-weight: 700;
    color: var(--textPrimary)
}

.WelcomeBonusInfoFirst-first__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 24px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-first__desc {
        margin-top: 12px
    }
}

.WelcomeBonusInfoFirst-first__button {
    display: flex;
    align-items: center;
    margin-top: 28px;
    width: 100%
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-first__button {
        margin-top: 16px
    }
}

.WelcomeBonusInfoFirst-first__button_size {
    width: 198px
}

.WelcomeBonusInfoFirst-advert {
    display: flex;
    flex-flow: column;
    position: relative;
    width: 357px;
    height: 386px;
    padding: 16px;
    border: 1px solid var(--bgGrey);
    border-radius: 16px;
    overflow: hidden
}

.WelcomeBonusInfoFirst-advert__title {
    font-size: 48px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active);
    z-index: 1
}

.WelcomeBonusInfoFirst-advert__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    width: 191px;
    z-index: 1
}

.WelcomeBonusInfoFirst-advert__img {
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
    z-index: 0
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-advert__img.first {
        height: 120%
    }
}

.WelcomeBonusInfoFirst-third {
    display: flex;
    flex-flow: column;
    gap: 16px
}

.WelcomeBonusInfoFirst-small {
    display: flex;
    flex-flow: column;
    position: relative;
    width: 357px;
    height: 185px;
    padding: 16px;
    border: 1px solid var(--bgGrey);
    border-radius: 16px;
    overflow: hidden
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoFirst-small {
        width: 100%
    }
}

.WelcomeBonusInfoFirst-small__title {
    font-size: 48px;
    line-height: 130%;
    font-weight: 600;
    color: var(--active);
    z-index: 1
}

.WelcomeBonusInfoFirst-small__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    width: 161px;
    z-index: 1
}

.WelcomeBonusInfoFirst-small__img {
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0
}

.WelcomeBonusInfoRules {
    display: flex;
    flex-flow: column
}

.WelcomeBonusInfoRules__header {
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textSecondary)
}

.WelcomeBonusInfoRules-list {
    display: flex;
    margin-top: 17px;
    gap: 16px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoRules-list {
        display: flex;
        flex-flow: column
    }
}

.WelcomeBonusInfoRules-list-block {
    display: flex;
    flex-flow: column;
    width: 357px;
    gap: 8px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfoRules-list-block {
        width: 100%
    }
}

.WelcomeBonusInfoRules-list-block-header {
    display: flex;
    gap: 4px;
    align-items: center
}

.WelcomeBonusInfoRules-list-block-header__icon svg, .WelcomeBonusInfoRules-list-block-header__icon rect, .WelcomeBonusInfoRules-list-block-header__icon path {
    fill: var(--primary)
}

.WelcomeBonusInfoRules-list-block-header__img {
    display: flex
}

.WelcomeBonusInfoRules-list-block-header__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active);
    display: flex
}

.WelcomeBonusInfoRules-list-block__hr {
    border-radius: 20px;
    border: 1px solid var(--bgGrey)
}

.WelcomeBonusInfoRules-list-block__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary)
}

.TableBonus {
    width: 100%;
    border-collapse: collapse;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bgGrey)
}

.TableBonus__body {
    border: none
}

.TableBonus__row {
    height: 44px
}

.TableBonus__row:last-child .TabelBonus__row__cell {
    border-bottom: 0px
}

.TableBonus__currency {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    border: 1px solid var(--bgGrey);
    width: max-content;
    text-align: center;
    padding: 0 16px
}

.TableBonus__currency_first {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    background-color: var(--bgBonus);
    color: var(--textPrimary);
    border: 1px solid var(--bgGrey);
    padding: 0 16px
}

.TableBonus__cell {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    border: 1px solid var(--bgGrey);
    width: 50%;
    text-align: right;
    padding: 0 16px
}

.TableBonus__cell_first {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    background-color: var(--bgBonus);
    color: var(--textPrimary);
    border: 1px solid var(--bgGrey);
    padding: 0 16px
}

td:first-child {
    padding-left: 16px
}

td:last-child {
    padding-right: 16px
}

.WelcomeDescription {
    display: flex;
    flex-direction: column;
    width: 731px
}

@media (max-width: 1180px) {
    .WelcomeDescription {
        width: 100%
    }
}

.WelcomeDescription__header {
    font-size: 18px;
    line-height: 120%;
    font-weight: 600;
    color: var(--textSecondary);
    margin-bottom: 12px
}

.WelcomeDescription__desc {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 16px
}

.WelcomeDescription__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 700;
    color: var(--active);
    margin-top: 24px
}

.WelcomeDescription-block {
    margin-top: 20px;
    padding-left: 10px
}

.WelcomeDescription-block__title {
    font-size: 22px;
    line-height: 26.61px;
    font-weight: 400;
    color: var(--textPrimary)
}

@media (max-width: 1180px) {
    .WelcomeDescription-block__title {
        font-size: 12px;
        line-height: 120%;
        font-weight: 400
    }
}

@media (max-width: 576px) {
    .WelcomeDescription-block__title {
        font-size: 10px;
        line-height: 140%;
        font-weight: 400
    }
}

.WelcomeDescription-block__description {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    margin-top: 9px
}

@media (max-width: 1180px) {
    .WelcomeDescription-block__description {
        font-size: 9px;
        line-height: 10.89px;
        font-weight: 400
    }
}

.WelcomeDescription__table {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    border-radius: 16px;
    border: 1px solid var(--bgGrey)
}

.WelcomeBonusInfo {
    display: flex;
    flex-flow: column;
    padding: 24px 0 32px;
    gap: 32px
}

@media (max-width: 1180px) {
    .WelcomeBonusInfo {
        padding: 0
    }
}

.GameModeButtons {
    padding: 4px;
    border-radius: 8px;
    background: var(--bgGrey);
    display: flex;
    position: relative
}

.GameModeButtons__btn {
    width: 126px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--textPrimary);
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    cursor: pointer
}

.GameModeButtons__btn svg {
    margin-left: 8px
}

.GameModeButtons__btn.active {
    color: var(--textGameModeActiveColor)
}

.GameModeButtons__active {
    width: 126px;
    height: 44px;
    border-radius: 8px;
    z-index: 1;
    top: 4px;
    background: var(--primary);
    position: absolute;
    left: 4px
}

.ButtonFavorite {
    width: 52px;
    height: 52px;
    background: var(--bgSecondary);
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer
}

.ButtonFavorite svg, .ButtonFavorite path {
    fill: var(--textSecondary)
}

.ButtonFavorite.banger {
    background: var(--bgFavoriteBtnGame)
}

@media (max-width: 1180px) {
    .ButtonFavorite {
        width: 32px;
        height: 32px
    }
}

.ButtonFavorite.favorite svg, .ButtonFavorite.favorite path {
    fill: var(--primary)
}

.SEOH1 {
    color: var(--text-primary);
    font-size: 24px;
    line-height: 33px;
    font-weight: 700;
    margin-top: 0
}

@media (max-width: 1180px) {
    .SEOH1 {
        display: none
    }
}

.VPNBlock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    gap: 24px;
    transition: opacity .6s ease-in-out
}

.VPNBlock.show {
    opacity: 1;
    pointer-events: auto
}

.VPNBlock.hide {
    opacity: 0;
    pointer-events: none
}

@media (max-width: 576px) {
    .VPNBlock {
        flex-direction: column
    }
}

.VPNBlock__message {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: var(--white);
    border-radius: 8px;
    width: 588px;
    text-align: left
}

@media (max-width: 576px) {
    .VPNBlock__message {
        font-size: 14px;
        line-height: 130%;
        font-weight: 700;
        width: 275px;
        text-align: center
    }
}

.CoinStrikeLandingContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    text-align: center
}

.CoinStrikeLandingContent__logo {
    background-image: url(landings/coin-strike/logo.webp);
    background-size: contain;
    width: 218px;
    height: 125px;
    margin-bottom: 16px
}

.CoinStrikeLandingContent__text {
    max-width: 232px;
    color: var(--white);
    font-size: 18px;
    line-height: 25px;
    font-weight: 800;
    margin-bottom: 16px
}

.CoinStrikeLandingContent__button {
    cursor: pointer;
    width: 100%;
    max-width: 229px;
    border-radius: 100px;
    background: linear-gradient(90deg, #e6b786, #fd8508);
    background-size: 200%;
    animation: gradient 2s ease-in infinite
}

@media (max-width: 767px) {
    .CoinStrikeLandingContent__button {
        max-width: 195px
    }
}

@keyframes gradient {
    0% {
        background-position: 0
    }
    50% {
        background-position: 100%
    }
    to {
        background-position: 0
    }
}

.GameSearchButton {
    background: var(--bgProvider);
    border: 1px solid var(--borderPrimary);
    padding: 8px;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px
}

.GameSearchButton svg, .GameSearchButton path, .GameSearchButton rect {
    fill: var(--textPrimary)
}

.GameSortButton {
    background: var(--bgProvider);
    border: 1px solid var(--borderPrimary);
    padding: 8px;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    width: 44px;
    height: 44px;
    align-items: center;
    border-radius: 8px
}

.GameSortButton svg, .GameSortButton path {
    fill: var(--textPrimary);
    stroke: var(--textPrimary)
}

.ProviderFilterSelect {
    width: 100%;
    height: 44px;
    background: var(--bgProvider);
    border: 1px solid var(--borderPrimary);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer
}

.ProviderFilterSelect__value {
    font-size: 14px;
    line-height: 130%;
    font-weight: 600;
    color: var(--textPrimary);
    white-space: nowrap;
    overflow: hidden
}

.ProviderFilterSelect__icon {
    width: 28px;
    height: 28px
}

.ProviderFilterSelect__icon svg, .ProviderFilterSelect__icon path, .ProviderFilterSelect__icon rect {
    fill: var(--textPrimary)
}

.GameSortAndFilter {
    display: grid;
    position: relative;
    grid-template-columns:1fr 40px;
    column-gap: 8px;
    margin-left: auto;
    max-width: 100%
}

@media (max-width: 1180px) {
    .GameSortAndFilter {
        display: flex;
        width: 100%
    }
}

:export {
    chatwootIndex: 9995;
    chatwootIndexHide: 999
}

.CarouselBannersDesktop {
    margin: 24px auto 0;
    width: 100%;
    max-width: 1104px
}

@media (max-width: 1180px) {
    .CarouselBannersDesktop {
        display: none
    }
}

.SkeletonSearchFilterDesktop {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 33px
}

@media (max-width: 1180px) {
    .SkeletonSearchFilterDesktop {
        display: none
    }
}

.GameSortDesktop {
    position: relative;
    width: 100%
}

.GameSortDesktop__title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary)
}

.GameSortDesktop__icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.GameSortDesktop__icon svg, .GameSortDesktop__icon path {
    stroke: var(--textPrimary)
}

.GameSortDesktop__btn {
    display: grid;
    grid-template-columns:28px 1fr 28px;
    padding: 0 16px;
    height: 44px;
    align-items: center;
    background: transparent;
    border: 1px solid var(--borderPrimary);
    border-radius: 8px;
    color: var(--textPrimary);
    text-align: left;
    column-gap: 4px;
    width: 100%;
    cursor: pointer
}

.GameSortDesktop__btn.active {
    border-color: var(--primary)
}

.GameSortDesktop__arrow {
    display: flex;
    align-items: center;
    justify-content: center
}

.GameSortDesktop__content {
    overflow: hidden;
    position: absolute;
    z-index: 2;
    background: var(--bgSecondary);
    width: 100%;
    border-radius: 8px
}

.GameSortDesktop__item {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: pointer
}

.GameSortDesktop__item:hover, .GameSortDesktop__item.active {
    color: var(--primary)
}

.TournamentTimer {
    display: grid;
    grid-template-columns:repeat(4, 60px);
    grid-template-rows:60px
}

.TournamentTimer__block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.TournamentTimer__block:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 44px;
    right: 0;
    top: 8px;
    background: var(--selectBg);
    border-radius: .5px
}

.TournamentTimer__block:last-child:after {
    content: "";
    display: none
}

.TournamentTimer__digit {
    font-size: 20px;
    line-height: 27.24px;
    font-weight: 600;
    color: var(--textPrimary)
}

.TournamentTimer__text {
    font-size: 12px;
    line-height: 120%;
    font-weight: 400;
    color: var(--textSecondary)
}

.TournamentCard {
    background: var(--bgDark);
    border-radius: 8px 8px 16px 16px;
    overflow: hidden
}

.TournamentCard__content {
    padding: 8px 16px 16px
}

.TournamentCard__image {
    width: 100%
}

.TournamentCard__image img {
    width: 100%;
    border-radius: 8px
}

.TournamentCard__image.finish {
    filter: grayscale(1)
}

.TournamentCard__title {
    color: var(--primary);
    font-size: 16px;
    line-height: 130%;
    font-weight: 600;
    text-align: center
}

.TournamentCard__title.finish {
    color: var(--textSecondary)
}

.TournamentCard__prizepool {
    color: var(--primary);
    font-size: 24px;
    line-height: 33px;
    font-weight: 700;
    text-align: center;
    margin-top: 8px
}

.TournamentCard__prizepool.finish {
    color: var(--textSecondary)
}

.TournamentCard__prizepool_title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary);
    margin-top: 4px
}

.TournamentCard__timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px
}

.TournamentCard__timer_title {
    font-size: 14px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textSecondary);
    margin-top: 4px
}

.TournamentCard__button {
    margin-top: 28px
}

.TournamentCard__over {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    color: var(--textPrimary);
    padding-bottom: 50px;
    margin-top: 16px;
    text-align: center
}

.SkeletonContent__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 33px
}

@media (max-width: 1180px) {
    .SkeletonContent__top {
        display: none
    }
}

.SkeletonContent__title {
    margin-top: 29px
}

.SkeletonContent__grid {
    margin-top: 22px
}

.SkeletonContent__grid > span {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(188px, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 16px;
    row-gap: 16px
}

@media (max-width: 1370px) {
    .SkeletonContent__grid > span {
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 1180px) {
    .SkeletonContent__grid > span {
        column-gap: 8px;
        row-gap: 16px;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 768px) {
    .SkeletonContent__grid > span {
        grid-template-columns:repeat(auto-fill, minmax(107px, 1fr))
    }
}

.SkeletonContent__card {
    position: relative
}

.SkeletonContent__card:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    padding-bottom: 115.5963302752%
}

.SkeletonContent__more {
    margin-top: 28px
}

:export {
    largeDesktop: 1440px;
    desktop: 1370px;
    tablet: 1180px;
    smallTablet: 768px;
    phone: 576px;
    smallPhone: 375px
}

.FavoriteGameList {
    position: relative
}

.FavoriteGameList__list {
    margin-top: 20px;
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(188px, 1fr));
    grid-auto-rows: 1fr;
    column-gap: 16px;
    row-gap: 16px
}

@media (max-width: 1370px) {
    .FavoriteGameList__list {
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 1180px) {
    .FavoriteGameList__list {
        column-gap: 8px;
        row-gap: 16px;
        grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))
    }
}

@media (max-width: 768px) {
    .FavoriteGameList__list {
        grid-template-columns:repeat(auto-fill, minmax(107px, 1fr))
    }
}