body {
    font-family: 'Kanit', sans-serif;
    color: #000000;
}

a {
    text-decoration: none;
    color: #000000;
}

.bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -999;
    background-size: cover;
    background-position: top center;
}

.bg-cover {
    background-size: cover;
    background-position: center;
}

.nav-header {
    background-image: linear-gradient(#0d0b0c, #1c1b1b);
    border-bottom: 1.2px solid #dc1f26;
    color: #ffffff;
}

.nav-menu {
    background-image: linear-gradient(#be2026, #4d1111);
}

.nav-menu a {
    color: #ffffff;
}

.nav-footer {
    background-image: linear-gradient(#0e0d0e, #343434);
}

.section-header {
    background-image: linear-gradient(#be2026, #4d1111);
    border: 1px solid #ffffff;
    color: #ffffff;
}

.section-sub-header {
    background-color: #231f20;
    border: 1px solid #cacbca;
    color: #ffffff;
    border-radius: 5px;
}

.section-body {
    background-image: linear-gradient(#ffffff, #e6e7e8);
}

.section-profile {
    background-image: linear-gradient(to right, #ffffff, #e6e7e8);
    border: 1px solid #dee2e6;
    border-radius: 7px;
}

.section-credit {
    background-image: linear-gradient(#f00504, #900404);
    box-shadow: inset 0px 0px 5px 5px #f82c17;
    border: 1px solid #e1bf5c;
    border-radius: 7px;
    color: #ffffff;
}

.section-info {
    color: #41464b;
    background-color: #e2e3e5;
    border: 1px solid #dee2e6;
}

.text-profile {
    color: #e02226;
}

.text-profile2 {
    color: #e02226;
}

.text-error {
    color: #e02226;
}

.text-error2 {
    color: #e02226
}

.bg-menu {
    background-image: linear-gradient(#1c1c1c, #444444, #1c1c1c);
    border: 1px solid #e1bf5c;
    border-radius: 5px;
    color: #ffffff;
}

.bg-avatar {
    background-color: #000000;
}

.btn-register,
.btn-register:hover {
    color: #e02226;
    background-color: #ffffff;
}

.btn-login,
.btn-login:hover {
    background-color: #e7b649;
    color: #000000
}

.btn-register2,
.btn-register2:hover {
    background-color: #ffffff;
}

.btn-login2,
.btn-login2:hover {
    background-color: #e02226;
    color: #ffffff;
}

.btn-login3,
.btn-login3:hover {
    background-image: linear-gradient(#be2026, #4d1111);
    color: #ffffff;
    border-radius: 5px;
}

.btn-register3,
.btn-register3:hover {
    background-color: #e7b649;
    border-radius: 5px;
}

.btn-register4,
.btn-register4:hover {
    background-image: linear-gradient(#be2026, #4d1111);
    border-radius: 5px;
    color: #ffffff;
}

.btn-line,
.btn-line:hover {
    background-color: #40b14d;
    color: #ffffff;
    border-radius: 5px;
}

.btn-logout,
.btn-logout:hover {
    color: #e02226;
    background-color: #ffffff;
}

.btn-copy,
.btn-copy:hover {
    background-color: #e02226;
    color: #ffffff;

}

.btn-submit,
.btn-submit:hover {
    background-color: #e02226;
    color: #ffffff;
}

.btn-cancel,
.btn-cancel:hover {
    background-color: #e7b649;
    color: #000000;
}

.btn-withdraw,
.btn-withdraw:hover {
    background-color: #e02226;
    color: #ffffff;
}

.btn-checkturn,
.btn-checkturn:hover {
    background-color: #e7b649;
    color: #000000;
}

.btn-back,
.btn-back:hover {
    color: #ffffff;
}

.btn-promotion-active,
.btn-promotion-active:hover {
    background-color: #e02226;
    color: #ffffff;
}

.btn-promotion-unactive,
.btn-promotion-unactive:hover {
    background-color: #40b14d;
    color: #ffffff;
}

.btn-promotion-desc,
.btn-promotion-desc:hover {
    background-image: linear-gradient(#0e0d0e, #343434);
    color: #ffffff;
}

.btn-wallet-withdraw,
.btn-wallet-withdraw:hover {
    background-image: linear-gradient(#0e0d0e, #343434);
    color: #ffffff;
}

.game-menu,
.game-menu:hover {
    background-image: linear-gradient(#0e0d0e, #343434);
    color: #ffffff;
    border-radius: 5px;
    border: none;
}

.game-menu img {
    width: 30px;
}

.i-game-menu {
    font-size: 30px;
}

.game-menu-active,
.game-menu-active:hover {
    background-image: linear-gradient(to right, #f00504, #900404);
}

.model-custom {
    background-image: linear-gradient(#ffffff, #e6e7e8);
}

.modal-custom-close {
    color: #be2227;
}

.text-modal-header {
    color: #be2227;
}

.text-modal-body {
    color: #000000;
}

.modal-title {
    color: #000000;
}

.w-100-1 {
    height: 1.5px;
    background-image: linear-gradient(#b47f34, #fae372);
}

.w-100-2 {
    height: 2px;
    background-color: #be2227;
}

.input-group-text1 {
    width: 70px;
    background-color: #be2227;
    color: white;
}

.bg-alert {
    background-color: #f8d7da;
    border: 1px solid #f1aeb5;
    color: #58151c;
}

.wheel {
    transition: all ease 5s;
}

.wheel-pin {
    width: 80px;
    margin-top: -67%;
    margin-bottom: 36%;
    position: relative;
    z-index: 999;
}

@media (min-width: 768px) {
    .wheel-pin {
        width: 100px;
        margin-top: -53%;
        margin-bottom: 33%;
    }
}

@media (min-width: 992px) {
    .wheel-pin {
        width: 100px;
        margin-top: -39%;
        margin-bottom: 24%;
    }

    .game-menu,
    .game-menu:hover {
        border-radius: 0px;
    }

    .game-menu img {
        width: 45px;
    }

    .i-game-menu {
        font-size: 45px;
    }
}

@media (min-width: 1200px) {
    .wheel-pin {
        width: 100px;
        margin-top: -32%;
        margin-bottom: 20%;
    }

    .game-menu,
    .game-menu:hover {
        border-radius: 0px;
    }

    .game-menu img {
        width: 45px;
    }

    .i-game-menu {
        font-size: 45px;
    }
}

@media (min-width: 1400px) {
    .wheel-pin {
        width: 100px;
        margin-top: -27%;
        margin-bottom: 17%;
    }

    .game-menu,
    .game-menu:hover {
        border-radius: 0px;
    }

    .game-menu img {
        width: 45px;
    }

    .i-game-menu {
        font-size: 45px;
    }
}

.icon-favorite {
    position: absolute;
    font-size: 22px;

    margin-top: 10px;
    margin-left: -40px;
}

@media (min-width: 768px) {
    .icon-favorite {
        font-size: 20px;

        margin-top: 10px;
        margin-left: -35px
    }
}

@media (min-width: 992px) {
    .icon-favorite {
        font-size: 25px;

        margin-top: 11px;
        margin-left: -45px;
    }
}

@media (min-width: 1200px) {
    .icon-favorite {
        font-size: 30px;

        margin-top: 12px;
        margin-left: -55px;
    }
}

@media (min-width: 1400px) {
    .icon-favorite {
        font-size: 30px;

        margin-top: 12px;
        margin-left: -55px;
    }
}