/* body, html {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
} */

body::-webkit-scrollbar {
    width: 0;
    height: 0
}

a {
    color: inherit;
    text-decoration: none
}

* {
    box-sizing: border-box
}

/* @media (prefers-color-scheme:dark) {
    html {
        color-scheme: dark
    }

    body {
        color: #fff;
        background: #000
    }
} */

@font-face {
    font-family: ksbold;
    src: url(../../fonts/DBHeaventRoundedBdCondv32.ttf)
}

@font-face {
    font-family: ks;
    src: url(../../fonts/DBHeaventRoundedCondv32.ttf)
}

@font-face {
    font-family: ksmed;
    src: url(../../fonts/DBHeaventRoundedMedCondv32.ttf)
}

@font-face {
    font-family: Kanit;
    src: url(../../fonts/Kanit-Regular.ttf)
}

@font-face {
    font-family: KanitBold;
    src: url(../../fonts/Kanit-Bold.ttf)
}

@font-face {
    font-family: KanitSemiBold;
    src: url(../../fonts/Kanit-SemiBold.ttf)
}

.gold-grad {
    background: linear-gradient(62deg, #fc9737, #fecb4b)
}

.zoom {
    transition: transform .2s
}

.zoom:hover {
    transform: scale(1.5);
    cursor: pointer
}

/* .slick-slide {
    margin-left: 8px;
    margin-right: 8px
}

.slick-dots li.slick-active button:before {
    color: #ea133d !important
}

.slick-dots li button:before {
    color: #d9d9d9 !important;
    opacity: 1 !important;
    font-size: 13px !important;
    margin-top: 20px !important
} */

.base-timer {
    position: relative
}

.base-timer__circle {
    fill: none;
    stroke: none
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey
}

.base-timer__label {
    top: 0
}

.base-timer__label, .base-timer__text {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d3d3d3
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: all 1s linear
}

.base-timer__path-remaining-green {
    stroke: #329305
}

.base-timer__path-remaining-purple {
    stroke: #993bf4
}

.base-timer__path-remaining-yellow {
    stroke: #f2ae14
}

.base-timer__path-remaining-red {
    stroke: #f9003c
}

.base-timer__svg {
    transform: scaleX(-1)
}

@media (max-width:899px) {
    .base-timer__svg {
        transform: scaleX(-1) translateY(25%);
        position: absolute
    }
}

.gameBox:hover .gameBoxButton {
    transform: translateX(-50%);
    opacity: 1
}

.gameBox:hover .gameImg {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -ms-filter: brightness(50%)
}

.gameBoxLogin:hover .gameBoxLoginButton {
    transform: translateX(-50%);
    opacity: 1
}

.gameBoxLogin:hover .gameImg {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -ms-filter: brightness(50%)
}

.providerBox:hover .gameBoxButton {
    opacity: 1
}

.providerBox:hover {
    background-color: #000;
    background-blend-mode: luminosity;
    transform: scale(1.1);
    z-index: 9999
}

.providerButton {
    filter: invert(100%)
}

.providerButtonBoxZoom {
    margin-top: 2px;
    margin-bottom: 2px
}

.providerButtonBoxZoom, .zoom:hover {
    transform: scale(1.1);
    z-index: 9999
}

.confirmButton {
    width: 165px;
    height: 60px;
    background: #81d539 !important;
    border-radius: 50px !important;
    font-family: Kanit;
    font-weight: 600;
    font-size: 18px !important;
    line-height: 27px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: .015em
}

.confirmButton:hover {
    background-color: #96d85d !important
}

.cancelButton {
    width: 165px;
    height: 60px;
    background-color: #ea133d !important;
    border-radius: 50px !important;
    font-family: Kanit;
    font-weight: 600;
    font-size: 18px !important;
    line-height: 27px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: .015em
}

.cancelButton:hover {
    background-color: #ef3055 !important
}

::-webkit-scrollbar {
    height: 15px;
    -webkit-height: 15px
}

::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-background-color: transparent
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
    -webkit-background-color: #a8bbbf
}

/* 
::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
    -webkit-background-color: #a9a9a9;
    -webkit-border-radius: 20px;
    -webkit-border: 6px solid transparent;
    -webkit-background-clip: content-box
} */

.show {
    display: block
}

.triangle-bbcosina {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbcosina:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbsalalot {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbsalalot:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbmeow {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbmeow:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbtop {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbtop:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbtenyu {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbtenyu:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbmax {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbmax:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbeva {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbeva:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bblafer {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bblafer:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbdrago {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbdrago:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.triangle-bbalien {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent
}

.triangle-bbalien:before {
    content: "";
    position: absolute;
    border-top: 8px solid #ffb600;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -10px;
    left: -8px
}

.share-icon {
    margin-left: 10px
}

.loader {
    transform: rotate(90deg);
    display: block;
    background-color: currentColor;
    margin: 20px auto;
    position: relative;
    color: #f2f2f2;
    animation: animloader .8s linear .8s infinite alternate
}

.loader, .loader:after, .loader:before {
    width: 4px;
    height: 40px;
    border-radius: 4px
}

.loader:after, .loader:before {
    content: "";
    background: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    animation: animloader .8s linear .95s infinite alternate
}

.loader:before {
    left: -10px;
    animation-delay: 0s
}

@keyframes animloader {
    0% {
        height: 38px
    }

    to {
        height: 4px
    }
}

.swal2-container {
    z-index: 9999 !important
}

.text-divider {
    display: flex;
    align-items: center;
    --text-divider-gap: 1rem
}

.text-divider:after, .text-divider:before {
    content: "";
    height: 1px;
    background-color: #fff;
    flex-grow: 1
}

.text-divider:before {
    margin-right: var(--text-divider-gap)
}

.text-divider:after {
    margin-left: var(--text-divider-gap)
}

.grecaptcha-badge {
    visibility: hidden
}

.provider-img-con {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    filter: grayscale(0);
    transition: filter .5s ease
}

.provider-img-con:hover {
    filter: grayscale(1)
}

.loaderQR {
    animation: rotateLoaderQR 1s infinite;
    height: 50px;
    width: 50px
}

.loaderQR:after, .loaderQR:before {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px
}

.loaderQR:before {
    animation: ball1 1s infinite;
    background-color: #cb2025;
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px
}

.loaderQR:after {
    animation: ball2 1s infinite;
    background-color: #00a096;
    box-shadow: 30px 0 0 #97bf0d
}

@keyframes rotateLoaderQR {
    0% {
        -webkit-transform: rotate(0deg) scale(.8);
        -moz-transform: rotate(0deg) scale(.8)
    }

    50% {
        -webkit-transform: rotate(1turn) scale(1.2);
        -moz-transform: rotate(1turn) scale(1.2)
    }

    to {
        -webkit-transform: rotate(2turn) scale(.8);
        -moz-transform: rotate(2turn) scale(.8)
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 #f8b334
    }

    50% {
        box-shadow: 0 0 0 #f8b334;
        margin-bottom: 0;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px)
    }

    to {
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 #97bf0d
    }

    50% {
        box-shadow: 0 0 0 #97bf0d;
        margin-top: -20px;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px)
    }

    to {
        box-shadow: 30px 0 0 #97bf0d;
        margin-top: 0
    }
}