:root {
    --PhoneInput-color--focus: #03b2cb;
    --PhoneInputInternationalIconPhone-opacity: .8;
    --PhoneInputInternationalIconGlobe-opacity: .65;
    --PhoneInputCountrySelect-marginRight: .35em;
    --PhoneInputCountrySelectArrow-width: .3em;
    --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
    --PhoneInputCountrySelectArrow-borderWidth: 1px;
    --PhoneInputCountrySelectArrow-opacity: .45;
    --PhoneInputCountrySelectArrow-color: currentColor;
    --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
    --PhoneInputCountrySelectArrow-transform: rotate(45deg);
    --PhoneInputCountryFlag-aspectRatio: 1.5;
    --PhoneInputCountryFlag-height: 1em;
    --PhoneInputCountryFlag-borderWidth: 1px;
    --PhoneInputCountryFlag-borderColor: rgba(0, 0, 0, .5);
    --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
    --PhoneInputCountryFlag-backgroundColor--loading: rgba(0, 0, 0, .1)
}

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

.PhoneInputInput {
    flex: 1;
    min-width: 0
}

.PhoneInputCountryIcon {
    width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
    height: var(--PhoneInputCountryFlag-height)
}

.PhoneInputCountryIcon--square {
    width: var(--PhoneInputCountryFlag-height)
}

.PhoneInputCountryIcon--border {
    background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
    box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)
}

.PhoneInputCountryIconImg {
    display: block;
    width: 100%;
    height: 100%
}

.PhoneInputInternationalIconPhone {
    opacity: var(--PhoneInputInternationalIconPhone-opacity)
}

.PhoneInputInternationalIconGlobe {
    opacity: var(--PhoneInputInternationalIconGlobe-opacity)
}

.PhoneInputCountry {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-right: var(--PhoneInputCountrySelect-marginRight)
}

.PhoneInputCountrySelect {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    border: 0;
    opacity: 0;
    cursor: pointer
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
    cursor: default
}

.PhoneInputCountrySelectArrow {
    display: block;
    content: "";
    width: var(--PhoneInputCountrySelectArrow-width);
    height: var(--PhoneInputCountrySelectArrow-width);
    margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
    border-style: solid;
    border-color: var(--PhoneInputCountrySelectArrow-color);
    border-top-width: 0;
    border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
    border-left-width: 0;
    border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
    transform: var(--PhoneInputCountrySelectArrow-transform);
    opacity: var(--PhoneInputCountrySelectArrow-opacity)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow {
    opacity: 1;
    color: var(--PhoneInputCountrySelectArrow-color--focus)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border {
    box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)
}

.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
    opacity: 1;
    color: var(--PhoneInputCountrySelectArrow-color--focus)
}

/*!
* Selector 01.06.2022
*/

@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
    --color-main-first: #fdae05;
    --color-main-second: #fdcd2d;
    --color-main-third: #ffc547;
    --color-side-first: #4C00C9;
    --color-side-second: #2C0965;
    --color-side-third: #2dc53a;
    --color-side-fourth: #013e01;
    --color-side-second-first: #3e2b97;
    --color-side-second-second: #e8650b;
    --color-main-background: #261a46;
    --color-side-background: #150e2a;--color-third-background: #442176;
    --color-fourth-background: #442176;
    --color-fifth-background: #653ba1;
    --color-sixth-background: #331d53;
    --color-seventh-background: #3d1d6a;
    --color-eighth-background: #1d1438;
    --color-nineth-background: #442176;
    --color-tenth-background: #9327b0;
    --color-eleventh-background: #9327b0;
    --color-twelvth-background: #fcae03;
    --color-thirtieth-background: #242831;
    --color-text-first: #fff;
    --color-text-second: #fff;
    --color-text-third: #fff;
    --color-text-fourth: #fff;
    --color-text-fivth: rgba(255, 255, 255, .4901960784);
    --color-text-sixth: #d8d8d8;
    --color-text-placeholder: #000;
    --color-white: #fff;
    --color-black: #000;
    --main-color: #261a46;
    --text-primary-color: rgba(255, 255, 255, .8039215686);
    --text-secondary-color: #fff;
    --primary-light-color: #fdae05;
    --primary-middle-color: #fdcd2d;
    --primary-dark-color: #ff902a;
    --primary-gradient-color: linear-gradient(45deg, #fdcd2d 0%, #ff902a 100%);
    --secondary-light-color: #87d010;
    --secondary-middle-color: #5cb503;
    --secondary-dark-color: #338500;
    --secondary-gradient-color: linear-gradient(45deg, #5cb503 0%, #338500 100%);
    --secondary-2-light-color: #c134e8;
    --secondary-2-middle-color: #9327b0;
    --secondary-2-dark-color: #6c1d82;
    --secondary-2-gradient-color: linear-gradient(45deg, #a864ff 0%, #8a14ff 100%);
    --attention-light-color: #ff95b5;
    --attention-middle-color: #f11da9;
    --attention-dark-color: #b20558;
    --attention-gradient-color: linear-gradient(180deg, #f11da9 0%, #b20558 100%);
    --error-light-color: #ff4b32;
    --error-middle-color: #ec193f;
    --error-dark-color: #a40a41;
    --error-gradient-color: linear-gradient(180deg, #ec193f 0%, #a40a41 100%);
    --neutral-light-color: #653ba1;
    --neutral-middle-color: #442176;
    --neutral-dark-color: #1d1438;
    --neutral-gradient-color: linear-gradient(180deg, #653ba1 0%, #442176 100%);
    --neutral-1-color: #150f29;
    --neutral-2-color: #20163b;
    --neutral-3-color: #251a46;
    --neutral-4-color: #8e80b8;
    --neutral-5-color: #4b358e;
    --neutral-6-color: rgba(37, 25, 70, .5019607843);
    --neutral-7-color: #342563;
    --neutral-8-color: #3f2b7a;
    --neutral-9-color: #b1adbc;
    --neutral-10-color: #ac9dda;
    --primary-1-color: #fdad05;
    --primary-2-color: #fdcd2d;
    --primary-3-color: #ffd958;
    --secondary-1-color: #338500;
    --secondary-2-color: #5cb503;
    --secondary-3-color: #87d010
}

:root {
    --sport-icon: url(https://cdn.friends-casino.io/assets/png/LeftBar/sport.png);
    --sport-icon-big: url(https://cdn.friends-casino.io/assets/png/LeftBar/sport-icon-big.png);
    --sport-icon-active: url(https://cdn.friends-casino.io/assets/png/LeftBar/sport-active.png);
    --sport-icon-small: url(https://cdn.friends-casino.io/assets/png/LeftBar/sport-small.png);
    --sport-icon-small-active: url(https://cdn.friends-casino.io/assets/png/LeftBar/sport-small-active.png)
}

@-webkit-keyframes isSlidingFrame {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateY(150%);
        transform: translateY(150%);
        opacity: 0
    }
}

@keyframes isSlidingFrame {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0
    }
    50% {
        opacity: 1
    }
    to {
        -webkit-transform: translateY(150%);
        transform: translateY(150%);
        opacity: 0
    }
}

@-webkit-keyframes floatup {
    20% {
        opacity: .999
    }
    to {
        transform: translate3d(-50%, -17px, 0);
        opacity: 0
    }
}

@keyframes floatup {
    20% {
        opacity: .999
    }
    to {
        transform: translate3d(-50%, -17px, 0);
        opacity: 0
    }
}

.chatWrapper {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    width: 100%;
    margin-top: 15px;
    padding: 0 10px
}

@media (max-width: 900px) {
    .chatWrapper {
        height: calc(100% + -0px)
    }
    .chatWrapper .liveParams {
        padding: 10px 0 10px 5px
    }
}

.chatWrapper .itemControl {
    position: absolute;
    top: 22px;
    right: 15px
}

.chatWrapper .liveParams {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
    padding-bottom: 20px
}

.chatWrapper .liveParams>.item {
    display: flex;
    align-items: center;
    color: #5b6271;
    font-size: 16px
}

.chatWrapper .liveParams>.item span {
    color: #fff
}

.chatWrapper .chatBlock {
    position: relative;
    display: flex;
    flex: auto;
    flex-direction: column;
    height: 120px;
    min-height: 100px;
    -webkit-transition: all .3s;
    transition: all .3s
}

.chatWrapper .chatBlock .pinnedSystemMessage {
    position: relative;
    top: 0;
    z-index: 1;
    width: 100%;
    margin-bottom: 10px;
    padding-right: 10px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    background: #442176;
    border-left: 5px solid #fdcd2d;
    border-radius: 0 6px 6px 0;
    cursor: pointer
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .btnDelete {
    position: absolute;
    top: 10px;
    right: 40px;
    display: flex;
    justify-content: flex-end;
    width: 30px;
    height: 30px;
    cursor: pointer
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .btnDelete svg {
    color: #6a757f
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .btnDelete:hover svg {
    color: #fff
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .btnPin {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    justify-content: flex-end;
    width: 30px;
    height: 30px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .btnPin svg {
    margin-left: 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    transform: rotate(30deg)
}

.chatWrapper .chatBlock .pinnedSystemMessage .item:hover .overlay {
    display: flex
}

.chatWrapper .chatBlock .pinnedSystemMessage .item:hover .btnReply {
    visibility: visible;
    opacity: 1
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 20px;
    word-wrap: break-word;
    word-break: break-word
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent .system {
    margin-right: 7px;
    color: #f11da9;
    font-size: 12px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent>div {
    display: flex;
    justify-content: start;
    width: 100%
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent .chatMessage {
    display: flex;
    width: 100%;
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent .chatMessage img {
    height: 20px;
    margin-right: 5px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent .message {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item .chatContent .message svg {
    margin-bottom: 2px;
    margin-left: -3px
}

.chatWrapper .chatBlock .pinnedSystemMessage .item:last-child {
    margin-bottom: 0
}

.chatWrapper .chatBlock .paused {
    position: absolute;
    right: calc(10% - 10px);
    bottom: 135px;
    z-index: 1;
    display: block;
    width: calc(90% - 10px);
    margin: 0 auto;
    padding: 13px 20px;
    color: #261a46;
    text-align: center;
    background: linear-gradient(45deg, #fdcd2d, #ff902a);
    border-radius: 5px;
    cursor: pointer
}

.chatWrapper .chatBlock .paused.privileges {
    bottom: 215px
}

.chatWrapper .chatBlock .paused .placeholder {
    opacity: 0
}

.chatWrapper .chatBlock .paused .pausedContainer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 13px 20px;
    text-align: center;
    visibility: visible;
    opacity: 1
}

.chatWrapper .chatBlock .paused .playContainer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 13px 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0
}

.chatWrapper .chatBlock .paused:hover {
    background: #fdcd2d
}

.chatWrapper .chatBlock .paused:hover .pausedContainer {
    visibility: hidden;
    opacity: 0
}

.chatWrapper .chatBlock .paused:hover .playContainer {
    visibility: visible;
    opacity: 1
}

.chatWrapper .chatBlock .paused svg {
    margin-right: 5px;
    margin-bottom: 2px;
    font-size: 12px
}

@media (max-width: 1099px) {
    .chatWrapper .chatBlock .paused {
        right: calc(10% - 5px)
    }
}

@media (max-width: 900px) {
    .chatWrapper .chatBlock .paused {
        right: 23px;
        width: calc(100% - 36px)
    }
}

.chatWrapper .chatBlock .chatInner {
    position: relative;
    margin-bottom: 15px;
    padding-right: 10px
}

.chatWrapper .chatBlock .chatInner .date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #fff;
    font-size: 10px
}

.chatWrapper .chatBlock .chatInner .loaderBlock {
    position: relative;
    width: calc(100% + 15px);
    margin-top: 50px;
    text-align: center
}

.chatWrapper .chatBlock .chatInner .creator {
    padding: 10px;
    text-align: center;
    background: #653ba1;
    border-radius: 5px 5px 0 0
}

.chatWrapper .chatBlock .chatInner .creator .user {
    margin: 0;
    padding: 0;
    color: #fdcd2d;
    font-weight: 500;
    text-transform: none;
    background: 0 0;
    border: 0;
    outline: none;
    cursor: pointer;
    touch-action: manipulation
}

.chatWrapper .chatBlock .chatInner .creator .user:hover {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .creator .user .name {
    position: relative;
    white-space: nowrap
}

.chatWrapper .chatBlock .chatInner .quizItem {
    position: relative;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 12px;
    background: rgba(72, 133, 243, .1);
    border-top: 1px solid #fdae05;
    border-bottom: 1px solid #fdae05;
    border-radius: 6px
}

.chatWrapper .chatBlock .chatInner .quizItem .caption {
    margin-bottom: 7px;
    color: #fff;
    font-size: 14px;
    line-height: 20px
}

.chatWrapper .chatBlock .chatInner .quizItem .caption>span {
    margin-left: 5px;
    font-weight: 400;
    word-break: break-word
}

.chatWrapper .chatBlock .chatInner .quizItem .caption .label {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #fdae05;
    font-weight: 500
}

.chatWrapper .chatBlock .chatInner .quizItem .caption svg {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    font-size: 13px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.chatWrapper .chatBlock .chatInner .quizItem .description {
    color: rgba(255, 255, 255, .804);
    font-size: 13px
}

.chatWrapper .chatBlock .chatInner .quizItem .description .user {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    text-transform: none;
    background: 0 0;
    border: 0;
    outline: none;
    cursor: pointer;
    touch-action: manipulation
}

.chatWrapper .chatBlock .chatInner .quizItem .description .user:hover {
    color: #fff
}

s .chatWrapper .chatBlock .chatInner .quizItem .description .user .name {
    position: relative;
    white-space: nowrap
}

.chatWrapper .chatBlock .chatInner .quizItem .description .user:after {
    padding-right: 5px;
    content: ", "
}

.chatWrapper .chatBlock .chatInner .quizItem .description .user:last-child:after {
    display: none
}

.chatWrapper .chatBlock .chatInner .quizItem .question {
    margin-top: 10px;
    -webkit-user-select: none;
    user-select: none
}

.chatWrapper .chatBlock .chatInner .quizItem .question .label {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    padding-left: 18px;
    color: #ffd000;
    font-weight: 500
}

.chatWrapper .chatBlock .chatInner .quizItem .question .label svg {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    margin-right: 5px;
    font-size: 14px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.chatWrapper .chatBlock .chatInner .rainItem {
    position: relative;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 12px;
    background: #1d1438;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatInner .rainItem .rainItemImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    -webkit-animation: messageRain 5s linear infinite forwards;
    animation: messageRain 5s linear infinite forwards;
    content: ""
}

.chatWrapper .chatBlock .chatInner .rainItem .users {
    position: relative;
    color: #fff;
    font-weight: 500;
    transition: .4s linear
}

.chatWrapper .chatBlock .chatInner .rainItem .users .user {
    margin: 0;
    padding: 0;
    color: #fff;
    font-weight: 500;
    text-transform: none;
    background: 0 0;
    border: 0;
    outline: none;
    cursor: pointer;
    touch-action: manipulation
}

.chatWrapper .chatBlock .chatInner .rainItem .users .user:hover {
    color: #fdcd2d
}

s .chatWrapper .chatBlock .chatInner .rainItem .users .user .name {
    position: relative;
    white-space: nowrap
}

.chatWrapper .chatBlock .chatInner .rainItem .users .user:after {
    padding-right: 5px;
    content: ", "
}

.chatWrapper .chatBlock .chatInner .rainItem .users .user:last-child:after {
    display: none
}

.chatWrapper .chatBlock .chatInner .rainItem .users .bet {
    display: inline-flex;
    align-items: center;
    color: #5cb503;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase
}

.chatWrapper .chatBlock .chatInner .rainItem .users .bet .content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums
}

.chatWrapper .chatBlock .chatInner .rainItem .users .bet .icon {
    width: auto;
    height: auto;
    vertical-align: initial
}

.chatWrapper .chatBlock .chatInner .rainItem .users .bet .icon.widthAuto {
    width: auto;
    height: auto;
    margin-left: 5px;
    vertical-align: initial
}

.chatWrapper .chatBlock .chatInner .rainItem .under {
    margin-top: 5px;
    color: #fff;
    font-weight: 500
}

.chatWrapper .chatBlock .chatInner .rainItem .under .rain {
    display: inline-block;
    margin: 0 5px;
    color: #fdcd2d
}

.chatWrapper .chatBlock .chatInner .rainItem .under .rain svg {
    position: relative;
    font-size: 13px
}

.chatWrapper .chatBlock .chatInner .rainItem .under .bet {
    display: inline-flex;
    align-items: center;
    color: #5cb503;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase
}

.chatWrapper .chatBlock .chatInner .rainItem .under .bet .content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums
}

.chatWrapper .chatBlock .chatInner .rainItem .under .bet .icon {
    width: auto;
    height: auto;
    vertical-align: initial
}

.chatWrapper .chatBlock .chatInner .rainItem .under .bet .icon.widthAuto {
    width: auto;
    height: auto;
    margin-left: 5px;
    vertical-align: initial
}

.chatWrapper .chatBlock .chatInner .rainItem.hasCreator {
    border-radius: 0 0 5px 5px
}

.chatWrapper .chatBlock .chatInner .item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    background: #442176;
    border-radius: 6px;
    cursor: pointer
}

.chatWrapper .chatBlock .chatInner .item.bet {
    background: url(https://cdn.friends-casino.io/assets/png/Chat/betBg.png);
    background-position: center;
    background-size: cover
}

.chatWrapper .chatBlock .chatInner .item.bet .btnReply,
.chatWrapper .chatBlock .chatInner .item.bet .btnDelete,
.chatWrapper .chatBlock .chatInner .item.bet .btnBan {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .item.bet .btnReply:hover,
.chatWrapper .chatBlock .chatInner .item.bet .btnDelete:hover,
.chatWrapper .chatBlock .chatInner .item.bet .btnBan:hover {
    color: #442176
}

.chatWrapper .chatBlock .chatInner .item .tooltip {
    position: absolute
}

.chatWrapper .chatBlock .chatInner .item .btnReply,
.chatWrapper .chatBlock .chatInner .item .btnDelete,
.chatWrapper .chatBlock .chatInner .item .btnBan {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    visibility: hidden;
    cursor: pointer;
    opacity: 0
}

.chatWrapper .chatBlock .chatInner .item .btnReply:hover,
.chatWrapper .chatBlock .chatInner .item .btnDelete:hover,
.chatWrapper .chatBlock .chatInner .item .btnBan:hover {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .item .btnDelete {
    right: 25px
}

.chatWrapper .chatBlock .chatInner .item .btnDelete.btnNoneReply {
    right: 5px
}

.chatWrapper .chatBlock .chatInner .item .btnBan {
    right: 50px
}

.chatWrapper .chatBlock .chatInner .item .btnBan.btnNoneReply {
    right: 25px
}

.chatWrapper .chatBlock .chatInner .item:hover .overlay {
    display: flex
}

.chatWrapper .chatBlock .chatInner .item:hover .btnReply,
.chatWrapper .chatBlock .chatInner .item:hover .btnDelete,
.chatWrapper .chatBlock .chatInner .item:hover .btnBan {
    visibility: visible;
    opacity: 1
}

.chatWrapper .chatBlock .chatInner .item .chatContent {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 13px;
    line-height: 20px;
    word-wrap: break-word;
    word-break: break-word
}

.chatWrapper .chatBlock .chatInner .item .chatContent .moderator {
    margin-right: 7px;
    color: #ec193f;
    font-size: 12px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .system {
    margin-right: 7px;
    color: #f11da9;
    font-size: 12px
}

.chatWrapper .chatBlock .chatInner .item .chatContent>div {
    display: flex;
    justify-content: start;
    width: 100%
}

.chatWrapper .chatBlock .chatInner .item .chatContent .userLink {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
    text-transform: none;
    text-overflow: ellipsis;
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    touch-action: manipulation
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage {
    display: flex;
    width: 100%;
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage {
    width: 100%
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader {
    display: flex;
    align-items: flex-start
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .avatarBlock img {
    padding: 5px;
    background: #653ba1
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betOwner {
    flex-grow: 1
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betOwner .betDate {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betOwner .betName {
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betGame {
    display: flex;
    margin-left: 12px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betGame img {
    width: 33px;
    height: 45px;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betHeader .betGame .btnPlay {
    padding: 7px 11px;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betInfo {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 10px 12px;
    background: #442176;
    border-radius: 10px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betInfo .top {
    display: flex;
    justify-content: space-between
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betInfo .top .winAmount {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betInfo .top .winX {
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
    background: #ee8f0d;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .betInfo .bottom .betAmount {
    color: rgba(255, 255, 255, .804);
    font-size: 12px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 10px 12px;
    background: #442176;
    border-radius: 10px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo:not(:first-child) {
    margin-top: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo .left {
    display: flex;
    flex-direction: column
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo .left .gameName {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo .left .btnPlay {
    display: flex;
    justify-content: center;
    max-width: 150px;
    height: 28px;
    margin-top: 10px;
    color: #261a46;
    vertical-align: middle
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo .left .btnPlay span {
    margin-left: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .gameInfo .right img {
    width: auto;
    height: 68px;
    margin-right: 0;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons a {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons button,
.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons a {
    display: block;
    margin-bottom: -5px;
    margin-left: 10px;
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: background .2s
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons button:hover,
.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .betMessage .socialButtons a:hover {
    background: #653ba1
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .avatarBlock img {
    padding: 5px;
    background: #653ba1
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .respondName {
    margin-right: 2px;
    padding: 1px 5px;
    color: rgba(255, 255, 255, .804);
    background: #653ba1;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .respondName:hover {
    color: #fff
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .respondName.toMe {
    color: #fff;
    background: #fdae05
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .respondName.mod {
    color: #fff;
    background: #ec193f
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .rank {
    display: inline-block
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage .rank svg.icon {
    width: 15px;
    height: 15px;
    margin-right: 5px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.bronze {
    color: #ab5d30
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.silver {
    color: #4d7bcd
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.gold {
    color: #ffd40e
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.platinum {
    color: #077cfc
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.diamond {
    color: #7625f4
}

.chatWrapper .chatBlock .chatInner .item .chatContent .chatMessage.elite {
    color: #ff3c38
}

.chatWrapper .chatBlock .chatInner .item .chatContent .name {
    display: inline;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    text-overflow: ellipsis;
    cursor: pointer
}

.chatWrapper .chatBlock .chatInner .item .chatContent .name.static {
    color: #fff !important;
    cursor: default !important
}

.chatWrapper .chatBlock .chatInner .item .chatContent .name:hover {
    color: #fdcd2d
}

.chatWrapper .chatBlock .chatInner .item .chatContent .identifier {
    margin-left: 5px;
    color: #fff;
    font-size: 12px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .message {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.chatWrapper .chatBlock .chatInner .item .chatContent .message svg {
    margin-bottom: 2px;
    margin-left: -3px
}

.chatWrapper .chatBlock .chatInner .item:last-child {
    margin-bottom: 0
}

.chatWrapper .chatBlock .chatFooter {
    position: relative;
    padding: 0 8px 0 0
}

.chatWrapper .chatBlock .chatFooter .stickersBox {
    position: absolute;
    bottom: 90px;
    z-index: 200;
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 10px
}

.chatWrapper .chatBlock .chatFooter .stickersBox:after {
    position: absolute;
    right: 15px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: translate(-50%) rotate(45deg);
    content: ""
}

.chatWrapper .chatBlock .chatFooter .stickersBox.open {
    display: block
}

.chatWrapper .chatBlock .chatFooter .stickersBox .stickersContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 5px
}

.chatWrapper .chatBlock .chatFooter .stickersBox img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform .2s
}

.chatWrapper .chatBlock .chatFooter .stickersBox img:hover {
    transform: scale(1.05)
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px auto;
    padding: 15px 0;
    background: #442176;
    border-radius: 4px
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span {
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease-in-out
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span svg {
    height: 12px;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span.active {
    color: #fff
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span.system {
    color: #f11da9
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span.system.locked {
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span.moderator {
    color: #ec193f
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper span.moderator.locked {
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper .privilegesCheckbox {
    position: relative;
    width: 60px;
    height: 13px;
    margin: 0 12px;
    background-color: #261a46;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper .privilegesCheckbox.moderator {
    background-color: #ec193f
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper .privilegesCheckbox.moderator .privilegesCheckboxRound {
    left: -2px;
    transform: translate(0)
}

.chatWrapper .chatBlock .chatFooter .privilegesCheckboxWrapper .privilegesCheckbox .privilegesCheckboxRound {
    position: absolute;
    top: -4px;
    left: calc(100% - 18px);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(0);
    transition: all .3s ease-in-out
}

.chatWrapper .chatBlock .chatFooter .smiles {
    position: absolute;
    bottom: 70px;
    z-index: 200;
    display: none;
    width: 100%
}

.chatWrapper .chatBlock .chatFooter .smiles .epr-body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important
}

.chatWrapper .chatBlock .chatFooter .smiles:after {
    position: absolute;
    right: 15px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: #fff;
    transform: translate(-50%) rotate(45deg);
    content: ""
}

.chatWrapper .chatBlock .chatFooter .smiles.open {
    display: block
}

.chatWrapper .chatBlock .chatFooter .form {
    position: relative;
    display: flex;
    height: 100px;
    background: #442176;
    border-radius: 4px
}

.chatWrapper .chatBlock .chatFooter .form .empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 65px;
    margin: 5px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: transparent
}

.chatWrapper .chatBlock .chatFooter .form .wrap {
    position: relative;
    width: 100%;
    overflow: hidden
}

.chatWrapper .chatBlock .chatFooter .form .wrap .btnRain {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    color: #fff;
    font-size: 12px;
    background: #653ba1;
    border: 0;
    border-radius: 4px;
    outline: none;
    cursor: pointer
}

.chatWrapper .chatBlock .chatFooter .form .wrap .btnRain:hover {
    background: #fdae05;
    outline: none
}

.chatWrapper .chatBlock .chatFooter .form .wrap .content {
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
    max-height: 80px;
    margin-bottom: 0;
    padding: 10px 12px 5px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff;
    font-size: 14px;
    font-family: Rubik, Arial, sans-serif !important;
    line-height: 17px;
    word-wrap: break-word;
    background-color: initial;
    border: none;
    border-radius: 0;
    outline: 0;
    resize: none;
    -webkit-font-smoothing: subpixel-antialiased;
    scrollbar-color: #242424 #181b22;
    scrollbar-width: thin
}

.chatWrapper .chatBlock .chatFooter .form .wrap .content::placeholder {
    color: rgba(255, 255, 255, .804)
}

.chatWrapper .chatBlock .chatFooter .form .controls {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 44px;
    background: #653ba1;
    border-radius: 0 4px 4px 0
}

.chatWrapper .chatBlock .chatFooter .form .controls button {
    display: flex;
    flex: auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 20px;
    background: 0 0;
    border: none;
    outline: none;
    cursor: pointer
}

.chatWrapper .chatBlock .chatFooter .form .controls button svg {
    fill: #fff
}

.chatWrapper .chatBlock .chatFooter .form .controls button .icon-send:hover {
    fill: #fdcd2d
}

.chatWrapper .chatBlock .chatFooter .form .controls button .icon-smile:hover {
    fill: #ffaf00
}

.chatWrapper .chatBlock .chatFooter .form .controls button .icon-sticker:hover {
    fill: #fdcd2d
}

.chatWrapper .chatBlock .chatFooter .infoBlock {
    display: flex;
    justify-content: space-between;
    margin-top: 10px
}

.chatWrapper .chatBlock .chatFooter .infoBlock .online {
    display: flex;
    color: #fff;
    font-size: 12px
}

.chatWrapper .chatBlock .chatFooter .infoBlock .online .badge {
    z-index: 1;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-right: 8px;
    background: #87d010;
    border-radius: 3px
}

.chatWrapper .chatBlock .chatFooter .infoBlock .rules {
    color: #fff;
    font-size: 12px
}

.chatWrapper .chatBlock .chatFooter .infoBlock .rules button {
    cursor: pointer
}

.chatWrapper .chatBlock .chatFooter .infoBlock .rules svg {
    margin-right: 5px;
    margin-bottom: 2px;
    fill: #fff
}

.chatWrapper .chatBlock .chatFooter .infoBlock .rules svg:hover {
    fill: #fdae05
}

.chatWrapper .liveScroll {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 9999;
    width: 35px;
    height: 35px;
    background: #1d1438;
    border: 0;
    border-radius: 50%;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.chatWrapper .liveScroll .values {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    color: #fff;
    font-weight: 700;
    font-size: 8px;
    line-height: 18px;
    background: #4886f5;
    border-radius: 50%;
    content: attr(data-values)
}

.chatWrapper .liveScroll:hover {
    box-shadow: 0 0 0 1px #fdae05
}

.chatWrapper .liveScroll.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.chatWrapper .liveScroll svg {
    font-size: 11px;
    fill: #fff
}

@-webkit-keyframes messageRain {
    0% {
        background-position: 0 -1000px
    }
    to {
        background-position: 0 0
    }
}

@keyframes messageRain {
    0% {
        background-position: 0 -1000px
    }
    to {
        background-position: 0 0
    }
}

@font-face {
    font-weight: 400;
    font-family: Rubik;
    font-style: normal;
    src: url(/assets/Rubik-Regular-B3FUqZG-.woff2) format("woff2"), url(/assets/Rubik-Regular-2F2Z4l8-.woff) format("woff");
    font-display: swap
}

@font-face {
    font-weight: 500;
    font-family: Rubik;
    font-style: normal;
    src: url(/assets/Rubik-Medium-xAMS_UWr.woff2) format("woff2"), url(/assets/Rubik-Medium-ByWW2ru6.woff) format("woff");
    font-display: swap
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-transition: none;
    transition: none
}

html {
    font-size: 14px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body,
html {
    width: 100%;
    height: 100%
}

body {
    height: 100%;
    color: #fff;
    font-family: Rubik, Arial, sans-serif !important;
    line-height: 1.25;
    background: #261a46;
    -webkit-overflow-scrolling: touch
}

:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --app-height: 100vh
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none
}

input[type=number] {
    -moz-appearance: textfield
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
    border-radius: 6px
}

::-webkit-scrollbar-thumb {
    background: #442176;
    border-radius: 6px
}

::-webkit-scrollbar-thumb:hover {
    background: #442176
}

::-webkit-scrollbar-corner {
    background: transparent
}

.pwaPage:not(.staticPage) {
    position: fixed
}

.pwaPage:not(.staticPage).ios {
    position: absolute;
    height: var(--app-height, 100vh)
}

.pwaPage:not(.staticPage) body {
    height: 100%
}

.pwaPage:not(.staticPage) body .app .content {
    padding-top: 0
}

.pwaPage:not(.staticPage) body .app .content .header {
    position: relative;
    z-index: 7
}

.pwaPage:not(.staticPage) body .app .content .mobileNav {
    position: fixed;
    bottom: 0
}

.pwaPage:not(.staticPage) body .app .content .mobileNav .mobileNavWrapper {
    background: transparent
}

.pwaPage:not(.staticPage) body .app .content .contentWrapper .contentScroll {
    padding-bottom: 50px
}

.pwaPage:not(.staticPage) body .app .leftWrapper.open {
    height: calc(100% - 15px)
}

.pwaPage:not(.staticPage) body .app .leftWrapper .leftContainer {
    padding-bottom: 15px
}

.pwaPage:not(.staticPage).notch .app .content .mobileNavWrapper {
    padding: 0 5px calc(var(--safe-area-inset-bottom))
}

.pwaPage:not(.staticPage).notch .app .rightWrapper {
    height: calc(100% - 50px);
    padding-top: var(--safe-area-inset-top)
}

.pwaPage:not(.staticPage).notch.ios .rightWrapper {
    height: calc(100% - 75px)
}

@media screen and (orientation: landscape) {
    .pwaPage:not(.staticPage).notch .app {
        padding-right: calc(var(--safe-area-inset-left) - 15px);
        padding-left: calc(var(--safe-area-inset-left) - 15px)
    }
    .pwaPage:not(.staticPage).notch .app .content .mobileNavWrapper {
        padding-bottom: calc(var(--safe-area-inset-bottom) - 5px)
    }
    .pwaPage:not(.staticPage).notch .app .rightWrapper {
        height: calc(100% - (var(--safe-area-inset-bottom) - 5px) - 50px);
        padding: 0 calc(var(--safe-area-inset-left) - 5px)
    }
    .pwaPage:not(.staticPage).notch .app .mobileOverlay {
        padding: 0 calc(var(--safe-area-inset-left) - 5px)
    }
}

.pwaPage:not(.staticPage) .loaderFull {
    height: 100vh
}

.pwaPage:not(.staticPage).ios .loaderFull {
    height: var(--app-height, 100vh)
}

.pwaPage:not(.staticPage).ios body {
    padding-bottom: 25px
}

.pwaPage:not(.staticPage).ios .mobileNav {
    padding-bottom: 25px
}

.pwaPage:not(.staticPage).ios .contentWrapper .contentScroll {
    padding-bottom: 50px
}

.pwaPage:not(.staticPage).ios .leftWrapper.open {
    height: calc(100% - 15px) !important
}

.pwaPage:not(.staticPage).ios .leftWrapper .leftContainer {
    padding-bottom: 0
}

::-moz-selection {
    color: #fff;
    background: #000
}

::selection {
    color: #fff;
    background: #000
}

::-webkit-calendar-picker-indicator {
    filter: invert(1)
}

a,
button {
    font: inherit;
    text-decoration: none
}

input {
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit
}

a,
button,
input,
label,
textarea {
    touch-action: manipulation
}

button {
    color: #fff;
    background-color: initial;
    border: 0;
    outline: none !important
}

a {
    color: #fdcd2d
}

a:hover {
    color: #c134e8
}

a:active,
a:focus {
    outline: none !important
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

svg {
    overflow: hidden;
    vertical-align: middle
}

img {
    vertical-align: middle;
    border-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0
}

.app {
    width: 100%;
    height: 1px;
    min-height: 100%
}

.btn {
    align-items: center;
    padding: 9px 20px;
    color: #261a46;
    font-weight: 400;
    font-size: 1rem;
    font-family: Rubik, Arial, sans-serif;
    text-decoration: none;
    background: linear-gradient(45deg, #fdae05, #fdcd2d);
    border: 1px solid transparent;
    border-radius: 5px;
    outline: none !important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn:hover {
    color: #261a46;
    background: #fdcd2d
}

.btn[disabled] {
    cursor: not-allowed;
    opacity: .8;
    pointer-events: none
}

.btn:not(.btnLight).btnGreen {
    background: linear-gradient(45deg, #5cb503, #338500)
}

.btn:not(.btnLight).btnGreen:not(.disabled):hover {
    background: #5cb503
}

.btn.btnLink {
    padding: 0;
    color: #fdad05;
    font-weight: 500;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: all .3s
}

.btn.btnLink:hover {
    color: #ffd958
}

.btn.btnLink:active,
.btn.btnLink.active {
    color: #fdcd2d
}

.btn:not(.btnLight).btnRed {
    background: #ec193f
}

.btn:not(.btnLight).btnRed:not(.disabled):hover {
    background: #a40a41
}

.btn:not(.btnLight).btnTransparent,
.btn:not(.btnLight).btnTransparent:not(.disabled):hover {
    background: transparent
}

.btn:not(.btnLight).btnTransparent {
    color: #7d8a98
}

.btn:not(.btnLight).btnTransparent:hover {
    color: #fff
}

.btn.btnLight {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .0784313725);
    box-shadow: none
}

.btn.btnLight:not(.disabled):hover {
    color: #261a46;
    background: #fdcd2d;
    border-color: #fdcd2d
}

.btn.btnLight.btnGreen {
    color: #fff;
    border-color: #2dc53a
}

.btn.btnLight.btnGreen:not(.disabled, .isActive):hover {
    color: #2dc53a;
    background: transparent;
    border-color: #2dc53a
}

.btn.btnLight.btnGreen.isActive {
    color: #fff;
    background: #2dc53a;
    border-color: #2dc53a
}

.btn.btnLight.btnRed {
    color: #fff;
    border-color: #e86376
}

.btn.btnLight.btnRed:not(.disabled, .isActive):hover {
    color: #e86376;
    background: transparent;
    border-color: #e86376
}

.btn.btnLight.btnRed.isActive {
    color: #fff;
    background: #e86376;
    border-color: #e86376
}

.btn.btnLight.btnTransparent {
    color: #fff;
    border-color: transparent
}

.btn.btnLight.btnTransparent:not(.disabled, .isActive):hover {
    color: transparent;
    background: transparent;
    border-color: transparent
}

.btn.btnLight.btnTransparent.isActive {
    color: #fff;
    background: transparent;
    border-color: transparent
}

.menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    box-sizing: border-box;
    min-width: 10rem;
    margin: .125rem 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 6px
}

.menu .item {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: .25rem 1.5rem;
    color: #212529;
    font-weight: 400;
    font-size: medium;
    white-space: nowrap;
    text-align: inherit;
    background-color: initial;
    border: 0
}

.menu .item:first-child {
    border-radius: 6px 6px 0 0
}

.menu .item:last-child {
    border-radius: 0 0 6px 6px
}

.menu .item:focus,
.menu .item:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
    outline: none
}

.menu .item.active,
.menu .item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff
}

.menu .item:not(.active),
.menu .item:not([disabled]) {
    cursor: pointer
}

.copyTooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 80%;
    margin-bottom: 6px;
    padding: 5px 15px;
    font-size: 11px;
    text-align: center;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    transform: translate3d(-50%, 30px, 0);
    opacity: 0;
    pointer-events: none
}

.copyTooltip.visible {
    opacity: 1;
    -webkit-animation: floatup 1s 1;
    animation: floatup 1s 1
}

.loader {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.loader img {
    width: 40px;
    height: 40px
}

.loaderCentred {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.loaderCentred img,
.loaderCentred object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

.loaderCentred img.loaderLogo,
.loaderCentred object.loaderLogo {
    bottom: 115px;
    width: 100%;
    height: 230px
}

.loaderHalf {
    height: 50vh
}

.loaderAddress {
    position: sticky !important;
    height: 200px !important;
    transform: none !important
}

.loaderWeb3 {
    position: initial !important;
    height: 75px !important;
    transform: translate(0);
    margin-top: -10px
}

.loaderFull {
    z-index: 100000;
    width: 100%;
    height: 100%;
    background: #150e2a
}

.loaderClub {
    position: relative;
    top: 0;
    height: 250px;
    transform: translate(-50%)
}

.loaderBanners {
    position: relative;
    top: 0;
    height: 210px;
    text-align: center
}

.loaderSettings {
    position: relative;
    height: 250px;
    transform: translate(-50%)
}

.loaderLanging {
    position: relative;
    height: 100px;
    transform: translate(-50%)
}

.maintenance {
    position: absolute;
    top: calc(50% + 51px);
    left: 50%;
    z-index: 100001;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    transform: translate(-50%, -50%)
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite
}

.input-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px
}

.input-label svg {
    margin-left: 5px;
    font-size: 1em;
    fill: #2dc53a
}

.input-label--required:after {
    content: "*";
    color: red;
    margin-left: 1px
}

@-webkit-keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes rotating {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@media screen and (max-width: 969px) {
    .btn {
        font-size: 12px
    }
}

@media screen and (max-width: 900px) {
    .btn {
        padding: 7px 15px
    }
}

.content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.content.full {
    padding: 0 15px
}

.content.full .header {
    margin: auto;
    padding: 0
}

.content.full .wrapper {
    max-width: 1250px;
    margin: auto;
    padding: 0
}

.content.full .wrapper .landingWrapper {
    width: 100%
}

.content.full .wrapper .landingWrapper .section {
    padding: 0 30px
}

.content.full .wrapper .landingWrapper .section.landingSliderSection,
.content.full .wrapper .landingWrapper .section.landingMenuSection,
.content.full .wrapper .landingWrapper .section.landingGamesSection {
    padding: 0
}

.content.full .wrapper .footer,
.content.full .wrapper .section {
    width: 100%;
    padding: 0
}

.content.full .wrapper,
.content.home .wrapper,
.content.sport .footer {
    max-width: 100%
}

.wrapper {
    position: relative;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden
}

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

.contentWrapper .contentScroll {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    will-change: scroll-position;
    scrollbar-color: rgba(67, 75, 83, .1) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch
}

.contentWrapper .contentScroll::-webkit-scrollbar {
    width: 6px;
    background: transparent
}

.contentWrapper .contentScroll::-webkit-scrollbar-thumb {
    background: rgba(67, 75, 83, .1);
    border-radius: 10px
}

.mainContainer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
    padding: 0
}

.mainContainer.sportContainer {
    height: 100%
}

.mainContainer .section {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto
}

.mainContainer .section .container {
    padding: 0
}

.mainContainer .section .pageLoader {
    position: relative;
    display: block;
    width: 100%;
    margin: 20vh 0;
    margin-top: calc(20vh - 2.5rem);
    text-align: center;
    pointer-events: none
}

@media (min-width: 1100px) {
    .mainContainer .section {
        width: calc(100% - 60px)
    }
}

.footerWrapper {
    margin-top: 20px;
    background-color: #1d1438
}

@media (max-width: 900px) {
    .footerWrapper {
        margin: 20px -15px 0;
        padding: 15px
    }
}

.footerWrapperNoTop {
    margin-top: 0
}

.footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto
}

@media (min-width: 1100px) {
    .footer {
        width: calc(100% - 60px)
    }
}

.footer .paySystems {
    display: flex;
    width: calc(100% + 10px);
    margin: 24px -10px 0;
    padding-bottom: 5px
}

.footer .paySystems .paySystemImage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    height: 100%;
    margin: 0 5px;
    padding: 10px 0;
    background: #442176;
    border-radius: 5px
}

.footer .paySystems .paySystemImage img {
    height: 24px
}

.footer .footerContent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 20px 0 10px;
    color: #fff;
    font-weight: 500;
    font-size: 11px;
    background-color: #1d1438
}

.footer .footerContent .footerLeft {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    margin: 10px 0;
    text-align: center
}

.footer .footerContent .footerLeft .footerNav {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    list-style: none
}

.footer .footerContent .footerLeft .footerNav li {
    display: inline-block;
    margin-right: 10px
}

.footer .footerContent .footerLeft .footerNav li:last-child {
    margin-right: 0
}

.footer .footerContent .footerLeft .footerNav a {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 11px;
    cursor: pointer
}

.footer .footerContent .footerLeft .footerNav a:focus,
.footer .footerContent .footerLeft .footerNav a:hover,
.footer .footerContent .footerLeft .footerNav a.active {
    color: #fdcd2d
}

.footer .footerContent .footerLeft .footerNav:last-child {
    margin-bottom: 0
}

.footer .footerContent .footerLeft .footerSocial a svg {
    width: 14px;
    margin-right: 3px;
    margin-bottom: 2px;
    color: #fdcd2d
}

.footer .footerContent .footerRight {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 15px 0;
    border-top: 1px solid #2d3340;
    border-bottom: none
}

.footer .footerContent .footerRight .footerLogos {
    display: flex
}

.footer .footerContent .footerRight .footerLogos .footerItem {
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    border-right: 1px solid #2c3240
}

.footer .footerContent .footerRight .footerLogos .footerItem:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: 0
}

.footer .footerContent .footerRight .footerLogos .footerItem a svg {
    color: #ff902a;
    fill: #ff902a
}

.footer .footerContent .footerRight .footerLogos .footerItem a svg,
.footer .footerContent .footerRight .footerLogos .footerItem a img {
    display: inline-block;
    height: 100%;
    max-height: 42px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0
}

.footer .footerContent .footerRight .footerLogos .footerItem .footerLicense img {
    display: inline-block;
    width: 100%;
    height: 100%;
    max-height: 42px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0
}

.footer .footerContent .footerRight .footerLogos .footerItem .footerLicense path {
    fill: #fff
}

.footer .footerContent .footerRight .footerLogos .footerItem .footerCert {
    display: inline-block;
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0
}

.footer .footerContent .footerRight .footerLogos .footerItem .footerCert svg {
    width: 100%;
    height: 100%
}

.footer .footerContent .footerCopyright,
.footer .footerContent .footerRight .footerName {
    padding-bottom: 10px
}

.footerLeft .footerCopyright {
    width: 100%;
    color: #fff
}

.footerRight .footerRight {
    display: flex;
    max-width: 400px;
    text-align: right
}

.footer .footerContent .footerRight .footerName {
    display: flex;
    color: inherit;
    text-align: right
}

@media (max-height: 479px) {
    .leftWrapper .leftContainer .leftNav li {
        margin-bottom: 10px
    }
}

@media (max-height: 479px) {
    .leftWrapper .leftContainer .leftNav li {
        margin-bottom: 5px
    }
}

@media (max-width: 1326px) {
    .footer .footerContent .footerRight .footerLogos .footerItem {
        max-width: 195px
    }
    .footer .footerContent .footerRight .footerLogos .footerItem:last-child {
        max-width: 125px
    }
}

@media (max-width: 1200px) {
    .footer .footerContent .footerRight .footerLogos {
        margin-top: 10px;
        margin-bottom: 0
    }
    .footer .footerContent .footerRight .footerLogos .footerItem {
        flex-direction: initial;
        border-right: 0
    }
    .footer {
        margin: 0 auto;
        padding: 0
    }
    .footer .footerContent .footerRight .footerName {
        display: block;
        max-width: 100%;
        text-align: center
    }
    .footer .footerContent .footerLeft .footerNav:first-child {
        justify-content: flex-start
    }
    .footer .footerContent .footerLeft .footerNav li {
        margin: 0 5px 5px 0
    }
    .footer .footerContent .footerRight .footerLogos .footerItem>span {
        display: inline-block
    }
}

@media (max-width: 1099px) {
    .footer {
        padding: 0 15px
    }
}

@media (max-width: 1099px) {
    .mainContainer .section {
        padding-right: 15px;
        padding-left: 15px
    }
}

@media (max-width: 969px) {
    .footer {
        margin: 0 auto
    }
}

@media (max-width: 900px) {
    .content {
        padding: 0
    }
    .wrapper {
        -webkit-flex-direction: column;
        flex-direction: column;
        padding-right: 0;
        padding-left: 0
    }
    .contentWrapper .contentScroll::-webkit-scrollbar {
        width: 0;
        background: transparent
    }
    .mainContainer .section,
    .footer {
        padding: 0
    }
    .footer .paySystems {
        margin: 5px -10px 0;
        padding-top: 15px
    }
    .footer .paySystems .paySystemImage img {
        height: 20px
    }
    .footer .footerContent .footerRight .footerName {
        padding-bottom: 20px
    }
    .footer .footerContent .footerRight .footerLogos {
        justify-content: center !important
    }
    .footer .footerContent .footerRight .footerLogos a {
        margin: 0 10px
    }
}

@media (max-width: 500px) {
    .footer .paySystems .paySystemImage img {
        height: 18px
    }
}

@media (max-width: 468px) {
    .footer .footerContent .footerRight {
        justify-content: space-between
    }
    .footer .footerContent .footerLeft .footerNav li {
        margin: 0 5px 5px 0
    }
    .footer .footerContent .footerLeft .footerNav li:last-child {
        margin: 0
    }
    .footer .footerContent .footerLeft {
        flex-direction: row;
        justify-content: space-between
    }
    .footer .footerContent .footerRight .footerLogos .footerItem {
        margin-right: 0;
        padding: 0;
        border: 0
    }
    .footer .footerContent .footerRight .footerLogos .footerItem>span {
        display: inline-block
    }
    .footer .footerContent .footerRight .footerLogos {
        justify-content: space-between;
        width: 100%
    }
}

@media (max-width: 468px) and (max-width: 441px) {
    .footer .footerContent .footerRight .footerLogos {
        flex-wrap: wrap;
        gap: 15px
    }
}

@media (max-width: 460px) {
    .footer .paySystems .paySystemImage {
        margin: 0;
        padding: 0;
        background: transparent
    }
    .footer .paySystems .paySystemImage img {
        height: 18px
    }
}

@media (min-width: 901px) {
    .contentWrapper .contentScroll {
        padding-top: 20px
    }
}

@media (max-width: 900px) {
    .contentWrapper .contentScroll {
        padding: 20px 15px 0
    }
}

.langDropdown {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box
}

.langDropdown .btnLang {
    display: flex;
    align-items: center;
    width: 170px;
    height: 42px;
    padding: 0 8px;
    border: 1px solid #653ba1;
    border-radius: 4px;
    cursor: pointer
}

.langDropdown .btnLang .btnContent {
    display: flex;
    align-items: center;
    width: 100%
}

.langDropdown .btnLang .btnContent svg {
    width: 20px;
    height: 20px;
    margin-right: 7px
}

.langDropdown .btnLang .btnContent .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.langDropdown .btnLang .btnContent .opener svg {
    width: 100%;
    height: 100%;
    margin-right: 0;
    fill: #fff
}

.langDropdown .btnLang .btnContent .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.langDropdown .menu {
    position: absolute;
    top: auto;
    right: inherit;
    bottom: 100%;
    left: 0;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 100%;
    margin: 12px 0 10px;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.langDropdown .menu.open {
    display: block
}

.langDropdown .menu .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.langDropdown .menu .item.active {
    background-color: #e1e1e1
}

.langDropdown .menu .item svg {
    width: 18px;
    height: 18px;
    margin-right: 7px
}

.langDropdown .menu .item:last-child {
    border-bottom: 1px solid transparent
}

.langDropdown .menu .item:active,
.langDropdown .menu .item:focus,
.langDropdown .menu .item:hover {
    background-color: #f1f1f1
}

.langDropdown .menu .item:not(.active),
.langDropdown .menu .item:not([disabled]) {
    cursor: pointer
}

.header {
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 320px;
    height: 75px;
    min-height: 75px;
    padding: 0 15px;
    line-height: 1;
    background: #261a46;
    box-shadow: rgba(0, 0, 0, .2) 0 4px 6px -1px, rgba(0, 0, 0, .12) 0 2px 4px -1px
}

.header .headerInnerWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 320px;
    max-width: 1250px;
    height: 75px;
    min-height: 75px;
    margin: 0 auto
}

@media (max-width: 900px) {
    .header .headerInnerWrapper {
        flex: 0 0 60px;
        width: 100%;
        min-width: 100%;
        background: #261a46;
        border-color: transparent
    }
}

@media (max-width: 400px) {
    .header .headerInnerWrapper {
        justify-content: space-between;
        width: 100%
    }
}

.header .headerInnerWrapper .header-block {
    display: block
}

.header .headerInnerWrapper .auth-buttons {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 40px
}

.header .headerInnerWrapper .auth-buttons .btn {
    height: 100%;
    padding: 9px 20px;
    font-size: 1rem;
    text-wrap: nowrap
}

.header .headerInnerWrapper .auth-buttons .btn:first-child {
    margin-right: 10px
}

.header .headerInnerWrapper .right {
    display: flex
}

.header .headerInnerWrapper .right .btnChangeMode {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    background: #442176;
    border-radius: 5px;
    cursor: pointer
}

.header .headerInnerWrapper .right .btnChangeMode:hover {
    background: #653ba1
}

.header .headerInnerWrapper .right .btnChangeMode:hover svg {
    fill: rgba(255, 255, 255, .804)
}

.header .headerInnerWrapper .right .btnChangeMode svg {
    font-size: 14px;
    fill: #fff
}

.header .headerInnerWrapper .right .btnChangeMode.notificationBtnIcon svg {
    width: 16px;
    height: 16px
}

.header .headerInnerWrapper .right .btnChangeMode.notificationBtnIcon.active {
    background: #653ba1;
    pointer-events: none
}

.header .headerInnerWrapper .right .btnChangeMode.notificationBtnIcon.active svg {
    fill: rgba(255, 255, 255, .804) !important
}

.header .headerInnerWrapper .right .btnChangeMode .notificationUnreadCount {
    position: absolute;
    top: 6px;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 14px;
    padding: 0 3px;
    color: inherit;
    font-size: 10px;
    background-color: #87d010;
    border-radius: 8px
}

.header .headerInnerWrapper .right .btnChangeMode .iconWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

.header .headerInnerWrapper .right .btnChangeMode .iconSecond {
    position: absolute;
    top: 50%;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .headerInnerWrapper .right .btnChangeMode .iconSecond svg {
    font-size: 9px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.header .headerInnerWrapper .header-inner {
    display: flex;
    align-items: center;
    justify-content: end
}

.header .headerInnerWrapper .header-inner .btnAchievementsTickets {
    margin-right: 8px
}

.header .headerInnerWrapper .header-inner .btnAchievementsTickets svg {
    font-size: 20px;
    fill: #ffad0e !important
}

.header .headerInnerWrapper .header-inner .headerWalletContainer {
    display: flex
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerAchievements {
    display: flex;
    align-items: center;
    height: 100%
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerAchievements img {
    width: 30px;
    height: 30px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper {
    position: relative;
    display: flex
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .btn:not(.btnLight).btnLight-gray:not(.disabled):hover {
    background: #454d60
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown {
    position: static;
    display: flex
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .coin svg {
    fill: #2dc53a
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .demo svg {
    fill: #ffc645
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn {
    height: 100%;
    min-height: 38px;
    padding: 0 8px;
    background-color: #2e3542;
    border-radius: 6px 0 0 6px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn:hover {
    background-color: #3a4151
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn .headerWalletBtnContent,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn .headerWalletBtnContent .headerWalletBtnSelected {
    display: flex;
    align-items: center
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn .headerWalletBtnContent .headerWalletBtnSelected svg {
    width: 14px;
    height: 14px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu {
    width: 100%;
    background-color: #2d3340
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem {
    padding: 10px 15px;
    font-size: 14px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem:hover {
    background-color: #2b303c
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem:active {
    background-color: #363c4b
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem>span {
    padding-left: 18px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem svg {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem.HeaderWalletCurrencyCoin svg {
    fill: #2dc53a
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem.HeaderWalletCurrencyCoin .headerWalletCurrencyValue {
    color: #2dc53a
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem.HeaderWalletCurrencyDemo svg {
    fill: #ffc645
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem.HeaderWalletCurrencyDemo .headerWalletCurrencyValue {
    color: #ffc645
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem .headerWalletCurrencyMenuItem .headerWalletCurrencyValue {
    margin-left: auto;
    padding: 4px 6px;
    font-size: 12px;
    background-color: #3a4151;
    border-radius: 3px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btn {
    justify-content: center;
    width: auto
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btnWallet {
    font-size: 15px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btnWallet .btnWalletContent {
    display: flex;
    justify-content: center
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btnWallet .btnWalletContent .icon {
    transform: translateY(-1px)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btnWallet .btnWalletContent span {
    margin-left: 5px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btnWallet.isMobile {
    min-width: 40px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    padding: 0 15px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown {
    position: absolute;
    top: 100%;
    right: 15px;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 200px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown.open {
    display: block
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item:active,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item:focus,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item:hover {
    background-color: #f1f1f1
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item>div {
    display: flex;
    align-items: center;
    width: 100%
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item>div .badge.wide {
    width: 48px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown:before {
    position: absolute;
    top: -8px;
    right: 12px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency {
    display: inline-block;
    padding: 0;
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border: 0;
    border-radius: 4px;
    outline: none;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent {
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1px 0 4px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    text-align: center;
    text-transform: uppercase
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceLabel svg {
    width: 8px;
    margin-top: -1px;
    margin-right: 0;
    margin-left: 5px;
    fill: rgba(255, 255, 255, .804)
}

@media (max-width: 900px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceLabel {
        margin: 0 0 1px;
        font-size: 10px
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceLabel svg {
        margin-top: 0;
        margin-left: 6px
    }
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 500;
    font-size: 17px;
    line-height: 17px;
    text-align: center;
    cursor: pointer
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput .animatedNumber {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
    width: 100%
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput .animatedNumber .balanceIcon {
    display: -webkit-flex;
    display: flex;
    margin-left: .2em
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput .animatedNumber .animatedBlock {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #ec193f;
    font-weight: inherit;
    font-size: inherit;
    white-space: nowrap;
    opacity: 0;
    -webkit-animation-name: balance;
    animation-name: balance;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    will-change: transform
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput .animatedNumber.isPositive .animatedBlock {
    color: #5cb503;
    animation-direction: reverse
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput .animatedNumber.isAnimate .animatedBlock {
    -webkit-animation-name: isSlidingFrame;
    animation-name: isSlidingFrame
}

@media (max-width: 340px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput .btnCurrency .currencyContent .balanceInput {
        font-size: 14px;
        line-height: 14px
    }
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput svg {
    width: 16px;
    height: 16px;
    margin: 1px 7px 0 0;
    color: rgba(255, 255, 255, .804)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs {
    display: flex;
    margin-left: 10px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn {
    width: 40px;
    height: 40px;
    background: #272d39;
    border: 0;
    border-radius: 5px;
    outline: none;
    cursor: pointer
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn svg {
    font-size: 22px;
    fill: #4f5869
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn.active {
    background: #2e3542;
    cursor: default
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn.active svg {
    fill: #fff
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn:focus {
    outline: none
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn:hover {
    background: #2e3542
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn:hover svg {
    fill: #fff
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .headerWalletTabsBtn:first-child {
    margin-right: 10px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown.open .menu {
    display: block
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 6px;
    background: #442176;
    border-radius: 5px;
    cursor: pointer
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab:hover {
    background: #653ba1
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab:hover .btnContent svg {
    fill: rgba(255, 255, 255, .804)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab.isMobile {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto;
    min-width: 36px;
    height: 100%;
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab.isMobile .btnContent .iconSecond {
    display: none
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent svg {
    font-size: 14px;
    fill: #fff
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconWrapper {
    width: 32px;
    height: 32px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconSecond {
    position: absolute;
    top: 50%;
    right: 4px;
    width: 16px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconSecond svg {
    font-size: 16px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconSecond svg.icon-close {
    font-size: 9px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconSecond,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .btnTab .btnContent .iconWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 240px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu:before {
    position: absolute;
    top: -8px;
    right: 12px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 54px;
    padding: 0 12px;
    color: #fff;
    font-size: 14px;
    background: #e5e5e5;
    border-radius: 3px 3px 0 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .avatar {
    width: 27px !important;
    height: 27px !important;
    margin: 0 8px 0 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .avatar>div {
    width: 27px !important;
    height: 27px !important;
    font-family: Rubik, Arial, sans-serif
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .avatar div div {
    font-size: 14px !important
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser a {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: rgba(0, 0, 0, .75)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser a img {
    height: 24px;
    margin-right: 8px;
    border-radius: 3px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser a .name {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser a:hover {
    color: #fdcd2d
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .btnId {
    margin-left: auto;
    color: #8c8c8c;
    font-size: 13px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .btnId span {
    margin-left: 4px;
    padding: 5px 6px;
    color: rgba(0, 0, 0, .75);
    background: #d6d6d6;
    border-radius: 2px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnUser .copyTooltip {
    right: -50px;
    left: inherit;
    max-width: 120px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 12px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:active,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:focus,
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:hover {
    background-color: #f1f1f1
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:not(.b_active__b-pzJ),
.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:not([disabled]) {
    cursor: pointer
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item.first {
    border-radius: 4px 4px 0 0
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item.last {
    border-radius: 0 0 4px 4px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item:last-child {
    border-bottom: 1px solid transparent
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item .iconWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    background: #e5e5e5;
    border-radius: 2px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .item .iconWrapper svg {
    font-size: 16px;
    fill: rgba(0, 0, 0, .6)
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnLogout {
    padding: 0;
    border-bottom: 0;
    border-radius: 0 0 3px 3px
}

.header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown .menu .btnLogout button {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    color: rgba(0, 0, 0, .5);
    outline: none
}

@media (max-width: 900px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs .dropdown {
        height: 36px;
        margin-right: 0
    }
}

@media (min-width: 901px) {
    .header .headerInnerWrapper .header-inner {
        width: 100%
    }
}

.header .headerInnerWrapper .top-nav-wrapper {
    position: relative
}

.header .headerInnerWrapper .top-nav-wrapper .opener {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 20px;
    background-color: initial;
    border: 0;
    outline: none;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s
}

.header .headerInnerWrapper .top-nav-wrapper .opener .bar {
    width: 100%;
    height: 2px;
    margin-bottom: 5px;
    background: #fff;
    border-radius: 1px;
    -webkit-transition: all .3s;
    transition: all .3s
}

.header .headerInnerWrapper .top-nav-wrapper .opener .bar:last-child {
    margin-bottom: 0
}

.header .headerInnerWrapper .top-nav-wrapper .opener.open .bar:first-child {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0 1px;
    transform-origin: 0 1px
}

.header .headerInnerWrapper .top-nav-wrapper .opener.open .bar:nth-child(2) {
    width: 0
}

.header .headerInnerWrapper .top-nav-wrapper .opener.open .bar:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 1px;
    transform-origin: 0 1px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav {
    z-index: 1;
    display: flex;
    align-items: center;
    list-style: none;
    border-bottom: 1px solid #2e3542
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav .icon {
    top: -2px;
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav .icon-gamepad {
    width: 16px;
    height: 16px;
    margin-top: -1px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav .icon-tasks {
    margin-top: 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li {
    position: relative;
    margin-right: 3px;
    margin-bottom: -1px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li:last-child {
    margin-right: 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li svg {
    position: relative;
    top: -1px;
    margin: 0 5px 0 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .icon-a {
    width: 10px;
    height: 10px;
    margin: 0;
    fill: #2a2f3c
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .badge {
    position: absolute;
    top: -2px;
    right: -5px;
    z-index: 1;
    width: 15px;
    height: 15px;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    background: #fdae05;
    border-radius: 50%
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -.21px;
    background-color: initial;
    border: 0;
    border-radius: 3px;
    cursor: pointer
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn i,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a i {
    display: block;
    margin-right: 5px;
    font-size: 16px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn i.icon-shopping-basket,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a i.icon-shopping-basket {
    position: relative;
    top: -1px;
    font-size: 13px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn.active,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn:focus,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn:hover,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a.active,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a:focus,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a:hover {
    color: #fff;
    border-bottom: 1px solid #fdae05;
    border-radius: 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn.active,
.header .headerInnerWrapper .top-nav-wrapper .top-nav li a.active {
    cursor: default
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li.current a {
    color: #fff;
    background: #272d39
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li:focus {
    outline: none
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle {
    position: relative
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .btn {
    width: 100%;
    padding: 8px 28px 8px 13px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .icon-down {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 14px;
    height: 14px;
    margin: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul {
    position: absolute;
    top: 37px;
    left: 0;
    z-index: 3;
    flex-direction: column;
    align-items: stretch;
    min-width: 120px;
    max-height: 0;
    overflow: hidden;
    background: #272d39;
    border-radius: 2.5px;
    box-shadow: 0 0 1px rgba(255, 255, 255, .1);
    -webkit-transition: max-height .15s ease-out;
    transition: max-height .15s ease-out
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul.isOpen {
    max-height: 250px
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul li {
    margin-right: 0
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul li a {
    padding: 15px 13px;
    white-space: nowrap
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul li a:hover {
    color: #fff;
    background: #442176
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle.isOpen .icon-down {
    -webkit-transform: translateY(-50%) rotate(-180deg);
    transform: translateY(-50%) rotate(-180deg)
}

.header .headerInnerWrapper .top-nav-wrapper .top-nav li .tagNew:before {
    position: absolute;
    top: -9px;
    right: 0;
    padding: 0 5px;
    color: #fff;
    font-size: 9px;
    background-color: #d02121;
    border-radius: 5px;
    content: "NEW"
}

@media (max-width: 1350px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn,
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a {
        padding: 8px 5px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .btn {
        padding: 8px 23px 8px 8px
    }
}

@media (max-width: 1250px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .btn svg,
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a svg {
        display: none
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .btn {
        display: inline-block !important
    }
}

@media (max-width: 1169px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a {
        padding: 8px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a svg {
        display: none
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .btn {
        padding: 8px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle svg {
        display: none
    }
}

@media (max-width: 1099px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li {
        margin-right: 0
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a {
        padding: 8px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a svg {
        width: 12px;
        height: 12px;
        margin-right: 4px
    }
}

@media (max-width: 1050px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle>ul {
        top: 30px;
        width: 100%;
        background: #442176
    }
}

@media (max-width: 991px) {
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .badge {
        top: 8px;
        right: 5px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li a svg {
        display: inline-block
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle .btn {
        display: none
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle ul {
        position: relative;
        top: 0;
        max-height: 100%;
        overflow: visible;
        background: transparent
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle ul li a {
        padding: 8px 13px
    }
    .header .headerInnerWrapper .top-nav-wrapper .top-nav li .toggle svg {
        display: inline-block
    }
}

@media (max-width: 900px) {
    .header .headerInnerWrapper .top-nav-wrapper {
        display: none
    }
}

@media (min-width: 901px) {
    .header .headerInnerWrapper .logo {
        display: block
    }
    .header .headerInnerWrapper .logo img {
        width: auto;
        min-width: 94px;
        height: 40px
    }
}

@media (min-width: 400px) {
    .header .headerInnerWrapper .header-inner {
        margin-left: 15px
    }
}

@media (max-width: 900px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletTabs {
        margin-left: 0
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .btn {
        width: auto
    }
}

@media (max-width: 400px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyMenu .headerWalletCurrencyItem {
        padding: 8px 10px;
        font-size: 13px
    }
}

@media (max-width: 380px) {
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn {
        padding: 0 6px
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn .opener {
        width: 12px;
        height: 12px;
        margin-left: 3px
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn .opener svg {
        width: 12px;
        height: 12px
    }
}

@media (max-width: 340px) {
    .header .headerInnerWrapper .header-inner {
        margin-left: 15px
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDropdown .headerWalletCurrencyBtn {
        min-height: 36px
    }
    .header .headerInnerWrapper .header-inner .headerWalletContainer .headerWalletWrapper .headerWalletDepositBlock .headerWalletCurrencyInput {
        width: auto;
        min-width: 60px;
        font-size: 14px
    }
}

.header .logo {
    display: block;
    max-width: 100%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.header .logo :focus {
    outline: none
}

.header .logo :hover {
    color: #fdae05;
    opacity: .8
}

.header .logo img {
   width: auto;
        min-width: 94px;
        height: 40px;
}

@media (max-width: 900px) {
    .header .logo {
        display: inline;
        width: auto
    }
    .header .logo img {
        min-height: 36px;
        max-height: 36px
    }
}

.gameContentWrapper.mobile .header {
    display: none
}

.loader-modal {
    min-height: 350px
}

.loader-modal img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    margin: auto
}

.loader-game {
    height: auto;
    min-height: 560px
}

.loader-game img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 60px;
    margin: auto
}

.modal-open {
    overflow: hidden
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10050;
    display: none;
    overflow: hidden;
    outline: 0;
    opacity: 0;
    transition: .3s
}

.modal.fade {
    -webkit-transform: translateZ(0) scale(.7);
    transform: translateZ(0) scale(.7);
    opacity: 0
}

.modal.show {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 1
}

.modal.hide {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
    opacity: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 900px;
    margin: .5rem;
    pointer-events: none
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem)
}

.modal-dialog-centered:before {
    display: block;
    height: calc(100vh - 1rem);
    content: ""
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    background: #442176;
    background-clip: padding-box;
    border: none;
    border-radius: 5px;
    outline: 0;
    pointer-events: auto
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    transition: .2s
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: .5
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #653ba1;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem
}

.modal-header .close {
    margin: -1rem -1rem -1rem auto;
    padding: 1rem
}

.modal-title {
    color: #fff;
    font-size: 24px
}

.modal-subtitle {
    color: #b1adbc;
    font-size: 18px
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #653ba1;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.modal-footer>:not(:first-child) {
    margin-left: .25rem
}

.modal-footer>:not(:last-child) {
    margin-right: .25rem
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.modal-drawer.modal-dialog {
    max-width: 500px;
    margin: 0 auto
}

.modal-drawer .modal-close {
    top: 20px;
    right: 24px;
    width: 24px;
    height: 24px
}

.modal-drawer .modal-close svg {
    width: 13px;
    height: 13px;
    fill: #fff
}

.modal-drawer .modal-content {
    padding: 12px 25px 24px;
    overflow: hidden;
    background-color: #342563;
    border-radius: 16px
}

.modal-drawer-header {
    height: 40px
}

.modal-drawer-image,
.modal-drawer-icon {
    margin: 0 auto
}

.modal-drawer-image img,
.modal-drawer-image svg,
.modal-drawer-icon img,
.modal-drawer-icon svg {
    width: 100%
}

.modal-drawer-image {
    max-width: 120px;
    margin-bottom: 24px
}

.modal-drawer-icon {
    max-width: 64px;
    margin-bottom: 8px
}

.modal-drawer-icon svg {
    height: 64px
}

.modal-drawer-content {
    margin-bottom: 32px;
    text-align: center
}

.modal-drawer-title {
    margin-bottom: 0;
    color: #fff;
    font-weight: 500;
    font-size: 24px;
    white-space: pre-line
}

.modal-drawer-text {
    margin: 10px 0 0;
    color: #b1adbc
}

.modal-drawer-subtext {
    margin: 5px 0 0;
    color: #fff
}

.modal-drawer-text,
.modal-drawer-subtext {
    font-size: 18px;
    white-space: pre-line
}

.modal-drawer-btns {
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-drawer-btns button {
    flex: 1 1 calc(50% - 6px);
    height: 48px
}

.modal-drawer-btns button:first-child {
    margin-right: 12px
}

.modal-drawer-alert {
    max-width: 300px;
    margin: 16px auto 0;
    color: #b1adbc;
    font-size: 14px;
    text-align: center
}

.modal-drawer-footer {
    margin: 25px -24px -23px;
    padding: 20px 25px;
    text-align: center;
    background-color: #3f2b7a
}

@media screen and (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog,
    .fade {
        -webkit-transition: none;
        transition: none
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px
    }
    .modal-dialog {
        margin: 1.75rem auto
    }
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem)
    }
    .modal-dialog-centered:before {
        height: calc(100vh - 3.5rem)
    }
    .modal-sm {
        max-width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 800px
    }
}

@media (max-width: 900px) {
    body.modal-open {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden
    }
    .modal-drawer-image {
        max-width: 90px;
        margin-bottom: 8px
    }
    .modal-drawer {
        max-width: 100% !important
    }
    .modal-drawer-header {
        height: 20px
    }
    .modal-drawer-content {
        margin-bottom: 30px
    }
    .modal-drawer-title {
        font-size: 18px
    }
    .modal-drawer-text,
    .modal-drawer-subtext {
        font-size: 16px
    }
    .modal-drawer-btns button {
        height: 40px
    }
}

.fadeOpacity {
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade:not(.show) {
    opacity: 0
}

.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer
}

.modal-close svg {
    display: block;
    width: 14px;
    height: 14px;
    -webkit-transition: all .3s;
    transition: all .3s;
    fill: rgba(255, 255, 255, .804)
}

.modal-close:hover svg {
    fill: #fff
}

.rightHead {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 75px;
    min-height: 75px;
    background-color: transparent;
    box-shadow: rgba(0, 0, 0, .2) 0 4px 6px -1px, rgba(0, 0, 0, .12) 0 2px 4px -1px
}

.rightHead .chatLangDropdown {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box
}

.rightHead .chatLangDropdown .btnLang {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 10px 12px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .3px;
    background: #442176;
    border: none;
    border-radius: 6px;
    cursor: default
}

.rightHead .chatLangDropdown .btnLang:hover {
    background: #653ba1
}

.rightHead .chatLangDropdown .btnLang:hover .btnContent .opener svg {
    fill: #fff
}

.rightHead .chatLangDropdown .btnLang .btnContent {
    display: flex;
    align-items: center;
    width: 100%
}

.rightHead .chatLangDropdown .btnLang .btnContent svg {
    width: 20px;
    height: 20px;
    margin-right: 7px
}

.rightHead .chatLangDropdown .btnLang .btnContent .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.rightHead .chatLangDropdown .btnLang .btnContent .opener svg {
    width: 100%;
    height: 100%;
    margin-right: 0;
    fill: #fff
}

.rightHead .chatLangDropdown .btnLang .btnContent .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.rightHead .chatLangDropdown .menu {
    position: absolute;
    top: 100%;
    right: inherit;
    bottom: auto;
    left: 0;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 150px;
    margin: 12px 0 10px;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.rightHead .chatLangDropdown .menu:before {
    position: absolute;
    top: -8px;
    left: 50px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

.rightHead .chatLangDropdown .menu.open {
    display: block
}

.rightHead .chatLangDropdown .menu .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.rightHead .chatLangDropdown .menu .item.active {
    background-color: #e1e1e1
}

.rightHead .chatLangDropdown .menu .item svg {
    width: 18px;
    height: 18px;
    margin-right: 7px
}

.rightHead .chatLangDropdown .menu .item:last-child {
    border-bottom: 1px solid transparent
}

.rightHead .chatLangDropdown .menu .item:active,
.rightHead .chatLangDropdown .menu .item:focus,
.rightHead .chatLangDropdown .menu .item:hover {
    background-color: #f1f1f1
}

.rightHead .chatLangDropdown .menu .item:not(.active),
.rightHead .chatLangDropdown .menu .item:not([disabled]) {
    cursor: pointer
}

.authModal {
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto
}

@media (max-width: 500px) {
    .authModal {
        width: calc(100% - 14px);
        max-width: 360px
    }
}

@media (max-width: 400px) {
    .authModal {
        width: 100%
    }
}

.authModal .errorFallback {
    max-width: 100%
}

.authModal .modal-content {
    background: #442176
}

.authModal .modal-content .authContainer {
    display: flex;
    min-height: 666px
}

.authModal .modal-content .authContainer .authLeft {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53%;
    min-height: 487px;
    overflow: hidden;
    border-radius: 5px 0 0 5px
}

.authModal .modal-content .authContainer .authLeft img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.authModal .modal-content .authContainer .authHead {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    background-color: #2d3340;
    border-radius: 5px 5px 0 0
}

.authModal .modal-content .authContainer .authHead img {
    height: 28px;
    margin-bottom: 7px
}

.authModal .modal-content .authContainer .authHead h3 {
    margin-bottom: 0;
    color: #838896;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase
}

.authModal .modal-content .authContainer .authContent {
    width: 52%;
    padding: 25px
}

.authModal .modal-content .authContainer .authContent .authContentContainer {
    display: flex;
    flex-direction: column
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authTabs {
    display: flex;
    margin-bottom: 20px;
    font-size: 15px;
    text-align: center;
    border-bottom: 1px solid #9327b0
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authTabs button {
    position: relative;
    width: 50%;
    padding-bottom: 15px;
    color: #fff;
    cursor: pointer
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authTabs button.active {
    color: #fff
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authTabs button.active:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fdcd2d;
    content: ""
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authTabs button:hover {
    color: #fff
}

.authModal .modal-content .authContainer .authContent .authContentContainer .regTypeContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 5px), 1fr));
    gap: 10px;
    margin-bottom: 12px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .regTypeContainer .btn {
    display: flex;
    align-items: center;
    justify-content: center
}

.authModal .modal-content .authContainer .authContent .authContentContainer .regTypeContainer .btn img {
    width: 26px;
    margin-right: 10px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .regTypeContainer .btn:disabled {
    opacity: .5
}

.authModal .modal-content .authContainer .authContent .authContentContainer .regTypeContainer .btn:last-child:nth-child(odd) {
    grid-column: span 2
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin: 0 -5px 12px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer .btnSocial {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: calc(20% - 10px);
    height: 44px;
    margin: 0 5px;
    color: #fff;
    font-weight: 400;
    font-size: 24px;
    background: #442176;
    border-radius: 4px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer .btnSocial:disabled {
    opacity: .5
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer .btnSocial:disabled:hover {
    background: #442176
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer .btnSocial:hover {
    background: #653ba1
}

.authModal .modal-content .authContainer .authContent .authContentContainer .socialContainer .btnSocial svg {
    pointer-events: none
}

.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #9327b0;
    content: ""
}

.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine span,
.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine button {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    vertical-align: initial;
    background: #442176
}

.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine button {
    color: #fdcd2d;
    background-color: #442176 !important;
    cursor: pointer
}

.authModal .modal-content .authContainer .authContent .authContentContainer .captionLine button:hover {
    color: #c134e8
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 15px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 5px;
    color: #fff;
    background: initial;
    border: 1px solid #9327b0;
    border-radius: 4px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent {
    display: flex;
    align-items: center
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    background: #9327b0;
    border-radius: 3px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent .currencyIcon.wide {
    width: 48px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent .opener {
    position: absolute;
    top: 15px;
    right: 10px;
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown button .btnContent .opener svg {
    width: 100%;
    height: 100%;
    fill: #fff
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 200px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu.open {
    display: block
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu:before {
    position: absolute;
    top: -7px;
    right: 12px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 10px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item.active,
.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item:hover,
.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item:focus {
    background-color: #f1f1f1
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item:first-child {
    border-radius: 4px 4px 0 0
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item:last-child {
    border-bottom: 0;
    border-radius: 0 0 4px 4px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    background: #e5e5e5;
    border-radius: 3px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item .currencyIcon.wide {
    width: 35px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .currencyDropdown .menu .item.active .currencyIcon {
    color: #fff;
    background: #338500
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnHavePromo {
    display: block;
    margin: 0 auto 10px;
    color: #fff;
    background: none;
    -webkit-transition: color .3s linear;
    transition: color .3s linear
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnHavePromo:hover {
    color: #fdcd2d
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .formRow {
    margin-bottom: 10px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .formRow .emailNoty {
    display: block;
    margin-top: .65em;
    color: #ff95b5;
    font-weight: 400;
    font-size: 12px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnEmail {
    width: 100%;
    margin-bottom: 20px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnAuth {
    display: block;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0;
    margin-top: 20px;
    color: #261a46;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid none;
    border-radius: 4px;
    outline: none;
    transition: opacity .3s ease, cursor .3s ease;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnAuth:not(:disabled) {
    cursor: pointer
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .btnAuth:disabled {
    opacity: .4
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge {
    padding: 15px 0 0;
    color: #fff;
    font-size: 12px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container input[type=checkbox] {
    width: 100%;
    height: 100%;
    accent-color: #fdcd2d
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container .checkboxLabel {
    position: relative;
    width: 15px;
    height: 15px;
    margin-right: 10px
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container .checkboxLabel.error:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #a40a41;
    border-radius: 2px;
    transition: border-color .3s;
    content: ""
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container .textLabel.error {
    color: #a40a41
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container label {
    display: flex;
    flex-direction: column
}

.authModal .modal-content .authContainer .authContent .authContentContainer .authForm .confirmAge .checkbox-container:last-child {
    margin-bottom: 0
}

.authModal .modal-content .authContainer .authContent .authContentContainer .lostPassword {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: -20px;
    padding: 10px 0;
    border-top: 1px solid #9327b0
}

.authModal .modal-content .authContainer .authContent .authContentContainer .lostPassword button {
    padding: 0;
    color: #fff;
    font-weight: 400;
    background: 0 0
}

.authModal .modal-content .authContainer .authContent .authContentContainer .lostPassword button:hover {
    color: #fff;
    background: 0 0
}

@media (max-width: 900px) {
    .authModal .modal-content .authContainer .authContent .authContentContainer {
        width: 100%;
        max-width: 380px;
        margin: auto
    }
}

.authModal .modal-content .authContainer .authContent .fauthForm {
    width: 100%
}

.authModal .modal-content .authContainer .authContent .fauthForm .tfaInfo {
    display: flex;
    margin-bottom: .75em;
    padding-bottom: .75em;
    color: #9da0a9;
    font-size: 15px;
    text-align: center;
    border-bottom: 1px solid #2d3340
}

.authModal .modal-content .authContainer .authContent .fauthForm .codeRow {
    display: flex;
    margin: 0 -6px 20px
}

.authModal .modal-content .authContainer .authContent .fauthForm .codeRow input {
    width: 16.66%;
    height: 44px;
    margin: 0 6px;
    color: #fff;
    font-weight: 700;
    font-size: 25px;
    line-height: 44px;
    text-align: center;
    background-color: #1f232b;
    border: 1px solid transparent;
    border-radius: 3px;
    outline: none;
    touch-action: manipulation
}

.authModal .modal-content .authContainer .authContent .fauthForm .codeRow input:focus {
    border: 1px solid #fdae05
}

.authModal .modal-content .authContainer .authContent .fauthForm .form {
    width: 100%
}

.authModal .modal-content .authContainer .authContent .fauthForm .form .formRow {
    margin-bottom: 10px
}

.authModal .modal-content .authContainer .authContent .fauthForm .form .formRow .formField {
    position: relative
}

.authModal .modal-content .authContainer .authContent .fauthForm .form .formRow .formField .input-field {
    height: 38px;
    background: #1f232b;
    border-radius: 3px
}

.authModal .modal-content .authContainer .authContent .fauthForm .changeForm {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: -20px;
    padding: 10px 0
}

.authModal .modal-content .authContainer .authContent .fauthForm .changeForm .or {
    width: 1px;
    height: 9px;
    margin: 7px 10px 0;
    background: #464f57
}

.authModal .modal-content .authContainer .authContent .fauthForm .changeForm .btn {
    padding: 0;
    color: #fff;
    font-weight: 500;
    background: transparent
}

.authModal .modal-content .authContainer .authContent .fauthForm .changeForm .btn:hover {
    color: #fff;
    background: transparent
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 10px);
    margin: 0 -5px 10px
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btn {
    display: flex;
    justify-content: center;
    width: calc(25% - 10px);
    height: 44px;
    margin: 0 5px;
    font-weight: 400;
    font-size: 20px;
    border-radius: 2.5px
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnVk {
    background: #2787f5
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnVk:hover {
    background: #1f6fca
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnFb {
    background: #3b5999
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnFb:hover {
    background: #2c4374
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnOk {
    background: #db8a37
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnOk:hover {
    background: #c47626
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnGl {
    background: #db4437
}

.authModal .modal-content .authContainer .authContent .fauthForm .socialAuth .btnGl:hover {
    background: #c63024
}

.authModal .modal-content .authContainer .authContent .fauthForm .btnAuth {
    justify-content: center;
    width: 100%;
    margin-top: 3px;
    padding: 13px 20px;
    font-weight: 400;
    font-size: 14px;
    border-radius: 2.5px
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine span,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    vertical-align: initial
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine span:after,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine span:before,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button:after,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button:before {
    position: absolute;
    top: 50%;
    display: block;
    width: calc(100% + 10px);
    border-top: 1px solid rgba(91, 98, 113, .5019607843);
    content: ""
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine span:before,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button:before {
    right: 100%
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine span:after,
.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button:after {
    left: 100%
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button {
    color: #fdcd2d
}

.authModal .modal-content .authContainer .authContent .fauthForm .captionLine button:hover {
    color: #c134e8
}

.authModal .modal-content .authContainer .authContent .fauthForm .confirmAge {
    padding: 10px 0;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #9327b0
}

@media (max-width: 900px) {
    .authModal .modal-content .authContainer .authContent {
        width: 100%;
        padding: 20px
    }
}

@media (max-width: 900px) {
    .authModal .modal-content .authContainer {
        min-height: auto
    }
}

@media (max-width: 900px) {
    .authModal {
        width: calc(100% - 14px);
        max-width: 360px
    }
}

.bonusModal,
.vipModal,
.bonusCodeModal {
    width: 590px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 590px) {
    .bonusModal,
    .vipModal,
    .bonusCodeModal {
        width: calc(100% - 14px)
    }
}

.bonusModal .modal-content,
.vipModal .modal-content,
.bonusCodeModal .modal-content {
    background: #442176
}

.bonusModal .modal-content .bonusContainer,
.vipModal .modal-content .bonusContainer,
.bonusCodeModal .modal-content .bonusContainer {
    display: flex;
    flex-direction: column
}

.bonusModal .modal-content .bonusContainer .bonusHeader,
.vipModal .modal-content .bonusContainer .bonusHeader,
.bonusCodeModal .modal-content .bonusContainer .bonusHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: #653ba1;
    border-bottom: 1px solid #653ba1
}

.bonusModal .modal-content .bonusContainer .bonusContent,
.vipModal .modal-content .bonusContainer .bonusContent,
.bonusCodeModal .modal-content .bonusContainer .bonusContent {
    padding: 15px
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert,
.vipModal .modal-content .bonusContainer .bonusContent .alert,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #fdae05;
    border-radius: 5px
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    padding-right: 10px
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji img,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji img,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .emoji img {
    width: 32px;
    height: 32px
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap {
    white-space: pre-line
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link {
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    padding-right: 6px;
    padding-left: 20px
}

.bonusModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link svg,
.vipModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link svg,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .alert .alertWrapper .textWrap .link svg {
    position: absolute;
    top: 50%;
    left: 4px;
    color: #fdcd2d;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.bonusModal .modal-content .bonusContainer .bonusContent .labelLine,
.vipModal .modal-content .bonusContainer .bonusContent .labelLine,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .labelLine {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px
}

.bonusModal .modal-content .bonusContainer .bonusContent .labelLine:before,
.vipModal .modal-content .bonusContainer .bonusContent .labelLine:before,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .labelLine:before {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #fdae05;
    content: ""
}

.bonusModal .modal-content .bonusContainer .bonusContent .labelLine span,
.vipModal .modal-content .bonusContainer .bonusContent .labelLine span,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .labelLine span {
    position: relative;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    background: #442176
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer,
.vipModal .modal-content .bonusContainer .bonusContent .timer,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer .item,
.vipModal .modal-content .bonusContainer .bonusContent .timer .item,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer .item {
    position: relative;
    margin: 10px 10px 0;
    color: rgba(255, 255, 255, .804);
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer .item:first-child,
.vipModal .modal-content .bonusContainer .bonusContent .timer .item:first-child,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer .item:first-child {
    margin-left: 0
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer .item:last-child,
.vipModal .modal-content .bonusContainer .bonusContent .timer .item:last-child,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer .item:last-child {
    margin-right: 0
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer .item>div,
.vipModal .modal-content .bonusContainer .bonusContent .timer .item>div,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer .item>div {
    position: absolute;
    top: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%);
    -webkit-user-select: none;
    user-select: none
}

.bonusModal .modal-content .bonusContainer .bonusContent .timer .item span,
.vipModal .modal-content .bonusContainer .bonusContent .timer .item span,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .timer .item span {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    margin-top: 5px;
    color: #fff;
    font-size: 17px;
    border: 1px solid #653ba1;
    -webkit-user-select: none;
    user-select: none
}

.bonusModal .modal-content .bonusContainer .bonusContent .btnBoost,
.vipModal .modal-content .bonusContainer .bonusContent .btnBoost,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .btnBoost {
    display: block;
    width: 240px;
    height: 44px;
    margin: 20px auto;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer
}

.bonusModal .modal-content .bonusContainer .bonusContent .codeWrapper,
.vipModal .modal-content .bonusContainer .bonusContent .codeWrapper,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .codeWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    max-width: 320px;
    margin: 0 auto
}

.bonusModal .modal-content .bonusContainer .bonusContent .codeWrapper .append,
.vipModal .modal-content .bonusContainer .bonusContent .codeWrapper .append,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .codeWrapper .append {
    position: relative;
    display: -webkit-flex;
    display: flex
}

.bonusModal .modal-content .bonusContainer .bonusContent .codeWrapper .append input,
.vipModal .modal-content .bonusContainer .bonusContent .codeWrapper .append input,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .codeWrapper .append input {
    height: 44px;
    color: #fff;
    font-size: 16px;
    background: #261a46;
    border: 1px solid transparent;
    border-radius: 5px
}

.bonusModal .modal-content .bonusContainer .bonusContent .codeWrapper .append .btn,
.vipModal .modal-content .bonusContainer .bonusContent .codeWrapper .append .btn,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .codeWrapper .append .btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 120px;
    height: 44px;
    margin-left: -5px;
    padding: 0 15px;
    font-size: 13px;
    white-space: nowrap;
    background: #fdcd2d;
    border: 1px solid transparent;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.bonusModal .modal-content .bonusContainer .bonusContent .bonusBottom,
.vipModal .modal-content .bonusContainer .bonusContent .bonusBottom,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .bonusBottom {
    width: calc(100% + 30px);
    margin-bottom: -15px;
    margin-left: -15px;
    padding: 18px;
    color: rgba(255, 255, 255, .804);
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.bonusModal .modal-content .bonusContainer .bonusContent .bonusBottom span,
.vipModal .modal-content .bonusContainer .bonusContent .bonusBottom span,
.bonusCodeModal .modal-content .bonusContainer .bonusContent .bonusBottom span {
    display: block;
    max-width: 360px;
    margin: 0 auto
}

.bonusModal .modal-content .bonusContainer h3,
.vipModal .modal-content .bonusContainer h3,
.bonusCodeModal .modal-content .bonusContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.bonusModal .modal-content .bonusContainer .confirmIcon,
.vipModal .modal-content .bonusContainer .confirmIcon,
.bonusCodeModal .modal-content .bonusContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.bonusModal .modal-content .bonusContainer .confirmText,
.vipModal .modal-content .bonusContainer .confirmText,
.bonusCodeModal .modal-content .bonusContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center
}

.bonusModal .modal-content .bonusContainer .confirmExtra,
.vipModal .modal-content .bonusContainer .confirmExtra,
.bonusCodeModal .modal-content .bonusContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.bonusModal .modal-content .bonusContainer .confirmActions,
.vipModal .modal-content .bonusContainer .confirmActions,
.bonusCodeModal .modal-content .bonusContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.bonusModal .modal-content .bonusContainer .confirmActions .btn,
.vipModal .modal-content .bonusContainer .confirmActions .btn,
.bonusCodeModal .modal-content .bonusContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.clubModal {
    width: 680px;
    margin-right: auto;
    margin-left: auto
}

.clubContainer {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.clubContainer .clubWrapper {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .804);
    border-radius: 6px
}

.clubContainer .clubWrapper .tabsContainer {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 52px;
    min-height: 52px;
    padding: 0 15px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-radius: 6px 6px 0 0
}

.clubContainer .clubWrapper .tabsContainer .tabsClose {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 38px;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.clubContainer .clubWrapper .tabsContainer .tabsClose:hover svg {
    fill: #fff
}

.clubContainer .clubWrapper .tabsContainer .tabsClose svg {
    display: block;
    width: 13px;
    height: 13px;
    transition: all .3s;
    fill: rgba(255, 255, 255, .13)
}

.clubContainer .clubWrapper .tabsContainer .tabsLink {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 52px;
    margin-right: 5px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.clubContainer .clubWrapper .tabsContainer .tabsLink:last-child {
    margin-right: 0
}

.clubContainer .clubWrapper .tabsContainer .tabsLink svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    margin-right: 8px;
    opacity: .65
}

.clubContainer .clubWrapper .tabsContainer .tabsLink.active {
    color: #fff;
    border-bottom: 2px solid #fdcd2d
}

.clubContainer .clubWrapper .tabsContainer .tabsLink.active svg {
    opacity: 1
}

.clubContainer .clubWrapper .tabsContainer .tabsLink:focus,
.clubContainer .clubWrapper .tabsContainer .tabsLink:hover {
    color: #fff
}

.clubContainer .clubWrapper .tabsContainer .tabsLink:focus svg,
.clubContainer .clubWrapper .tabsContainer .tabsLink:hover svg {
    opacity: 1
}

@media (max-width: 500px) {
    .clubContainer .clubWrapper .tabsContainer .tabsLink {
        margin-right: 6px;
        padding: 0 10px;
        font-size: 13px
    }
    .clubContainer .clubWrapper .tabsContainer .tabsLink svg {
        width: 1em;
        height: 1em;
        margin-right: 4px
    }
}

@media (max-width: 370px) {
    .clubContainer .clubWrapper .tabsContainer .tabsLink {
        font-size: 11px
    }
    .clubContainer .clubWrapper .tabsContainer .tabsLink svg {
        display: none
    }
}

@media (max-width: 500px) {
    .clubContainer .clubWrapper .tabsContainer {
        height: 50px;
        padding: 10px
    }
}

.clubContainer .clubWrapper .clubContent {
    width: 100%;
    padding: 25px
}

.clubContainer .clubWrapper .clubContent.hasWrap {
    flex-wrap: wrap
}

.clubContainer .clubWrapper .clubContent .reloadType {
    margin: 20px 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    text-align: center
}

.clubContainer .clubWrapper .clubContent .reloadType span {
    color: #fff
}

.clubContainer .clubWrapper .clubContent .caption {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase
}

.clubContainer .clubWrapper .clubContent .vip .progressTop {
    margin-bottom: 25px;
    padding: 20px;
    border: 1px solid #343b48;
    border-radius: 5px
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progressHeader {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progressHeader .image {
    display: flex;
    align-items: center;
    height: 36px;
    margin: 0 15px 0 0
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progressHeader .image img {
    width: auto;
    height: 34px
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progressHeader .h2 {
    font-size: 16px
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progressHeader .h3 {
    margin-top: 1px;
    color: rgba(255, 255, 255, .5);
    font-size: 13px
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar,
.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar>span {
    display: flex;
    border-radius: 3px;
    -webkit-user-select: none;
    user-select: none
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar {
    position: relative;
    height: 28px;
    margin-bottom: 10px;
    background: #191d25;
    border: 2px solid none
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar.filled:after {
    border-color: #fdae05 transparent transparent
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar.last:after {
    display: none
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar:before {
    left: 7px;
    border-color: #fdae05 transparent transparent
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar:after {
    right: 7px;
    border-color: #191d25 transparent transparent
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar:after,
.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar:before {
    position: absolute;
    bottom: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0;
    content: ""
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar>span {
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    color: #fff;
    font-size: 13px;
    background: #fdae05
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar.empty>span {
    padding-left: 25px;
    background: 0 0
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBar.empty:before {
    border-color: #191d25 transparent transparent
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBottom {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBottom .item {
    display: flex;
    align-items: center
}

.clubContainer .clubWrapper .clubContent .vip .progressTop .progress .progressBottom .item img {
    height: 13px;
    margin: 0 5px 0 0
}

.clubContainer .clubWrapper .clubContent .vip .tabs {
    display: flex
}

.clubContainer .clubWrapper .clubContent .vip .tabs .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.66%;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    opacity: .5
}

.clubContainer .clubWrapper .clubContent .vip .tabs .item.active {
    border: 1px solid #343b48;
    border-bottom-color: #442176;
    opacity: 1
}

.clubContainer .clubWrapper .clubContent .vip .tabs .item img {
    height: 32px;
    margin: 8px 0 26px
}

.clubContainer .clubWrapper .clubContent .vip .tabs .item .name {
    position: absolute;
    bottom: 9px;
    font-size: 9px;
    white-space: nowrap;
    text-transform: uppercase
}

.clubContainer .clubWrapper .clubContent .vip .content {
    margin-top: -1px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #343b48;
    border-radius: 0 0 5px 5px
}

.clubContainer .clubWrapper .clubContent .vip .content .name {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase
}

.clubContainer .clubWrapper .clubContent .vip .content .name.bronze {
    color: #ab5d30
}

.clubContainer .clubWrapper .clubContent .vip .content .name.silver {
    color: #4d7bcd
}

.clubContainer .clubWrapper .clubContent .vip .content .name.gold {
    color: #ffd40e
}

.clubContainer .clubWrapper .clubContent .vip .content .name.platinum {
    color: #077cfc
}

.clubContainer .clubWrapper .clubContent .vip .content .name.diamond {
    color: #7625f4
}

.clubContainer .clubWrapper .clubContent .vip .content .name.elite {
    color: #ff3c38
}

.clubContainer .clubWrapper .clubContent .vip .content .name img {
    height: 16px;
    margin: -2px 5px 0 0
}

.clubContainer .clubWrapper .clubContent .vip .content .name span {
    text-transform: uppercase;
    text-shadow: 1px 1px #101a2d, -1px -1px #101a2d
}

.clubContainer .clubWrapper .clubContent .vip .content .wagerNeed {
    margin-bottom: 15px;
    color: #aab0bd;
    font-size: 12px
}

.clubContainer .clubWrapper .clubContent .vip .content .list {
    padding: 0;
    list-style: none
}

.clubContainer .clubWrapper .clubContent .vip .content .list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #fff
}

.clubContainer .clubWrapper .clubContent .vip .content .list li.disabled {
    opacity: .3
}

.clubContainer .clubWrapper .clubContent .vip .content .list li .box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #3a404c
}

.clubContainer .clubWrapper .clubContent .vip .content .list li .box svg {
    width: 9px;
    height: 9px
}

.clubContainer .clubWrapper .clubContent .vip .content .list li .box svg.icon-close {
    width: 7px;
    height: 7px
}

.clubContainer .clubWrapper .clubContent .vip .content .list li:last-child {
    margin-bottom: 0
}

.clubContainer .clubWrapper .clubContent .alert {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #fdae05;
    border-radius: 5px
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper .emoji {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 40px;
    padding-right: 10px
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper .emoji img {
    width: 32px;
    height: 32px
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper .textWrap {
    white-space: pre-line
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper .textWrap .link {
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    padding-left: 20px
}

.clubContainer .clubWrapper .clubContent .alert .alertWrapper .textWrap .link svg {
    position: absolute;
    top: 50%;
    left: 4px;
    color: #fdcd2d;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.clubContainer .clubWrapper .clubContent .labelLine {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px
}

.clubContainer .clubWrapper .clubContent .labelLine:before {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #fdae05;
    content: ""
}

.clubContainer .clubWrapper .clubContent .labelLine span {
    position: relative;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    background: #442176
}

.clubContainer .clubWrapper .clubContent .roulette {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 72px;
    padding: 0 5px;
    background: #232833
}

.clubContainer .clubWrapper .clubContent .roulette:before {
    left: 0;
    background-image: linear-gradient(90deg, #272d39 0, rgba(26, 44, 56, 0))
}

.clubContainer .clubWrapper .clubContent .roulette:after {
    right: 0;
    background-image: linear-gradient(270deg, #272d39 0, rgba(26, 44, 56, 0))
}

.clubContainer .clubWrapper .clubContent .roulette:before,
.clubContainer .clubWrapper .clubContent .roulette:after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 25%;
    height: 100%;
    content: ""
}

.clubContainer .clubWrapper .clubContent .roulette .line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #3f4654 50%, rgba(255, 255, 255, 0))
}

.clubContainer .clubWrapper .clubContent .roulette .line.top {
    top: 0
}

.clubContainer .clubWrapper .clubContent .roulette .line.bottom {
    bottom: 0
}

.clubContainer .clubWrapper .clubContent .roulette .arrow {
    position: absolute;
    left: 50%;
    width: 16px;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

.clubContainer .clubWrapper .clubContent .roulette .arrow:before {
    bottom: 2px;
    border-color: transparent transparent #3a404e;
    border-width: 0 8px 8px
}

.clubContainer .clubWrapper .clubContent .roulette .arrow:after {
    top: 2px;
    border-color: #3a404e transparent transparent;
    border-width: 8px 8px 0
}

.clubContainer .clubWrapper .clubContent .roulette .arrow:before,
.clubContainer .clubWrapper .clubContent .roulette .arrow:after {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    content: ""
}

.clubContainer .clubWrapper .clubContent .roulette .rouletteWrapper {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    overflow: hidden
}

.clubContainer .clubWrapper .clubContent .roulette .rouletteWrapper .rouletteContent {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    will-change: transform
}

.clubContainer .clubWrapper .clubContent .roulette .rouletteWrapper .rouletteContent .row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex: none;
    flex: none
}

.clubContainer .clubWrapper .clubContent .roulette .rouletteWrapper .rouletteContent .row .item {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    min-width: 175px;
    height: 44px;
    margin: 0 2px;
    color: #fff;
    font-size: 16px;
    background: #2d3340;
    border-radius: 3px
}

.clubContainer .clubWrapper .clubContent .roulette .rouletteWrapper .rouletteContent .row .item .currency {
    display: inline-block;
    margin-left: 5px
}

.clubContainer .clubWrapper .clubContent .timer {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin-bottom: 20px
}

.clubContainer .clubWrapper .clubContent .timer.faucet {
    margin-top: 20px
}

.clubContainer .clubWrapper .clubContent .timer .item {
    position: relative;
    margin: 10px 10px 0;
    color: rgba(255, 255, 255, .804);
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none
}

.clubContainer .clubWrapper .clubContent .timer .item:first-child {
    margin-left: 0
}

.clubContainer .clubWrapper .clubContent .timer .item:last-child {
    margin-right: 0
}

.clubContainer .clubWrapper .clubContent .timer .item>div {
    position: absolute;
    top: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%);
    -webkit-user-select: none;
    user-select: none
}

.clubContainer .clubWrapper .clubContent .timer .item span {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    margin-top: 5px;
    color: #fff;
    font-size: 17px;
    border: 1px solid #343b48;
    -webkit-user-select: none;
    user-select: none
}

.clubContainer .clubWrapper .clubContent .btnBoost,
.clubContainer .clubWrapper .clubContent .btnFaucet,
.clubContainer .clubWrapper .clubContent .btnReload,
.clubContainer .clubWrapper .clubContent .btnRakeback {
    display: block;
    width: 240px;
    height: 44px;
    margin: 20px auto;
    color: #261a46;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer
}

.clubContainer .clubWrapper .clubContent .inputWrapper {
    position: relative;
    width: 100%;
    margin: 20px 0 0
}

.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 15px;
    background-color: #261a46;
    border: 0;
    border-radius: 5px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown:hover,
.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown:focus {
    outline: none;
    box-shadow: none
}

.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown:hover svg,
.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown:focus svg {
    fill: #fff
}

.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown>div {
    justify-content: space-between;
    width: 100%
}

.clubContainer .clubWrapper .clubContent .inputWrapper .btnDropdown .btnContent {
    display: flex;
    align-items: center
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown {
    position: relative;
    box-sizing: border-box
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: inherit;
    z-index: 1080;
    box-sizing: border-box;
    width: 100%;
    min-width: 200px;
    margin: 0;
    color: rgba(255, 255, 255, .804);
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #261a46;
    background-clip: padding-box;
    border-top: 0;
    border-radius: 0 0 5px 5px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu.open {
    display: block
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .scrollBar {
    max-height: 250px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock {
    padding: 10px 10px 5px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockName {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockName:not(:first-child) {
    margin-top: 15px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems {
    width: 100%
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item {
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px;
    color: #fff;
    font-weight: 400;
    font-size: medium;
    white-space: nowrap;
    text-align: inherit;
    background-color: initial;
    border-bottom: 1px solid #653ba1;
    border-radius: 5px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item:last-child {
    margin-bottom: 10px;
    border: 0
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item:hover {
    background-color: #261a46
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent {
    position: relative;
    display: inline;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent .comission {
    position: absolute;
    top: 50%;
    right: 5px;
    color: rgba(255, 255, 255, .804);
    font-size: .9em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent img {
    height: 18px;
    margin-top: 1px;
    margin-right: 10px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 100%;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    transform: translateY(-57%)
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove:hover,
.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove:focus {
    color: #ec193f
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove svg {
    margin-top: 3px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .menu .simplebar-scrollbar:before {
    position: absolute;
    right: 2px;
    left: 2px;
    background: #653ba1;
    border-radius: 7px;
    content: ""
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 46px;
    padding: 0 15px;
    color: #fff;
    font-size: 15px;
    background-color: #261a46;
    border: 1px solid #653ba1;
    border-radius: 5px;
    outline: none;
    box-shadow: 1px 3px 3px -2px #20242d
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn.open {
    border-radius: 5px 5px 0 0
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn:hover {
    background-color: #261a46
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent .selectedMethod {
    display: flex;
    align-items: center
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent .selectedMethod img {
    height: 22px;
    margin-top: 1px;
    margin-right: 10px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: transform .2s ease-out
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent .opener.open {
    transform: rotate(-180deg)
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn .btnContent .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.clubContainer .clubWrapper .clubContent .inputWrapper .dropdown .btn>div {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%
}

.clubContainer .clubWrapper .clubContent .inputWrapper .inputWithIcon {
    height: 48px;
    padding-left: 35px;
    color: #fff;
    font-size: 16px;
    background: #261a46;
    border-radius: 5px
}

.clubContainer .clubWrapper .clubContent .inputWrapper .inputWithIcon::-webkit-outer-spin-button,
.clubContainer .clubWrapper .clubContent .inputWrapper .inputWithIcon::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none
}

.clubContainer .clubWrapper .clubContent .inputWrapper .inputIcon {
    position: absolute;
    top: 50%;
    left: 13px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.clubContainer .clubWrapper .clubContent .inputWrapper .inputIcon,
.clubContainer .clubWrapper .clubContent .inputWrapper .inputIcon svg {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.clubContainer .clubWrapper .clubContent .bonusBottom {
    width: calc(100% + 50px);
    margin-bottom: -25px;
    margin-left: -25px;
    padding: 18px;
    color: rgba(255, 255, 255, .804);
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.clubContainer .clubWrapper .clubContent .bonusBottom a {
    color: rgba(255, 255, 255, .804)
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.bronze {
    color: #ab5d30
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.silver {
    color: #4d7bcd
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.gold {
    color: #ffd40e
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.platinum {
    color: #077cfc
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.diamond {
    color: #7625f4
}

.clubContainer .clubWrapper .clubContent .bonusBottom a.elite {
    color: #ff3c38
}

.clubContainer .clubWrapper .clubContent .bonusBottom span {
    display: block;
    max-width: 360px;
    margin: 0 auto
}

@media (max-width: 600px) {
    .clubContainer .clubWrapper .clubContent {
        padding: 15px
    }
    .clubContainer .clubWrapper .clubContent .bonusBottom {
        width: calc(100% + 30px);
        margin-bottom: -15px;
        margin-left: -15px
    }
}

.confirmModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .confirmModal {
        width: calc(100% - 14px)
    }
}

.confirmModal .modal-content {
    background: #442176
}

.confirmModal .modal-content .confirmContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px
}

.confirmModal .modal-content .confirmContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.confirmModal .modal-content .confirmContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.confirmModal .modal-content .confirmContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.confirmModal .modal-content .confirmContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.confirmModal .modal-content .confirmContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.confirmModal .modal-content .confirmContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.confirmWithdrawModal {
    width: 499px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .confirmWithdrawModal {
        width: calc(100% - 14px)
    }
}

.confirmWithdrawModal .modal-content {
    background: #442176
}

.confirmWithdrawModal .modal-content .confirmContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px
}

.confirmWithdrawModal .modal-content .confirmContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmIcon {
    color: #ff95b5;
    font-size: 45px
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    overflow-x: hidden;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmText span {
    width: 100%
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmText .confirmPurse {
    margin: 20px 0 10px;
    padding: 8px 15px;
    font-weight: 500;
    font-size: 20px;
    word-break: break-word;
    background: #261a46;
    border-radius: 5px
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmExtra {
    display: flex;
    margin: 0 0 15px;
    color: inherit;
    text-align: center
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.confirmWithdrawModal .modal-content .confirmContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper {
    width: 100%;
    margin-top: 15px;
    color: rgba(255, 255, 255, .804)
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper input {
    display: none
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper label {
    margin-top: 0
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio {
    display: flex;
    align-items: center;
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    cursor: pointer
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper {
    display: flex;
    align-items: center
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper.isError .radioBox {
    border-color: #ec193f
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper.isError .radioText {
    color: #ec193f
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper .radioBox {
    position: relative;
    width: 17px;
    min-width: 17px;
    height: 17px;
    margin-right: 3px;
    border: 1px solid #fff;
    border-radius: 3px;
    border-image: initial;
    outline: 0;
    cursor: pointer
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper .radioBox:before {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: all .1s ease-out 0s;
    content: ""
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper .radioBox.checked:before {
    transform: rotate(45deg) scale(1)
}

.confirmWithdrawModal .modal-content .confirmContainer .checkBoxWrapper .radio .radioWrapper .radioText {
    margin-left: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.fortuneWheelModal {
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 590px) {
    .fortuneWheelModal {
        width: calc(100% - 14px)
    }
}

.fortuneWheelModal .modal-content {
    background: #442176
}

.fortuneWheelModal .modal-content .fortuneWheelContainer {
    display: flex;
    flex-direction: column
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .avatarBlock img {
    background: #653ba1;
    padding: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 20px;
    color: inherit;
    font-size: 16px;
    background: linear-gradient(180deg, #653ba1, #442176);
    border-radius: 6px 6px 0 0
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock img {
    width: 125px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child .top .prize {
    font-size: 22px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child .top .participants {
    font-size: 16px;
    display: flex;
    align-items: center
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child .top .participants svg {
    margin-left: 5px;
    margin-bottom: 4px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:first-child .bottom .subTitle {
    font-size: 16px;
    color: #fff
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:last-child {
    display: flex;
    align-items: center
}

@media (max-width: 500px) {
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader {
        flex-direction: column
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock .top {
        justify-content: center
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock .bottom {
        margin: 0 auto
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelHeader .headerBlock:last-child {
        margin-top: 20px
    }
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .playersCount {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    text-transform: uppercase;
    border-bottom: 2px solid #ff902a;
    background: #ff902a;
    color: #fff
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent {
    padding: 10px 25px 25px;
    min-height: 200px;
    position: relative
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .participantList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .participantList .participant {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    padding: 10px;
    transition: all .3s ease
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .participantList .participant:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, .2)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .participantList .participant span {
    margin-top: 5px;
    color: #fff;
    font-size: 14px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .currentParticipant {
    font-size: 24px;
    color: #fff;
    text-align: center;
    margin-bottom: 20px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .animation {
    height: 50%;
    max-width: 285px;
    margin-bottom: 20px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .animation img {
    width: 100%;
    margin-top: 35px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .winner {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .804);
    background: transparent;
    border: 1px solid #653ba1;
    box-shadow: none;
    border-radius: 5px;
    padding: 5px 15px;
    transition: all .3s ease;
    margin-top: 10px;
    max-height: 57px;
    width: 100%;
    margin-right: 0;
    margin-left: 0
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .winner .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .winner .avatarBlock img {
    background: #653ba1;
    padding: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .winner:hover {
    background: #653ba1
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .winner span {
    color: #fff;
    font-weight: 700;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .selectionAnimationContainer .selectingWinners {
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    margin-bottom: 10px;
    margin-top: 30px;
    text-transform: uppercase
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .emptyWinners {
    width: 100%;
    height: 200px;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 20px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .804)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 5px;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 450px;
    overflow-y: scroll;
    padding-right: 10px;
    width: calc(100% + 10px)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .804);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .8039215686);
    box-shadow: none;
    border-radius: 5px;
    padding: 5px 15px;
    transition: all .1s ease;
    margin-top: 10px;
    max-height: 57px;
    width: 100%;
    margin-right: 0;
    margin-left: 0
}

@media (min-width: 750px) {
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner {
        width: 31.66%
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner:not(:nth-child(3n)) {
        margin-right: 2%
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner:nth-child(3n) {
        margin-left: auto
    }
}

@media (min-width: 500px) and (max-width: 749px) {
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner {
        width: 48%
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner:not(:nth-child(2n)) {
        margin-right: 2%
    }
    .fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner:nth-child(2n) {
        margin-left: auto
    }
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner .avatarBlock img {
    background: #653ba1;
    padding: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner:hover {
    background: #653ba1
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .winnerSelectionContainer .winnersList .winner span {
    color: #fff;
    font-weight: 700;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list {
    position: relative
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list.isLoader {
    min-height: 300px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list.isLoader .waitingParticipants {
    width: 100%;
    height: 200px;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 20px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .804)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive {
    position: relative;
    display: block;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 450px;
    overflow-y: scroll;
    padding-right: 10px;
    width: calc(100% + 10px)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table {
    width: 100%;
    text-align: left;
    border-collapse: collapse
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead {
    position: sticky;
    top: 0;
    background-color: #442176;
    box-shadow: 0 1px rgba(255, 255, 255, .804)
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr th {
    padding: 10px 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    text-transform: uppercase
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr td,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr th {
    width: 20%;
    text-align: center
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr td:first-child,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr th:first-child {
    text-align: left
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr td:last-child,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table thead tr th:last-child {
    text-align: right
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr:last-child td {
    border-bottom: 1px solid transparent
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td {
    min-width: 150px;
    padding: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td:first-child {
    padding-left: 0
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td:last-child {
    padding-right: 0
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td svg {
    margin-left: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td .player {
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: 500;
    cursor: pointer
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td .player:hover {
    color: #fdcd2d
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td div {
    white-space: nowrap
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td div.active {
    color: #5cb503
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td div.expired {
    color: #ec193f
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr th {
    width: 20%;
    text-align: center
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td:first-child,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr th:first-child {
    text-align: left
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr td:last-child,
.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .withPager .list .responsive table tbody tr th:last-child {
    text-align: right
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    white-space: nowrap
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .inputWrapper {
    width: 100%;
    margin-bottom: 12px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .inputWrapper input {
    height: 44px;
    background: #261a46
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .helper {
    margin-top: 15px;
    padding: 10px;
    text-align: center;
    text-wrap: balance;
    background: #653ba1;
    border-radius: 5px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .btnRain {
    width: 100%;
    height: 44px;
    margin-top: 20px;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 14px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .bonusBottom {
    width: calc(100% + 50px);
    margin-bottom: -25px;
    margin-left: -25px;
    padding: 18px;
    color: rgba(255, 255, 255, .804);
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .fortuneWheelContent .bonusBottom span {
    display: block;
    max-width: 360px;
    margin: 0 auto
}

.fortuneWheelModal .modal-content .fortuneWheelContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.fortuneWheelModal .modal-content .fortuneWheelContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

@media (max-width: 900px) {
    .fortuneWheelModal .modal-content .left {
        display: none
    }
    .fortuneWheelModal .modal-content .right {
        width: 100%
    }
}

.fortuneWheelInviteModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .fortuneWheelInviteModal {
        width: calc(100% - 14px)
    }
}

.fortuneWheelInviteModal .modal-content {
    background: #442176
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteIcon img {
    width: 150px
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteTextTitle {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    text-align: center;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    font-weight: 500
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.fortuneWheelInviteModal .modal-content .fortuneWheelInviteContainer .fortuneWheelInviteActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.fortuneWheelCreateModal {
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 590px) {
    .fortuneWheelCreateModal {
        width: calc(100% - 14px)
    }
}

.fortuneWheelCreateModal .modal-content {
    background: #442176
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer {
    display: flex
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    min-height: 487px;
    padding: 20px;
    background-image: url(https://cdn.friends-casino.io/assets/png/Modal/fortuneWheelCreateBg.png);
    background-position: 50%;
    background-size: cover;
    border-radius: 5px 0 0 5px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right {
    display: flex;
    flex-direction: column;
    width: 52%
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 52px;
    min-height: 52px;
    padding: 0 20px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-radius: 6px 6px 0 0
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateHeader svg {
    margin-right: 6px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent {
    padding: 25px;
    color: inherit
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    white-space: nowrap
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputWrapper {
    width: 100%;
    margin-bottom: 12px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputWrapper input {
    height: 44px;
    background: #261a46
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputWrapper input.smallSpace {
    padding-left: 30px !important
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputWrapper input.extraSpace {
    padding-left: 40px !important
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputWrapper input.extremeSpace {
    padding-left: 52px !important
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .inputIcon {
    position: absolute;
    top: 50%;
    left: 13px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .helper {
    margin-top: 15px;
    padding: 10px;
    text-align: center;
    text-wrap: balance;
    background: #653ba1;
    border-radius: 5px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .btnRain {
    width: 100%;
    height: 44px;
    margin-top: 20px;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 14px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .bonusBottom {
    width: calc(100% + 50px);
    margin-bottom: -25px;
    margin-left: -25px;
    padding: 18px;
    color: rgba(255, 255, 255, .804);
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .fortuneWheelCreateContent .bonusBottom span {
    display: block;
    max-width: 360px;
    margin: 0 auto
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

@media (max-width: 900px) {
    .fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .left {
        display: none
    }
    .fortuneWheelCreateModal .modal-content .fortuneWheelCreateContainer .right {
        width: 100%
    }
}

.registrationInfoModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .registrationInfoModal {
        width: calc(100% - 14px)
    }
}

.registrationInfoModal .modal-content {
    background: #442176
}

.registrationInfoModal .modal-content .registrationInfoContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px
}

.registrationInfoModal .modal-content .registrationInfoContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoIcon {
    color: #ff95b5;
    font-size: 45px
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px auto;
    padding: 10px 60px;
    background: #261a46;
    border-radius: 5px
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field {
    display: flex;
    justify-content: space-between;
    width: 223px;
    margin: 10px 0;
    padding: 8px;
    color: inherit;
    font-weight: 600;
    letter-spacing: .3px;
    text-shadow: 1px 1px 1px #653ba1;
    background: #261a46;
    border-radius: 5px
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field:first-child {
    margin-bottom: 0
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field:first-child .copyTooltip {
    bottom: 195px;
    left: 62.5%;
    width: 100px;
    pointer-events: none
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field:nth-child(2) {
    margin-top: 0;
    border-top: 2px solid #653ba1;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field:nth-child(2) .copyTooltip {
    bottom: 160px;
    left: 62.5%;
    width: 100px;
    pointer-events: none
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field .title {
    width: 50%;
    text-align: left
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field .content {
    display: inline;
    width: auto;
    overflow: visible;
    color: rgba(255, 255, 255, .804);
    transition: all .3s ease
}

.registrationInfoModal .modal-content .registrationInfoContainer .infoText .infoModalSection .field .content:hover {
    color: #fff
}

.registrationInfoModal .modal-content .registrationInfoContainer .confirmExtra {
    display: flex;
    margin: 0 0 15px;
    color: inherit;
    text-align: center
}

.registrationInfoModal .modal-content .registrationInfoContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.registrationInfoModal .modal-content .registrationInfoContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.referralPromoBackground {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75)
}

.referralPromoModal {
    position: absolute;
    top: 50%;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.referralPromoModal .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 30px);
    max-width: 360px !important;
    min-height: 50px;
    margin-bottom: 15px;
    background-color: #1d1438;
    border-radius: 12px
}

.referralPromoModal .wrapper .close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    margin: -10px -10px 0 0;
    padding: 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px
}

.referralPromoModal .wrapper .image {
    position: relative;
    flex: none;
    width: 100%
}

.referralPromoModal .wrapper .image .spacer {
    display: block;
    width: 100%;
    padding-bottom: 65.2174%;
    content: ""
}

.referralPromoModal .wrapper .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover
}

.referralPromoModal .wrapper .title {
    position: relative;
    margin: 15px 0 0;
    font-size: 20px;
    text-align: center
}

.referralPromoModal .wrapper .title:before,
.referralPromoModal .wrapper .title:after {
    position: absolute;
    top: 3px;
    display: block;
    width: 20px;
    height: 20px;
    content: ""
}

.referralPromoModal .wrapper .title:before {
    left: -30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAqCAMAAAD/A0kuAAABelBMVEUAAAD/vg3/qQf/gkbzWlLwU1DwU1H/xCvwU1DwVFH/1DD/yyjwU1DwU1DvVVX1UWJdleL/yyj/ySjwU1BCpvb/yyjwVFBCpvbwVFH/rRH/pABGqvd3meD/pwbyZUr/pQT/oQCDgMbwU1D/oAD/ogD/yyj/rgz/zCvyVVJEqPn9vy7/pAAqedRDpvbKHmBUcMJDpvbsQXuFVaFrZrT/yyjwU1D/yij8pyeIfsXxVFDuQXvxU1HwU1HuQXrzbEr/zCj/zi2dfsGFWaz6kzn/yynYTYm4YKHsQXt+cLr/uBfxYEz/rAtyYq9ebb17hM74mTnTJmebSpDSKWjVKWjmrEn/yyn/tRHwVFD/owBCpfX/yifsQHr/oADwU1DFGVz/thPlgD1IovHiNnNQnewZdtM2l+wge9aSdbu2YKHeRYIkgduLecHXTIlkkdxsjNd9gspDdMmWbrWgbbGqZ6q/W5zRUI68IWTMIWEsjOJtd8NuY6+TRo6ZOYHVk1G2QeFrAAAAWXRSTlMAFvEHJPPjw5rtDd/UujAO+ejNyJCFgHJUTjMcDuzLwLCqo4x9a1k5OCkpJ/779eHa2r6zr6yino+Nc29kX1RIHxwXEvPu7enh4NrY1c6/trOjnYR7e2dGRQv19gQAAAJmSURBVDjLhdMJV9pAEAfwtSGXgAgWCsilXAqtttajVutRe993m2Q3bQhnPWprtfd376wkmsBC/u8Rlvd+TIYZgiBcYAwxEg8gRt4Tecc6VqvISmiaEBZeJWTGOmLMWacgIUEWDhCec+EUvAQicQwbojWc+OqVWYQyG4gZgaxtFRfFChyTSWRhMbzJxD5BVCGiPZPUJFwiqhpl6whY/4rsnGDZr95BzGxFixW0RFyDHV0W0eDIROgePhQKCXiLkcF2hhCpe8phnEW+CTIErxMSh5vD6BL5fAmBlZhull52BJKIRtRwxZonv860l5SLpzPJqDTPuzOJ+eBSesexMWg/DPttRqaMZiSN8cPRXj1pT6s8SpcvWfYCxh9hM0MSJyTmsOpyn+AKZ3eT4P/qsOqbPpvDObubacI77b8HvTiP00n7d/qEJYf99MvY7sHVbNIxwTGHPTGUZxZiD8Vh9a+KYm4zcb/tmIqiTLkeqyD/KOLfhAYC/KrL1lpgjbvOLcIzv+FXwyPw3+F9LntsAN7Vbrq2IKGyqi7GCFlzWW2fFu5o989LT/BB+FAMi7IsuW1LgXzTNCjNTvrcHlF7oEHupZg2gTG27HeDNrEHtmNOMXEJMLW61qZWaWuQL4rJLk1bBgvbsBvW2nTW7IVkH6+80E8Of1K7S+0eXcw4GpjQk2b9c0NpUdsZP23nFhqc2/PN+u8axQfdW1xjO5sv6PqPGvw4yD58CUoPzStdP2yANWF+UNorC7R381iDtG4gzzxt1v/Q3o/oQLzzcg56p+ukpb3zeu4vDNIq7Z3rl+vNhuGBXHwe/QewZbRtc2nFdAAAAABJRU5ErkJggg==) no-repeat;
    background-size: 20px
}

.referralPromoModal .wrapper .title:after {
    right: -30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAqCAMAAAAd31JXAAABfVBMVEUAAAD/pwX/uRfHG17yVlT7dFfwVFFYmObvVFHwU1CEhdTwU1DwU1DxVFPxUlb/yyj/yin/tRj/xBzwU1D/yynwU1BDpvZDpff/yyn/zCr/pAD+nxf9vipHqfpQnevwU1D/oQD/yyjzYkv/yCnwVFD/oQD+ty+LfMP/zCj/ogr/ogDxU1HxVFH5vzP/ogBHqPgoedNjkd1pj9pCpvZbbr7sQXvvU1BlaLj5kTzwVFH/ogDvU1HxVFGMfMT/sxD/tBLxU1HuQnzuQnv0dEjxVFDzVlOIYrNKrf9PcsT/oACxZKVlZbXgSITsQHr/rAv/vBmEa7J7W6eNUZz0eUT/rwzRJmb/oACgRo7SKWaDgMj/yynTKmr/zCr/zCj/owBCpfX/yijsQHr/oADvU1D/uhfhckEcd9TlOXTBGFybcLWvZaeIe8MjgdvWS4lLn+85m+4zlOnEWJjeSIXkRH/hNXFui9V2h9A9eM62J2zNImNjg89/W6WNQoyjP4XIjmBZ401GAAAAX3RSTlMA9yb+Igns/eSHCfDZMBjo2hMMuLSqh3txPC8oHxn++PLf2dPKxbmQjIx9aFlOSyH+9+3o1cjDwq6dm5J5cXFiYV5KRkUpJA/o5+Pg4NvX1NDJycK/vq+sqqidkYFoW0eW0wUAAAJgSURBVDjLjdJ3W9pQFAbwU5GEEYaMliVUEGRbW2ud1Tpq994r49YAAoqCo/Oze29CSII3Prx/5Ul+z8nJewNDmd4ASsY5L+Uug4KD2/EYqLE7UJliwwhNa9c3pYn+WISWgBInSgHArstogUEOoGUrDTDJ33EpVn/bOIVGp/yajZF9E6FQZGwDMfbLNCIIPsB4V2sgJ+BkGA9l7JTgixrLciz6sfXTKORCE2DIAgpC4nt+DGhxrODFqsVitX80KKUsSreI88AHScpqDaJtiho85KBaKPwAgADANkKrYJmyOwVKEn4hk6+4GaXY2UtufR0AvE61gUWB5K3SwA3+ulnaX0rStbFBWelICHcdB6qNCD917CSnao9qBU6COXnBgEsIlcA6FUHH5DcMD5YrBobtq/9G7EBBrYBlKTuEXcnfewa8xHi0j4o/lpbN9jPPnxvwzo5eQDwbM49leb5p03E/s0DJDI/TNmLrPDvAtlkz4VU3h5eO+jNp94JXpw/EBhl8ZMJeBnH2AP79txAK6va52E1iy3ZNuIzQyhdBqJBjLOljRXGfJ1uIJuxk3DnfNwzCbk6zT0ScU4IbBgzUEg7a2B4nCd4Xe3WCJUm6T7Msf0IGH/EqtmFsZWcUoa2Mj6Re3yM7BCj2NgbKFmpxnbNz2/vCi3cJCt1U3s0eq/iwJctPvWCRu+q4uS62tT+y/OghWGUTkxOCT8Xar7rtDZGWY0ldLLaHZ3XbJztckbWmiNNmyZ6vB5KeOb6Bbe+fLM+74OqskW57eM+PQ5Lebaf11/YVRgjbacm37sFImR9ZwgWP6LbeiSVHOgAAAABJRU5ErkJggg==) no-repeat;
    background-size: 20px
}

.referralPromoModal .wrapper .text {
    max-width: 240px;
    margin: 15px 0 0;
    font-size: 13px;
    text-align: center
}

.referralPromoModal .wrapper .text .code {
    display: block;
    margin: 10px auto;
    color: #5cb503;
    font-size: 20px
}

.referralPromoModal .wrapper .button {
    width: 100%;
    padding: 15px 15px 20px
}

.referralPromoModal .wrapper .button button {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 48px;
    margin: auto;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    background-color: #ff902a;
    border-radius: 6px;
    outline: none
}

.chatRainModal {
    width: 420px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 590px) {
    .chatRainModal {
        width: calc(100% - 14px)
    }
}

.chatRainModal .modal-content {
    background: #442176
}

.chatRainModal .modal-content .chatRainContainer {
    display: flex;
    flex-direction: column
}

.chatRainModal .modal-content .chatRainContainer .chatRainHeader {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 52px;
    min-height: 52px;
    padding: 0 20px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-radius: 6px 6px 0 0
}

.chatRainModal .modal-content .chatRainContainer .chatRainHeader svg {
    margin-right: 6px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent {
    padding: 25px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    white-space: nowrap
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .inputWrapper {
    width: 100%;
    margin-bottom: 12px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .inputWrapper input {
    height: 44px;
    background: #261a46
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .helper {
    margin-top: 15px;
    padding: 10px;
    color: inherit;
    text-align: center;
    text-wrap: balance;
    background: #653ba1;
    border-radius: 5px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .btnRain {
    width: 100%;
    height: 44px;
    margin-top: 20px;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 14px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .bonusBottom {
    width: calc(100% + 50px);
    margin-bottom: -25px;
    margin-left: -25px;
    padding: 18px;
    color: rgba(255, 255, 255, .804);
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.chatRainModal .modal-content .chatRainContainer .chatRainContent .bonusBottom span {
    display: block;
    max-width: 360px;
    margin: 0 auto
}

.chatRainModal .modal-content .chatRainContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.chatRainModal .modal-content .chatRainContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.chatRainModal .modal-content .chatRainContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.chatRainModal .modal-content .chatRainContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.chatRainModal .modal-content .chatRainContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.chatRainModal .modal-content .chatRainContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.numberConfirmModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .numberConfirmModal {
        width: calc(100% - 14px)
    }
}

.numberConfirmModal .modal-content {
    background: #442176
}

.numberConfirmModal .modal-content .numberConfirmContainer {
    display: flex;
    flex-direction: column
}

.numberConfirmModal .modal-content .numberConfirmContainer .numberConfirmHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.numberConfirmModal .modal-content .numberConfirmContainer .numberConfirmContent {
    padding: 15px
}

.numberConfirmModal .modal-content .numberConfirmContainer .numberConfirmContent .numberConfirmBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px -15px;
    padding: 15px;
    background: rgba(0, 0, 0, .1)
}

.numberConfirmModal .modal-content .numberConfirmContainer .numberConfirmContent .numberConfirmBottom button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 42px;
    border-radius: 4px
}

.numberConfirmModal .modal-content .numberConfirmContainer .numberConfirmContent .numberConfirmBottom button:last-child {
    margin-left: 15px
}

.numberConfirmModal .modal-content .numberConfirmContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.numberConfirmModal .modal-content .numberConfirmContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.numberConfirmModal .modal-content .numberConfirmContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.numberConfirmModal .modal-content .numberConfirmContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.numberConfirmModal .modal-content .numberConfirmContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.numberConfirmModal .modal-content .numberConfirmContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.tfaModal {
    width: 450px;
    margin-right: auto;
    margin-left: auto
}

.tfaModal .modal-content {
    background: #442176
}

.tfaModal .modal-content .tfaContainer {
    padding: 0 20px 20px
}

.tfaModal .modal-content .tfaContainer .tfaHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 -20px;
    padding: 20px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-bottom: 1px solid #653ba1;
    border-radius: 6px 6px 0 0
}

.tfaModal .modal-content .tfaContainer .tfaWrapper {
    padding-top: 1em
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .loaderBlock {
    text-align: center
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .codeRow label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .codeRow .tfaValidationWrapper {
    margin: 0 0 20px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .tfaBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px -15px;
    padding: 15px;
    background: rgba(0, 0, 0, .1)
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .tfaBottom button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 42px;
    border-radius: 4px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .tfaBottom button:last-child {
    margin-left: 15px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    color: inherit;
    border-bottom: 1px solid #653ba1
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item.flexRow {
    flex-direction: row
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item.flexRow .image {
    width: 130px;
    min-width: 130px;
    height: 130px;
    margin-right: 15px;
    background: #fff
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .divider {
    display: block;
    height: 10px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 5px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode .value {
    padding: 3px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid #fdcd2d;
    border-right: 0;
    border-radius: 3px 0 0 3px
}

@media (max-width: 480px) {
    .tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode .value {
        width: 100%;
        text-align: center
    }
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode button {
    position: relative;
    padding: 3px 17px;
    background-color: transparent;
    border: 1px solid #fdcd2d;
    border-radius: 0 3px 3px 0
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode button:hover {
    color: #261a46;
    background-color: #fdcd2d
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, -50%)
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .secretCode .copyTooltip {
    right: 0;
    bottom: 50px;
    left: auto;
    width: 100px;
    color: inherit;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .title {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .804);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .descriptionLine {
    display: block;
    margin-top: 4px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow {
    margin-bottom: 12px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper {
    position: relative;
    display: inherit;
    width: inherit
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper.hasError input {
    border-color: #ec193f !important
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .inputControl {
    width: 100%;
    height: 46px;
    padding: 0 1em;
    color: #fff;
    font-size: 1em;
    font-family: open sans, sans-serif;
    background-color: #1c2028;
    border: 1px solid transparent;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .inputControl:not([readonly]):focus {
    border-color: #fdae05
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .tip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    padding: 1em;
    color: #e86376;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    background: #1c2028;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .tip.visible {
    visibility: visible;
    opacity: 1
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .tip:after {
    position: absolute;
    top: 100%;
    left: .5em;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px 4px 0;
    border-top-color: #1c2028 !important;
    content: ""
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .tip.topRight {
    top: auto;
    right: 0;
    bottom: 100%;
    left: auto
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .inputRow .validationWrapper .tip.topRight:after {
    left: 50%;
    transform: translate(-50%)
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .codeRow label {
    display: inline-flex;
    align-items: center;
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .codeRow .tfaValidationWrapper {
    margin: 0 0 20px
}

.tfaModal .modal-content .tfaContainer .tfaWrapper .item .submit {
    height: 46px;
    font-size: 16px
}

@media (max-width: 499px) {
    .tfaModal {
        width: calc(100% - 14px)
    }
    .tfaModal .modal-content .tfaContainer {
        padding: 0 16px 16px
    }
    .tfaModal .modal-content .tfaContainer .tfaHeader {
        margin: 0 -16px 16px;
        padding: 16px
    }
    .tfaModal .modal-content .tfaContainer .tfaWrapper {
        padding: 0
    }
}

.recoveryModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .recoveryModal {
        width: calc(100% - 14px)
    }
}

.recoveryModal .modal-content {
    background: #442176
}

.recoveryModal .modal-content .recoveryContainer {
    display: flex;
    flex-direction: column
}

.recoveryModal .modal-content .recoveryContainer .recoveryHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent {
    padding: 15px
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .changeTypeBtn {
    width: 100%;
    margin-bottom: 10px
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .typeSelect {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .typeSelect button {
    width: 100%;
    margin-top: 10px
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .typeSelect button:first-child {
    margin-top: 0
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .recoveryBottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px -15px;
    padding: 15px;
    background: rgba(0, 0, 0, .1)
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .recoveryBottom button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 42px;
    border-radius: 4px
}

.recoveryModal .modal-content .recoveryContainer .recoveryContent .recoveryBottom button:last-child {
    margin-left: 15px
}

.recoveryModal .modal-content .recoveryContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.recoveryModal .modal-content .recoveryContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.recoveryModal .modal-content .recoveryContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    color: inherit;
    font-size: 14px;
    text-align: center
}

.recoveryModal .modal-content .recoveryContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.recoveryModal .modal-content .recoveryContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.recoveryModal .modal-content .recoveryContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.captchaModal {
    width: 380px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 500px) {
    .captchaModal {
        width: calc(100% - 14px)
    }
}

.captchaModal .modal-content {
    background: #442176
}

.captchaModal .modal-content .captchaContainer {
    display: flex;
    flex-direction: column
}

.captchaModal .modal-content .captchaContainer .captchaHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.captchaModal .modal-content .captchaContainer .captchaContent {
    display: flex;
    justify-content: center;
    padding: 15px
}

.captchaModal .modal-content .captchaContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.captchaModal .modal-content .captchaContainer .confirmIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.captchaModal .modal-content .captchaContainer .confirmText {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 14px;
    text-align: center
}

.captchaModal .modal-content .captchaContainer .confirmExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.captchaModal .modal-content .captchaContainer .confirmActions {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.captchaModal .modal-content .captchaContainer .confirmActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

.walletModal {
    width: 900px;
    margin-right: auto;
    margin-left: auto
}

.walletContainer {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.walletContainer .walletWrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .804);
    border-radius: 6px
}

.walletContainer .walletWrapper .tabsContainer {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    height: 52px;
    min-height: 52px;
    padding: 0 15px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-radius: 6px 6px 0 0
}

.walletContainer .walletWrapper .tabsContainer .tabsLink {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 52px;
    margin-right: 5px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.walletContainer .walletWrapper .tabsContainer .tabsLink:last-child {
    margin-right: 0
}

.walletContainer .walletWrapper .tabsContainer .tabsLink svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    margin-right: 8px;
    opacity: .65
}

.walletContainer .walletWrapper .tabsContainer .tabsLink.active {
    color: #fff;
    border-bottom: 2px solid #fdcd2d;
    pointer-events: none
}

.walletContainer .walletWrapper .tabsContainer .tabsLink.active svg {
    opacity: 1
}

.walletContainer .walletWrapper .tabsContainer .tabsLink:focus,
.walletContainer .walletWrapper .tabsContainer .tabsLink:hover {
    color: #fff
}

.walletContainer .walletWrapper .tabsContainer .tabsLink:focus svg,
.walletContainer .walletWrapper .tabsContainer .tabsLink:hover svg {
    opacity: 1
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .tabsContainer .tabsLink {
        margin-right: 6px;
        padding: 0 10px;
        font-size: 13px
    }
    .walletContainer .walletWrapper .tabsContainer .tabsLink svg {
        width: 1em;
        height: 1em;
        margin-right: 4px
    }
}

@media (max-width: 370px) {
    .walletContainer .walletWrapper .tabsContainer .tabsLink svg {
        display: none
    }
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .tabsContainer {
        height: 50px;
        padding: 10px
    }
}

.walletContainer .walletWrapper .walletContentWrapper {
    display: flex;
    flex-direction: column;
    background-color: #442176
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer {
    display: flex;
    width: 100%;
    height: 42px;
    margin-top: 15px;
    margin-bottom: 15px
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer {
    position: relative;
    width: 100%
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer input.select::placeholder {
    color: #fff
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer input.active {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .8039215686)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .inputIcon {
    position: absolute;
    top: 50%;
    left: 13px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .close {
    position: absolute;
    top: calc(50% - 6px);
    right: 40px;
    display: none;
    -webkit-align-items: center;
    align-items: center;
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .close.active {
    display: -webkit-flex;
    display: flex
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .close svg {
    width: 100%;
    height: 100%;
    transition: fill .2s ease-out;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .close:hover svg {
    width: 100%;
    height: 100%;
    fill: #fff
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .opener {
    position: absolute;
    top: calc(50% - 8px);
    right: 13px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .selectBankInputContainer .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown {
    position: absolute;
    top: 100%;
    right: inherit;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 240px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown.empty {
    padding: 15px 20px;
    color: #828f9a;
    font-size: 14px
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown.open {
    display: block
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item img {
    width: 24px;
    margin-right: 8px;
    border-radius: 6px
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item:active,
.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item:focus,
.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item:hover {
    background-color: #f1f1f1
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item>div {
    display: flex;
    align-items: center;
    width: 100%
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item>div .badge.wide {
    width: 48px
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown:before {
    position: absolute;
    top: -8px;
    right: inherit;
    left: 15px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
    .walletContainer .walletWrapper .walletContentWrapper .sbpSelectBankContainer .dropdownContainer .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.walletContainer .walletWrapper .walletContentWrapper .plusBonus {
    margin-left: 6px;
    color: #5cb503;
    font-size: 12px;
    transform: translateY(-3px)
}

.walletContainer .walletWrapper .walletContentWrapper .qr {
    box-sizing: content-box;
    width: 180px;
    height: 180px;
    margin: 25px auto 0;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px
}

.walletContainer .walletWrapper .walletContentWrapper .cryptoBonusBanner {
    color: #fff !important;
    font-weight: 600;
    background: linear-gradient(135deg, #338500, #87d010) !important
}

.walletContainer .walletWrapper .walletContentWrapper .cryptoGuide {
    padding: 20px;
    color: #fff;
    background: #653ba1;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContentWrapper .cryptoGuide .cryptoGuideInner {
    transition: .2s all ease;
    display: flex;
    gap: 5px
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContentWrapper .cryptoGuide .cryptoGuideInner .right {
        width: 10%;
        display: flex;
        justify-content: end;
        align-items: center
    }
    .walletContainer .walletWrapper .walletContentWrapper .cryptoGuide .cryptoGuideInner .right .icon {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0
    }
    .walletContainer .walletWrapper .walletContentWrapper .cryptoGuide .cryptoGuideInner .left {
        width: 90%
    }
}

.walletContainer .walletWrapper .walletContentWrapper .cryptoGuide:hover .cryptoGuideInner {
    transform: translate(8px)
}

.walletContainer .walletWrapper .walletContentWrapper .cryptoGuide.disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #261a46;
    box-sizing: border-box
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item {
    display: flex;
    justify-content: center;
    max-width: 300px;
    flex: 1;
    padding: 10px 15px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    background-color: #653ba1;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
    text-align: center;
    border: none
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item:last-child {
    border-right: none;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item.active {
    color: #261a46;
    background-color: #fdcd2d;
    font-weight: 600;
    border-right: none
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item.active .plusBonus {
    color: #5cb503
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item.active.item:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs .item.active.item:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

@media (max-width: 400px) {
    .walletContainer .walletWrapper .walletContentWrapper .walletTypeTabs {
        padding: 20px 0
    }
}

.walletContainer .walletWrapper .walletContent {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background: #442176;
    border-radius: 0 0 6px 6px
}

.walletContainer .walletWrapper .walletContent.hasWrap {
    flex-wrap: wrap
}

.walletContainer .walletWrapper .walletContent .historyNav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0;
    border-radius: 5px 5px 0 0
}

.walletContainer .walletWrapper .walletContent .historyNav .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 44px;
    margin: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid #363d4c;
    border-radius: 6px;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .historyNav .btn:not(.active):hover {
    color: #fff
}

.walletContainer .walletWrapper .walletContent .historyNav .btn.active {
    color: #fff;
    background: #653ba1
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContent .historyNav .btn {
        height: 37px
    }
}

.walletContainer .walletWrapper .walletContent .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 0 0;
    list-style: none
}

.walletContainer .walletWrapper .walletContent .pager .inputBlock {
    display: flex;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #8e80b8;
    line-height: 1.25;
    background: none;
    border: 1px solid #8e80b8;
    border-radius: 5px;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn:hover {
    color: #fdcd2d;
    background-color: none
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.walletContainer .walletWrapper .walletContent .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .pager {
        padding: 30px 15px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper {
    position: relative;
    width: 100%;
    min-height: 320px;
    padding: 20px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager {
    height: calc(100% - 95px)
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager.isLoading .list {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    pointer-events: none
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list {
    position: relative;
    min-height: 250px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    font-size: 18px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .empty h4 {
    font-size: 24px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(60% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #653ba1;
    transform: translateZ(0);
    transition: box-shadow 3ms, border-top-color .1s
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    overflow: visible;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader:active,
.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader:focus,
.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader:hover {
    border: 0;
    outline: none
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight,
.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft {
    display: flex;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemLogo {
    height: 40px;
    margin-right: 10px;
    padding: 7px;
    background: #653ba1;
    border: 1px solid transparent;
    border-radius: 6px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemLogo img {
    height: 100%
}

@media (max-width: 1050px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemLogo {
        height: 35px;
        margin-right: 8px
    }
}

@media (max-width: 950px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemLogo {
        display: none
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
        font-size: 16px
    }
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
        font-size: 15px
    }
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
        font-size: 13px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
    display: block;
    max-width: 480px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 12px
    }
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 11px
    }
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo {
        margin-left: 8px
    }
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemRight .itemInfo {
        margin-left: 0
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemCeff {
    margin-right: 10px;
    color: #5cb503
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemCeff {
        display: none
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: right
}

@media (max-width: 380px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount {
        display: none
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
    display: flex;
    align-items: center;
    white-space: nowrap
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
    position: relative;
    top: 1px;
    margin-left: 2px
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 13px
    }
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
        font-size: 14px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus {
    display: flex;
    justify-content: flex-end;
    width: 200px;
    margin-left: auto;
    color: #fff
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus>span {
    padding: 0 5px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-left: auto
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 130px;
    height: 34px;
    margin-left: auto;
    text-align: center;
    background-color: #653ba1;
    border-radius: 34px;
    cursor: default
}

@media (max-width: 450px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus button {
        font-size: 12px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .success {
    color: #5cb503;
    background-color: rgba(98, 202, 91, .1)
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .canceled {
    color: #ff95b5;
    background-color: rgba(202, 174, 91, .1)
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .waiting {
    color: rgba(255, 255, 255, .804);
    background-color: rgba(177, 187, 195, .1)
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .error {
    color: #ff4b32;
    background-color: rgba(202, 174, 91, .1)
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel {
    z-index: 1;
    color: #615918;
    background-color: #f5e249;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel:hover,
.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel:focus {
    background-color: #e4d345
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel svg {
    position: relative;
    margin-right: 8px;
    font-size: .8em
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn {
    display: flex;
    justify-content: flex-end;
    margin-left: auto
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer {
    position: relative;
    display: flex;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #fdae05;
    border-radius: 4px 0 0 4px;
    cursor: help
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer svg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, -50%);
    fill: #fff
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer svg {
        font-size: 14px
    }
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer {
        width: 30px;
        height: 30px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
    height: 34px;
    padding: 0 15px;
    font-weight: 400;
    border-radius: 0 4px 4px 0
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        height: 30px
    }
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        padding: 0 8px
    }
}

@media (max-width: 400px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        padding: 0 6px;
        font-size: 11px
    }
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus {
        width: 180px
    }
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemLeft .itemStatus {
        width: 125px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemDate {
    position: absolute;
    right: 0;
    left: 0;
    display: none;
    width: 100%;
    text-align: center
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader .itemDate>span {
    padding: 3px 8px;
    border-radius: 50px
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemHeader {
        padding: 15px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent {
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .3s ease;
    transition: max-height .3s ease
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent.open {
    max-height: 100px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul {
    padding: 15px 0;
    color: rgba(255, 255, 255, .804);
    list-style: none
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul li {
    margin-bottom: 5px
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul li span {
    display: inline-flex;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul li span svg {
    margin: 3px 2px 0;
    font-size: .9em
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul li span:first-child {
    margin-right: 5px;
    font-weight: 500
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent ul {
        padding: 0 10px 5px
    }
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent {
        padding-left: 5px;
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent {
        font-size: 12px
    }
}

@media (min-width: 481px) and (max-width: 950px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent {
        padding-left: 25px
    }
}

@media (min-width: 951px) and (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item .itemContent {
        padding-left: 20px
    }
}

.walletContainer .walletWrapper .walletContent .historyWrapper .withPager .list .item:first-child {
    border-top: none
}

@media (max-width: 1100px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper {
        padding: 15px 0
    }
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .historyWrapper {
        padding: 10px 0 0
    }
}

.walletContainer .walletWrapper .walletContent .contentRight {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 66.666%;
    padding: 20px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile {
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .contentWrap {
    position: relative;
    min-height: 200px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    margin-bottom: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    font-size: 14px;
    background: #261a46;
    border: 0;
    border-radius: 4px 0 0 4px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    background: #9327b0;
    border-radius: 3px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency .currencyIcon.wide {
    width: 48px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency:hover {
    background: #261a46
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency.active {
    color: #fff;
    border: 2px solid #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .btnCurrency .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown {
    position: absolute;
    top: 100%;
    right: inherit;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 204px;
    width: 100%;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown.open {
    z-index: 1081;
    display: block
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 10px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item.active,
.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item:hover,
.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item:focus {
    background-color: #f1f1f1
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item:last-child {
    border-bottom: 0;
    border-radius: 0 0 4px 4px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    background: #e5e5e5;
    border-radius: 3px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item .currencyIcon.wide {
    width: 35px
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown .item.active .currencyIcon {
    color: #fff;
    background: #338500
}

.walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown:before {
    position: absolute;
    top: -8px;
    right: inherit;
    left: 15px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown {
        left: 0;
        -webkit-transform: none;
        transform: none
    }
    .walletContainer .walletWrapper .walletContent .contentRight.mobile .currencyContainer .dropdownContainer .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap {
    width: 100%;
    margin-bottom: 20px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .fastWithdrawals {
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #653ba1;
    border-radius: 4px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .fastWithdrawals .fastWithdrawalsSubmit {
    display: inline-block;
    margin-left: 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .fastWithdrawals .fastWithdrawalsSubmit button {
    color: #5cb503;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .fastWithdrawals .fastWithdrawalsSubmit button:focus,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .fastWithdrawals .fastWithdrawalsSubmit button:hover {
    border-bottom: 1px dashed #5cb503
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formSubmit {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formSubmit button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    text-transform: uppercase;
    background: #338500;
    border-radius: 5px;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formSubmit button:disabled {
    opacity: .7;
    cursor: not-allowed
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formSubmit button:hover {
    background: #5cb503
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs {
    display: flex;
    margin: 0 -10px 20px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs .item {
    padding: 0 10px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs .item input.smallSpace {
    padding-left: 30px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs .item input.extraSpace {
    padding-left: 40px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs .item input.extrimSpace {
    padding-left: 52px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formInputs .item>div {
    margin-bottom: 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: auto
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .loaderBlock {
    position: relative;
    height: 250px;
    overflow: hidden
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel input.smallSpace {
    padding-left: 30px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel input.extraSpace {
    padding-left: 40px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel input.extremeSpace {
    padding-left: 52px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel input.extraExtremeSpace {
    padding-left: 62px !important
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .infoWrapper {
    display: flex;
    margin-bottom: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .infoWrapper .image {
    margin-right: 10px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .infoWrapper .image img {
    height: 32px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .infoWrapper .methodName {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    color: #fff
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .infoWrapper .methodName .text {
    display: block;
    margin-top: 0;
    color: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .label {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .label .labelArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #fff;
    font-size: 12px;
    background: #fdae05;
    border-radius: 2px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper {
    position: relative;
    width: 50%;
    margin-left: auto
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .walletInput {
    padding-right: 35px;
    text-overflow: ellipsis
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 15px;
    background-color: #261a46;
    border: 0;
    border-radius: 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown:focus {
    outline: none;
    box-shadow: none
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown:hover svg,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown:focus svg {
    fill: #fff
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown>div {
    justify-content: space-between;
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .btnDropdown .btnContent {
    display: flex;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputWithIcon {
    height: 48px;
    padding-left: 35px;
    color: #fff;
    font-size: 16px;
    background: #261a46;
    border-radius: 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputWithIcon::-webkit-outer-spin-button,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputWithIcon::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputIcon {
    position: absolute;
    top: 50%;
    left: 13px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, .804);
    font-size: 17px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputIcon,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputIcon span,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputIcon svg {
    position: absolute;
    top: 51%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown {
    position: relative;
    box-sizing: border-box
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: inherit;
    z-index: 1080;
    box-sizing: border-box;
    width: 100%;
    min-width: 200px;
    margin: 0;
    color: rgba(255, 255, 255, .804);
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #261a46;
    background-clip: padding-box;
    border: 1px solid #653ba1;
    border-top: 0;
    border-radius: 0 0 5px 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu.open {
    display: block
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .scrollBar {
    max-height: 250px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockName {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockName:not(:first-child) {
    margin-top: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems {
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item {
    position: relative;
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 8px;
    color: #fff;
    font-weight: 400;
    font-size: medium;
    white-space: nowrap;
    text-align: inherit;
    background-color: initial;
    border-bottom: 1px solid #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item:last-child {
    margin-bottom: 10px;
    border: 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item:hover {
    background-color: #261a46
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent {
    position: relative;
    display: inline;
    align-items: center;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent .comission {
    position: absolute;
    top: 50%;
    right: 5px;
    color: rgba(255, 255, 255, .804);
    font-size: .9em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .itemContent img {
    height: 18px;
    margin-top: 1px;
    margin-right: 10px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 100%;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    transform: translateY(-57%)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove:focus {
    color: #ec193f
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .btnRemove svg {
    margin-top: 3px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .methodsBlock .blockItems .item .methodIcon {
    max-width: 15px;
    margin-left: 5px;
    transform: translateY(-1px);
    transition: transform .2s ease-in-out
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .menu .simplebar-scrollbar:before {
    position: absolute;
    right: 2px;
    left: 2px;
    background: #653ba1;
    border-radius: 7px;
    content: ""
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: 46px;
    padding: 0 15px;
    color: #fff;
    font-size: 15px;
    background: #261a46;
    border: 1px solid #653ba1;
    border-radius: 5px;
    outline: none;
    box-shadow: 1px 3px 3px -2px #20242d
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn.open {
    border-radius: 5px 5px 0 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn:hover {
    background-color: #261a46
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent .selectedMethod {
    display: flex;
    align-items: center
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent .selectedMethod img {
    height: 22px;
    margin-top: 1px;
    margin-right: 10px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: transform .2s ease-out
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent .opener.open {
    transform: rotate(-180deg)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn .btnContent .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .dropdown .btn>div {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons {
    position: relative
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons .formField .inputBlock {
    display: flex
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons .formField .inputBlock input {
    font-size: 16px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons .formField .inputBlock .copyBtn {
    width: 65px;
    color: inherit;
    background: #fdcd2d;
    border-left: 1px solid #fdcd2d;
    transition: all .3s
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons .formField .inputBlock .copyBtn:hover {
    background: #ff902a
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .inputButtons .formField .inputBlock .copyTooltip {
    top: -30px;
    left: 92.5%;
    width: 100px;
    color: inherit;
    background-color: rgba(0, 0, 0, .5)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: auto;
    margin: 5px -2.5px 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem {
    width: 20%;
    padding: 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    white-space: nowrap;
    background: #261a46;
    border: 2px solid transparent;
    border-radius: 4px;
    outline: none;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button .value {
    display: flex;
    align-items: center;
    padding-left: 2px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button .value svg {
    margin-top: -1px;
    margin-left: 3px;
    font-size: 13px
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button .value svg {
        margin-left: 0
    }
}

@media (max-width: 1200px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button .value {
        font-size: 14px
    }
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button.active {
    color: #fff;
    background: #261a46;
    border: 2px solid #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button:hover .value,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem button.active .value {
    color: #fff
}

@media (max-width: 1050px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem {
        width: 20%
    }
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem {
        width: 25%
    }
    .walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .buttonsContainer .btnItem:last-child {
        display: none
    }
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .notice {
    padding: 15px;
    background-color: #1d1438;
    border: 1px solid #653ba1;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 14px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .notice .value {
    color: #fff
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .notice .title {
    margin-bottom: 5px;
    color: #fff;
    font-weight: 500
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .notice .text {
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    line-height: 1.5
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .notice .tag {
    font-size: 13px;
    line-height: 1.5;
    display: block;
    margin-top: 8px;
    color: #5cb503
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .fallBackCard {
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #653ba1;
    border-radius: 4px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .fallBackCard .fallBackCardSubmit {
    display: inline-block
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .fallBackCard .fallBackCardSubmit button {
    color: #5cb503;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .fallBackCard .fallBackCardSubmit button:focus,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .fallBackCard .fallBackCardSubmit button:hover {
    border-bottom: 1px dashed #5cb503
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 3px);
    margin: -10px -3px 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 6px);
    height: 40px;
    margin: 10px 3px 0;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    background: #261a46;
    border: 2px solid transparent;
    border-radius: 4px;
    outline: none;
    cursor: pointer
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons button img {
    width: 17px;
    margin-right: 7px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons button:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons button.active {
    color: #fff;
    background: #261a46;
    border: 2px solid #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons button svg {
    width: 8px;
    height: 8px;
    margin-bottom: 0;
    margin-left: 4px;
    color: #ffd30e
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .subButtons.crypto button {
    width: calc(33% - 6px)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector {
    position: relative;
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    background: #261a46;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .2s ease
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger.open {
    border-color: #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger.hasValue {
    color: #fff
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .cardBankTriggerContent {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .cardBankTriggerContent .cardBankIcon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    border-radius: 4px;
    object-fit: contain
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .cardBankTriggerContent .cardBankPlaceholder {
    color: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    transition: transform .2s ease-out
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .opener.open {
    transform: rotate(-180deg)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankTrigger .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1080;
    display: none;
    width: 100%;
    margin-top: 4px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown.open {
    display: block
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 15px;
    color: rgba(0, 0, 0, .75);
    font-size: 14px;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    transition: background-color .2s ease
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem:first-child {
    border-radius: 5px 5px 0 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem:last-child {
    border-bottom: none;
    border-radius: 0 0 5px 5px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem:hover,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem.selected {
    background-color: #f1f1f1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemIcon {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    object-fit: contain;
    border-radius: 6px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemStar {
    position: relative;
    width: 8px;
    height: 8px;
    margin-bottom: 1px;
    margin-left: 3px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemStar svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: currentColor
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemName {
    margin-right: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemCheckbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 3px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem .cardBankItemCheckbox svg {
    width: 12px;
    height: 12px;
    fill: currentColor
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .cardBankItem.selected .cardBankItemCheckbox {
    background-color: #261a46;
    border-color: #653ba1
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel .walletContentWrapper .cardBankSelector .cardBankDropdown .simplebar-scrollbar:before {
    position: absolute;
    right: 2px;
    left: 2px;
    background: #653ba1;
    border-radius: 7px;
    content: ""
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap {
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap .label,
.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap .walletContentWrapper {
    width: 100%
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap .label {
    margin-bottom: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap .tagLabel {
    margin-top: 15px
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap .walletContentWrapper {
    margin: 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentWrap .formWithLabel.hasWrap:last-child {
    margin-bottom: 0
}

.walletContainer .walletWrapper .walletContent .contentRight .contentFooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding-top: 20px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #653ba1
}

@media (max-width: 900px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentFooter {
        flex-direction: column
    }
}

.walletContainer .walletWrapper .walletContent .contentRight .contentFooter .details .info {
    display: inline-flex;
    align-items: center;
    color: #fff
}

.walletContainer .walletWrapper .walletContent .contentRight .contentFooter .details .info svg {
    font-size: 11px
}

@media (max-width: 600px) {
    .walletContainer .walletWrapper .walletContent .contentRight .contentFooter .comission,
    .walletContainer .walletWrapper .walletContent .contentRight .contentFooter .details {
        width: 100%
    }
}

@media (max-width: 1200px) {
    .walletContainer .walletWrapper .walletContent .contentRight {
        width: 70%;
        padding: 20px
    }
}

@media (max-width: 500px) {
    .walletContainer .walletWrapper .walletContent .contentRight {
        padding: 15px
    }
}

@media (min-width: 900px) {
    .walletContainer .walletWrapper .walletContent .contentRight {
        min-height: 417px
    }
}

.walletContainer.isModal .walletWrapper .tabsContainer .tabsClose {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 38px;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.walletContainer.isModal .walletWrapper .tabsContainer .tabsClose:hover svg {
    fill: #fff
}

.walletContainer.isModal .walletWrapper .tabsContainer .tabsClose svg {
    display: block;
    width: 13px;
    height: 13px;
    transition: all .3s;
    fill: rgba(255, 255, 255, .13)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft {
    width: 36%;
    padding: 20px;
    border-right: 1px solid #653ba1
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    margin-bottom: 15px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    font-size: 14px;
    background: #261a46;
    border: 0;
    border-radius: 4px 0 0 4px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    color: #fff;
    font-size: 16px;
    background: #9327b0;
    border-radius: 3px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency .currencyIcon.wide {
    width: 48px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency:hover {
    background: #261a46
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency.active {
    color: #fff;
    border: 2px solid #653ba1
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .btnCurrency .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown {
    position: absolute;
    top: 100%;
    right: inherit;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 204px;
    width: 100%;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown.open {
    display: block
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 10px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 13px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item.active,
.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item:hover,
.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item:focus {
    background-color: #f1f1f1
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item:last-child {
    border-bottom: 0;
    border-radius: 0 0 4px 4px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item .currencyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 10px;
    color: rgba(0, 0, 0, .6);
    font-size: 14px;
    background: #e5e5e5;
    border-radius: 3px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item .currencyIcon.wide {
    width: 35px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown .item.active .currencyIcon {
    color: #fff;
    background: #338500
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown:before {
    position: absolute;
    top: -8px;
    right: inherit;
    left: 15px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
    .walletContainer.isModal .walletWrapper .walletContent .contentLeft .currencyContainer .dropdownContainer .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .loaderHalf {
    height: 150px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .loaderCentred {
    position: relative;
    transform: translate(-50%)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .loaderAddress {
    position: initial !important;
    height: 200px !important;
    transform: none !important
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .label {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .label .labelArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #fff;
    font-size: 12px;
    background: #fdae05;
    border-radius: 2px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .label .labelArrow svg {
    margin-left: 1px;
    transform: rotate(-90deg)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleLabel {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    line-height: 14px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 46px;
    margin-bottom: 10px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 15px;
    white-space: nowrap;
    background: #261a46;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod:hover,
.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod:focus {
    color: rgba(255, 255, 255, .804);
    background: #261a46;
    border-color: #653ba1
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod:hover .methodIcon,
.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod:focus .methodIcon {
    transform: scale(1.1)
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod.active {
    color: #fff;
    background: #261a46;
    border-color: #653ba1
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod .image {
    height: 22px;
    margin-right: 10px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod .image img {
    height: 100%
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod:last-child {
    margin-bottom: 0
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simpleMethod .methodIcon {
    max-width: 15px;
    margin-left: 5px;
    transform: translateY(-1px);
    transition: transform .2s ease-in-out
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simplebar-vertical {
    right: -15px
}

.walletContainer.isModal .walletWrapper .walletContent .contentLeft .simplebar-scrollbar:before {
    position: absolute;
    right: 2px;
    left: 2px;
    background: #653ba1;
    border-radius: 7px;
    content: ""
}

@media (max-width: 900px) {
    .walletContainer {
        margin-bottom: 20px
    }
}

.commissionAlert {
    margin-bottom: 20px;
    text-align: left;
    padding: 15px;
    border: 1px dashed #653ba1;
    border-radius: 4px
}

.commissionAlert .commissionTitle {
    margin-bottom: 5px;
    color: #fff;
    font-size: 14px
}

.commissionAlert .commissionDetails {
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    line-height: 1.5
}

.commissionAlert .commissionDetails span,
.commissionAlert .commissionRate {
    color: #fff
}

.bottomFeeContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px
}

@media (max-width: 900px) {
    .bottomFeeContainer {
        flex-direction: column
    }
}

.contentLeftDisabled {
    opacity: .5;
    pointer-events: none
}

.depositBtnSpinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: depositSpinnerRotate .8s linear infinite
}

@keyframes depositSpinnerRotate {
    to {
        transform: rotate(360deg)
    }
}

.walletSkeleton {
    background: #1d1438;
    border-radius: 4px
}

.walletSkeletonMethods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 5px
}

.walletSkeletonMethodItem {
    height: 46px;
    border-radius: 4px
}

.walletSkeletonForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%
}

.walletSkeletonLabel {
    width: 120px;
    height: 14px;
    margin-bottom: 15px
}

.walletSkeletonButtons {
    display: flex;
    gap: 10px
}

.walletSkeletonButton {
    flex: 1;
    height: 40px;
    border-radius: 4px
}

.walletSkeletonInput {
    height: 48px;
    border-radius: 5px
}

.walletSkeletonAmountButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px
}

.walletSkeletonAmountBtn {
    width: calc(20% - 8px);
    height: 36px;
    border-radius: 4px
}

@media (max-width: 500px) {
    .walletSkeletonAmountBtn {
        width: calc(25% - 8px)
    }
}

.walletSkeletonSubmit {
    height: 48px;
    margin-top: 20px;
    border-radius: 5px
}

.gameStatsModal {
    max-width: 500px;
    margin: 0 auto
}

.chatBanContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px
}

.chatBanContainer .banHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 15px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: #653ba1;
    border-bottom: 1px solid #653ba1
}

.chatBanContainer .chatBanWrapper {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    border-radius: 6px
}

.chatBanContainer .chatBanWrapper .chatBanContent {
    padding: 20px
}

.chatBanContainer .chatBanWrapper .chatBanContent .caption {
    margin-bottom: 15px;
    color: #fff;
    font-size: 14px
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin: 20px 0;
    padding: 0
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    color: inherit;
    font-size: 14px;
    background: #261a46;
    border: 0;
    border-radius: 4px 0 0 4px
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance:hover {
    background: #261a46
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance.active {
    color: #fff;
    border: 2px solid #653ba1
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .btnSelectAppearance .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown {
    position: absolute;
    top: 100%;
    right: inherit;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 285px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown.open {
    z-index: 1081;
    display: block
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item:active,
.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item:focus,
.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item:hover {
    background-color: #f1f1f1
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item>div {
    display: flex;
    align-items: center;
    width: 100%
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item>div .badge.wide {
    width: 48px
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown:before {
    position: absolute;
    top: -8px;
    right: inherit;
    left: 15px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown {
        left: 0;
        -webkit-transform: none;
        transform: none
    }
    .chatBanContainer .chatBanWrapper .chatBanContent .dropdownContainer .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.chatBanContainer .chatBanWrapper .chatBanContent .actionButtons {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 30px);
    margin-bottom: -15px;
    margin-left: -15px;
    padding: 18px;
    white-space: pre-line;
    text-align: center;
    background: #1d1438;
    border-radius: 0 0 6px 6px
}

.betModal {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 900px) {
    .betModal {
        width: calc(100% - 14px)
    }
}

.betModal .modal-content {
    background: #442176;
    background: url(https://cdn.friends-casino.io/assets/png/Chat/betBg.png);
    background-position: center;
    background-size: cover
}

.betModal .modal-content .betContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%
}

.betModal .modal-content .betContainer .betContent {
    width: 100%;
    padding: 20px
}

.betModal .modal-content .betContainer .betContent.notFound {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 200px;
    margin-top: -15px
}

.betModal .modal-content .betContainer .betContent.notFound .actionButtons {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 30px);
    margin-top: 20px;
    margin-bottom: -15px;
    margin-left: -15px;
    padding: 0 15px;
    white-space: pre-line;
    text-align: center;
    border-radius: 0 0 6px 6px
}

.betModal .modal-content .betContainer .betContent.notFound .actionButtons button {
    width: 100%
}

.betModal .modal-content .betContainer .betContent.notFound .betInfo {
    margin-top: 0
}

.betModal .modal-content .betContainer .betContent.notFound .betInfo .top {
    display: flex;
    justify-content: center;
    text-align: center
}

.betModal .modal-content .betContainer .betContent .betHeader {
    display: flex;
    align-items: flex-start
}

.betModal .modal-content .betContainer .betContent .betHeader .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.betModal .modal-content .betContainer .betContent .betHeader .avatarBlock img {
    padding: 5px;
    background: #653ba1
}

.betModal .modal-content .betContainer .betContent .betHeader .betOwner {
    flex-grow: 1
}

.betModal .modal-content .betContainer .betContent .betHeader .betOwner .betDate {
    color: #fff
}

.betModal .modal-content .betContainer .betContent .betHeader .betOwner .betName {
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

.betModal .modal-content .betContainer .betContent .betHeader .betGame {
    display: flex;
    margin-left: 12px
}

.betModal .modal-content .betContainer .betContent .betHeader .betGame img {
    width: 33px;
    height: 45px;
    border-radius: 5px
}

.betModal .modal-content .betContainer .betContent .betHeader .betGame .btnPlay {
    padding: 7px 11px;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px
}

.betModal .modal-content .betContainer .betContent .betInfo {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 10px 12px;
    background: #442176;
    border-radius: 10px
}

.betModal .modal-content .betContainer .betContent .betInfo .top {
    display: flex;
    justify-content: space-between
}

.betModal .modal-content .betContainer .betContent .betInfo .top .winAmount {
    color: #fff;
    font-weight: 700;
    font-size: 18px
}

.betModal .modal-content .betContainer .betContent .betInfo .top .winX {
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
    background: #ee8f0d;
    border-radius: 5px
}

.betModal .modal-content .betContainer .betContent .betInfo .bottom .betAmount {
    color: rgba(255, 255, 255, .804);
    font-size: 12px
}

.betModal .modal-content .betContainer .betContent .gameInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 10px 12px;
    background: #442176;
    border-radius: 10px
}

.betModal .modal-content .betContainer .betContent .gameInfo:not(:first-child) {
    margin-top: 5px
}

.betModal .modal-content .betContainer .betContent .gameInfo .left {
    display: flex;
    flex-direction: column
}

.betModal .modal-content .betContainer .betContent .gameInfo .left .gameName {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px
}

.betModal .modal-content .betContainer .betContent .gameInfo .left .btnPlay {
    display: flex;
    justify-content: center;
    max-width: 150px;
    height: 28px;
    margin-top: 10px;
    color: #261a46;
    vertical-align: middle
}

.betModal .modal-content .betContainer .betContent .gameInfo .left .btnPlay span {
    margin-left: 5px
}

.betModal .modal-content .betContainer .betContent .gameInfo .right img {
    width: auto;
    height: 68px;
    margin-right: 0;
    border-radius: 5px
}

.betModal .modal-content .betContainer .betContent .socialButtons {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px
}

.betModal .modal-content .betContainer .betContent .socialButtons a {
    color: #fff
}

.betModal .modal-content .betContainer .betContent .socialButtons button,
.betModal .modal-content .betContainer .betContent .socialButtons a {
    display: block;
    margin-bottom: -5px;
    margin-left: 10px;
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transition: background .2s
}

.betModal .modal-content .betContainer .betContent .socialButtons button:hover,
.betModal .modal-content .betContainer .betContent .socialButtons a:hover {
    background: #653ba1
}

.chatRulesContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px
}

.chatRulesContainer .chatRulesWrapper {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: #fff;
    border-radius: 6px
}

.chatRulesContainer .chatRulesWrapper .tabsContainer button {
    position: absolute;
    top: 40px;
    right: 15px;
    width: 38px;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer
}

.chatRulesContainer .chatRulesWrapper .tabsContainer button:hover svg {
    fill: #000
}

.chatRulesContainer .chatRulesWrapper .tabsContainer button svg {
    display: block;
    width: 25px;
    height: 25px;
    transition: all .3s;
    fill: #fff
}

.chatRulesContainer .chatRulesWrapper .chatRulesContent {
    padding: 20px
}

.chatRulesContainer .chatRulesWrapper .chatRulesContent h2 {
    margin-bottom: 20px;
    color: #fff;
    font-size: 16px
}

.chatRulesContainer .chatRulesWrapper .chatRulesContent h2 svg {
    margin-right: 5px;
    margin-bottom: 2px
}

.userStatsModal {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 900px) {
    .userStatsModal {
        width: calc(100% - 14px)
    }
}

.userStatsModal .modal-content {
    background: #442176
}

.userStatsModal .modal-content .userStatsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    color: inherit;
    background: #653ba1;
    border-radius: 5px 5px 0 0
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader.loading {
    min-height: 300px
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row {
    display: flex;
    align-items: center
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name {
    color: #fff;
    font-size: 18px
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user {
    display: inline;
    white-space: nowrap
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user.hasBadge {
    position: relative
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user .badge {
    position: absolute;
    top: 50%;
    margin-left: -1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user .badge>span {
    display: flex;
    align-items: center;
    width: 17px;
    height: 17px
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user .badge>span img {
    display: block;
    max-width: 100%;
    height: auto
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .row .name .user .text {
    padding-left: 25px
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader .date {
    margin-top: 2px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-align: center
}

.userStatsModal .modal-content .userStatsContainer .userStatsHeader svg {
    margin-right: 6px
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent {
    width: 100%;
    padding: 20px
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 15px
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item {
    width: 50%;
    margin-right: 15px;
    padding: 15px;
    text-align: center;
    border: 1px solid #653ba1;
    border-radius: 6px
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .label {
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value {
    justify-content: center;
    color: #ff902a;
    font-weight: 500;
    font-size: 16px
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value.positive {
    color: #87d010 !important
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value .bet {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value .bet .content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value .bet .icon {
    display: inline-block;
    margin: 0 0 0 .25em;
    color: inherit;
    vertical-align: middle
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats .item .value .bet .icon.widthAuto {
    width: auto;
    height: auto;
    vertical-align: initial
}

.userStatsModal .modal-content .userStatsContainer .userStatsContent .stats:last-child {
    margin-bottom: 0
}

.welcomeModal {
    width: 590px;
    margin-right: auto;
    margin-left: auto
}

.welcomeModal .refreshButton {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 10px 10px
}

.welcomeModal .refreshButton .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    min-width: 200px
}

@media screen and (max-width: 590px) {
    .welcomeModal {
        width: calc(100% - 14px)
    }
}

.welcomeModal .modal-content {
    background: #442176
}

.welcomeModal .modal-content .welcomeContainer {
    display: flex;
    flex-direction: column;
    align-items: center
}

.welcomeModal .modal-content .welcomeContainer h3 {
    margin-bottom: 30px;
    font-weight: 400;
    font-size: 16px
}

.welcomeModal .modal-content .welcomeContainer .welcomeImage img {
    width: 100%;
    max-width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.welcomeModal .modal-content .welcomeContainer .welcomeIcon {
    margin-bottom: 15px;
    color: #fff;
    font-size: 45px
}

.welcomeModal .modal-content .welcomeContainer .welcomeText {
    display: flex;
    color: inherit;
    font-size: 14px;
    flex-direction: column;
    margin: 20px 0 0;
    padding: 0 20px;
    justify-content: flex-start;
    text-align: left;
    align-items: flex-start;
    width: 100%
}

.welcomeModal .modal-content .welcomeContainer .welcomeText .welcomeTitle {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px
}

.welcomeModal .modal-content .welcomeContainer .welcomeText .welcomeDescription {
    font-size: 14px;
    margin-bottom: 20px
}

.welcomeModal .modal-content .welcomeContainer .welcomeExtra {
    display: flex;
    margin: -10px 0 20px;
    color: rgba(255, 255, 255, .804);
    text-align: center
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper {
    display: flex;
    width: 100%;
    padding: 20px;
    justify-content: center;
    background: #1d1438;
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 10px
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li {
    margin: 0 5px
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li a {
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color .2s
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li a:hover {
    color: #fff
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li a i {
    font-size: 20px;
    margin-right: 10px
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li a span {
    font-size: 14px
}

.welcomeModal .modal-content .welcomeContainer .footerSocialWrapper .footerNav.footerSocial li a svg {
    margin-right: 5px
}

.welcomeModal .modal-content .welcomeContainer .welcomeActions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px
}

.welcomeModal .modal-content .welcomeContainer .welcomeActions .btn {
    display: flex;
    justify-content: center;
    width: calc(50% - 10px);
    padding: 12px 20px
}

@media (max-width: 400px) {
    .welcomeModal .modal-content .welcomeContainer .welcomeActions {
        flex-direction: column;
        gap: 10px
    }
    .welcomeModal .modal-content .welcomeContainer .welcomeActions .btn {
        width: 100%
    }
}

.personalPromotionsModal {
    width: 590px;
    margin-right: auto;
    margin-left: auto
}

@media screen and (max-width: 590px) {
    .personalPromotionsModal {
        width: calc(100% - 14px)
    }
}

.personalPromotionsModal .modal-content {
    background: #442176;
    border-radius: 6px;
    overflow: hidden
}

.personalPromotionsModal .modal-content .personalPromotionsContainer,
.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsWrapper {
    display: flex;
    flex-direction: column
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .tabsContainer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 52px;
    min-height: 52px;
    padding: 0 15px;
    color: inherit;
    font-size: 16px;
    background: #653ba1;
    border-radius: 6px 6px 0 0
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .tabsContainer .tabsLink {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: default;
    user-select: none;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .tabsContainer .tabsLink svg {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    margin-right: 8px;
    opacity: .65
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .tabsContainer .tabsLink.active {
    color: #fff;
    border-bottom: 2px solid #fdcd2d
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .tabsContainer .tabsLink.active svg {
    opacity: 1
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent {
    padding: 25px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .noPromotion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: rgba(255, 255, 255, .5)
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .noPromotion svg {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    opacity: .5
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .noPromotion p {
    font-size: 16px;
    margin: 0
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard {
    display: flex;
    flex-direction: column
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    background: #442176;
    border: 1px solid #2e3542
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner {
        height: 200px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner .bannerOverlay {
    position: absolute;
    bottom: 15px;
    left: 20px;
    display: flex;
    align-items: baseline;
    gap: 8px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner .bannerOverlay .bonusPercentage {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner .bannerOverlay .bonusPercentage {
        font-size: 28px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionBanner .bannerOverlay .bonusText {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionTitle {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionTitle {
        font-size: 18px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionDescription {
    margin: 0 0 20px;
    color: #828f9a;
    font-size: 14px;
    line-height: 1.5
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promotionDescription {
        font-size: 13px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__countdown {
    display: flex;
    align-items: center;
    font-size: 18px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__digit {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    height: 32px;
    font-weight: 600;
    line-height: 0;
    background: linear-gradient(135deg, #fdae05, #fdcd2d);
    border-radius: 4px;
    color: #fff;
    font-size: 15px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__points {
    margin: 0 3px;
    font-size: 20px;
    line-height: 0;
    font-weight: 400;
    color: #6b768a
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__countdown {
        font-size: 16px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__digit {
        flex-basis: 28px;
        height: 28px;
        font-size: 14px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionMain .promotionContent .promoWheelTimer__points {
        font-size: 18px;
        margin: 0 2px
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #49237e;
    border-radius: 8px;
    transition: all .2s ease
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard:hover {
    background: #4d2586
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard .cardIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(253, 174, 5, .1);
    border-radius: 8px;
    flex-shrink: 0
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard .cardIcon svg {
    width: 20px;
    height: 20px;
    color: #fdae05
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard .cardContent {
    flex: 1
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard .cardContent .cardValue {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionFooter .bonusCards .bonusCard .cardContent .cardLabel {
    font-size: 12px;
    color: #6b768a;
    letter-spacing: .3px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .bonusBottom {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 25px 25px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .bonusBottom .btn {
    width: calc(50% - 5px);
    height: 44px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500
}

@media (max-width: 500px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer .bonusBottom .btn {
        width: 100%
    }
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .loaderHalf {
    opacity: .5
}

.personalPromotionsModal .modal-content .personalPromotionsContainer .loaderCentred {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width: 768px) {
    .personalPromotionsModal .modal-content .personalPromotionsContainer {
        min-height: auto
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent {
        padding: 20px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionBanner {
        height: 200px;
        margin-bottom: 15px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionInfo {
        gap: 12px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionInfo .bonusDetails {
        flex-direction: column;
        gap: 10px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .promotionCard .promotionInfo .bonusDetails .bonusItem {
        min-width: auto
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .navigationControls {
        margin-top: 20px;
        gap: 15px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsContent .navigationControls .navButton {
        width: 36px;
        height: 36px
    }
}

@media (max-width: 480px) {
    .personalPromotionsModal {
        max-width: calc(100% - 20px)
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsHeader {
        padding: 15px 20px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsHeader .headerContent {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsHeader .headerContent .promotionCounter {
        padding: 4px 10px;
        font-size: 12px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsFooter {
        padding: 15px 20px;
        gap: 10px
    }
    .personalPromotionsModal .modal-content .personalPromotionsContainer .personalPromotionsFooter .btn {
        height: 44px;
        font-size: 14px;
        padding: 0 20px
    }
}

.promoReminder {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 1000;
    width: 132px;
    overflow: visible
}

@media (max-width: 768px) {
    .promoReminder {
        top: 70px;
        right: 10px;
        width: 118px
    }
}

@media (max-width: 500px) {
    .promoReminder {
        top: 60px;
        width: 104px
    }
}

.promoReminder__stack {
    position: relative;
    width: 120px;
    overflow: visible
}

@media (max-width: 768px) {
    .promoReminder__stack {
        width: 108px
    }
}

@media (max-width: 500px) {
    .promoReminder__stack {
        width: 96px
    }
}

.promoReminder__cardWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px
}

@media (max-width: 768px) {
    .promoReminder__cardWrap {
        width: 108px
    }
}

@media (max-width: 500px) {
    .promoReminder__cardWrap {
        width: 96px
    }
}

.promoReminder__card {
    position: relative;
    display: block;
    width: 100%;
    height: 92px;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease
}

.promoReminder__card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .34);
    transform: translateY(-2px)
}

.promoReminder__card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(20, 30, 48, .55)
}

.promoReminder__cardImg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.promoReminder__close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    background: rgba(10, 14, 22, .72);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease
}

.promoReminder__close:hover {
    background: rgba(10, 14, 22, .9);
    transform: scale(1.08)
}

.promoReminder__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .9);
    outline-offset: 2px
}

.personalPromotionBanner {
    background: #1c2028;
    padding: 16px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    position: relative;
    overflow: hidden
}

.personalPromotionBanner:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15)
}

.personalPromotionBanner:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
    transition: left .5s
}

.personalPromotionBanner:hover:before {
    left: 100%
}

.personalPromotionBanner .bannerContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1
}

.personalPromotionBanner .bannerLeft {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0
}

.personalPromotionBanner .bannerIcon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0
}

.personalPromotionBanner .bannerIcon svg {
    width: 20px;
    height: 20px;
    color: #fff
}

.personalPromotionBanner .bannerInfo {
    flex: 1;
    min-width: 0
}

.personalPromotionBanner .bannerTitle {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px
}

.personalPromotionBanner .bonusPercent {
    background: #219a19;
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px
}

.personalPromotionBanner .bannerDetails {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px
}

.personalPromotionBanner .detail {
    white-space: nowrap
}

.personalPromotionBanner .detailSeparator {
    color: rgba(255, 255, 255, .5);
    margin: 0 4px
}

.personalPromotionBanner .bannerRight {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px
}

.personalPromotionBanner .bannerDecorativeLine {
    display: none
}

.personalPromotionBanner .bannerTimer {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0c7cfc;
    padding: 6px 10px;
    border-radius: 20px;
    backdrop-filter: blur(10px)
}

.personalPromotionBanner .bannerTimer .timerIcon svg {
    width: 14px;
    height: 14px;
    color: #fff
}

.personalPromotionBanner .bannerTimer .timerText {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px
}

@media (max-width: 550px) {
    .personalPromotionBanner {
        margin-bottom: 16px;
        padding: 14px 16px
    }
    .personalPromotionBanner .bannerContent {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }
    .personalPromotionBanner .bannerLeft {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0
    }
    .personalPromotionBanner .bannerInfo {
        flex: 1
    }
    .personalPromotionBanner .bannerIcon {
        width: 36px;
        height: 36px;
        margin-right: 12px;
        flex-shrink: 0
    }
    .personalPromotionBanner .bannerIcon svg {
        width: 18px;
        height: 18px
    }
    .personalPromotionBanner .bannerTitle {
        font-size: 13px;
        margin-bottom: 4px
    }
    .personalPromotionBanner .bannerDetails {
        font-size: 11px;
        margin-bottom: 8px
    }
    .personalPromotionBanner .bannerRight {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center
    }
    .personalPromotionBanner .bannerDecorativeLine {
        display: flex;
        flex: 1;
        height: 8px;
        background: #272d39;
        border-radius: 2px;
        margin-right: 5px;
        position: relative
    }
    .personalPromotionBanner .bannerDecorativeLine:after {
        content: "";
        position: absolute;
        top: 0;
        right: -5px;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 5px solid #272d39
    }
    .personalPromotionBanner .bannerTimer {
        padding: 4px 8px;
        margin: 0;
        flex-shrink: 0
    }
    .personalPromotionBanner .bannerTimer .timerIcon svg {
        width: 12px;
        height: 12px
    }
    .personalPromotionBanner .bannerTimer .timerText {
        font-size: 11px
    }
}

@media (max-width: 400px) {
    .personalPromotionBanner .bannerDetails {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px
    }
    .personalPromotionBanner .bannerDetails .detailSeparator {
        display: none
    }
}

[data-theme=dark] .personalPromotionBanner {
    background: linear-gradient(135deg, #2a2d3a, #3d4356);
    border-color: rgba(255, 255, 255, .08)
}

[data-theme=dark] .personalPromotionBanner:hover {
    border-color: rgba(255, 255, 255, .15)
}

.personalPromotionBanner.depositBonus {
    background: linear-gradient(135deg, #4f46e5, #7c3aed)
}

.personalPromotionBanner.freespins {
    background: linear-gradient(135deg, #059669, #0d9488)
}

.personalPromotionBanner.cashback {
    background: linear-gradient(135deg, #dc2626, #ea580c)
}

.mobileNav {
    position: relative;
    z-index: 901;
    display: none;
    width: 100%;
    background: #442176
}

.mobileNav .mobileNavPullOut {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1;
    display: none;
    width: 100%;
    background: #442176
}

.mobileNav .mobileNavPullOut.open {
    display: block
}

.mobileNav .mobileNavPullOut .close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #979797;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc(100% + 10px);
    margin-right: -5px;
    margin-left: -5px;
    list-style: none
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav li {
    width: 50%;
    border-right: 1px solid #20242d;
    border-bottom: 1px solid #20242d
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav li:nth-child(odd) {
    padding-left: 10px
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav li.current a,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav li.current button {
    color: #fff
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav a,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px 15px 20px 30px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    line-height: 14px;
    letter-spacing: -.1px;
    text-decoration: none;
    background: transparent;
    border: none;
    outline: none
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav a svg,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav button svg {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 14px;
    height: 14px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav a .icon-faq,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav button .icon-faq {
    font-size: 15px
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav a .icon-achievements,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav button .icon-achievements {
    font-size: 16px
}

.mobileNav .mobileNavPullOut .mobileNavPullOutNav a:hover,
.mobileNav .mobileNavPullOut .mobileNavPullOutNav button:hover {
    color: #fff
}

.mobileNav .mobileNavWrapper {
    width: 100%;
    background: #442176
}

@media (max-width: 900px) {
    .mobileNav .mobileNavWrapper {
        touch-action: none
    }
}

.mobileNav .mobileNavWrapper .mobileNavBlock {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 10px 15px;
    list-style: none
}

.mobileNav .mobileNavWrapper .mobileNavBlock li {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    width: 25%
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .btnLobby {
    position: absolute;
    bottom: -12px;
    z-index: 1;
    display: flex;
    padding: 2px;
    flex-direction: column;
    justify-content: center;
    background: #fdae05;
    border-radius: 10px
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .btnLobby .lobbyWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background: linear-gradient(45deg, #fdcd2d, #ff902a);
    border-radius: 10px
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .btnLobby .lobbyWrapper .image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .btnLobby .lobbyWrapper .image svg {
    width: 25px;
    height: 25px;
    margin: 0 auto;
    fill: #261a46
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .btnLobby:active .lobbyWrapper {
    background: #fdae05;
    transform: scale(1.1)
}

.mobileNav .mobileNavWrapper .mobileNavBlock li.notificationMenuBtn div {
    position: relative;
    max-width: 20px;
    margin: 0 auto
}

.mobileNav .mobileNavWrapper .mobileNavBlock li.notificationMenuBtn svg {
    transform: scale(1.1)
}

.mobileNav .mobileNavWrapper .mobileNavBlock li.iconsMenuBtn svg {
    width: 16px;
    height: 16px;
    transform: scale(1.2)
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .notificationUnreadCount {
    position: absolute;
    top: -5px;
    right: -7px;
    z-index: 2;
    display: block;
    min-width: 15px;
    height: 12px;
    padding: 0 2px;
    color: #000;
    font-weight: 500;
    background-color: #fff;
    border-radius: 8px
}

.mobileNav .mobileNavWrapper .mobileNavBlock li:last-child {
    margin-right: 0
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownButton,
.mobileNav .mobileNavWrapper .mobileNavBlock li>a,
.mobileNav .mobileNavWrapper .mobileNavBlock li>button {
    position: relative;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0;
    color: #fff;
    font-weight: 500;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    text-transform: uppercase;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    touch-action: manipulation
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownButton.badgeNew:before,
.mobileNav .mobileNavWrapper .mobileNavBlock li>a.badgeNew:before,
.mobileNav .mobileNavWrapper .mobileNavBlock li>button.badgeNew:before {
    position: absolute;
    top: -5px;
    right: 5px;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    content: ""
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownButton svg,
.mobileNav .mobileNavWrapper .mobileNavBlock li>a svg,
.mobileNav .mobileNavWrapper .mobileNavBlock li>button svg {
    width: 14px;
    height: 14px;
    margin-bottom: 6px;
    pointer-events: none
}

.mobileNav .mobileNavWrapper .mobileNavBlock .icon-more {
    width: 16px;
    height: 16px
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownButton>div {
    flex-direction: column
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownMenu {
    top: 0;
    left: 50%;
    min-width: auto;
    margin-top: -100%;
    background-color: #442176;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownMenu.big {
    margin-top: -125%
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownItem {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    border-bottom: 1px solid #20242d;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownItem svg {
    margin-right: 5px
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownItem:last-child {
    border-bottom: 0
}

.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownItem:focus,
.mobileNav .mobileNavWrapper .mobileNavBlock li .dropDownItem:hover {
    color: #fff;
    background: transparent
}

.mobileNav .mobileNavWrapper .mobileNavBlock .active {
    color: #fff
}

.mobileNav .mobileNavWrapper .mobileNavBlock .active svg {
    fill: #fdcd2d
}

.mobileNav .mobileNavWrapper .mobileNavBlock .active button,
.mobileNav .mobileNavPullOutNav .active {
    color: #fff
}

.mobileNav .mobileNavPullOutNav .active svg {
    fill: #fff
}

.mobileNav .mobileNavPullOutNav .active button {
    color: #fff
}

@media (max-width: 900px) {
    .mobileNav {
        display: block
    }
}

.gameContentWrapper.mobile .mobileNav {
    display: none
}

.sideUserProfile {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    width: 100%;
    padding: 0 20px;
    overflow: hidden
}

.sideUserProfile .userAvatar {
    margin-bottom: 20px
}

.sideUserProfile .userAvatar .closeBtn {
    position: absolute;
    top: 25px;
    right: 15px
}

.sideUserProfile .userId {
    display: flex;
    align-items: center;
    color: #fff;
    white-space: nowrap;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.sideUserProfile .userId:focus,
.sideUserProfile .userId:hover {
    outline: none
}

.sideUserProfile .userId:hover {
    color: #fdae05
}

.sideUserProfile .userId .yourId {
    padding-right: 5px;
    color: #fff;
    text-transform: uppercase
}

.sideUserProfile .userId .userIconCopy {
    display: flex;
    align-items: center;
    margin-left: 4px;
    padding: 2px 3px;
    background-color: #313742;
    border-radius: 3px
}

.sideUserProfile .userName {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 12px
}

.sideUserProfile .userName .copyTooltip {
    width: 110px;
    background: #000
}

.sideUserProfile .userName .nickname {
    width: 100%;
    max-width: 200px;
    margin-bottom: 2px;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis
}

.sideUserProfile .profileNav {
    width: 100%;
    list-style: none
}

.sideUserProfile .profileNav li {
    margin-bottom: 20px
}

.sideUserProfile .profileNav li a {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    line-height: 20px
}

.sideUserProfile .profileNav li a .number-badge {
    position: static;
    top: 0;
    right: 0;
    margin-left: 5px
}

.sideUserProfile .profileNav li a svg {
    display: block;
    width: 18px;
    height: 18px
}

.sideUserProfile .profileNav li a .icon-affiliate {
    width: 14px;
    height: 14px
}

.sideUserProfile .profileNav li a .itemIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 15px
}

.sideUserProfile .profileNav li a:hover,
.sideUserProfile .profileNav li.current a {
    color: #fff
}

.sideUserProfile .profileNav li:last-child {
    margin-bottom: 25px
}

.sideUserProfile .userBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #272c35
}

.sideUserProfile .avatar {
    width: 100px;
    height: 100px
}

.sideUserProfile .avatar img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 50%
}

.sideUserProfile .btn-logout {
    display: flex;
    width: 100%;
    padding: 0;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    background: transparent
}

.sideUserProfile .btn-logout .itemIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    margin-right: 15px;
    font-size: 16px
}

.sideUserProfile .btn-logout:hover {
    color: #fff;
    background: transparent
}

@media (max-height: 580px),
(max-width: 900px) {
    .sideUserProfile .avatar {
        width: 60px;
        height: 60px;
        margin: 0 10px 0 0;
        padding: 3px 0
    }
    .sideUserProfile .avatar>div {
        width: 60px !important;
        height: 60px !important;
        font-family: Rubik, Arial, sans-serif
    }
    .sideUserProfile .userBlock {
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 0;
        padding-bottom: 20px
    }
    .sideUserProfile .userAvatar {
        margin-bottom: 0
    }
    .sideUserProfile .profileNav li {
        margin-bottom: 15px
    }
    .sideUserProfile .profileNav li:last-child {
        margin-bottom: 20px
    }
    .sideUserProfile .userName .nickname {
        max-width: 140px;
        margin-bottom: 0;
        text-align: left
    }
}

@media (max-width: 900px) {
    .sideUserProfile .userName .nickname {
        max-width: 200px;
        margin-bottom: 0
    }
    .sideUserProfile .userAvatar {
        margin-bottom: 0
    }
    .sideUserProfile .userBlock {
        padding: 20px 0
    }
}

.liveStatBlock {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    width: 100%;
    padding: 10px 10px 0
}

@media (max-width: 900px) {
    .liveStatBlock {
        height: calc(100% + -0px);
        padding: 0 0 0 5px
    }
    .liveStatBlock .liveParams {
        padding: 10px 0 10px 5px
    }
}

.liveStatBlock .itemControl {
    position: absolute;
    top: 22px;
    right: 15px
}

.liveStatBlock .liveParams {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
    padding-bottom: 20px
}

.liveStatBlock .liveParams>.item {
    display: flex;
    align-items: center;
    color: #5b6271;
    font-size: 16px
}

.liveStatBlock .liveParams>.item span {
    color: #fff
}

.liveStatBlock .fixedLiveItem {
    box-sizing: border-box;
    width: calc(100% + 10px);
    margin: 0 -10px;
    background-color: #242932;
    border-radius: 10px
}

.liveStatBlock .fixedLiveItem .top {
    width: 100%;
    height: 25px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    text-transform: uppercase;
    background: #272d39;
    border-radius: 10px 10px 0 0
}

.liveStatBlock .fixedLiveItem .item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, .1);
    cursor: pointer
}

.liveStatBlock .fixedLiveItem .item:hover .overlay {
    display: flex
}

.liveStatBlock .fixedLiveItem .item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    padding-top: 20px;
    background: rgba(0, 0, 0, .71);
    border-radius: 0 0 10px 10px
}

.liveStatBlock .fixedLiveItem .item .overlay svg {
    width: 35px;
    height: 35px;
    color: #fff;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.liveStatBlock .fixedLiveItem .item .overlay button {
    height: 30px;
    margin: 0;
    padding: 3px 30px;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 100px
}

@media (max-width: 768px) {
    .liveStatBlock .fixedLiveItem .item .overlay button {
        padding: 2px 25px
    }
}

@media (min-width: 821px) and (max-width: 1200px) {
    .liveStatBlock .fixedLiveItem .item .overlay button:nth-child(2) {
        display: none
    }
}

.liveStatBlock .fixedLiveItem .item .image {
    top: 10px;
    left: 10px;
    display: inline-block;
    width: 49px;
    height: 65px;
    cursor: pointer
}

.liveStatBlock .fixedLiveItem .item .image.static {
    background: #242932;
    border-radius: 5px
}

.liveStatBlock .fixedLiveItem .item .image .img {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 2px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px
}

.liveStatBlock .fixedLiveItem .item .image .badge {
    position: absolute;
    top: 5px;
    left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 13px;
    padding: 0 4px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    border-radius: 5px
}

.liveStatBlock .fixedLiveItem .item .image .badge.blue {
    background-color: #3077f7
}

.liveStatBlock .fixedLiveItem .item .image .badge.green {
    background-color: #219a1a
}

.liveStatBlock .fixedLiveItem .item .image .badge.orange {
    background-color: #ff5721
}

.liveStatBlock .fixedLiveItem .item .image .badge.purple {
    background-color: #d004fc
}

.liveStatBlock .fixedLiveItem .item .liveContent {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 65px);
    margin-left: 15px;
    font-size: 13px;
    line-height: 20px;
    word-wrap: break-word;
    word-break: break-word
}

.liveStatBlock .fixedLiveItem .item .liveContent>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

.liveStatBlock .fixedLiveItem .item .liveContent .userLink {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
    text-transform: none;
    text-overflow: ellipsis;
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    touch-action: manipulation
}

.liveStatBlock .fixedLiveItem .item .liveContent .gameName {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word
}

.liveStatBlock .fixedLiveItem .item .liveContent .winAmount {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word
}

.liveStatBlock .fixedLiveItem .item .liveContent .winAmount svg {
    margin-bottom: 2px;
    margin-left: -3px
}

.liveStatBlock .fixedLiveItem .item:last-child {
    margin-bottom: 0
}

.liveStatBlock .liveBlock {
    position: relative;
    display: flex;
    flex: auto;
    flex-direction: column-reverse;
    height: 120px;
    min-height: 100px;
    -webkit-transition: all .3s;
    transition: all .3s
}

.liveStatBlock .liveBlock .liveBlockInner {
    position: relative;
    padding-right: 10px
}

.liveStatBlock .liveBlock .liveBlockInner .loaderBlock {
    position: relative;
    width: calc(100% + 15px);
    margin-top: 50px;
    text-align: center
}

.liveStatBlock .liveBlock .liveBlockInner>a {
    display: flex;
    margin-bottom: 10px
}

.liveStatBlock .liveBlock .liveBlockInner>a:last-child {
    margin-bottom: 0
}

.liveStatBlock .liveBlock .liveBlockInner .item {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, .1);
    border-radius: 6px;
    cursor: pointer
}

.liveStatBlock .liveBlock .liveBlockInner .item:hover .overlay {
    display: flex
}

.liveStatBlock .liveBlock .liveBlockInner .item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    padding-top: 25px;
    background: rgba(0, 0, 0, .71)
}

.liveStatBlock .liveBlock .liveBlockInner .item .overlay svg {
    width: 35px;
    height: 35px;
    color: #fff;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
}

.liveStatBlock .liveBlock .liveBlockInner .item .overlay button {
    height: 30px;
    margin: 0;
    padding: 3px 30px;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 100px
}

@media (max-width: 768px) {
    .liveStatBlock .liveBlock .liveBlockInner .item .overlay button {
        padding: 2px 25px
    }
}

@media (min-width: 821px) and (max-width: 1200px) {
    .liveStatBlock .liveBlock .liveBlockInner .item .overlay button:nth-child(2) {
        display: none
    }
}

.liveStatBlock .liveBlock .liveBlockInner .item .image {
    top: 10px;
    left: 10px;
    display: inline-block;
    width: 49px;
    height: 65px;
    cursor: pointer
}

.liveStatBlock .liveBlock .liveBlockInner .item .image.static {
    background: #242932;
    border-radius: 5px
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .img {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 2px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 6px
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .badge {
    position: absolute;
    top: 5px;
    left: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 13px;
    padding: 0 4px;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    border-radius: 5px
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .badge.blue {
    background-color: #3077f7
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .badge.green {
    background-color: #219a1a
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .badge.orange {
    background-color: #ff5721
}

.liveStatBlock .liveBlock .liveBlockInner .item .image .badge.purple {
    background-color: #d004fc
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 65px);
    margin-left: 15px;
    font-size: 13px;
    line-height: 20px;
    word-wrap: break-word;
    word-break: break-word
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent .userLink {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-weight: 700;
    white-space: nowrap;
    text-align: left;
    text-transform: none;
    text-overflow: ellipsis;
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    touch-action: manipulation
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent .gameName {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent .winAmount {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word
}

.liveStatBlock .liveBlock .liveBlockInner .item .liveContent .winAmount svg {
    margin-bottom: 2px;
    margin-left: -3px
}

.liveStatBlock .liveScroll {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 9999;
    width: 35px;
    height: 35px;
    background: #1d1438;
    border: 0;
    border-radius: 50%;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.liveStatBlock .liveScroll .values {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    color: #fff;
    font-weight: 700;
    font-size: 8px;
    line-height: 18px;
    background: #4886f5;
    border-radius: 50%;
    content: attr(data-values)
}

.liveStatBlock .liveScroll:hover {
    box-shadow: 0 0 0 1px #fdae05
}

.liveStatBlock .liveScroll.active {
    visibility: visible;
    opacity: 1;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

.liveStatBlock .liveScroll svg {
    font-size: 11px;
    fill: #fff
}

.inputValid {
    display: inherit;
    width: inherit
}

.inputValid .valid {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding: 1em;
    color: #e86376;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    background: #1c2028;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0
}

.inputValid .valid.inline {
    top: 100%;
    bottom: auto;
    z-index: 3;
    margin: 2px 0 0;
    padding: 4px 6px;
    color: #fff;
    font-size: 10px;
    background: rgba(220, 53, 69, .9);
    border-radius: 2px
}

.inputValid .valid.inline.top {
    top: auto;
    right: auto;
    bottom: calc(100% + 2px);
    left: 0
}

.inputValid .valid.inline.topRight {
    top: auto;
    right: 0;
    bottom: 100%;
    left: auto
}

.inputValid .valid.inline:after {
    display: none
}

.inputValid .valid.visible {
    visibility: visible;
    opacity: 1
}

.inputValid .valid:after {
    position: absolute;
    top: 100%;
    left: .5em;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px 4px 0;
    border-top-color: #1c2028 !important;
    content: ""
}

.inputField,
.inputField input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: #fff;
    font-family: Rubik, Arial, sans-serif;
    background: #261a46;
    border: 2px solid transparent;
    border-radius: 5px;
    outline: none !important;
    touch-action: manipulation
}

.inputField:-webkit-autofill,
.inputField:-webkit-autofill:active,
.inputField:-webkit-autofill:focus,
.inputField:-webkit-autofill:hover,
.inputField input:-webkit-autofill,
.inputField input:-webkit-autofill:active,
.inputField input:-webkit-autofill:focus,
.inputField input:-webkit-autofill:hover {
    background-clip: content-box !important;
    border: 2px solid #ff902a !important;
    -webkit-box-shadow: 0 0 0 1000px #ff902a inset !important;
    -webkit-text-fill-color: #fff !important
}

.inputField,
.inputField+.inputSuffix,
.inputField input,
.inputField input+.inputSuffix {
    font-size: 16px
}

.inputField:not([readonly]):focus,
.inputField input:not([readonly]):focus {
    border-color: #ff902a
}

.inputField.input-green:not([readonly]):focus,
.inputField input.input-green:not([readonly]):focus {
    border-color: #2dc53a
}

.inputField::-webkit-input-placeholder,
.inputField input::-webkit-input-placeholder {
    color: #fff
}

.inputField::-moz-placeholder,
.inputField input::-moz-placeholder {
    color: #fff
}

.inputField::-ms-input-placeholder,
.inputField input::-ms-input-placeholder {
    color: #fff
}

.inputField::placeholder,
.inputField input::placeholder {
    color: #fff
}

.inputField[type=button],
.inputField input[type=button] {
    overflow: hidden;
    text-align: left;
    -webkit-border-image: initial;
    border-image: initial;
    outline: none;
    cursor: pointer;
    -webkit-appearance: button
}

.inputField:disabled,
.inputField input:disabled {
    color: #fff;
    opacity: 1;
    -webkit-text-fill-color: #fff
}

.inputField.text-gray,
.inputField input.text-gray {
    color: #99a3b8
}

.inputField.small-text,
.inputField input.small-text {
    font-size: 11px
}

.inputField.hasError,
.inputField input.hasError {
    color: #ec193f;
    border-color: #ec193f !important
}

@media screen and (max-width: 1099px) and (min-width: 768px) {
    .inputField,
    .inputField input {
        padding: 0 7px
    }
    .inputField+.inputSuffix,
    .inputField input+.inputSuffix {
        padding: 0 8px
    }
}

.inputField input {
    height: 100%;
    border: none
}

.inputField input:-webkit-autofill,
.inputField input:-webkit-autofill:active,
.inputField input:-webkit-autofill:focus,
.inputField input:-webkit-autofill:hover {
    border: none !important;
    -webkit-box-shadow: 0 0 0 1000px #1d1438 inset !important
}

.inputRow {
    margin-bottom: 12px
}

.inputGroup {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

.inputGroup .inputField {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0
}

.inputGroup .inputField:not([readonly]):active+.inputGroupAppend.text,
.inputGroup .inputField:not([readonly]):focus+.inputGroupAppend.text {
    border: 1px solid #fdae05;
    border-left: 0
}

.inputGroup .inputField:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.inputGroup .inputField:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.inputGroupPrepend {
    position: relative;
    display: flex;
    border-radius: 0 5px 5px 0
}

.inputGroupPrepend.text {
    background-color: #2d3340
}

.inputGroupPrepend .btn:first-child {
    border-radius: 5px 0 0 5px
}

.inputGroupAppend {
    position: relative;
    display: flex;
    border-radius: 0 5px 5px 0
}

.inputGroupAppend.text {
    align-items: center;
    padding: 0 .75rem;
    color: #fdae05;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #2d3340;
    border: 1px solid transparent
}

@media (max-width: 1099px) {
    .inputGroupAppend.text {
        font-size: 10px
    }
}

.inputGroupAppend .btn {
    margin-left: -5px
}

.inputSuffix {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 0 13px;
    overflow: hidden;
    color: #fafafa;
    line-height: normal;
    white-space: nowrap;
    pointer-events: none
}

.inputSuffix>span {
    color: transparent;
    letter-spacing: normal
}

.inputWithIcon {
    padding-left: 35px
}

.inputWithIcon.noPadding {
    padding: 0 12px
}

.inputIcon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.inputIcon img {
    position: absolute;
    top: 50%;
    height: 17px;
    transform: translateY(-50%)
}

.inputIcon .icon-coin {
    margin-top: 5px
}

.inputSuffixB {
    padding-right: 25px
}

.inputSuffixB+.inputSuffix {
    right: -4px;
    left: auto;
    font-size: 18px
}

.formField {
    position: relative
}

input::-webkit-input-placeholder {
    color: #fff
}

input::-ms-input-placeholder {
    color: #fff
}

input::placeholder {
    color: #fff
}

.tooltipBox.error.show {
    opacity: .95
}

.tooltipBox.error .inner {
    box-shadow: none
}

.tooltipBox .inner {
    max-width: 100%;
    padding: 5px 10px;
    color: #282d38;
    font-weight: 500;
    font-size: 13px;
    font-family: Rubik, Arial, sans-serif;
    text-align: left;
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, .6)
}

.tooltipBox .arrow {
    margin-left: 0
}

.tooltipBox .arrow:before {
    position: absolute;
    top: -1px !important;
    border-color: transparent;
    border-style: solid;
    border-width: .4rem .4rem 0 !important;
    border-top-color: inherit !important;
    content: ""
}

@-webkit-keyframes showNoty {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    60% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes showNoty {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    60% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.notyBlock {
    position: fixed;
    top: calc(var(--safe-area-inset-top) + 15px);
    left: 50%;
    z-index: 999999;
    height: 0
}

.notyBlock .notyItem {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 3px 15px #676767;
    opacity: 0;
    -webkit-transition: opacity .3s, -webkit-transform .4s;
    transition: opacity .3s, -webkit-transform .4s;
    transition: transform .4s, opacity .3s;
    transition: transform .4s, opacity .3s, -webkit-transform .4s
}

.notyBlock .notyItem.success {
    color: #66bb6a
}

.notyBlock .notyItem.error {
    color: #ef5350
}

.notyBlock .notyItem.info {
    color: #42a5f5
}

.notyBlock .notyItem.default {
    color: #bdbdbd
}

.notyBlock .notyItem.show {
    opacity: 1
}

.notyBlock .notyItem:not(.show) {
    z-index: 0;
    opacity: 0
}

.notyBlock .notyItem .notyWrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-width: 290px;
    max-width: 400px;
    min-height: 50px;
    padding: 10px 45px 10px 50px;
    overflow: hidden;
    font-size: 11px;
    line-height: 14px
}

.notyBlock .notyItem .notyWrap .notyAside {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    text-align: center
}

.notyBlock .notyItem .notyWrap .notyAside svg {
    -webkit-animation: showNoty .3s;
    animation: showNoty .3s;
    fill: #2dc53a !important
}

.notyBlock .notyItem .notyWrap .notyAside.error svg {
    fill: #e86376 !important
}

.notyBlock .notyItem .notyWrap .notyTitle {
    padding-bottom: 5px;
    color: #616161;
    font-size: 15px
}

.notyBlock .notyItem .notyWrap .notyMessage {
    color: #9e9e9e
}

.notyBlock .notyItem .notyWrap .notyClose {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: #bdbdbd;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
    background-color: initial;
    border: none;
    outline: none;
    cursor: pointer;
    -webkit-transition: background-color .2s;
    transition: background-color .2s
}

.notyBlock .notyItem .notyWrap .notyClose svg {
    width: 10px;
    height: 10px
}

.notyBlock .notyItem .notyWrap .notyClose:active,
.notyBlock .notyItem .notyWrap .notyClose:focus,
.notyBlock .notyItem .notyWrap .notyClose:hover {
    outline: none;
    transform: scale(1.15)
}

.notyBlock .notyItem .notyWrap .notyClose .notyButtons {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
    padding: 0 12px
}

.notyBlock .notyItem .notyWrap .notyClose .notyButtons .btn {
    width: 60%;
    padding: 7px 0
}

.notyBlock .notyItem .notyWrap .notyClose .notyButtons .btn:first-child {
    width: 40%;
    margin-right: 10px;
    color: #000;
    background-color: initial;
    border-color: #efefef
}

.notyBlock .notyItem .notyWrap .notyClose .notyButtons .btn:first-child:focus,
.notyBlock .notyItem .notyWrap .notyClose .notyButtons .btn:first-child:hover {
    color: #000 !important;
    background-color: initial !important;
    border-color: #e86376 !important
}

.intercomWidget {
    position: fixed;
    right: 0;
    bottom: 30px;
    z-index: 100;
    padding: 18px 20px;
    color: #fff;
    font-size: 16px;
    background-color: #442176;
    border-radius: 64px;
    transform: translate(-26px);
    cursor: pointer;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out
}

.intercomWidget:hover {
    background-color: #653ba1
}

.intercomWidget.offset {
    transform: translate(-390px)
}

@media (max-width: 1099px) {
    .intercomWidget.offset {
        transform: translate(-336px)
    }
}

@media (max-width: 900px) {
    .intercomWidget {
        display: none
    }
}

.newYearContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: url(/assets/newYearBg-BV1Rs0Bu.png), linear-gradient(180deg, #08008b, #030047);
    background-position: center;
    background-size: cover;
    border-radius: 5px
}

.newYearContainer .newYearWrapper {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    color: red;
    border-radius: 6px
}

.newYearContainer .newYearWrapper .tabsContainer button {
    position: absolute;
    top: 40px;
    right: 15px;
    width: 38px;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer
}

.newYearContainer .newYearWrapper .tabsContainer button:hover svg {
    fill: #000
}

.newYearContainer .newYearWrapper .tabsContainer button svg {
    display: block;
    width: 25px;
    height: 25px;
    transition: all .3s;
    fill: #d8d8d8
}

.newYearContainer .newYearWrapper .newYearContent {
    padding: 30px 0
}

.newYearContainer .newYearWrapper .newYearContent .christmasTree {
    display: block;
    width: 250px;
    margin: 0 auto
}

.newYearContainer .newYearWrapper .newYearContent .logo {
    display: block;
    width: 220px;
    margin: 25px auto
}

.newYearContainer .newYearWrapper .newYearContent .newYearText {
    width: 100%;
    max-width: 75%;
    margin: 0 auto;
    color: #fff;
    text-align: center
}

.newYearContainer .newYearWrapper .newYearContent .newYearTextTitle {
    font-size: 25px;
    font-weight: 600;
    margin: 20px 0 10px
}

.newYearContainer .newYearWrapper .newYearContent .newYearTextDescription {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px
}

.newYearContainer .newYearWrapper .newYearContent .newYearActions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #261a46;
    padding: 0 20px 30px
}

.newYearContainer .newYearWrapper .newYearContent .newYearActions .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    min-width: 200px
}

@media (max-width: 460px) {
    .newYearContainer .newYearWrapper .newYearContent .newYearActions {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        align-items: stretch
    }
    .newYearContainer .newYearWrapper .newYearContent .newYearActions .btn {
        width: 100%;
        min-width: 0
    }
}

.newYearContainer .newYearWrapper .newYearContent .title {
    display: block;
    width: 100%;
    margin: 20px auto;
    color: #fff;
    font-size: 25px;
    text-align: center
}

.newYearContainer .newYearWrapper .newYearContent .event {
    display: block;
    width: 100%;
    max-width: 75%;
    margin: 30px auto 10px;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-align: left
}

.newYearContainer .newYearWrapper .newYearContent ul {
    max-width: 75%;
    margin: 0 auto;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    list-style: none
}

.newYearContainer .newYearWrapper .newYearContent ul li {
    margin-top: 5px;
    padding-left: 1em;
    text-indent: -1em
}

.newYearContainer .newYearWrapper .newYearContent ul li:before {
    margin-right: 3px;
    content: "- "
}

.newYearContainer .newYearWrapper .newYearContent ul li:first-child {
    margin-top: 0
}

.candy {
    position: relative;
    left: 36px;
    width: 55px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform .5s ease .2s
}

.candy img {
    width: 100%;
    max-width: 100%
}

.candy .candyIcon {
    transform: rotate(65deg);
    transition: transform .5s ease .2s
}

.candy:hover,
.candy.active {
    transform: translate(25px)
}

.candy.leftBarOpen {
    left: 165px
}

.amlContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.amlContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.amlContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.amlContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.amlContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.amlContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.amlContainer .amlBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.amlContainer .amlBlock h2:first-child {
    margin-top: 20px
}

.amlContainer .amlBlock p {
    font-size: 16px
}

.amlContainer .amlBlock p:first-child {
    margin-top: 20px
}

@media (max-width: 1100px) {
    .amlContainer .amlBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .amlContainer .amlBlock p {
        font-size: 13px
    }
}

@media (max-width: 900px) {
    .amlContainer {
        padding: 15px
    }
    .amlContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .amlContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .amlContainer .headerBlock .info {
        font-size: 13px
    }
}

.sliderBlock {
    margin-bottom: 40px;
    padding-bottom: 0
}

.sliderBlock .sliderInner .sliderItem img {
    height: 225px
}

@media (max-width: 999px) {
    .sliderBlock {
        margin-bottom: 30px
    }
}

@media (max-width: 600px) {
    .sliderBlock {
        margin-bottom: 15px
    }
}

.landingMenuSection .placeholdersBlock {
    display: flex
}

.landingMenuSection .placeholdersBlock .menuPlaceholder {
    display: none;
    width: 50%;
    cursor: pointer
}

.landingMenuSection .placeholdersBlock .menuPlaceholder:hover .placeholderTitle,
.landingMenuSection .placeholdersBlock .menuPlaceholder:focus .placeholderTitle,
.landingMenuSection .placeholdersBlock .menuPlaceholder.open .placeholderTitle {
    color: #fff
}

.landingMenuSection .placeholdersBlock .menuPlaceholder:hover .placeholderIcon svg,
.landingMenuSection .placeholdersBlock .menuPlaceholder:focus .placeholderIcon svg,
.landingMenuSection .placeholdersBlock .menuPlaceholder.open .placeholderIcon svg {
    color: #fff
}

.landingMenuSection .placeholdersBlock .menuPlaceholder:hover .arrow,
.landingMenuSection .placeholdersBlock .menuPlaceholder:focus .arrow,
.landingMenuSection .placeholdersBlock .menuPlaceholder.open .arrow {
    color: #fff
}

.landingMenuSection .placeholdersBlock .menuPlaceholder.open .arrow {
    transform: rotate(180deg)
}

.landingMenuSection .placeholdersBlock .menuPlaceholder .placeholderIcon {
    display: none;
    width: 24px;
    height: 24px
}

.landingMenuSection .placeholdersBlock .menuPlaceholder .placeholderIcon svg {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, .804);
    transition: all .3s ease
}

.landingMenuSection .placeholdersBlock .menuPlaceholder .placeholderTitle {
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.landingMenuSection .placeholdersBlock .menuPlaceholder .arrow {
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: rgba(255, 255, 255, .804);
    transition: .2s
}

@media (max-width: 1365px) {
    .landingMenuSection .placeholdersBlock .menuPlaceholder {
        display: flex;
        align-items: center;
        padding: 20px 15px;
        background-color: #242932;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px
    }
    .landingMenuSection .placeholdersBlock .menuPlaceholder:first-child {
        border-right: 1px solid #1c2028;
        border-bottom-right-radius: 0
    }
    .landingMenuSection .placeholdersBlock .menuPlaceholder:last-child {
        border-left: 1px solid #1c2028;
        border-bottom-left-radius: 0
    }
    .landingMenuSection .placeholdersBlock .menuPlaceholder.open {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }
}

.landingMenuSection .menuBlock {
    position: relative;
    display: flex
}

.landingMenuSection .menuBlock .menuPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    padding: 20px 15px;
    background-color: #1c2028;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer
}

.landingMenuSection .menuBlock .menuPlaceholder:hover .placeholderTitle,
.landingMenuSection .menuBlock .menuPlaceholder:focus .placeholderTitle,
.landingMenuSection .menuBlock .menuPlaceholder.open .placeholderTitle {
    color: #fff
}

.landingMenuSection .menuBlock .menuPlaceholder:hover .arrow,
.landingMenuSection .menuBlock .menuPlaceholder:focus .arrow,
.landingMenuSection .menuBlock .menuPlaceholder.open .arrow {
    color: #fff
}

.landingMenuSection .menuBlock .menuPlaceholder.open .arrow {
    margin-top: 7px;
    transform: rotate(180deg)
}

.landingMenuSection .menuBlock .menuPlaceholder .placeholderTitle {
    overflow: hidden;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.landingMenuSection .menuBlock .menuPlaceholder .arrow {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    color: rgba(255, 255, 255, .804);
    transition: .2s
}

@media (max-width: 1365px) {
    .landingMenuSection .menuBlock .menuPlaceholder {
        display: none
    }
}

.menuWrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    overflow-x: scroll;
    overflow-y: hidden
}

.menuWrapper::-webkit-scrollbar {
    display: none
}

@media (max-width: 900px) {
    .menuWrapper {
        position: relative;
        flex-wrap: nowrap;
        max-width: 100%
    }
    .menuWrapper::-webkit-scrollbar {
        display: none
    }
}

.menuWrapper.providers {
    position: absolute;
    left: -99999px;
    z-index: 9999;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin-top: 96px;
    background: #1a1d25
}

.menuWrapper.providers a {
    padding: 10px 0;
    background-color: #21242d;
    border-radius: 5px;
    cursor: pointer
}

.menuWrapper.providers a:hover {
    background-color: #242932
}

.menuWrapper.providers a .menuTitle {
    max-width: 80%;
    margin: 0 auto
}

.menuWrapper.providers.open {
    left: 0;
    padding: 30px 20px 13px
}

.menuWrapper.providers.open a {
    width: 23%;
    height: auto;
    margin-right: 0;
    margin-bottom: 20px
}

.menuWrapper.providers.open a .menuIcon {
    width: 46px;
    height: 36px;
    margin-bottom: 3px
}

.menuWrapper a,
.menuWrapper .itemCategories {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 12.5%;
    padding: 20px;
    border-bottom: 1px solid #2e3542;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.menuWrapper a:last-child,
.menuWrapper .itemCategories:last-child {
    margin-right: 0
}

.menuWrapper a.active,
.menuWrapper .itemCategories.active {
    color: #fff;
    background-color: #fdae05
}

@media (max-width: 1550px) {
    .menuWrapper a,
    .menuWrapper .itemCategories {
        width: auto
    }
}

@media (max-width: 900px) {
    .menuWrapper a,
    .menuWrapper .itemCategories {
        width: auto;
        min-width: 120px;
        padding-right: 15px;
        padding-left: 15px
    }
}

.menuWrapper a:hover,
.menuWrapper .itemCategories:hover {
    border-bottom: 1px solid #fdae05
}

@media (max-width: 900px) {
    .menuWrapper a:hover,
    .menuWrapper .itemCategories:hover {
        background-color: transparent
    }
}

.menuWrapper a:hover .menuIcon svg,
.menuWrapper .itemCategories:hover .menuIcon svg {
    color: #fff
}

@media (max-width: 900px) {
    .menuWrapper a:hover .menuIcon svg,
    .menuWrapper .itemCategories:hover .menuIcon svg {
        color: rgba(255, 255, 255, .804)
    }
}

.menuWrapper a:hover .menuTitle,
.menuWrapper .itemCategories:hover .menuTitle {
    color: #fff
}

@media (max-width: 900px) {
    .menuWrapper a:hover .menuTitle,
    .menuWrapper .itemCategories:hover .menuTitle {
        color: rgba(255, 255, 255, .804)
    }
}

.menuWrapper a .menuIcon,
.menuWrapper .itemCategories .menuIcon {
    width: 25px;
    min-width: 25px;
    height: 25px;
    margin-right: 10px;
    fill: rgba(255, 255, 255, .804)
}

.menuWrapper a .menuIcon svg,
.menuWrapper a .menuIcon img,
.menuWrapper .itemCategories .menuIcon svg,
.menuWrapper .itemCategories .menuIcon img {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .804);
    transition: all .3s ease
}

.menuWrapper a .menuTitle,
.menuWrapper .itemCategories .menuTitle {
    color: rgba(255, 255, 255, .804);
    white-space: nowrap;
    transition: all .3s ease
}

.gamesBoxTitle {
    width: 100%;
    margin: 24px 0 0
}

.gamesBoxTitle:first-child {
    margin-top: 0
}

.gamesBoxTitle h4 {
    position: relative;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 18px
}

@media (max-width: 375px) {
    .gamesBoxTitle h4 {
        font-size: 16px
    }
}

.gamesBoxTitle h4.tagNew:before {
    position: absolute;
    top: -14px;
    right: -15px;
    padding: 2px 5px;
    color: #fff;
    font-size: 9px;
    background-color: #d02121;
    border-radius: 5px;
    content: "NEW"
}

.mobileAppContainer {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin: 0 auto -5px;
    padding: 15px;
    font-size: 13px;
    text-transform: uppercase;
    background-color: #272d39;
    border-radius: 6px;
    outline: none
}

.mobileAppContainer .icons {
    margin-left: auto
}

.mobileAppContainer .icons svg {
    font-size: 16px
}

.mobileAppContainer .icons svg:first-child {
    margin-right: 10px
}

.mobileAppContainer .icons svg:last-child {
    fill: #a4c639
}

.casinoInfo {
    width: 100%;
    margin-top: 24px;
    color: inherit
}

.casinoInfo .infoWrapper {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-height .3s ease
}

.casinoInfo .infoWrapper.open {
    max-height: 3000px
}

.casinoInfo .infoWrapper:not(.open):after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background: linear-gradient(transparent 1rem, #1c2028);
    content: ""
}

.casinoInfo .infoWrapper .twoColumns {
    display: flex
}

.casinoInfo .infoWrapper .twoColumns .info {
    width: 47.5%
}

.casinoInfo .infoWrapper .twoColumns .info:first-child {
    margin-right: 5%
}

.casinoInfo .infoWrapper .twoColumns .info h1,
.casinoInfo .infoWrapper .twoColumns .info h2 {
    font-weight: 400;
    font-size: 20px
}

.casinoInfo .infoWrapper .twoColumns .info h4 {
    font-size: 18px
}

@media (max-width: 1200px) {
    .casinoInfo .infoWrapper .twoColumns {
        flex-direction: column
    }
    .casinoInfo .infoWrapper .twoColumns .info {
        width: 100%;
        margin: 0
    }
}

.casinoInfo .showMore {
    margin: 20px auto 0;
    text-align: center
}

@media (max-width: 1099px) {
    .casinoInfo {
        width: 100%;
        margin: 24px auto 0
    }
}

.providersBox {
    margin-top: 15px
}

.providersBox .gamesBoxPlaceholder {
    display: flex;
    width: 100%;
    overflow: hidden
}

.providersBox .gamesBoxPlaceholder .item {
    min-width: 16%;
    margin-right: 10px
}

.providersBox .gamesBoxPlaceholder .item .thumb {
    background-color: #1d1438 !important
}

.providersBox .gamesBoxPlaceholder .item img {
    background-repeat: no-repeat;
    background-size: contain !important;
    filter: none !important
}

.providersBox .item {
    width: 100%;
    height: 70px;
    background-color: #1d1438;
    border-radius: 10px;
    cursor: pointer
}

.providersBox .item:hover .card .thumb .img {
    filter: invert(1) opacity(.6)
}

.providersBox .item .card {
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent
}

.providersBox .item .card .thumb {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    background-color: #1d1438;
    border-radius: 10px;
    transform-origin: center;
    transition: transform .1s linear;
    will-change: transform
}

.providersBox .item .card .thumb:hover img {
    filter: grayscale(1) invert(1) opacity(1)
}

.providersBox .item .card .thumb img {
    max-width: 80%;
    max-height: 65%;
    margin: auto;
    transition: .3s;
    filter: grayscale(1) invert(1) opacity(.7)
}

@media (max-width: 1099px) {
    .providersBox {
        width: 100%;
        margin: 10px auto 0
    }
}

.liveRtpGamesBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% + 28px);
    margin: 0 -14px -10px
}

.liveRtpGamesBox>.item {
    width: 49%;
    height: 78px;
    margin-bottom: 10px;
    padding: 6px;
    background-color: #21242d;
    border-radius: 10px
}

.liveRtpGamesBox>.item:hover {
    background-color: #272d39
}

.liveRtpGamesBox>.item .card {
    position: relative;
    display: flex;
    width: 100%;
    -webkit-tap-highlight-color: transparent
}

.liveRtpGamesBox>.item .card .left {
    display: flex
}

.liveRtpGamesBox>.item .card .left .thumb {
    position: relative;
    width: 85px;
    padding-bottom: 65px;
    overflow: hidden;
    border-radius: 10px;
    transform-origin: center;
    transition: transform .1s linear;
    will-change: transform
}

.liveRtpGamesBox>.item .card .left .thumb .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-size: cover;
    -webkit-user-select: none;
    user-select: none
}

.liveRtpGamesBox>.item .card .left .bottom {
    margin-top: 10px;
    margin-left: 15px
}

.liveRtpGamesBox>.item .card .left .bottom .name {
    max-width: 160px;
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media (max-width: 440px) {
    .liveRtpGamesBox>.item .card .left .bottom .name {
        max-width: 120px
    }
}

.liveRtpGamesBox>.item .card .left .bottom .provider {
    overflow: hidden;
    color: rgba(255, 255, 255, .44);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media (max-width: 340px) {
    .liveRtpGamesBox>.item .card .left .bottom {
        display: none
    }
}

.liveRtpGamesBox>.item .card .right {
    display: flex;
    flex-direction: column;
    justify-content: right;
    width: 100%;
    margin-top: 5px
}

.liveRtpGamesBox>.item .card .right .badge {
    max-width: 95px;
    margin-top: 5px;
    margin-left: auto;
    padding: 3px 10px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    border-radius: 5px
}

.liveRtpGamesBox>.item .card .right .badge.red {
    margin-top: 0;
    background-color: #dc3545
}

.liveRtpGamesBox>.item .card .right .badge.red svg {
    margin-top: -3px;
    transform: rotate(270deg) scale(1.2)
}

@media (max-width: 1080px) {
    .liveRtpGamesBox>.item {
        width: 100%;
        margin-right: 0
    }
}

@media (max-width: 1099px) {
    .liveRtpGamesBox {
        width: 100%;
        margin: 0 auto
    }
}

@media (max-width: 969px) {
    .liveRtpGamesBox {
        width: calc(100% + 14px);
        margin-right: -7px;
        margin-left: -7px
    }
}

.gamesBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0 0
}

.gamesBox [class*=swiper-wrapper] {
    margin-top: 5px
}

.gamesBox .gamesBoxPlaceholder {
    display: flex;
    width: 100%;
    overflow: hidden
}

.gamesBox .gamesBoxPlaceholder .item {
    min-width: 16%;
    margin-right: 10px
}

.gamesBox .gamesBoxPlaceholder .item .img {
    background-color: #272d39 !important;
    background-repeat: no-repeat;
    background-size: contain !important
}

.gamesBox .playerCount {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    padding: 0 auto 0 auto;
    margin-top: 10px
}

.gamesBox .playerCount .playerText {
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #fff
}

.gamesBox .playerCount .pulseDot {
    width: 6.5px;
    height: 6.5px;
    position: relative;
    margin-left: 2px;
    animation: pulse 1s infinite ease-out;
    z-index: 1;
    background: #1fff20;
    border-radius: 50%
}

.gamesBox .playerCount .playerNumber {
    font-weight: 600;
    text-align: left;
    font-size: 12px;
    color: #fff;
    margin-left: 5px
}

.gamesBox .item {
    position: relative;
    margin: 0;
    overflow: hidden;
    -webkit-transform-origin: center;
    transform-origin: center;
    transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear, -webkit-transform .1s linear;
    will-change: transform
}

.gamesBox .item:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px)
}

.gamesBox .item:hover .gameOverlay {
    visibility: visible !important
}

.gamesBox .item.big {
    width: 16%
}

@media (min-width: 1186px) and (max-width: 1624px) {
    .gamesBox .item.big {
        width: 19%
    }
}

@media (min-width: 984px) and (max-width: 1185px) {
    .gamesBox .item.big {
        width: 24%
    }
}

@media (min-width: 901px) and (max-width: 983px) {
    .gamesBox .item.big {
        width: 32.33%
    }
}

@media (min-width: 791px) and (max-width: 900px) {
    .gamesBox .item.big {
        width: 19%
    }
}

@media (min-width: 636px) and (max-width: 790px) {
    .gamesBox .item.big {
        width: 24%
    }
}

@media (min-width: 484px) and (max-width: 635px) {
    .gamesBox .item.big {
        width: 32.33%
    }
}

@media (min-width: 320px) and (max-width: 483px) {
    .gamesBox .item.big {
        width: 48.5%
    }
}

.gamesBox .item .gameOverlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 30px 16px;
    background-color: rgba(0, 0, 0, .3);
    visibility: hidden;
    transition-delay: .4s;
    transition-property: visibility
}

.gamesBox .item .gameOverlay .gameOverlayTitle {
    position: absolute;
    top: 20px;
    right: 10px;
    left: 10px;
    z-index: 1;
    max-width: 100%;
    max-height: 62px;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    text-transform: capitalize
}

@media (min-width: 540px) and (max-width: 1600px) {
    .gamesBox .item .gameOverlay .gameOverlayTitle {
        top: 15px;
        max-height: 43px
    }
}

@media (min-width: 975px) and (max-width: 1600px) {
    .gamesBox .item .gameOverlay .gameOverlayTitle {
        font-size: 12px
    }
}

@media (max-width: 539px) {
    .gamesBox .item .gameOverlay .gameOverlayTitle {
        top: 10px;
        max-height: 46px;
        font-size: 12px
    }
}

@media (max-width: 373px) {
    .gamesBox .item .gameOverlay .gameOverlayTitle {
        top: 5px
    }
}

.gamesBox .item .gameOverlay .gameOverlayPlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.gamesBox .item .gameOverlay .gameOverlayPlay svg {
    width: 35px;
    height: 35px;
    color: #fff;
    transition: transform .3s ease-in-out
}

@media (max-width: 425px) {
    .gamesBox .item .gameOverlay .gameOverlayPlay svg {
        width: 30px;
        height: 30px
    }
}

@media (max-width: 375px) {
    .gamesBox .item .gameOverlay .gameOverlayPlay svg {
        width: 25px;
        height: 25px
    }
}

.gamesBox .item .gameOverlay .gameOverlayPlay svg:hover {
    transform: scale(1.2)
}

.gamesBox .item .gameOverlay .gameOverlayProvider {
    position: absolute;
    right: 10px;
    bottom: 30px;
    left: 10px;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    text-transform: capitalize;
    text-overflow: ellipsis
}

@media (min-width: 426px) and (max-width: 1600px) {
    .gamesBox .item .gameOverlay .gameOverlayProvider {
        font-size: 14px
    }
}

@media (max-width: 425px) {
    .gamesBox .item .gameOverlay .gameOverlayProvider {
        bottom: 20px;
        max-height: 30px;
        font-size: 12px
    }
}

@media (max-width: 375px) {
    .gamesBox .item .gameOverlay .gameOverlayProvider {
        max-height: 30px;
        font-size: 11px
    }
}

.gamesBox .item .card {
    position: relative;
    display: block;
    width: 100%;
    -webkit-tap-highlight-color: transparent
}

.gamesBox .item .card.soon {
    overflow: hidden;
    opacity: .4;
    pointer-events: none
}

.gamesBox .item .card .gameSoon {
    position: absolute;
    top: 50%;
    left: -10%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120%;
    height: 35%;
    padding-bottom: 4px;
    color: #fff;
    font-size: 18px;
    font-family: "Exo 2", Open Sans, sans-serif;
    background: #353c4a;
    -webkit-transform: rotate(-15deg) translateY(-50%);
    transform: rotate(-15deg) translateY(-50%);
    opacity: .9
}

.gamesBox .item .card .thumb {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 132%;
    overflow: hidden;
    border-radius: 10px;
    transform-origin: center;
    transition: transform .1s linear;
    will-change: transform
}

.gamesBox .item .card .thumb .img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition-delay: .4s;
    transition-property: filter;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.gamesBox .item .card .thumb .online {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 4px 10px 2px 13px;
    color: #fff;
    font-size: 12px;
    background: rgba(0, 0, 0, .35);
    border-radius: 18px 0 0
}

.gamesBox .item .card .thumb .online svg {
    margin: -1px 3px 0 0;
    font-size: 9px
}

.gamesBox .item .card .thumb .badge {
    position: absolute;
    top: 0;
    z-index: 1;
    display: flex;
    padding: 1% 10%;
    color: #fff;
    font-weight: 500;
    font-size: 80%;
    line-height: 16px
}

.gamesBox .item .card .thumb .badge.right {
    right: 0;
    border-radius: 0 0 0 25px
}

.gamesBox .item .card .thumb .badge.left {
    left: 0;
    border-radius: 0 0 25px
}

.gamesBox .item .card .thumb .badge.new {
    color: #fff;
    background-color: #1070e3
}

.gamesBox .item .card .thumb .badge.newYear {
    top: auto;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: transparent
}

.gamesBox .item .card .thumb .badge.top {
    color: #fff;
    background: #219a19
}

.gamesBox .item .card .thumb .badge.select {
    color: #fff;
    background: #ff5722
}

.gamesBox .item .card .thumb .badge.tournament {
    color: #000;
    background: #fce820
}

.gamesBox .item .card .thumb .badge.rtpUp {
    padding-right: 10px;
    color: #fff;
    background: #dc3545
}

.gamesBox .item .card .thumb .badge.rtpUp svg {
    margin-left: 2px;
    transform: rotate(270deg) scale(1.5)
}

.gamesBox .item .card .thumb .badge.crash {
    color: #000;
    background: #ffd30e
}

.gamesBox .item .card .thumb .badge.live {
    color: #fff;
    background: #6da1ff
}

.gamesBox .item .card .thumb .badge.jackpot {
    color: #fff;
    background: #bf3632
}

.gamesBox .item .card .thumb .badge.minbet {
    padding-right: 10px;
    color: #fff;
    background: #8b3ffd
}

.gamesBox .item .card .thumb .badge.minbet svg {
    margin-left: 2px;
    transform: rotate(270deg) scale(1.5)
}

.gamesBox .item .card .bottom {
    margin: 1px
}

.gamesBox .item .card .bottom .name {
    overflow: hidden;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis
}

.gamesBox .item .card .bottom .provider {
    overflow: hidden;
    color: rgba(255, 255, 255, .44);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis
}

@media (max-width: 1180px) {
    .gamesBox>.item {
        width: 23%
    }
    .gamesBox>.item.big {
        width: 31%
    }
}

@media (max-width: 1099px) {
    .gamesBox {
        width: 100%;
        margin: 10px auto 0
    }
}

@media (max-width: 900px) {
    .gamesBox>.item {
        width: 23%
    }
    .gamesBox>.item.big {
        width: 31%
    }
    .gamesBox>.item .card:hover .thumb {
        -webkit-transform: scale(1.04);
        transform: scale(1.04)
    }
}

@media (max-width: 700px) {
    .gamesBox>.item {
        width: 31%
    }
    .gamesBox>.item.big {
        width: 30.5%
    }
}

@media screen and (max-width: 549px) {
    .gamesBox>.item {
        width: 47.5%
    }
}

@media (max-width: 450px) {
    .gamesBox>.item {
        width: 30.5%
    }
}

.awssld__box,
.awssld__content,
.awssld__container figure {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.awssld__bullets button,
.awssld__controls button {
    outline-width: 0;
    outline-style: none;
    outline-color: 0
}

.awssld {
    --organic-arrow-thickness: 4px;
    --organic-arrow-height: 40px;
    --slider-height-percentage: 60%;
    --loader-bar-color: rgba(0, 0, 0, .2117647059);
    --loader-bar-height: 6px;
    --control-button-width: 10%;
    --control-button-height: 25%;
    --control-button-opacity: .5;
    --control-button-hover-opacity: .75;
    --control-button-background: transparent;
    --transition-bezier: cubic-bezier(.5, .075, .25, .95);
    --slider-transition-duration: 575ms;
    --organic-arrow-color: #6a6a6a;
    --organic-arrow-border-radius: 0;
    --control-bullet-color: rgba(255, 255, 255, .4784313725);
    --control-bullet-active-color: #fff;
    --content-background-color: #2f2f2f
}

.awssld {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 280px
}

.awssld__wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.awssld__container {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: var(--slider-height-percentage)
}

@media all and (max-width: 500px) {
    .awssld__container {
        padding-bottom: calc(var(--slider-height-percentage) * 1.25)
    }
}

.awssld__startUp {
    width: 100%;
    height: 100%;
    background-color: red
}

.awssld__startUp>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.awssld__startUp img {
    width: 35%;
    height: auto
}

.awssld__content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--content-background-color);
    border-radius: 8px
}

.awssld__content>img,
.awssld__content>video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.awssld__content .sliderItem {
    z-index: 1;
    width: 100%;
    height: 100%
}

.awssld__content .sliderItem svg {
    position: absolute;
    z-index: 1;
    pointer-events: none
}

.awssld__content .sliderItem .sliderContent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 15px
}

.awssld__content .sliderItem .sliderContent .title {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-weight: 500;
    font-size: 22px;
    background-color: rgba(0, 0, 0, .26);
    border-radius: 10px
}

.awssld__content .sliderItem .sliderContent .description {
    display: inline-block;
    margin-top: 5px;
    padding: 5px 10px;
    color: #fff;
    font-size: 18px;
    background-color: rgba(0, 0, 0, .26);
    border-radius: 10px
}

.awssld__content .sliderItem .sliderContent button {
    display: block;
    margin-top: 15px;
    padding: 7px 30px;
    color: #fdae05;
    font-weight: 500;
    font-size: 1.1rem;
    text-transform: uppercase;
    background-color: #fff;
    border-color: transparent;
    border-radius: 20px;
    transition: all .3s ease
}

.awssld__content .sliderItem .sliderContent button:hover {
    transform: scale(1.05)
}

.awssld__content .sliderItem .sliderContent button.purple {
    color: #5600cb
}

.awssld__content .sliderItem .sliderContent button.magenta {
    color: #ce1e65
}

.awssld__content .sliderItem .sliderContent button.black {
    color: #000
}

.awssld__content .sliderItem .sliderContent button.orange {
    color: #ff3c00
}

.awssld__content .sliderItem .sliderContent button.blue {
    color: #057bfb
}

.awssld__content .sliderItem .sliderContent .bonusesList {
    position: absolute;
    bottom: 25px;
    left: 15px;
    display: flex
}

.awssld__content .sliderItem .sliderContent .bonusesList .item {
    display: flex
}

.awssld__content .sliderItem .sliderContent .bonusesList .item:not(:last-child) {
    margin-right: 30px
}

.awssld__content .sliderItem .sliderContent .bonusesList .item img {
    position: relative;
    top: 10px;
    width: 35px;
    height: 35px
}

.awssld__content .sliderItem .sliderContent .bonusesList .item .features {
    margin-top: 10px;
    margin-left: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px
}

@media (max-width: 500px) {
    .awssld__content .sliderItem .sliderContent .bonusesList {
        display: none
    }
}

.awssld__content .sliderItem .img {
    position: absolute;
    z-index: 1
}

.awssld__content .sliderItem .img.partner {
    top: 5%;
    right: 2.5%;
    height: 95%
}

.awssld__content .sliderItem .img.bonus {
    top: 0;
    right: -60px;
    height: 100%
}

.awssld__content .sliderItem .img img {
    height: 100%
}

.awssld__controls button {
    position: absolute;
    top: calc(50% - .5 * var(--control-button-height));
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--control-button-width);
    height: var(--control-button-height);
    color: #fff;
    background-color: var(--control-button-background);
    border: none;
    cursor: pointer
}

.awssld__controls button .awssld__controls__arrow-left,
.awssld__controls button .awssld__controls__arrow-right {
    opacity: var(--control-button-opacity)
}

.awssld__controls button:hover .awssld__controls__arrow-left,
.awssld__controls button:hover .awssld__controls__arrow-right {
    opacity: var(--control-button-opacity-hover)
}

.awssld__controls--active .awssld__controls__arrow-left {
    transform: translate3d(-100%, 0, 0);
    opacity: var(--control-button-opacity-hover)
}

.awssld__controls--active .awssld__controls__arrow-right {
    transform: translate3d(100%, 0, 0);
    opacity: var(--control-button-opacity-hover)
}

.awssld__controls--hidden {
    display: none
}

@media all and (max-width: 520px) {
    .awssld__controls {
        visibility: hidden
    }
}

.awssld__bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    display: block;
    width: 100%;
    height: var(--loader-bar-height);
    background-color: var(--loader-bar-color);
    transform: translate3d(-100%, 0, 0);
    transition: transform 3s var(--transition-bezier)
}

.awssld__bar--active {
    transform: translate3d(-20%, 0, 0)
}

.awssld__bar--end {
    transform: translateZ(0);
    transition-duration: .3s
}

.awssld__next {
    right: 0
}

.awssld__prev {
    left: 0
}

.awssld__box {
    z-index: 1;
    visibility: hidden
}

.awssld--animated {
    visibility: visible;
    will-change: transform
}

.awssld--animated-mobile {
    transition: transform 325ms cubic-bezier(.15, .65, .1, 1);
    will-change: transform
}

.awssld--active {
    z-index: 2;
    transform: translateZ(0);
    visibility: visible
}

.awssld--moveRight,
.awssld--moveLeft {
    backface-visibility: hidden
}

.awssld--moveRight {
    animation: slideFromRight var(--slider-transition-duration) both var(--transition-bezier)
}

.awssld--moveLeft {
    animation: slideFromLeft var(--slider-transition-duration) both var(--transition-bezier)
}

.awssld--exit {
    z-index: 0
}

.awssld--exit.awssld--moveLeft {
    animation: slideToLeft var(--slider-transition-duration) both var(--transition-bezier)
}

.awssld--exit.awssld--moveRight {
    animation: slideToRight var(--slider-transition-duration) both var(--transition-bezier)
}

.awssld--first .awssld__prev,
.awssld--last .awssld__next {
    visibility: hidden
}

.awssld--fill-parent {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important
}

.awssld--fill-parent .awssld__container {
    height: 100%;
    padding: 0
}

.awssld__bullets {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.awssld__bullets button {
    display: block;
    width: 20px;
    height: 5px;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    text-indent: -9999px;
    background: var(--control-bullet-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform .225s cubic-bezier(.8, 1.35, .75, 1.45), background-color .175s ease-out
}

.awssld__bullets button:hover,
.awssld__bullets .awssld__bullets--loading {
    transform: scale(1.2)
}

.awssld__bullets .awssld__bullets--active {
    background: var(--control-bullet-active-color);
    transform: scale(1.5)
}

.awssld__bullets .awssld__bullets--active:hover {
    transform: scale(1.5)
}

.awssld__controls__arrow-left,
.awssld__controls__arrow-right {
    position: relative;
    display: block;
    width: 100%;
    height: var(--organic-arrow-height);
    transition: transform .2s ease-out .125s, opacity .2s ease-out
}

.awssld__controls__arrow-left:before,
.awssld__controls__arrow-left:after,
.awssld__controls__arrow-right:before,
.awssld__controls__arrow-right:after {
    position: absolute;
    right: calc(50% - .7071 * (var(--organic-arrow-height) + var(--organic-arrow-thickness)) / 2);
    width: var(--organic-arrow-thickness);
    height: 100%;
    background-color: var(--organic-arrow-color);
    border-radius: var(--organic-arrow-border-radius);
    transition: transform .15s ease-out, background-color .15s ease-out;
    content: " "
}

.awssld__controls__arrow-left:before,
.awssld__controls__arrow-right:before {
    top: -50%;
    transform: rotate(-45deg);
    transform-origin: 100% 100% 0
}

.awssld__controls__arrow-left:after,
.awssld__controls__arrow-right:after {
    top: 50%;
    transform: rotate(45deg);
    transform-origin: 100% 0% 0
}

.awssld__controls__arrow-right--active {
    transform: translate3d(100%, 0, 0)
}

.awssld__controls__arrow-right--active:after {
    transform: rotate(90deg) translate3d(50%, 0, 0) !important
}

.awssld__controls__arrow-right--active:before {
    transform: rotate(-90deg) translate3d(50%, 0, 0) !important
}

.awssld__controls__arrow-left:before,
.awssld__controls__arrow-left:after {
    right: auto;
    left: calc(50% - .7071 * (var(--organic-arrow-height) + var(--organic-arrow-thickness)) / 2)
}

.awssld__controls__arrow-left:before {
    top: -50%;
    transform: rotate(45deg);
    transform-origin: 0 100% 0
}

.awssld__controls__arrow-left:after {
    top: 50%;
    transform: rotate(-45deg);
    transform-origin: 0 0 0
}

.awssld__controls__arrow-left--active {
    transform: translate3d(-100%, 0, 0)
}

.awssld__controls__arrow-left--active:after {
    transform: rotate(-90deg) translate3d(-50%, 0, 0) !important
}

.awssld__controls__arrow-left--active:before {
    transform: rotate(90deg) translate3d(-50%, 0, 0) !important
}

.awssld__controls button:hover .awssld__controls__arrow-left:before {
    transform: rotate(30deg);
    opacity: 1
}

.awssld__controls button:hover .awssld__controls__arrow-left:after {
    transform: rotate(-30deg);
    opacity: 1
}

.awssld__controls button:hover .awssld__controls__arrow-right:before {
    transform: rotate(-30deg);
    opacity: 1
}

.awssld__controls button:hover .awssld__controls__arrow-right:after {
    transform: rotate(30deg);
    opacity: 1
}

.awssld__timer {
    --timer-delay: 2s;
    --timer-release: .2s;
    --timer-height: 4px;
    --timer-background-color: rgb(0 0 0 / .15);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: var(--timer-height);
    background-color: var(--timer-background-color);
    transform: translate(-100%)
}

.awssld__timer--animated {
    transition: transform var(--timer-delay) linear;
    will-change: transform
}

.awssld__timer--run {
    transform: translate(0)
}

.awssld__timer--fast {
    transform: translate(-.00001px);
    transition: transform calc(var(--timer-release) / 2) linear
}

.awssld__timer--end {
    transform: translate(-.0001px);
    transition: transform var(--timer-release) linear
}

.awssld__timer--hidden {
    display: none
}

@keyframes slideFromLeft {
    0% {
        transform: translate3d(-100%, 0, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes slideFromRight {
    0% {
        transform: translate3d(100%, 0, 0)
    }
    to {
        transform: translateZ(0)
    }
}

@keyframes slideToLeft {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideToRight {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(100%, 0, 0)
    }
}

.mainContainer .landingWrapper {
    display: flex;
    flex-direction: column;
    width: calc(100% - 60px);
    margin: 0 auto
}

.mainContainer .landingWrapper .propsContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1250px;
    margin: 25px auto 0
}

.mainContainer .landingWrapper .propsContainer.single .landingTournamentSection {
    width: 100% !important
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection {
    position: relative;
    display: flex;
    align-items: center;
    width: 49%;
    max-width: 1250px;
    height: 140px;
    padding: 20px 30px;
    overflow: hidden;
    color: inherit;
    background: #1c2028;
    border-radius: 10px
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://cdn.friends-casino.io/assets/png/Landing/tournamentBackground.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    content: ""
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent {
    position: relative;
    z-index: 1;
    width: 100%
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 17px;
    white-space: nowrap;
    text-transform: uppercase
}

@media (max-width: 330px) {
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption {
        font-size: 13px
    }
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption .bet {
    display: inline-flex;
    align-items: center;
    color: #2dc53a;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption .bet .content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption .bet .icon {
    width: auto;
    height: auto;
    vertical-align: initial
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .caption .bet .icon.widthAuto {
    width: auto;
    height: auto;
    margin-left: 5px;
    vertical-align: initial
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .tagLine {
    max-width: 290px;
    color: rgba(255, 255, 255, .65);
    white-space: pre-line
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent .tagLine .timer {
    color: #fff
}

@media (max-width: 1365px) {
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent {
        flex-direction: column;
        align-items: start
    }
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection .tournamentContent {
        pointer-events: none
    }
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .itemFigure {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    display: flex;
    align-items: center;
    height: 100%
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .itemFigure img {
    width: auto;
    height: 100%;
    pointer-events: none
}

@media (max-width: 1200px) {
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection .itemFigure img {
        opacity: .2
    }
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection .itemFigure .btnMore {
    position: absolute;
    right: 30px;
    z-index: 2;
    display: flex;
    height: 40px;
    margin-right: 0;
    padding: 9px 20px;
    color: inherit;
    font-weight: 400;
    font-size: 13px;
    text-transform: capitalize;
    background: #20242d;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection {
        height: 124px;
        padding: 20px
    }
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection:hover .itemFigure img {
    opacity: .2
}

.mainContainer .landingWrapper .propsContainer .landingTournamentSection:hover .itemFigure .btnMore {
    opacity: 1
}

.mainContainer .landingWrapper .propsContainer .landingVipSection {
    position: relative;
    display: flex;
    align-items: center;
    width: 49%;
    max-width: 1250px;
    height: 140px;
    padding: 20px 30px;
    overflow: hidden;
    color: inherit;
    background: #1c2028;
    border-radius: 10px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://cdn.friends-casino.io/assets/png/Landing/vipBackground.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    content: ""
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent {
    position: relative;
    z-index: 1;
    width: 100%
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .caption {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 17px;
    white-space: nowrap
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .caption .emoji {
    display: flex;
    align-items: center;
    height: 22px;
    margin: 0 5px 0 0
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .caption .emoji img {
    width: auto;
    height: 20px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .caption .truncate {
    max-width: 150px;
    margin-left: 3px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .caption .truncate:before {
    display: inline-block;
    content: " "
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block {
    width: 280px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .smallText {
    display: flex;
    align-items: center;
    padding: 0 2px;
    color: rgba(255, 255, 255, .65)
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .smallText .progress {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    margin-right: 5px;
    margin-left: auto;
    color: #fff;
    font-weight: 400;
    font-size: 13px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper {
    position: relative;
    width: 100%;
    margin: 7px 0 0 -2px;
    border: 1px solid transparent;
    border-radius: 3px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar {
    position: relative;
    height: 28px;
    margin-bottom: 0;
    padding: 2px;
    background: #242932;
    border-radius: 50px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar>span {
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    color: #fff;
    font-size: 13px;
    background: #fdae05;
    border-radius: 50px
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar.empty>span {
    padding-left: 25px;
    background: 0 0
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar.empty:before {
    border-color: #191d25 transparent transparent
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar,
.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBar>span {
    display: flex;
    border-radius: 3px;
    -webkit-user-select: none;
    user-select: none
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBottom {
    position: absolute;
    top: 7px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
    color: #fff;
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBottom .item {
    display: flex;
    align-items: center
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block .progressWrapper .progressBottom .item img {
    height: 13px;
    margin: 0 5px 0 0
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent .block {
        width: 100%
    }
}

@media (max-width: 1365px) {
    .mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent {
        flex-direction: column;
        align-items: start
    }
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .propsContainer .landingVipSection .vipContent {
        pointer-events: none
    }
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .itemFigure {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    display: flex;
    align-items: center;
    height: 100%
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .itemFigure img {
    width: auto;
    height: 100%;
    pointer-events: none
}

@media (max-width: 1200px) {
    .mainContainer .landingWrapper .propsContainer .landingVipSection .itemFigure img {
        opacity: .2
    }
}

.mainContainer .landingWrapper .propsContainer .landingVipSection .itemFigure .btnMore {
    position: absolute;
    right: 30px;
    z-index: 2;
    display: flex;
    height: 40px;
    margin-right: 0;
    padding: 9px 20px;
    color: inherit;
    font-weight: 400;
    font-size: 13px;
    text-transform: capitalize;
    background: #20242d;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in
}

.mainContainer .landingWrapper .propsContainer .landingVipSection:hover .itemFigure img {
    opacity: .2
}

.mainContainer .landingWrapper .propsContainer .landingVipSection:hover .itemFigure .btnMore {
    opacity: 1
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .propsContainer .landingVipSection {
        height: 124px;
        padding: 20px
    }
    .mainContainer .landingWrapper .propsContainer .landingVipSection .itemFigure .btnMore {
        display: none
    }
}

@media (max-width: 1550px) {
    .mainContainer .landingWrapper .propsContainer {
        flex-direction: column
    }
    .mainContainer .landingWrapper .propsContainer .landingTournamentSection,
    .mainContainer .landingWrapper .propsContainer .landingVipSection {
        width: 100%
    }
    .mainContainer .landingWrapper .propsContainer .landingVipSection {
        margin-top: 24px
    }
}

.mainContainer .landingWrapper .landingWideWrapper {
    margin: -20px -60px 0;
    padding: 20px 60px;
    overflow: hidden;
    background: #191d25
}

.mainContainer .landingWrapper .landingSliderSection {
    width: 100%;
    max-width: 1250px;
    min-height: 1px;
    margin: 0 auto 10px;
    padding: 0
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader {
    display: flex;
    align-items: center;
    margin-bottom: 12px
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .landingSliderSection .promoHeader {
        margin-top: -10px
    }
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .label {
    position: relative;
    display: flex;
    align-items: center;
    height: 26px;
    padding-left: 26px;
    font-weight: 500;
    font-size: 18px
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .label button {
    color: #fff;
    background: transparent;
    border: 0;
    outline: none
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .label button img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%)
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .label button .btnLabel {
    margin-left: 8px;
    padding: 3px 6px;
    color: #fff;
    font-weight: 400;
    background: #653ba1;
    border-radius: 3px
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: #fdcd2d
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    border: 2px solid #fdcd2d;
    cursor: pointer
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows button[class*=swiper-button-disabled] {
    cursor: auto;
    opacity: .5
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows button[class*=swiper-button-disabled]:hover svg {
    transform: scale(1)
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows button:hover svg {
    transform: scale(1.2)
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows button svg {
    color: #fdcd2d;
    transition: transform .2s ease-in-out
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows .forward {
    border-radius: 0 10px 10px 0
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows .forward:active svg {
    transform: translate(4px)
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows .backward {
    border-right: none;
    border-radius: 10px 0 0 10px;
    transition: transform .3s ease-in-out
}

.mainContainer .landingWrapper .landingSliderSection .promoHeader .arrows .backward:active svg {
    transform: translate(-4px)
}

.mainContainer .landingWrapper .landingSliderSection .card {
    position: relative;
    display: flex;
    transform: scale(1) !important
}

.mainContainer .landingWrapper .landingSliderSection .card .background {
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    border: 0
}

.mainContainer .landingWrapper .landingSliderSection .card .background img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    opacity: 1;
    user-select: none;
    aspect-ratio: 17/10
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 5px
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 182px;
    height: 100%;
    padding-right: 0;
    background: transparent;
    border-radius: 0
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .innerText {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .badge {
    margin-bottom: 5px
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .badge .badgeContent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-left: 10px;
    padding: 0 5px;
    color: #000;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    background: #fff;
    border-radius: 3px;
    font-feature-settings: "tnum"
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 5px;
    margin-left: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 120%;
    text-align: left
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .description {
    flex: 1 1 auto;
    height: 100%;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    text-wrap: wrap;
    text-overflow: ellipsis
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .description .descriptionContent {
    display: inline-block;
    height: 100%;
    color: #fff;
    font-weight: 300;
    line-height: 120%;
    text-align: left
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnAction {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 5px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnAction:hover {
    color: #000;
    background-color: #fff
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnActionWhite {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    color: #000;
    font-weight: 600;
    text-align: center;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnActionWhite:hover {
    color: #fff;
    background-color: transparent
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnActionMain {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 10px;
    color: #261a46;
    font-weight: 600;
    text-align: center;
    background-color: #fdcd2d;
    border: 1px solid #fdcd2d;
    border-radius: 5px;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

.mainContainer .landingWrapper .landingSliderSection .card .cardContent .inner .btnActionMain:hover {
    color: #000;
    background-color: #fff
}

.mainContainer .landingWrapper .landingSliderSection .card:hover .background {
    opacity: .9
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper .landingSliderSection .awssld__wrapper {
        border-radius: 8px
    }
}

.mainContainer .landingWrapper .landingMenuSection {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0
}

.mainContainer .landingWrapper .landingGamesSection {
    width: 100%;
    max-width: 1250px;
    margin: 24px auto 0;
    padding: 0;
    background: transparent;
    border-radius: 6px
}

.mainContainer .landingWrapper .landingWelcomeSection {
    display: flex
}

.mainContainer .landingWrapper .landingWelcomeSection .left {
    position: relative;
    z-index: 1;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 600px;
    padding: 2.6875rem 1.25rem 3.25rem .1875rem
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box {
    position: relative;
    z-index: 1
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .title {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 46px;
    line-height: 56px
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .title .first {
    margin-top: 1.75rem;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5rem;
    text-transform: uppercase
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .title .first .green {
    color: #2dc53a
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .title .second {
    height: 5.25rem;
    font-weight: 700;
    font-size: 4.25rem;
    line-height: 5.25rem;
    -webkit-letter-spacing: -4px;
    -moz-letter-spacing: -4px;
    -ms-letter-spacing: -4px;
    letter-spacing: -4px;
    white-space: nowrap
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .title .second .gradient {
    margin-left: 10px;
    padding: 0 5px 0 0;
    color: transparent;
    background: linear-gradient(90deg, #2dc53a 22.99%, #219a19 73.57%);
    -webkit-background-clip: text;
    background-clip: text
}

@media (max-width: 650px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title {
        background: rgba(25, 29, 37, .5);
        border-radius: 0
    }
}

@media screen and (max-width: 1000px) and (min-width: 901px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title {
        background: rgba(25, 29, 37, .5);
        border-radius: 0
    }
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: .75rem;
    margin-bottom: 1.5rem
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .btn {
    width: auto;
    min-width: 9.375rem;
    height: 3.5rem;
    margin-right: .75rem;
    padding: 0 1.25rem;
    font-weight: 400;
    font-size: 14px;
    line-height: 3.5rem;
    white-space: nowrap
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 1rem;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .or {
    margin-right: .75rem
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 5px;
    font-weight: 400;
    font-size: 24px;
    background-color: #442176;
    border-radius: 4px;
    cursor: pointer
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items .item:hover {
    background-color: #653ba1
}

.mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items .item svg {
    pointer-events: none
}

@media screen and (max-width: 1000px) and (min-width: 901px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: .75rem;
        margin-bottom: 0
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .btn {
        width: 75%;
        max-width: 18.625rem;
        margin: 0 auto
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods {
        display: block;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        margin: .3125rem 0 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items {
        -webkit-justify-content: center;
        justify-content: center;
        margin-top: .25rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
}

@media (max-width: 650px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: .75rem;
        margin-bottom: 0
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .btn {
        width: 75%;
        max-width: 18.625rem;
        margin: 0 auto
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods {
        display: block;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        margin: .3125rem 0 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .authBox .methods .items {
        -webkit-justify-content: center;
        justify-content: center;
        margin-top: .25rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
}

@media screen and (max-width: 1000px) and (min-width: 901px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left {
        width: auto;
        margin-top: -11.25rem;
        margin-top: -12.5rem;
        padding: 3.125rem .625rem .625rem
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title {
        height: auto;
        font-size: 2.1875rem;
        line-height: 2.375rem;
        text-align: center
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title .second {
        -webkit-justify-content: center;
        justify-content: center;
        height: 3.75rem;
        margin-top: -.3125rem;
        font-size: 2.75rem;
        line-height: 3.75rem;
        -webkit-letter-spacing: -.25rem;
        -moz-letter-spacing: -.25rem;
        -ms-letter-spacing: -.25rem;
        letter-spacing: -.25rem;
        text-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
}

@media (max-width: 650px) {
    .mainContainer .landingWrapper .landingWelcomeSection .left {
        width: auto;
        margin-top: -11.25rem;
        margin-top: -12.5rem;
        padding: 3.125rem .625rem .625rem
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title {
        height: auto;
        font-size: 2.1875rem;
        line-height: 2.375rem;
        text-align: center
    }
    .mainContainer .landingWrapper .landingWelcomeSection .left .box .title .second {
        -webkit-justify-content: center;
        justify-content: center;
        height: 3.75rem;
        margin-top: -.3125rem;
        font-size: 2.75rem;
        line-height: 3.75rem;
        -webkit-letter-spacing: -.25rem;
        -moz-letter-spacing: -.25rem;
        -ms-letter-spacing: -.25rem;
        letter-spacing: -.25rem;
        text-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center
    }
}

.mainContainer .landingWrapper .landingWelcomeSection .right {
    position: relative;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    width: 1px
}

.mainContainer .landingWrapper .landingWelcomeSection .right img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    min-width: 600px
}

@media screen and (max-width: 1300px) and (min-width: 1001px) {
    .mainContainer .landingWrapper .landingWelcomeSection .right img {
        opacity: .4
    }
}

@media screen and (max-width: 750px) and (min-width: 651px) {
    .mainContainer .landingWrapper .landingWelcomeSection .right img {
        opacity: .4
    }
}

@media screen and (max-width: 1000px) and (min-width: 901px) {
    .mainContainer .landingWrapper .landingWelcomeSection .right {
        width: auto;
        min-height: 18.75rem
    }
    .mainContainer .landingWrapper .landingWelcomeSection .right img {
        position: static;
        width: 100%;
        min-width: auto;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0)
    }
}

@media (max-width: 650px) {
    .mainContainer .landingWrapper .landingWelcomeSection .right {
        width: auto;
        min-height: 18.75rem
    }
    .mainContainer .landingWrapper .landingWelcomeSection .right img {
        position: static;
        width: 100%;
        min-width: auto;
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0)
    }
}

@media screen and (max-width: 1000px) and (min-width: 901px) {
    .mainContainer .landingWrapper .landingWelcomeSection {
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        width: auto;
        padding: 0;
        background-color: transparent
    }
}

@media (max-width: 650px) {
    .mainContainer .landingWrapper .landingWelcomeSection {
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        width: auto;
        padding: 0;
        background-color: transparent
    }
}

@media (max-width: 1099px) {
    .mainContainer .landingWrapper {
        width: calc(100% - 30px)
    }
}

@media (max-width: 900px) {
    .mainContainer .landingWrapper {
        width: 100%
    }
}

.footer.landingMode {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 0
}

@media (max-width: 1099px) {
    .footer.landingMode {
        width: calc(100% - 30px)
    }
}

@media (max-width: 900px) {
    .footer.landingMode {
        width: 100%
    }
}

.socialAuthSectionMain {
    position: fixed !important;
    z-index: 902;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #261a46
}

.socialAuthSectionMain .loader {
    height: 45px !important
}

.socialAuthSection {
    position: relative
}

.socialAuthSection .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    height: 85vh;
    margin: auto;
    white-space: nowrap
}

.socialAuthSection .loader {
    position: relative;
    top: 0;
    height: 100px
}

.socialAuthSection .loader img {
    width: 80px;
    height: 80px
}

.socialAuthSection .text {
    color: inherit;
    font-size: 22px
}

.socialAuthSection .successBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    height: 85vh;
    margin: auto;
    padding: 40px 20px;
    text-align: center
}

.socialAuthSection .successIcon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px
}

.socialAuthSection .successIcon svg {
    width: 100%;
    height: 100%;
    fill: #4caf50
}

.socialAuthSection .successTitle {
    color: inherit;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3
}

.socialAuthSection .successDescription {
    color: inherit;
    font-size: 16px;
    margin-bottom: 32px;
    opacity: .8;
    line-height: 1.5;
    max-width: 340px
}

.socialAuthSection .successInstructions {
    color: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 16px 20px;
    background: rgba(76, 175, 80, .1);
    border: 1px solid rgba(76, 175, 80, .3);
    border-radius: 8px;
    line-height: 1.6;
    max-width: 340px
}

.socialAuthSection .errorBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    height: 85vh;
    margin: auto;
    padding: 40px 20px;
    text-align: center
}

.socialAuthSection .errorIcon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px
}

.socialAuthSection .errorIcon svg {
    width: 100%;
    height: 100%;
    fill: #f44336
}

.socialAuthSection .errorTitle {
    color: inherit;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.4;
    max-width: 340px
}

.clubSection {
    padding: 30px !important;
    background: #272d39;
    border-radius: 6px
}

.clubSection .clubHeader {
    position: relative;
    margin-bottom: 30px
}

.clubSection .clubHeader .image {
    position: absolute;
    opacity: .6
}

.clubSection .clubHeader .image1 {
    left: 16%;
    rotate: 45deg
}

.clubSection .clubHeader .image2 {
    right: auto;
    left: 3%;
    rotate: 15deg
}

.clubSection .clubHeader .image3 {
    right: 3%;
    rotate: 45deg
}

.clubSection .clubHeader .image4 {
    right: 16%
}

.clubSection .clubHeader .image1,
.clubSection .clubHeader .image4 {
    top: 5%;
    width: 72px
}

.clubSection .clubHeader .image2,
.clubSection .clubHeader .image3 {
    bottom: 0;
    width: 48px
}

.clubSection .clubHeader .ribbonWrapper {
    width: 360px;
    margin: 0 auto;
    text-align: center
}

.clubSection .clubHeader .ribbonWrapper img {
    width: 72px
}

.clubSection .clubHeader .ribbonWrapper .ribbon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    margin-top: 15px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    background: url(https://cdn.friends-casino.io/assets/png/Club/ribbonWrapper.png) no-repeat;
    background-size: 100% auto
}

.clubSection .clubHeader .ribbonWrapper .ribbon>div {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media (max-width: 400px) {
    .clubSection .clubHeader .ribbonWrapper .ribbon {
        height: 36px;
        margin-top: 5px;
        font-size: 14px
    }
}

@media (max-width: 360px) {
    .clubSection .clubHeader .ribbonWrapper .ribbon {
        font-size: 13px
    }
}

.clubSection .clubHeader .ribbonWrapper .ribbonDescription {
    margin-top: 10px;
    color: #aab0bd;
    font-size: 13px
}

@media (max-width: 400px) {
    .clubSection .clubHeader .ribbonWrapper .ribbonDescription {
        margin-top: 5px
    }
}

@media (max-width: 1350px) {
    .clubSection .clubHeader .image2,
    .clubSection .clubHeader .image3 {
        width: 35px
    }
    .clubSection .clubHeader .image1,
    .clubSection .clubHeader .image4 {
        display: none
    }
}

@media (max-width: 1050px) {
    .clubSection .clubHeader .image {
        display: none
    }
}

@media (max-width: 500px) {
    .clubSection .clubHeader {
        margin-bottom: 15px
    }
    .clubSection .clubHeader .ribbonWrapper {
        width: 100%
    }
}

.clubSection .aboutBlock {
    position: relative;
    margin-bottom: 25px;
    padding: 20px;
    color: #fff;
    white-space: pre-line;
    background-color: #2d3340;
    border: none;
    border-radius: 5px
}

.clubSection .aboutBlock.first {
    background-color: #fdae05
}

.clubSection .aboutBlock.first .h2,
.clubSection .aboutBlock.first .text {
    color: #fff
}

.clubSection .aboutBlock.second {
    background-color: #3e2b97
}

.clubSection .aboutBlock .noAuth {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    text-align: center
}

.clubSection .aboutBlock .noAuth button {
    position: absolute;
    top: calc(50% - 1.25rem);
    left: calc(50% - 5rem);
    display: block;
    width: 10rem;
    text-transform: uppercase
}

.clubSection .aboutBlock .vip {
    position: absolute;
    top: 0;
    right: 15px;
    width: 100px;
    min-height: 90px;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 50%;
    opacity: .1
}

.clubSection .aboutBlock .h2 {
    margin-bottom: 12px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase
}

.clubSection .aboutBlock .rankWagers {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 25px
}

.clubSection .aboutBlock .rankWagers p {
    flex-basis: 50%;
    margin-bottom: 15px;
    color: #aab0bd
}

@media (max-width: 600px) {
    .clubSection .aboutBlock .rankWagers p {
        flex-basis: 100%
    }
}

.clubSection .aboutBlock .rankWagers p img {
    height: 16px;
    margin: -2px 5px 0 0
}

.clubSection .aboutBlock .rankWagers p:last-child {
    margin-bottom: 0
}

.clubSection .aboutBlock .rankWagers p.bronze {
    color: #ab5d30
}

.clubSection .aboutBlock .rankWagers p.silver {
    color: #4d7bcd
}

.clubSection .aboutBlock .rankWagers p.gold {
    color: #ffd40e
}

.clubSection .aboutBlock .rankWagers p.platinum {
    color: #077cfc
}

.clubSection .aboutBlock .rankWagers p.diamond {
    color: #7625f4
}

.clubSection .aboutBlock .rankWagers p.elite {
    color: #ff3c38
}

.clubSection .aboutBlock .progressBar {
    position: relative;
    height: 28px;
    margin-bottom: 10px;
    background: #191d25;
    border: 2px solid none
}

.clubSection .aboutBlock .progressBar.filled:after {
    border-color: #fdae05 transparent transparent
}

.clubSection .aboutBlock .progressBar.last:after {
    display: none
}

.clubSection .aboutBlock .progressBar>span {
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    color: #fff;
    font-size: 13px;
    background: #fdae05
}

.clubSection .aboutBlock .progressBar:before {
    left: 7px;
    border-color: #fdae05 transparent transparent
}

.clubSection .aboutBlock .progressBar:after {
    right: 7px;
    border-color: #191d25 transparent transparent
}

.clubSection .aboutBlock .progressBar:before,
.clubSection .aboutBlock .progressBar:after {
    position: absolute;
    bottom: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0;
    content: ""
}

.clubSection .aboutBlock .progressBar.empty>span {
    padding-left: 25px;
    background: 0 0
}

.clubSection .aboutBlock .progressBar.empty:before {
    border-color: #191d25 transparent transparent
}

.clubSection .aboutBlock .progressBar,
.clubSection .aboutBlock .progressBar>span {
    display: flex;
    border-radius: 3px;
    -webkit-user-select: none;
    user-select: none
}

.clubSection .aboutBlock .progressBottom {
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase
}

.clubSection .aboutBlock .progressBottom .item {
    display: flex;
    align-items: center
}

.clubSection .aboutBlock .progressBottom .item img {
    height: 13px;
    margin: 0 5px 0 0
}

.clubSection .caption {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase
}

.clubSection .caption:before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #303646;
    content: ""
}

.clubSection .caption span {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    background: #272d39;
    border-radius: 0
}

.clubSection .levelsContainer {
    display: flex;
    margin-bottom: 25px
}

.clubSection .levelsContainer .left {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 25px;
    padding: 20px;
    background: #2d3340;
    border-radius: 5px
}

.clubSection .levelsContainer .left .coinson {
    position: absolute;
    top: -90px;
    right: 45px;
    z-index: 100;
    width: 135px;
    height: auto
}

@media (max-width: 580px) {
    .clubSection .levelsContainer .left .coinson {
        top: -75px;
        right: 0;
        width: 104px
    }
}

.clubSection .levelsContainer .left .indent {
    width: 100%;
    margin-bottom: 15px
}

.clubSection .levelsContainer .left .indent .h2 {
    margin-bottom: 12px;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase
}

.clubSection .levelsContainer .left .indent .gray {
    color: #aab0bd
}

.clubSection .levelsContainer .right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    height: auto
}

.clubSection .levelsContainer .right .tabs {
    display: flex
}

.clubSection .levelsContainer .right .tabs .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.66%;
    border: 1px solid transparent;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    opacity: .5
}

.clubSection .levelsContainer .right .tabs .item:hover {
    opacity: 1
}

.clubSection .levelsContainer .right .tabs .item.active {
    border: 1px solid #343b48;
    border-bottom-color: #272d39;
    opacity: 1
}

.clubSection .levelsContainer .right .tabs .item img {
    height: 32px;
    margin: 8px 0 26px
}

@media (max-width: 500px) {
    .clubSection .levelsContainer .right .tabs .item img {
        height: 20px
    }
}

@media (max-width: 450px) {
    .clubSection .levelsContainer .right .tabs .item img {
        margin: 10px 0
    }
}

.clubSection .levelsContainer .right .tabs .item .name {
    position: absolute;
    bottom: 9px;
    font-size: 9px;
    white-space: nowrap;
    text-transform: uppercase
}

@media (max-width: 450px) {
    .clubSection .levelsContainer .right .tabs .item .name {
        display: none
    }
}

.clubSection .levelsContainer .right .content {
    margin-top: -1px;
    padding: 20px;
    border: 1px solid #343b48;
    border-radius: 0 0 5px 5px
}

.clubSection .levelsContainer .right .content .name {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase
}

.clubSection .levelsContainer .right .content .name.bronze {
    color: #ab5d30
}

.clubSection .levelsContainer .right .content .name.silver {
    color: #4d7bcd
}

.clubSection .levelsContainer .right .content .name.gold {
    color: #ffd40e
}

.clubSection .levelsContainer .right .content .name.platinum {
    color: #077cfc
}

.clubSection .levelsContainer .right .content .name.diamond {
    color: #7625f4
}

.clubSection .levelsContainer .right .content .name.elite {
    color: #ff3c38
}

.clubSection .levelsContainer .right .content .name img {
    height: 16px;
    margin: -2px 5px 0 0
}

.clubSection .levelsContainer .right .content .name span {
    text-transform: uppercase
}

.clubSection .levelsContainer .right .content .wagerNeed {
    margin-bottom: 15px;
    color: #aab0bd;
    font-size: 12px
}

.clubSection .levelsContainer .right .content .list {
    padding: 0;
    list-style: none
}

.clubSection .levelsContainer .right .content .list li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: #fff
}

.clubSection .levelsContainer .right .content .list li.disabled {
    opacity: .3
}

.clubSection .levelsContainer .right .content .list li .box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #3a404c
}

.clubSection .levelsContainer .right .content .list li .box svg {
    width: 9px;
    height: 9px
}

.clubSection .levelsContainer .right .content .list li .box svg.icon-close {
    width: 7px;
    height: 7px
}

.clubSection .levelsContainer .right .content .list li:last-child {
    margin-bottom: 0
}

.clubSection .levelsContainer .left,
.clubSection .levelsContainer .right {
    width: 50%
}

@media (max-width: 1200px) {
    .clubSection .levelsContainer {
        flex-direction: column
    }
    .clubSection .levelsContainer .left,
    .clubSection .levelsContainer .right {
        width: 100%;
        margin: 0
    }
    .clubSection .levelsContainer .left {
        margin-bottom: 25px
    }
}

@media (max-width: 450px) {
    .clubSection .levelsContainer .right .content {
        padding: 15px
    }
}

.clubSection .bonusList {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 25px);
    margin: 0 -12.5px 25px
}

.clubSection .bonusList .item {
    display: flex;
    align-items: stretch;
    width: 33.333%;
    padding: 0 12.5px
}

.clubSection .bonusList .item:first-child,
.clubSection .bonusList .item:nth-child(2),
.clubSection .bonusList .item:nth-child(3) {
    margin-bottom: 25px
}

.clubSection .bonusList .item .content {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 25px;
    overflow: hidden;
    background: #2e3542;
    border-radius: 4px;
    box-shadow: none
}

.clubSection .bonusList .item .content .image {
    position: absolute;
    top: 0;
    height: 100%;
    opacity: .5;
    -webkit-user-select: none;
    user-select: none
}

.clubSection .bonusList .item .content .image.small {
    left: 0
}

.clubSection .bonusList .item .content .image.big {
    right: 0
}

.clubSection .bonusList .item .content .image img {
    width: auto;
    height: 100%
}

.clubSection .bonusList .item .content .text {
    position: relative
}

.clubSection .bonusList .item .content .text .name {
    position: relative;
    display: flex;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase
}

.clubSection .bonusList .item .content .text .name .num {
    position: absolute;
    top: 50%;
    left: -4px;
    font-weight: 500;
    font-size: 46px;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: .2;
    -webkit-user-select: none;
    user-select: none
}

.clubSection .bonusList .item .content .text .description {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px
}

.clubSection .bonusList .item .content.blue {
    background-color: #e2a200
}

.clubSection .bonusList .item .content.purple {
    background-color: #d97529
}

.clubSection .bonusList .item .content.green {
    background-color: #c03633
}

.clubSection .bonusList .item .content.orange {
    background-color: #2c9632
}

.clubSection .bonusList .item .content.red {
    background-color: #fdae05
}

.clubSection .bonusList .item .content.cyan {
    background-color: #3e2b97
}

@media (max-width: 1300px) {
    .clubSection .bonusList .item {
        width: 50%;
        margin-bottom: 25px
    }
    .clubSection .bonusList .item .content {
        height: 130px;
        padding: 20px
    }
    .clubSection .bonusList .item .content .text .name {
        margin-bottom: 15px;
        padding-left: 30px;
        font-size: 16px
    }
    .clubSection .bonusList .item .content .text .name .num {
        font-size: 38px
    }
}

@media (max-width: 600px) {
    .clubSection .bonusList .item {
        width: 100%;
        margin-bottom: 20px !important
    }
    .clubSection .bonusList .item .content {
        height: auto
    }
    .clubSection .bonusList:last-child {
        margin-bottom: 0 !important
    }
}

.clubSection .becomeVip {
    position: relative;
    margin-top: 25px;
    color: inherit;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase
}

.clubSection .becomeVip .image {
    position: absolute
}

.clubSection .becomeVip .image1 {
    left: 16%
}

.clubSection .becomeVip .image2 {
    left: 3%
}

.clubSection .becomeVip .image3 {
    right: 3%
}

.clubSection .becomeVip .image4 {
    right: 16%
}

.clubSection .becomeVip .image1,
.clubSection .becomeVip .image4 {
    top: 5%;
    width: 72px
}

.clubSection .becomeVip .image2,
.clubSection .becomeVip .image3 {
    bottom: 0;
    width: 48px
}

.clubSection .becomeVip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 42px;
    margin: 15px auto 0;
    padding: 0 15px;
    font-weight: 300;
    text-transform: uppercase
}

@media (max-width: 1250px) {
    .clubSection .becomeVip .image1 {
        left: 12%
    }
    .clubSection .becomeVip .image2,
    .clubSection .becomeVip .image3 {
        width: 35px
    }
    .clubSection .becomeVip .image4 {
        right: 12%
    }
}

@media (max-width: 1050px) {
    .clubSection .becomeVip .image {
        display: none
    }
}

@media (max-width: 900px) {
    .clubSection {
        padding: 15px !important
    }
}

.rankCard {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%
}

.rankCard .cardHeader {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    width: 100%
}

.rankCard .cardHeader .cardHeaderIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background-color: red;
    border-radius: 100%
}

.rankCard .cardHeader .cardHeaderIcon svg {
    width: 1.75rem;
    height: 1.75rem
}

.rankCard .cardHeader .cardHeaderLine {
    height: .3rem;
    border-radius: 6px;
    width: 105%;
    margin-right: -8px;
    flex: 1;
    background-color: green
}

.rankCard .cardBody {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #00f;
    flex: 1;
    border-radius: 6px;
    width: 100%;
    height: 20rem;
    padding: 20px
}

.rankCard .cardBody .cardBodyLabel {
    width: -moz-fit-content;
    width: fit-content;
    padding: 2px 4px;
    border-radius: 6px
}

.rankCard .cardBody .cardBodyLabel span {
    text-align: left;
    justify-content: flex-start;
    font-weight: 400;
    align-items: center;
    display: inline-flex;
    font-size: 14px
}

.rankCard .cardBody .cardBodyAmount {
    display: flex;
    flex-direction: column
}

.rankCard .cardBody .cardBodyAmount .amount {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}

.rankCard .cardBody .cardBodyAmount .description {
    color: gray;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}

.rankCard .cardBody .cardBonusList {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.rankCard .cardBody .cardBonusList li {
    display: flex;
    align-items: center;
    gap: 4px
}

.rankCard .cardBody .cardBonusList li .bonusIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    border-radius: 100%
}

.rankCard .cardBody .cardBonusList li .bonusIcon svg {
    width: .75rem;
    height: .75rem
}

.rankCard .cardBody .cardBonusList li .bonusTitle {
    color: pink;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}

.confirmSection {
    position: relative
}

.confirmSection .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    height: 65vh;
    margin: auto;
    white-space: nowrap
}

.confirmSection .loader {
    height: 100px
}

.confirmSection .loader img {
    width: 80px;
    height: 80px
}

.confirmSection .text {
    font-size: 28px
}

.gameContentWrapper.mobile .contentWrapper .contentScroll {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    padding: 0;
    background: #1d1438
}

.gameContentWrapper.mobile .footer,
.gameContentWrapper.mobile .leftWrapperPadding,
.gameContentWrapper.mobile .rightWrapper {
    display: none
}

.gameContentWrapper.mobile .mainContainer .section {
    max-width: 100%;
    margin: 0 auto;
    padding: 0
}

@media (max-width: 900px) {
    .gameContentWrapper .footer,
    .gameMobileContentWrapper .footer {
        display: none
    }
}

.gameContentWrapper .gameWrapper,
.gameMobileContentWrapper .gameWrapper {
    width: 100%;
    height: auto;
    padding: 0;
    background-color: transparent;
    border-radius: 6px
}

.gameContentWrapper .gameWrapper .gameStats,
.gameMobileContentWrapper .gameWrapper .gameStats {
    left: 50%;
    display: flex;
    width: 100%;
    max-width: 300px;
    padding-top: 20px;
    background-color: #1d1438;
    border: 1px solid #653ba1;
    border-radius: 6px;
    transform: translate(-50%)
}

.gameContentWrapper .gameWrapper .gameStats .block,
.gameMobileContentWrapper .gameWrapper .gameStats .block {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    width: 50%;
    padding: 15px 0;
    overflow: hidden;
    text-align: center
}

.gameContentWrapper .gameWrapper .gameStats .block:nth-child(1),
.gameMobileContentWrapper .gameWrapper .gameStats .block:nth-child(1) {
    border-right: 1px solid red;
    border-bottom: 1px solid red;
    border-radius: 6px 0 0
}

.gameContentWrapper .gameWrapper .gameStats .block:nth-child(2),
.gameMobileContentWrapper .gameWrapper .gameStats .block:nth-child(2) {
    border-bottom: 1px solid red;
    border-radius: 0 6px 0 0
}

.gameContentWrapper .gameWrapper .gameStats .block:nth-child(3),
.gameMobileContentWrapper .gameWrapper .gameStats .block:nth-child(3) {
    border-right: 1px solid red;
    border-radius: 0 0 0 6px
}

.gameContentWrapper .gameWrapper .gameStats .block:nth-child(4),
.gameMobileContentWrapper .gameWrapper .gameStats .block:nth-child(4) {
    border-radius: 0 0 6px
}

.gameContentWrapper .gameWrapper .gameStats .block .num,
.gameMobileContentWrapper .gameWrapper .gameStats .block .num {
    color: #2dc53a;
    font-weight: 500;
    font-size: 16px
}

.gameContentWrapper .gameWrapper .gameStats .block .text,
.gameMobileContentWrapper .gameWrapper .gameStats .block .text {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase
}

.gameContentWrapper .gameWrapper .gameControls,
.gameMobileContentWrapper .gameWrapper .gameControls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 8px;
    background-color: #1d1438;
    border-radius: 0 0 8px 8px
}

@media (max-width: 600px) {
    .gameContentWrapper .gameWrapper .gameControls,
    .gameMobileContentWrapper .gameWrapper .gameControls {
        padding-top: 0
    }
}

.gameContentWrapper .gameWrapper .gameControls .logo,
.gameMobileContentWrapper .gameWrapper .gameControls .logo {
    max-height: 47px;
    cursor: auto;
    opacity: .1;
    filter: grayscale(1);
    transition: opacity .3s ease-in-out
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu {
    padding-right: 8px;
    border-right: 1px solid #653ba1
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency {
    position: relative
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency {
    display: inline-block;
    margin-top: 3px;
    padding: 7px;
    color: rgba(255, 255, 255, .804);
    font-weight: 600;
    font-size: 1rem;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: transparent !important;
    border: 0;
    border-radius: 4px;
    outline: none;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency:hover {
    color: #fff
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency:hover .opener svg,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency:hover .opener svg {
    fill: #fff !important
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent {
    display: flex;
    align-items: center
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .badge,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    color: #fff;
    font-size: 14px;
    background: #fdae05;
    border-radius: 3px
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .badge.wide,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .badge.wide {
    width: 30px
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener {
    top: 15px;
    right: 10px;
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener.open,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener svg,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .btnCurrency .currencyContent .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown {
    position: absolute;
    top: 100%;
    right: 15px;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 100px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown.open,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown.open {
    display: block
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:active,
.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:focus,
.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:active,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:focus,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:hover {
    background-color: #f1f1f1
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:first-child,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item>div,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item>div .badge,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item.active>div .badge,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown:before,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown:before {
    position: absolute;
    top: -8px;
    right: 12px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown,
    .gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
    .gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown:before,
    .gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameCurrency .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuList,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuList {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem {
    padding: 7px 14px;
    color: rgba(255, 255, 255, .804);
    transition: color .2s ease-in-out
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem a,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem a {
    color: rgba(255, 255, 255, .804)
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:hover {
    color: #fff;
    background-color: #653ba1;
    border-radius: 5px;
    transform: scale(1.2)
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:hover a,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:hover a {
    color: #fff
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:disabled,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:disabled {
    color: rgba(255, 255, 255, .804);
    opacity: .8
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:disabled:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem:disabled:hover {
    color: rgba(255, 255, 255, .804);
    cursor: not-allowed
}

.gameContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem.isFavorite,
.gameMobileContentWrapper .gameWrapper .gameControls .gameControlsMenu .gameControlsMenuItem.isFavorite {
    color: rgba(245, 73, 73, .84)
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons {
    display: flex;
    justify-content: center;
    margin-right: 5px
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper {
    display: flex;
    align-items: center
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span {
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease-in-out
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span:hover,
.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span.active,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper span.active {
    color: #fff
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox {
    position: relative;
    width: 35px;
    height: 13px;
    margin: 0 15px;
    background-color: #261a46;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox:not(.active):hover .gameCheckboxRound,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox:not(.active):hover .gameCheckboxRound {
    transform: translate(2px)
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active {
    background-color: #5cb503
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active .gameCheckboxRound,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active .gameCheckboxRound {
    transform: translate(19px)
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox .gameCheckboxRound,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox .gameCheckboxRound {
    position: absolute;
    top: -4px;
    left: -2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 5px;
    transform: translate(0);
    transition: transform .2s ease-in-out
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn {
    margin-right: 15px;
    padding: 5px 13px;
    font-size: 11px;
    letter-spacing: .28px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: none
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo {
    color: #000;
    background: #f11da9
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo:hover,
.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo:focus,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.demo:focus {
    background: #ff95b5
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.real,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.real {
    background: #ec193f
}

.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.real:hover,
.gameContentWrapper .gameWrapper .gameControls .gameButtons .btn.real:focus,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.real:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameButtons .btn.real:focus {
    background: #ff4b32
}

.gameContentWrapper .gameWrapper .gameControls .gameInfo svg,
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo svg {
    color: rgba(255, 255, 255, .804);
    transform: rotate(-90deg)
}

.gameContentWrapper .gameWrapper .gameControls .gameInfo svg:nth-last-child(2),
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo svg:nth-last-child(2) {
    color: #fff
}

.gameContentWrapper .gameWrapper .gameControls .gameInfo span,
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo span {
    position: relative;
    padding: 5px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    background-color: initial;
    border: 0;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.gameContentWrapper .gameWrapper .gameControls .gameInfo span:hover,
.gameContentWrapper .gameWrapper .gameControls .gameInfo span.gameName,
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo span:hover,
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo span.gameName {
    color: #fff
}

.gameContentWrapper .gameWrapper .gameControls .gameInfo span.gameName,
.gameMobileContentWrapper .gameWrapper .gameControls .gameInfo span.gameName {
    border-bottom: 1px solid #fdae05
}

.gameContentWrapper .gameWrapper .gameLogo,
.gameMobileContentWrapper .gameWrapper .gameLogo {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    padding: 10px 0;
    text-align: center
}

.gameContentWrapper .gameWrapper .gameLogo img,
.gameMobileContentWrapper .gameWrapper .gameLogo img {
    height: 100%
}

@media (min-width: 901px) {
    .gameContentWrapper .gameWrapper .gameLogo,
    .gameMobileContentWrapper .gameWrapper .gameLogo {
        display: none
    }
}

.gameContentWrapper .gameWrapper .gameBlock,
.gameMobileContentWrapper .gameWrapper .gameBlock {
    position: relative;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    overflow: hidden;
    background-color: #1d1438;
    border-radius: 8px 8px 0 0
}

@media (min-width: 601px) and (max-width: 900px) {
    .gameContentWrapper .gameWrapper .gameBlock,
    .gameMobileContentWrapper .gameWrapper .gameBlock {
        min-height: calc(100vh - 63px)
    }
}

@media (max-width: 900px) {
    .gameContentWrapper .gameWrapper .gameBlock,
    .gameMobileContentWrapper .gameWrapper .gameBlock {
        position: fixed;
        padding-bottom: 0;
        overflow: hidden
    }
}

@media (max-width: 600px) {
    .gameContentWrapper .gameWrapper .gameBlock,
    .gameMobileContentWrapper .gameWrapper .gameBlock {
        min-height: 100vh
    }
}

.gameContentWrapper .gameWrapper .gameBlock.mobile,
.gameMobileContentWrapper .gameWrapper .gameBlock.mobile {
    min-height: 100vh
}

.gameContentWrapper .gameWrapper .gameBlock .mobileOverlay,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    min-height: 483px;
    background-color: #1d1438;
    touch-action: none
}

.gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats {
    position: absolute;
    bottom: 90px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-top: 0
}

.gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite {
    cursor: pointer
}

.gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg {
    position: absolute;
    top: calc(100vh - 490px);
    left: 40%;
    width: 20%;
    height: 20%;
    color: rgba(255, 255, 255, .804)
}

@media (max-height: 483px) {
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg {
        top: 15px
    }
}

.gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite.active svg,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite.active svg {
    color: rgba(245, 73, 73, .84)
}

@media screen and (orientation: landscape) {
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay {
        display: flex
    }
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats {
        position: relative;
        bottom: 0;
        width: 50%;
        margin: auto 0
    }
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats .block,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .gameStats .block {
        border-right: 0;
        border-left: 0
    }
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite {
        width: 50%
    }
    .gameContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg,
    .gameMobileContentWrapper .gameWrapper .gameBlock .mobileOverlay .favorite svg {
        position: relative
    }
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer {
    position: absolute;
    top: 45px;
    z-index: 10;
    width: 60px;
    height: 100px;
    user-select: none;
    touch-action: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtn,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtn {
    position: fixed;
    top: 70px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 50px;
    padding: 5px;
    background-color: #ff902a;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtn a svg,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtn a svg {
    width: 22px;
    height: 22px;
    color: #fff
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats {
    position: fixed;
    top: 130px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 40px;
    height: 50px;
    padding: 5px;
    background-color: #75818c;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats.active,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats.active {
    background-color: #338500
}

.gameContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats svg,
.gameMobileContentWrapper .gameWrapper .gameBlock .mobileContainer .mobileBtnStats svg {
    width: 22px;
    height: 22px;
    color: #fff
}

.gameContentWrapper .gameWrapper .gameBlock iframe,
.gameContentWrapper .gameWrapper .gameBlock object,
.gameMobileContentWrapper .gameWrapper .gameBlock iframe,
.gameMobileContentWrapper .gameWrapper .gameBlock object {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none
}

.gameContentWrapper .gameDescription,
.gameMobileContentWrapper .gameDescription {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 20px auto 0;
    padding: 20px;
    background: #1d1438;
    border-radius: 10px
}

.gameContentWrapper .gameDescription .gameControls,
.gameMobileContentWrapper .gameDescription .gameControls {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding: 8px;
    background-color: #1d1438;
    border-radius: 0 0 8px 8px
}

@media (max-width: 600px) {
    .gameContentWrapper .gameDescription .gameControls,
    .gameMobileContentWrapper .gameDescription .gameControls {
        padding-top: 0
    }
}

.gameContentWrapper .gameDescription .gameControls .logo,
.gameMobileContentWrapper .gameDescription .gameControls .logo {
    max-height: 47px;
    cursor: auto;
    opacity: .1;
    filter: grayscale(1);
    transition: opacity .3s ease-in-out
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu {
    width: 100%;
    padding-right: 8px;
    border-right: 1px solid #653ba1
}

@media (max-width: 450px) {
    .gameContentWrapper .gameDescription .gameControls .gameControlsMenu,
    .gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu {
        overflow-x: auto;
        overflow-y: hidden
    }
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuList,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuList {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem {
    padding: 7px 14px;
    color: rgba(255, 255, 255, .804);
    transition: color .2s ease-in-out
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem a,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem a {
    color: rgba(255, 255, 255, .804)
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:hover {
    color: #fff;
    background-color: #653ba1;
    border-radius: 5px;
    transform: scale(1.2)
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:hover a,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:hover a,
.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem.active,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem.active {
    color: #fff
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem.isFavorite,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem.isFavorite {
    color: rgba(245, 73, 73, .84)
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:disabled,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:disabled {
    color: rgba(255, 255, 255, .804);
    opacity: .8
}

.gameContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:disabled:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameControlsMenu .gameControlsMenuItem:disabled:hover {
    color: rgba(255, 255, 255, .804);
    cursor: not-allowed
}

.gameContentWrapper .gameDescription .gameControls .gameButtons,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons {
    display: flex;
    justify-content: center;
    margin-right: 5px
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper {
    display: flex;
    align-items: center
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span {
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease-in-out
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span:hover,
.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span.active,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper span.active {
    color: #fff
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox {
    position: relative;
    width: 35px;
    height: 21px;
    margin: 0 8px;
    background-color: #261a46;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color .2s ease-in-out
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox:not(.active):hover .gameCheckboxRound,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox:not(.active):hover .gameCheckboxRound {
    transform: translate(2px)
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active {
    background-color: #5cb503
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active .gameCheckboxRound,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox.active .gameCheckboxRound {
    transform: translate(15px)
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox .gameCheckboxRound,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .gameCheckboxWrapper .gameCheckbox .gameCheckboxRound {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(0);
    transition: transform .2s ease-in-out
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .btn,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn {
    margin-right: 15px;
    padding: 5px 13px;
    font-size: 11px;
    letter-spacing: .28px;
    white-space: nowrap;
    text-transform: uppercase;
    box-shadow: none
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.demo,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.demo {
    color: #000;
    background: #f11da9
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.demo:hover,
.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.demo:focus,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.demo:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.demo:focus {
    background: #ff95b5
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.real,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.real {
    background: #ec193f
}

.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.real:hover,
.gameContentWrapper .gameDescription .gameControls .gameButtons .btn.real:focus,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.real:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameButtons .btn.real:focus {
    background: #ff4b32
}

.gameContentWrapper .gameDescription .gameControls .gameInfo svg,
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo svg {
    color: rgba(255, 255, 255, .804);
    transform: rotate(-90deg)
}

.gameContentWrapper .gameDescription .gameControls .gameInfo svg:nth-last-child(2),
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo svg:nth-last-child(2) {
    color: #fff
}

.gameContentWrapper .gameDescription .gameControls .gameInfo span,
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo span {
    position: relative;
    padding: 5px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    background-color: initial;
    border: 0;
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.gameContentWrapper .gameDescription .gameControls .gameInfo span:hover,
.gameContentWrapper .gameDescription .gameControls .gameInfo span.gameName,
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo span:hover,
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo span.gameName {
    color: #fff
}

.gameContentWrapper .gameDescription .gameControls .gameInfo span.gameName,
.gameMobileContentWrapper .gameDescription .gameControls .gameInfo span.gameName {
    border-bottom: 1px solid #fdae05
}

.gameContentWrapper .gameDescription.isLoading,
.gameMobileContentWrapper .gameDescription.isLoading {
    min-height: 250px
}

.gameContentWrapper .gameDescription.isLoading .loaderBlock,
.gameMobileContentWrapper .gameDescription.isLoading .loaderBlock {
    position: relative;
    height: 250px;
    overflow: hidden
}

.gameContentWrapper .gameDescription.mobileOverlay,
.gameMobileContentWrapper .gameDescription.mobileOverlay {
    position: absolute;
    top: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin-top: 0;
    overflow-y: scroll;
    background-color: #1d1438;
    border-radius: 0
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu {
    flex-direction: column;
    padding-left: 40px
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu .item,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu .item {
    margin-top: 10px;
    margin-left: 0
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu .item:first-child,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionMenu .item:first-child {
    margin-top: 0
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent {
    flex-direction: column;
    padding-top: 20px
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .image,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .image {
    max-width: 100%
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .image img,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .image img {
    width: 100%;
    max-width: 400px
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .description,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .description {
    flex-direction: column;
    margin-top: 20px;
    margin-left: 0;
    padding-bottom: 20px
}

.gameContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .withPager .list .item .itemHeader .item:first-child,
.gameMobileContentWrapper .gameDescription.mobileOverlay .gameDescriptionContent .withPager .list .item .itemHeader .item:first-child {
    display: none
}

.gameContentWrapper .gameDescription .title,
.gameMobileContentWrapper .gameDescription .title {
    font-weight: 500;
    font-size: 20px
}

.gameContentWrapper .gameDescription .gameDescriptionMenuScroll,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenuScroll {
    overflow-x: auto;
    overflow-y: hidden
}

.gameContentWrapper .gameDescription .gameDescriptionMenu,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu {
    display: flex;
    justify-content: flex-start;
    box-sizing: content-box;
    width: 100%;
    margin: 15px auto 15px 0;
    padding: 0;
    border-top: 1px solid #653ba1;
    border-bottom: 1px solid #653ba1;
    border-radius: 0
}

.gameContentWrapper .gameDescription .gameDescriptionMenu .item,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item {
    margin-bottom: -1px;
    margin-left: 25px;
    padding: 15px 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    text-transform: uppercase;
    background-color: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

.gameContentWrapper .gameDescription .gameDescriptionMenu .item:hover,
.gameContentWrapper .gameDescription .gameDescriptionMenu .item:focus,
.gameContentWrapper .gameDescription .gameDescriptionMenu .item:active,
.gameContentWrapper .gameDescription .gameDescriptionMenu .item.active,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item:hover,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item:focus,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item:active,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item.active {
    color: #fff;
    border-bottom: 1px solid #fdcd2d
}

.gameContentWrapper .gameDescription .gameDescriptionMenu .item:first-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item:first-child {
    margin-left: 0
}

.gameContentWrapper .gameDescription .gameDescriptionContent,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent {
    display: flex;
    margin-top: 10px
}

.gameContentWrapper .gameDescription .gameDescriptionContent.column,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent.column {
    flex-direction: column
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager {
    width: 100%;
    height: calc(100% - 95px)
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager.isLoading .list,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager.isLoading .list {
    pointer-events: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list {
    position: relative;
    min-height: 250px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list.isLoader,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list.isLoader {
    min-height: 500px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list.isLoader .loaderCentred,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list.isLoader .loaderCentred {
    position: absolute
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .empty,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: rgba(255, 255, 255, .804);
    font-size: 18px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .empty h4,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .empty h4 {
    font-size: 24px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .loaderBlock,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .loaderBlock .spinnerBlock,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #653ba1;
    transform: translateZ(0);
    transition: box-shadow 3ms, border-top-color .1s
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child {
    border-top: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child .itemHeader,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child .itemHeader {
    color: rgba(255, 255, 255, .804) !important
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child .itemHeader .item span,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item:first-child .itemHeader .item span {
    text-transform: uppercase
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    overflow: visible;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item {
    display: block;
    justify-content: center;
    width: 25%;
    text-align: center;
    border-top: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name {
    display: inline-flex;
    align-items: center;
    width: 100%;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name:hover,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name:hover {
    color: #fff
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name .rank,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name .rank {
    display: inline-block;
    margin-right: 10px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name .rank img,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name .rank img {
    width: 15px;
    height: 15px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name b,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .name b {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value.win,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value.win {
    color: #9327b0
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg {
    position: relative;
    top: 1px;
    margin-left: 2px
}

@media (max-width: 600px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value svg {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .value {
        font-size: 14px
    }
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item span,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item span {
    padding: 3px 8px;
    border-radius: 50px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .itemAmount,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item .itemAmount {
    overflow: hidden;
    text-overflow: ellipsis
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:first-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:first-child {
    justify-content: flex-start;
    text-align: left;
    text-overflow: ellipsis
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:last-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:last-child {
    justify-content: flex-end;
    text-align: right
}

@media (max-width: 550px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item {
        width: 50%
    }
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:nth-child(2),
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:nth-child(4),
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:nth-child(2),
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader .item:nth-child(4) {
        display: none
    }
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:active,
.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:focus,
.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:hover,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:active,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:focus,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemHeader:hover {
    border: 0;
    outline: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent {
    width: 100%;
    height: auto;
    max-height: 0;
    margin-left: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent.open,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent.open {
    max-height: 200px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul {
    padding: 15px 0;
    color: rgba(255, 255, 255, .804);
    list-style: none
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li {
    margin-bottom: 5px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span {
    display: inline-flex;
    align-items: center
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span svg,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span svg {
    margin: 3px 2px 0;
    font-size: .9em
}

.gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span:first-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul li span:first-child {
    margin-right: 5px;
    font-weight: 400
}

@media (max-width: 480px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent ul {
        padding: 0 10px 5px
    }
}

@media (max-width: 1100px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .withPager .list .item .itemContent {
        margin-left: -20px;
        font-size: 12px
    }
}

.gameContentWrapper .gameDescription .gameDescriptionContent .image,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .image {
    min-width: 200px;
    max-width: 200px;
    min-height: 260px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .image img,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .image img {
    position: relative;
    max-width: 100%;
    border-radius: 10px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .image img:before,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .image img:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: 132%;
    content: ""
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description {
    display: flex;
    flex-direction: column;
    margin-left: 20px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .rtp,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .rtp {
    display: flex;
    width: auto;
    margin-top: 10px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .rtp .inner,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .rtp .inner {
    width: auto;
    padding: 5px 0;
    color: #fff;
    border-radius: 10px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .text,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .text {
    color: #fff
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .text p,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .text p {
    margin-top: 10px;
    margin-bottom: 0
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item {
    margin-right: 10px;
    padding: 5px 15px;
    border: 1px solid #653ba1;
    border-radius: 10px;
    cursor: pointer
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item a,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item a {
    color: #fff
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:hover,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:focus,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:active,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item.active,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:hover,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:focus,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:active,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item.active {
    background-color: #653ba1
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:hover a,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:focus a,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:active a,
.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item.active a,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:hover a,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:focus a,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:active a,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item.active a {
    color: #fff
}

.gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:first-child,
.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item:first-child {
    margin-left: 0
}

@media (max-width: 600px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent .description .tags .item,
    .gameContentWrapper .gameDescription .gameDescriptionContent .description .tags a,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags .item,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .description .tags a {
        margin-bottom: 10px
    }
}

@media (max-width: 1260px) {
    .gameContentWrapper .gameDescription .gameDescriptionContent,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent {
        flex-direction: column
    }
    .gameContentWrapper .gameDescription .gameDescriptionContent .description,
    .gameMobileContentWrapper .gameDescription .gameDescriptionContent .description {
        margin-top: 20px;
        margin-left: 0
    }
}

.gameContentWrapper .gamesBoxOnGame,
.gameMobileContentWrapper .gamesBoxOnGame {
    margin: 20px 0 0
}

.gameContentWrapper .gamesBoxOnGame .providersBox .item,
.gameMobileContentWrapper .gamesBoxOnGame .providersBox .item {
    background-color: #1d1438
}

.gameContentWrapper .staticGameLoader .loaderBlock,
.gameMobileContentWrapper .staticGameLoader .loaderBlock {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #261a46
}

.gameContentWrapper .staticGameLoader .loaderBlock .spinnerBlock,
.gameMobileContentWrapper .staticGameLoader .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.gameMobileContentWrapper .footer {
    display: block !important
}

.gameMobileContentWrapper .gameCurrency {
    position: relative
}

.gameMobileContentWrapper .gameCurrency.full {
    margin-top: 10px;
    text-align: center
}

.gameMobileContentWrapper .gameCurrency .btnCurrency {
    display: inline-block;
    margin-top: 3px;
    padding: 7px;
    color: rgba(255, 255, 255, .804);
    font-weight: 600;
    font-size: 1rem;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: transparent !important;
    border: 0;
    border-radius: 4px;
    outline: none;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.gameMobileContentWrapper .gameCurrency .btnCurrency:hover {
    color: #fff
}

.gameMobileContentWrapper .gameCurrency .btnCurrency:hover .opener svg {
    fill: #fff !important
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent {
    display: flex;
    align-items: center
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    color: #fff;
    font-size: 14px;
    background: #fdae05;
    border-radius: 3px
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent .badge.wide {
    width: 36px
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent .opener {
    top: 15px;
    right: 10px;
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.gameMobileContentWrapper .gameCurrency .btnCurrency .currencyContent .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.gameMobileContentWrapper .gameCurrency .dropdown {
    position: absolute;
    top: 100%;
    right: 15px;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 100px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.gameMobileContentWrapper .gameCurrency .dropdown.open {
    display: block
}

.gameMobileContentWrapper .gameCurrency .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.gameMobileContentWrapper .gameCurrency .dropdown .item:active,
.gameMobileContentWrapper .gameCurrency .dropdown .item:focus,
.gameMobileContentWrapper .gameCurrency .dropdown .item:hover {
    background-color: #f1f1f1
}

.gameMobileContentWrapper .gameCurrency .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.gameMobileContentWrapper .gameCurrency .dropdown .item>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.gameMobileContentWrapper .gameCurrency .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.gameMobileContentWrapper .gameCurrency .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.gameMobileContentWrapper .gameCurrency .dropdown:before {
    position: absolute;
    top: -8px;
    right: 12px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .gameMobileContentWrapper .gameCurrency .dropdown {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
    .gameMobileContentWrapper .gameCurrency .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.gameMobileContentWrapper .playButtons {
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.gameMobileContentWrapper .playButtons>a,
.gameMobileContentWrapper .playButtons>button {
    flex: 0 1 49%
}

.gameMobileContentWrapper .playButtons button {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 1em;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    background: 0 0;
    border: none;
    border-radius: .25rem;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

.gameMobileContentWrapper .playButtons button.real {
    color: #013e01;
    background-color: #2dc53a
}

.gameMobileContentWrapper .playButtons button.real svg {
    margin-right: 7px
}

.gameMobileContentWrapper .playButtons button.demo {
    color: rgba(255, 255, 255, .804);
    border: 1px solid #653ba1
}

@media (max-width: 450px) {
    .gameMobileContentWrapper .playButtons {
        flex-direction: column
    }
    .gameMobileContentWrapper .playButtons a {
        width: 100%;
        margin-top: 15px
    }
    .gameMobileContentWrapper .playButtons a:last-child {
        margin-top: 15px
    }
}

.gameMobileContentWrapper .gameDescription {
    margin-top: 0 !important
}

.gameMobileContentWrapper .gameDescription .image {
    width: 49%;
    min-width: 150px;
    margin-top: 15px
}

.gameMobileContentWrapper .gameDescription .image img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px
}

.gameMobileContentWrapper .gameDescription .providerTitle {
    margin-top: 5px;
    font-weight: 500;
    font-size: 15px
}

.gameMobileContentWrapper .gameDescription .providerTitle a {
    color: rgba(255, 255, 255, .804) !important
}

.gameMobileContentWrapper .gameDescription .gameDescriptionMenu {
    flex-direction: column;
    width: 100% !important;
    margin: 15px 0 0 !important;
    padding: 0 !important;
    background: none !important
}

.gameMobileContentWrapper .gameDescription .gameDescriptionMenu .item {
    margin-left: 0 !important;
    border-radius: 8px !important
}

.gameMobileContentWrapper .gameDescription .gameDescriptionContent .description {
    margin-top: 10px !important;
    margin-left: 0 !important
}

.gameMobileContentWrapper .gameControls {
    margin-top: 15px !important;
    padding: 5px !important;
    background-color: #442176 !important;
    border-radius: 8px !important
}

.gameMobileContentWrapper .gameControls .gameControlsMenu {
    border-right: none !important
}

.gameMobileContentWrapper .gameDescriptionContent .image {
    display: none
}

main {
    max-width: 100% !important;
    height: 100%
}

.sportSection {
    max-width: 100% !important;
    height: 100%
}

.sportSection .gameWrapper {
    height: 100% !important
}

.sportSection .gameWrapper .gameBlock {
    height: 100%;
    overflow: hidden
}

.sportSection iframe {
    height: auto;
    border: none
}

.gameControlsTooltip [class*=bootstrap_tooltip-inner] {
    max-width: none;
    padding: 12px 16px;
    color: #000;
    font-weight: 500;
    font-size: 14px;
    background-color: #fff
}

.gameControlsTooltip [class*=bootstrap_show] {
    opacity: 1
}

.gameControlsTooltip [class*=bootstrap_arrow]:before {
    border-top-color: #fff !important
}

.gameInfoContentWrapper .gameInfoWrapper {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px
}

.gameInfoContentWrapper .gameInfoWrapper .left {
    width: 59%
}

.gameInfoContentWrapper .gameInfoWrapper .left .main {
    position: relative;
    padding: 2rem 1.875rem;
    overflow: hidden;
    color: rgba(255, 255, 255, .5);
    background-color: #1c1e22;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: .125rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .background {
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    padding-top: 55%;
    overflow: hidden
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer {
    position: relative;
    z-index: 9
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: .625rem 0
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader img {
    width: 10rem;
    margin-right: 1.4375rem;
    border-radius: .125rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .name .text {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: 1.75rem;
    line-height: 2rem;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .name .btn {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    margin-left: auto;
    color: #fff
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: auto;
    padding-top: .5rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info .provider a {
    color: #fff
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info .provider a:hover {
    color: #79a6f8
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info .extras {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: auto;
    text-align: center
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info .extras .item {
    display: flex;
    flex-direction: column;
    width: 60px;
    margin-right: 10px
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .gameHeader .description .info .extras .item:last-child {
    margin-right: 0
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .contentDescription {
    margin-top: 20px
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .contentDescription .title {
    color: #fff;
    font-size: 16px
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .contentDescription .text {
    margin-top: 20px;
    color: #fff;
    line-height: 21px
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .preview {
    position: relative;
    z-index: 1;
    -webkit-flex: auto;
    -ms-flex: auto;
    flex: auto;
    margin: 56px 0 0;
    padding-bottom: 20px
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .preview .header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify
}

.gameInfoContentWrapper .gameInfoWrapper .left .main .gameContainer .preview .header .title {
    margin-right: auto;
    font-size: 1.125rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .main:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(28, 30, 34, .24), rgba(30, 32, 36, .58) 38%, rgba(30, 32, 36, .94) 84.85%);
    content: ""
}

.gameInfoContentWrapper .gameInfoWrapper .left .gameInfo {
    margin-top: 20px
}

.gameInfoContentWrapper .gameInfoWrapper .left .gameInfo .title {
    margin-bottom: .625rem;
    color: #fff;
    font-size: 1.25rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .gameInfo .list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -.125rem
}

.gameInfoContentWrapper .gameInfoWrapper .left .gameInfo .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    min-width: 35%;
    margin: .125rem .0625rem 0;
    padding: 1rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify
}

@media (max-width: 1500px) {
    .gameInfoContentWrapper .gameInfoWrapper .left {
        width: 100%
    }
}

.gameInfoContentWrapper .gameInfoWrapper .right {
    width: 39%
}

@media (max-width: 1500px) {
    .gameInfoContentWrapper .gameInfoWrapper .right {
        width: 100%
    }
}

@media (max-width: 1500px) {
    .gameInfoContentWrapper .gameInfoWrapper {
        flex-direction: column
    }
}

.fairContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.fairContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.fairContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.fairContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.fairContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.fairContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.fairContainer .fairBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.fairContainer .fairBlock p {
    font-size: 16px
}

.fairContainer .fairBlock p:first-child {
    margin-top: 20px
}

.fairContainer .fairBlock p.license {
    color: rgba(255, 255, 255, .804)
}

@media (max-width: 1100px) {
    .fairContainer .fairBlock p {
        font-size: 14px
    }
}

@media (max-width: 520pxpx) {
    .fairContainer .fairBlock p {
        font-size: 13px
    }
}

.fairContainer .fairBlock .fairCheckBlock {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    margin: 20px auto 30px;
    padding: 32px 0 19px;
    color: #fff;
    border-radius: 8px
}

.fairContainer .fairBlock .fairCheckBlock .col {
    position: relative;
    padding: 0 28px
}

.fairContainer .fairBlock .fairCheckBlock .col:first-child {
    text-align: right
}

.fairContainer .fairBlock .fairCheckBlock .col:first-child:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #fff;
    opacity: .12;
    content: ""
}

.fairContainer .fairBlock .fairCheckBlock .col:first-child .title {
    justify-content: flex-end
}

.fairContainer .fairBlock .fairCheckBlock .col:first-child .title:after {
    right: 0
}

.fairContainer .fairBlock .fairCheckBlock .col:last-child {
    text-align: left
}

.fairContainer .fairBlock .fairCheckBlock .col:last-child .title .text {
    max-width: 205px;
    color: #fdcd2d
}

.fairContainer .fairBlock .fairCheckBlock .col:last-child .list .item:before {
    background: transparent;
    content: counter(item, decimal-leading-zero) " ";
    counter-increment: item
}

.fairContainer .fairBlock .fairCheckBlock .col .title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin-bottom: 10px;
    padding-bottom: 10px
}

.fairContainer .fairBlock .fairCheckBlock .col .title .text {
    color: #fff;
    font-size: 16px;
    line-height: 1.5
}

.fairContainer .fairBlock .fairCheckBlock .col .title:after {
    position: absolute;
    bottom: 0;
    width: 220px;
    height: 1px;
    background: rgba(255, 255, 255, .12);
    content: ""
}

.fairContainer .fairBlock .fairCheckBlock .col .btnTitle {
    position: relative;
    width: 100%;
    padding: 250px 0 12px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: transparent;
    opacity: .7
}

.fairContainer .fairBlock .fairCheckBlock .col .btnTitle:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, .24);
    content: ""
}

.fairContainer .fairBlock .fairCheckBlock .col .btnTitle.active {
    opacity: 1
}

.fairContainer .fairBlock .fairCheckBlock .col .btnTitle.active:after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #f11da9;
    content: ""
}

@media (min-width: 521px) {
    .fairContainer .fairBlock .fairCheckBlock .col .btnTitle {
        display: none
    }
}

@media (max-width: 360px) {
    .fairContainer .fairBlock .fairCheckBlock .col .btnTitle {
        font-size: 13px;
        line-height: 21px
    }
}

.fairContainer .fairBlock .fairCheckBlock .col .list {
    max-width: 260px;
    counter-reset: item
}

.fairContainer .fairBlock .fairCheckBlock .col .list .item {
    position: relative;
    display: flex;
    align-items: center;
    height: 55px;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    transition: color .3s
}

.fairContainer .fairBlock .fairCheckBlock .col .list .item:not(:last-child) {
    margin-bottom: 24px
}

.fairContainer .fairBlock .fairCheckBlock .col .list .item:before {
    position: absolute;
    top: 50%;
    left: -36px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    background: #653ba1;
    transform: translateY(-50%);
    mix-blend-mode: luminosity
}

.fairContainer .fairBlock .fairCheckBlock .col .list .item:after {
    position: absolute;
    top: 50%;
    left: -34px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    content: ""
}

@media (max-width: 1099px) {
    .fairContainer .fairBlock .fairCheckBlock {
        margin-bottom: 24px;
        padding: 230px 0 30px;
        background-position: 50% 0;
        border-radius: 13px
    }
}

@media (max-width: 520px) {
    .fairContainer .fairBlock .fairCheckBlock {
        margin: 15px 0 28px;
        padding: 0 0 10px;
        overflow: hidden;
        background-color: #1d1438;
        background-image: none;
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: contain
    }
    .fairContainer .fairBlock .fairCheckBlock:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: cover;
        content: ""
    }
    .fairContainer .fairBlock .fairCheckBlock .col {
        flex-basis: 50%;
        max-width: 50%;
        padding: 0
    }
    .fairContainer .fairBlock .fairCheckBlock .col:first-child,
    .fairContainer .fairBlock .fairCheckBlock .col:last-child {
        text-align: center
    }
    .fairContainer .fairBlock .fairCheckBlock .col:first-child:before {
        display: none
    }
    .fairContainer .fairBlock .fairCheckBlock .col:first-child .list.active {
        display: block;
        width: 200%;
        max-width: 200%;
        margin-left: 0;
        padding-top: 24px;
        text-align: left
    }
    .fairContainer .fairBlock .fairCheckBlock .col:first-child .list .item:before {
        background: url(https://cdn.friends-casino.io/assets/svg/Fair/false.svg);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }
    .fairContainer .fairBlock .fairCheckBlock .col:last-child .list.active {
        display: block;
        max-width: 200%;
        margin-left: -100%;
        padding-top: 24px;
        text-align: left
    }
    .fairContainer .fairBlock .fairCheckBlock .col:last-child .list .item:before {
        background: url(https://cdn.friends-casino.io/assets/svg/Fair/true.svg);
        background-repeat: no-repeat;
        background-size: cover;
        content: ""
    }
    .fairContainer .fairBlock .fairCheckBlock .col .title {
        display: none
    }
    .fairContainer .fairBlock .fairCheckBlock .col .list {
        display: none;
        max-width: 100%;
        padding-top: 24px;
        text-align: left
    }
    .fairContainer .fairBlock .fairCheckBlock .col .list .item {
        height: auto !important;
        padding: 0 15px 10px 54px
    }
    .fairContainer .fairBlock .fairCheckBlock .col .list .item:before {
        top: 0;
        left: 16px;
        width: 24px;
        height: 24px;
        transform: none;
        opacity: 1;
        mix-blend-mode: normal;
        content: ""
    }
    .fairContainer .fairBlock .fairCheckBlock .col .list .item:not(:last-child) {
        margin-bottom: 12px
    }
    .fairContainer .fairBlock .fairCheckBlock .col .list .item:not(:last-child):after {
        top: auto;
        right: 0;
        bottom: 0;
        left: 56px;
        width: auto;
        height: 1px;
        background: rgba(255, 255, 255, .12);
        transform: none;
        mix-blend-mode: normal
    }
}

@media (max-width: 900px) {
    .fairContainer {
        padding: 15px
    }
    .fairContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .fairContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .fairContainer .headerBlock .info {
        font-size: 13px
    }
}

.helpContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.helpContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.helpContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.helpContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.helpContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.helpContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.helpContainer .helpBlock {
    margin-top: 20px;
    color: inherit
}

.helpContainer .helpBlock .caption {
    position: relative;
    display: flex;
    align-items: center;
    margin: 25px 0;
    padding-left: 16px;
    font-weight: 400;
    font-size: 17px
}

.helpContainer .helpBlock .caption:first-child {
    margin-top: 0
}

.helpContainer .helpBlock .caption .badge {
    margin-top: 2px;
    margin-left: 10px;
    padding: 2px 6px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    background: #442176;
    border-radius: 3px
}

@media (min-width: 769px) {
    .helpContainer .helpBlock .caption:before {
        position: absolute;
        left: 1px;
        width: 8px;
        height: 2px;
        background: #fff;
        content: ""
    }
}

@media (max-width: 768px) {
    .helpContainer .helpBlock .caption {
        padding-left: 0;
        font-size: 16px
    }
    .helpContainer .helpBlock .caption:first-child span {
        display: none
    }
    .helpContainer .helpBlock .caption:first-child .badge {
        margin-left: 0
    }
}

.helpContainer .helpBlock .feedback {
    display: flex
}

.helpContainer .helpBlock .feedback .item {
    width: 50%;
    margin: 0 15px 0 0
}

.helpContainer .helpBlock .feedback .item .feedbackContent {
    position: relative;
    display: flex;
    padding: 15px 20px;
    font-size: 14px;
    border: 2px solid #ff902a;
    border-radius: 6px
}

.helpContainer .helpBlock .feedback .item .feedbackContent .feedbackIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    padding-right: 18px;
    font-size: 32px;
    border-right: 1px solid #442176
}

.helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper {
    padding-right: 41px;
    color: rgba(255, 255, 255, .804)
}

.helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper .title {
    margin-bottom: 3px;
    color: #fff;
    font-weight: 400;
    font-size: 15px
}

.helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper a,
.helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper button {
    display: inline-block;
    margin-bottom: 3px;
    color: #ff902a;
    font-size: 15px;
    border-bottom: 1px solid transparent
}

.helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper div {
    white-space: nowrap;
    text-overflow: ellipsis
}

.helpContainer .helpBlock .feedback .item .feedbackContent .arrow {
    position: absolute;
    top: 50%;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: #442176;
    border: 0;
    border-radius: 3px;
    outline: none;
    transform: translateY(-50%);
    cursor: pointer
}

.helpContainer .helpBlock .feedback .item .feedbackContent .arrow svg {
    width: 15px;
    height: 15px;
    transform: rotate(-180deg);
    fill: #fff
}

.helpContainer .helpBlock .feedback .item .feedbackContent .arrow:hover {
    background: #ff902a
}

@media (max-width: 1360px) {
    .helpContainer .helpBlock .feedback .item .feedbackContent {
        padding: 15px
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent .feedbackIcon {
        display: none
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper {
        padding-right: 0
    }
}

@media (max-width: 768px) {
    .helpContainer .helpBlock .feedback {
        flex-direction: column
    }
    .helpContainer .helpBlock .feedback .item {
        width: 100%;
        margin: 0 0 15px
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent {
        padding: 20px
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent .feedbackIcon {
        display: flex
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent .textWrapper {
        padding-right: 41px
    }
    .helpContainer .helpBlock .feedback .item .feedbackContent .arrow {
        right: 20px
    }
}

@media (max-width: 500px) {
    .helpContainer .helpBlock .feedback .item .feedbackContent .feedbackIcon {
        display: none
    }
}

.helpContainer .helpBlock .collapseBlock {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #653ba1;
    border-radius: 6px
}

.helpContainer .helpBlock .collapseBlock .top {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer
}

.helpContainer .helpBlock .collapseBlock .top:hover,
.helpContainer .helpBlock .collapseBlock .top:focus {
    color: #fff
}

.helpContainer .helpBlock .collapseBlock .top .btn {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0 15px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px;
    text-align: left
}

.helpContainer .helpBlock .collapseBlock .top .after {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    transition: all .3s;
    pointer-events: none;
    fill: #fff
}

.helpContainer .helpBlock .collapseBlock .top .after svg {
    width: 100%;
    height: 100%
}

.helpContainer .helpBlock .collapseBlock .collapse {
    height: auto;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height .35s ease
}

.helpContainer .helpBlock .collapseBlock .collapse:not(.open) {
    max-height: 0
}

.helpContainer .helpBlock .collapseBlock .collapse .collapseContent {
    padding: 15px
}

.helpContainer .helpBlock .collapseBlock .collapse .collapseContent .green {
    color: #5cb503
}

.helpContainer .helpBlock .collapseBlock.open .top {
    border-radius: 6px 6px 0 0
}

.helpContainer .helpBlock .collapseBlock.open .top .btn {
    color: #fff;
    border-bottom: 1px solid #653ba1;
    border-radius: 6px 6px 0 0
}

.helpContainer .helpBlock .collapseBlock.open .top .after {
    transform: translateY(-50%) rotate(-180deg)
}

@media (max-width: 900px) {
    .helpContainer {
        padding: 15px
    }
    .helpContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .helpContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .helpContainer .headerBlock .info {
        font-size: 13px
    }
}

.logSection {
    padding-bottom: 0
}

.logSection .profileHead {
    padding: 25px;
    background: #442176;
    border-radius: 5px 5px 0 0
}

.logSection .profileHead .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    font-size: 18px;
    text-align: center
}

.logSection .profileHead .loaderBlock .spinnerBlock {
    position: absolute;
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.logSection .profileHead .headBlock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px
}

.logSection .profileHead .headBlock .avatar {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    padding: 8px;
    overflow: hidden;
    background: #653ba1;
    border-radius: 10px
}

.logSection .profileHead .headBlock .avatar>div {
    width: 100% !important;
    height: 100% !important;
    font-family: Rubik, Arial, sans-serif
}

.logSection .profileHead .headBlock .user {
    display: inline;
    margin-bottom: 0;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    white-space: nowrap
}

.logSection .profileHead .headBlock .user.hasBadge {
    position: relative
}

.logSection .profileHead .headBlock .user .badge {
    position: absolute;
    top: 50%;
    margin-left: -1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.logSection .profileHead .headBlock .user .badge>div:first-child {
    display: flex;
    align-items: center;
    width: 15px;
    height: 15px
}

.logSection .profileHead .headBlock .user .badge>div:first-child img,
.logSection .profileHead .headBlock .user .badge>div:first-child svg {
    display: block
}

.logSection .profileHead .headBlock .user .text {
    padding-left: 20px
}

.logSection .profileHead .headBlock .date {
    margin-top: 2px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-align: center
}

.logSection .profileHead .statsBlock {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0 0
}

.logSection .profileHead .statsBlock .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    margin-right: 15px;
    padding: 12px 5px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #653ba1;
    border-radius: 6px
}

.logSection .profileHead .statsBlock .item .label {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 2px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: .85em;
    text-transform: uppercase
}

@media (max-width: 360px) {
    .logSection .profileHead .statsBlock .item .label {
        font-size: .75em
    }
}

.logSection .profileHead .statsBlock .item .value {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff902a;
    font-weight: 500;
    font-size: 16px
}

.logSection .profileHead .statsBlock .item .value.positive {
    color: #5cb503 !important
}

.logSection .profileHead .statsBlock .item .value.neutral {
    color: #ff902a !important
}

.logSection .profileHead .statsBlock .item .value svg {
    position: relative;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    margin-right: 3px
}

@media (max-width: 700px) {
    .logSection .profileHead {
        padding: 20px 10px 10px
    }
    .logSection .profileHead .statsBlock {
        flex-wrap: wrap
    }
    .logSection .profileHead .statsBlock .item {
        width: calc(50% - 10px);
        margin: 5px
    }
}

@media (max-width: 400px) {
    .logSection .profileHead .statsBlock .item .label {
        max-width: 125px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis
    }
    .logSection .profileHead .statsBlock .item .value {
        font-size: 13px
    }
    .logSection .profileHead .statsBlock .item .value svg {
        top: 0;
        width: 11px;
        height: 11px;
        margin-right: 3px
    }
}

.logSection .profileBody {
    background: #1d1438
}

.logSection .logContainer {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width: 1124px) {
    .logSection .logContainer {
        flex-direction: column
    }
}

@media (max-width: 900px) {
    .logSection .logContainer {
        padding-bottom: 0
    }
}

.logSection .logContainer .logComponent {
    width: 100%;
    height: 100%;
    color: #fff;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

@media (max-width: 1124px) {
    .logSection .logContainer .logComponent {
        width: 100%
    }
}

.logSection .logContainer .logComponent .logNav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    background: #2d3340;
    border-radius: 5px 5px 0 0
}

.logSection .logContainer .logComponent .logNav .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase;
    background: transparent;
    border-radius: 100px
}

.logSection .logContainer .logComponent .logNav .btn:not(.active):hover {
    color: #fff
}

.logSection .logContainer .logComponent .logNav .btn.active {
    color: #fff;
    background: #ff902a
}

@media (max-width: 600px) {
    .logSection .logContainer .logComponent .logNav .btn {
        height: 32px;
        margin: 0;
        font-size: 12px
    }
}

.logSection .logContainer .logComponent .logWrapper {
    position: relative;
    height: calc(100% - 100px);
    min-height: 320px;
    padding: 15px 25px 0
}

.logSection .logContainer .logComponent .logWrapper .withPager {
    height: calc(100% - 95px);
    overflow: hidden
}

.logSection .logContainer .logComponent .logWrapper .withPager.isLoading tbody {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    pointer-events: none
}

.logSection .logContainer .logComponent .logWrapper .withPager .list {
    position: relative;
    height: 100%
}

.logSection .logContainer .logComponent .logWrapper .withPager .list.isLoader {
    min-height: 500px
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    font-size: 18px
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .empty h4 {
    font-size: 24px
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable {
    width: 100%;
    color: #fff;
    border-collapse: initial;
    border-spacing: 0
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable tr:last-child td {
    border-bottom: none
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th {
    width: 20%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:first-child {
    text-align: left
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:last-child {
    text-align: right
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value svg {
    margin-bottom: 2px;
    margin-left: 7px;
    font-size: 14px;
    fill: rgba(255, 255, 255, .804)
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td {
    width: 20%;
    height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    border-bottom: 1px solid #653ba1
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:first-child svg {
    margin-bottom: 2px;
    margin-left: 5px
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td svg {
    margin-right: 3px;
    color: rgba(255, 255, 255, .804);
    font-size: inherit
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.default {
    color: rgba(255, 255, 255, .804)
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.positive {
    color: #87d010
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.positive svg {
    color: #87d010
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:first-child {
    text-align: left
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:last-child {
    text-align: right
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.date {
    display: inline-block;
    text-align: center
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system {
    display: flex;
    align-items: center
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover {
    display: flex;
    align-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover .icon {
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: 4px;
    text-align: center;
    background: transparent;
    cursor: pointer
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover .icon svg {
    display: block;
    width: 13px;
    height: 13px
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th {
        padding: 0 10px
    }
}

@media (max-width: 500px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .value,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
        font-size: 12px
    }
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .value svg,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value svg {
        height: 13px
    }
}

@media (max-width: 370px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .value,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
        font-size: 11px
    }
}

@media (max-width: 350px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .value,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
        font-size: 10px
    }
}

@media (max-width: 335px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .value,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
        font-size: 9px
    }
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll {
    overflow-x: scroll
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable {
    width: 100%;
    color: #fff;
    border-collapse: initial;
    border-spacing: 0
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
    width: 25%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:first-child {
    text-align: left
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:last-child {
    text-align: right
}

@media (max-width: 800px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(2) {
        text-align: center
    }
}

@media (max-width: 500px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(2) {
        text-align: right
    }
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(3) {
        display: none
    }
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td {
    width: 25%;
    height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    border-bottom: 1px solid #653ba1
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:first-child svg {
    margin-bottom: 2px;
    margin-left: 5px
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td svg {
    margin-right: 3px;
    color: rgba(255, 255, 255, .804);
    font-size: inherit
}

@media (max-width: 800px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(1) {
        text-align: left
    }
}

@media (max-width: 500px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(3) {
        display: none
    }
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(2) {
        text-align: right
    }
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.default {
    color: rgba(255, 255, 255, .804)
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.positive {
    color: #87d010
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:first-child {
    text-align: left
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:last-child {
    text-align: right
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.date {
    display: inline-block;
    text-align: center
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system {
    display: flex;
    align-items: center
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover {
    display: flex;
    align-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover .icon {
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: 4px;
    text-align: center;
    background: transparent;
    cursor: pointer
}

.logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover .icon svg {
    display: block;
    width: 13px;
    height: 13px
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
        padding: 0 10px
    }
}

@media (max-width: 400px) {
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td,
    .logSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
        font-size: 12px
    }
}

.logSection .logContainer .logComponent .logWrapper .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    list-style: none
}

.logSection .logContainer .logComponent .logWrapper .pager .inputBlock {
    display: flex;
    align-items: center
}

.logSection .logContainer .logComponent .logWrapper .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #8e80b8;
    line-height: 1.25;
    background: none;
    border: 1px solid #8e80b8;
    border-radius: 5px;
    cursor: pointer
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn:hover {
    color: #261a46;
    background: #fdcd2d
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.logSection .logContainer .logComponent .logWrapper .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper .pager {
        padding: 15px
    }
}

@media (max-width: 900px) {
    .logSection .logContainer .logComponent .logWrapper {
        padding: 15px 0 0
    }
}

.loyaltyContainer {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    background: #442176;
    border-radius: 6px
}

.loyaltyContainer .headerBlock {
    position: relative;
    margin: -30px -30px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #3d1d6a;
    border-radius: 6px 6px 0 0
}

.loyaltyContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.loyaltyContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.loyaltyContainer .headerBlock .info {
    position: relative;
    color: #fff;
    font-weight: 400;
    font-size: 15px
}

.loyaltyContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .03);
    transform: rotate(25deg);
    content: ""
}

.loyaltyContainer .loaderBlock {
    display: block;
    height: 500px
}

.loyaltyContainer .loaderBlock .loaderCentred {
    position: relative
}

.loyaltyContainer .navBlock {
    display: flex;
    justify-content: center;
    box-sizing: content-box;
    width: 100%;
    margin: 10px auto 45px 0;
    padding: 0;
    border-bottom: 1px solid #3d1d6a;
    border-radius: 0
}

.loyaltyContainer .navBlock .btn {
    margin-bottom: -1px;
    margin-left: 25px;
    padding: 15px 0;
    color: rgba(255, 255, 255, .49);
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out
}

.loyaltyContainer .navBlock .btn:first-child {
    margin-left: 0
}

.loyaltyContainer .navBlock .btn:hover,
.loyaltyContainer .navBlock .btn:focus,
.loyaltyContainer .navBlock .btn.active {
    color: #eee;
    border-bottom: 1px solid #fdae05
}

.loyaltyContainer .withPager {
    height: calc(100% - 95px)
}

.loyaltyContainer .withPager.isLoading .list {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    pointer-events: none
}

.loyaltyContainer .withPager .list {
    position: relative;
    min-height: 250px
}

.loyaltyContainer .withPager .list.isLoader {
    min-height: 500px
}

.loyaltyContainer .withPager .list.isLoader .loaderCentred {
    position: absolute
}

.loyaltyContainer .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: rgba(255, 255, 255, .49);
    font-size: 18px
}

.loyaltyContainer .withPager .list .empty h4 {
    font-size: 24px
}

.loyaltyContainer .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.loyaltyContainer .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.loyaltyContainer .withPager .list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #653ba1;
    transform: translateZ(0);
    transition: box-shadow 3ms, border-top-color .1s
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemLeft .itemAmount span {
    z-index: 1;
    color: rgba(255, 255, 255, .49);
    font-size: 14px;
    text-transform: uppercase
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemLeft .itemAmount span svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .49)
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemDate span {
    z-index: 1;
    color: rgba(255, 255, 255, .49);
    font-size: 14px;
    text-transform: uppercase
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemDate span svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .49)
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemRight .itemInfo {
    margin-left: 0
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemRight .itemInfo .infoCaption {
    z-index: 1;
    color: rgba(255, 255, 255, .49);
    font-size: 14px;
    text-transform: uppercase
}

.loyaltyContainer .withPager .list .item.headItem .itemHeader .itemRight .itemInfo .infoCaption svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .49)
}

.loyaltyContainer .withPager .list .item.logItem .itemHeader .itemRight .itemInfo {
    margin-left: 0
}

.loyaltyContainer .withPager .list .item.logItem .itemHeader .itemRight .itemInfo .infoCaption {
    font-size: 14px
}

.loyaltyContainer .withPager .list .item .itemHeader {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    overflow: visible;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.loyaltyContainer .withPager .list .item .itemHeader:active,
.loyaltyContainer .withPager .list .item .itemHeader:focus,
.loyaltyContainer .withPager .list .item .itemHeader:hover {
    border: 0;
    outline: none
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight,
.loyaltyContainer .withPager .list .item .itemHeader .itemLeft {
    display: flex;
    align-items: center
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemAvatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemAvatar img {
    width: 100%;
    height: 100%;
    border-radius: 5px
}

@media (max-width: 1050px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemAvatar {
        width: 35px;
        height: 35px;
        margin-right: 8px
    }
}

@media (max-width: 950px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemAvatar {
        display: none
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
    display: block;
    overflow: hidden;
    color: #fff;
    line-height: 1.5;
    white-space: nowrap
}

@media (max-width: 480px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
        font-size: 14px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
    display: block;
    max-width: 480px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .5
}

@media (max-width: 1100px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 12px
    }
}

@media (max-width: 600px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 11px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: right
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
    display: flex;
    align-items: center;
    color: #fff;
    white-space: nowrap
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value.win {
    color: #2dc53a
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
    position: relative;
    top: 1px;
    margin-left: 2px
}

@media (max-width: 600px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
        font-size: 14px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus {
    display: flex;
    justify-content: flex-end;
    width: 200px;
    margin-left: auto;
    color: #fff
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus>span {
    padding: 0 5px
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-left: auto
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 130px;
    height: 34px;
    margin-left: auto;
    text-align: center;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 34px;
    cursor: default
}

@media (max-width: 450px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus button {
        font-size: 12px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .success {
    color: #2dc53a;
    background-color: rgba(98, 202, 91, .1)
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .canceled {
    color: #efde5c;
    background-color: rgba(202, 174, 91, .1)
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .waiting {
    color: #fdae05;
    background-color: rgba(91, 153, 202, .1)
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .error {
    color: #efde5c;
    background-color: rgba(202, 174, 91, .1)
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel {
    z-index: 1;
    color: #615918;
    background-color: #f5e249;
    cursor: pointer
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel:hover,
.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel:focus {
    background-color: #e4d345
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .btnStatus .cancel svg {
    position: relative;
    margin-right: 8px;
    font-size: .8em
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn {
    display: flex;
    justify-content: flex-end;
    margin-left: auto
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer {
    position: relative;
    display: flex;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #fdae05;
    border-radius: 4px 0 0 4px;
    cursor: help
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer svg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, -50%);
    fill: #fff
}

@media (max-width: 900px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer svg {
        font-size: 14px
    }
}

@media (max-width: 900px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .timer {
        width: 30px;
        height: 30px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
    height: 34px;
    padding: 0 15px;
    font-weight: 400;
    border-radius: 0 4px 4px 0
}

@media (max-width: 900px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        height: 30px
    }
}

@media (max-width: 600px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        padding: 0 8px
    }
}

@media (max-width: 400px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus .cancelBtn .btn {
        padding: 0 6px;
        font-size: 11px
    }
}

@media (max-width: 1100px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus {
        width: 180px
    }
}

@media (max-width: 600px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemLeft .itemStatus {
        width: 125px
    }
}

.loyaltyContainer .withPager .list .item .itemHeader .itemDate {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    text-align: center
}

.loyaltyContainer .withPager .list .item .itemHeader .itemDate>span {
    padding: 3px 8px;
    border-radius: 50px
}

@media (max-width: 700px) {
    .loyaltyContainer .withPager .list .item .itemHeader .itemDate {
        display: none
    }
}

@media (max-width: 1100px) {
    .loyaltyContainer .withPager .list .item .itemHeader {
        padding: 15px 0
    }
}

.loyaltyContainer .withPager .list .item .itemContent {
    width: 100%;
    height: auto;
    max-height: 0;
    margin-left: 0;
    overflow: hidden;
    transition: max-height .3s ease
}

.loyaltyContainer .withPager .list .item .itemContent.open {
    max-height: 200px
}

.loyaltyContainer .withPager .list .item .itemContent ul {
    padding: 15px 0;
    color: #fff;
    list-style: none
}

.loyaltyContainer .withPager .list .item .itemContent ul li {
    margin-bottom: 5px
}

.loyaltyContainer .withPager .list .item .itemContent ul li span {
    display: inline-flex;
    align-items: center
}

.loyaltyContainer .withPager .list .item .itemContent ul li span svg {
    margin: 3px 2px 0;
    font-size: .9em
}

.loyaltyContainer .withPager .list .item .itemContent ul li span:first-child {
    margin-right: 5px;
    font-weight: 400
}

@media (max-width: 480px) {
    .loyaltyContainer .withPager .list .item .itemContent ul {
        padding: 0 10px 5px
    }
}

@media (max-width: 1100px) {
    .loyaltyContainer .withPager .list .item .itemContent {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .loyaltyContainer .withPager .list .item .itemContent {
        margin-left: -20px;
        font-size: 12px
    }
}

.loyaltyContainer .withPager .list .item:first-child {
    border-top: none
}

.loyaltyContainer .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 0 0;
    list-style: none
}

.loyaltyContainer .pager .inputBlock {
    display: flex;
    align-items: center
}

.loyaltyContainer .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .loyaltyContainer .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.loyaltyContainer .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #fff;
    line-height: 1.25;
    background: none;
    border: 1px solid #653ba1;
    border-radius: 5px;
    cursor: pointer
}

.loyaltyContainer .pager .pagerBtn:hover {
    color: #fff
}

.loyaltyContainer .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.loyaltyContainer .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.loyaltyContainer .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.loyaltyContainer .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.loyaltyContainer .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .loyaltyContainer .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .loyaltyContainer .pager {
        padding: 30px 15px
    }
}

.loyaltyContainer .statsForm {
    display: flex;
    width: 100%;
    height: 320px;
    margin-top: 20px;
    background: #331d53;
    border-radius: 6px
}

.loyaltyContainer .statsForm .left {
    width: 60%;
    height: 100%;
    border-right: 1px solid hsla(0, 0%, 59.2%, .087)
}

.loyaltyContainer .statsForm .left .item {
    display: flex;
    height: 50%
}

.loyaltyContainer .statsForm .left .item.borderTop {
    border-top: 1px solid hsla(0, 0%, 59.2%, .087)
}

.loyaltyContainer .statsForm .left .item .wrap {
    display: flex;
    align-items: center;
    width: 100%
}

.loyaltyContainer .statsForm .left .item .wrap.borderRight {
    border-right: 1px solid hsla(0, 0%, 59.2%, .087)
}

.loyaltyContainer .statsForm .left .item .wrap .block {
    position: relative;
    width: 100%;
    text-align: center
}

.loyaltyContainer .statsForm .left .item .wrap .block svg {
    width: 30px;
    height: 30px;
    color: #fcae03
}

.loyaltyContainer .statsForm .left .item .wrap .block .num {
    margin: 7px 0 5px;
    color: #fff;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.25em
}

.loyaltyContainer .statsForm .left .item .wrap .block .text {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase
}

.loyaltyContainer .statsForm .right {
    width: 40%
}

.loyaltyContainer .statsForm .right .item {
    display: flex;
    height: 50%
}

.loyaltyContainer .statsForm .right .item.full {
    height: 100%
}

.loyaltyContainer .statsForm .right .item .wrap {
    display: flex;
    align-items: center;
    width: 100%
}

.loyaltyContainer .statsForm .right .item .wrap .currency {
    color: #fcae03;
    font-size: 30px
}

.loyaltyContainer .statsForm .right .item .wrap .block {
    position: relative;
    width: 100%;
    text-align: center
}

.loyaltyContainer .statsForm .right .item .wrap .block svg {
    width: 30px;
    height: 30px;
    color: #fcae03
}

.loyaltyContainer .statsForm .right .item .wrap .block .num {
    margin: 5px 0;
    color: #fff;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.2em
}

.loyaltyContainer .statsForm .right .item .wrap .block .text {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase
}

.loyaltyContainer .statsForm .right .item .wrap .block .btnBlock {
    display: flex;
    max-width: 180px;
    height: 100%;
    margin: auto
}

.loyaltyContainer .statsForm .right .item .wrap .block .btnBlock .btn {
    justify-content: center;
    width: 100%;
    max-width: 180px;
    margin-top: 10px;
    padding: 12px 20px;
    font-size: 13px
}

@media (max-width: 800px) {
    .loyaltyContainer .statsForm {
        flex-direction: column;
        height: auto
    }
    .loyaltyContainer .statsForm .left {
        width: 100%
    }
    .loyaltyContainer .statsForm .left .item {
        padding: 30px 0
    }
    .loyaltyContainer .statsForm .right {
        width: 100%;
        border-top: 1px solid hsla(0, 0%, 59.2%, .087)
    }
    .loyaltyContainer .statsForm .right .item {
        padding: 30px 0
    }
}

.loyaltyContainer .description {
    align-items: center;
    justify-content: center;
    width: 95%;
    margin-bottom: -15px;
    padding: 30px 20px 0;
    color: #fff;
    font-size: 14px;
    border-radius: 0
}

@media (max-width: 900px) {
    .loyaltyContainer .description {
        width: 100%;
        padding-bottom: 15px
    }
}

.loyaltyContainer .levelsBlock {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: auto;
    margin: 10px -5px 0;
    padding-bottom: 5px;
    overflow: hidden
}

.loyaltyContainer .levelsBlock .item {
    display: block;
    box-sizing: border-box;
    width: 30%;
    max-width: 135px;
    height: auto;
    text-align: center;
    background-color: #2d333f;
    border-right: 5px solid #442176;
    border-left: 5px solid #442176;
    opacity: .5
}

.loyaltyContainer .levelsBlock .item.current {
    opacity: 1
}

.loyaltyContainer .levelsBlock .item.arrow {
    width: auto;
    background-color: transparent
}

.loyaltyContainer .levelsBlock .item svg {
    position: relative;
    top: calc(50% - .5em);
    transform: rotate(180deg) scale(1.3)
}

.loyaltyContainer .levelsBlock .item img {
    width: 85%;
    margin-top: 10px
}

.loyaltyContainer .levelsBlock .item .expmeter {
    margin-top: 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px
}

.loyaltyContainer .levelsBlock .item .cashbackTitle {
    display: block;
    margin-top: 10px;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis
}

.loyaltyContainer .levelsBlock .item .cashbackValue {
    margin-bottom: 20px;
    color: #fff;
    font-weight: 400;
    font-size: 14px
}

@media (max-width: 900px) {
    .loyaltyContainer {
        padding: 15px
    }
    .loyaltyContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .loyaltyContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .loyaltyContainer .headerBlock .info {
        font-size: 13px
    }
}

.partnerContainer {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0;
    background: #442176;
    border-radius: 5px
}

.partnerContainer .loaderBlock {
    text-align: center
}

.partnerContainer .sidebar {
    width: 30%;
    padding: 25px 0;
    background: #1d1438
}

.partnerContainer .sidebar .head {
    padding-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #261a46
}

.partnerContainer .sidebar .head .avatarBlock {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    padding: 8px;
    overflow: hidden;
    background: #653ba1;
    border-radius: 10px
}

.partnerContainer .sidebar .head .avatarBlock .avatar>div {
    position: relative !important;
    width: 88px !important;
    height: 88px !important
}

.partnerContainer .sidebar .head .avatarBlock.active .actionsBlock,
.partnerContainer .sidebar .head .avatarBlock:focus .actionsBlock,
.partnerContainer .sidebar .head .avatarBlock:hover .actionsBlock {
    visibility: visible;
    opacity: 1
}

.partnerContainer .sidebar .head .avatarBlock .actionsBlock {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 40, 51, .65);
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s linear
}

.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%)
}

.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions label,
.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer
}

.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions label svg,
.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions button svg {
    font-size: 12px
}

.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions label.avatarUpload,
.partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions button.avatarUpload {
    background-color: #fdae05
}

@media (max-width: 1050px) {
    .partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions button,
    .partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions label {
        width: 22px;
        height: 22px
    }
    .partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions button svg,
    .partnerContainer .sidebar .head .avatarBlock .actionsBlock .actions label svg {
        font-size: 10px
    }
}

.partnerContainer .sidebar .head .name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 220px;
    margin: auto;
    font-size: 15px
}

.partnerContainer .sidebar .head .name .btnName {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px
}

.partnerContainer .sidebar .head .name .btnName svg {
    position: relative;
    top: .05em;
    margin-left: 5px;
    font-size: 13px
}

.partnerContainer .sidebar .head .name.active .btnName {
    display: none
}

.partnerContainer .sidebar .partnerMobileNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px
}

.partnerContainer .sidebar .partnerMobileNav .navLabel {
    height: 48px;
    padding: 0
}

.partnerContainer .sidebar .partnerMobileNav .dropdown {
    position: relative;
    box-sizing: border-box
}

.partnerContainer .sidebar .partnerMobileNav .dropdown:hover .btnDropdown,
.partnerContainer .sidebar .partnerMobileNav .dropdown:active .btnDropdown {
    background-color: #442176
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown {
    display: inline-block;
    height: 48px;
    padding: .375rem .75rem;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background-color: #442176;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown.open {
    border-radius: 5px 5px 0 0;
    box-shadow: 0 0 5px #442176
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent {
    display: flex;
    align-items: center;
    color: inherit
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent .navIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    padding: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent .navIcon svg {
    font-size: 1.3em;
    opacity: .3
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: .45em;
    transition: transform .2s ease-out
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent .opener svg {
    width: 100%;
    height: 100%;
    fill: #7f8596
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .btnDropdown .btnContent .opener.open {
    transform: rotate(-180deg)
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    display: none;
    float: left;
    box-sizing: border-box;
    width: 100%;
    min-width: auto;
    margin: 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #442176;
    background-clip: padding-box;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 5px 5px #191d24
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu.open {
    display: block
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu:first-child {
    border-radius: 0
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 15px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    text-align: inherit;
    background-color: initial;
    border-bottom: 1px solid #3d414a
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:hover,
.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:focus {
    color: #261a46;
    background-color: #fdcd2d
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:not(.active),
.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:not([disabled]) {
    cursor: pointer
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:first-child {
    border-radius: 0
}

.partnerContainer .sidebar .partnerMobileNav .dropdown .menu .item:last-child {
    border-bottom: 1px solid transparent
}

.partnerContainer .sidebar div .navLabel {
    height: 50px;
    color: #fff;
    line-height: 14px
}

.partnerContainer .sidebar div .navLabel,
.partnerContainer .sidebar div .navItem {
    display: flex;
    align-items: center;
    padding: 0 25px;
    font-size: 14px
}

.partnerContainer .sidebar div .navItem {
    height: 52px;
    color: rgba(255, 255, 255, .804);
    border-bottom: 1px solid #261a46;
    cursor: pointer
}

.partnerContainer .sidebar div .navItem .navIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    padding: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px
}

.partnerContainer .sidebar div .navItem .navIcon svg {
    color: #fff;
    font-size: 1.3em;
    opacity: .3
}

.partnerContainer .sidebar div .navItem:last-child {
    border-bottom: 0
}

.partnerContainer .sidebar div .navItem.active {
    color: #fff;
    background: #442176;
    border-bottom: 1px solid transparent
}

.partnerContainer .sidebar div .navItem:hover {
    color: #fff
}

.partnerContainer .sidebar div .navItem:hover .navIcon svg,
.partnerContainer .sidebar div .navItem.active .navIcon svg {
    opacity: 1
}

.partnerContainer .partnerContent {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 70%;
    min-height: 500px;
    padding: 25px
}

.partnerContainer .partnerContent .caption {
    margin-bottom: 25px;
    color: inherit;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .alert {
    position: relative;
    margin-bottom: 1.5em;
    padding: 15px;
    font-size: 13px;
    background: rgba(25, 29, 37, .95);
    border: 1px solid #ec193f;
    border-radius: 5px
}

.partnerContainer .partnerContent .players .withPager {
    height: calc(100% - 95px)
}

.partnerContainer .partnerContent .players .withPager.isLoading .list {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    pointer-events: none
}

.partnerContainer .partnerContent .players .withPager .list {
    position: relative;
    min-height: 250px
}

.partnerContainer .partnerContent .players .withPager .list.isLoader {
    min-height: 400px
}

.partnerContainer .partnerContent .players .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: rgba(255, 255, 255, .804);
    font-size: 18px
}

.partnerContainer .partnerContent .players .withPager .list .empty h4 {
    font-size: 24px
}

.partnerContainer .partnerContent .players .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.partnerContainer .partnerContent .players .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(60% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.partnerContainer .partnerContent .players .withPager .list .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid #261a46;
    transform: translateZ(0);
    transition: box-shadow 3ms, border-top-color .1s
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemLeft .itemAmount span {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemLeft .itemAmount span svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .804)
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemDate span {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemDate span svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .804)
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemRight .itemInfo {
    margin-left: 0
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemRight .itemInfo .infoCaption {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-size: 14px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .players .withPager .list .item.headItem .itemHeader .itemRight .itemInfo .infoCaption svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .804)
}

.partnerContainer .partnerContent .players .withPager .list .item.logItem .itemHeader .itemRight .itemInfo {
    margin-left: 0
}

.partnerContainer .partnerContent .players .withPager .list .item.logItem .itemHeader .itemRight .itemInfo .infoCaption {
    font-size: 14px
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    overflow: visible;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader:active,
.partnerContainer .partnerContent .players .withPager .list .item .itemHeader:focus,
.partnerContainer .partnerContent .players .withPager .list .item .itemHeader:hover {
    border: 0;
    outline: none
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight,
.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft {
    display: flex;
    align-items: center
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemAvatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center;
    position: relative;
    padding: 2px;
    overflow: hidden;
    background: #653ba1;
    border-radius: 10px
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemAvatar>div {
    font-family: Rubik, Arial, sans-serif !important
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemAvatar img {
    width: 100%;
    height: 100%;
    border-radius: 5px
}

@media (max-width: 1050px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemAvatar {
        width: 35px;
        height: 35px;
        margin-right: 8px
    }
}

@media (max-width: 950px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemAvatar {
        display: none
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
    display: block;
    overflow: hidden;
    color: #fff;
    line-height: 1.5;
    white-space: nowrap
}

@media (max-width: 480px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo .infoCaption {
        font-size: 14px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
    display: block;
    max-width: 480px;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .5
}

@media (max-width: 1100px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 12px
    }
}

@media (max-width: 600px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemRight .itemInfo .infoComment {
        font-size: 11px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: right
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .804);
    white-space: nowrap
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value.win {
    color: #5cb503
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
    position: relative;
    top: 1px;
    margin-left: 2px
}

@media (max-width: 600px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value svg {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .itemAmount .value {
        font-size: 14px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus {
    display: flex;
    justify-content: flex-end;
    width: 200px;
    margin-left: auto;
    color: #fff
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus>span {
    padding: 0 5px
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-left: auto
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 130px;
    height: 34px;
    margin-left: auto;
    text-align: center;
    background-color: #653ba1;
    border-radius: 34px;
    cursor: default
}

@media (max-width: 450px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus button {
        font-size: 12px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .success {
    color: #5cb503;
    background-color: rgba(98, 202, 91, .1)
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .canceled {
    color: #ff95b5;
    background-color: rgba(202, 174, 91, .1)
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .waiting {
    color: rgba(255, 255, 255, .804);
    background-color: rgba(177, 187, 195, .1)
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .error {
    color: #ff4b32;
    background-color: rgba(202, 174, 91, .1)
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .cancel {
    z-index: 1;
    color: #615918;
    background-color: #f5e249;
    cursor: pointer
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .cancel:hover,
.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .cancel:focus {
    background-color: #e4d345
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .btnStatus .cancel svg {
    position: relative;
    margin-right: 8px;
    font-size: .8em
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn {
    display: flex;
    justify-content: flex-end;
    margin-left: auto
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .timer {
    position: relative;
    display: flex;
    align-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #fdae05;
    border-radius: 4px 0 0 4px;
    cursor: help
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .timer svg {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 16px;
    transform: translate(-50%, -50%);
    fill: #fff
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .timer svg {
        font-size: 14px
    }
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .timer {
        width: 30px;
        height: 30px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .btn {
    height: 34px;
    padding: 0 15px;
    font-weight: 400;
    border-radius: 0 4px 4px 0
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .btn {
        height: 30px
    }
}

@media (max-width: 600px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .btn {
        padding: 0 8px
    }
}

@media (max-width: 400px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus .cancelBtn .btn {
        padding: 0 6px;
        font-size: 11px
    }
}

@media (max-width: 1100px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus {
        width: 180px
    }
}

@media (max-width: 600px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemLeft .btnStatus {
        width: 125px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemDate {
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    text-align: center
}

.partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemDate>span {
    padding: 3px 8px;
    color: #fff;
    border-radius: 50px
}

@media (max-width: 700px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader .itemDate {
        display: none
    }
}

@media (max-width: 1100px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemHeader {
        padding: 15px 0
    }
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent {
    width: 100%;
    height: auto;
    max-height: 0;
    margin-left: 0;
    overflow: hidden;
    -webkit-transition: max-height .3s ease;
    transition: max-height .3s ease
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent.open {
    max-height: 200px
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent ul {
    padding: 15px 0;
    color: rgba(255, 255, 255, .804);
    list-style: none
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent ul li {
    margin-bottom: 5px
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent ul li span {
    display: inline-flex;
    align-items: center
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent ul li span svg {
    margin: 3px 2px 0;
    font-size: .9em
}

.partnerContainer .partnerContent .players .withPager .list .item .itemContent ul li span:first-child {
    margin-right: 5px;
    font-weight: 400
}

@media (max-width: 480px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemContent ul {
        padding: 0 10px 5px
    }
}

@media (max-width: 1100px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemContent {
        font-size: 13px
    }
}

@media (max-width: 480px) {
    .partnerContainer .partnerContent .players .withPager .list .item .itemContent {
        margin-left: -20px;
        font-size: 12px
    }
}

.partnerContainer .partnerContent .players .withPager .list .item:first-child {
    border-top: none
}

.partnerContainer .partnerContent .players .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 0 0;
    list-style: none
}

.partnerContainer .partnerContent .players .pager .inputBlock {
    display: flex;
    align-items: center;
    color: #8e80b8
}

.partnerContainer .partnerContent .players .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.partnerContainer .partnerContent .players .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #8e80b8;
    line-height: 1.25;
    background: none;
    border: 1px solid #8e80b8;
    border-radius: 5px;
    cursor: pointer
}

.partnerContainer .partnerContent .players .pager .pagerBtn:hover {
    color: #fdcd2d;
    background-color: none
}

.partnerContainer .partnerContent .players .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.partnerContainer .partnerContent .players .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.partnerContainer .partnerContent .players .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.partnerContainer .partnerContent .players .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.partnerContainer .partnerContent .players .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .players .pager {
        padding: 30px 15px
    }
}

.partnerContainer .partnerContent .campgains .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: rgba(255, 255, 255, .804);
    font-size: 18px
}

.partnerContainer .partnerContent .campgains .empty h4 {
    font-size: 24px
}

.partnerContainer .partnerContent .campgains .copyTooltip {
    position: relative;
    top: -75px;
    right: 0;
    bottom: 50px;
    width: 100px;
    color: inherit;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none
}

.partnerContainer .partnerContent .campgains .panel {
    display: flex;
    flex-wrap: wrap
}

.partnerContainer .partnerContent .campgains .panel .btn {
    height: 30px !important;
    line-height: 10px
}

.partnerContainer .partnerContent .campgains .panel .btn:not(:first-child) {
    margin-left: 10px
}

.partnerContainer .partnerContent .campgains .newBlock {
    margin-top: 25px
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow {
    margin-bottom: 12px
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow input {
    font-size: 1em
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow .inputAppend {
    position: relative
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow .inputAppend button {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 34px;
    margin-right: 6px;
    padding: 0 15px;
    color: #261a46;
    text-align: center;
    background: #fdcd2d;
    border-radius: 3px;
    transform: translateY(-50%);
    cursor: pointer
}

.partnerContainer .partnerContent .campgains .newBlock .inputRow .inputAppend button:hover {
    color: #261a46
}

.partnerContainer .partnerContent .campgains .withPager {
    margin-top: 25px
}

.partnerContainer .partnerContent .campgains .withPager .list {
    position: relative
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive {
    position: relative;
    display: block;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive.isLoader {
    min-height: 400px;
    overflow: hidden
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table {
    width: 100%;
    text-align: left;
    border-collapse: collapse
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr th {
    padding: 10px 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr td,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr th {
    width: 20%;
    text-align: center
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr td:first-child,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr th:first-child {
    text-align: left
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr td:last-child,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table thead tr th:last-child {
    text-align: right
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr {
    border-bottom: 1px solid #261a46
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr:last-child {
    border-bottom: 0
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr:last-child td {
    border-bottom: 1px solid transparent
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td {
    min-width: 110px;
    padding: 20px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td.noItems {
    padding: 40px 0;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    text-align: center !important
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td:first-child {
    padding-left: 0
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td:last-child {
    padding-right: 0
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td.control {
    min-width: 130px
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td.control button {
    padding: 3px 10px
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td.control button:not(:first-child) {
    margin-left: 5px
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link {
    display: flex;
    align-items: center
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link div button {
    padding: 0;
    background-color: initial;
    border: 0;
    outline: none
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link div button:last-child {
    color: #ff902a;
    font-weight: 400;
    font-size: 12px;
    cursor: pointer
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link div button:last-child:hover {
    color: #fff
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link div button:first-child {
    display: block;
    margin: 2px 0 -1px;
    color: #ff902a;
    font-size: 14px;
    line-height: 14px;
    transition: all .3s ease
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td .link div button:first-child:hover {
    color: #fff
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td div {
    height: 24px;
    white-space: nowrap
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td div.active {
    color: #5cb503
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td div.expired {
    color: #ec193f
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr th {
    width: 20%;
    text-align: center
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td:first-child,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr th:first-child {
    text-align: left
}

.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr td:last-child,
.partnerContainer .partnerContent .campgains .withPager .list .responsive table tbody tr th:last-child {
    text-align: right
}

.partnerContainer .partnerContent .stats {
    display: flex;
    flex-direction: column
}

.partnerContainer .partnerContent .stats .loader {
    position: static;
    flex: 1 1 auto;
    transform: translate(0)
}

.partnerContainer .partnerContent .stats .panel {
    display: flex;
    flex-wrap: wrap
}

.partnerContainer .partnerContent .stats .panel .btn {
    height: 30px !important;
    min-height: auto;
    margin-bottom: 10px;
    line-height: 10px
}

.partnerContainer .partnerContent .stats .panel .btn:not(:last-child) {
    margin-right: 10px
}

.partnerContainer .partnerContent .stats .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: rgba(255, 255, 255, .804);
    font-size: 18px
}

.partnerContainer .partnerContent .stats .empty h4 {
    font-size: 24px
}

.partnerContainer .partnerContent .stats .withPager {
    margin-top: 25px
}

.partnerContainer .partnerContent .stats .withPager .list {
    position: relative
}

.partnerContainer .partnerContent .stats .withPager .list .responsive {
    position: relative;
    display: block;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.partnerContainer .partnerContent .stats .withPager .list .responsive.isLoader {
    min-height: 400px;
    overflow: hidden
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table {
    width: 100%;
    text-align: left;
    border-collapse: collapse
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table thead tr th {
    padding: 10px 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table thead tr td,
.partnerContainer .partnerContent .stats .withPager .list .responsive table thead tr th {
    width: 16.6%;
    padding: 10px;
    text-align: center
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table thead tr td:last-child,
.partnerContainer .partnerContent .stats .withPager .list .responsive table thead tr th:last-child {
    text-align: right
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr {
    border-bottom: 1px solid #261a46
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr:last-child {
    border-bottom: 0
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr:last-child td {
    border-bottom: 1px solid transparent
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td {
    min-width: 110px;
    padding: 20px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td.noItems {
    padding: 40px 0;
    color: rgba(255, 255, 255, .804);
    font-size: 16px;
    text-align: center !important
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td:first-child {
    padding-left: 0
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td:last-child {
    padding-right: 0
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td.control {
    min-width: 130px
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td.control button {
    padding: 3px 10px
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td.control button:not(:first-child) {
    margin-left: 5px
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link {
    display: flex;
    align-items: center
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link div button {
    padding: 0;
    background-color: initial;
    border: 0;
    outline: none
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link div button:last-child {
    color: #ff902a;
    font-weight: 400;
    font-size: 12px;
    cursor: pointer
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link div button:last-child:hover {
    color: #fff
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link div button:first-child {
    display: block;
    margin: 2px 0 -1px;
    color: #ff902a;
    font-size: 14px;
    line-height: 14px;
    transition: all .3s ease
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td .link div button:first-child:hover {
    color: #fff
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td div {
    height: 24px;
    white-space: nowrap
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td div.active {
    color: #5cb503
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td div.expired {
    color: #ec193f
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td,
.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr th {
    width: 16.6%;
    text-align: center
}

.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr td:last-child,
.partnerContainer .partnerContent .stats .withPager .list .responsive table tbody tr th:last-child {
    text-align: right
}

.partnerContainer .partnerContent .stats .withPager .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 0 0;
    list-style: none
}

.partnerContainer .partnerContent .stats .withPager .pager .inputBlock {
    display: flex;
    align-items: center;
    color: #8e80b8
}

.partnerContainer .partnerContent .stats .withPager .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .stats .withPager .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #8e80b8;
    line-height: 1.25;
    background: none;
    border: 1px solid #8e80b8;
    border-radius: 5px;
    cursor: pointer
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn:hover {
    color: #fdcd2d;
    background-color: none
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.partnerContainer .partnerContent .stats .withPager .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .stats .withPager .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .stats .withPager .pager {
        padding: 30px 15px
    }
}

.partnerContainer .partnerContent .stats .campgainsSelector {
    display: flex;
    flex-wrap: wrap;
    margin-top: -10px;
    margin-bottom: 20px
}

.partnerContainer .partnerContent .stats .campgainsSelector button {
    margin-top: 10px
}

.partnerContainer .partnerContent .stats .campgainsSelector button:not(:last-child) {
    margin-right: 10px
}

.partnerContainer .partnerContent .general .generalHeader {
    margin: 30px 0;
    padding: 20px;
    color: inherit;
    background: #653ba1;
    border-radius: 6px
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .general .generalHeader {
        margin: 20px 0;
        padding: 15px
    }
}

.partnerContainer .partnerContent .general .linkForm {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    padding-top: 15px;
    font-size: 14px;
    border-top: solid 1px #1d1438
}

.partnerContainer .partnerContent .general .linkForm:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none
}

.partnerContainer .partnerContent .general .linkForm .text {
    margin-right: 5px
}

.partnerContainer .partnerContent .general .linkForm .form {
    width: 50%;
    margin-left: auto
}

.partnerContainer .partnerContent .general .linkForm .form .formRow {
    margin: 0
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup input {
    height: 44px;
    padding: 0 7px 0 12px;
    font-size: 1em;
    border-right: 0;
    border-radius: 5px 0 0 5px
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend {
    position: relative;
    display: flex;
    border-radius: 0 5px 5px 0
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .btn {
    margin-left: 0;
    background: #fdcd2d;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .btn .icon {
    fill: #261a46
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .btn .spinner {
    width: 15px;
    height: 15px;
    border-top-color: #261a46;
    border-right-color: #261a46;
    border-bottom-color: #261a46
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .btnAppend {
    color: rgba(255, 255, 255, .804);
    background: #653ba1
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .btnAppend:hover {
    color: #fff
}

.partnerContainer .partnerContent .general .linkForm .form .formRow .inputGroup .inputGroupAppend .copyTooltip {
    right: 0;
    bottom: 50px;
    width: 100px;
    color: inherit;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none
}

@media (max-width: 1099px) {
    .partnerContainer .partnerContent .general .linkForm {
        flex-direction: column
    }
    .partnerContainer .partnerContent .general .linkForm .form {
        width: 100%;
        margin: 0
    }
    .partnerContainer .partnerContent .general .linkForm .text {
        margin-bottom: 15px
    }
}

@media (max-width: 900px) {
    .partnerContainer .partnerContent .general .linkForm .from .formRow .inputGroup .inputGroupAppend .btn {
        position: relative;
        padding: 0 20px;
        font-size: 17px
    }
}

.partnerContainer .partnerContent .general .statsForm {
    display: flex;
    width: 100%;
    height: 320px;
    background: #1d1438;
    border-radius: 6px
}

.partnerContainer .partnerContent .general .statsForm .left {
    width: 60%;
    height: 100%;
    border-right: 1px solid #442176
}

.partnerContainer .partnerContent .general .statsForm .left .item {
    display: flex;
    height: 50%
}

.partnerContainer .partnerContent .general .statsForm .left .item.borderTop {
    border-top: 1px solid #442176
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap {
    display: flex;
    align-items: center;
    width: 100%
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap.borderRight {
    border-right: 1px solid #442176
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap .block {
    position: relative;
    width: 100%;
    text-align: center
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap .block svg {
    width: 30px;
    height: 30px;
    color: #653ba1
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap .block .num {
    margin: 7px 0 5px;
    color: #fff;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1.25em
}

.partnerContainer .partnerContent .general .statsForm .left .item .wrap .block .text {
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .general .statsForm .right {
    width: 40%
}

.partnerContainer .partnerContent .general .statsForm .right .item {
    display: flex;
    height: 50%
}

.partnerContainer .partnerContent .general .statsForm .right .item.full {
    height: 100%
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap {
    display: flex;
    align-items: center;
    width: 100%
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .currency {
    color: #653ba1;
    font-size: 30px
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block {
    position: relative;
    width: 100%;
    text-align: center
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block svg {
    width: 30px;
    height: 30px;
    color: #653ba1
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block .num {
    margin: 5px 0;
    color: #fff;
    font-weight: 400;
    font-size: 1.4em;
    line-height: 1.2em
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block .text {
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block .btnBlock {
    display: flex;
    max-width: 180px;
    height: 100%;
    margin: auto
}

.partnerContainer .partnerContent .general .statsForm .right .item .wrap .block .btnBlock .btn {
    justify-content: center;
    width: 100%;
    max-width: 180px;
    margin-top: 10px;
    padding: 12px 20px;
    font-size: 13px
}

@media (max-width: 800px) {
    .partnerContainer .partnerContent .general .statsForm {
        flex-direction: column;
        height: auto
    }
    .partnerContainer .partnerContent .general .statsForm .left {
        width: 100%
    }
    .partnerContainer .partnerContent .general .statsForm .left .item {
        padding: 30px 0
    }
    .partnerContainer .partnerContent .general .statsForm .right {
        width: 100%;
        border-top: 1px solid #442176
    }
    .partnerContainer .partnerContent .general .statsForm .right .item {
        padding: 30px 0
    }
}

.partnerContainer .partnerContent .preferences .form-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0
}

.partnerContainer .partnerContent .preferences .form-checkbox label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    cursor: pointer
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formLabel {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    user-select: none;
    touch-action: manipulation
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField {
    position: relative
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox {
    cursor: pointer
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input {
    display: none
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input:checked+.label:before {
    background: #fdae05
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input:checked+.label:after {
    left: calc(100% - 15px)
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input+.label {
    position: relative;
    display: block;
    width: 33px;
    height: 10px;
    cursor: pointer
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input+.label:before {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(216, 216, 216, .18);
    border-radius: 5px;
    transition: all .3s;
    content: ""
}

.partnerContainer .partnerContent .preferences .form-checkbox label .formField .checkBox input+.label:after {
    position: absolute;
    top: calc(50% - 9px);
    left: -3px;
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 4px;
    transition: all .3s;
    content: ""
}

.partnerContainer .partnerContent .preferences .form-checkbox:nth-child(odd) {
    background-color: #2c323f
}

@media (max-width: 1050px) {
    .partnerContainer {
        display: block
    }
    .partnerContainer .sidebar {
        width: 100%;
        padding: 0;
        border-radius: 5px 5px 0 0
    }
    .partnerContainer .sidebar .head {
        display: flex;
        align-items: center;
        padding: 15px
    }
    .partnerContainer .sidebar .head .avatarBlock {
        width: 60px;
        height: 60px;
        margin: 0 15px 0 0;
        padding: 3px
    }
    .partnerContainer .sidebar .head .avatarBlock .avatar>div {
        width: 52px !important;
        height: 52px !important
    }
    .partnerContainer .sidebar .head .name {
        max-width: 100%;
        margin: 0
    }
    .partnerContainer .partnerContent {
        width: 100%;
        padding: 15px
    }
}

.modeSection {
    background-color: #261a46 !important
}

.modeSection.sport {
    padding-top: 0 !important
}

.modeSection .modeContainer {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    border-radius: 6px;
    justify-content: center
}

.modeSection .modeContainer .background {
    position: absolute;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-repeat: no-repeat
}

.modeSection .modeContainer .background.casino {
    background-image: url(https://cdn.friends-casino.io/assets/svg/Home/casinoSectionBg.svg);
    background-position: center
}

.modeSection .modeContainer .background.sport {
    background-image: url(https://cdn.friends-casino.io/assets/svg/Home/sportSectionBg.svg);
    background-position: center
}

.modeSection .modeContainer .modeContentContainerWrapper {
    padding: 0 30px
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper {
    display: flex;
    max-width: 1250px;
    position: relative;
    overflow: hidden;
    margin: auto;
    width: 100%
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 25px;
    padding-top: 1rem
}

@media (max-width: 1000px) {
    .modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents {
        padding-top: 2rem
    }
}

@media (min-width: 1001px) {
    .modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents {
        padding-right: 1.5rem
    }
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents h2 {
    font-weight: 700;
    line-height: normal;
    text-align: left;
    padding: 0;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents h2 {
        font-size: 32px
    }
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .heroImageMobile {
    margin: 20px auto;
    width: auto;
    justify-content: center;
    display: none
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .heroImageMobile img {
    max-width: 310px;
    width: 100%;
    object-fit: contain
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories {
    display: grid;
    gap: 1rem;
    margin-bottom: .5rem;
    padding: 1rem;
    color: inherit;
    background-color: rgba(0, 0, 0, .15);
    border-radius: .375rem;
    isolation: isolate;
    backdrop-filter: blur(12px)
}

@media (min-width: 1001px) {
    .modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories .categoryItem {
    display: grid;
    grid-template-columns: 40px auto;
    gap: .5rem;
    border-radius: .25rem;
    align-items: center
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories .categoryItem img {
    max-width: 2.5rem
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories .categoryItem .categoryName {
    max-width: 110px;
    min-height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-left: .5rem
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .gameCategories .categoryItem .categoryName span {
    font-weight: 700;
    text-align: left;
    font-size: 16px;
    max-width: 100%;
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .btn {
    display: inline-flex;
    position: relative;
    font-weight: 600;
    white-space: nowrap;
    font-size: 14px;
    padding: 14px 20px;
    width: auto
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .btn.sport {
    background: linear-gradient(45deg, #5cb503, #338500);
    color: #fff
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .btn.sport:hover {
    background: #5cb503
}

@media (max-width: 1000px) {
    .modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .innerContents .btn {
        text-align: center;
        justify-content: center;
        margin-top: 15px
    }
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .heroImage {
    display: flex;
    justify-content: right;
    width: auto;
    min-width: 365px
}

.modeSection .modeContainer .modeContentContainerWrapper .modeContentWrapper .heroImage img {
    flex: 1 1 auto;
    max-width: 310px;
    object-fit: contain
}

@media (max-width: 900px) {
    .modeSection {
        margin-left: -15px;
        margin-right: -15px
    }
}

.heroImageMobile {
    display: none;
    max-height: 400px
}

@media (max-width: 1000px) {
    .modeSectionRightBarOpen .heroImageMobile {
        display: flex !important
    }
    .modeSectionRightBarOpen .heroImage {
        display: none !important
    }
    .modeSectionRightBarOpen .innerContents .btn {
        width: 100% !important
    }
}

@media (max-width: 800px) {
    .modeSection .heroImage {
        display: none !important
    }
    .modeSection .heroImageMobile {
        display: flex !important
    }
    .modeSection .innerContents .btn {
        width: 100% !important
    }
}

@keyframes animateCard1 {
    4% {
        transform: translate3d(-50%, 200%, 0);
        z-index: 4;
        opacity: 1
    }
    4.1% {
        transform: translate3d(-50%, 200%, 0);
        z-index: -1;
        opacity: 0
    }
    5% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: -1;
        opacity: 0
    }
    5.1% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: 1;
        opacity: 1
    }
    7% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    25% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    25.1% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 2;
        opacity: 1
    }
    29% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    50% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    50.1% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 3
    }
    54% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
    75% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
    75.1% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 4
    }
    79% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 4
    }
    to {
        transform: translate3d(-50%, -30%, 0);
        z-index: 4
    }
}

@keyframes animateCard2 {
    4% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    25% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    25.1% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 4
    }
    29% {
        transform: translate3d(-50%, 200%, 0);
        z-index: 4;
        opacity: 1
    }
    29.1% {
        transform: translate3d(-50%, 200%, 0);
        z-index: -1;
        opacity: 0
    }
    30% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: -1;
        opacity: 0
    }
    30.1% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: 1;
        opacity: 1
    }
    32% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    50% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    50.1% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 2;
        opacity: 1
    }
    54% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    75% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    79% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
    to {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
}

@keyframes animateCard3 {
    4% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 2
    }
    25% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 2
    }
    25.1% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
    29% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    50% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    50.1% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 4
    }
    55% {
        transform: translate3d(-50%, 200%, 0);
        z-index: 4;
        opacity: 1
    }
    55.1% {
        transform: translate3d(-50%, 200%, 0);
        z-index: -1;
        opacity: 0
    }
    56% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: -1;
        opacity: 0
    }
    56.1% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: 1;
        opacity: 1
    }
    58% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    75% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    79% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    to {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
}

@keyframes animateCard4 {
    4% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 1
    }
    25% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 1
    }
    25.1% {
        transform: translate3d(-50%, -80%, -200px);
        z-index: 2
    }
    29% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 2
    }
    50% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 2
    }
    50.1% {
        transform: translate3d(-50%, -55%, -100px);
        z-index: 3
    }
    54% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    75% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 3
    }
    75.1% {
        transform: translate3d(-50%, -30%, 0);
        z-index: 4
    }
    80% {
        transform: translate3d(-50%, 200%, 0);
        z-index: 4;
        opacity: 1
    }
    80.1% {
        transform: translate3d(-50%, 200%, 0);
        z-index: -1;
        opacity: 0
    }
    81% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: -1;
        opacity: 0
    }
    81.1% {
        transform: translate3d(-50%, -80%, -300px);
        z-index: 1;
        opacity: 1
    }
    83% {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
    to {
        transform: translate3d(-50%, -105%, -300px);
        z-index: 1;
        opacity: 1
    }
}

.payWaysSection {
    background-color: #442176 !important
}

.payWaysSection .payWaysContainer .payWaysContentWrapper {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    max-width: 1250px;
    min-height: 530px;
    margin: auto;
    overflow: hidden
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper {
        flex-direction: row;
        gap: 4rem;
        min-height: 430px
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
    aspect-ratio: 343/300;
    position: relative;
    width: 50%;
    height: auto;
    min-height: 300px;
    perspective: 600px
}

@media (max-width: 360px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
        aspect-ratio: auto;
        height: 24rem
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
        height: auto;
        width: 50%
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card {
    position: absolute;
    width: 100%;
    max-width: 440px;
    top: 50%;
    left: 50%
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(1) {
    z-index: 4;
    transform: translate3d(-50%, -30%, 0);
    animation: animateCard1 8s 2s infinite linear
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(2) {
    z-index: 3;
    transform: translate3d(-50%, -55%, -100px);
    animation: animateCard2 8s 2s infinite linear
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(3) {
    z-index: 2;
    transform: translate3d(-50%, -80%, -200px);
    animation: animateCard3 8s 2s infinite linear
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(4) {
    z-index: 1;
    transform: translate3d(-50%, -105%, -300px);
    animation: animateCard4 8s 2s infinite linear
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card .currencyImage {
    object-fit: cover;
    max-width: 880px;
    max-height: 538px;
    aspect-ratio: 1.63569/1;
    width: 100%
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    margin-bottom: 0
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer {
        width: 50%;
        align-items: flex-start;
        margin-bottom: 0
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title {
    font-weight: 700;
    line-height: normal;
    text-align: left;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title {
        font-size: 32px
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title .titleSpan {
    margin-bottom: .25rem
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .description {
    font-weight: 400;
    text-align: left;
    font-size: 18px
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .btn {
    justify-content: center;
    display: inline-flex;
    position: relative;
    font-weight: 600;
    white-space: nowrap;
    font-size: 14px;
    padding: 14px 20px;
    background: linear-gradient(45deg, #fdae05, #fdcd2d);
    width: auto;
    margin-top: 2rem
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .btn:hover {
    background: #fdcd2d
}

@media screen and (max-width: 1100px) and (min-width: 900px) {
    .homeSectionRightBarOpen .payWaysContentWrapper {
        flex-direction: column-reverse !important;
        gap: 0 !important
    }
    .homeSectionRightBarOpen .payWaysContentWrapper .textContainer {
        align-items: normal !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important
    }
    .homeSectionRightBarOpen .payWaysContentWrapper .cardsContainer {
        width: 100% !important
    }
}

@media (max-width: 768px) {
    .payWaysContentWrapper {
        flex-direction: column-reverse !important;
        gap: 0 !important
    }
    .payWaysContentWrapper .textContainer {
        align-items: normal !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important
    }
    .payWaysContentWrapper .cardsContainer {
        width: 100% !important
    }
}

.welcomeSection .welcomeWrapper {
    position: relative;
    width: 100%;
    padding-top: 40px;
    overflow: hidden
}

.welcomeSection .welcomeWrapper .backgroundLogo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin: 0 auto
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    justify-content: space-between;
    max-width: 1250px;
    margin: auto
}

@media (min-width: 768px) and (max-width: 900px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper {
        flex-direction: row;
        gap: 30px
    }
}

@media (min-width: 1100px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper {
        flex-direction: row;
        gap: 30px
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper {
        gap: 0
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%
}

@media (min-width: 768px) and (max-width: 900px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer {
        gap: 30px;
        max-width: 478px
    }
}

@media (min-width: 1100px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer {
        gap: 30px;
        max-width: 478px
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer {
        display: block;
        margin-top: 20px
    }
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer {
        margin-top: 10px
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .title {
    display: block;
    margin-bottom: 0;
    color: #fff;
    font-weight: 700;
    font-size: 50px;
    line-height: 120%;
    text-align: left
}

@media (max-width: 1300px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .title {
        font-size: 38px
    }
}

@media (min-width: 901px) and (max-width: 1099px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .title {
        text-align: center
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .title {
        text-align: center
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 14px
}

@media (min-width: 768px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer .btn {
        width: auto;
        margin-top: 10px
    }
}

@media (min-width: 901px) and (max-width: 1099px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer {
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .ctaContainer {
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: 100%
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthText {
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 14px
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthText {
        margin: 0 auto 10px
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons {
    display: flex;
    width: 100%
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    font-weight: 400;
    font-size: 24px;
    background: #442176;
    border-radius: 4px;
    cursor: pointer
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons .item:last-child {
    margin-right: 0
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons .item:hover {
    background: #653ba1
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons .item svg {
    pointer-events: none;
    fill: #fff
}

@media (max-width: 640px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons .item {
        width: 20%
    }
}

@media (min-width: 901px) and (max-width: 1099px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons {
        justify-content: center
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer .oauthButtons {
        justify-content: center
    }
}

@media (min-width: 901px) and (max-width: 1099px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer {
        align-items: center
    }
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .textContainer .oauthContainer {
        align-items: center
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    width: 100%
}

@media (max-width: 767px) {
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
        gap: 0
    }
    .welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.casino {
        margin-right: 15px
    }
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper {
    position: relative;
    flex-basis: 50%;
    padding: 2px;
    overflow: hidden;
    border-radius: 15px
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.casino:before {
    position: absolute;
    padding: 2px;
    background: linear-gradient(45deg, #4c00c9, #2c0965);
    border-radius: 15px;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.sport:before {
    position: absolute;
    padding: 2px;
    background: linear-gradient(45deg, #fdae05, #fdcd2d);
    border-radius: 15px;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.welcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .heroImage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 13px;
    aspect-ratio: .666008/1
}

.authenticatedWelcomeSection {
    position: relative;
    background-color: #261a46 !important
}

.authenticatedWelcomeSection:not(.second):after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: url(https://cdn.friends-casino.io/assets/svg/Home/welcomeSectionBg.svg) no-repeat center;
    background-size: cover;
    content: ""
}

.authenticatedWelcomeSection.second {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    background-color: #261a46 !important
}

.authenticatedWelcomeSection.second .welcomeWrapper {
    padding-top: 20px !important
}

.authenticatedWelcomeSection .welcomeWrapper {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 40px;
    overflow: hidden
}

.authenticatedWelcomeSection .welcomeWrapper .backgroundLogo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    margin: 0 auto
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    color: #fff
}

@media (min-width: 768px) and (max-width: 900px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper {
        flex-direction: row
    }
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
        margin-left: 30px
    }
}

@media (min-width: 1200px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper {
        flex-direction: row
    }
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
        margin-left: 30px
    }
}

@media (max-width: 767px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

@media (min-width: 901px) and (max-width: 1199px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper {
        display: flex;
        justify-content: center
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper {
    display: flex;
    flex: 1 1 40%;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    justify-content: center;
    max-width: 384px;
    margin-right: auto;
    padding: 7px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .CardContainer__wrapper {
    gap: 0;
    padding: 24px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .CardContainer__header {
    margin-bottom: 24px
}

@media (max-width: 767px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper {
        margin: 0 auto
    }
}

@media (min-width: 901px) and (max-width: 1199px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper {
        margin: 0 auto
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContainer {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: .5rem;
    overflow: hidden;
    background-color: #261a46;
    background-image: linear-gradient(to bottom, #404858, #442176);
    border-radius: .75rem;
    aspect-ratio: 16/9
}

@media (max-width: 767px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContainer {
        max-width: 390px
    }
}

@media (min-width: 901px) and (max-width: 1199px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContainer {
        max-width: 390px
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background-color: #1c2028;
    border: 2px solid #738198;
    border-radius: .5rem
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.bronze {
    border-color: #ab5d30
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.silver {
    border-color: #4d7bcd
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.gold {
    border-color: #ffd40e
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.platinum {
    border-color: #077cfc
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.diamond {
    border-color: #7625f4
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .innerCardContainer.elite {
    border-color: #ff3c38
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContent {
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 20px
}

@media (max-width: 350px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContent {
        padding: 10px
    }
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardContent .username {
        font-size: 16px !important
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardHeader .username {
    color: inherit;
    font-weight: 600;
    font-size: 18px;
    text-align: left
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .cardHeader img {
    width: 20px;
    height: 20px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .contentBody {
    width: 100%
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexRow {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .slide {
    display: flex;
    justify-content: space-between;
    transition: .25s
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .slide:hover {
    transform: translate(8px)
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton {
    position: relative;
    display: inline-flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    background-color: transparent;
    border-radius: .125rem;
    transition: all .2s
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton:active {
    transform: scale(.98)
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton:disabled {
    opacity: .5;
    pointer-events: none
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton:hover {
    color: #fff;
    background-color: transparent
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .progressButton:hover svg {
    color: #fff
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexGap {
    display: flex;
    gap: 5px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexGap .percentageText {
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    text-align: left
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexGap .hoverable {
    position: relative;
    display: inline-block
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexGap .hoverable .tooltipText {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: left
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexGap .hoverable .tooltipText svg {
    width: 14px;
    height: 14px;
    fill: #738198
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meter {
    position: relative;
    width: 100%;
    height: 12px;
    margin: 10px 0;
    overflow: hidden;
    background-color: #442176;
    border-radius: 10px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #738198;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .1)
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.bronze {
    background-color: #ab5d30
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.silver {
    background-color: #4d7bcd
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.gold {
    background-color: #ffd40e
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.platinum {
    background-color: #077cfc
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.diamond {
    background-color: #7625f4
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .meterFill.elite {
    background-color: #ff3c38
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .flexBetween {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .milestoneWrap {
    display: flex;
    gap: 5px;
    align-items: center
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .milestoneWrap img {
    width: 16px;
    height: 16px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .cardWrapper .milestoneWrap .milestoneText {
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    text-align: left
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .startPlay {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-content: flex-start;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    text-align: left
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .startPlay svg {
    width: 25px;
    height: 25px;
    margin-right: 10px;
    fill: #738198
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
    display: flex;
    flex: 1 1 auto;
    gap: 15px;
    max-width: 55%;
    height: 100%
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer.openAdaptive {
    flex: 1 1 45%;
    justify-content: flex-end;
    margin-left: 20px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer.openAdaptive>div {
    max-width: 264px
}

@media (max-width: 767px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
        gap: 0;
        max-width: none;
        margin-top: 15px
    }
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.casino {
        margin-right: 15px
    }
}

@media (min-width: 901px) and (max-width: 1199px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer {
        max-width: none;
        margin-top: 15px
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper {
    position: relative;
    display: flex;
    flex-basis: 50%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .3s ease
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper:hover {
    transform: translateY(-10px)
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.casino .imageBlock:before {
    position: absolute;
    z-index: 20;
    padding: 2px;
    background: radial-gradient(circle at 100% 100%, #9327b0 0, #9327b0 6px, transparent 6px) 0% 0%/8px 8px no-repeat, radial-gradient(circle at 0 100%, #9327b0 0, #9327b0 6px, transparent 6px) 100% 0%/8px 8px no-repeat, radial-gradient(circle at 100% 0, #442176 0, #442176 6px, transparent 6px) 0% 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #442176 0, #442176 6px, transparent 6px) 100% 100%/8px 8px no-repeat, linear-gradient(#9327b0, #442176) 50% 50%/ calc(100% - 4px) calc(100% - 16px) no-repeat, linear-gradient(#9327b0, #442176) 50% 50%/ calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(0deg, transparent 15%, #9327b0 100%);
    border-radius: 6px;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper.sport .imageBlock:before {
    position: absolute;
    z-index: 20;
    padding: 2px;
    background: radial-gradient(circle at 100% 100%, #fdcd2d 0, #fdcd2d 6px, transparent 6px) 0% 0%/8px 8px no-repeat, radial-gradient(circle at 0 100%, #fdcd2d 0, #fdcd2d 6px, transparent 6px) 100% 0%/8px 8px no-repeat, radial-gradient(circle at 100% 0, #442176 0, #442176 6px, transparent 6px) 0% 100%/8px 8px no-repeat, radial-gradient(circle at 0 0, #442176 0, #442176 6px, transparent 6px) 100% 100%/8px 8px no-repeat, linear-gradient(#fdcd2d, #442176) 50% 50%/ calc(100% - 4px) calc(100% - 16px) no-repeat, linear-gradient(#fdcd2d, #442176) 50% 50%/ calc(100% - 16px) calc(100% - 4px) no-repeat, linear-gradient(0deg, transparent 15%, #fdcd2d 100%);
    border-radius: 6px;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .imageInnerBlock {
    position: relative;
    z-index: 21;
    height: 100%;
    padding: 2px 2px 0;
    overflow: hidden;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .imageInnerBlock img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title {
    position: relative;
    z-index: 21;
    flex: 1 1 auto;
    padding: .75rem 1rem;
    text-align: left;
    background: #442176
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title span {
    justify-content: flex-start;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    text-align: left
}

@media (max-width: 380px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title span {
        font-size: 12px
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title span span {
    display: none
}

@media (min-width: 768px) {
    .authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title span span {
        display: inline-block
    }
}

.authenticatedWelcomeSection .welcomeWrapper .welcomeContentWrapper .imagesContainer .imageWrapper .imageBlock .title span span svg {
    width: 14px;
    height: 14px;
    margin-right: 7px;
    margin-bottom: 2px;
    color: #fff
}

.vipSection {
    background-color: #261a46 !important
}

.vipSection .contentWrapper {
    display: flex;
    flex-direction: column;
    place-content: center;
    max-width: 1250px;
    margin: auto;
    gap: 1.5rem
}

@media (min-width: 1200px) {
    .vipSection .contentWrapper {
        flex-direction: row;
        gap: 4rem
    }
}

.vipSection .contentWrapper .textContainer {
    display: flex;
    flex-direction: column;
    place-content: center;
    gap: .5rem
}

@media (min-width: 1200px) {
    .vipSection .contentWrapper .textContainer {
        max-width: 50%
    }
}

.vipSection .contentWrapper .textContainer .title {
    font-weight: 700;
    line-height: normal;
    text-align: left;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .vipSection .contentWrapper .textContainer .title {
        font-size: 32px
    }
}

.vipSection .contentWrapper .textContainer .description {
    font-weight: 400;
    text-align: left;
    font-size: 18px
}

.vipSection .contentWrapper .textContainer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-top: 1.5rem;
    width: 100%;
    font-size: 14px;
    padding: 14px 20px
}

@media (min-width: 1200px) {
    .vipSection .contentWrapper .textContainer .btn {
        max-width: max-content;
        width: auto
    }
}

.vipSection .contentWrapper .featuresContainer {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

@media (min-width: 1200px) {
    .vipSection .contentWrapper .featuresContainer {
        max-width: 50%
    }
}

.vipSection .contentWrapper .featuresContainer .featureItem {
    display: flex;
    flex-direction: row;
    padding: 16px;
    color: inherit;
    background-color: #442176;
    border-radius: 5px;
    gap: 18px
}

.vipSection .contentWrapper .featuresContainer .featureItem .featureIcon {
    max-width: 2.5rem;
    margin-right: 18px
}

.vipSection .contentWrapper .featuresContainer .featureItem .featureTitle {
    font-weight: 700;
    text-align: left;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 5px
}

.vipSection .contentWrapper .featuresContainer .featureItem .featureDescription {
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    font-size: 16px
}

.supportSection {
    background-color: #442176 !important;
    position: relative
}

.supportSection .supportContainer {
    display: flex;
    flex-direction: column-reverse;
    max-width: 1250px;
    margin: auto;
    overflow: hidden
}

.supportSection .supportContainer .backgroundImage {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto
}

.supportSection .supportContainer .contentWrapper {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1250px;
    margin: auto
}

@media (min-width: 1100px) {
    .supportSection .supportContainer .contentWrapper {
        flex-direction: row;
        gap: 3rem
    }
}

.supportSection .supportContainer .contentWrapper .textContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    max-width: 568px
}

.supportSection .supportContainer .contentWrapper .textContainer .title {
    font-weight: 700;
    line-height: normal;
    text-align: left;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .supportSection .supportContainer .contentWrapper .textContainer .title {
        font-size: 32px
    }
}

.supportSection .supportContainer .contentWrapper .textContainer .description {
    font-weight: 400;
    text-align: left;
    font-size: 18px
}

.supportSection .supportContainer .contentWrapper .supportImage {
    max-width: 386px;
    margin: auto;
    padding: 0 1rem
}

@media (min-width: 640px) {
    .supportSection .supportContainer .contentWrapper .supportImage {
        padding: 0
    }
}

@media (min-width: 1100px) {
    .supportSection .supportContainer .contentWrapper .supportImage {
        margin-left: auto;
        margin-right: 0
    }
}

@media (max-width: 390px) {
    .supportSection .supportContainer .contentWrapper .supportImage {
        max-width: 275px
    }
}

.faqSection {
    background-color: #261a46 !important;
    position: relative
}

.faqSection .contentWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1250px;
    margin: auto
}

@media (min-width: 1201px) {
    .faqSection .contentWrapper {
        flex-direction: row;
        gap: 60px
    }
}

.faqSection .contentWrapper .titleContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    justify-content: center
}

.faqSection .contentWrapper .titleContainer h2 {
    font-weight: 700;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .faqSection .contentWrapper .titleContainer h2 {
        font-size: 32px
    }
}

@media (max-width: 1200px) {
    .faqSection .contentWrapper .titleContainer {
        margin-bottom: 20px
    }
}

.faqSection .contentWrapper .questionsBlock {
    display: flex;
    flex-direction: column;
    width: 100%
}

.faqSection .contentWrapper .questionsBlock .collapseBlock {
    width: 100%;
    margin-bottom: 15px;
    border: 1px solid #653ba1;
    border-radius: 6px
}

.faqSection .contentWrapper .questionsBlock .collapseBlock .top {
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    height: auto;
    background-color: #442176
}

.faqSection .contentWrapper .questionsBlock .collapseBlock .top .btn {
    position: relative;
    right: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    height: auto;
    padding: 10px 30px 10px 10px
}

.faqSection .contentWrapper .questionsBlock .collapseBlock .top .after {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    transition: all .3s;
    pointer-events: none;
    fill: #fff
}

.faqSection .contentWrapper .questionsBlock .collapseBlock .top .after svg {
    width: 100%;
    height: 100%
}

.faqSection .contentWrapper .questionsBlock .collapseBlock .collapse {
    height: auto;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height .35s ease;
    font-size: 16px;
    background-color: #442176
}


.faqSection .contentWrapper .questionsBlock .collapseBlock .collapse .collapseContent {
    padding: 15px 20px;
    color: #fff
}

.faqSection .contentWrapper .questionsBlock .collapseBlock.open .top {
    border-radius: 6px 6px 0 0
}

.faqSection .contentWrapper .questionsBlock .collapseBlock.open .top .btn {
    color: #fff;
    border-bottom: 1px solid #653ba1;
    border-radius: 6px 6px 0 0
}

.faqSection .contentWrapper .questionsBlock .collapseBlock.open .top .after {
    transform: translateY(-50%) rotate(-180deg)
}

.faqSection .contentWrapper .desktopCta {
    display: none
}

.faqSection .contentWrapper .desktopCta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 20px
}

@media (min-width: 1201px) {
    .faqSection .contentWrapper .desktopCta {
        display: inline-flex
    }
}

.faqSection .contentWrapper .mobileCta {
    display: inline-flex;
    width: 100%;
    margin-top: 15px
}

.faqSection .contentWrapper .mobileCta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    padding: 14px 20px;
    width: 100%
}

@media (min-width: 1201px) {
    .faqSection .contentWrapper .mobileCta {
        display: none
    }
}

.faqSection .contentWrapper .mobileCta .ctaButton {
    width: 100%
}

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: rgba(255, 255, 255, .804);
    font-size: 18px
}

.empty h4 {
    font-size: 24px
}

@media (max-width: 500px) {
    .empty {
        font-size: 14px
    }
    .empty h4 {
        margin-bottom: 0;
        font-size: 20px
    }
}

.betsSection {
    padding: 40px 0;
    padding-bottom: 0 !important;
    background-color: #261a46 !important
}

@media (min-width: 900px) {
    .betsSection {
        padding-top: 3rem;
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.betsSection .betsContainer {
    max-width: 1250px;
    margin: auto
}

.betsSection .betsHeader {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    margin-bottom: 30px
}

@media (max-width: 900px) {
    .betsSection .betsHeader {
        text-align: left
    }
}

.betsSection .title {
    color: #fff;
    font-weight: 700;
    font-size: 30px
}

.betsSection .subtitle {
    color: #fff;
    font-weight: 400;
    font-size: 18px
}

.betsSection .tableWrapper {
    overflow-x: auto;
    padding: 0 15px
}

.betsSection .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #1d1438;
    border-radius: 10px 10px 0 0;
    padding: 15px 15px 5px
}

.betsSection .table th,
.betsSection .table td {
    padding: 1rem;
    text-align: left
}

.betsSection .table th {
    font-weight: 600;
    color: rgba(255, 255, 255, .804);
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

.betsSection .table td {
    color: #fff
}

.betsSection .table tr:nth-child(2n) {
    background-color: #442176
}

.betsSection .table thead tr th {
    width: 20%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

@media (max-width: 740px) {
    .betsSection .table thead tr th:nth-child(2) {
        display: none
    }
}

@media (max-width: 560px) {
    .betsSection .table thead tr th:nth-child(3) {
        display: none
    }
}

@media (max-width: 400px) {
    .betsSection .table thead tr th:nth-child(4) {
        display: none
    }
}

.betsSection .table thead tr th:first-child {
    text-align: left
}

.betsSection .table thead tr th:last-child {
    text-align: right
}

.betsSection .table thead tr th span {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer
}

.betsSection .table tbody tr td {
    width: 20%;
    height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betsSection .table tbody tr td:first-child {
    text-align: left
}

.betsSection .table tbody tr td:last-child {
    text-align: right
}

@media (max-width: 740px) {
    .betsSection .table tbody tr td:nth-child(2) {
        display: none
    }
}

@media (max-width: 560px) {
    .betsSection .table tbody tr td:nth-child(3) {
        display: none
    }
}

@media (max-width: 400px) {
    .betsSection .table tbody tr td:nth-child(4) {
        display: none
    }
}

.betsSection .table tbody tr td .game,
.betsSection .table tbody tr td .name {
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: transform .1s ease-in-out;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betsSection .table tbody tr td .game:active,
.betsSection .table tbody tr td .name:active {
    transform: scale(.95)
}

.betsSection .table .rightAlign {
    text-align: right
}

.betsSection .table .currency {
    color: #2dc53a
}

.betsSection .table .multiplier {
    font-weight: 600
}

.authenticatedBetsSection {
    padding: 20px 15px;
    background-color: #442176 !important
}

@media (min-width: 901px) {
    .authenticatedBetsSection {
        padding-top: 3rem;
        padding-right: 2rem;
        padding-left: 2rem
    }
}

@media (max-width: 900px) {
    .authenticatedBetsSection {
        margin: 0 -15px
    }
}

.authenticatedBetsSection .betsContainer {
    max-width: 1250px;
    margin: auto
}

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

.authenticatedBetsSection .title .left {
    display: flex;
    align-items: center;
    font-size: 18px
}

.authenticatedBetsSection .title .left svg {
    width: 23px;
    height: 23px;
    margin-right: 10px;
    margin-bottom: 3px;
    fill: #738198
}

.authenticatedBetsSection .title .left h4 {
    margin-bottom: 0
}

.authenticatedBetsSection .title .left .btnLabel {
    margin-left: 8px;
    padding: 3px 6px;
    font-size: 16px;
    color: #808d98;
    font-weight: 400;
    background: #442176;
    border-radius: 3px;
    margin-bottom: 6px
}

.authenticatedBetsSection .title .right {
    display: flex;
    align-items: center
}

.authenticatedBetsSection .title .right .arrow-swiper[class*=swiper-button-disabled] {
    cursor: auto;
    opacity: .5
}

.authenticatedBetsSection .title .right .backward {
    border-right: none;
    border-radius: 10px 0 0 10px;
    transition: transform .3s ease-in-out
}

.authenticatedBetsSection .title .right .forward {
    border-radius: 0 10px 10px 0;
    margin-left: -2px
}

.authenticatedBetsSection .title .right .arrow-swiper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 36px;
    border: 2px solid #3b4354;
    cursor: pointer;
    transition: transform .1s ease-in-out
}

.authenticatedBetsSection .title .right .arrow-swiper:active {
    transform: scale(.95)
}

.authenticatedBetsSection .title .right .arrow-swiper svg {
    transition: transform .2s ease-in-out;
    fill: #738198
}

.authenticatedBetsSection .tableWrapper {
    overflow-x: auto
}

.authenticatedBetsSection .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px 10px 0 0;
    padding: 15px 0 40px
}

.authenticatedBetsSection .table th,
.authenticatedBetsSection .table td {
    padding: 1rem;
    text-align: left
}

.authenticatedBetsSection .table th {
    font-weight: 600;
    color: #a0aec0;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.authenticatedBetsSection .table td {
    color: #fff
}

.authenticatedBetsSection .table tr:nth-child(2n) {
    background-color: #1d1438
}

.authenticatedBetsSection .table thead tr th {
    width: 20%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

@media (max-width: 740px) {
    .authenticatedBetsSection .table thead tr th:nth-child(2) {
        display: none
    }
}

@media (max-width: 560px) {
    .authenticatedBetsSection .table thead tr th:nth-child(3) {
        display: none
    }
}

@media (max-width: 400px) {
    .authenticatedBetsSection .table thead tr th:nth-child(4) {
        display: none
    }
}

.authenticatedBetsSection .table thead tr th:first-child {
    text-align: left
}

.authenticatedBetsSection .table thead tr th:last-child {
    text-align: right
}

.authenticatedBetsSection .table thead tr th span {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer
}

.authenticatedBetsSection .table tbody tr td {
    width: 20%;
    height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.authenticatedBetsSection .table tbody tr td:first-child {
    text-align: left
}

.authenticatedBetsSection .table tbody tr td:last-child {
    text-align: right
}

@media (max-width: 740px) {
    .authenticatedBetsSection .table tbody tr td:nth-child(2) {
        display: none
    }
}

@media (max-width: 560px) {
    .authenticatedBetsSection .table tbody tr td:nth-child(3) {
        display: none
    }
}

@media (max-width: 400px) {
    .authenticatedBetsSection .table tbody tr td:nth-child(4) {
        display: none
    }
}

.authenticatedBetsSection .table tbody tr td .game,
.authenticatedBetsSection .table tbody tr td .name {
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform .1s ease-in-out
}

.authenticatedBetsSection .table tbody tr td .game:active,
.authenticatedBetsSection .table tbody tr td .name:active {
    transform: scale(.95)
}

.authenticatedBetsSection .table tbody tr td .game:hover,
.authenticatedBetsSection .table tbody tr td .name:hover {
    color: #fff
}

.authenticatedBetsSection .table .rightAlign {
    text-align: right
}

.authenticatedBetsSection .table .currency {
    color: #2dc53a
}

.authenticatedBetsSection .table .multiplier {
    font-weight: 600
}

.fade-enter {
    opacity: 0
}

.fade-enter-active {
    opacity: 1;
    transition: opacity .5s ease-in
}

.fade-exit,
.fade-exit-active {
    display: none
}

.gamesSection {
    display: flex;
    flex-direction: column;
    padding: 20px 15px !important;
    background-color: #1d1438 !important
}

.gamesSection.newYear {
    padding-bottom: 0
}

.gamesSection .gamesContainerWrapper {
    max-width: 1250px;
    margin: auto auto 15px;
    overflow: hidden;
    width: 100%
}

.gamesSection .gamesContainerWrapper .gamesContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 10px 0 0
}

.gamesSection .gamesContainerWrapper .gamesContainer [class*=swiper-wrapper] {
    margin-top: 5px
}

.gamesSection .gamesContainerWrapper .gamesContainer .gamesBoxPlaceholder {
    display: flex;
    width: 100%;
    overflow: hidden
}

@media (max-width: 1099px) {
    .gamesSection .gamesContainerWrapper .gamesContainer {
        width: 100%;
        margin: 10px auto 0
    }
}

.dynamicSectionsSkeleton {
    width: 100%
}

.dynamicSectionsSkeletonSection {
    margin-top: 24px
}

.dynamicSectionsSkeletonSection:first-child {
    margin-top: 0
}

.dynamicSectionsSkeletonHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px
}

.dynamicSectionsSkeletonIcon,
.dynamicSectionsSkeletonTitle,
.dynamicSectionsSkeletonCard {
    background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
    background-size: 200% 100%;
    animation: dynamicSectionsSkeletonShimmer 1.2s ease-in-out infinite
}

.dynamicSectionsSkeletonIcon {
    width: 24px;
    height: 24px;
    border-radius: 6px
}

.dynamicSectionsSkeletonTitle {
    height: 18px;
    width: 220px;
    max-width: 65%;
    border-radius: 6px
}

.dynamicSectionsSkeletonCards {
    --skeleton-cards-per-view: 6;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden
}

.dynamicSectionsSkeletonCard {
    display: block;
    flex: 0 0 calc((100% - (var(--skeleton-cards-per-view) - 1) * 10px) / var(--skeleton-cards-per-view));
    aspect-ratio: 1/1.32;
    border-radius: 10px
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 rgba(0, 231, 1, .4)
    }
    30% {
        box-shadow: 0 0 2px 2px rgba(0, 231, 1, .4)
    }
    70% {
        box-shadow: 0 0 2px 2px rgba(0, 231, 1, .4)
    }
    to {
        box-shadow: 0 0 rgba(0, 231, 1, .4)
    }
}

@keyframes dynamicSectionsSkeletonShimmer {
    0% {
        background-position: 200% 0
    }
    to {
        background-position: -200% 0
    }
}

.tournamentsSection {
    display: flex;
    flex-direction: column;
    padding: 20px 15px !important;
    background-color: #1d1438 !important
}

.tournamentsSection .tournamentsContainerWrapper {
    width: 100%;
    max-width: 1250px;
    margin: auto;
    overflow: hidden
}

.tournamentsSection .tournamentsContainerWrapper .title {
    display: flex;
    justify-content: space-between
}

.tournamentsSection .tournamentsContainerWrapper .title .left {
    display: flex;
    align-items: center;
    font-size: 18px
}

.tournamentsSection .tournamentsContainerWrapper .title .left svg {
    width: 23px;
    height: 23px;
    margin-right: 10px;
    margin-bottom: 6px;
    fill: #748198
}

.tournamentsSection .tournamentsContainerWrapper .title .left .btnLabel {
    margin-bottom: 6px;
    margin-left: 8px;
    padding: 3px 6px;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    background: #653ba1;
    border-radius: 3px
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer {
    display: flex;
    grid-auto-columns: 50%;
    width: 100%;
    padding-top: 10px;
    overflow-x: auto
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .swiper-slide {
    transition-duration: .3s
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper {
    height: 100%;
    transition: all .3s;
    will-change: opacity;
    scroll-snap-align: start
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item,
.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .itemInner {
    height: 100%
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item {
    background-color: #342563;
    border-radius: 6px
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner {
    display: grid;
    grid-template-areas: "heading heading timer" "buttons buttons timer" "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr .8fr 1.2fr;
    gap: calc(20px - 1rem) 0;
    padding-top: 20px
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading {
    grid-area: heading;
    padding-left: 1rem
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top {
    display: inherit;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top.isMobile {
    font-size: 17px
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .bottom {
    display: inherit;
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis
}

@media (max-width: 500px) {
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top {
        font-size: 16px
    }
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top.isMobile {
        font-size: 15px
    }
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .bottom {
        font-size: 14px
    }
}

@media (max-width: 380px) {
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top {
        font-size: 16px
    }
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .top.isMobile {
        font-size: 15px
    }
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .heading .bottom {
        font-size: 14px
    }
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .buttons {
    grid-area: buttons;
    align-content: flex-end;
    padding-bottom: 1rem;
    padding-left: 1rem
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .buttons .buttonsContainer {
    display: flex;
    align-items: center
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .buttons .buttonsContainer .btn {
    padding: 10px 15px;
    font-size: 14px;
    background: linear-gradient(45deg, #fdae05, #fdcd2d)
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .buttons .buttonsContainer .btn:hover {
    background: #fdcd2d
}

@media (max-width: 380px) {
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .buttons .buttonsContainer .btn {
        padding: 8px 14px;
        font-size: 12px
    }
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .timer {
    display: flex;
    grid-area: timer;
    justify-content: flex-end;
    padding-right: 1rem;
    padding-bottom: 1rem;
    overflow: hidden
}

@media (max-width: 380px) {
    .tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .timer {
        padding-right: 10px;
        transform: scale(.9);
        transform-origin: right
    }
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .tournamentFooter {
    grid-area: footer
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .tournamentFooter .homeFooterWrapper {
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    height: 3rem;
    padding: .75rem .5rem .75rem 1rem;
    border: 0;
    border-color: #261a46;
    border-style: solid;
    border-top-width: 2px;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .tournamentFooter .homeFooterWrapper .footerInner {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-weight: 600
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .itemInner .tournamentFooter .homeFooterWrapper .footerInner svg {
    margin-right: 8px;
    color: #fff
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsContainer .itemWrapper .item .nothingFound {
    color: inherit
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsLoader {
    position: relative;
    width: 100%;
    height: 202px
}

.tournamentsSection .tournamentsContainerWrapper .homeTournamentsLoader .loaderComponent {
    background-color: #150e2a
}

.itemPlaceholder .itemInner {
    display: flex !important;
    flex-direction: column
}

.itemPlaceholder .heading {
    max-width: 500px;
    padding-right: 10px
}

.itemPlaceholder .heading .top {
    margin-bottom: 10px;
    text-wrap: wrap !important
}

.itemPlaceholder .nothingFound {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: auto;
    margin: 0;
    padding: 20px;
    font-size: 20px
}

.itemPlaceholder .tournamentFooter {
    margin-top: auto
}

.communitySection {
    background-color: #442176 !important
}

.communitySection .contentWrapper {
    gap: 4rem;
    flex-direction: row;
    max-width: 1250px;
    display: flex;
    margin: auto
}

@media (max-width: 1200px) {
    .communitySection .contentWrapper {
        gap: 2rem
    }
}

@media (max-width: 800px) {
    .communitySection .contentWrapper .right {
        max-width: 400px
    }
}

@media (max-width: 700px) {
    .communitySection .contentWrapper {
        flex-direction: column-reverse
    }
    .communitySection .contentWrapper .right {
        max-width: none
    }
}

.communitySection .contentWrapper .left {
    width: 100%;
    margin: auto
}

.communitySection .contentWrapper .left img {
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    user-select: none
}

@media (min-width: 1200px) {
    .communitySection .contentWrapper .left {
        max-width: 600px
    }
}

.communitySection .contentWrapper .right {
    justify-content: center;
    flex-direction: column;
    display: flex
}

.communitySection .contentWrapper .right .title {
    font-size: 38px;
    color: #fff;
    font-weight: 600;
    display: inline-flex;
    align-items: center
}

@media (max-width: 1199px) {
    .communitySection .contentWrapper .right .title {
        font-size: 32px
    }
}

.communitySection .contentWrapper .right .subtitle {
    font-size: 18px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    margin-top: .5rem
}

.communitySection .contentWrapper .right .btn {
    padding: 14px 20px;
    font-size: 14px;
    margin-top: 2rem;
    font-weight: 600;
    width: auto;
    max-width: max-content;
    background: linear-gradient(45deg, #fdae05, #fdcd2d)
}

.communitySection .contentWrapper .right .btn:hover {
    background: #fdcd2d
}

@media (max-width: 1199px) {
    .communitySection .contentWrapper .right .btn {
        width: 100%;
        max-width: 100%
    }
}

@media screen and (max-width: 1200px) and (min-width: 1035px) {
    .communitySectionRightBarOpen .contentWrapper .right {
        max-width: 400px
    }
}

@media screen and (max-width: 1035px) and (min-width: 800px) {
    .communitySectionRightBarOpen .contentWrapper {
        flex-direction: column-reverse
    }
    .communitySectionRightBarOpen .contentWrapper .right {
        max-width: none
    }
}

.mainContainer .homeWrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto
}

.mainContainer .homeWrapper .gamesContainerWrapper {
    margin-bottom: 0
}

.mainContainer .homeWrapper .homeSectionsWrapper.auth {
    margin-top: 20px;
    margin-bottom: 20px
}

@media (max-width: 900px) {
    .mainContainer .homeWrapper .homeSectionsWrapper {
        margin-top: 20px !important
    }
}

.mainContainer .homeWrapper .homeSectionsWrapper .systemSection+.systemSection {
    margin-top: 10px
}

.mainContainer .homeWrapper .homeSection {
    padding: 40px 15px;
    overflow: hidden
}

.mainContainer .homeWrapper .homeSection:nth-child(2n) {
    color: inherit;
    background-color: #442176
}

.mainContainer .homeWrapper .homeSection:nth-child(odd) {
    color: inherit;
    background-color: #261a46
}

.mainContainer .homeWrapper .homeSection:first-child {
    margin-top: -20px;
    padding-top: 0;
    background: #261a46
}

.mainContainer .homeWrapper .homeSection:last-child {
    margin-bottom: -20px
}

@media (max-width: 900px) {
    .mainContainer .homeWrapper .homeSection {
        margin-left: -15px;
        margin-right: -15px
    }
}

.mainContainer .authenticatedWelcomeSection.second+.homeSectionsWrapper {
    margin-top: 5px
}

.mainContainer .systemSection {
    padding: 0 15px
}

.mainContainer .systemSection .category-tabs {
    margin: 0
}

.mainContainer .systemSection .systemSectionWrapper {
    max-width: 1250px;
    margin: auto
}

@media (max-width: 900px) {
    .mainContainer .systemSection {
        padding: 0
    }
    .mainContainer .systemSection .search-lobby {
        margin: 0 auto;
        padding: 0
    }
}

.privacyContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.privacyContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.privacyContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.privacyContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.privacyContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.privacyContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.privacyContainer .privacyBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.privacyContainer .privacyBlock h2 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px
}

.privacyContainer .privacyBlock h2:first-child {
    margin-top: 20px
}

.privacyContainer .privacyBlock p {
    width: 100%;
    font-weight: 400;
    font-size: 16px
}

.privacyContainer .privacyBlock p:first-child {
    margin-top: 20px;
    color: #ff902a
}

@media (max-width: 1100px) {
    .privacyContainer .privacyBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .privacyContainer .privacyBlock p {
        font-size: 13px
    }
}

@media (max-width: 900px) {
    .privacyContainer {
        padding: 15px
    }
    .privacyContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .privacyContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .privacyContainer .headerBlock .info {
        font-size: 13px
    }
}

.promotionsContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.promotionsContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.promotionsContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.promotionsContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.promotionsContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.promotionsContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.promotionsContainer .promotionsBlock {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.promotionsContainer .promotionsBlock .item {
    width: 33.33333%;
    margin-top: 30px;
    padding: 0 15px
}

.promotionsContainer .promotionsBlock .item .box {
    position: relative;
    align-items: center;
    width: 100%;
    background: #442176;
    border-radius: 5px
}

.promotionsContainer .promotionsBlock .item .box .image img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.promotionsContainer .promotionsBlock .item .box .info {
    position: relative;
    align-items: center;
    padding: 15px;
    font-size: 13px
}

.promotionsContainer .promotionsBlock .item .box .info .col {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.promotionsContainer .promotionsBlock .item .box .info .col span {
    display: inline-block;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    text-transform: none
}

.promotionsContainer .promotionsBlock .item .box .info .col span.ended {
    color: #ec193f
}

.promotionsContainer .promotionsBlock .item .box .info .col span.active {
    color: #5cb503
}

.promotionsContainer .promotionsBlock .item .box .info .col span svg {
    margin-bottom: 2px
}

@media (min-width: 600px) and (max-width: 800px) {
    .promotionsContainer .promotionsBlock .item .box .info .col span {
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .promotionsContainer .promotionsBlock .item .box .info .col span {
        font-size: 12px
    }
}

.promotionsContainer .promotionsBlock .item .box .info .col .nubmer {
    display: inline-block;
    padding-left: 22px
}

.promotionsContainer .promotionsBlock .item .box .date {
    position: relative;
    display: flex;
    align-items: center;
    padding: 15px;
    text-align: center;
    background: #442176;
    border-radius: 0 0 6px 6px
}

.promotionsContainer .promotionsBlock .item .box .date .time {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase
}

.promotionsContainer .promotionsBlock .item .box .date .time span {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-transform: none
}

.promotionsContainer .promotionsBlock .item .box .date .btn {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 110px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    color: #fff;
    font-weight: 400;
    line-height: 40px;
    border: 1px solid #653ba1
}

@media (max-width: 1490px) {
    .promotionsContainer .promotionsBlock .item {
        width: 50%
    }
}

@media (max-width: 600px) {
    .promotionsContainer .promotionsBlock .item {
        width: 100%
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    .promotionsContainer .promotionsBlock .item {
        width: 100%
    }
}

@media (max-width: 900px) {
    .promotionsContainer {
        padding: 15px
    }
    .promotionsContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .promotionsContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .promotionsContainer .headerBlock .info {
        font-size: 13px
    }
}

.pwaBackground {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75)
}

.pwaModal {
    position: absolute;
    top: 50%;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pwaModal .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 30px);
    max-width: 360px;
    min-height: 50px;
    margin-bottom: 15px;
    background-color: #1d1438;
    border-radius: 12px
}

.pwaModal .wrapper .close {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    margin: -10px -10px 0 0;
    padding: 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 14px
}

.pwaModal .wrapper .image {
    position: relative;
    flex: none;
    width: 100%
}

.pwaModal .wrapper .image .spacer {
    display: block;
    width: 100%;
    padding-bottom: 65.2174%;
    content: ""
}

.pwaModal .wrapper .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%
}

.pwaModal .wrapper .title {
    position: relative;
    margin: 15px 0 0;
    font-size: 20px;
    text-align: center
}

.pwaModal .wrapper .title:before,
.pwaModal .wrapper .title:after {
    position: absolute;
    top: 3px;
    display: block;
    width: 20px;
    height: 20px;
    content: ""
}

.pwaModal .wrapper .title:before {
    left: -30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAqCAMAAAD/A0kuAAABelBMVEUAAAD/vg3/qQf/gkbzWlLwU1DwU1H/xCvwU1DwVFH/1DD/yyjwU1DwU1DvVVX1UWJdleL/yyj/ySjwU1BCpvb/yyjwVFBCpvbwVFH/rRH/pABGqvd3meD/pwbyZUr/pQT/oQCDgMbwU1D/oAD/ogD/yyj/rgz/zCvyVVJEqPn9vy7/pAAqedRDpvbKHmBUcMJDpvbsQXuFVaFrZrT/yyjwU1D/yij8pyeIfsXxVFDuQXvxU1HwU1HuQXrzbEr/zCj/zi2dfsGFWaz6kzn/yynYTYm4YKHsQXt+cLr/uBfxYEz/rAtyYq9ebb17hM74mTnTJmebSpDSKWjVKWjmrEn/yyn/tRHwVFD/owBCpfX/yifsQHr/oADwU1DFGVz/thPlgD1IovHiNnNQnewZdtM2l+wge9aSdbu2YKHeRYIkgduLecHXTIlkkdxsjNd9gspDdMmWbrWgbbGqZ6q/W5zRUI68IWTMIWEsjOJtd8NuY6+TRo6ZOYHVk1G2QeFrAAAAWXRSTlMAFvEHJPPjw5rtDd/UujAO+ejNyJCFgHJUTjMcDuzLwLCqo4x9a1k5OCkpJ/779eHa2r6zr6yino+Nc29kX1RIHxwXEvPu7enh4NrY1c6/trOjnYR7e2dGRQv19gQAAAJmSURBVDjLhdMJV9pAEAfwtSGXgAgWCsilXAqtttajVutRe993m2Q3bQhnPWprtfd376wkmsBC/u8Rlvd+TIYZgiBcYAwxEg8gRt4Tecc6VqvISmiaEBZeJWTGOmLMWacgIUEWDhCec+EUvAQicQwbojWc+OqVWYQyG4gZgaxtFRfFChyTSWRhMbzJxD5BVCGiPZPUJFwiqhpl6whY/4rsnGDZr95BzGxFixW0RFyDHV0W0eDIROgePhQKCXiLkcF2hhCpe8phnEW+CTIErxMSh5vD6BL5fAmBlZhull52BJKIRtRwxZonv860l5SLpzPJqDTPuzOJ+eBSesexMWg/DPttRqaMZiSN8cPRXj1pT6s8SpcvWfYCxh9hM0MSJyTmsOpyn+AKZ3eT4P/qsOqbPpvDObubacI77b8HvTiP00n7d/qEJYf99MvY7sHVbNIxwTGHPTGUZxZiD8Vh9a+KYm4zcb/tmIqiTLkeqyD/KOLfhAYC/KrL1lpgjbvOLcIzv+FXwyPw3+F9LntsAN7Vbrq2IKGyqi7GCFlzWW2fFu5o989LT/BB+FAMi7IsuW1LgXzTNCjNTvrcHlF7oEHupZg2gTG27HeDNrEHtmNOMXEJMLW61qZWaWuQL4rJLk1bBgvbsBvW2nTW7IVkH6+80E8Of1K7S+0eXcw4GpjQk2b9c0NpUdsZP23nFhqc2/PN+u8axQfdW1xjO5sv6PqPGvw4yD58CUoPzStdP2yANWF+UNorC7R381iDtG4gzzxt1v/Q3o/oQLzzcg56p+ukpb3zeu4vDNIq7Z3rl+vNhuGBXHwe/QewZbRtc2nFdAAAAABJRU5ErkJggg==) no-repeat;
    background-size: 20px
}

.pwaModal .wrapper .title:after {
    right: -30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAqCAMAAAAd31JXAAABfVBMVEUAAAD/pwX/uRfHG17yVlT7dFfwVFFYmObvVFHwU1CEhdTwU1DwU1DxVFPxUlb/yyj/yin/tRj/xBzwU1D/yynwU1BDpvZDpff/yyn/zCr/pAD+nxf9vipHqfpQnevwU1D/oQD/yyjzYkv/yCnwVFD/oQD+ty+LfMP/zCj/ogr/ogDxU1HxVFH5vzP/ogBHqPgoedNjkd1pj9pCpvZbbr7sQXvvU1BlaLj5kTzwVFH/ogDvU1HxVFGMfMT/sxD/tBLxU1HuQnzuQnv0dEjxVFDzVlOIYrNKrf9PcsT/oACxZKVlZbXgSITsQHr/rAv/vBmEa7J7W6eNUZz0eUT/rwzRJmb/oACgRo7SKWaDgMj/yynTKmr/zCr/zCj/owBCpfX/yijsQHr/oADvU1D/uhfhckEcd9TlOXTBGFybcLWvZaeIe8MjgdvWS4lLn+85m+4zlOnEWJjeSIXkRH/hNXFui9V2h9A9eM62J2zNImNjg89/W6WNQoyjP4XIjmBZ401GAAAAX3RSTlMA9yb+Igns/eSHCfDZMBjo2hMMuLSqh3txPC8oHxn++PLf2dPKxbmQjIx9aFlOSyH+9+3o1cjDwq6dm5J5cXFiYV5KRkUpJA/o5+Pg4NvX1NDJycK/vq+sqqidkYFoW0eW0wUAAAJgSURBVDjLjdJ3W9pQFAbwU5GEEYaMliVUEGRbW2ud1Tpq994r49YAAoqCo/Oze29CSII3Prx/5Ul+z8nJewNDmd4ASsY5L+Uug4KD2/EYqLE7UJliwwhNa9c3pYn+WISWgBInSgHArstogUEOoGUrDTDJ33EpVn/bOIVGp/yajZF9E6FQZGwDMfbLNCIIPsB4V2sgJ+BkGA9l7JTgixrLciz6sfXTKORCE2DIAgpC4nt+DGhxrODFqsVitX80KKUsSreI88AHScpqDaJtiho85KBaKPwAgADANkKrYJmyOwVKEn4hk6+4GaXY2UtufR0AvE61gUWB5K3SwA3+ulnaX0rStbFBWelICHcdB6qNCD917CSnao9qBU6COXnBgEsIlcA6FUHH5DcMD5YrBobtq/9G7EBBrYBlKTuEXcnfewa8xHi0j4o/lpbN9jPPnxvwzo5eQDwbM49leb5p03E/s0DJDI/TNmLrPDvAtlkz4VU3h5eO+jNp94JXpw/EBhl8ZMJeBnH2AP79txAK6va52E1iy3ZNuIzQyhdBqJBjLOljRXGfJ1uIJuxk3DnfNwzCbk6zT0ScU4IbBgzUEg7a2B4nCd4Xe3WCJUm6T7Msf0IGH/EqtmFsZWcUoa2Mj6Re3yM7BCj2NgbKFmpxnbNz2/vCi3cJCt1U3s0eq/iwJctPvWCRu+q4uS62tT+y/OghWGUTkxOCT8Xar7rtDZGWY0ldLLaHZ3XbJztckbWmiNNmyZ6vB5KeOb6Bbe+fLM+74OqskW57eM+PQ5Lebaf11/YVRgjbacm37sFImR9ZwgWP6LbeiSVHOgAAAABJRU5ErkJggg==) no-repeat;
    background-size: 20px
}

.pwaModal .wrapper .text {
    max-width: 240px;
    margin: 15px 0 0;
    font-size: 13px;
    text-align: center
}

.pwaModal .wrapper .button {
    width: 100%;
    padding: 15px 15px 20px
}

.pwaModal .wrapper .button button {
    display: block;
    width: 100%;
    max-width: 240px;
    height: 48px;
    margin: auto;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    background-color: #ff902a;
    border-radius: 6px;
    outline: none
}

.pwaContainer {
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 20px;
    background: #1d1438
}

.pwaContainer .caption {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #653ba1
}

.pwaContainer .caption .text {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    color: inherit;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .3px;
    text-transform: uppercase
}

.pwaContainer .caption .text svg {
    margin: 0 9px 0 -1px;
    font-size: 26px
}

.pwaContainer .caption .btnLeft {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 35px;
    padding: 0 15px 0 25px;
    color: inherit;
    background: #653ba1;
    border-radius: 6px;
    cursor: pointer
}

.pwaContainer .caption .btnLeft svg {
    position: absolute;
    top: 50%;
    left: 7px;
    margin-top: 1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.pwaContainer .item {
    margin-bottom: 20px
}

.pwaContainer .item .head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 5px;
    color: inherit;
    font-weight: 500;
    font-size: 15px
}

.pwaContainer .item .head .number {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    color: inherit;
    font-size: 13px;
    background-color: #fdcd2d;
    border-radius: 3px
}

.pwaContainer .item .head .iconIos {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    padding: 5px;
    background: rgba(255, 255, 255, .2);
    border-radius: 4px
}

.pwaContainer .item .head .iconIos svg {
    width: 20px;
    height: 20px
}

.pwaContainer .item .bottom {
    padding-left: 34px;
    color: rgba(255, 255, 255, .804)
}

.pwaContainer .alert {
    padding: 15px;
    color: inherit;
    text-align: center;
    background: #1d1438;
    border: 1px solid #fdcd2d;
    border-radius: 6px
}

.recoverySection {
    position: relative
}

.recoverySection .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    height: 65vh;
    margin: auto;
    white-space: nowrap
}

.recoverySection .loader {
    height: 100px
}

.recoverySection .loader img {
    width: 80px;
    height: 80px
}

.recoverySection .text {
    font-size: 28px
}

.responsibilityContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.responsibilityContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.responsibilityContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.responsibilityContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.responsibilityContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.responsibilityContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.responsibilityContainer .responsibilityBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.responsibilityContainer .responsibilityBlock h2 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px
}

.responsibilityContainer .responsibilityBlock h2:first-child {
    margin-top: 20px
}

.responsibilityContainer .responsibilityBlock p {
    width: 100%;
    font-weight: 400;
    font-size: 16px
}

.responsibilityContainer .responsibilityBlock p:first-child {
    margin-top: 20px
}

@media (max-width: 1100px) {
    .responsibilityContainer .responsibilityBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .responsibilityContainer .responsibilityBlock p {
        font-size: 13px
    }
}

@media (max-width: 900px) {
    .responsibilityContainer {
        padding: 15px
    }
    .responsibilityContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .responsibilityContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .responsibilityContainer .headerBlock .info {
        font-size: 13px
    }
}

.settingsContainer {
    position: relative;
    display: flex;
    width: 100%;
    padding: 0;
    background: #442176;
    border-radius: 5px
}

.settingsContainer .inputControl {
    color: #fff !important;
    background-color: #261a46 !important;
    border: 2px solid transparent !important
}

.settingsContainer .name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 220px;
    margin: auto;
    font-size: 15px
}

.settingsContainer .name .btnName {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px
}

.settingsContainer .name .btnName svg {
    position: relative;
    top: .05em;
    margin-left: 5px;
    font-size: 13px
}

.settingsContainer .name.active .btnName {
    display: none
}

.settingsContainer .name .change {
    position: relative;
    display: flex
}

.settingsContainer .name .change input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    color: #fff;
    font-size: 1em;
    background-color: initial;
    border: 2px solid transparent;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.settingsContainer .name .change input:not([readonly]):focus {
    border-color: #653ba1
}

.settingsContainer .name .change .submit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 15px;
    color: rgba(255, 255, 255, .804);
    cursor: pointer
}

.settingsContainer .name .change .submit:hover,
.settingsContainer .name .change .submit:focus {
    color: #fff
}

.settingsContainer .settingsContent .preferences .form-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0
}

.settingsContainer .settingsContent .preferences .form-checkbox label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    cursor: pointer
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formLabel {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    user-select: none;
    touch-action: manipulation
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField {
    position: relative
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox {
    cursor: pointer
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input {
    display: none
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input:checked+.label:before {
    background: #fdae05
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input:checked+.label:after {
    left: calc(100% - 15px)
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input+.label {
    position: relative;
    display: block;
    width: 33px;
    height: 10px;
    cursor: pointer
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input+.label:before {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(216, 216, 216, .18);
    border-radius: 5px;
    transition: all .3s;
    content: ""
}

.settingsContainer .settingsContent .preferences .form-checkbox label .formField .checkBox input+.label:after {
    position: absolute;
    top: calc(50% - 9px);
    left: -3px;
    display: block;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 4px;
    transition: all .3s;
    content: ""
}

.settingsContainer .settingsContent .preferences .form-checkbox:nth-child(odd) {
    background-color: #2c323f
}

.settingsContainer .settingsContent .withPager .list {
    position: relative
}

.settingsContainer .settingsContent .withPager .list.isLoader {
    min-height: 500px
}

.settingsContainer .settingsContent .withPager .list .responsive {
    position: relative;
    display: block;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.settingsContainer .settingsContent .withPager .list .responsive table {
    width: 100%;
    text-align: left;
    border-collapse: collapse
}

.settingsContainer .settingsContent .withPager .list .responsive table thead tr th {
    padding: 10px 0;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .8039215686)
}

.settingsContainer .settingsContent .withPager .list .responsive table thead tr td,
.settingsContainer .settingsContent .withPager .list .responsive table thead tr th {
    width: 20%;
    text-align: center
}

.settingsContainer .settingsContent .withPager .list .responsive table thead tr td:first-child,
.settingsContainer .settingsContent .withPager .list .responsive table thead tr th:first-child {
    text-align: left
}

.settingsContainer .settingsContent .withPager .list .responsive table thead tr td:last-child,
.settingsContainer .settingsContent .withPager .list .responsive table thead tr th:last-child {
    text-align: right
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr:last-child td {
    border-bottom: 1px solid transparent
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td {
    min-width: 110px;
    padding: 20px 10px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td:first-child {
    padding-left: 0
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td:last-child {
    padding-right: 0
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td div {
    white-space: nowrap
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td div.active {
    color: #5cb503
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td div.expired {
    color: #ec193f
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td,
.settingsContainer .settingsContent .withPager .list .responsive table tbody tr th {
    width: 20%;
    text-align: center
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td:first-child,
.settingsContainer .settingsContent .withPager .list .responsive table tbody tr th:first-child {
    text-align: left
}

.settingsContainer .settingsContent .withPager .list .responsive table tbody tr td:last-child,
.settingsContainer .settingsContent .withPager .list .responsive table tbody tr th:last-child {
    text-align: right
}

.settingsContainer .settingsContent .avatarContainer {
    display: flex;
    flex-direction: column;
    align-items: center
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    color: inherit;
    font-size: 14px;
    background: #261a46;
    border: 0;
    border-radius: 4px 0 0 4px
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance:hover {
    background: #261a46
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance.active {
    color: #fff;
    border: 2px solid #653ba1
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance .opener {
    display: flex;
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: -webkit-transform .2s ease-out;
    transition: transform .2s ease-out;
    transition: transform .2s ease-out, -webkit-transform .2s ease-out
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance .opener.open {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .btnSelectAppearance .opener svg {
    width: 100%;
    height: 100%;
    fill: rgba(255, 255, 255, .804)
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown {
    position: absolute;
    top: 100%;
    right: inherit;
    left: inherit;
    z-index: 1080;
    display: none;
    box-sizing: border-box;
    min-width: 204px;
    margin: 12px 0 0;
    color: #212529;
    font-size: 1rem;
    text-align: left;
    list-style: none;
    background-color: #f9f9f9;
    background-clip: padding-box;
    border-radius: 3px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .15), 0 3px 14px 2px rgba(0, 0, 0, .14)
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown.open {
    z-index: 1081;
    display: block
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item {
    display: flex;
    align-items: center;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    color: rgba(0, 0, 0, .75);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
    text-align: inherit;
    border: 0;
    border-bottom: 1px solid #f1f1f1
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item:active,
.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item:focus,
.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item:hover {
    background-color: #f1f1f1
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item:first-child {
    border-radius: 4px 4px 0 0
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item>div {
    display: flex;
    align-items: center;
    width: 100%
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item>div .badge {
    width: 36px;
    margin-right: 8px;
    color: rgba(0, 0, 0, .6);
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    background: #e5e5e5;
    border-radius: 2px
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item>div .badge.wide {
    width: 48px
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown .item.active>div .badge {
    color: #fff;
    background: #338500
}

.settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown:before {
    position: absolute;
    top: -8px;
    right: inherit;
    left: 15px;
    width: 0;
    height: 0;
    border-color: transparent transparent #f9f9f9;
    border-style: solid;
    border-width: 0 6px 8px;
    content: ""
}

@media (max-width: 900px) {
    .settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown {
        left: 0;
        -webkit-transform: none;
        transform: none
    }
    .settingsContainer .settingsContent .avatarContainer .dropdownContainer .dropdown:before {
        right: 50%;
        -webkit-transform: translateX(50%);
        transform: translate(50%)
    }
}

.settingsContainer .settingsContent .avatarContainer .avatar-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-preview {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    background: #261a46;
    border-radius: 10px
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-preview img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 5px
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .collection-selector {
    flex: 0 0 100%;
    margin-bottom: 20px
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .collection-selector h3 {
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 14px
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-customization {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 20px
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-customization .avatar-category {
    flex: 0 0 calc(50% - 10px)
}

.settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-customization .avatar-category h3 {
    margin-bottom: .65em;
    color: rgba(255, 255, 255, .804);
    font-size: 14px
}

.settingsContainer .settingsContent .avatarContainer .action-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 25px
}

.settingsContainer .settingsContent .avatarContainer .action-buttons .btn {
    height: 30px;
    line-height: 10px
}

@media (max-width: 768px) {
    .settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-customization .avatar-category {
        flex: 0 0 100%
    }
}

@media (max-width: 480px) {
    .settingsContainer .settingsContent .avatarContainer h1 {
        font-size: 24px
    }
    .settingsContainer .settingsContent .avatarContainer .avatar-content .collection-selector h3 {
        margin-bottom: .65em;
        color: rgba(255, 255, 255, .804);
        font-size: 13px
    }
    .settingsContainer .settingsContent .avatarContainer .avatar-content .avatar-customization .avatar-category h3 {
        font-size: 13px
    }
}

.settingsContainer .settingsContent .securityContainer {
    margin-bottom: 25px
}

.settingsContainer .settingsContent .securityContainer .loaderBlock {
    text-align: center
}

.settingsContainer .settingsContent .inputHalf {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px
}

.settingsContainer .settingsContent .inputHalf>div {
    width: 100%
}

.settingsContainer .settingsContent .inputHalf>div .inputLabel {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper {
    position: relative;
    display: inherit;
    width: inherit
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper.hasError .inputControl {
    border-color: #e86376 !important
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper .inputControl {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    background-color: initial;
    border: 1px solid #653ba1;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper .inputControl:not([readonly]):focus {
    border-color: #fdae05
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper .tip {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 6px;
    padding: 1em;
    color: #e86376;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    background: #1c2028;
    border-radius: 6px;
    visibility: hidden;
    opacity: 0
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper .tip.visible {
    visibility: visible;
    opacity: 1
}

.settingsContainer .settingsContent .inputHalf>div .validationWrapper .tip:after {
    position: absolute;
    top: 100%;
    left: .5em;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 6px 4px 0;
    border-top-color: #1c2028 !important;
    content: ""
}

.settingsContainer .settingsContent .inputHalf>div .inputControl {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    background-color: initial;
    border: 1px solid #653ba1;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.settingsContainer .settingsContent .inputHalf>div .inputControl[type=submit] {
    color: #261a46;
    font-size: 14px;
    background-color: #fdcd2d !important;
    border: 0;
    cursor: pointer;
    transition: all .3s;
    -webkit-text-fill-color: #261a46
}

.settingsContainer .settingsContent .inputHalf>div .inputControl[type=submit][disabled] {
    cursor: not-allowed;
    opacity: .8;
    pointer-events: none
}

.settingsContainer .settingsContent .inputHalf>div .inputControl[type=submit]:not(disabled):hover {
    color: inherit;
    background-color: #ff902a !important
}

.settingsContainer .settingsContent .inputHalf>div:first-child {
    margin-right: 20px
}

@media (max-width: 500px) {
    .settingsContainer .settingsContent .inputHalf {
        flex-direction: column;
        margin: 0
    }
    .settingsContainer .settingsContent .inputHalf>div {
        width: 100%;
        margin-bottom: 10px
    }
}

.settingsContainer .settingsContent .twoFactor {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    background-color: transparent;
    border: 1px solid #653ba1;
    border-radius: 5px
}

.settingsContainer .settingsContent .twoFactor .text {
    position: relative;
    z-index: 1;
    padding-right: 15px
}

.settingsContainer .settingsContent .twoFactor button {
    position: relative;
    z-index: 1;
    margin-left: auto;
    padding: .375rem .75rem;
    white-space: nowrap
}

.settingsContainer .settingsContent .twoFactor img {
    position: absolute;
    top: -100px;
    right: -30px;
    height: 280px;
    opacity: .1
}

@media (max-width: 500px) {
    .settingsContainer .settingsContent .twoFactor {
        flex-direction: column;
        padding: 15px
    }
    .settingsContainer .settingsContent .twoFactor .text {
        padding: 0 0 15px
    }
    .settingsContainer .settingsContent .twoFactor button {
        width: 100%;
        padding: 10px 20px;
        font-size: 14px
    }
}

.settingsContainer .settingsContent .inputRow {
    margin-bottom: 12px
}

.settingsContainer .settingsContent .inputRow label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px
}

.settingsContainer .settingsContent .inputRow label svg {
    margin-left: 5px;
    font-size: 1em;
    fill: #2dc53a
}

.settingsContainer .settingsContent .inputRow .inputControl {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    background-color: initial;
    border: 1px solid #653ba1;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.settingsContainer .settingsContent .inputRow .inputAppend {
    position: relative
}

.settingsContainer .settingsContent .inputRow .inputAppend .inputControl {
    width: 100%;
    height: 46px;
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    background-color: initial;
    border: 1px solid #653ba1;
    border-radius: 5px !important;
    outline: none !important;
    -webkit-appearance: none;
    touch-action: manipulation
}

.settingsContainer .settingsContent .inputRow .inputAppend .btnAppend {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 34px;
    margin-right: 6px;
    padding: 0 15px;
    color: rgba(255, 255, 255, .804);
    text-align: center;
    background: #653ba1;
    border-radius: 3px;
    transform: translateY(-50%);
    cursor: pointer
}

@media (max-width: 450px) {
    .settingsContainer .settingsContent .inputRow .inputAppend .btnAppend {
        min-width: 55px
    }
}

.settingsContainer .settingsContent .inputRow .inputAppend .btnAppend.approved {
    color: #2dc53a !important;
    cursor: default
}

.settingsContainer .settingsContent .inputRow .inputAppend .btnAppend:hover {
    color: #fff
}

.settingsContainer .settingsContent .inputRow .inputEmail {
    padding-left: 40px
}

.settingsContainer .settingsContent .inputRow .emailIcon {
    position: absolute;
    top: 7px;
    left: 12px;
    color: rgba(255, 255, 255, .804);
    font-size: 21px
}

.settingsContainer .settingsContent .inputRow .emailDescription {
    display: block;
    margin-top: .65em;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 12px
}

.settingsContainer .settingsContent .inputRow .emailNoty {
    display: block;
    margin-top: .65em;
    color: #ff95b5;
    font-weight: 400;
    font-size: 12px
}

.settingsContainer .settingsContent .socialContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px
}

.settingsContainer .settingsContent .socialContainer .btnSocial,
.settingsContainer .settingsContent .socialContainer .plus {
    margin-bottom: 10px
}

.settingsContainer .settingsContent .socialContainer .btnSocial {
    display: flex;
    align-items: center;
    height: 38px;
    margin-left: 12px;
    padding: 0 20px;
    color: #fff;
    background: #653ba1;
    border-radius: 38px;
    cursor: pointer
}

.settingsContainer .settingsContent .socialContainer .btnSocial.vk {
    background: #2787f5
}

.settingsContainer .settingsContent .socialContainer .btnSocial.vk:hover {
    background: #1f6fca
}

.settingsContainer .settingsContent .socialContainer .btnSocial.fb {
    background: #3b5999
}

.settingsContainer .settingsContent .socialContainer .btnSocial.fb:hover {
    background: #2c4374
}

.settingsContainer .settingsContent .socialContainer .btnSocial.ok {
    background: #db8a37
}

.settingsContainer .settingsContent .socialContainer .btnSocial.ok:hover {
    background: #c47626
}

.settingsContainer .settingsContent .socialContainer .btnSocial.gl {
    background: #db4437
}

.settingsContainer .settingsContent .socialContainer .btnSocial.gl:hover {
    background: #c63024
}

.settingsContainer .settingsContent .socialContainer .btnSocial.st {
    background: #424242
}

.settingsContainer .settingsContent .socialContainer .btnSocial.st:hover {
    background: #383838
}

.settingsContainer .settingsContent .socialContainer .btnSocial.tg {
    background: #1e97ca
}

.settingsContainer .settingsContent .socialContainer .btnSocial.tg:hover {
    background: #1478a2
}

.settingsContainer .settingsContent .socialContainer .plus {
    display: flex;
    font-size: 34px;
    line-height: 30px
}

@media (max-width: 1050px) {
    .settingsContainer {
        display: block
    }
    .settingsContainer .sidebar .head .avatarBlock {
        width: 60px;
        height: 60px;
        margin: 0 15px 0 0;
        padding: 3px
    }
    .settingsContainer .sidebar .head .avatarBlock .avatar>div {
        width: 52px !important;
        height: 52px !important
    }
    .settingsContainer .sidebar .head .name {
        max-width: 100%;
        margin: 0
    }
    .settingsContainer .settingsContent {
        width: 100%;
        padding: 15px
    }
}

.sweepstakesContainer {
    width: 100%;
    max-width: 1190px;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.sweepstakesContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.sweepstakesContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.sweepstakesContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.sweepstakesContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.sweepstakesContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.sweepstakesContainer .sweepstakesBlock {
    display: flex;
    flex-wrap: wrap
}

.sweepstakesContainer .sweepstakesBlock p {
    font-size: 16px
}

.sweepstakesContainer .sweepstakesBlock p:first-child {
    margin-top: 20px
}

@media (max-width: 1100px) {
    .sweepstakesContainer .sweepstakesBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .sweepstakesContainer .sweepstakesBlock p {
        font-size: 13px
    }
}

.sweepstakesContainer .sweepstakesBlock .noTickets {
    z-index: 1;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-box;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 30px auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center
}

.sweepstakesContainer .sweepstakesBlock .noTickets .title {
    margin: 1rem 0 .6rem;
    color: #fff;
    font-weight: 500;
    font-size: 2.25rem;
    text-align: center
}

.sweepstakesContainer .sweepstakesBlock .noTickets .description {
    max-width: 23rem;
    color: rgba(255, 255, 255, .804);
    font-size: 1.063rem;
    text-align: center
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card {
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: 80vw;
    max-width: 420px;
    height: 250px;
    margin-top: 40px;
    text-align: center;
    background-color: #442176;
    border: 7px dashed #fff;
    border-radius: 15px
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card.active {
    background-color: #ff902a
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card .hover {
    width: 80%
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card .x {
    font-size: 100px;
    user-select: none
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card.amount {
    display: flex;
    flex-direction: column;
    justify-content: space-around
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card.amount .open {
    width: 150px;
    margin: -30px auto 20px;
    padding: 3px 0 4px;
    font-size: 20px;
    background-color: #338500;
    border-radius: 10px;
    cursor: pointer;
    user-select: none
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card.amount .open:hover {
    background-color: #9327b0
}

.sweepstakesContainer .sweepstakesBlock .noTickets .card.amount .open:disabled {
    background-color: #653ba1
}

@media (max-width: 900px) {
    .sweepstakesContainer {
        padding: 15px
    }
    .sweepstakesContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .sweepstakesContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .sweepstakesContainer .headerBlock .info {
        font-size: 13px
    }
}

.tosContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.tosContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.tosContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.tosContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.tosContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.tosContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.tosContainer .tosBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.tosContainer .tosBlock h2 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px
}

.tosContainer .tosBlock h2:first-child {
    margin-top: 20px
}

.tosContainer .tosBlock p {
    width: 100%;
    font-weight: 400;
    font-size: 16px
}

.tosContainer .tosBlock p:first-child {
    margin-top: 20px;
    color: #ff902a
}

@media (max-width: 1100px) {
    .tosContainer .tosBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .tosContainer .tosBlock p {
        font-size: 13px
    }
}

@media (max-width: 900px) {
    .tosContainer {
        padding: 15px
    }
    .tosContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .tosContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .tosContainer .headerBlock .info {
        font-size: 13px
    }
}

.termsPartnersContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.termsPartnersContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.termsPartnersContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.termsPartnersContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.termsPartnersContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.termsPartnersContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.termsPartnersContainer .termsPartnersBlock {
    display: flex;
    flex-wrap: wrap;
    color: inherit
}

.termsPartnersContainer .termsPartnersBlock h2 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px
}

.termsPartnersContainer .termsPartnersBlock h2:first-child {
    margin-top: 20px
}

.termsPartnersContainer .termsPartnersBlock p {
    width: 100%;
    font-weight: 400;
    font-size: 16px
}

.termsPartnersContainer .termsPartnersBlock p:first-child {
    margin-top: 20px;
    color: #ff902a
}

@media (max-width: 1100px) {
    .termsPartnersContainer .termsPartnersBlock p {
        font-size: 14px
    }
}

@media (max-width: 480pxpx) {
    .termsPartnersContainer .termsPartnersBlock p {
        font-size: 13px
    }
}

@media (max-width: 900px) {
    .termsPartnersContainer {
        padding: 15px
    }
    .termsPartnersContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .termsPartnersContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .termsPartnersContainer .headerBlock .info {
        font-size: 13px
    }
}

.tournamentSection {
    padding-bottom: 0
}

.tournamentSection .tournamentHeader {
    width: 100%;
    position: relative;
    display: flex;
    height: 270px;
    text-align: right;
    background: #0064ff;
    overflow: hidden;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px
}

.tournamentSection .tournamentHeader .titleWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: baseline;
    height: 100%;
    margin: 0 20px;
    z-index: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .3)
}

.tournamentSection .tournamentHeader .titleWrapper .title {
    font-size: 32px;
    color: #fff;
    font-weight: 600;
    text-align: left
}

.tournamentSection .tournamentHeader .titleWrapper .description {
    font-size: 18px;
    color: #fff;
    text-align: left
}

.tournamentSection .tournamentHeader img {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    height: 100%;
    object-fit: contain
}

.tournamentSection .onPageTournamentSection {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1250px;
    height: 140px;
    margin-bottom: 20px;
    padding: 20px 30px;
    overflow: hidden;
    background: #272d39;
    border-radius: 2px
}

.tournamentSection .onPageTournamentSection:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://cdn.friends-casino.io/assets/png/Landing/tournamentBackground.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    content: ""
}

.tournamentSection .onPageTournamentSection .tournamentContent {
    position: relative;
    z-index: 1;
    width: 100%
}

.tournamentSection .onPageTournamentSection .tournamentContent .caption {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 17px;
    white-space: nowrap;
    text-transform: uppercase
}

.tournamentSection .onPageTournamentSection .tournamentContent .caption .bet {
    display: inline-flex;
    align-items: center;
    color: #2dc53a;
    font-weight: inherit;
    font-size: inherit;
    text-transform: uppercase
}

.tournamentSection .onPageTournamentSection .tournamentContent .caption .bet .content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums
}

.tournamentSection .onPageTournamentSection .tournamentContent .caption .bet .icon {
    width: auto;
    height: auto;
    vertical-align: initial
}

.tournamentSection .onPageTournamentSection .tournamentContent .caption .bet .icon.widthAuto {
    width: auto;
    height: auto;
    margin-left: 5px;
    vertical-align: initial
}

.tournamentSection .onPageTournamentSection .tournamentContent .tagLine {
    max-width: 290px;
    color: rgba(255, 255, 255, .65);
    white-space: pre-line
}

.tournamentSection .onPageTournamentSection .tournamentContent .tagLine .timer {
    color: #fff
}

@media (max-width: 1365px) {
    .tournamentSection .onPageTournamentSection .tournamentContent {
        flex-direction: column;
        align-items: start
    }
}

@media (max-width: 900px) {
    .tournamentSection .onPageTournamentSection .tournamentContent {
        pointer-events: none
    }
}

.tournamentSection .onPageTournamentSection .itemFigure {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    display: flex;
    align-items: center;
    height: 100%
}

.tournamentSection .onPageTournamentSection .itemFigure img {
    width: auto;
    height: 100%;
    pointer-events: none
}

@media (max-width: 1200px) {
    .tournamentSection .onPageTournamentSection .itemFigure img {
        opacity: .2
    }
}

.tournamentSection .onPageTournamentSection .itemFigure .btnMore {
    position: absolute;
    right: 30px;
    z-index: 2;
    display: flex;
    height: 40px;
    padding: 9px 20px;
    font-weight: 400;
    font-size: 13px;
    text-transform: capitalize;
    background: #653ba1;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease-in
}

@media (max-width: 800px) {
    .tournamentSection .onPageTournamentSection {
        height: 124px;
        padding: 20px
    }
}

.tournamentSection .profileHead {
    padding: 25px;
    background: #442176;
    border-radius: 5px 5px 0 0
}

.tournamentSection .profileHead .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    font-size: 18px;
    text-align: center
}

.tournamentSection .profileHead .loaderBlock .spinnerBlock {
    position: absolute;
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.tournamentSection .profileHead .headBlock {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px
}

.tournamentSection .profileHead .headBlock .avatar {
    width: 72px;
    height: 72px;
    margin-bottom: 10px
}

.tournamentSection .profileHead .headBlock .avatar>div {
    width: 100% !important;
    height: 100% !important;
    font-family: Rubik, Arial, sans-serif
}

.tournamentSection .profileHead .headBlock h2 {
    margin-bottom: 0;
    color: #fff;
    font-weight: 400;
    font-size: 18px
}

.tournamentSection .profileHead .headBlock .date {
    margin-top: 2px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-align: center
}

.tournamentSection .profileHead .statsBlock {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 0 0
}

.tournamentSection .profileHead .statsBlock .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    margin-right: 15px;
    padding: 12px 5px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #653ba1;
    border-radius: 6px
}

.tournamentSection .profileHead .statsBlock .item .label {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 2px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: .85em;
    text-transform: uppercase
}

@media (max-width: 360px) {
    .tournamentSection .profileHead .statsBlock .item .label {
        font-size: .75em
    }
}

.tournamentSection .profileHead .statsBlock .item .value {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff902a;
    font-weight: 500;
    font-size: 16px
}

.tournamentSection .profileHead .statsBlock .item .value.positive {
    color: #5cb503 !important
}

.tournamentSection .profileHead .statsBlock .item .value.neutral {
    color: #ff902a !important
}

.tournamentSection .profileHead .statsBlock .item .value svg {
    position: relative;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    margin-right: 3px
}

@media (max-width: 700px) {
    .tournamentSection .profileHead {
        padding: 20px 10px 10px
    }
    .tournamentSection .profileHead .statsBlock {
        flex-wrap: wrap
    }
    .tournamentSection .profileHead .statsBlock .item {
        width: calc(50% - 10px);
        margin: 5px
    }
}

@media (max-width: 400px) {
    .tournamentSection .profileHead .statsBlock .item .label {
        max-width: 125px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis
    }
    .tournamentSection .profileHead .statsBlock .item .value {
        font-size: 13px
    }
    .tournamentSection .profileHead .statsBlock .item .value svg {
        top: 0;
        width: 11px;
        height: 11px;
        margin-right: 3px
    }
}

.tournamentSection .logContainer {
    display: flex;
    justify-content: space-between;
    width: 100%
}

@media (max-width: 1124px) {
    .tournamentSection .logContainer {
        flex-direction: column
    }
}

@media (max-width: 900px) {
    .tournamentSection .logContainer {
        padding-bottom: 0
    }
}

.tournamentSection .logContainer .logComponent {
    width: 100%;
    height: 100%;
    color: #fff;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px
}

@media (max-width: 1124px) {
    .tournamentSection .logContainer .logComponent {
        width: 100%
    }
}

.tournamentSection .logContainer .logComponent .logNav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    background: #2d3340;
    border-radius: 5px 5px 0 0
}

.tournamentSection .logContainer .logComponent .logNav .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0 10px;
    color: rgba(255, 255, 255, .804);
    font-size: 13px;
    text-transform: uppercase;
    background: transparent;
    border-radius: 100px
}

.tournamentSection .logContainer .logComponent .logNav .btn:not(.active):hover {
    color: #fff
}

.tournamentSection .logContainer .logComponent .logNav .btn.active {
    color: #fff;
    background: #ff902a
}

@media (max-width: 600px) {
    .tournamentSection .logContainer .logComponent .logNav .btn {
        height: 32px;
        margin: 0;
        font-size: 12px
    }
}

.tournamentSection .logContainer .logComponent .logWrapper {
    position: relative;
    height: calc(100% - 100px)
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager {
    height: calc(100% - 95px);
    overflow: hidden
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager.isLoading tbody {
    -webkit-filter: blur(4px);
    filter: blur(4px);
    pointer-events: none
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list {
    position: relative;
    height: 100%;
    overflow-x: scroll
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list.isLoader {
    min-height: 500px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    font-size: 18px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .empty h4 {
    font-size: 24px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .loaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    font-size: 18px;
    text-align: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% - 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable {
    width: 100%;
    color: #fff;
    table-layout: auto;
    border-collapse: initial;
    border-spacing: 0
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable tr:last-child td {
    border-bottom: none
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th {
    width: 25%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:first-child {
    width: 1px;
    white-space: nowrap;
    text-align: left
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:nth-child(2) {
    text-align: left
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:last-child {
    text-align: right
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value {
    z-index: 1;
    color: rgba(255, 255, 255, .804);
    text-transform: uppercase;
    cursor: pointer
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th .value svg {
    margin-bottom: 1px;
    margin-left: 7px;
    fill: rgba(255, 255, 255, .804)
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td {
    width: 25%;
    height: 50px;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .2px;
    text-align: center;
    border-bottom: 1px solid #653ba1
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:first-child {
    width: 0%;
    padding-right: 10px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user {
    display: flex;
    align-items: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .rank {
    margin-right: 10px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .avatarBlock .avatar {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px;
    border-radius: 10px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .avatarBlock img {
    background: #653ba1;
    padding: 5px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user img {
    width: 15px;
    height: 15px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .userInfo {
    display: flex;
    align-items: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .userRank {
    flex: 0 0 15px;
    height: 15px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user .userRank>svg {
    width: 100%;
    height: 100%
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button {
    margin: 0 0 0 5px;
    padding: 0;
    border: none;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    background: initial;
    transition: transform .1s ease-in-out
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button:active {
    transform: scale(.95)
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button:hover {
    color: #fff
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button .name {
    position: relative;
    display: inline;
    white-space: nowrap
}

@media (max-width: 1000px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button .name {
        display: block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button .name.my {
    color: #261a46 !important;
    background: #fdcd2d;
    padding: 3px 10px;
    border-radius: 5px
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td svg {
    margin-right: 3px;
    color: rgba(255, 255, 255, .804);
    font-size: inherit
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.default {
    color: #fff;
    font-weight: 500;
    white-space: nowrap
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.positive {
    color: #2dc53a;
    font-weight: 500;
    white-space: nowrap
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.positive svg {
    color: #2dc53a
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:first-child {
    text-align: left;
    color: #738198
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:last-child {
    text-align: right
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.date {
    display: inline-block;
    text-align: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system {
    display: flex;
    align-items: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover {
    display: flex;
    align-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover .icon {
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: 4px;
    text-align: center;
    background: transparent;
    cursor: pointer
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td.system.popover .icon svg {
    display: block;
    width: 13px;
    height: 13px
}

@media (max-width: 900px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th {
        padding: 0 10px;
        text-wrap: nowrap
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:first-child,
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:first-child {
        padding-right: 0
    }
}

@media (max-width: 700px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td {
        font-size: 11px
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .user button {
        font-size: 12px
    }
}

@media (max-width: 500px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td .avatarBlock {
        display: none
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td,
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th {
        padding: 0 8px
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable td:nth-child(2),
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logTable th:nth-child(2) {
        padding-left: 5px
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll {
    overflow-x: scroll
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable {
    width: 100%;
    color: #fff;
    border-collapse: initial;
    border-spacing: 0
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
    width: 33.3%;
    height: 36px;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:first-child {
    text-align: left
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:last-child {
    text-align: right
}

@media (max-width: 800px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(2) {
        text-align: left
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(1) {
        display: none
    }
}

@media (max-width: 500px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(3) {
        text-align: right
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th:nth-child(4) {
        display: none
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td {
    width: 33.3%;
    height: 50px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .2px;
    text-align: center;
    border-bottom: 1px solid #653ba1
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td svg {
    margin-right: 3px;
    color: rgba(255, 255, 255, .804);
    font-size: inherit
}

@media (max-width: 800px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(2) {
        text-align: left
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(1) {
        display: none
    }
}

@media (max-width: 500px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(4) {
        display: none
    }
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:nth-child(3) {
        text-align: right
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.default {
    color: rgba(255, 255, 255, .804);
    font-weight: 700
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.positive {
    color: #87d010;
    font-weight: 700
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:first-child {
    text-align: left
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td:last-child {
    text-align: right
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.date {
    display: inline-block;
    text-align: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system {
    display: flex;
    align-items: center
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover {
    display: flex;
    align-items: center;
    color: #fff;
    background: transparent;
    border: 0;
    outline: none
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover .icon {
    position: relative;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: 4px;
    text-align: center;
    background: transparent;
    cursor: pointer
}

.tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td.system.popover .icon svg {
    display: block;
    width: 13px;
    height: 13px
}

@media (max-width: 900px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td,
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
        padding: 0 10px
    }
}

@media (max-width: 400px) {
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable td,
    .tournamentSection .logContainer .logComponent .logWrapper .withPager .list .logScroll .logTable th {
        font-size: 12px
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0;
    list-style: none
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .inputBlock {
    display: flex;
    align-items: center
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .inputBlock .inputField {
    max-width: 45px;
    height: 40px;
    margin-right: 8px;
    padding: 0 6px;
    text-align: center
}

@media (max-width: 900px) {
    .tournamentSection .logContainer .logComponent .logWrapper .pager .inputBlock .inputField {
        max-width: 40px;
        height: 35px
    }
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    margin-left: -1px;
    padding: 0 12px;
    color: #8e80b8;
    line-height: 1.25;
    background: none;
    border: 1px solid #8e80b8;
    border-radius: 5px;
    cursor: pointer
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn:hover {
    color: #fdcd2d;
    background-color: none
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn svg {
    display: block;
    width: 12px;
    height: 12px
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn:first-child svg {
    margin-right: 3px
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn:last-child svg {
    margin-left: 3px;
    transform: scale(-1)
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn>span {
    display: flex;
    align-items: center;
    line-height: 0
}

.tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn[disabled] {
    opacity: .5;
    pointer-events: none
}

@media (max-width: 900px) {
    .tournamentSection .logContainer .logComponent .logWrapper .pager .pagerBtn {
        height: 35px
    }
}

@media (max-width: 900px) {
    .tournamentSection .logContainer .logComponent .logWrapper .pager {
        padding: 15px
    }
}

.tournamentsContainer {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #1d1438;
    border-radius: 6px
}

.tournamentsContainer .headerBlock {
    position: relative;
    margin: -25px -25px 0;
    padding: 20px;
    overflow: hidden;
    color: inherit;
    text-align: center;
    background: #442176;
    border-radius: 6px 6px 0 0
}

.tournamentsContainer .headerBlock .caption {
    position: relative;
    margin-top: -3px
}

.tournamentsContainer .headerBlock .caption h1 {
    position: relative;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 22px
}

.tournamentsContainer .headerBlock .info {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 15px
}

.tournamentsContainer .headerBlock:after {
    position: absolute;
    top: -100%;
    left: 50%;
    width: 30%;
    height: 300%;
    margin-left: -15%;
    background: rgba(255, 255, 255, .067);
    transform: rotate(25deg);
    content: ""
}

.tournamentsContainer .tournamentsBlock {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.tournamentsContainer .tournamentsBlock .item {
    width: 33.33333%;
    margin-top: 30px;
    padding: 0 15px
}

.tournamentsContainer .tournamentsBlock .item .box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #442176;
    border-radius: 5px
}

.tournamentsContainer .tournamentsBlock .item .box .image .labels {
    position: absolute
}

.tournamentsContainer .tournamentsBlock .item .box .image .labels .badge {
    padding: 5px 15px 5px 5px;
    font-size: 12px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 25px
}

.tournamentsContainer .tournamentsBlock .item .box .image .labels .badge.tournament {
    color: inherit;
    background-color: #337cff
}

.tournamentsContainer .tournamentsBlock .item .box .image .labels .badge.weekend_tournament {
    background-color: #e8650b
}

@media (max-width: 480px) {
    .tournamentsContainer .tournamentsBlock .item .box .image .labels .badge {
        font-size: 10px
    }
}

.tournamentsContainer .tournamentsBlock .item .box .image img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px
}

.tournamentsContainer .tournamentsBlock .item .box .info {
    position: relative;
    align-items: center;
    padding: 15px;
    font-size: 13px
}

.tournamentsContainer .tournamentsBlock .item .box .info .col {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, .804);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #653ba1
}

.tournamentsContainer .tournamentsBlock .item .box .info .col:first-child span {
    text-align: left
}

.tournamentsContainer .tournamentsBlock .item .box .info .col span {
    display: inline-block;
    max-width: 200px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    text-transform: none
}

.tournamentsContainer .tournamentsBlock .item .box .info .col span a {
    display: inline-block;
    flex-wrap: nowrap
}

.tournamentsContainer .tournamentsBlock .item .box .info .col span.ended {
    color: #ec193f
}

.tournamentsContainer .tournamentsBlock .item .box .info .col span.active {
    color: #5cb503
}

.tournamentsContainer .tournamentsBlock .item .box .info .col span svg {
    margin-bottom: 2px
}

@media (min-width: 600px) and (max-width: 800px) {
    .tournamentsContainer .tournamentsBlock .item .box .info .col {
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .tournamentsContainer .tournamentsBlock .item .box .info .col {
        font-size: 12px
    }
}

.tournamentsContainer .tournamentsBlock .item .box .info .col .nubmer {
    display: inline-block;
    padding-left: 22px
}

.tournamentsContainer .tournamentsBlock .item .box .date {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: auto;
    padding: 15px;
    text-align: center;
    background: #442176;
    border-radius: 0 0 6px 6px
}

.tournamentsContainer .tournamentsBlock .item .box .date .time {
    position: relative;
    color: rgba(255, 255, 255, .804);
    font-weight: 400;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase
}

.tournamentsContainer .tournamentsBlock .item .box .date .time span {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-transform: none
}

.tournamentsContainer .tournamentsBlock .item .box .date .btn {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 110px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    color: #fff;
    font-weight: 400;
    line-height: 40px;
    border: 1px solid #653ba1
}

.tournamentsContainer .tournamentsBlock .item .box .date .btn:hover {
    color: #261a46
}

@media (max-width: 1490px) {
    .tournamentsContainer .tournamentsBlock .item {
        width: 50%
    }
}

@media (max-width: 600px) {
    .tournamentsContainer .tournamentsBlock .item {
        width: 100%
    }
}

@media (min-width: 900px) and (max-width: 1024px) {
    .tournamentsContainer .tournamentsBlock .item {
        width: 100%
    }
}

@media (max-width: 900px) {
    .tournamentsContainer {
        padding: 15px
    }
    .tournamentsContainer .headerBlock {
        margin: -15px -15px 0;
        padding: 20px
    }
    .tournamentsContainer .headerBlock .caption h1 {
        font-size: 20px
    }
    .tournamentsContainer .headerBlock .info {
        font-size: 13px
    }
}

.tournamentsContainer .nothingFound {
    position: relative;
    width: calc(100% + 15px);
    min-height: 150px;
    margin-top: 135px;
    color: rgba(255, 255, 255, .804);
    font-weight: 500;
    font-size: 25px;
    text-align: center;
    text-transform: uppercase
}

.staticGameLoader .loaderBlock {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #1d1438
}

.staticGameLoader .loaderBlock .logo {
    position: absolute;
    top: calc(50% - 6.5rem);
    left: calc(50% - 5rem);
    display: block;
    width: 10rem;
    height: 10rem;
    opacity: .75;
    pointer-events: none
}

.staticGameLoader .loaderBlock .spinnerBlock {
    position: absolute;
    top: calc(50% + 2.5rem);
    left: 25%;
    display: block;
    width: 50%;
    opacity: .75;
    pointer-events: none
}

.loaderComponent {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 4.75rem;
    height: .75rem;
    margin: auto;
    background-color: #1d1438;
    border-radius: 4rem
}

.loaderComponent.dark {
    background-color: #442176
}

.loaderComponent .inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: #fdcd2d;
    border-radius: 4rem;
    animation: loaderAnimation .8s infinite;
    will-change: left, right
}

.spinner {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid #d8d8d8;
    border-right: 2px solid #d8d8d8;
    border-bottom: 2px solid #d8d8d8;
    border-radius: 100%;
    animation: spin 1s linear infinite
}

@keyframes loaderAnimation {
    0% {
        right: 4rem;
        left: .125rem
    }
    5% {
        left: .125rem
    }
    50% {
        right: .125rem;
        left: 4rem
    }
    55% {
        right: .125rem
    }
    to {
        right: 4rem;
        left: .125rem
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.d-none {
    display: none !important
}

.text-white {
    color: #fff !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.pt-2 {
    padding-top: .5rem !important
}

a:not([href]) {
    color: inherit;
    text-decoration: none
}

@media (min-width: 901px) {
    a:not([href]):hover {
        color: inherit;
        text-decoration: none
    }
}

.swiper {
    width: 100%
}

.TooltipContent {
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 1;
    color: #000;
    background-color: #fff;
    box-shadow: rgba(14, 18, 22, .35) 0 10px 38px -10px, rgba(14, 18, 22, .2) 0 10px 20px -15px;
    user-select: none;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
    will-change: transform, opacity;
    z-index: 99999;
    max-width: calc(100vw - 10px);
    text-align: center;
    margin: 0 5px
}

.TooltipContent>span {
    padding: 0 !important
}

.TooltipContent[data-state=delayed-open][data-side=top] {
    animation-name: slideDownAndFade
}

.TooltipContent[data-state=delayed-open][data-side=right] {
    margin-left: 10px;
    animation-name: slideLeftAndFade
}

.TooltipContent[data-state=delayed-open][data-side=bottom] {
    animation-name: slideUpAndFade
}

.TooltipContent[data-state=delayed-open][data-side=left] {
    animation-name: slideRightAndFade
}

.TooltipArrow {
    fill: #fff
}

@keyframes slideUpAndFade {
    0% {
        opacity: 0;
        transform: translateY(2px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideRightAndFade {
    0% {
        opacity: 0;
        transform: translate(-2px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideDownAndFade {
    0% {
        opacity: 0;
        transform: translateY(-2px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideLeftAndFade {
    0% {
        opacity: 0;
        transform: translate(2px)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes x-captcha-spin_DYZrK {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.x-captcha-widget_aNHHk {
    background: var(--x-captcha-background);
    border-radius: var(--x-captcha-radius-lg);
    box-shadow: var(--x-captcha-shadow);
    font-family: var(--x-captcha-font-family);
    height: 74px;
    margin: 0 auto;
    overflow: hidden;
    padding: var(--x-captcha-spacing);
    position: relative;
    transition: var(--x-captcha-transition)
}

.x-captcha-loading_-08xQ,
.x-captcha-widget_aNHHk {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%
}

.x-captcha-loading_-08xQ {
    color: var(--x-captcha-primary);
    font-weight: var(--x-captcha-font-weight-medium, 500);
    height: 100%
}

.x-captcha-loading-spinner_QzE1e {
    animation: x-captcha-spin_DYZrK 1s linear infinite;
    border: var(--x-captcha-spinner-border-width, 2px) solid;
    border-color: var(--x-captcha-spinner-border);
    border-radius: 50%;
    height: var(--x-captcha-spinner-size, 20px);
    margin-right: 10px;
    width: var(--x-captcha-spinner-size, 20px)
}

.x-captcha-error_IFtiH {
    color: var(--x-captcha-error);
    flex-direction: column;
    gap: 10px;
    height: 100%;
    text-align: center;
    width: 100%
}

.x-captcha-error-button_6a7fy,
.x-captcha-error_IFtiH {
    align-items: center;
    display: flex;
    justify-content: center
}

.x-captcha-error-button_6a7fy {
    background-color: var(--x-captcha-btn-bg);
    border: var(--x-captcha-btn-border-width, 1px) solid var(--x-captcha-btn-border, var(--x-captcha-border-light));
    border-radius: var(--x-captcha-btn-radius, var(--x-captcha-radius));
    box-shadow: var(--x-captcha-shadow-sm);
    color: var(--x-captcha-btn-text);
    cursor: pointer;
    font-size: var(--x-captcha-font-sm);
    font-weight: var(--x-captcha-font-weight-medium, 500);
    padding: var(--x-captcha-spacing-sm) var(--x-captcha-spacing-md);
    transition: var(--x-captcha-transition-fast)
}

.x-captcha-error-button_6a7fy:focus,
.x-captcha-error-button_6a7fy:hover {
    background-color: var(--x-captcha-btn-hover-bg) !important
}

.x-captcha-error-button-icon_TruJ2 {
    align-items: center;
    color: var(--x-captcha-btn-icon, currentColor);
    display: flex;
    margin-right: 6px
}

.x-captcha-verified_eyOYI {
    color: var(--x-captcha-primary);
    font-weight: var(--x-captcha-font-weight-medium, 500)
}

.x-captcha-container_6Wymv,
.x-captcha-verified_eyOYI {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%
}

.x-captcha-container_6Wymv {
    border-radius: var(--x-captcha-radius-sm);
    cursor: pointer;
    padding: 0 16px;
    transition: var(--x-captcha-transition-fast)
}

.x-captcha-checkbox_dUX07 {
    align-items: center;
    background-color: var(--x-captcha-checkbox-bg, transparent);
    border: var(--x-captcha-checkbox-border-width, 2px) solid var(--x-captcha-checkbox-border-color, var(--x-captcha-primary));
    border-radius: var(--x-captcha-checkbox-radius, var(--x-captcha-radius-sm));
    box-shadow: var(--x-captcha-shadow-sm);
    display: flex;
    height: var(--x-captcha-checkbox-size, 24px);
    justify-content: center;
    margin-right: 10px;
    position: relative;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    width: var(--x-captcha-checkbox-size, 24px)
}

.x-captcha-checkbox-verified_V6JR8,
.x-captcha-checkbox-verifying_OiaGN {
    background-color: var(--x-captcha-primary);
    border-color: var(--x-captcha-primary)
}

.x-captcha-checkbox-error_POEST {
    background-color: var(--x-captcha-error);
    border-color: var(--x-captcha-error)
}

.x-captcha-checkmark_reDgK {
    color: var(--x-captcha-checkmark);
    opacity: 0;
    transform: scale(0);
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.x-captcha-checkmark-visible_ZrNTp {
    opacity: 1;
    transform: scale(1)
}

.x-captcha-pulse_WkQRc {
    background-color: var(--x-captcha-primary);
    border-radius: 50%;
    height: 0;
    left: 50%;
    opacity: .2;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .6s cubic-bezier(.4, 0, .2, 1);
    width: 0
}

.x-captcha-pulse-active_H4uJl {
    height: 40px;
    opacity: 0;
    width: 40px
}

.x-captcha-text_3UNta {
    color: var(--x-captcha-text, var(--x-captcha-primary));
    font-size: var(--x-captcha-font-md)
}

.x-captcha-brand_mmooq,
.x-captcha-text_3UNta {
    font-weight: var(--x-captcha-font-weight-medium, 500)
}

.x-captcha-brand_mmooq {
    bottom: 5px;
    color: var(--x-captcha-text-light);
    font-size: var(--x-captcha-font-xs);
    position: absolute;
    right: 8px
}

.x-captcha-verifying-overlay_AW6rT {
    align-items: center;
    background-color: var(--x-captcha-overlay-bg, var(--x-captcha-background));
    border-radius: 4px;
    color: var(--x-captcha-overlay-text, var(--x-captcha-primary));
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    justify-content: center;
    opacity: 0;
    position: absolute;
    transition: opacity .3s ease, visibility .3s ease;
    visibility: hidden;
    z-index: 10
}

.x-captcha-verifying-overlay-visible_uLTsT {
    opacity: var(--x-captcha-overlay-opacity, 1);
    visibility: visible
}

.x-captcha-form_B-vtB {
    display: flex;
    flex-direction: column;
    font-family: var(--x-captcha-font-family);
    gap: 1.2rem;
    width: 100%
}

.x-captcha-children-container_I-GyL {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%
}

.x-captcha-captcha-container_fIdLM {
    margin: 1rem 0;
    width: 100%
}

.x-captcha-error_EMpc4 {
    align-items: center;
    background-color: rgba(211, 47, 47, .08);
    border-radius: var(--x-captcha-radius-sm);
    color: var(--x-captcha-error);
    display: flex;
    font-size: var(--x-captcha-font-sm);
    margin-top: -.8rem;
    padding: 4px 8px
}

.x-captcha-error-icon_-VbZa {
    align-items: center;
    display: flex;
    margin-right: 8px
}

.x-captcha-submit-button_Sz16a {
    border: none;
    border-radius: var(--x-captcha-submit-btn-radius, var(--x-captcha-radius));
    box-shadow: none;
    font-size: var(--x-captcha-font-md);
    font-weight: var(--x-captcha-font-weight-medium, 500);
    outline: none;
    outline-offset: 2px;
    padding: .8rem 1.5rem;
    transform: translateY(0);
    transition: var(--x-captcha-transition-fast)
}

.x-captcha-submit-button-active_q-zcy {
    background-color: var(--x-captcha-submit-btn-bg);
    box-shadow: var(--x-captcha-shadow);
    color: var(--x-captcha-submit-btn-text);
    cursor: pointer
}

.x-captcha-submit-button-disabled_XPUuk {
    background-color: var(--x-captcha-disabled-bg);
    color: var(--x-captcha-disabled);
    cursor: not-allowed
}

.x-captcha-submit-button-hover_o0tRO {
    background-color: var(--x-captcha-submit-btn-hover-bg, var(--x-captcha-submit-btn-bg));
    box-shadow: var(--x-captcha-shadow-lg);
    transform: translateY(-2px)
}

.x-captcha-submit-button-focus_-hEbc {
    outline: 2px solid var(--x-captcha-submit-btn-outline)
}

.x-captcha-form,
.x-captcha-widget,
:root,
body,
html {
    --x-captcha-primary: #4285f4;
    --x-captcha-error: #d32f2f;
    --x-captcha-text: #555;
    --x-captcha-text-light: #aaa;
    --x-captcha-background: #fff;
    --x-captcha-border-light: #e0e0e0;
    --x-captcha-disabled: #9e9e9e;
    --x-captcha-disabled-bg: #e0e0e0;
    --x-captcha-checkmark: #fff;
    --x-captcha-btn-bg: #f8f8f8;
    --x-captcha-btn-text: var(--x-captcha-text);
    --x-captcha-btn-hover-bg: #f0f0f0;
    --x-captcha-submit-btn-bg: var(--x-captcha-primary);
    --x-captcha-submit-btn-text: #fff;
    --x-captcha-submit-btn-outline: rgba(66, 133, 244, .25);
    --x-captcha-spinner-border: var(--x-captcha-primary) transparent var(--x-captcha-primary) var(--x-captcha-primary);
    --x-captcha-shadow-sm: 0 1px 3px rgb(0 0 0/8%);
    --x-captcha-shadow: 0 4px 6px rgb(0 0 0/5%), 0 1px 3px rgba(0, 0, 0, .1);
    --x-captcha-shadow-lg: 0 6px 12px rgba(0, 0, 0, .18), 0 4px 6px rgba(0, 0, 0, .1);
    --x-captcha-spacing-xs: 4px;
    --x-captcha-spacing-sm: 8px;
    --x-captcha-spacing: 10px;
    --x-captcha-spacing-md: 16px;
    --x-captcha-spacing-lg: 24px;
    --x-captcha-font-xs: 10px;
    --x-captcha-font-sm: 14px;
    --x-captcha-font-md: 15px;
    --x-captcha-font-weight-normal: 400;
    --x-captcha-font-weight-medium: 500;
    --x-captcha-font-family: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --x-captcha-radius-sm: 4px;
    --x-captcha-radius: 6px;
    --x-captcha-radius-lg: 8px;
    --x-captcha-transition-fast: all .2s ease;
    --x-captcha-transition: all .3s ease;
    --x-captcha-spin-animation: x-captcha-spin 1s linear infinite
}

@keyframes x-captcha-spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes x-captcha-pulse {
    0% {
        opacity: .2;
        transform: translate(-50%, -50%) scale(0)
    }
    70% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2)
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5)
    }
}

@keyframes x-captcha-bounce {
    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-5px)
    }
    60% {
        transform: translateY(-2px)
    }
}

.AccordionTrigger {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    border-radius: 5px;
    cursor: pointer
}

.AccordionTrigger svg.pointer {
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform .2s ease
}

.AccordionTrigger[data-state=open] svg.pointer {
    transform: rotate(0)
}

.AccordionContent {
    overflow: hidden
}

.AccordionContent__content {
    padding: 12px 16px;
    color: #fff;
    font-size: 14px
}

.AccordionContent[data-state=closed] {
    animation: accordionUp .2s ease-out
}

.AccordionContent[data-state=open] {
    animation: accordionDown .2s ease-out
}

.AccordionItem {
    background-color: #261a46;
    border-radius: 5px
}

.AccordionItem:not(:last-of-type) {
    margin-bottom: .5rem
}

@keyframes accordionDown {
    0% {
        height: 0
    }
    to {
        height: var(--radix-accordion-content-height)
    }
}

@keyframes accordionUp {
    0% {
        height: var(--radix-accordion-content-height)
    }
    to {
        height: 0
    }
}

.ClubModalPrivilegeTab {
    width: 100%;
    max-height: 356px;
    padding: 0;
    overflow-y: scroll
}

.ClubModalPrivilegeTab__trigger {
    background-color: #653ba1;
    border-radius: 5px
}

.ClubModalPrivilegeTab__trigger_content {
    display: flex;
    gap: 10px;
    align-items: center
}

.ClubModalPrivilegeTab__trigger_content span {
    text-transform: capitalize
}

.ClubModalPrivilegeTab__content {
    background-color: #653ba1;
    border-top: 1px solid #442176
}

.ClubModalPrivilegeTab__content ul {
    list-style-position: inside
}

.CardContainer {
    width: 100%;
    min-width: 240px;
    max-width: 384px;
    padding: 7px;
    background-image: linear-gradient(180deg, #653ba1, #442176);
    border-radius: 10px;
    aspect-ratio: 16/9
}

.CardContainer__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 160px;
    padding: 24px;
    background-color: #1d1438;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px
}

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

.CardContainer__header h3 {
    margin: 0;
    color: #fff;
    font-weight: 600;
    font-size: 18px
}

.CardContainer__header img {
    width: 20px;
    height: 20px
}

.CardContainer__header svg.icon {
    width: 20px;
    height: 20px
}

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

.CardContainer__body .Percentage {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between
}

.CardContainer__body .Percentage__link {
    display: flex;
    gap: 5px;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    transition: .2s all ease
}

.CardContainer__body .Percentage__link:hover {
    transform: translate(8px)
}

.CardContainer__body .Percentage__text {
    margin-left: auto;
    color: #fff;
    font-weight: 600
}

.CardContainer__body .Percentage div[data-state] .icon,
.CardContainer__body .Percentage div[data-state] .icon:hover {
    fill: #fff
}

.CardContainer__body .ProgressBar {
    position: relative;
    width: 100%;
    height: 12px;
    overflow: hidden;
    background-color: #653ba1;
    border-radius: 10px
}

.CardContainer__body .ProgressBar__fill {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fdcd2d;
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .1)
}

.CardContainer__body .ProgressBar__fill.bronze {
    background-color: #ab5d30
}

.CardContainer__body .ProgressBar__fill.silver {
    background-color: #4d7bcd
}

.CardContainer__body .ProgressBar__fill.gold {
    background-color: #ffd40e
}

.CardContainer__body .ProgressBar__fill.platinum {
    background-color: #077cfc
}

.CardContainer__body .ProgressBar__fill.diamond {
    background-color: #7625f4
}

.CardContainer__body .ProgressBar__fill.elite {
    background-color: #ff3c38
}

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

.CardContainer__body .Ranks div {
    display: flex;
    gap: 5px;
    align-items: center
}

.CardContainer__body .Ranks__current,
.CardContainer__body .Ranks__next {
    color: #fff;
    font-weight: 600
}

@media (max-width: 767px) {
    .CardContainer__body {
        gap: 0
    }
    .CardContainer__body .ProgressBar {
        margin: 10px 0
    }
}

.vip {
    width: 100%
}

.ClubModalProgressTab {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center
}

.ClubModalProgressTab h2 {
    margin: 0 auto 0 0;
    color: #fff;
    font-size: 18px
}

.ClubModalProgressTab__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
    list-style-type: none
}

.ClubModalProgressTab__listItem {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.ClubModalProgressTab__listItem .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #1d1438;
    border-radius: 5px
}

.ClubModalProgressTab__listItem .icon svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px
}

.ClubModalProgressTab__listItem h3,
.ClubModalProgressTab__listItem p {
    margin: 0
}

.ClubModalProgressTab__listItem h3 {
    color: #fff;
    font-size: 14px
}

.ClubModalProgressTab__listItem p {
    font-size: 14px
}

.ClubVipModal__wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 25px
}

.ClubVipModal__nav {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 5px;
    background-color: #261a46;
    border-radius: 5px
}

.ClubVipModal__navBtn {
    padding: 13px 16px;
    border-radius: 5px;
    cursor: pointer
}

.ClubVipModal__navBtn.active {
    background-color: #653ba1;
    transition: all .3s ease
}

.ClubVipModal__link {
    width: 100%;
    padding: 18px;
    text-align: center;
    transition: all .2s ease
}

.ClubVipModal__link:hover {
    color: #fff !important
}

[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}

.simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0
}

.simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch
}

.simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.simplebar-content:after,
.simplebar-content:before {
    content: " ";
    display: table
}

.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}

.simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0
}

.simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

[data-simplebar].simplebar-dragging,
[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}

.simplebar-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 10px
}

.simplebar-scrollbar:before {
    position: absolute;
    content: "";
    background: #000;
    border-radius: 7px;
    left: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity .2s .5s linear
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    transition-delay: 0s;
    transition-duration: 0s
}

.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}

.simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px
}

.simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 0;
    bottom: 0;
    min-height: 0;
    min-width: 10px;
    width: auto
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0
}

.simplebar-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: scrollbar !important
}

.simplebar-dummy-scrollbar-size>div {
    width: 200%;
    height: 200%;
    margin: 10px 0
}

.simplebar-hide-scrollbar {
    position: fixed;
    left: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.confirmationContainer .confirmationContainerHeader {
    display: flex;
    align-items: flex-start;
    gap: 1rem
}

.confirmationContainer .confirmationContainerHeader .header-content h3 {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: .5rem
}

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

.confirmationContainer .actions .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: #fff
}

.confirmationContainer .actions .btn .icon {
    height: 1.25rem;
    width: 1.25rem;
    margin-bottom: 1px
}

.confirmationContainer .actions .divider {
    display: flex;
    align-items: center
}

.confirmationContainer .actions .divider .divider-line {
    flex: 1;
    height: 1px;
    background-color: #653ba1
}

.confirmationContainer .actions .divider span {
    padding: 0 1rem;
    color: #fff;
    font-size: .875rem
}

.confirmationContainer .footer-text {
    font-size: .875rem;
    color: #fff;
    text-align: center;
    margin-top: 1rem
}

.popover-arrow {
    fill: #fff
}

.popover-arrow--start {
    left: 30px !important
}

.popover-trigger .icon-down {
    margin-left: 4px
}

.popover-trigger[data-state=open] .icon-down {
    transform: rotate(180deg)
}

.popover-search {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    color: rgba(0, 0, 0, .75);
    border-bottom: solid 1px #e1e1e1
}

.popover-search svg {
    width: 13px;
    height: 13px;
    margin-right: 5px
}

.popover-search input {
    display: inline-block;
    flex: 1 1 auto;
    all: unset;
    box-sizing: border-box;
    height: 100%
}

.popover-content {
    overflow: hidden;
    background-color: #fff;
    border-radius: 5px
}

.popover-content>div {
    max-height: 300px;
    overflow: auto
}

.popover-content button {
    display: block;
    width: 100%;
    padding: 10px;
    color: rgba(0, 0, 0, .75);
    text-align: left;
    cursor: pointer
}

.popover-content button.active {
    background-color: #e1e1e1
}

@media (min-width: 901px) {
    .popover-content button:hover {
        background-color: #e1e1e1
    }
}

.select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    font-size: 14px
}

.select__content {
    min-width: 200px
}

.select__content .popover-search {
    height: 30px;
    padding: 0 10px;
    font-size: 12px
}

.select__content .popover-search input {
    width: 100%;
    height: 100%
}

.select__content .popover-search svg {
    width: 12px;
    height: 12px
}

.select__content .simplebar-content button {
    padding: 8px 10px;
    font-size: 12px
}

.select__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 5px;
    color: rgba(0, 0, 0, .83);
    font-weight: 500;
    font-size: 12px
}

.select--error {
    color: #ec193f;
    border-color: #ec193f
}

.wallet-wager {
    width: 100%;
    background-color: #1d1438
}

.wallet-wager-card {
    padding: 20px;
    background-color: #653ba1;
    border-radius: 10px
}

.wallet-wager-card__text {
    margin: 0 0 5px;
    font-size: 16px
}

.wallet-wager-card__amount {
    color: #fff;
    font-weight: 500;
    font-size: 16px
}

.wallet-wager-card__link {
    display: inline-flex;
    align-items: center;
    margin-top: 30px
}

.wallet-wager-card__link svg {
    margin-left: 5px;
    transition: .3s
}

@media (min-width: 901px) {
    .wallet-wager-card__link:hover svg {
        transform: translate(5px)
    }
}

.wallet-wager-progress__header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.wallet-wager-progress__header p {
    margin-bottom: 0
}

.wallet-wager-progress__bar {
    height: 20px;
    margin-top: 10px;
    padding: 4px;
    overflow: hidden;
    background-color: #272d39;
    border-radius: 5px
}

.wallet-wager-progress__bar span {
    display: block;
    height: 100%;
    background-color: #047cfc;
    border-radius: 2px;
    transition-duration: .3s
}

@media (max-width: 500px) {
    .wallet-wager-card {
        padding: 15px
    }
    .wallet-wager-card__text {
        font-size: 14px
    }
    .wallet-wager-card__amount {
        font-size: 15px
    }
    .wallet-wager-card__link {
        margin-top: 20px;
        font-size: 12px
    }
    .wallet-wager-progress__header {
        font-size: 12px
    }
}

.wallet-self-exclusion {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 340px;
    padding: 20px
}

.wallet-self-exclusion__info {
    margin: auto 0 0;
    text-align: center
}

.wallet-self-exclusion-block {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 10px;
    padding: 20px;
    border: 1px solid #fdae05;
    border-radius: 5px
}

.wallet-self-exclusion-block__left {
    display: flex;
    margin-right: 10px
}

.wallet-self-exclusion-block__left>svg {
    flex: 0 0 20px;
    margin-right: 5px
}

.wallet-self-exclusion-block__left h4 {
    color: #fff
}

.wallet-self-exclusion-block__time {
    margin: 0;
    font-weight: 500;
    color: #fff
}

.wallet-self-exclusion-block__time span {
    font-weight: 400
}

.wallet-self-exclusion-block__right {
    display: flex;
    flex: 0 0 auto;
    align-items: center
}

.wallet-self-exclusion-block__right .btn {
    height: 40px;
    color: #261a46;
    font-size: 14px
}

@media (max-width: 700px) {
    .wallet-self-exclusion-block {
        flex-direction: column;
        margin-top: 0
    }
    .wallet-self-exclusion-block__right {
        margin-top: 10px;
        margin-left: 24px
    }
}

@media (max-width: 400px) {
    .wallet-self-exclusion {
        padding: 15px
    }
    .wallet-self-exclusion-block {
        padding: 0;
        border: none
    }
    .wallet-self-exclusion-block__left svg {
        display: none
    }
    .wallet-self-exclusion-block__right {
        margin-top: 15px;
        margin-left: 0
    }
    .wallet-self-exclusion-block .btn {
        width: 100%
    }
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: .3s
}

.tab-btn:disabled {
    opacity: .6;
    pointer-events: none
}

.tab-btn.primary {
    min-width: 149px;
    height: 37px;
    color: #ac9dda;
    font-size: 14px;
    background-color: #3f2b7a
}

.tab-btn.primary:hover {
    color: #fff;
    background-color: #4b358e
}

.tab-btn.primary:active,
.tab-btn.primary.active {
    color: #fff;
    background-color: #5cb503
}

.tab-btn.secondary {
    height: 30px;
    padding: 0 10px;
    color: #ac9dda;
    font-size: 12px;
    background-color: transparent
}

.tab-btn.secondary:hover {
    color: #ac9dda;
    background-color: #342563
}

.tab-btn.secondary:active,
.tab-btn.secondary.active {
    color: #fff;
    background-color: #3f2b7a
}

.tab-btn.underline {
    padding: 0 10px;
    color: #b1adbc;
    background-color: transparent;
    border-bottom: solid 2px transparent;
    border-radius: 0
}

.tab-btn.underline:hover {
    color: #fff
}

.tab-btn.underline:active,
.tab-btn.underline.active {
    color: #fff;
    border-color: #fdad05
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: .3s
}

.button:disabled,
.button.disabled {
    opacity: .6;
    pointer-events: none
}

.button svg {
    margin-right: 5px
}

.button--full {
    width: 100%
}

.button--primary {
    color: #1a1130;
    background-color: #fdad05
}

@media (min-width: 901px) {
    .button--primary:hover {
        color: #1a1130;
        background-color: #ffd958
    }
}

.button--primary:active,
.button--primary.active {
    color: #1a1130;
    background-color: #fdcd2d
}

.button--secondary {
    color: #fff;
    background-color: #5cb503
}

@media (min-width: 901px) {
    .button--secondary:hover {
        color: #fff;
        background-color: #87d010
    }
}

.button--secondary:active,
.button--secondary.active {
    background-color: #338500
}

.button--transparent {
    color: #8e80b8;
    background-color: transparent;
    border: solid 1px #8e80b8
}

@media (min-width: 901px) {
    .button--transparent:hover {
        color: #fff
    }
}

.button--transparent:active,
.button--transparent.active {
    color: #fff;
    border-color: #fff
}

.button--white {
    color: #000;
    background-color: #fff
}

@media (min-width: 901px) {
    .button--white:hover {
        color: #000;
        background-color: #d3d3d3
    }
}

.button--white:active,
.button--white.active {
    background-color: #ac9dda
}

.button--white-border {
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff
}

@media (min-width: 901px) {
    .button--white-border:hover {
        color: #000;
        background-color: #fff;
        border-color: #fff
    }
}

.button--white-border:active,
.button--white-border.active {
    color: #000;
    background-color: #fff;
    border-color: #fff
}

.button--danger {
    color: #fff;
    background-color: #e1113a
}

@media (min-width: 901px) {
    .button--danger:hover {
        color: #fff;
        background-color: #ec193f
    }
}

.button--danger:active,
.button--danger.active {
    background-color: #fc374d
}

.button--dark {
    color: #fff;
    background-color: #4b358e
}

@media (min-width: 901px) {
    .button--dark:hover {
        color: #fff;
        background-color: #3f2b7a
    }
}

.button--dark:active,
.button--dark.active {
    background-color: #20163b
}

.button--info {
    color: #fdad05;
    background-color: transparent
}

@media (min-width: 901px) {
    .button--info:hover {
        color: #ffd958
    }
}

.button--info:active,
.button--info.active {
    color: #fdcd2d
}

.button--lg {
    height: 48px;
    padding: 0 25px
}

.button--md {
    height: 40px;
    padding: 0 20px
}

.button--sm {
    height: 33px;
    padding: 0 20px
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-vertical>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.categories-menu {
    padding: 5px;
    overflow: hidden;
    background-color: #342563;
    border-radius: 6px
}

.categories-menu__wrapper {
    flex-shrink: 0
}

.categories-menu__wrapper .swiper-scrollbar {
    position: static;
    margin-top: 5px;
    cursor: pointer
}

.categories-menu__wrapper .swiper-scrollbar-drag {
    background: #442176
}

.categories-menu__slide {
    margin-left: 5px
}

.categories-menu__slide:first-child {
    margin-left: 0
}

.categories-menu__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 1.25rem;
    color: #ac9dda;
    font-weight: 600;
    font-size: .985rem;
    line-height: 1;
    white-space: nowrap;
    border-radius: 6px;
    outline-offset: 2px;
    cursor: pointer;
    transition: all .2s
}

.categories-menu__item svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    margin-right: .5rem
}

.categories-menu__item:disabled {
    opacity: .5;
    pointer-events: none
}

.categories-menu__item:hover {
    color: #ac9dda;
    background-color: #3f2b7a
}

.categories-menu__item.active,
.categories-menu__item:active {
    color: #fff;
    background-color: #653ba1
}

.categories-menu__item:focus-visible {
    outline-color: #fff
}

.categories-menu--small .categories-menu__item {
    height: 33px;
    padding: 8px 20px;
    font-size: 14px
}

.badge {
    display: inline-block;
    padding: 0 5px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px
}

.badge--white {
    color: #000;
    background-color: #fff
}

.tabs-menu {
    display: flex;
    min-height: 40px;
    overflow: auto
}

.tabs-menu button {
    white-space: nowrap
}

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

.pagination button {
    cursor: pointer;
    transition: .3s
}

.pagination-nav-prev,
.pagination-nav-next {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 13px;
    overflow: hidden;
    color: #8e80b8;
    font-weight: 500;
    background-color: none;
    border: 1px solid #8e80b8;
    border-radius: 6px
}

.pagination-nav-prev span,
.pagination-nav-next span {
    display: block;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis
}

.pagination-nav-prev svg,
.pagination-nav-next svg {
    flex-shrink: 0
}

@media (min-width: 901px) {
    .pagination-nav-prev:hover,
    .pagination-nav-next:hover {
        color: #fdcd2d;
        border-color: #fdcd2d
    }
}

.pagination-nav-prev:active,
.pagination-nav-prev.active,
.pagination-nav-next:active,
.pagination-nav-next.active {
    color: #b1adbc;
    border-color: #b1adbc
}

.pagination-nav-prev:disabled,
.pagination-nav-next:disabled {
    opacity: .5;
    pointer-events: none
}

.pagination-nav-prev span {
    margin-left: 5px
}

.pagination-nav-next span {
    margin-right: 5px
}

.pagination__input {
    display: flex;
    align-items: center;
    margin: 0 5px
}

.pagination__input input {
    flex: 0 1 45px;
    min-width: 45px;
    height: 45px;
    margin: 0 8px 0 0;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    background-color: #20163b;
    border: 1px solid #b1adbc;
    border-radius: 5px;
    outline: none !important;
    transition: .3s;
    touch-action: manipulation
}

.pagination__input input:focus {
    background-color: #342563;
    border-color: #fff
}

.pagination__input span {
    white-space: nowrap;
    color: #8e80b8;
    font-weight: 500
}

@media (max-width: 1200px) {
    .pagination button {
        height: 38px;
        font-size: 12px
    }
    .pagination-nav-prev span,
    .pagination-nav-next span {
        display: none
    }
    .pagination-nav-prev:active,
    .pagination-nav-prev.active,
    .pagination-nav-next:active,
    .pagination-nav-next.active {
        color: #b1adbc;
        border-color: #b1adbc
    }
    .pagination__input input {
        flex-basis: 38px;
        min-width: 38px;
        height: 38px
    }
}

.radio-button {
    display: flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #b1adbc;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s
}

.radio-button:before {
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 50%;
    transition: .3s;
    content: ""
}

.radio-button.active {
    border-color: #fdad05
}

.radio-button.active:before {
    background-color: #fdad05
}

.radio-button:disabled {
    background-color: #b1adbc;
    opacity: .6;
    pointer-events: none
}

.notification-modal {
    overflow: hidden
}

@media (min-width: 601px) {
    .notification-modal {
        max-width: 484px !important;
        margin: 0 auto !important
    }
}

.notification-modal.drawer-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
    background-color: #342563
}

.notification-modal .modal-content {
    background-color: #342563;
    border-radius: 16px
}

.notification-modal .modal-close {
    position: absolute;
    top: 23px;
    right: 21px;
    z-index: 2;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(37, 25, 70, .5);
    border-radius: 50%;
    cursor: pointer
}

.notification-modal .modal-close svg {
    width: 13px;
    height: 13px;
    fill: #fff
}

.notification-modal__wrapper {
    position: relative;
    padding: 15px
}

.notification-modal__img {
    position: relative;
    display: block;
    width: 100%;
    height: 160px;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer
}

.notification-modal__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.notification-modal__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 1px 6px;
    color: #fff;
    font-size: 11px;
    background-color: #338500;
    border-radius: 30px
}

.notification-modal__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px
}

.notification-modal__header p {
    margin: 0
}

.notification-modal__header .notification-modal__badge {
    position: static;
    margin-left: 8px
}

.notification-modal__date {
    color: #b1adbc
}

.notification-modal__title {
    margin-bottom: 8px;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    white-space: pre-line
}

.notification-modal__text {
    min-height: 50px;
    max-height: 300px;
    margin-bottom: 24px;
    overflow: auto;
    color: #b1adbc;
    white-space: pre-line
}

.notification-modal__footer button {
    width: 100%
}

.notification-alerts {
    position: absolute;
    top: 85px;
    left: 50%;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 26px);
    max-width: 1250px;
    height: 0;
    color: #000;
    transform: translate(-50%)
}

.notification-alerts>div {
    max-width: 359px
}

.notification-alert-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 359px;
    margin-bottom: 4px;
    padding: 13px 16px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: .3s
}

@media (min-width: 901px) {
    .notification-alert-card:hover {
        background-color: #ece7ff
    }
}

.notification-alert-card p {
    margin: 0
}

.notification-alert-card__content {
    margin-right: auto
}

.notification-alert-card__img {
    flex: 0 0 42px;
    height: 42px;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 8px
}

.notification-alert-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.notification-alert-card__date {
    margin-top: 2px;
    color: #828f9a;
    font-size: 12px
}

.notification-alert-card__close {
    width: 30px;
    height: 30px;
    margin-left: 30px;
    color: #8592af;
    cursor: pointer;
    transition: .3s
}

@media (min-width: 901px) {
    .notification-alert-card__close:hover {
        color: #000
    }
}

@media (max-width: 900px) {
    .notification-alerts {
        top: 0
    }
}

@media (max-width: 500px) {
    .notification-alerts {
        position: fixed;
        top: auto;
        right: auto;
        bottom: 70px;
        left: 50%;
        width: calc(100% - 16px);
        transform: translate(-50%)
    }
    .notification-alerts .notification-alert-card {
        max-width: 100%
    }
    .notification-alerts__wrapper>div {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        max-width: 100%;
        height: auto !important
    }
    .notification-alerts__wrapper>div:nth-child(1) {
        bottom: 0;
        z-index: 3
    }
    .notification-alerts__wrapper>div:nth-child(2) {
        bottom: 12px;
        z-index: 2
    }
    .notification-alert-card__text {
        max-height: 50px
    }
}

.notification-card {
    margin-bottom: 2px;
    background-color: #251a46;
    border-bottom: 1px solid rgba(255, 255, 255, .0588235294);
    cursor: pointer;
    transition: .3s
}

.notification-card p {
    margin: 0
}

.notification-card.unread {
    border-color: transparent
}

.notification-card.unread .notification-card__wrapper {
    background-color: #342563
}

@media (min-width: 901px) {
    .notification-card.unread:hover .notification-card__wrapper {
        background-color: #4b358e
    }
}

.notification-card.unread:active .notification-card__wrapper {
    background-color: #20163b
}

@media (min-width: 901px) {
    .notification-card:hover .notification-card__wrapper {
        background-color: #342563
    }
}

.notification-card:active .notification-card__wrapper {
    background-color: #3f2b7a
}

.notification-card__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    padding: 15px;
    border-radius: 6px;
    transition: .3s
}

.notification-card__img {
    position: relative;
    flex: 0 0 90px;
    height: 64px;
    margin-right: 8px;
    overflow: hidden;
    border-radius: 4px
}

.notification-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.notification-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 15px;
    color: #fff;
    font-size: 11px;
    background: #ffd30e
}

.notification-card__content {
    flex: 1 1 auto
}

.notification-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px
}

.notification-card__date {
    color: #b1adbc;
    font-size: 11px
}

.notification-card__new-icon {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    background: #fdad05;
    border-radius: 50%
}

.notification-card__title {
    color: #fff;
    font-weight: 500
}

.notification-card__text {
    margin-top: 4px;
    color: #b1adbc;
    font-size: 12px
}

.notification-card__text p,
.notification-card__text button {
    display: inline
}

.notification-card__text button {
    color: #ffd958
}

.notification-card__more {
    align-self: flex-end;
    margin-left: 12px
}

.notification-card.desktop,
.notification-card.desktop .notification-card__wrapper {
    margin-bottom: 8px
}

.notification-card.desktop .notification-card__new-icon {
    position: absolute;
    top: 16px;
    right: 15px
}

.notification-card.desktop .notification-card__text {
    font-size: 14px
}

.notification-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%
}

.notification-history-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    background-color: #342563;
    border-radius: 50%
}

.notification-history-empty__icon svg {
    width: 42px;
    height: 42px;
    color: #8e80b8
}

.notification-history-empty__text {
    margin-bottom: 24px;
    text-align: center
}

.notification-history-empty__text p {
    margin-bottom: 8px;
    color: #b1adbc;
    font-size: 18px
}

.notification-history-empty__text p:first-child {
    color: #fff;
    font-weight: 500;
    font-size: 24px
}

.notification-history-empty .button {
    min-width: 160px
}

.notification-history-empty.mobile .notification-history-empty__text {
    margin-bottom: 20px
}

.notification-history-empty.mobile .notification-history-empty__text p {
    font-size: 16px
}

.notification-history-empty.mobile .notification-history-empty__text p:first-child {
    font-size: 20px
}

.notification-history-empty.widget .notification-history-empty__text {
    margin-bottom: 8px
}

.notification-history-empty.widget .notification-history-empty__text p {
    font-size: 14px
}

.notification-history-empty.widget .notification-history-empty__text p:first-child {
    font-size: 16px
}

.notification-history-empty.widget .button {
    min-width: 132px
}

.notification-history {
    width: 436px;
    padding: 20px 15px;
    background-color: #251a46;
    border-radius: 8px;
    box-shadow: 0 28px 56px rgba(14, 16, 19, .8)
}

.notification-history__wrapper {
    position: relative
}

.notification-history__empty {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 509px
}

.notification-history__title {
    margin-bottom: 16px;
    font-weight: 600;
    font-size: 20px
}

.notification-history__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 13px 0;
    border-top: solid 1px rgba(255, 255, 255, .0588235294);
    border-bottom: solid 1px rgba(255, 255, 255, .0588235294)
}

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

.notification-history__tabs>button {
    margin-right: 4px
}

.notification-history__tabs>button:last-child {
    margin-right: 0
}

.notification-history__list {
    position: relative;
    height: 50vh;
    max-height: 616px;
    margin-bottom: 16px;
    overflow: auto
}

.notification-history__unsubscribe {
    margin-top: 26px;
    margin-bottom: 34px;
    padding: 0 16px
}

.input {
    margin-bottom: 13px
}

.input input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    color: #fff;
    font-size: 16px;
    background: #261a46;
    border: 1px solid transparent;
    border-radius: 6px;
    outline: none !important;
    touch-action: manipulation
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:active,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:hover {
    background-clip: content-box !important;
    border: 1px solid #ff902a !important;
    -webkit-box-shadow: 0 0 0 1000px #ff902a inset !important;
    -webkit-text-fill-color: #fff !important
}

.input input,
.input input+.inputSuffix {
    font-size: 16px
}

.input input:not([readonly]):focus {
    border-color: #ff902a
}

.input input.input-green:not([readonly]):focus {
    border-color: #2dc53a
}

.input input::-webkit-input-placeholder {
    color: #fff
}

.input input::-moz-placeholder {
    color: #fff
}

.input input::-ms-input-placeholder {
    color: #fff
}

.input input::placeholder {
    color: #fff
}

.input input:disabled {
    color: #fff;
    opacity: .8;
    -webkit-text-fill-color: #fff;
    cursor: not-allowed
}

.input input.text-gray {
    color: #99a3b8
}

.input input.small-text {
    font-size: 11px
}

@media screen and (max-width: 1099px) and (min-width: 768px) {
    .input input {
        padding: 0 7px
    }
    .input input+.inputSuffix {
        padding: 0 8px
    }
}

.input--error input {
    color: #ec193f;
    border-color: #ec193f !important
}

.form-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    color: #261a46 !important
}

.form-submit .spinner {
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff
}

.form-alert {
    display: flex;
    margin: 15px 0;
    padding: 10px;
    background: #261a46;
    border: dashed 2px #653ba1;
    border-radius: 5px
}

.form-alert svg {
    flex: 0 0 auto;
    margin-top: 2px;
    margin-right: 5px
}

.form-alert.info {
    color: #fdcd2d;
    border-color: #fdcd2d
}

.form-alert__text {
    line-height: 1.4
}

.calendar {
    position: relative;
    z-index: 20;
    padding: 0 0 5px;
    color: inherit;
    background-color: #261a46;
    border: 1px solid inherit;
    border-radius: 5px
}

.calendar__month .rdp-month_caption {
    margin-bottom: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #653ba1
}

.calendar__label {
    margin-left: 10px;
    font-weight: 500;
    font-size: 14px
}

.calendar__label .rdp-chevron {
    width: 12px;
    fill: currentColor
}

.calendar__weekday {
    background: #000
}

.calendar .rdp-dropdown_root {
    position: relative
}

.calendar .rdp-dropdown_root .rdp-dropdown {
    z-index: 2;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    cursor: inherit;
    line-height: inherit
}

.calendar__day {
    position: relative;
    padding: 3px 5px
}

.calendar__day:before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(100% - 6px);
    transform: translateY(-50%);
    content: ""
}

.calendar__day button {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 5px;
    color: inherit;
    font-size: 14px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer
}

@media (min-width: 901px) {
    .calendar__day button:hover {
        background-color: transparent !important;
        border-color: #fdcd2d !important
    }
}

.calendar__day.rdp-today button {
    color: inherit;
    background-color: #653ba1 !important;
    border-color: #653ba1 !important;
    border-radius: 5px
}

.calendar__day.rdp-selected button {
    color: #261a46;
    background-color: #fdcd2d !important;
    border-color: #fdcd2d !important;
    border-radius: 5px
}

.calendar__day.rdp-range_middle:before {
    background-color: #fdcd2d
}

.calendar__day.rdp-range_start:before {
    right: 0;
    left: auto;
    width: 50%;
    background-color: #fdcd2d
}

.calendar__day.rdp-range_end:before {
    left: 0;
    width: 50%;
    background-color: #fdcd2d
}

.calendar__day.rdp-outside {
    opacity: .5
}

.calendar__nav {
    position: absolute;
    top: 11px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 5px
}

.calendar__nav button {
    margin-left: 5px;
    padding: 2px 5px;
    background-color: #653ba1 !important;
    border-radius: 5px;
    cursor: pointer
}

@media (min-width: 901px) {
    .calendar__nav button:hover svg {
        fill: #fff
    }
}

.calendar__nav svg {
    width: 14px;
    height: 14px;
    fill: #fff
}

.calendar table {
    width: calc(100% - 10px);
    margin: 0 auto;
    overflow: hidden;
    border-collapse: collapse;
    border-spacing: 0
}

.rdp-range_start.rdp-range_end:before {
    display: none
}

.input-date__wrapper {
    position: relative
}

.input-date__trigger {
    position: absolute;
    top: 50%;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #fff;
    border: none;
    transform: translateY(-50%);
    cursor: pointer
}

.input-date__calendar {
    background-color: transparent !important
}

.input-date--disabled .input-date__trigger {
    pointer-events: none
}

.pin-code {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden
}

.pin-code input {
    max-width: 53px;
    width: 100%;
    height: 53px;
    margin-right: 8px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: #261a46;
    border: 1px solid transparent;
    border-radius: 6px;
    outline: none !important;
    touch-action: manipulation
}

.pin-code input:last-child {
    margin-right: 0
}

.pin-code input:focus {
    border-color: #ff902a
}

.pin-code input:disabled {
    opacity: .6;
    pointer-events: none
}

.pin-code input::placeholder {
    color: #fff
}

.pin-code input.error {
    color: #ec193f;
    border-color: #ec193f
}

@media (max-width: 400px) {
    .pin-code input {
        max-width: 45px;
        height: 45px
    }
}

.otp-code-modal__code {
    max-width: 358px;
    margin: 16px auto 0
}

.otp-code-modal__button {
    width: 100%
}

.otp-code-modal__loading {
    position: relative;
    width: 100%;
    min-height: 278px
}

.otp-code-modal__link {
    max-width: 400px;
    margin: 10px auto 0;
    color: #b1adbc;
    text-align: center
}

.confirm-new-tab-modal .modal-content {
    max-width: 450px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px
}

.confirm-new-tab-modal__wrapper {
    padding: 40px 20px 20px;
    text-align: center;
    background-color: #442176
}

.confirm-new-tab-modal__title {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 20px
}

.confirm-new-tab-modal__text {
    margin-bottom: 32px;
    color: rgba(255, 255, 255, .804);
    font-size: 16px
}

.confirm-new-tab-modal__footer {
    display: flex;
    justify-content: center
}

.confirm-new-tab-modal__footer button,
.confirm-new-tab-modal__footer a {
    flex: 1 1 calc(50% - 5px)
}

.confirm-new-tab-modal__footer button {
    margin-right: 10px
}

@media (max-width: 500px) {
    .confirm-new-tab-modal__wrapper {
        padding-top: 30px
    }
    .confirm-new-tab-modal__title {
        font-size: 18px
    }
    .confirm-new-tab-modal__text {
        margin-bottom: 20px;
        font-size: 14px
    }
}