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(340deg, #37194e 33%, #ec1c59 100%);
}

.nav-menu {
    background-color: #10141b;
    color: #cfcfce;
    border-bottom: 1px solid #2c2d2c;
}

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

.nav-footer {
    background-color: #5E0018;
    color: #ffffff;
}

.section-header {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    border: 1px solid #f3c019;
    color: #000000;
}

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

.section-body {
    background-color: #ffffff;
}

.section-profile {}

.section-credit {
    background-image: linear-gradient(140deg, #37194e 33%, #ec1c59 100%);
    border-radius: 5px;
    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-color: #1f1132;
    border-radius: 5px;
    color: #ffffff;
}

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

.btn-register,
.btn-register:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    color: #000000 !important;
    border-color: #f8c019;
}

.btn-login,
.btn-login:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    color: #000000 !important;
    border-color: #f8c019;
}

.btn-register2,
.btn-register2:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    color: #000000 !important;
    border-color: #f8c019;
}

.btn-login2,
.btn-login2:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    color: #000000 !important;
    border-color: #f8c019;
}

.btn-login3,
.btn-login3:hover {
    background-image: linear-gradient(140deg, #7e1f55 33%, #36194e 100%);
    color: #ffffff;
    border-radius: 5px;
}

.btn-register3,
.btn-register3:hover {
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    border-color: #f3c019;
    border-radius: 5px;
}

.btn-register4,
.btn-register4:hover {
    background-image: linear-gradient(140deg, #7e1f55 33%, #36194e 100%);
    border-radius: 5px;
    color: #ffffff;
}

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

.btn-logout,
.btn-logout:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    color: #000000 !important;
    border-color: #f8c019;
}

.btn-copy,
.btn-copy:hover {
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    border-color: #f8c019
}

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

.btn-cancel,
.btn-cancel:hover {
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    border-color: #f8c019;
}

.btn-withdraw,
.btn-withdraw:hover {
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    border-color: #f8c019;
}

.btn-checkturn,
.btn-checkturn:hover {
    background-color: #0d6efd;
    color: #ffffff;
}

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

.btn-promotion-active,
.btn-promotion-active:hover {
    background-image: linear-gradient(to right, #fad36e 0%, #f26a36 100%);
    border-color: #f8c019;
}

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

.btn-promotion-desc,
.btn-promotion-desc:hover {
    background-color: #462f6a;
    color: #ffffff;
}

.btn-wallet-withdraw,
.btn-wallet-withdraw:hover {
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    border-color: #f8c019;
}

.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 {
    background-color: #462f6a;
    height: 1.5px;
}

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

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

.bg-alert {
    background-image: linear-gradient(140deg, #37194e 33%, #ec1c59 100%);
    color: #ffffff;
    border: none;
}

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

/* ADD NEW */
.nav-header a {
    color: #ffffff;
}

.nav-menu2 {
    background-image: linear-gradient(140deg, #37194e 33%, #ec1c59 100%);
    color: #ffffff;
}

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

.border-end-custom {
    border-right: 1px solid #dee2e6;
}

.nav-footer a,
.nav-footer a:active,
.nav-footer a:focus {
    color: #ffffff;
}

.nav-footer img {
    width: 19px;
}

.section-credit-border {
    border-right: 1px solid #ffde17;
}

.bg-menu2 {
    background-color: #198754;
    color: #ffffff;
    border-radius: 5px;
}

.bg-menu3 {
    background-color: #dc3545;
    color: #ffffff;
    border-radius: 5px;
}

.bg-menu:hover {
    background-color: #3c1e5e;
}

.bg-menu-active,
.bg-menu-active:hover {
    background-color: #3c1e5e;
}

.bg-launch-game {
    border-color: #f8c019;
    background-image: linear-gradient(to right, #ee682f 0%, #f6d270 100%);
    color: #000000;
}

.icon-credit {
    color: #ffffff;
    font-size: 1rem;
}