.swiper {
    width: 100%;
    height: 100%;
}

body {
    margin-bottom: 70px;
    background: #f5edf7;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'noto';
}

.logo {
    width: 175px !important;
}

.live-content {
    padding: 15px;
    color: #fff;
}

.payment-logo {
    width: 300px;
}

.copyright-text {
    font-size: 0.78rem;
    font-weight: bold;
}

.payment-mobile {
    width: 250px;
}

.card-live {
    width: 38rem;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.card-live-dk {
    width: 100%;
    display: block;
    margin-right: auto;
    margin-left: auto;
}


@font-face {
    font-family: 'noto';
    src: url("../fonts/NotoSerif-Regular.ttf");
}

.ball-result {
    font-size: 3rem;
    font-weight: bold;
}

.slideimg {
    width: 100%;
}

.result-card {
    background: #470064;
    color: #fff;
    padding: 10px;
}

.topnav {
    background: #f1f1f1;
    padding: 8px;
}

.p-num {
    font-size: 1.9rem;
}

.list-top, .bottom-nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

    .list-top > li, .bottom-nav > li {
        display: inline-block;
        margin-right: 7px;
        font-weight: bold;
    }

    .list-top > li {
        color: #8d8d8d;
    }

.navbot {
    padding: 10px;
    color: #fff;
}

.bg-card1, .bg-card2, .bg-card3 {
    padding: 10px;
}

.bg-card1 {
    background: #d60000;
    border: 1px solid #d60000;
    color: #fff;
}

.bg-card2 {
    border: 1px solid #f7f7f7;
    background: #f1f1f1;
}

.bg-card3 {
    background: #f7f7f7;
    border: 1px solid #f1f1f1;
}

.bg-card4 {
    background: #000366 !important;
}

.time-cur {
    font-size: 0.8rem;
}

.prize-title {
    font-size: 1.1rem;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px dashed #fff;
    text-transform: uppercase;
}

.ball-num-1, .ball-num-2, .ball-num-3 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.ball-num-1 {
    background: #910000;
    border: 1px solid #910000;
}

.ball-num-2 {
    background: #dddddd;
    border: 1px solid #cacaca;
}

.ball-num-3 {
    background: #cacaca;
    border: 1px solid #cacaca;
}

.running-blw {
    width: 100%;
    position: relative;
}

.icon-runn {
    position: absolute;
    z-index: 9999;
    top: -5px;
    font-size: 0.9rem;
}

.text-runn {
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: bold;
    padding-top: 5px;
}

@media only screen and (max-width: 1200px) {
    .prize-title, .date-prize {
        text-align: center;
    }

    .card-live {
        width: 100%;
    }
}

/* Spin Wheel */

#fire {
    background-color: #313131 !important;
    height: 100%;
    width: 100%;
}

.fire {
    height: 600px;
}


.power_controls {
    background: url("../images/spin-wheel.png") center bottom no-repeat;
    height: 621px;
    width: 100%;
    z-index: 1;
}

    .power_controls .can-pos {
        position: absolute;
        z-index: -1;
        left: 26.35%;
        margin-top: 58px;
        transform: scale(1.1);
    }

        .power_controls .can-pos canvas {
            width: 95%;
            display: block;
            margin: 0 auto;
        }

    .power_controls button {
        color: #fff;
        background: #fdb040;
        background: linear-gradient(to bottom, #fdb040 0%, #d07400 100%);
        padding: 1px;
        font-size: 30px;
        width: 486px;
        height: 50px;
        margin-top: 459px;
        font-weight: 700;
    }

    .power_controls .btn-danger:hover {
        background: #bb0d0d;
        background: linear-gradient(to bottom, #bb0d0d 0%, #f4241d 100%);
    }

    .power_controls .btn-danger:focus {
        box-shadow: unset;
    }

    .power_controls p {
        font-size: 5rem;
        font-weight: 700;
        width: 390px;
        height: 80px;
        margin: 25px auto;
        text-align: left;
    }

    .power_controls span {
        font-size: 40px;
        color: #fff;
        font-weight: bold;
    }

.slot-container {
    width: 70%;
    margin-top: 10px;
    display: flex;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
}

.slot {
    background-color: #da0000;
    border: 4px solid #e69121;
    border-radius: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
}

@media screen and (max-width: 1199px) {
    .power_controls {
        background-size: 75%;
        height: 0;
        padding-bottom: 100%;
    }

        .power_controls .can-pos {
            left: 55.25%;
            margin-top: 2.75%;
            transform: none;
        }

            .power_controls .can-pos canvas {
                width: 95%;
            }

        .power_controls button {
            width: 68%;
            margin-top: 73%;
        }

        .power_controls p {
            width: 68%;
            margin: 2% auto;
            font-size: 6.5vw;
        }
}

@media screen and (max-width: 1130px) {
    .power_controls .can-pos {
        left: 54.75%;
    }

        .power_controls .can-pos canvas {
            width: 92%;
        }
}

@media screen and (max-width: 1100px) {
    .power_controls .can-pos {
        left: 54.25%;
    }

        .power_controls .can-pos canvas {
            width: 90%;
        }
}

@media screen and (max-width: 1070px) {
    .power_controls .can-pos {
        left: 53.65%;
    }

        .power_controls .can-pos canvas {
            width: 88%;
        }
}

@media screen and (max-width: 1050px) {
    .power_controls .can-pos {
        left: 15.2%;
        top: 7.5%;
    }

        .power_controls .can-pos canvas {
            width: 145%;
        }
}

@media screen and (max-width: 1020px) {
    .power_controls .can-pos {
        left: 52.5%;
    }

        .power_controls .can-pos canvas {
            width: 82%;
        }
}

@media screen and (max-width: 991px) {
    .power_controls {
        background-size: 90%;
        padding-bottom: 120%;
    }

        .power_controls span {
            font-size: 30px;
        }

        .power_controls .can-pos {
            left: 52.25%;
            margin-top: 3%;
        }

            .power_controls .can-pos canvas {
                width: 95%;
            }

        .power_controls button {
            font-size: 3vw;
            height: auto;
            width: 80%;
            margin-top: 87%;
        }

        .power_controls p {
            margin: 2% auto;
            font-size: 7.5vw;
            width: 80%;
        }

    .slot {
        min-height: 50px;
    }
}

@media screen and (max-width: 960px) {
    .power_controls .can-pos {
        left: 51.5%;
    }

        .power_controls .can-pos canvas {
            width: 92%;
        }
}

@media screen and (max-width: 945px) {
    .power_controls .can-pos {
        left: 51.25%;
    }

        .power_controls .can-pos canvas {
            width: 90%;
        }
}

@media screen and (max-width: 930px) {
    .power_controls .can-pos {
        left: 19px;
        top: 63px;
        width: 660px;
    }
}

@media screen and (max-width: 920px) {
    .power_controls .can-pos canvas {
        width: 88%;
    }
}

@media screen and (max-width: 868px) {
    .power_controls .can-pos {
        left: 3%;
        margin-top: 3%;
    }
}

@media screen and (max-width: 718px) {
    .power_controls p span {
        margin: auto 4%;
    }

    .slot {
        min-height: 40px;
    }

    .slot-container {
        gap: 5px;
    }
}

@media screen and (max-width: 567px) {
    .slot {
        border: 2px solid #e69121;
        border-radius: 4px;
        min-height: 30px;
    }
}

@media screen and (max-width: 557px) {
    .power_controls button {
        font-size: 2.75vw;
        margin-top: 87.25%;
    }

    .power_controls p span {
        margin: auto 4.1%;
    }

    .power_controls span {
        font-size: 20px;
    }
}

@media screen and (max-width: 500px) {
    .power_controls .can-pos canvas {
        width: 84%;
    }

    .power_controls p span {
        margin: auto 3.8%;
    }

    .slot {
        min-height: 24px;
    }

    .slot-container {
        gap: 3px;
    }

    .timer {
        letter-spacing: 5px;
    }
}

@media screen and (max-width: 486px) {
    .power_controls p span {
        margin: auto 3.8%;
    }

    .power_controls {
        background-size: 88%;
        height: 0;
        padding-bottom: 114%;
    }

        .power_controls .can-pos {
            left: 1%;
            top: 5.7%;
            width: 99%;
        }

    .result-number::after {
        padding-bottom: 32%;
    }
}

@media screen and (max-width: 410px) {
    .power_controls button {
        margin-top: 86%;
    }

    .power_controls p span {
        margin: auto 3.8%;
    }
}

@media screen and (max-width: 375px) {
    .power_controls p span {
        margin: auto 3.7%;
    }
}

@media screen and (max-width: 360px) {
    .power_controls .can-pos canvas {
        width: 80%;
    }

    .slot {
        min-height: 20px;
    }
}

@media screen and (max-width: 342px) {
    .power_controls p span {
        margin: auto 3.5%;
    }
}

@media screen and (max-width: 316px) {
    .power_controls button {
        font-size: 2.25vw;
    }

    .power_controls p span {
        margin: auto 3.5%;
    }
}

@media screen and (max-width: 294px) {
    .power_controls p span {
        margin: auto 3.3%;
    }
}

@media screen and (max-width: 277px) {
    .power_controls p span {
        margin: auto 3.1%;
    }
}

div.live-content.bg-dark.rounded {
    background-color: #1d005c !important;
}

.card1 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    align-items: center;
}