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

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

.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(to right, #161616, #212121);
    border-bottom: 1.2px solid #ffe076;
    color: #ffffff;
}

.nav-menu {
    background-image: linear-gradient(#fbde74, #d5b23d);
    color: #000000
}

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

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

.section-header {
    background-color: #f2d051;
    border: 1px solid #f2d051;
    color: #000000;
}

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

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

.section-profile {
    background-color: #414042;
    border: 1px solid #A7A9AC;
    border-radius: 7px;
}

.section-credit {
    background-image: linear-gradient(#F2D051, #F2B300);
    border: 1px solid #F2D051;
    border-radius: 7px;
    color: #000000;
}

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

.text-profile {
    color: #FFE076;
}

.text-profile2 {
    color: #FFE076;
}

.text-error {
    color: #ffe076 !important;
}

.text-error2 {
    color: #e02226
}

.bg-menu {
    background-size: cover;
    background-position: center;
    border-radius: 5px;
    color: #000000;
}

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

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

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

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

.btn-login2,
.btn-login2:hover {
    background-color: #ffe076;
    color: #000000;
}

.btn-login3,
.btn-login3:hover {
    background-image: linear-gradient(#FFFFFF, #BBBBBB);
    color: #000000;
    border-radius: 5px;
}

.btn-register3,
.btn-register3:hover {
    background-image: linear-gradient(#fbde74, #d5b23d);
    border-radius: 5px;
    color: #000000;
}

.btn-register4,
.btn-register4:hover {
    background-image: linear-gradient(#FBDE74, #D5B23D);
    border-radius: 5px;
    color: #000000;
}

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

.btn-logout,
.btn-logout:hover {
    color: #000000;
    background-color: #ffe076;
}

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

.btn-submit,
.btn-submit:hover {
    color: #000;
    background-color: #ffe076;
    border-color: #ffe076;
}

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

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

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

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

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

.btn-promotion-unactive,
.btn-promotion-unactive:hover {
    background-color: #ffe076;
    color: #000000;
}

.btn-promotion-desc,
.btn-promotion-desc:hover {
    background-image: linear-gradient(#FFFFFF, #BBBBBB);
    color: #000000;
}

.btn-wallet-withdraw,
.btn-wallet-withdraw:hover {
    background-color: #ffe076;
    color: #000000;
}

.game-menu,
.game-menu:hover {
    background-image: linear-gradient(#161616, #212121);
    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, #FBDE74, #D5B23D);
    color: #000000;
}

.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-color: #ffe076;
}

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

.input-group-text1 {
    width: 70px;
    background-color: #FBDE74;
    color: #000000;
    border: 1px solid #EAB50C;
}

.bg-alert {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.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: 5px;
    }

    .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: 5px;
    }

    .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: 5px;
    }

    .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;
    }
}

.animate-move {
    animation: MoveUpDown 2s linear infinite;

}

@keyframes MoveUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ADD NEW */
.nav-link,
.nav-link:hover {
    color: #ffffff;
}

.footer {
    background-position: top center;
}

.notice {
    border: 1px solid #EAB50C;
    background-color: #FCF4D9;
    color: #000000;
    padding: 5px;
    border-radius: 5px;
}