html{
    background-color: black;
}
body{
    background-color: black !important;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}
body[data-top-bar-visible]{
    --header-offset: 96px;
}
body.lock-page{
    pointer-events: none !important;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: var(--color-main-b-1);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: var(--color-main-b-3);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-main-b-5);
}
*{
    box-sizing: border-box;
    scrollbar-width: thin;
}
*:focus{
    outline: none;
}
button:focus{
    outline: none;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
input[type=password],
input[type=email],
input[type=text]{
}
button{
    appearance: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
[data-collapse] > div > nav{
    display: none;
}
[data-collapse] > div > nav.active{
    display: block;
}
[data-custom-select]{
    display: none;
}
#couponDetails {
    display: none;
}
.hidden{
    display: none !important;
}
.custom-select-kp{
    position: relative;
    overflow: hidden;
    color: var(--color-gray-3);
}
.custom-select-kp.open{
    overflow: visible;
}
.custom-select-options{
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0 0 10px 10px;
}
.custom-select-option{
    display: flex;
    align-content: center;
    align-items: center;
}
.custom-select-option.selected{
    order: -1;
    padding: 15px;
    height: 50px;
}
.custom-select-option:not(.selected){
    padding: 13px 15px;
    font-size: 16px;
    height: 44px;
    border: 1px solid var(--color-main-f-1);
    background-color: var(--color-main-f-0);
    margin-top: -1px;
    font-weight: normal;
}
.custom-select.open .custom-select-option.selected{
    background-color: #dfe4e8;
    border-color: #d3d7db;
}
.custom-select.open .custom-select-option.selected:after {
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: -1;
    cursor: default;
}
.custom-select-option:not(.selected):hover{
    background-color: #f2f6f9;
}
.custom-select-kp > span{
    width: 18px;
    height: 18px;
    background-color: var(--color-main-b-6);
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -9px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: all .2s;
    z-index: 2;
    pointer-events: none;
}
.custom-select-kp > span svg{
    width: 8px;
    fill: var(--color-main-f-0);
}
.custom-select-kp.open span{
    transform: rotate(180deg);
}
.site-container{
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 50px;
}
.loading {
    position: relative;
    margin: 1em auto;
    border: .5em solid;
    border-color: rgba(255,255,255,.5) rgba(255,255,255,.7) rgba(255,255,255,.5) rgba(255,255,255,.7);
    width: 3em;
    height: 3em;
    border-radius: 50%;
    display: block;
    animation: fullrotate 1.1s infinite linear;
    transform-origin: center;
}
.loading:after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loading-inside 1s infinite linear;
    background-color: #fff;
    opacity: .5;
    border-radius: 50%;
    transform-origin: center;
}
@keyframes loading-inside {
    0% { opacity: .2; }
    50% { opacity: .6; }
    100% { opacity: .2; }
}
.loading-form {
    pointer-events: none;
    animation: loading-form 1s infinite linear;
}
@keyframes loading-form {
    0% { opacity: .1; }
    50% { opacity: .9; }
    100% { opacity: .1; }
}
@keyframes fullrotate {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}
#fullPageLoading{
    backdrop-filter: blur(12px);
    background: rgba(22,20,33,.6);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    display: none;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
}
#fullPageLoading.visible{
    display: flex;
}
#fullPageLoading img{
    height: 35px;
}
#cookieInfo{
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px 6px 15px;
    border-radius: 6px;
    background-color: rgba(87,84,110,.5);
    backdrop-filter: blur(20px);
    color: var(--color-main-f-1);
    display: flex;
    align-items: center;
    align-content: center;
    visibility: visible;
}
#cookieInfo.hidden{
    visibility: hidden;
}
#cookieInfo a{
    color: var(--color-main-f-0);
    font-weight: bold;
}
#cookieInfo svg{
    fill: var(--color-main-f-0);
    width: 16px;
    height: 16px;
    transform: translateY(3px);
    margin-left: 5px;
}
#liveChat{
    position: fixed;
    right: 20px;
    bottom: 50px;
    background-color: dodgerblue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
#liveChat svg{
    width: 25px;
    fill: #ffffff;
}
#rightSideButtons{
    position: fixed;
    right: 0;
    width: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}
#sideLanguageMenu{
    display: inline-flex;
    transform: translateX(-40px);
    transition: all .3s;
}
#sideLanguageMenu.on{
    transform: translateX(-100%);
}
#sideLanguageMenu img{
    width: 40px;
}
#sideLanguageMenu a{
    border-radius: 6px;
    margin-right: 3px;
    overflow: hidden;
    display: flex;
}
#sideLanguageMenu:not(.on) a[data-cls="on"]{
    border-radius: 6px 0 0 6px;
}
#sideLanguageMenu a[data-cls="on"]{
    order: -1;
}
#rightSideButtons > a{
    transform: translateX(-40px);
    width: 40px;
    margin-bottom: 5px;
    border-radius: 6px 0 0 6px;
    display: inline-flex;
    padding: 10px;
}
#rightSideButtons > a svg{
    fill: white;
    width: 24px;
}
#rightSideButtons > a span{
    transform: rotate(90deg) translate(10px, -25px);
    font-size: 22px;
    height: 40px;
    transform-origin: 0 0;
    letter-spacing: 2px;
}
#rightSideButtons > a{
    background-color: #e5b400;
    font-size: 0;
}
#rightSideButtons > a.text-btn {
    background-color: var(--color-accent-bg-normal);
    color: white;
    height: 100px;
}
#siteWrapper{
    min-height: 100vh;
    margin: 0 auto;
}
#header{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--header-offset);
    top: 0;
    z-index: 100;
    position: fixed;
}
#siteHeader{
    width: 100%;
    padding: 0 10px;
    height: var(--header-height);
    background-color: var(--color-main-b-0);
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
#headerLogo{
    display: flex;
}
#headerLogo img{
    max-height: 40px;
}
#siteContent{
    min-height: 100%;
    display: flex;
    position: relative;
}
#leftBarToggleBtn {
    margin-right: 10px;
    position: relative;
}
#leftBarToggleBtn svg{
    display: block;
    width: 36px;
    height: 36px;
    transition: .3s all;
    fill: var(--color-main-f-0);
    stroke: var(--color-main-f-0);
}
#leftBarToggleBtn.left-bar-visible svg{
    opacity: 0;
}
#leftBarToggleBtn:after,
#leftBarToggleBtn:before{
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background-color: var(--color-main-f-0);
    opacity: 0;
    transform-origin: center;
    transition: .3s all;
    top: 50%;
    left: calc(50% - 10px);
}
#leftBarToggleBtn.left-bar-visible:after{
    opacity: 1;
    transform: rotate(-45deg);
}
#leftBarToggleBtn.left-bar-visible:before{
    opacity: 1;
    transform: rotate(45deg);
}
#rightBar,
#leftBar{
    padding: 10px;
    height: calc(100vh - var(--header-offset));
    top: var(--header-offset);
    bottom: 0;
    overflow: hidden auto;
    background-color: var(--color-main-b-1);
    transition: all .3s;
    position: fixed;
    z-index: 100;
}
#rightBar{
    width: var(--right-bar-width);
    right: 0;
    transform: translateX(100%);
    height: calc(100vh - var(--header-offset) - 60px);
}
#leftBar{
    width: var(--left-bar-width);
    left: 0;
    transform: translateX(-100%);
}
#siteChat {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#siteChatMessages {
    overflow: hidden auto;
    margin-top: auto;
    position: relative;
}
#siteChatMessagesLoading{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 1;
}
#siteChatInputLoading{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 1;
}
#siteChatTitle{
    font-size: 16px;
    color: var(--color-main-f-0);
    font-weight: bold;
    display: flex;
}
#siteChatTitle a{
    transform: translateY(-3px);
    margin-left: 7px;
}
#siteChatTitle a svg{
    fill: var(--color-main-f-0);
    width: 20px;
    height: 20px;
}
#siteChatParticipantCount{
    margin-right: auto;
}
#siteChatInput {
    position: relative;
}
#siteChatInputHeader{
    color: var(--color-main-f-0);
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}
#siteChatCharCount.warn{
    color: red;
    text-shadow: 0 0 3px sandybrown;
}
#siteChatMessageTextarea{
    height: 80px;
    max-height: 100px;
    width: calc(100% - 30px);
    background-color: var(--color-main-b-7);
    color: var(--color-main-f-0);
    border: none;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    word-break: break-all;
    flex-grow: 1;
    display: flex;
}
#siteMessageReplyArea{
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 30px);
    color: var(--color-main-f-2);
    font-size: 12px;
    white-space: nowrap;
}
#siteMessageReplyCancelBtn {
    color: red;
    line-height: 1;
    font-weight: bold;
    font-size: 14px;
}
#siteChatMessageInput{
    position: relative;
    width: 100%;
}
button#siteChatLoadMoreMessages {
    background-color: var(--color-main-b-7);
    color: var(--color-main-f-2);
    border-radius: 10px;
    margin: 0 auto;
    display: block;
    padding: 2px 12px;
    text-transform: uppercase;
}
#siteChatMessageBtns{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 30px;
}
#siteChatMessageBtns button{
    position: relative;
}
#siteChatMessageBtns button:after{
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1;
}
#siteChatMessageBtns svg{
    fill: var(--color-main-f-0);
    width: 25px;
    height: 25px;
    display: flex;
    pointer-events: auto;
}
#siteChatParticipantCount {
    line-height: 26px;
    margin-left: 10px;
}
#siteChatParticipantCount span{
    width: 10px;
    height: 10px;
    background-color: greenyellow;
    border-radius: 15px;
    display: inline-block;
    box-shadow: 0 0 4px green;
}
.site-message-like-count,
.site-message-time {
    padding: 1px 0 0 0;
}
.site-message-like-button,
.site-message-reply-button{
    width: 16px;
    display: flex;
    padding: 0;
    margin: 0 3px;
}
.site-message{
    width: 100%;
    padding: 5px;
    margin: 5px 0;
    word-break: break-all;
    background-color: var(--color-main-b-4);
    border-radius: 5px;
    color: var(--color-main-f-2);
}
.site-message.highlight .site-message-reply,
.site-message.highlight{
    box-shadow: inset 0 0 1px 2px rgba(201, 255, 105, 0.85), inset 0 0 4px 4px rgba(210, 205, 200, 0.85);
}
.site-message-reply {
    font-size: 11px;
    background-color: var(--color-main-b-5);
    border-bottom: 1px solid var(--color-main-f-3);
    display: block;
    margin: -5px;
    border-radius: 10px;
    margin-bottom: 5px;
    padding: 5px;
    color: var(--color-main-f-3);
}
.site-message-reply:hover{
    color: var(--color-main-f-3);
}
.site-message-sender{
    margin-right: auto;
}
.site-message-sender.admin {
    font-style: italic;
    color: var(--color-yellow);
}
.site-message-header{
    font-size: 12px;
    display: flex;
    color: var(--color-main-f-3);
}
.site-message-header button svg {
    fill: var(--color-main-f-0);
    height: 16px;
    width: 16px;
}
#memberMenuHeader{
    display: flex;
}
#memberMenuHeader .dropdown{
    margin-right: 10px;
}
#memberMenuHeader .dropdown-btn{
    background: var(--color-main-b-3);
    border-radius: 6px;
    padding: 10px;
    line-height: 10px;
}
#memberMenuHeader .dropdown.click.visible .dropdown-btn,
#memberMenuHeader .dropdown.hover:active .dropdown-btn,
#memberMenuHeader .dropdown.hover:hover .dropdown-btn{
    background-color: var(--color-main-b-4);
    border-radius: 6px 6px 0 0;
}
#headerBalances .dropdown-btn{
    color: #dfe4e8;
    font-weight: 900;
    font-size: 14px;
    line-height: 18px;
    padding: 10px 15px;
}
#memberMenuHeader svg{
    fill: #dfe4e8;
    height: 18px;
    width: 18px;
}
#memberMenuHeader > a,
#memberMenuHeader > button{
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
    color: #fff;
}
#memberMenuHeader > a{
    background-color: var(--color-main-b-7);
    margin-right: 10px;
    line-height: 10px;
    padding: 10px;
}
#memberMenuHeader > button{
    background-color: var(--color-accent-bg-normal);
    padding: 8px 15px;
}
#memberMenuHeader > button:hover{
    background-color: var(--color-accent-bg-light);
}
#memberMenuHeader > a#rightBarToggleBtn{
    background-color: var(--color-site-chat-btn-bg);
    margin: 0 0 0 10px;
    position: relative;
}
#rightBarToggleBtn.right-bar-visible svg {
    opacity: 0;
}
#rightBarToggleBtn.right-bar-visible:before {
    content: '×';
    line-height: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#myAccountBtn{
    display: flex;
    align-content: center;
    align-items: center;
}
#headerMemberMenu{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,.1);
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 100%;
}
#headerMemberMenu a{
    margin: 1px;
    white-space: nowrap;
}
#headerMemberArea a{
    border-radius: 6px;
    color: #d3d7db;
    padding: 8px;
    width: 100%;
}
#headerMemberArea a:hover{
    background-color: rgba(255,255,255,.2);
}
#headerMemberArea .dropdown-content svg{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
#headerMemberArea .dropdown-content > a:last-child{
    padding: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    font-size: 14px;
    font-weight: bold;
}
#siteContent.left-bar-visible #leftBar{
    transform: unset;
}
#siteContent.right-bar-visible #rightBar{
    transform: unset;
}
#pageWrapper{
    overflow: hidden;
    background-color: var(--color-main-b-2);
    padding-top: calc(var(--header-offset));
    width: 100%;
    margin-left: 0;
    transition: all .3s;
}
#siteContent.left-bar-visible #pageWrapper{
    width: calc(100% - var(--left-bar-width));
    transform: translateX(var(--left-bar-width));
    transition: all .3s;
}
#pageContent{
    width: 100%;
}
#memberMenuHeader,
#authButtons{
    margin: 0 5px 0 auto;
}
#authButtons svg{
    width: 12px;
    height: 12px;
    fill: var(--color-main-f-0)
}
#categoryBtns{
    margin-right: unset;
    width: 100%;
    overflow: hidden;
}
#categoryBtns a{
    display: inline-flex;
    width: unset;
}
#licence {
    display: inline-flex;
}
.button{
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 30px;
    text-transform: uppercase;
}
.button.secondary{
    color: var(--color-main-f-1);
    background-color: var(--color-main-b-3);
    border: 1px solid rgba(23, 44, 49, 0.6);
}
.button.secondary:hover{
    background-color: var(--color-main-b-4);
}
.button.primary{
    color: var(--color-main-b-1);
    border: 1px solid rgba(45,11,3,.6);
    background: var(--primary-btn-bgn);
    box-shadow: var(--primary-btn-sdn);
}
.button.primary:hover{
    background: var(--primary-btn-bgh);
    box-shadow: var(--primary-btn-sdh);
}
#mainMenu{
    display: flex;
    flex-direction: column;
}
#mainMenu a .new-tag{
    font-size: .7rem;
    background-color: var(--color-green-dark);
    color: #fff;
    border-radius: 10px;
    padding: 0 5px;
    margin-left: auto;
}
#mainMenu a:hover{
    text-decoration: none;
}
.toggle-arrow{
    background-color: var(--color-main-b-3);
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
}
.toggle-arrow svg{
    fill: var(--color-main-f-0);
    height: 8px;
    width: 12px;
    transition: .25s ease;
    transform: rotate(90deg);
    margin: 6px auto;
    display: block;
}
#helpMenu nav a svg,
#moreMenu nav a svg{
    max-width: 8px;
    fill: var(--color-main-f-3);
}
#helpMenu nav a:hover svg,
#moreMenu nav a:hover svg{
    fill: var(--color-main-f-0);
}
#myAccountMenu svg{
    fill: var(--color-main-f-3);
}
#languageMenu a img{
    width: 20px;
    border-radius: 50%;
    margin-right: 20px;
}
#globalSearch{
    position: relative;
    margin-left: 20px;
}
#globalSearch input{
    background-color: var(--color-main-b-2);
    color: var(--color-main-f-3);
    border-radius: 5px;
    padding: 10px 10px 10px 40px;
    min-width: 450px;
    appearance: none;
    border: none;
}
#globalSearch input:focus{
    background-color: var(--color-main-b-3);
    color: var(--color-main-f-0);
    outline: none;
}
#globalSearch input:focus + button{
    display: block;
}
#globalSearch > svg{
    position: absolute;
    fill: var(--color-main-f-2);
    width: 18px;
    top: 10px;
    left: 10px;
}
#globalSearch > button{
    background-color: var(--color-main-b-5);
    position: absolute;
    right: 10px;
    top: 12px;
    display: none;
    border-radius: 3px;
    font-size: 0;
    padding: 5px;
}
#globalSearch > button svg{
    width: 8px;
    height: 8px;
    fill: white;
}
#footer{
    display: flex;
    flex-direction: column;
    background-color: var(--color-main-b-2);
    font-size: 14px;
    font-weight: 300;
    padding-bottom: 70px;
}
#footer p{
    color: var(--color-main-f-3);
}
#footer a{
    color: var(--color-main-f-0);
}
#footerAwards{
    padding: 80px 0 30px 0;
    justify-content: center;
    display: flex;
    display: none;
}
#footerAwards a{
    margin: 0 5px;
}
#footerSocialMenu{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
#footerSocialMenu a{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-main-b-3);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin: 40px 10px;
}
#footerSocialMenu a svg{
    width: 26px;
    height: 26px;
}
#footerSocialMenu a svg path{
    fill: var(--color-main-f-0);
}
#footerLogos{
    background-color: var(--color-main-b-3);
    padding: 30px 10%;
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
}
#footerLogosSlider{
    max-width: calc(100% - 50px);
    overflow: hidden;
    margin: 0 20px;
}
#footerLogosWrapper {
    display: inline-flex;
    transition: all .2s;
}
#footerLogosWrapper i{
    opacity: .5;
    transform: scale(.65,.65);
    transition: all .2s;
}
#footerLogosWrapper i:hover{
    opacity: .9;
    transform: scale(.75,.75);
}
#footerLogos button{
    background-color: var(--color-main-b-4);
    border-radius: 6px;
    padding: 5px 10px;
    display: block;
    height: 35px;
    width: 40px;
    margin: 0;
    position: relative;
    visibility: hidden;
    text-align: center;
    opacity: .6;
}
#footerLogos button:hover{
    opacity: .9;
}
#footerLogos:hover button{
    visibility: visible;
}
#footerLogos button.disabled{
    background-color: var(--color-main-f-4);
    pointer-events: none;
    opacity: .2;
}
#footerLogos button svg{
    height: 16px;
    width: 16px;
    fill: var(--color-main-f-1);
}
#footerText{
    padding: 20px 10% 30px 10%;
    font-size: 12px;
}
#footerText a{
    color: var(--color-accent-bg-normal);
}
#footerExtras{
    padding: 25px 10% 10px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
#footerExtras img{
    height: 40px;
}
#footerExtras p{
    margin: 0;
}
#footerPayout {
    text-align: center;
}
#footerPayout {
    border: 1px solid #aaa;
    color: #aaa;
    font-size: 13px;
    border-radius: 20px;
    padding: 6px 10px;
    display: inline-block;
    margin: 0 10px 0 auto;
}
#footerApps a div img {
    height: 25px;
    margin: 3px;
}
#safeGambling {
    display: flex;
}
#safeGambling a{
    display: inline-flex;
    margin: 0 5px;
}
#safeGambling .gamcare{
    transform: scale(.9,.9);
}
#safeGambling > * {
    opacity: .5;
}
#safeGambling > *:hover {
    opacity: .9;
}
#footerMenu{
    padding: 30px 10%;
    margin: 0 -10px;
}
#footerMenu a{
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px;
    padding: 10px;
    display: inline-flex;
}
#footerPlatform img{
    height: 45px;
    margin: 0 auto;
    display: block;
}
html.iziModal-isAttached, html.iziModal-isOverflow {
    overflow: unset;
}
html.iziModal-isAttached body, html.iziModal-isOverflow body {
    overflow-y: scroll;
    position: relative;
}
body:not(.modal-open){
    padding-right: 0 !important;
}
#topBar.hidden{
    display: none;
}
#topBar{
    width: 100%;
    height: 40px;
    background-color: var(--color-top-bar-bg);
    box-shadow: 0 4px 8px rgb(22,20,33);
    padding: 10px 15px 9px;
    z-index: 13;
    font-size: 14px;
    line-height: 21px;
    color: #eee;
    text-align: center;
}
#topBar a{
    color: #fff;
    display: inline-block;
}
#topBar > button {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #fff;
    line-height: 35px;
    padding: 0 5px;
}
#siteContent.left-bar-visible #bottomBar{
    transition: all .3s;
    width: calc(100% - var(--left-bar-width));
    left: var(--left-bar-width);
}
#siteContent.right-bar-visible #bottomBar{
    transition: all .3s;
    width: calc(100% - var(--left-bar-width));
    right: var(--right-bar-width);
}
#siteContent.right-bar-visible.left-bar-visible #bottomBar{
    transition: all .3s;
    width: calc(100% - var(--left-bar-width) - var(--right-bar-width));
    left: var(--left-bar-width);
    right: var(--right-bar-width);
}
#siteContent.right-bar-visible.left-bar-visible #bottomBar a{
    font-size: 12px;
    padding: 10px 15px;
}
#siteContent.right-bar-visible.left-bar-visible #bottomBar a svg{
    width: 15px;
    height: 15px;
}
#bottomBar{
    position: fixed;
    bottom: 0;
    background-color: var(--color-bottom-bar-bg);
    backdrop-filter: blur(52px);
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 13;
    font-size: 12px;
    color: #fff;
    transition: all .3s;
    border-top: 1px solid var(--color-main-b-4);
}
#siteTime{
    margin-left: auto;
    padding: 10px 20px;
    font-family: sans-serif;
    color: var(--color-main-f-2);
}
#bottomBar.in-visible {
    transform: translateY(100%);
}
#bottomBar.in-visible #toggleBottomBar{
    transform: translateY(-100%);
    border: 1px solid var(--color-main-b-4);
    background-color: var(--color-main-b-5);
    border-top-left-radius: 10px;
}
#bottomBar.in-visible #toggleBottomBar i{
    transform: rotate(180deg);
}
#bottomBar a {
    display: flex;
    align-content: center;
    align-items: center;
    color: var(--color-main-f-3);
    padding: 15px 20px;
    font-size: 13px;
    border-right: 1px solid var(--color-main-b-4);
    white-space: nowrap;
}
#bottomBar a svg{
    fill: var(--color-main-f-3);
    height: 20px;
    width: 20px;
    margin-right: 5px;
}
#bottomBar a:hover {
    color: var(--color-main-f-1);
}
#bottomBar a:hover svg{
    fill: var(--color-main-f-1);
}
#supportMenu {
    position: relative;
}
#supportMenu a{
}
#supportMenu.opened > #supportMenuItems{
    display: flex;
}
#supportMenuItems{
    display: none;
    flex-direction: column;
    position: absolute;
    right: 0;
    bottom: 100%;
    border: 1px solid var(--color-main-b-3);
    background-color: var(--color-main-b-2);
}
#supportMenuItems a{
    border-top: 1px solid var(--color-main-b-3);
}
.modal button.close {
    padding: 0 10px;
    margin: 0;
    background-color: transparent;
    border-radius: 8px;
    opacity: 1;
    position: absolute;
    right: 5px;
    top: 4px;
    font-size: 3rem;
    color: #888;
    font-weight: normal;
    line-height: 2.5rem;
}
.modal-backdrop.fade.show {
    opacity: 1;
    backdrop-filter: blur(12px);
    background: rgba(22,20,33,.6);
}
.modal.fade.show {
    opacity: 1;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    display: flex !important;
    color: var(--color-gray-3);
}
.modal-header {
    display: flex;
    justify-content: space-between;
}
.modal-header h3{
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
}
.modal-dialog {
    display: flex;
    align-items: center;
    align-content: center;
    max-width: unset;
    min-height: 100%;
    min-width: 100%;
    margin: 0;
}
.modal-content {
    width: 100%;
    margin: 30px auto;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    max-width: 540px;
}
.security-row {
    display: flex;
    align-content: center;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
    align-items: center;
}
.security-row .btn {
    margin-left: auto;
    min-width: 100px;
}
.security-row label {
    margin: 0 5px 0 0;
}
#activityModalContent h5{
    display: flex;
}
.go-back-to-activity-modal,
.go-back-to-payment-options {
    background-color: #ededed;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 13px;
    margin-left: auto;
}
.go-back-to-member-area{
    margin-left: auto;
}
.parsley-required {
    color: red;
}
#loginModal{
    text-align: center;
}
#loginModal .modal-body{
    display: flex;
    flex-direction: row-reverse;
}
#loginModal .modal-body > form,
#loginModalCustomContentArea {
    width: 50%;
    margin: 0 5px;
}
#loginModalCustomContentArea img{
    width: 100%;
    border-radius: 5px;
}
#announcementPopup .modal-content,
#activityModal .modal-content,
#memberMenuModal .modal-content{
    max-width: 850px;
}
#paymentModal .modal-content {
    max-width: 800px;
}
#gamePreModal .modal-content,
#preVerificationModal .modal-content,
#forgotPasswordModal .modal-content {
    max-width: 320px;
}
#loginModal .modal-content,
#registerModal .modal-content{
    max-width: 650px;
}
#paymentModal .modal-footer{
    padding: 0;
}
#paymentModal h5{
    display: flex;
}
#paymentModal h5 button{
    margin-left: auto;
}
.list-group-item.active {
    background-color: #879cb1;
    border-color: #8b96a2;
}
body.lock-scroll,
body[modal-visible]{
    overflow: hidden;
}
#activityModal #activityModalContent .payment-area,
#activityModal.opened-help-modal .integration-body > *,
#activityModal.opened-help-modal #activityModalContent #paymentModal > h5,
#activityModal.opened-help-modal #activityModalContent #paymentModal > .modal-footer{
    display: none;
}
#globalModal{
    display: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 300;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    overflow: hidden auto;
}
#globalModal.visible{
    display: flex;
}
#globalModalWrapper{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
}
#globalModalContent{
    width: 100%;
    margin: 30px auto;
    position: relative;
    display: flex;
}
#globalModalContent > div{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 0 42px hsla(0,0%,100%,.05),0 30px 50px rgba(22,20,33,.3);
    background-color: #fff;
}
#globalModal[data-modal-name="forgotPassword"] #globalModalContent,
#globalModal[data-modal-name="login"] #globalModalContent{
    width: 350px;
}
#globalModal[data-modal-name="member"] #globalModalContent{
    max-width: 1330px;
}
#globalModal[data-modal-name="register"] #globalModalContent{
    max-width: 720px;
    max-height: 450px;
}
#globalModalClose{
    background-color: #fff;
    right: -40px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    padding: 4px;
    position: absolute;
    top: 0;
}
#globalModalClose svg{
    width: 16px;
    height: 16px;
}
#globalModalOverlay{
    backdrop-filter: blur(12px);
    background: rgba(22,20,33,.6);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}
.modal-form input[type=text],
.modal-form input[type=password],
.modal-form input[type=email]{
    width: 100%;
    height: 44px;
    font-size: 14px;
    line-height: 16px;
    color: #161421;
    background-color: #f2f6f9;
    border: 1px solid #dfe4e8;
    border-radius: 6px;
    padding: 35px 15px 20px 20px;
}
.modal-form select[disabled],
.modal-form select[disabled] + span,
.modal-form input[disabled],
.modal-form input[disabled] + span {
    opacity: .5;
}
.modal-form input::placeholder {
    color: transparent;
}
.modal-form input:focus{
    border: 1px solid #3861fb;
}

.modal-form label input.is-valid ~ span,
.modal-form label input.is-invalid ~ span,
.modal-form label input:not(:placeholder-shown) ~ span,
.modal-form label input:focus ~ span{
    transform: translate3d(4px,-4px,0) scale(.8);
    font-weight: 600;
}
.modal-form label select ~ span,
.modal-form label input:not(:placeholder-shown) ~ span,
.modal-form label input:focus ~ span{
    color: #3861fb;
}
.modal-form label select.is-valid ~ span,
.modal-form label input.is-valid ~ span{
    color: var(--color-accent-bg-normal);
}
.modal-form label select.is-invalid ~ span,
.modal-form label input.is-invalid ~ span{
    color: #e31351;
}
.modal-form label input ~ span{
    position: absolute;
    top: 0;
    left: 0;
    color: #585d6d;
    transition: all .2s;
    transform-origin: left top;
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
    padding: 20px;
}
.modal-form label input.x:valid,
.modal-form label select.is-valid,
.modal-form label input.is-valid{
    background-color: #d9ffeb;
    border: 1px solid var(--color-accent-bg-normal);
    color: #161421;
}
.modal-form label input.x:invalid,
.modal-form label select.is-invalid,
.modal-form label input.is-invalid{
    background-color: #ffe0e9;
    border: 1px solid #e31351;
    color: #161421;
}
.modal-form .toggle-password-visibility {
    top: 16px;
}
.form-timer{
    position: relative;
    margin-top: 10px;
}
.form-timer button:first-child{
    background-color: #ccc;
}
.form-timer button:last-child{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    background-color: #df7899;
    transition: opacity .2s;
}
.form-timer button:last-child:hover{
    opacity: 1;
}
.modal-form p{
    margin-top: 0;
}
.modal-form label{
    position: relative;
    margin-bottom: 15px;
    display: block;
}
.modal-form a{
    color: var(--color-accent-bg-normal);
}
#globalModal hr{
    border-color: rgba(0,0,0,0.05);
    margin: 15px 0;
}
.modal-form button{
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px;
    border-radius: 6px;
    color: #fff;
    background-color: var(--color-accent-bg-normal);
    width: 100%;
}
.modal-form .unactive,
.modal-form button[disabled]{
    background-color: #ccc;
    pointer-events: none;
}
#verifySecureWordErrorMessage,
#otpFormErrorMessage,
#loginFormErrorMessage{
    font-size: 11px;
    line-height: 15px;
    font-weight: 600;
    color: #e31351;
    text-align: center;
    display: block;
    margin-top: 15px;
}
.modal-form > section#loginStepAccountVerification,
.modal-form > section#loginStepSecureWord,
.modal-form > section#loginStepEmail,
.modal-form > section#loginStepSms,
.modal-form > section#loginStepOtp {
    display: none;
}
#registerModal .modal-body > img {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
}
#registerForm{
    height: 100%;
    position: relative;
}
#registerForm label{
    position: relative;
}
#registerForm input{
    display: block;
    width: 100%;
    font-weight: 700;
    font-size: 26px;
    line-height: 32px;
    color: #161421;
    padding: 10px 0;
    margin-bottom: 10px;
    border: none;
    border-bottom: 2px solid #dfe4e8;
}
#registerForm > button{
    position: absolute;
    bottom: 30px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px;
    border-radius: 6px;
    color: #fff;
    background-color: var(--color-accent-bg-normal);
    width: calc(100% - 60px);
    left: 50%;
    transform: translateX(-50%);
}
#registerForm input + span{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0);
    opacity: 0;
    transition: all .25s;
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    color: #9ea4ae;
}
#registerForm input:not(:placeholder-shown) + span{
    opacity: 1;
    transform: translateY(-12px);
}
#registerForm small{
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #9ea4ae;
    margin-right: auto;
}
#registerFormsWrapper{
    width: calc(100% - 0px);
}
.register-step-content{
    display: none;
}
.register-step-content.active{
    display: block;
}
.slider{
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}
.slider-btn,
.slider button{
    font-size: 14px;
    line-height: 16px;
    color: var(--color-main-f-0);
    background-color: var(--color-main-b-4);
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 6px;
}
.slider button.swiper-button-disabled{
    opacity: .5;
    pointer-events: none;
}
.slider button:hover{
    background-color: var(--color-main-b-5);
}
.slider-title{
    font-size: 24px;
    line-height: 1.5;
    color: #fff;
    font-weight: 600;
}
.slider-title:hover{
    color: #fff;
}
.slider-top{
    display: flex;
    align-content: center;
    align-items: center;
    margin-bottom: 15px;
    height: 40px;
}
.slider-top .slider-nav{
    margin-left: auto;
}
.slider-top img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
}
.slider-bottom {
    display: flex;
    justify-content: center;
}
.slider-bottom .slider-btn{
    font-size: 15px;
    padding: 10px 20px;
    margin-top: 5px;
}
.slider-nav button{
    padding: 10px;
}
.slider-nav .slider-btn{
    margin-left: auto;
    padding: 10px 20px;
}
.slider img{
    transition: all .2s;
}
.slider > .slider-nav{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5%;
    height: calc(100% - 40px);
    z-index: 1;
    background: linear-gradient(90deg,rgba(27,25,40,0) 40%,#1b1928);
    user-select: none;
    transition: all .2s;
    opacity: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}
.slider:hover > .slider-nav{
    opacity: 1;
}
.slider > .slider-nav button {
    backdrop-filter: blur(14px);
    background-color: transparent;
    margin: 3px 0;
}
.slider svg {
    height: 14px;
    fill: var(--color-main-f-0);
}

.game-slider a{
    display: flex;
    overflow: hidden;
    border-radius: 10px;
}
.game-slider .slider-body img{
    width: 100%;
}
.game-slider a:hover {
    color: #fff;
}
.game-slider a:hover img{
    transform: scale(1.07);
}
.provider-slider img{
    max-width: 80%;
    max-height: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#gameStudiosAnon .provider-slider a:hover img{
    transform: translate(-50%,-50%) scale(1.07);
}
.provider-slider .swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: hsla(0,0%,100%,.05);
    height: 100%;
}
#gameStudiosAnon .swiper-slide{
    padding-bottom: 10%;
}
#gameStudiosLogin .swiper-slide{
    border-radius: 10px;
    background: var(--color-main-b-4);
    flex-direction: column;
}
#gameStudiosLogin .slider-nav{
    background: linear-gradient(90deg,rgba(27,25,40,0) 40%,var(--color-main-b-3));
}
#gameStudiosLogin figure{
    position: relative;
    background-color: hsla(0,0%,100%,.05);
    margin: 0;
    padding-top: 60%;
    width: 100%;
}
#gameStudiosLogin span{
    color: #dfe4e8;
    font-size: 16px;
    margin: 10px 0 0 0;
    line-height: 1;
}
#gameStudiosLogin span:last-child{
    font-size: 14px;
    color: #9ea4ae;
    margin-bottom: 10px;
}
#gameStudiosLogin{
    padding: 30px 0;
    background-color: var(--color-main-b-3);
}
#gameStudiosLogin .slider {
    margin-top: 0;
}
.badge-red {
    background: linear-gradient(to bottom right,#fc4777,#e31351);
}
.badge-green {
    background: linear-gradient(to bottom right,#0dd182,var(--color-accent-bg-normal));
}
.badge-blue {
    background: linear-gradient(to bottom right,#598bff,#3861fb);
}
.badge-orange {
    background: linear-gradient(to bottom right,#f90,#ff4d00);
}
.badge-purple {
    background: linear-gradient(to bottom right,#854dff,#6f00ff);
}
.badge {
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 5px 2px;
}
.tooltip{
    position: absolute;
    left: 50%;
    top: -100%;
    transform: translateX(-50%);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #161421;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(22, 20, 33, .2);
    z-index: 2;
    padding: 15px;
    white-space: normal;
}
.tooltip:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #fff;
    border-width: 10px;
    margin-left: -10px;
}
.dropdown.click.visible .dropdown-content,
.dropdown.hover:active .dropdown-content,
.dropdown.hover:hover .dropdown-content{
    display: flex;
}
.dropdown-btn{
    cursor: pointer;
}

.dropdown.click.visible .dropdown-btn:after {
    position: fixed;
    width: 100%;
    height: 100%;
    content: '';
    left: 0;
    top: 0;
    z-index: 1;
}
.dropdown-content{
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    border-radius: 10px 0 10px 10px;
    background-color: var(--color-main-b-4);
    overflow: hidden;
    min-width: 300px;
    padding: 10px;
    z-index: 1;
}
#mmSidebar{
    display: flex;
    flex-direction: column;
    min-width: 262px;
    background-color: var(--color-main-b-3);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    color: #fff;
}
#memberModal{
    display: flex;
}
#mmNav{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}
#mmNav a{
    font-size: 16px;
    line-height: 19px;
    color: #d3d7db;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    align-content: center;
    align-items: center;
    padding: 15px;
}
#mmNav a.active,
#mmNav a:hover{
    background-color: var(--color-main-b-4);
    color: #fff;
}
#mmNav a.active svg,
#mmNav a:hover svg{
    fill: #fff;
}
#mmNav svg{
    width: 26px;
    height: 26px;
    fill: #d3d7db;
    margin-right: 20px;
}
#mmUsername{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
#mmCTitle{
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(22,20,33,.05);
    background-color: #fff;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    text-transform: uppercase;
    color: #161421;
}
#mmContentWrapper{
    background-color: #f2f6f9;
    flex-grow: 1;
}
#mmPayment{
    margin: 0 -3px;
}
#mmPayment button{
    color: #fff;
    margin: 0 3px;
}
#mmPayment button:first-child{
    background-color: var(--color-main-b-4);
}
#mmPayment button:first-child:hover{
    background-color: var(--color-main-b-5);
}
#mmPayment button:last-child{
    background-color: var(--color-accent-bg-normal);
}
#mmPayment button:last-child{
    background-color: #0dd182;
}
#mmBalance{
    background-color: var(--color-main-b-4);
    border-radius: 6px;
    margin-bottom: 15px;
    display: flex;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    align-content: center;
}
#memberArea {
    display: flex;
}
#memberMenu{
    display: flex;
    flex-direction: column;
    width: 200px;
    background-color: var(--color-main-b-3);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    color: #fff;
}
#memberMenu a{
    font-size: 16px;
    line-height: 19px;
    color: #d3d7db;
    margin-bottom: 5px;
    border-radius: 6px;
    display: flex;
    align-content: center;
    align-items: center;
    padding: 10px 15px;
}
#memberMenu a.active,
#memberMenu a:hover{
    background-color: var(--color-main-b-4);
    color: #fff;
}
#memberAreaDetails table .btn {
    float: right;
    margin-left: 5px;
}
#memberAreaContent {
    width: calc(100% - 200px);
    padding: 15px;
}
#memberAreaContent h5{
    padding: 10px 20px;
    font-size: 16px;
    line-height: 30px;
    text-transform: uppercase;
    color: #161421;
    border: 1px solid #ddd;
    background-color: #dff4e7;
    border-radius: 10px;
    display: flex;
    align-content: center;
    align-items: center;
}
#memberMenuModal .modal-header {
    box-shadow: 0 4px 6px rgba(22,20,33,.05);
    background-color: #ccdbe6;
    border-bottom: 1px solid #b9c2c6;
}
#memberMenuModal .modal-body {
    padding: 0;
}
.ticket-list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ticket-list input[type="radio"]:checked, .ticket-list input {
    display: none !important;
}
.ticket-list label {
    list-style: none;
    display: inline-flex !important;
    justify-content: space-between;
    border: 1px solid #ddd;
    padding-right: 20px;
    padding-left: 0;
    margin: 10px;
    position: relative;
    width: auto !important;
    cursor: default !important;
}
.ticket-list label:after {
    display: none !important;
    transform: scale(0) !important;
}
.ticket-list label:before {
    display: none !important;
    position: absolute;
    background-color: #0b90c4;
    content: '+';
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    z-index: 1;
    font-weight: bold;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    transform: scale(0) !important;
}
.ticket-list label:hover:before {
    opacity: 1;
}
.ticket-list label:hover input {
    display: none;
}
.ticket-list label span {
    background-color: #eee;
    padding: 0 10px;
    line-height: 35px;
    margin-right: 20px;
}
.ticket-list label p {
    margin: 0;
    line-height: 35px;
    font-size: 18px;
}
.ticket-list label p strong {
    transition: all 0.5s;
}
.ticket-list label p strong.flash {
    text-shadow: 0 0 13px #2af902;
}
.ticket-list label .changed {
    background-color: #eee;
    font-size: 14px;
    padding: 0 15px;
    line-height: 35px;
}
.ticket-list label.purple {
    border-color: #aa7fee;
    color: #aa7fee;
}
.ticket-list label.purple span {
    background-color: #aa7fee !important;
    color: #fff;
}
.ticket-list label.yellow {
    border-color: #eeaf0d;
    color: #eeaf0d;
}
.ticket-list label.yellow span {
    background-color: #eeaf0d !important;
    color: #fff;
}
.ticket-list label.blue {
    border-color: #0d8dee;
    color: #0d8dee;
}
.ticket-list label.blue span {
    background-color: #0d8dee !important;
    color: #fff;
}
.ticket-list label.green {
    border-color: #3ed773;
    color: #3ed773;
}
.ticket-list label.green span {
    background-color: #3ed773 !important;
    color: #fff;
}
#ticketColorSchema p {
    margin: 0;
    display: inline-block;
    line-height: 20px;
    margin-left: 15px;
}
#ticketColorSchema p span {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-bottom: -4px;
}
#ticketColorSchema p.purple {
    color: #aa7fee;
}
#ticketColorSchema p.purple span {
    background-color: #aa7fee;
}
#ticketColorSchema p.yellow {
    color: #eeaf0d;
}
#ticketColorSchema p.yellow span {
    background-color: #eeaf0d;
}
#ticketColorSchema p.blue {
    color: #0d8dee;
}
#ticketColorSchema p.blue span {
    background-color: #0d8dee;
}
#ticketColorSchema p.green {
    color: #3ed773;
}
#ticketColorSchema p.green span {
    background-color: #3ed773;
}
#getTickets,
#changeTickets {
    display: none;
    margin-top: 30px;
}
#userTicketList {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#userTicketList li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ddd;
    margin: 10px;
    width: 100%;
    background-color: #f5f5f5;
}
#userTicketList li span {
    background-color: #eee;
    padding: 0 10px;
    line-height: 35px;
}
#userTicketList li strong {
    line-height: 35px;
    font-size: 15px;
    transition: all 0.5s;
}
#userTicketList li strong.flash {
    text-shadow: 0 0 13px #2af902;
}
#userTicketList li small {
    background-color: #eee;
    font-size: 14px;
    padding: 0 15px;
    line-height: 35px;
    margin-left: auto;
    width: 100%;
    text-align: center;
}
#userTicketList .modal-title {
    padding-top: 0 !important;
}
#userTicketList .modal-header .close {
    padding: 0 !important;
    margin: 0 !important;
}
#userTicketList .modal-header .close span {
    margin: 0 !important;
}
#amountForLottery {
    font-size: 16px !important;
    margin: 20px 0;
}
#amountForLottery option {
    font-size: 16px !important;
}
#activityModal{
    z-index: 9999;
    background-color: rgba(0,0,0,.3);
}
html.iziModal-isOverflow #activityModal{
    z-index: 99999999999;
}
.table {
    font-size: 13px;
}
table.dataTable tbody th,
table.dataTable tbody td,
.table td,
.table th {
    padding: 5px;
}
.tab-buttons.active{
}
.tab-contents .tab-content{
    display: none;
}
.tab-contents .tab-content.active{
    display: block;
}
#registerModal .modal-body{
    padding: 0;
}
#registerModal .tab-buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    background: #f2f6f9;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #161421;
    text-transform: uppercase;
    margin: 5px;
    padding: 5px;
    border: 1px solid #eee;
}
#registerModal .tab-buttons button{
    padding: 10px 15px;
    width: 100%;
    border-radius: 5px;
}
#registerModal .tab-buttons button.active{
    background-color: #ccdfe8;
    border-bottom: none;
}
#registerModal .tab-buttons button:last-child{
    border-right: none;
}
#registerStepIndicators {
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}
#registerStepIndicators > button{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 10px 0;
    color: #c2c5c6;
}
#registerStepIndicators > button svg{
    width: 35px;
    height: 35px;
}
#registerStepIndicators > button svg path{
    fill: #c2c5c6;
}
#registerStepIndicators > button.active{
    color: #45507a;
    font-weight: bold;
}
#registerStepIndicators > button.active svg path{
    fill: #45507a;
}
#registerModal form{
    padding: 0 20px;
    text-align: center;
}
#registerSteps h3{
    margin: 15px 0 10px 0;
    color: #777;
    text-align: center;
    font-size: 18px;
}
.field-info{
    position: absolute;
    right: 10px;
    top: 18px;
}
.field-info small{
    display: none;
    position: absolute;
    background-color: rgba(20,30,50,.5);
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    min-width: 200px;
}
.field-info small:after{
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(20, 30, 50, 0);
    border-left-color: rgba(20,30,50,.5);
    border-width: 10px;
    margin-top: -10px;
}
.field-info i {
    border: 1px solid #696a6e;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 21px;
    font-style: normal;
    color: #666;
    font-size: 13px;
    font-weight: bold;
}
.field-info.visible small,
.field-info.active small,
.field-info:active small,
.field-info:hover small{
    display: block;
}
.parsley-errors {
    color: red;
    font-size: 12px;
    line-height: 1.3;
}
.toggle-password-visibility.visible:after{
    content: '';
    width: 4px;
    height: 100%;
    background-color: var(--color-black);
    opacity: .5;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
}
.toggle-password-visibility {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDIyNC41NDkgMjI0LjU0OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxnPiA8cGF0aCBkPSJNMjIzLjQ3NiwxMDguNDFjLTEuNzc5LTIuOTYtNDQuMzUtNzIuNTAzLTExMS4yMDItNzIuNTAzUzIuODUxLDEwNS40NSwxLjA3MiwxMDguNDFjLTEuNDMsMi4zNzgtMS40Myw1LjM1MSwwLDcuNzI5IGMxLjc3OSwyLjk2LDQ0LjM1LDcyLjUwMywxMTEuMjAyLDcyLjUwM3MxMDkuNDIzLTY5LjU0MywxMTEuMjAyLTcyLjUwM0MyMjQuOTA2LDExMy43NjEsMjI0LjkwNiwxMTAuNzg4LDIyMy40NzYsMTA4LjQxeiBNMTEyLjI3NCwxNzMuNjQyYy00OS45MjUsMC04Ni4xNzYtNDcuMzU5LTk1LjgwOC02MS4zNzRjOS42MTQtMTQuMDMyLDQ1Ljc2MS02MS4zNiw5NS44MDgtNjEuMzYgYzQ5LjkyNSwwLDg2LjE3Niw0Ny4zNTksOTUuODA4LDYxLjM3NEMxOTguNDY4LDEyNi4zMTMsMTYyLjMyMSwxNzMuNjQyLDExMi4yNzQsMTczLjY0MnoiPjwvcGF0aD4gPHBhdGggZD0iTTExMi4yNzQsNjEuNzMxYy0yNy44NjksMC01MC41NDIsMjIuNjc0LTUwLjU0Miw1MC41NDNjMCwyNy44NjgsMjIuNjczLDUwLjU0LDUwLjU0Miw1MC41NCBjMjcuODY4LDAsNTAuNTQxLTIyLjY3Miw1MC41NDEtNTAuNTRDMTYyLjgxNSw4NC40MDUsMTQwLjE0Myw2MS43MzEsMTEyLjI3NCw2MS43MzF6IE0xMTIuMjc0LDE0Ny44MTQgYy0xOS41OTgsMC0zNS41NDItMTUuOTQzLTM1LjU0Mi0zNS41NGMwLTE5LjU5OSwxNS45NDQtMzUuNTQzLDM1LjU0Mi0zNS41NDNzMzUuNTQxLDE1Ljk0NCwzNS41NDEsMzUuNTQzIEMxNDcuODE1LDEzMS44NzEsMTMxLjg3MiwxNDcuODE0LDExMi4yNzQsMTQ3LjgxNHoiPjwvcGF0aD4gPHBhdGggZD0iTTExMi4yNzQsOTIuOTFjLTEwLjcwMiwwLTE5LjM3Miw4LjY2OS0xOS4zNzIsMTkuMzY0YzAsMTAuNjk0LDguNjcsMTkuMzYzLDE5LjM3MiwxOS4zNjMgYzEwLjcwMywwLDE5LjM3My04LjY2OSwxOS4zNzMtMTkuMzYzQzEzMS42NDcsMTAxLjU3OSwxMjIuOTc3LDkyLjkxLDExMi4yNzQsOTIuOTF6Ij48L3BhdGg+IDwvZz4gPC9nPjwvc3ZnPg==");
    opacity: .4;
    position: absolute;
    right: 10px;
    top: 35px;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-size: cover;
}
#registerModal .toggle-password-visibility{
    right: 40px;
}
#dropdownBalanceList p {
    color: #fff;
    display: flex;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin: 10px 0;
    line-height: 1;
}
#dropdownRakeback p {
    color: #fff;
    display: flex;
    align-items: center;
    align-content: center;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin: 10px 0;
    line-height: 1;
}
#dropdownBalanceList p strong{
    margin-right: auto;
}
#dropdownRakeback p strong{
    margin-right: auto;
}
#dropdownBalanceList p button{
    margin-right: auto;
    padding: 0;
    margin-left: 5px;
}
#dropdownRakeback p button{
    margin-right: auto;
    padding: 0;
    margin-left: 5px;
}
#headerBalances .dropdown-content > a{
    padding: 5px 0;
    display: block;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    margin: 5px 0;
}
[data-view="deposit"]{
    background-color: var(--color-accent-bg-normal);
}
[data-view="draw"]{
    background-color: #d9af60;
}
[data-view="fast_withdraw"]{
    background-color: #bb78e1;
}
[data-view="member_network_transfer"]{
    background-color: #75b947;
}
#headerBalances [data-view="transactions"]{
    background-color: #347dca;
}
[data-view="send_money_to_member"]{
    background-color: #603cc8;
}
.spin{
    animation: fullrotate 1.1s infinite linear;
}
#pageContent{
    color: #fff;
}
#sectionFilter .payment-method{
    margin: 0;
}
#sectionFilter {
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
#sectionFilter .swiper-button-disabled{
    display: none;
}
#sectionFilter .sm-prev,
#sectionFilter .sm-next {
    position: absolute;
    top: 0;
    height: 100%;
    width: 10%;
    z-index: 1;
    background-color: transparent;
    border: none;
}
#sectionFilter .sm-prev {
    left: -1px;
    background-image: linear-gradient(90deg, #fff, transparent);
}
#sectionFilter .sm-next {
    right: -1px;
    background-image: linear-gradient(-90deg, #fff, transparent);
}
#sectionFilter a {
    display: inline-flex;
    width: unset;
    padding: 5px 10px;
    border: 1px solid #aaa;
    border-radius: 5px;
    margin-right: 5px;
    color: var(--color-gray-3);
    cursor: pointer;
    font-size: 13px;
}
#sectionFilter a.mixitup-control-active{
    background-color: #aaa;
    color: #fff;
}
.payment-section h2 {
    margin: 10px 0;
    background-color: #eee;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
}
.payment-method {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 5px;
    padding: 10px;
    font-size: 12px;
    width: calc(33.3333% - 10px);
}
.section-body{
    display: flex;
    flex-wrap: wrap;
}
.form-group {
    margin-bottom: 1rem;
    font-size: 13px;
    position: relative;
}
.form-group .icon-button {
    position: absolute;
    right: 10px;
    top: 30px;
    background-color: transparent;
    font-size: 20px;
    padding: 5px;
    appearance: none;
    line-height: 25px;
    border: none;
    opacity: .5;
    cursor: pointer;
}
#sifre-degistir .form-group .icon-button {
    right: 20px;
}
.form-control {
    font-size: 12px;
}
.select2-container {
    width: 100% !important;
    z-index: 9999999999999;
}
.select2.select2-container {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0 .75rem;
    font-size: 12px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.select2-container--default .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: none;
    background-color: transparent;
}
.select2-container--default .select2-selection--multiple{
    border: none;
}
#cookieWarning {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 30px 30px 30px 10px;
    width: 100%;
    background-color: #d14246;
    color: #fff;
    z-index: 9999999;
    text-align: center;
}
#cookieWarning p {
    margin: 0;
}
#cookieWarning button {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background-color: transparent;
    border: none;
    font-size: 20px;
    padding: 5px 15px;
}
#cookieWarning a {
    color: #fff;
    font-weight: bold;
}
#gameList a figure {
    position: relative;
}
#gameList a figure .game-image {
    width: 100%;
}
#gameList a figure i {
    position: absolute;
}
#gameList a figure i.open-in-new-tab {
    bottom: 10px;
    right: 10px;
}
#gameList a figure i.toggle-favorite {
    top: 10px;
    right: 10px;
}
#gameList a figcaption {
    padding: 0 5px;
    font-size: 11px;
    line-height: 11px;
    min-height: 40px;
    justify-content: center;
    align-content: center;
    align-items: center;
    display: flex;
}
.btn.fetch-casino-games {
    color: #fff;
    padding: 10px 40px;
    margin-top: 30px;
    background-color: var(--color-gray-3);
    border-radius: 20px !important;
}
@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
#bingoPage #lgf-container-iframe {
    min-height: 1100px;
}
#detailedList #casinoGamesContainer {
    width: 100%;
    margin: 0 auto;
}
#gamePreModal {
    text-align: center;
    color: var(--color-gray-3);
}
#gamePreModal h6{
    margin: 0;
}
#gamePreModal img{
    max-width: 100%;
}
#gamePreModal .play-sys-game.demo{
    margin: 5px auto;
    background: #eee;
    border-radius: 5px;
    padding: 5px 10px;
}
#gamePreModal .play-sys-game.demo i{
    margin-right: 5px;
}
#multiGameFrame2, #multiGameFrame3, #multiGameFrame4 {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
#multiGameFrame2 .iziModal-content, #multiGameFrame3 .iziModal-content, #multiGameFrame4 .iziModal-content {
    height: 50%;
    width: 50%;
    min-height: 150px;
    position: relative;
}
html.iziModal-isOverflow #activityModal {
    z-index: 99999999999;
}
.iziModal .iziModal-content {
    min-height: 600px;
}
.iziModal .iziModal-header .iziModal-button {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}
html.iziModal-isOverflow .tooltip{
    z-index: 1000000000000000009 !important;
}
.iziModal-isOverflow .modal-backdrop {
    z-index: 9999999;
}
.iziModal-isOverflow .modal {
    z-index: 99999999;
}
.iziModal .iziModal-header {
    border-bottom: 1px solid var(--color-main-b-3);
    background-color: var(--color-main-b-1) !important;
    color: var(--color-main-f-3);
}
.iziModal .iziModal-header.iziModal-noSubtitle {
    padding: 5px 12px;
    height: 35px;
}
.iziModal .iziModal-header-title {
    color: var(--color-main-f-3);
    display: flex;
}
.iziModal .iziModal-wrap {
    height: calc(100% - 34px) !important;
}
.iziModal .iziModal-content {
    height: 100%;
}
.iziModal .iziModal-content iframe {
    height: 100% !important;
}

.iziModal-header-title span {
    display: inline;
    margin: 0;
    font-size: 12px;
}
.iziModal-header-title .btn-primary, .iziModal-header-title .btn-secondary {
    border-radius: 5px !important;
    color: var(--color-gray-3);
    border: none;
    padding: 1px 8px;
    font-size: 12px;
}
.iziModal-header-title .btn-primary:first-child, .iziModal-header-title .btn-secondary:first-child {
    margin-left: 10px;
}
.iziModal-header-title .btn-primary:hover, .iziModal-header-title .btn-secondary:hover {
    color: var(--color-gray-1) !important;
    background-color: #eee;
}

.iziModal .iziModal-content {
    height: 100%;
}
.iziModal .iziModal-content iframe {
    height: 100% !important;
}
.iziModal-content {
    border: 1px solid rgba(255, 255, 255, .3);
}
.iziModal-content:before {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: puffIn 1s infinite;
    font-size: 30px;
    color: #555;
}
.close-game-frame {
    position: absolute;
    top: 0;
    right: 0;
    border-bottom-left-radius: 10px;
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    background-color: var(--color-gray-1);
    cursor: pointer;
    color: #fff;
}
.game-frame-buttons {
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: var(--color-gray-1);
}
.game-frame-buttons a {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 30px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    color: #aaa;
    margin: 10px;
}
.game-frame-buttons a:hover {
    color: #fff;
    border-color: #fff;
}
.game-frame-buttons i {
    font-size: 30px !important;
}
#openInNewTabBtn.hidden {
    left: -2500px;
    display: none;
}
#openInNewTabBtn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-1);
    color: #fff;
    z-index: 999999999;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
#openInNewTabBtn:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #aaa;
    width: calc(100% - 50px);
    height: 60px;
    border-radius: 50px;
}
#showIzimodal {
    position: fixed;
    z-index: 9999999999;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 40px;
    font-weight: 700;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #25272b;
    color: #ecea85;
    border: 3px solid #35394a;
    box-shadow: 0 0 10px 10px rgba(236, 209, 63, 0.3);
    letter-spacing: 1px;
}
#homePageBanner{
    height: 100%;
}
#homePageBanner > img{
    width: 100%;
}
#homePageBannerContent{
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
}
#homePageBanner h2{
    background: linear-gradient(#e5b400,#ffd22f);
    background-origin: content-box;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;
    font-weight: 900;
    margin-bottom: 10px;
}
#homepageExperience{
    color: var(--color-main-f-3);
    font-size: 14px;
    padding: 50px 0 20px 0;
}
#homepageExperience strong{
    color: var(--color-main-f-0);
    font-size: 18px;
}
#homepageExperience a{
    color: var(--color-accent-bg-normal);
}
#homePageBannerCtaBtn {
    border-radius: 6px;
    padding: 15px 0;
    display: block;
    background-color: var(--color-accent-bg-normal);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    width: 100%;
    max-width: 300px;
    transition: background-color .3s ease;
    margin: 0 auto 20px auto;
}
#homePageBannerCtaBtn:hover {
    background-color: #0dd182;
}
#homePageBannerStats {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}
#homePageBannerStats a {
    height: 60px;
    border-radius: 12px;
    background-color: hsla(0,0%,100%,.15);
    backdrop-filter: blur(24px);
    padding: 8px 0 6px 10px;
    margin: 5px;
    position: relative;
    pointer-events: all;
    width: 300px;
}
#homePageBannerStats .badge{
    position: absolute;
    top: 10px;
    right: 10px;
}
#homePageBannerStats strong{
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    display: block;
}
#homePageBannerStats small{
    max-width: 88%;
    font-size: 12px;
    line-height: 14px;
    color: #dfe4e8;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#homePageBannerStats small svg{
    fill: #dfe4e8;
    height: 16px;
    transform: translateY(-2px);
}
#homePageBannerStats svg:hover{
    fill: #fff;
}
#homePageBannerStats small svg + .tooltip{
    display: none;
    width: calc(100% - 30px);
    text-align: center;
}
#homePageBannerStats small svg:hover + .tooltip{
    display: block;
}
.rating-stars{
    display: block;
    height: 17px;
    width: 105px;
    margin: 5px 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAyMSAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDAyOTIgMC41NTk1MjdDOC43OTAzNiAtMC4xODY1MDkgOS45MDk2NCAtMC4xODY1MDkgMTAuMjk3MSAwLjU1OTUyN0wxMi4zNjgxIDQuNTQ3MzJDMTIuNTIxOCA0Ljg0MzMgMTIuODE4OCA1LjA0ODU1IDEzLjE2MjQgNS4wOTYyOUwxNy43OTU0IDUuNzM5OTNDMTguNjYxNCA1Ljg2MDI0IDE5LjAwNjUgNi44NzE5NyAxOC4zNzk2IDcuNDUyMzZMMTUuMDI4OCAxMC41NTQzQzE0Ljc3OTcgMTAuNzg1IDE0LjY2NiAxMS4xMTc0IDE0LjcyNDggMTEuNDQzMUwxNS41MTU0IDE1LjgyNDJDMTUuNjYzNCAxNi42NDQzIDE0Ljc1NzYgMTcuMjY5NyAxMy45ODI4IDE2Ljg4MjRMOS44NDE2IDE0LjgxMjVDOS41MzM4NSAxNC42NTg2IDkuMTY2MTUgMTQuNjU4NiA4Ljg1ODQgMTQuODEyNUw0LjcxNzIyIDE2Ljg4MjRDMy45NDIzNyAxNy4yNjk3IDMuMDM2NjUgMTYuNjQ0MyAzLjE4NDY0IDE1LjgyNDJMMy45NzUyIDExLjQ0MzJDNC4wMzM5OSAxMS4xMTc0IDMuOTIwMjggMTAuNzg1IDMuNjcxMTYgMTAuNTU0M0wwLjMyMDM5NyA3LjQ1MjM2Qy0wLjMwNjU0MyA2Ljg3MTk3IDAuMDM4NTk5MSA1Ljg2MDI0IDAuOTA0NTc1IDUuNzM5OTNMNS41Mzc1OSA1LjA5NjI5QzUuODgxMjIgNS4wNDg1NSA2LjE3ODIgNC44NDMzIDYuMzMxOTIgNC41NDczMkw4LjQwMjkyIDAuNTU5NTI3WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yIi8+Cjwvc3ZnPgo=);
    background-position: 0 100%;
}
.rating-stars > span{
    display: block;
    overflow: hidden;
    height: 100%;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAyMSAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNDAyOTIgMC41NTk1MjdDOC43OTAzNiAtMC4xODY1MDkgOS45MDk2NCAtMC4xODY1MDkgMTAuMjk3MSAwLjU1OTUyN0wxMi4zNjgxIDQuNTQ3MzJDMTIuNTIxOCA0Ljg0MzMgMTIuODE4OCA1LjA0ODU1IDEzLjE2MjQgNS4wOTYyOUwxNy43OTU0IDUuNzM5OTNDMTguNjYxNCA1Ljg2MDI0IDE5LjAwNjUgNi44NzE5NyAxOC4zNzk2IDcuNDUyMzZMMTUuMDI4OCAxMC41NTQzQzE0Ljc3OTcgMTAuNzg1IDE0LjY2NiAxMS4xMTc0IDE0LjcyNDggMTEuNDQzMUwxNS41MTU0IDE1LjgyNDJDMTUuNjYzNCAxNi42NDQzIDE0Ljc1NzYgMTcuMjY5NyAxMy45ODI4IDE2Ljg4MjRMOS44NDE2IDE0LjgxMjVDOS41MzM4NSAxNC42NTg2IDkuMTY2MTUgMTQuNjU4NiA4Ljg1ODQgMTQuODEyNUw0LjcxNzIyIDE2Ljg4MjRDMy45NDIzNyAxNy4yNjk3IDMuMDM2NjUgMTYuNjQ0MyAzLjE4NDY0IDE1LjgyNDJMMy45NzUyIDExLjQ0MzJDNC4wMzM5OSAxMS4xMTc0IDMuOTIwMjggMTAuNzg1IDMuNjcxMTYgMTAuNTU0M0wwLjMyMDM5NyA3LjQ1MjM2Qy0wLjMwNjU0MyA2Ljg3MTk3IDAuMDM4NTk5MSA1Ljg2MDI0IDAuOTA0NTc1IDUuNzM5OTNMNS41Mzc1OSA1LjA5NjI5QzUuODgxMjIgNS4wNDg1NSA2LjE3ODIgNC44NDMzIDYuMzMxOTIgNC41NDczMkw4LjQwMjkyIDAuNTU5NTI3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) repeat-x;
    background-position: 0 100%;
}
#letsStart{
    color: #fff;
    background: url("../img/homepage/lets-start-bg.png") 50%/cover no-repeat,linear-gradient(105.97deg,#ff00a8 -.8%,#5200ff);
    padding: 80px 0;
    margin: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: column;
}
#letsStart > strong{
    font-size: 42px;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 20px;
}
#letsStart button{
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-main-b-1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 50px;
    border-radius: 6px;
    border: 1px solid rgba(45,11,3,.6);
    background: linear-gradient(120deg,#ffe141,#ffe927,#f2b61b);
    box-shadow: 0 0 6px rgba(255,220,129,.6),inset 0 -6px 10px rgba(242,156,27,.8),inset 0 6px 10px hsla(0,0%,100%,.45),inset 0 0 11px rgba(255,92,0,.25);
}
#letsStart button:hover{
    background: linear-gradient(120deg,#ffe454,#fff597,#ffd25e);
    box-shadow: 0 0 10px rgba(255,220,129,.6),inset 0 -6px 10px rgba(242,156,27,.8),inset 0 6px 10px hsla(0,0%,100%,.45),inset 0 0 11px rgba(255,92,0,.1);
}
#letsStart button strong{
    text-transform: uppercase;
}
#letsStart button small{
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
}
section h2{
    font-size: 42px;
    line-height: 1.5;
    font-weight: 800;
    color: var(--color-main-f-0);
    margin: 0 0 40px;
}
#needCrypto{
    border-bottom: 1px solid hsla(0,0%,100%,.1);
    margin-bottom: 40px;
}
#needCryptoContent{
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}
#needCryptoContent span{
    font-size: 24px;
    line-height: 1.5;
    font-weight: 800;
    color: #fff;
}
#needCryptoContent span br{
    display: none;
}
#needCryptoContent svg{
    height: 22px;
    margin: 0 10px;
}
#needCryptoContent button{
    font-size: 16px;
}
#topWinners img{
    width: 55px;
}
#bonusTypes{
    margin-top: 60px;
    text-align: center;
}
#bonusTypeList{
    display: flex;
    margin: 0 -10px;
}
#bonusTypeList a{
    width: 25%;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    padding: 70px 0;
    border-radius: 10px;
}
#bonusTypeList a span{
    text-shadow: 0 4px 8px rgba(22,20,33,.15);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    color: #fff;
    margin-top: 20px;
    z-index: 1;
}
#bonusTypeList a:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    z-index: 0;
}
#bonusTypeList a:nth-child(1){
    background: linear-gradient(102.62deg,#08dc90,#00c5f0);
}
#bonusTypeList a:nth-child(1):after{
    background: rgba(70,255,200,.9);
    filter: blur(47px);
}
#bonusTypeList a:nth-child(2){
    background: linear-gradient(102.62deg,#3624ff,#34ceff);
}
#bonusTypeList a:nth-child(2):after{
    background: #00f0ff;
    filter: blur(42px);
}
#bonusTypeList a:nth-child(3){
    background: linear-gradient(102.62deg,#5200ff,#9e00ff);
}
#bonusTypeList a:nth-child(3):after{
    background: rgba(255,184,0,.9);
    filter: blur(52px);
}
#bonusTypeList a:nth-child(4){
    background: linear-gradient(102.62deg,#ff347d,#ffc224);
}
#bonusTypeList a:nth-child(4):after{
    background: rgba(255,230,0,.9);
    filter: blur(47px);
}
#bonusTypeList a img{
    max-height: 154px;
    z-index: 1;
}
#moreBonusesBtn{
    font-size: 16px;
    font-weight: 700;
    line-height: 44px;
    text-transform: uppercase;
    color: #fff;
    margin: 20px auto;
    padding: 0 30px;
    border-radius: 6px;
    background: hsla(0,0%,100%,.1);
    display: inline-flex;
}
#topWinnerTabContents{
    display: flex;
    margin: 0 -10px;
}
.top-winners-tab{
    width: 33.3333%;
    margin: 0 10px;
}
.top-winners-tab h3{
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 20px;
    color: #fff;
}
.top-winners-list > a {
    display: flex;
    align-items: center;
    align-content: center;
    padding: 15px;
    font-size: 13px;
    color: var(--color-main-f-0);
}
.top-winners-list > a img {
}
.top-winners-list > a strong {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--color-main-f-3);
}
.top-winners-list > a > div {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    width: 33.3333%;
}
.top-winners-list > a > div:last-child {
    border-left: 1px solid hsla(0,0%,100%,.1);
}
.top-winners-list > a > div:last-child span {
    font-weight: 700;
    color: #00ff98;
}
.top-winners-list > a:nth-child(2n) {
    background: hsla(0,0%,100%,.05);
    border-radius: 10px;
}
#opinionsAndAwards{
    margin-bottom: 50px;
}
#jackpotGames{
    padding: 30px 0;
    background: linear-gradient(180deg,#6f00ff,#854dff 50%);
    margin-top: 30px;
}
#jackpotGames .slider{
    margin-top: 0;
}
#jackpotGames .slider-btn,
#jackpotGames button{
    background-color: rgba(255,255,255,0.15);
}
#jackpotGames .slider-nav{
    background: linear-gradient(90deg,rgba(27,25,40,0) 40%,#854dff);
}
#awards,
#opinions{
    position: relative;
    display: flex;
    margin: 0 auto 20px auto;
    overflow: hidden;
    max-width: 1680px;
}
#awards:after,
#awards:before,
#opinions:after,
#opinions:before{
    content: '';
    width: 20%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}
#awards:before,
#opinions:before{
    left: 0;
    background: linear-gradient(90deg,var(--color-main-b-2) 5%,rgba(27,25,40,0) 90%);
}
#awards:after,
#opinions:after{
    right: 0;
    background: linear-gradient(-90deg,var(--color-main-b-2) 5%,rgba(27,25,40,0) 90%);
}
#awards > div,
#opinions > div{
    display: flex;
}
#awards:hover > div,
#opinions:hover > div{
    animation-play-state: paused;
}
#awards > div > a,
#opinions > div > a{
    display: flex;
    align-items: center;
    align-content: center;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 20px;
}
#awards > div{
    animation: awardsAnimation 80s linear infinite;
}
#awards > div > a {
    justify-content: center;
    width: 200px;
    height: 100px;
    background: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 100%, 0));
    margin-left: 20px;
    flex-direction: column-reverse;
    position: relative;
}
#awards > div > a small{
    color: #aaa;
    font-size: 35px;
    font-weight: 800;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-transform: lowercase;
    z-index: 1;
    line-height: 1;
    text-align: center;
}
#opinions > div{
    animation: opinionsAnimation 80s linear infinite;
}
#opinions > div > a{
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    background: hsla(0,0%,100%,.05);
    padding: 20px;
    width: 250px;
    color: #ffd22f;
    display: flex;
}
#opinions > div > a img{
    width: 24px;
    height: 24px;
    margin: 0 10px;
}
#awards > div > a img{
    width: 70px;
    height: 70px;
    opacity: .5;
}
#pageMenu{
    background-color: var(--color-main-b-3);
}
#pageMenu .site-container{
    display: flex;
    align-items: center;
    align-content: center;
}
#pageMenu .site-container > a{
    background-color: var(--color-main-b-4);
    color: #fff;
    font-weight: bold;
    padding: 8px 12px;
    text-transform: uppercase;
    border-radius: 6px;
}
#pageMenu .site-container > a{
    background-color: var(--color-main-b-4);
    color: #fff;
    font-weight: bold;
    padding: 8px 12px;
    text-transform: uppercase;
    border-radius: 6px;
    margin-left: 5px;
    white-space: nowrap;
}
#pageMenu .site-container > a:hover{
    background-color: var(--color-main-b-5);
}
#pageMenu .site-container > a svg{
    width: 14px;
    fill: #d3d7db;
    transform: translateY(2px);
}
#categoryBtns {
    display: flex;
    margin-right: auto;
}
#categoryBtns a{
    line-height: 54px;
    font-size: 16px;
    font-weight: 400;
    color: #d3d7db;
    border-bottom: 3px solid transparent;
    margin-right: 30px;
    transition: all .25s ease;
    display: flex;
    align-content: center;
    align-items: center;
}
#categoryBtns svg{
    margin-right: 10px;
    transition: all .25s ease;
    width: 24px;
    fill: #d3d7db;
}
#categoryBtns a.active{
    font-weight: bold;
}
#categoryBtns a.active,
#categoryBtns a:hover {
    color: #ffd22f;
    border-color: #ffd22f;
}
#categoryBtns a.active svg,
#categoryBtns a:hover svg {
    fill: #ffd22f;
}
#mainPageProviderList{
    margin-bottom: 30px;
}
#mainPageProviderList .swiper-slide {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 25px 0;
    border-radius: 10px;
    background-color: var(--color-main-b-3);
}
#mainPageProviderList .swiper-slide i {
    transform: scale(.7,.7);
}
[data-mobile-page] #homePageBannerStats{
    display: none;
}
@keyframes opinionsAnimation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(20px);
    }
}
@keyframes awardsAnimation {
    0% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(-100%);
    }
}
[data-mobile-page] #loginModal .modal-body > form,
[data-mobile-page] #loginModalCustomContentArea{
    width: 100%;
    margin: 0;
}
[data-mobile-page] #loginModal .modal-body{
    flex-direction: column;
}
[data-mobile-page] #loginModal .modal-content{
    min-height: 100vh;
}
[data-mobile-page] #toggleBlogMenu{
    display: block;
}
[data-mobile-page] #leftBarBlogMenu{
    display: none;
}
[data-mobile-page] #mainPageProviderList .swiper-slide {
    padding: 10px 0;
}
[data-mobile-page] #mainPageProviderList .swiper-slide i {
    transform: scale(.7,.7);
    margin: -5px 0;
}
[data-mobile-page] #topBar a {
    font-size: 11px;
    line-height: 12px;
}
[data-mobile-page] #toggleBottomBar {
    display: none;
}
[data-mobile-page] .game i.toggle-favorite {
    opacity: 1 !important;
}
[data-mobile-page]  .game.visible .hover-box {
    top: 0 !important;
}
[data-mobile-page]  .game p {
    top: 0 !important;
}
[data-mobile-page]  .game .hover-box {
    top: -200%;
    opacity: 1;
}
[data-mobile-page]  .game .hover-box > p {
    width: 100%;
    top: 0;
    left: 0;
    padding: 0 5px 0 5px;
    text-align: center;
    font-size: 8px;
    margin-bottom: 0;
}
[data-mobile-page]  .game .hover-box .play-button {
    height: 40%;
    width: 40%;
}
[data-mobile-page]  .game .hover-box .play-button i {
    font-size: 40px;
}
[data-mobile-page] .open-in-new-tab {
    display: none !important;
}
[data-mobile-page] .swiper-button-next,
[data-mobile-page] .swiper-button-prev {
    display: none;
}
[data-mobile-page] .site-container {
    padding: 0 5px;
}
[data-mobile-page] .slider-title {
    font-size: 22px;
}
[data-mobile-page] .slider-nav {
    display: none;
}
[data-mobile-page] .slider-nav button {
    padding: 5px;
    font-size: 10px;
    line-height: 12px;
}
[data-mobile-page] #categoryBtns a {
    line-height: 40px;
    font-weight: 600;
    font-size: 14px;
    margin-right: 5px;
    background-color: rgba(255,255,255,.1);
    border-radius: 5px;
    padding: 0 15px;
}
[data-mobile-page] #memberMenu {
    display: none;
}
[data-mobile-page] #memberAreaContent {
    width: 100%;
}
[data-mobile-page] #memberAreaContent h5 {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 25px;
    border-radius: 5px;
}
[data-mobile-page] .payment-method {
    width: calc(50% - 10px);
}
[data-mobile-page] #pageMenu {
    padding: 5px;
}
#mobileRightMenu{
    position: fixed;
    top: 0;
    height: 100%;
    overflow-y: auto;
    width: calc(100% - 50px);
    max-width: 320px;
    background-color: var(--color-main-b-2);
    z-index: 999999999;
    transition: transform .3s;
    right: 0;
    transform: translateX(150%);
    border-left: 1px solid var(--color-main-b-3);
}
#mobileRightMenu.visible{
    transform: translateX(0);
}
#mobileMenuOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    bottom: -200%;
    transition: opacity 0.8s;
    background-color: rgba(0, 0, 0, .5);
    z-index: 999999998;
    cursor: pointer;
}
#mobileMenuOverlay:after, #mobileMenuOverlay:before {
    content: '×';
    position: absolute;
    top: 0;
    pointer-events: none;
    color: var(--color-main-f-3);
    font-size: 45px;
}
#mobileMenuOverlay:after {
    right: 10px;
}
#mobileMenuOverlay:before {
    left: 10px;
}
#mobileMenuOverlay.visible {
    opacity: 1;
    bottom: 0;
}
#mobileRightMenuContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    color: #fff;
}
#mobileRightMenuContent > a[data-view="deposit"] {
    background-color: var(--color-accent-bg-normal);
}
#mobileRightMenuContent > a {
    background-color: var(--color-main-b-4);
    border-bottom: 1px solid var(--color-main-b-1);
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
}
#mobileRightMenuContent > a i {
    margin-right: 10px;
}
#mobileRightMenuContent > a.exit {
    background-color: var(--red);
}
#mobileRightMenuContent .right-menu-accordion {
    width: 100%;
    overflow: hidden;
}
#mobileRightMenuContent .right-menu-accordion-body {
    overflow: hidden;
}
#mobileRightMenuContent .right-menu-accordion-header {
    background-color: var(--color-main-b-4);
    border-bottom: 1px solid var(--color-main-b-2);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
}
#mobileRightMenuContent .right-menu-accordion-header > i {
    margin-right: 7px;
}
#mobileRightMenuContent .right-menu-accordion-header.active > i {
    transform: rotate(180deg);
}
#mobileRightMenuContent .right-menu-accordion-header span i {
    margin-right: 10px;
}
#mobileRightMenuContent .right-menu-accordion .right-menu-accordion-btn {
    display: flex;
    font-size: 13px;
    color: var(--color-main-f-1);
    border-top: 1px solid var(--color-main-b-4);
    padding: 10px;
}
#mobileRightMenuContent .right-menu-accordion .right-menu-accordion-btn label {
    width: 100%;
    height: 100%;
    margin: -10px;
    padding: 7px 10px;
}
#mobileRightMenuContent .right-menu-accordion .right-menu-accordion-btn label:after,
#mobileRightMenuContent .right-menu-accordion .right-menu-accordion-btn label:before {
    right: 20px;
    top: 10px;
}
#mobileRightMenuContent table {
    margin-bottom: 0;
}
#mobileRightMenuContent table td {
    padding: 4px 0;
    font-size: 13px;
    border-top: 1px solid var(--color-main-b-1);
}
#mobileRightMenuContent table td:last-child {
    text-align: right;
}
#mobileRightMenuContent table tr:first-child td {
    border: none;
}
#rightMenuBalanceTransfer {
    line-height: 35px;
}
#rightMenuBalanceTransfer button {
    padding: 3px 5px;
}
#rightMenuBalanceTransfer table td {
    padding: 5px 10px;
}
#rightMenuBalanceList {
    width: 100%;
    padding: 0 15px;
    color: #fff;
}
#rightMenuBalanceList.data-loading {
    opacity: 0.3;
}
#rightMenuBalanceList.data-loading table td:last-child {
    font-size: 0;
}
#rightMenuUsername {
    text-align: center;
    padding: 10px;
}
.recent-item, .favorite-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin: 3px 0 0 0;
    padding: 3px 0 0 0;
    align-items: center;
    align-content: center;
}
.recent-item:last-child, .favorite-item:last-child {
    border: none;
}
.recent-item a, .favorite-item a {
    padding: 0 !important;
    flex-grow: 1;
    display: flex;
    color: var(--color-gray-3);
}
.recent-item a img, .favorite-item a img {
    height: 30px;
    width: 30px;
    border-radius: 5px;
    margin-right: 5px;
}
.recent-item a span, .favorite-item a span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.recent-item button, .favorite-item button {
    appearance: none;
    border: none;
    background-color: transparent;
    color: var(--color-gray-3);
}

/* start - game list */

.game {
    overflow: hidden;
    margin: 5px;
    position: relative;
    background-color: rgba(255,255,255,.1);
    border-radius: 10px;
}
.game .game-image-wrapper{
    position: relative;
    padding-bottom: 80%;
    height: 0;
    background-size: 400% 400%;
    overflow: hidden;
    animation: Gradient 15s ease infinite;
    background: linear-gradient(-45deg, var(--color-main-b-0), var(--color-main-b-3), var(--color-main-b-6), var(--color-main-b-3), var(--color-main-b-0));
}
.game .game-image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all 0.7s;
    position: absolute;
}
.game .provider-o {
    margin: 0 auto;
    transform: scale(.7,.7);
    display: block;
}
.game .hover-box {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 10;
    color: white;
    text-align: center;
    background-size: cover;
    transition: all 0.3s;
}
.game p {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px;
    margin: 0;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.game small {
    color: var(--color-accent-bg-normal);
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    display: block;
    padding: 5px;
}
.game .hover-box > .toggle-favorite {
    position: absolute;
    font-size: 20px;
    top: 10px;
    right: 10px;
}
.game .hover-box > .open-in-new-tab {
    position: absolute;
    font-size: 20px;
    bottom: 10px;
    right: 10px;
}
.game .hover-box .visible-buttons {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: absolute;
}
.game .hover-box .visible-buttons a {
    appearance: none;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    padding: 5px 10px;
    margin: 3px 0;
    color: var(--color-accent-bg-normal);
}
.game .hover-box .visible-buttons a i {
    font-size: 25px !important;
}
.game .hover-box .visible-buttons a i.fas.fa-star {
    color: var(--color-accent-bg-normal);
}
.game .hover-box .visible-buttons a i.far.fa-star {
    color: #888;
}
.game .hover-box .visible-buttons a.no-demo {
    pointer-events: none;
    opacity: 0;
}
.game .hover-box .play-sys-game.demo {
    color: var(--color-accent-bg-normal);
    border: 2px solid var(--color-accent-bg-normal);
}
.game .hover-box .play-sys-game.real {
    color: #fff;
    background-color: var(--color-accent-bg-normal);
}
.game .hover-box .buttons {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
    width: 100%;
    display: none;
}
.game .hover-box .buttons button {
    padding: 5px 10px;
    border-radius: 5px;
    margin: 3px 0;
    background-color: white;
    font-size: 12px;
}
.game .hover-box .buttons button:hover {
    opacity: 0.9;
}
.game:hover .hover-box {
    opacity: 1;
}
.casino-game-list {
    padding-bottom: 15px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 0 0;
    align-items: stretch;
    justify-items: stretch;
}
.game-slider .game{
    margin: 0;
}
.noty_layout .noty_theme__nest.noty_bar {
    position: relative !important;
    margin: 0 0 5px 0 !important;
}
#blogPage {
    padding: 20px 0;
    background-color: #23262c;
}
#blogPage #pageHeader {
    padding: 15px 30px;
    font-size: 20px;
    background-color: #fff;
    margin-bottom: 20px;
    color: #212529;
    display: flex;
    align-content: center;
    align-items: center;
}
#blogPage #pageHeader a {
    color: #fff;
    font-size: 14px;
    margin-left: auto;
    font-weight: bold;
}
#blogPage #leftBar {
    background-color: #fff;
    margin: 0 5px;
    padding: 10px;
}
#toggleBlogMenu{
    display: none;
}
#blogPage #leftBar a {
    background-color: #23262c;
    color: #fff;
    margin-top: 2px;
    font-size: 12px;
}
#blogPage #leftBar a.active {
    background-color: #06a678;
}
#blogPage #leftBar a:hover {
    opacity: 0.8;
}
#blogPage .blogContent {
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px;
    background-color: #fff;
}
#blogPage .post-preview {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
#blogPage .post-preview a {
    color: #fff;
}
#blogPage .post-preview .post-title {
    font-size: 20px;
    font-weight: bold;
}
#blogPage .post-preview .post-preview-content {
    font-size: 14px;
    line-height: 1.2;
}
#blogPage .post-preview .read-more-link {
    font-size: 13px;
    padding: 10px 15px;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, .1);
    float: right;
    margin-top: 10px;
}
#blogPage .posts-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
#blogPage .posts-pagination a {
    padding: 5px;
    min-width: 35px;
    margin: 5px;
    background-color: rgba(255, 255, 255, .1);
    text-align: center;
    border-radius: 10px;
    color: #fff;
}
#blogPage .posts-pagination a.active {
    font-weight: bold;
    background-color: rgba(255, 255, 255, .3);
}
#blogMainPageContent #blogCategories {
    padding-bottom: 40px;
}
#blogMainPageContent #blogMainPageTitle {
    background-color: #272a31;
    text-transform: uppercase;
    font-size: 45px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 85px 0 35px 0;
}
#blogMainPageContent #pageSearch {
    font-size: 18px;
    letter-spacing: -1px;
    line-height: 3px;
    color: #585858;
    font-weight: 400;
    width: 100%;
    padding: 20px 30px;
    margin: 0 auto;
    display: block;
    border-radius: 30px;
    background-color: #fff;
    border: 2px solid #d7d8d8;
    transform: translateY(50%);
}
#blogMainPageContent #categoryList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 80px;
    padding-bottom: 30px;
}
#blogMainPageContent #categoryList a {
    width: calc(25% - 20px);
    margin: 10px;
    border-radius: 10px;
    background-color: white;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-bottom: 4px solid transparent;
    padding: 30px 0;
}
#blogMainPageContent #categoryList a p {
    font-size: 18px;
    letter-spacing: -1px;
    color: #585858;
    font-weight: 600;
    text-align: center;
    padding-top: 10px;
    margin: 0;
}
#blogMainPageContent #categoryList a img {
    height: 80px;
}
#blogMainPageContent #categoryList a:hover {
    border-bottom: 4px solid #06a578;
}
#blogMainPageContent #categoryList a:hover img {
    filter: invert(42%) sepia(91%) saturate(1752%) hue-rotate(133deg) brightness(90%) contrast(95%);
}
#blogMainPageContent #blogPageBottom {
    margin-top: 40px;
    display: none;
}
#blogMainPageContent #blogPageBottom h4 {
    font-size: 35px;
    letter-spacing: -1px;
    line-height: 22px;
    color: #06a578;
    font-weight: 700;
    padding-left: 20px;
    padding-bottom: 30px;
}
#blogMainPageContent #blogPageBottom p {
    letter-spacing: -1px;
    color: #585858;
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    margin: 0;
}
#blogMainPageContent #blogPageBottom a {
    font-size: 25px;
    letter-spacing: -1px;
    line-height: 16px;
    color: #515151;
    font-weight: 700;
    margin: 10px 0 0 20px;
    display: inline-block;
    border-bottom: 1px solid #585858;
}
#blogPage #pageHeader {
    background-color: var(--g-main-color-a-light);
    border-radius: var(--g-radius-sm);
    color: var(--g-main-color-b-normal);
    padding: var(--g-space-sm) var(--g-space-lg);
}
#blogPage #leftBar {
    background-color: var(--g-main-color-a-dark);
    border-radius: var(--g-radius-sm);
    padding: var(--g-space-md);
}
#blogPage #leftBar a {
    border-radius: var(--g-radius-sm);
    margin: var(--g-space-xs) 0;
    background-color: var(--g-main-color-a-normal);
}
#blogPage #leftBar #pageSearch {
    border-radius: var(--g-radius-sm);
    background-color: var(--g-main-color-a-normal);
    border-color: var(--g-main-color-a-light);
    margin-bottom: var(--g-space-md);
    font-size: 14px;
}
#blogPage .blogContent {
    background-color: var(--g-main-color-a-dark);
    border-radius: var(--g-radius-sm);
    padding: var(--g-space-lg);
}
.help-videos-btn {
    position: relative;
}
.help-videos-btn h3 {
    position: absolute;
    margin-left: 100px;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
.help-videos-btn img {
    width: 100%;
}
#preVerificationModal{
    z-index: 999999999!important;
}
@media (max-width: 1600px) {
    .casino-game-list {
        grid-template-columns: repeat(6, 1fr);
    }
}
@media (max-width: 1400px) {
    .casino-game-list {
        grid-template-columns: repeat(5, 1fr);
    }
    #bottomBar a {
        padding: 15px 10px;
        font-size: 12px;
    }
}
@media (max-width: 1200px) {
    .casino-game-list {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    #blogMainPageContent #blogMainPageTitle {
        font-size: 30px;
        padding: 55px 0 20px;
    }
    #blogMainPageContent #categoryList {
        padding-top: 40px;
    }
    #blogMainPageContent #categoryList a {
        width: calc(33.333% - 20px);
        padding: 20px 0;
    }
    #blogMainPageContent #categoryList a img {
        height: 60px;
    }
    #blogMainPageContent #pageSearch {
        padding: 10px 20px;
    }
    .game .provider-o {
        margin: -5px auto;
        transform: scale(.5,.5);
    }
    .casino-game-list {
        grid-template-columns: repeat(2, 1fr);
    }
    #rightSideButtons > a {
        transform: translateX(-30px);
        width: 30px;
        margin-bottom: 3px;
        padding: 5px;
    }
    #rightSideButtons > a.text-btn {
        height: 70px;
    }
    #rightSideButtons > a span {
        transform: rotate(90deg) translate(10px, -22px);
        font-size: 15px;
        height: 30px;
    }
    #sideLanguageMenu {
        transform: translateX(-30px);
    }
    #sideLanguageMenu img {
        width: 30px;
    }
    #opinions > div > a {
        font-size: 12px;
        padding: 10px;
        width: 230px;
        margin-left: 10px;
    }
    #awards > div > a small {
        font-size: 25px;
    }
    #awards > div > a img {
        width: 50px;
        height: 50px;
    }
    #awards > div > a {
        width: 150px;
        height: 70px;
        margin-left: 10px;
    }
    #awards, #opinions {
        margin: 0 auto 10px auto;
    }
    section h2 {
        font-size: 22px;
        margin: 0 0 10px;
    }
    #opinionsAndAwards {
        margin-bottom: 20px;
    }
}
@media (max-width: 768px) {
    #blogMainPageContent #blogMainPageTitle {
        font-size: 25px;
        padding: 45px 0 15px;
    }
    #blogMainPageContent #categoryList a {
        margin: 5px;
        padding: 15px 0;
        width: calc(33.333% - 10px);
    }
    #blogMainPageContent #categoryList a p {
        font-size: 15px;
    }
    #blogMainPageContent #categoryList a img {
        height: 50px;
    }
    #blogMainPageContent #pageSearch {
        padding: 10px 15px;
        font-size: 15px;
    }
}
@media (max-width: 576px) {
    #openMobileRightMenu .current_balance{
        display: none;
    }
    #blogMainPageContent #blogMainPageTitle {
        font-size: 20px;
        padding: 35px 0 15px;
    }
    #blogMainPageContent #categoryList a {
        margin: 5px;
        padding: 10px 0;
        width: calc(50% - 10px);
    }
    #blogMainPageContent #categoryList a p {
        font-size: 13px;
    }
    #blogMainPageContent #categoryList a img {
        height: 40px;
    }
    #blogMainPageContent #pageSearch {
        padding: 7px 10px;
        font-size: 13px;
    }
    .security-row .btn {
        min-width: 80px;
    }
    .btn-primary {
        font-size: 14px;
    }
    #headerLogo img {
        max-height: 35px;
    }
    #globalSearch{
        display: none;
    }
    .button {
        border-radius: 3px;
        font-size: 14px;
        padding: 8px 10px;
        margin-left: 5px;
    }
    #bottomBar a {
        padding: 5px 2px;
        font-size: 9px;
        flex-direction: column;
        overflow: hidden;
    }
    #bottomBar a span{
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        text-align: center;
    }
    #bottomBar a svg{
        margin: 0;
    }
    #bottomBar > a,
    #supportMenu{
        width: 100%;
    }
    #supportMenuItems a{
        padding: 15px 30px;
        white-space: nowrap;
    }
    #siteTime{
        display: none;
    }
    #footerExtras {
        flex-direction: column;
        padding: 20px 10px;
    }
    #footerPayout {
        margin: 20px 0;
        font-size: 11px;
    }
    #safeGambling > i,
    #safeGambling a {
        margin: 0;
        transform: scale(.7,.7);
    }
    #footerMenu {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #footerApps > a > img {
        max-height: 120px;
    }
    #footerLogos {
        padding: 10px;
    }
    #footerLogos button {
        border-radius: 3px;
        padding: 2px 5px;
        height: 25px;
        width: 30px;
        visibility: visible;
    }
    .modal-content {
        margin: 0;
    }
    .modal-body,
    .modal-header {
        paddingg: 10px;
    }
    .modal button.close {
        top: 0;
        right: 0;
    }
    :root{
        --header-height: 45px;
        --header-offset: 45px;
    }
    body[data-top-bar-visible]{
        --header-offset: 85px;
    }
    #memberMenuHeader .dropdown {
        margin-right: 5px;
    }
    #memberMenuHeader .dropdown-btn {
        border-radius: 3px;
        padding: 5px;
        line-height: 10px;
    }
    #memberMenuHeader > a {
        margin-right: 5px;
        padding: 8px;
        border-radius: 3px;
        font-size: 13px;
    }
    #memberMenuHeader svg {
        height: 15px;
        width: 15px;
    }
    #headerBalances .dropdown-btn {
        font-weight: 600;
        font-size: 10px;
        border-radius: 3px;
        padding: 10px 8px;
    }
    #memberMenuHeader > button{
        display: none;
    }
    #memberMenuHeader > a#rightBarToggleBtn {
        margin: 0;
    }
    #leftBarToggleBtn {
        margin-right: 2px;
    }
    #siteHeader {
        padding: 0;
    }
    .dropdown-content {
        border-radius: 5px 0 5px 5px;
        min-width: 260px;
        padding: 5px;
    }
    #headerMemberArea a {
        border-radius: 6px;
        color: #d3d7db;
        padding: 5px;
        font-size: 13px;
    }
    #headerMemberArea .dropdown-content > a:last-child {
        padding: 10px;
        font-size: 14px;
    }
    #headerMemberArea .dropdown-content svg {
        width: 20px;
        height: 20px;
    }
    #headerBalances .dropdown-content > a {
        padding: 5px 0;
        margin: 3px 0;
        font-size: 12px;
    }
    #dropdownBalanceList p {
        font-size: 12px;
    }
    #dropdownRakeback p {
        font-size: 12px;
    }
    #siteContent.left-bar-visible #pageWrapper {
        width: 100%;
        margin-left: 0;
    }
    #siteContent.left-bar-visible #bottomBar {
        width: 100%;
    }
    #siteContent.right-bar-visible #pageWrapper {
        width: 100%;
        margin-left: 0;
    }
    #siteContent.right-bar-visible #bottomBar {
        width: 100%;
    }
    #footerSocialMenu a svg {
        width: 20px;
        height: 20px;
    }
    #footerSocialMenu a {
        width: 35px;
        height: 35px;
        margin: 20px 10px;
    }
    #footerLogosWrapper i {
        opacity: .8;
    }
    #safeGambling > * {
        opacity: .8;
    }
    .modal-content,
    #gamePreModal .modal-content,
    #memberMenuModal .modal-content,
    #paymentModal .modal-content,
    #preVerificationModal .modal-content,
    #forgotPasswordModal .modal-content,
    #loginModal .modal-content,
    #registerModal .modal-content {
        max-width: 100%;
    }
    .game .hover-box .visible-buttons button {
        width: 25px;
        height: 25px;
    }
    .game .hover-box .visible-buttons button i {
        font-size: 22px !important;
    }
    .game .hover-box .play-button {
        margin: 0 2px;
    }
    .game .hover-box .play-button i {
        font-size: 50px !important;
    }
    .casino-game-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .casino-game-list .game {
        margin-bottom: 5px;
    }
}
@media (max-width: 420px) {
    .game .hover-box > p {
        font-size: 8px;
    }
    .casino-game-list {
        grid-template-columns: repeat(2, 1fr);
    }
    #headerLogo img {
        max-height: 30px;
    }
    .button {
        font-size: 12px;
        padding: 5px 7px;
        margin-left: 0;
    }
    #leftBarToggleBtn svg {
        width: 30px;
        height: 30px;
    }
    #memberMenuHeader > a {
        margin-right: 3px;
        padding: 10px 8px;
        font-size: 11px;
    }
    #memberMenuHeader svg {
        height: 12px;
        width: 12px;
    }
}
@media (max-width: 375px) {
    #leftBarToggleBtn svg {
        width: 25px;
        height: 25px;
    }
}
@media (max-width: 320px) {
    .game .visible-buttons button {
        width: 20px;
        height: 20px;
    }
    .game .visible-buttons button i {
        font-size: 16px !important;
    }
    .game .play-button {
        margin: 0 2px;
    }
    .game .play-button i {
        font-size: 40px !important;
    }
}