@font-face {
    font-family: 'db_helvethaicamon_x';
    src: url('../assets/font/db_helvethaicamon_x.ttf')  format('truetype');
}
body, html {
    height: 100%;
    width: 100%;
    font-family: 'db_helvethaicamon_x', sans-serif;
}

.nav-header {
    padding: 5px;
    text-align: center;
    background: #cdcdcd;
    color: white;
    width: 100%;
    font-size: 10px;
}
.bg-img{
    background-image: url("../images/background/bg.webp?v=2.1");
    min-height: 100%;

    /* Center and scale the image nicely */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bg-img-dark{
    background-image: url("../images/background/bgmobile.webp?v=2.1");
    min-height: 100%;

    /* Center and scale the image nicely */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bg-img-black{
    background-image: url("../images/background/black.jpg");
    min-height: 100%;

    /* Center and scale the image nicely */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.bg-img-log{
    background-image: url("../images/background/log_bg.webp?v=2");
    min-height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bg-img-reg{
    background-image: url("../images/background/reg_bg.webp?v=2");
    min-height: 100%;

    /* Center and scale the image nicely */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
@media screen and (min-width: 1024px) {
    .bg-img-log {
        background-image: url("../images/background/log_bg_desktop.webp?v=2");
    }

    .bg-img-reg {
        background-image: url("../images/background/reg_bg_desktop.webp?v=2");
    }
}
.logo-pos{
    text-align: center;
    justify-content: center;
}
.body-content {
    position: relative;
    /*    border: solid 1px;*/
    top:  14vh;
}
.navbar-header{
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top:0;
    width: 100%;
}
.card {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    /* transition: 0.3s; */
    width: 100%;
    margin: 4%;
    border-radius: 25px;
}
.card-border-w{
    border: 1px solid wheat;
}
.navbar-footer {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.fa-line-height{
    line-height: 1.5 !important;
}
.navbar-footer a {
    /*float: left;*/
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.navbar-footer a:hover {
    background: #f1f1f1;
    color: black;
}

.navbar-footer a.active {
    background-color: #04AA6D;
    color: white;
}




.icon-footer{
    /*    padding: 19%;
        width: auto;
        height: 13vw;*/
    /*width: 90px;*/
    height: 40px;
}
.logo{
    /*padding: 5%;*/
    height: 100%;
    width: 15vh;
    padding: 2%;
}

.input-icon {
    width: 100%;
    /*    margin:4px;*/
    box-sizing: border-box;
    padding-left:60px;
}
.w-100{
    width: 100% !important;
}
.w-90{
    width: 90% !important;
}
.w-60{
    width: 60%!important;
}
.w-50{
    width: 50%!important;
}
.w-50px{
    width: 50px !important;
}
.w-40{
    width: 40%;
}
.w-20{
    width: 20% !important;
}
.icon-inside {
    position:relative;
}

.icon-inside i {
    position: absolute;
    left: 15px;
    top: 7px;
    padding: 10px 12px;
    color: #c3cfd7;
}

.icon-outside {
    position:relative;
}

.icon-outside i {
    position:absolute;
    margin-left:-6px;
    top:4px;
    padding:17px 15px;
    color:#30A3F1;
    background:black;
}
.bg-gray{
    background-color: #70685B;
}
.bg-gray-01{
    background-color: #151515
}
.bold{
    font-weight: bold;
}
@media (min-width: 768px) {
    .register-form {
        padding-bottom: 9%;
    }
}
.text-h-form{
    color:#D8C58C !important;
}
.text-h-form h1{
    color:#D8C58C !important;
}
.text-rd{
    background-color: black;
    border-radius: 25px;
}
.text-rd-gray{
    background-color: #70685B;
    border-radius: 25px;
}
.text-rd-gray::placeholder { /* Most modern browsers support this now. */
    color:#A7A29C;
}
.text-yellow{
    color:#F1C511;
}
.text-white{
    color:white;
}
.text-white-25{
    color: #d2c3c3;
}
.text-white-50{
    color:#d2c3c3;
}
.text-indent-50{
    text-indent: 50px;
}
.text-oragne-1{
    color: #C3821C;
}
.text-focus:focus{
    background-color: black;
}
.pad-lr-0{
    padding-left: 0;
    padding-right: 0;
}
.pd-l-8{
    padding-left: 8%;
}
.pd-l-15{
    padding-left: 15%;
}
.pd-r-8{
    padding-right: 8%;
}
.pd-r-5{
    padding-right: 5%;
}
.pd-r-7{
    padding-right: 7%;
}
.pd-r-11{
    padding-right: 11%;
}
.margin-l-3vh{
    margin-left: 3vh;
}
.margin-l-5vh{
    margin-left: 5vh;
}
.margin-top-2{
    margin-top: 2%;
}
.icon-btn{
    position: relative;
    margin-top: 0.3rem;
    margin-right: 0.3rem;
}
.icon-btn-inside{
    margin-left: 0.5rem;
}
.letter-spacing-1{
    letter-spacing: 1px;
}
.white-border-rad{
    background: white;
    color:black;
    border-radius: 10px;
}
.warpper-form{
    position: relative;
    /*    padding: 2%;*/
    padding-top: 2%;
    padding-bottom: 3%;
    background-color: rgba(0, 0, 0, 0.6);
    margin: -1%;
    border-radius: 10px;
    margin-left: 1vw;
    margin-right: 1vw;
    /*width: 80vmin;*/
    /*width: 70vh;*/
}
.balance{
    background-color: white;
    padding: -1px;
    margin-left: 3%;
    margin-right: 3%;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
}
.card-his-dp{
    background: linear-gradient(#080D33, #080D33) padding-box, linear-gradient(45deg, black, #C8B465) border-box;
    border: 2px solid transparent !important;
    padding: -1px;
    border-radius: 11px;
    /*border-color: red 3px;*/
    color: white;
    position: relative;
    width: 100%;
    /*text-align: right;*/
    /*padding: 2%;*/
}
.card-his-wd{
    /*background-color: #ffffff82;*/
    background: linear-gradient(#95969b, #95969b) padding-box, linear-gradient(45deg, transparent, #C8B465) border-box;
    border: 2px solid transparent !important;
    padding: -1px;
    border-radius: 11px;
    /*border-color: red 3px;*/
    /*border: 2px solid #b09e5c54;*/
    /*color: white;*/
    position: relative;
    width: 100%;
    /* text-align: right; */
    /*padding: 2%;*/
}
.text-vertically-center{
    height: 100px;
    line-height: 100px;
    /* text-align: center; */
}
.input-withdraw{
    background-color: #373538;
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    width: 100%;
    text-align: right;
    padding: 2%;
}
.input-default{
    background-color: #373538;
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    width: 100%;
    text-align: center;
    padding: 2%;
}
.input-gold{
    background-color: #373538;
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    width: 100%;
    text-align: center;
    padding: 2%;
}
.card-bd-gold{
    background: linear-gradient(to bottom, #37353740 0%,#2b292a85 50%,#171717a1 100%);
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    width: 100%;
    /*text-align: right;*/
    padding: 2%;
    backdrop-filter: blur(10px);
}
.card-bank{
    background-color: #373538;
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    /*width: 100%;*/
    /*text-align: right;*/
    padding: 2%;
}
.card-bank-deposit{
    background: -webkit-linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    background: linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color: white;
    position: relative;
    width: 100%;
    /*text-align: right;*/
    padding: 2%;
}
.btn-icon-back{
    background: -webkit-linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    background: linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    padding: -1px;
    border-radius: 14px;

    color: white;
    position: relative;
    width: 100%;
    /*text-align: right;*/
    padding: 2%;
    border: 2px solid #B09E5C !important;
}
.btn-icon-back:i{
    text-align: left;
}
.btn-white-gold-bd{
    background-color: white;
    padding: -1px;
    margin-left: 3%;
    margin-right: 3%;
    border-radius: 9px;
    border-color: red 3px;
    border: 2px solid #B09E5C;
    color:black;
}
.register-form{
    position: relative;
    /*    padding: 2%;*/
    padding-top: 2%;
    padding-bottom: 3%;
    background-color: rgba(0, 0, 0, 0.6);
    /*margin: -1%;*/
    border-radius: 25px;
    margin-left: 3vw;
    margin-right: 3vw;
    /*width: 80vmin;*/
    /*width: 70vh;*/
}
.cpass-form{
    position: relative;
    /*    padding: 2%;*/
    padding-top: 1%;
    padding-bottom: 3%;
    background-color: rgba(0, 0, 0, 0.6);
    margin: -1%;
    border-radius: 25px;
    margin-left: 3vw;
    margin-right: 3vw;
    /*width: 80vmin;*/
    /*width: 70vh;*/
}
.footer {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
.footer-nonresp {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
.footer-pathnership{
    margin-left: 1%;
    margin-right: 1%;
    /*margin-bottom: 1%;*/
    justify-content: center;
}
.img-pathnership {
    height: 2vh;
    /*width: 4rem;*/
    margin: 0.2rem;
}
.text-blue{
    color:#9cbef7;
}
.text-black{
    color:#000;
}
.text-gold-1{
    color:#FCF7C1;
}
.text-gold-2{
    color:#FFC426;
}
.top-8{
    top: 8px;
}
.font-size-06{
    font-size: 0.6rem;
}
.font-size-07{
    font-size: 0.7rem;
}
.font-size-08{
    font-size: 0.8rem !important;
}
.font-size-10{
    font-size: 1.0rem;
}
.font-size-13{
    font-size: 1.3rem !important;
}
.font-size-11{
    font-size: 1.1rem;
}

.font-line{
    line-height: 25px;
}
.line-height-0{
    line-height:0px;
}
.line-height-1{
    line-height:1rem;
}
.from-control-1{
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
}
.from-control-1:focus {
    /*    box-shadow:0 0 0 10px red;*/
    background-color: #D0CDCA;
    color: white !important;
}
.from-control-1::placeholder { /* Most modern browsers support this now. */
    color:#FFFFFF;
}
.line-text{
    padding-bottom: 1px;
    border-bottom: 1px solid white;
    /*line-height: 48px;*/
}
.padding-top-25{
    padding-top: 25px;
}
.display-none{
    display:none;
}
.btn-rd{
    border-radius: 25px;
}
.text-orange{
    color: #eab310db!important;
}
.btn-gold{
    /*    background-image: linear-gradient(#362509 10%, #E7AE0F 20%);
        color: black;*/
    /*background-image: linear-gradient(to bottom, #F7971E 0%, #FFD200  51%, #F7971E  100%);*/
    background-image: linear-gradient(to bottom, #a38a6b 0%,#E9AF0A 51%, #E9AF0A 100%);
    /*margin: 10px;*/
    /*padding: 15px 45px;*/
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    box-shadow: 0 0 20px #000000;
    border-radius: 25px;
    display: block;
}
.btn-gold-2{
    background: -webkit-linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);
    background: linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);
    border-radius: 25px!important;
    display: inline-flex !important;
    border: 0px solid #ced4da;
    text-align: center;
    justify-content: center;
    flex-direction: initial !important;
    height: 1.3rem !important;
    line-height: 32px;
}
.btn-gold-3{
    background: -webkit-linear-gradient(to right, #f5d175 0%,#efb751 50%,#f3be5e 100%);
    background: linear-gradient(to right, #f5d175 0%, #efb751 50%, #f3be5e 100%);
    border-radius: 10px!important;
    display: inline-flex !important;
    border: 0px solid #ced4da;
    text-align: center;
    justify-content: center;
    flex-direction: initial !important;
    height: 1.3rem !important;
    line-height: 32px;
    font-size: 14px;
}
.btn-red{
    background: -webkit-linear-gradient(to right, #d82020 0%,#ad1818 50%,#ad1818 100%);
    background: linear-gradient(to right, #d82020 0%,#ad1818 50%,#ad1818 100%);
    border-radius: 25px!important;
    display: inline-flex !important;
    border: 0px solid #ced4da;
    text-align: center;
    justify-content: center;
    flex-direction: initial !important;
    height: 1.3rem !important;
    line-height: 32px;
    color: white;
}
.btn-gold-1-sq{
    /*    background: -webkit-linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);
        background: linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);*/
    background-color: #FCC200;
    border-radius: 5px!important;
    display: inline-flex !important;
    border: 0px solid #ced4da;
    text-align: center;
    justify-content: center;
}
.btn-brown-1-sq{
    /*    background: -webkit-linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);
        background: linear-gradient(to right, #D8A420 0%,#AD7818 50%,#AD7818 100%);*/
    background: #0000006b;
    border: 1px solid gold;
    border-radius: 5px!important;
    display: inline-flex !important;
    text-align: center;
    justify-content: center;
    color: white;
    backdrop-filter: blur(10px);
}
.btn-92{
    display: block;
    margin: 0 auto;
    width: 92%;
}
.icon-user{
    /*    background-image: url(../assets/icon/user.png);
        background-repeat: no-repeat;
        background-position: left center;
        background-origin: content-box;
        background-size: 15px 15px;*/
    background:url(../assets/icon/user.png);
    padding-left: 17px;

}
.icon-user input[type=text] {
    background-color: #3CBC8D;
    color: white;
}

.icon-user:focus-within {
    /*border: 1px solid #000;*/
}

.icon-user>input {
    outline: none;
    border: none;
    background: transparent;
}
.margin-1{
    margin: 1% !important;
}
.padding-03{
    padding: 0.3rem;
}
.padding-0{
    padding :0% !important;
}
.padding-1{
    padding :1%;
}
.padding-2{
    padding :2%;
}
.padding-5{
    padding :5%;
}
.padding-7{
    padding :7%;
}
.height-4rem{
    height: 4rem;
}
.container {
    /*    display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;*/
}

/* Hide the browser's default checkbox */
.container-cb input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0px;
    left: 33px;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 7px;
}

/* On mouse-over, add a grey background color */
.container-cb:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */
.container-cb input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-cb input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-cb .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.margin-top-12{
    margin-top: 12px;
}
.margin-top-24{
    margin-top: 24px;
}
.margin-d40{
    margin: -40px;
}
@media (min-width: 980.00px) {
    .panel-guild{
        width: 50% !important;
    }
    .logo{

        width: 19vh;

    }
    .responsive{
        /*margin-left: 20%;*/
        /*margin-right: 20%;*/
    }



}

.input-half-border-gold{
    background: linear-gradient(#000, #000) padding-box, linear-gradient(45deg, black, #C8B465) border-box;
    border: 1px solid transparent !important;
    border-radius: 18px;
    padding: 10px 20px;
    color: white;
}
select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.padding-bottom-15{
    padding-bottom: 15%;
}
.input-shadow{
    border: 0px solid #ced4da;
    box-shadow: 0px 4px #0303037d;
}
.top-35{
    top: 35px;
}
.top-24{
    top: 24px;
}
input:focus{
    color:white;
}
.textbox-empty{
    border: 2px solid red !important;
}
.textbox-empty:focus{
    border: 2px solid red;
}
.require{
    color:red;
}
.gradient-border-bg {
    background: linear-gradient(#000, #000) padding-box, linear-gradient(45deg, #C8B465, black) border-box;
    border: 3px solid transparent;
    border-radius: 18px;
    padding: 10px 20px;
    color: white;
    font-size: 1.7rem;
}
.success-boder{
    border: 0px solid;
    background: #009345;
    text-align: center;
    border-radius: 18px;
    line-height: 1.1rem;
    width: 4rem;
    display: inline-block;
}
.danger-boder{
    border: 0px solid;
    background: #930000;
    text-align: center;
    border-radius: 18px;
    line-height: 1.1rem;
    width: 4rem;
    display: inline-block;
}
.warning-boder{
    border: 0px solid;
    color: black;
    background: #e7e33d;
    text-align: center;
    border-radius: 18px;
    line-height: 1.1rem;
    width: 4rem;
    display: inline-block;
}
.info-boder{
    border: 0px solid;
    color: white;
    background: #676e6d;
    ;
    text-align: center;
    border-radius: 18px;
    line-height: 1.1rem;
    width: 4rem;
    display: inline-block;
}
.bg-back{
    background: -webkit-linear-gradient(to bottom, #373537 0%,#2B292A 50%,#171717 100%);
    background: linear-gradient(to bottom, #373537 0%,#2B292A 50%,#171717 100%);
}
.bg-score{
    /*background-color: #C0913C;*/
    box-shadow: inset 0px 33px 30px 0 #dbc29b, inset 0 109px 30px 0px #aa884a, inset 0 113px 5px 89px #332A28;
}
.qr{
    width: 80%;
}
.table-gold {
    font-size: 0.7rem !important;
    /* background-image: linear-gradient(0deg, rgba(171, 149, 79, 0.5), rgba(236, 216, 151, 0.5), rgba(171, 149, 79, 0.5))!important; */
    border-color: #FFBD00!important;
    border-radius: 10px 10px 10px 10px!important;
    box-shadow: -1px 0px 3px 3px #e5cf90!important;
    background: -webkit-linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    background: linear-gradient(to right, #4a4949 0%,#1a1a1a 50%,#171717 100%);
    /* color: saddlebrown!important; */
    /* font-size: 2.5vmin; */
}
table.table-gold thead {
    /*background-color: #7EA8F8;*/
    /*padding:0.2rem !important;*/
}
table.table-gold th {
    /*background-color: #7EA8F8;*/
    padding:0.4rem !important;
    color: white;
}
table.table-gold td{
    color: white;
    border-bottom: 1px solid #ffffff52;
}
.table-gold:thead{
    padding: 0.5rem !important;
}
.margin-top-10{
    margin-top: 10%
}
.jumbotron{
    background:transparent;
}
.pc-pathnership{
    display:none;
}
@media (min-width: 1200.00px){
    .register-form{
        margin-left: 15% !important;
        margin-right: 15% !important;
        top: 7%;
        /*width: 80vmin;*/
        /*width: 70vh;*/
    }
}
@media (min-width: 768.00px){
    .logo{
        width: 15vw;
    }
    .register-form{
        margin-left: 0%;
        margin-right: 15%;
        top: 7%;
        /*width: 80vmin;*/
        /*width: 70vh;*/
    }

    .footer{
        display:none;
    }
    .pc-pathnership{
        display:initial;

    }
    .img-pathnership {
        height: 3vh;
        /* width: 4rem; */
        margin: 0.2rem;
    }
}
.disablegame img{
    filter: grayscale(100%);
}
.disablegame a{
    pointer-events: none;
    cursor: default;

}
.ma-icon{
    width: 65%;
    position: absolute;
    top: 33%;
    left: 16%;
    z-index: 2;
    margin: auto;
    filter: none !important;
    content:" ";
}
.col-banner{
    position: relative;
    display: block;
}
.icon-hot-banner{
    position: absolute;
    right: 0;
    background-size: cover;
    top: 0;
    right: -15px;
    top: -40%;
    overflow: hidden;
    width: 30%;
    float: right;
    height: 100%;
    margin-right: 4%;
    background-image: url(../images/icon/banner_hot_animate.png);
    background-repeat: round;
}
/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}*/

.btn-tranparent{
    background: transparent;
    border: 0px;
}
.text-responsive-4-vh{
    font-size: 4vh;
}
.text-responsive-3-vh{
    font-size: 3vh;
}
.notifyjs-Notify-superNotify{
    padding: 1vw !important;
    width: 100% !important;
}
.promotion-border-gold{
    height: auto;
    border-radius: 20px;
    border: 2px solid rgba(171, 149, 79, 0.7);
    -webkit-box-shadow: inset 0 0 20px #000;
    -moz-box-shadow: inset 0 0 20px #000;
    -ms-box-shadow: inset 0 0 20px #000;
    box-shadow: inset 0 0 20px #000;
}
.margin-auto{
    margin:auto;
}
.dropdown-acc {
    /*    margin: 0;
        box-sizing: border-box;
        display: none;
        position: absolute;
        top: 100%;
        width: 100%;
        flex: 2;
        background-color: transparent;
        overflow: none;
        z-index: 999;
        color: #ffffff;
        flex-direction: column;
        
        padding: 0;*/
    display: none;
    position: absolute;
    background-color: tranparent;
    min-width: 100%;
    bottom: 50px;
    z-index: 1;
    list-style-type: none;

}
.show {
    display: block;
}
.hidden{
    display: none;
}
.table-loadmore{
    margin-bottom: 0rem !important;
}
.img-prm-fix{
    width: 100%;
    /*height: calc(1273px - 48rem);*/
    /*height: calc(100% - var(--f));*/
}
.prm-danger{
    padding: 0.21rem 1rem;
    color: #ff9f43 !important;
    background: rgba(255, 159, 67, 0.12) !important;
}

.ribbon-2 {
    --f: 10px; /* control the folded part*/
    --r: 15px; /* control the ribbon shape */
    --t: 2px; /* the top offset */

    position: absolute;
    inset: var(--t) calc(-1*var(--f)) auto auto;
    padding: 0 10px var(--f) calc(10px + var(--r));
    clip-path:
        polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
        calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
        var(--r) calc(50% - var(--f)/2));
    background: #BD1550;
    box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
    z-index: 2;
}
.btn-gold-flat {
    background: linear-gradient(#404040,#505356) padding-box, /*this is your grey background*/ linear-gradient(to right, rgba(176,117,21,1) 0%, rgba(245,215,127,1) 46%, rgba(176,117,21,1) 100%) border-box;
    color: #efcf76;
    padding: 0px 40px;
    border: 3px solid transparent;
    border-radius: 100px;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}
.btn-gold-premium{
    background:linear-gradient(to right, #FBF5B7, #FBF5B7, #FBF5B7, #FBF5B7, #FBF5B7);
    position: relative;
    padding: 0rem 1rem;
    text-align: center;
    /* border-radius: 38px; */
    border-radius: 25px;
    overflow: hidden;
    font-weight: 700;
    font-size: 3vh;
    /* font-family: db helvethaicax,sans-serif!important; */
    border: none;
    outline: 0;
    cursor: pointer;
}

.btn-gold-premium:after {
    content:'';
    top:0;
    transform:translateX(100%);
    width:100%;
    height:220px;
    position: absolute;
    z-index:1;
    animation: slide 1s infinite 3s;

    /* 
    CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
    */
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}
.btn-gold-premium{
    background:linear-gradient(to right, #FBF5B7, #FBF5B7, #FBF5B7, #FBF5B7, #FBF5B7);
    position: relative;
    padding: 0rem 1rem;
    text-align: center;
    border-radius: 25px;
    overflow: hidden;
    font-weight: 700;
    font-size: 3vh;
    border: none;
    outline: 0;
    cursor: pointer;
}
/* galaxy ford */
@media only screen and (max-width: 290px) {
    .card-bank-deposit img{
        width: 80%;
    }
    .warpper-form{
        margin-left: 0vw;
        margin-right: 0vw;
    }
    .gf-pd-r-0{
        padding-right: 0;
    }
    .gf-pd-l-0{
        padding-left: 0;
    }
    .gf-font{
        font-size: 6vw !important;
    }
    .gf-icon-bank{
        margin-top: 12px;
        width: 15vw !important;
    }
    .card-bank-deposit .font-size-08{
        font-size: 0.6rem !important;
    }

    .warpper-form .btn-gold-2{
        width:100% !important;
    }
    .btn-icon-back{
        font-size: 0.4rem!important;
        margin: auto!important;
        width: 90%!important;
    }
    .card-his-dp col-4{
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .card-his-dp .pd-r-7{
        padding-right: 11% !important;
    }
    .card-his-wd .pd-r-7{
        padding-right: 11% !important;
    }
    .card-his-dp h4{
        font-size: 0.8rem;
        line-height: normal;
    }
    .card-his-wd h4{
        font-size: 0.8rem;
        line-height: normal;
    }
    .notifyjs-corner .notifyjs-wrapper, .notifyjs-corner .notifyjs-container{
        padding-left: 10%;
    }
    .balance .font-line {
        line-height: 0.7rem;
        font-size: 0.7rem !important;
        /*font-size: 1rem;*/
    }
}
.text-notify{
    display:inline;
    vertical-align:top;
    padding-left:10px;
    /*    text-indent: 0px;
        text-align: justify;
        letter-spacing: 3px;*/
    /*    text-indent: 50px;
        text-align: justify;
        letter-spacing: 3px;*/
}
.img-notify{
    float: left;
}
.btn-aff-copy{
    width: 90% !important;
    margin: auto;
    font-size: 0.5rem !important;
}

.pd-l-0rem{
    padding-left: 0rem !important;
}
.pd-r-0rem{
    padding-right: 0rem !important;
}
.pd-r-0{
    padding-right: 0rem !important;
}
.card-ddl p{
    font-size: 0.6rem !important;
}
:root {
    --angle: 45deg;
    --opacity: 0.5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.rainbow {

    border-radius: 14px;
    /*    padding: 2rem;
        margin: auto;*/

    display: grid;
    place-content: center;
    text-align: center;
    /*font-size: 1.5em;*/
    --border-size: 0.2rem;
    border: var(--border-size) solid transparent;

    background-image: linear-gradient(
        to right,
        #373538,
        rgb(000 000 000)
        ),
        conic-gradient(
        from var(--angle),
        #FEDB37 0deg 90deg,
        #FDB931 90deg 180deg,
        #9f7928 180deg 270deg,
        #8A6E2F 270deg 360deg
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /*background: rgb(255 255 255 / var(--opacity));*/
}

.reward {

    border-radius: 14px;
    /*    padding: 2rem;
        margin: auto;*/
    place-content: center;
    text-align: center;
    /*font-size: 1.5em;*/
    --border-size: 0.2rem;
    border: var(--border-size) solid transparent;

    background-image: linear-gradient(
        to right,
        #373538,
        rgb(000 000 000)
        ),
        conic-gradient(
        from var(--angle),
        #FEDB37 0deg 90deg,
        #FDB931 90deg 180deg,
        #9f7928 180deg 270deg,
        #8A6E2F 270deg 360deg
        );
    background-origin: border-box;
    background-clip: padding-box, border-box;
    /*background: rgb(255 255 255 / var(--opacity));*/
}
.qr-border{
    border-radius: 25px;
    border: 5px solid transparent;
    background: linear-gradient(#002c67,#002c67) padding-box, /*this is your grey background*/ linear-gradient(to right, rgba(176,117,21,1) 0%, rgba(245,215,127,1) 46%, rgba(176,117,21,1) 100%) border-box;
}
.nav-tabs.nav-header-ct{
    background-color: #404040;
    border-radius: 25px 25px 0px 0px;
}
.nav-header-ct-left .nav-link{
    border-radius: 25px 0px 0px 0px;
}
.nav-header-ct-right .nav-link{
    border-radius: 0px 25px 0px 0px;
}
.nav-header-ct-left .active{
    border-radius: 25px 0px 0px 0px;
    color: #dfcb70 !important;
    font-weight: 700;
    /*background-color: #13265C !important;*/
    border-radius: 25px 0px 0px 0px;
    /*background: linear-gradient(180deg,#4a71dd,#0040f1)!important;*/
    background: linear-gradient(180deg,#2e2e2e,#080808)!important;
}
.warp-blue{
    background: #0d1642;
    border-radius: 10px;
    padding: 1rem;
}
.warp-tranpatent{
    background: tranparent;
    border-radius: 10px;
    padding: 1rem;
}
.nav-header-ct-right .active{
    border-radius: 0px 25px 0px 0px;
    color: #dfcb70 !important;
    font-weight: 700;
    /*background-color: #13265C !important;*/
    /*background: linear-gradient(180deg,#4a71dd,#0040f1)!important;*/
    background: linear-gradient(180deg,#2e2e2e,#080808)!important;
}
.tab-content-ct{
    background:#1e1e1e;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 0;
    border-radius: 0px 0px 10px 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /*    border-left: 4px solid #0c3199;
        border-right: 4px solid #0c3199;
        border-bottom: 4px solid #0c3199;
        border-radius: 0px 0px 10px 10px;*/
}
.tab-pane-ct{
    background-color: #13265C;
}
.table-aff{
    color: white;
    font-size: 0.7rem !important;
    /* background-image: linear-gradient(0deg, rgba(171, 149, 79, 0.5), rgba(236, 216, 151, 0.5), rgba(171, 149, 79, 0.5))!important; */
    border-color: #FFBD00!important;
    border-radius: 10px 10px 10px 10px!important;
    /*box-shadow: -1px 0px 3px 3px #e5cf90!important;*/
    background: #2c3d6c;
    /*background: #0c3199;*/

}
.table-aff td, .table-aff th {
    padding: 0.2rem;
    vertical-align: top;
    border-top: 0px solid #EBE9F1;
}
.table-aff thead th {
    border-bottom: 0px;
}
.table-aff thead{
    background: #464646;
}
table th:first-child{
    border-radius: 10px 0px 0px 0px;
}

table th:last-child{
    border-radius: 0px 10px 0px 0px;
}

.ddl-aff {
    background: #464646;
    padding: -1px;
    border-radius: 10px;
    color: white;
    position: relative;
    width: 100%;
    /* text-align: right; */
    /* padding: 0.2rem; */
    border: 2px solid #B09E5C !important;
}
.ddl-aff option {
    margin: 40px;
    background: #FFF;
    color: #000;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.footer-btn .row{
    margin: 0;
}
.footer-btn .btn-left{
    padding: 0.3rem;
    border: 0;
    border-bottom-left-radius: 10px;
    background: linear-gradient(to right, #780e0e 0%,#992222 50%,#9d2d2d 100%);
    color: white;
    border-top: 1px solid #7a6666;
    border-right: 1px solid #7a6666;
}
.footer-btn .btn-right{
    padding: 0.3rem;
    border: 0;
    border-bottom-right-radius: 10px;
    background: linear-gradient(to right, #0f2f8b 0%,#1e3472 50%,#0a1d50 100%);
    color: white;
    border-top: 1px solid #7a6666;
    border-left: 1px solid #7a6666;
}
.footer-btn{
    /*border-top: 1px solid red;*/
    padding: 0;
    display: flex;
    margin: 0;
    display: block;
}
.btn-gold-black {
    background: linear-gradient(#202224,#000000)  padding-box, /*this is your grey background*/ linear-gradient(to right, rgba(176,117,21,1) 0%, rgba(245,215,127,1) 46%, rgba(176,117,21,1) 100%) border-box;
    color: #efcf76;
    padding: 5px 40px;
    border: 3px solid transparent;
    border-radius: 100px;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}
/* Animate when Houdini is available */
@supports (background: paint(houdini)) {
    /*    @property --opacity {
            syntax: "<number>";
            initial-value: 0.5;
            inherits: false;
        }*/

    /*    @property --angle {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }*/

    @keyframes opacityChange {
        to {
            --opacity: 1;
        }
    }

    @keyframes rotate {
        to {
            --angle: 360deg;
        }
    }


    .rainbow,.reward {
        /*animation: rotate 4s linear infinite, opacityChange 3s infinite alternate;*/
    }

}
/*.rainbow img{
    animation: wiggle 5s linear infinite;
}*/
.rainbow .img-promotion{
    position: absolute;
    width: 20% !important;
    right: 0px;
    z-index: 2;
    top: -10%;
    animation: wiggle 5s linear infinite;
}
@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-10deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%, 100% {
        transform: rotateZ(0);
    }
}


.panel-guild{
    margin: auto;
    width: 90%;
    color: white;
    background: linear-gradient(to bottom,rgba(0,0,0, 0.6), rgba(0,0,0, 0.6));
}
.prm-img{
    width: 100%;
    height: auto;
    position: relative;
}
.modal-header .close-prm {
    margin: -0.8rem -1.4rem -0.8rem auto;
    background-color: transparent;
    border: 0;
}



a.disabled {
    pointer-events: none;
    cursor: default;
}
a.disabled img{
    filter: grayscale(100%);
}

.modal.fade .modal-dialog.modal-dialog-zoom {
    -webkit-transform: translate(0,0)scale(.5);
    transform: translate(0,0)scale(.5);
}
.modal.show .modal-dialog.modal-dialog-zoom {
    -webkit-transform: translate(0,0)scale(1);
    transform: translate(0,0)scale(1);
}

.img-fluid-70{
    max-width: 70%;
    height: auto;
}
.pad-tb-0{
    padding-top: 0;
    padding-bottom: 0;
}
.btn-close-promote{
    position: absolute;
    color: white;
    right: 20px;
}

.btn-change-ch-deposit
{
    /*border-radius: 10px;*/
    width: 50%;
    display: flex;
    padding: 0rem;
    color:white;
    border: 2px solid goldenrod;
    font-size: 1rem;
    font-weight: 600;
    background-image: linear-gradient(180deg, #644C12, #4D350D);
}
.btn-change-ch-deposit.btn-mb-bank{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.btn-change-ch-deposit.btn-mb-tw{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

#btn_container
{
    /*    width:40px;
        height:40px;*/
    /*border-radius:5px;*/
    /*background:red;*/
    float:left;
    position: relative;

}

.btn-change-ch-deposit img
{
    display: inline-block;
    vertical-align: middle;
    /*background: #f00;*/
    padding: 5px;
    width: 34%;
    border-radius: 5px;
}


.btn-change-ch-deposit span
{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    margin-top: 9%;
    font-size: 80%;
}

/*.btn-change-ch-deposit{
    border-radius: 20px;
    width: 100%;
    display: flex;
    padding: 0rem;
    border: 2px solid goldenrod;
}
*/
.btn-change-ch-deposit.active{
    color: black;
    background-image: linear-gradient(180deg, #ffcd55, #e0b05f);
}
/*
.btn-change-ch-deposit img{
    border-radius: 20px;
    width: 25%;
    margin: auto;
}
.btn-change-ch-deposit span{    
    font-size: 0.6rem;
}*/
.tw-sector{
    padding-top: 10px;
    padding-bottom: 10px;
}

.lobby-user{
    margin-bottom: 12px;
}



.sq-gold-blue {
    background: linear-gradient(#D8A420, #AD7818) padding-box, /*this is your grey background*/ linear-gradient(to right, rgba(176, 117, 21, 1) 0%, rgba(245, 215, 127, 1) 46%, rgba(176, 117, 21, 1) 100%) border-box;
    color: #efcf76;
    padding: 5px 10px;
    border: 2px solid transparent;
    border-radius: 11px;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}
.card-bd-gold-none-bd {
    background: linear-gradient(to bottom, #4d4d4d 0%, #000000 50%, #2d2d2d 100%);
    padding: -1px;
    /*    border-radius: 14px;
        border-color: red 3px;
        border: 2px solid #B09E5C;*/
    color: white;
    position: relative;
    width: 100%;
    /* text-align: right; */
    padding: 2%;
    backdrop-filter: blur(10px);
}
.shortcut-position{
    transform: translateY(10%);
}
.btn-shortcut{
    font-weight: 100;
    font-size: 0.525rem;
    padding: .25rem 0.25rem !important;
    color:white;
    font-weight:font-weight;
    background: linear-gradient(to bottom, #ff0402 0%, #ab0909 50%, #fea51f 100%);
}
.line-h-1{
    line-height: 1;
}
.fs0_6{
    font-size: 0.6rem;
}
.fs0_7{
    font-size: 0.7rem;
}
.fs0_8{
    font-size: 0.8rem;
}
.fs0_9{
    font-size: 0.9rem;
}
.modal-dialog-shortcut{
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
/*
.modal-dialog-shortcut{
    margin: 0 !important;
}

.modal-dialog-shortcut .modal-body{
    padding: 0.2rem 0.4rem;
}*/
.modal-dialog-shortcut .modal-body{
    padding: 0.2rem 0.4rem;
}


/*style step shortcut modal */




.carousel-img {
    max-width: 70%;
    height: auto;
    margin: 0 auto;
    margin-top: 40%;
    border-radius: 25px;
    background: #000000;
}

.arrow-icon {
    position: absolute;
    inset: 0px;
    box-sizing: border-box;
    padding: 0px;
    border: none;
    margin: auto;
    display: block;
    width: 0px;
    height: 0px;
    min-width: 70%;
    max-width: 100%;
    min-height: 100%;
    max-height: 100%;
}

.mg-top {
    margin-top: 12px;
}

.logo-bl2 {
    position: absolute;
    width: 37px;
    top: 55%;
    left: 16%;
    transform: translateY(-50%);
    z-index: 99999;
}

.logo-bl3 {
    position: absolute;
    z-index: 99999;
    width: 37px;
    margin: auto;
    top: 29%;
    left: 17%;
}

.logo-bl4 {
    position: absolute;
    z-index: 99999;
    width: 37px;
    margin: auto;
    top: 33%;
    left: 17%
}

.logo-bl5 {
    position: absolute;
    z-index: 99999;
    width: 37px;
    margin: auto;
    top: 54%;
    left: 19%;
}

@media only screen and (max-width:415px) {
    .logo-bl5 {
        top: 53% !important;
        left: 19.5%;
    }
    .title-bl5 {
        left: 18%!important;
        top: 59%!important;
    }

}

@media only screen and (max-width:390px) {
    .logo-bl5 {
        top: 50% !important;
        left: 18.5%;
    }
    .title-bl5 {
        left: 18%!important;
        top: 56%!important;
    }

}


@media only screen and (max-width:375px) {
    .logo-bl5 {
        top: 51% !important;
        left: 18.5%;
    }
    .title-bl5 {
        left: 18%!important;
        top: 55%!important;
    }

}

.title-bl2 {
    position: absolute;
    left: 32%;
    top: 52%;
    font-size: 12px;
}


.title-bl3 {
    position: absolute;
    left: 32%;
    top: 27.5%;
    font-size: 12px;
}

.title-bl4 {
    position: absolute;
    left: 32%;
    top: 32%;
    font-size: 12px;
}

.title-bl5 {
    position: absolute;
    left: 18%;
    top: 60%;
    font-size: 12px;
    color: black;
}

.carousel-inner {
    margin-top: -40%
}
.btn-sc-left {
    margin-left: -35px;
}


.color-btn {
    height: 40px;
    background: linear-gradient(#000, #000) padding-box,
        linear-gradient(to right, rgba(176, 117, 21, 1) 0%,
        rgba(245, 215, 127, 1) 46%, rgba(176, 117, 21, 1) 100%) border-box;
    color: #efcf76;

    border: 3px solid transparent !important;
    border-radius: 100px;
    display: inline-block!important;
    font-size: 18px;
    font-weight: 600!important;
    min-width: 90px;
    text-align: center!important;
}




.Buttonneon {
    -webkit-animation: neon-img 1.5s ease-in-out infinite alternate;
    animation: neon-img 1.5s ease-in-out infinite alternate;

}





@keyframes neon-img {
    0% {
        box-shadow:
            0 0 8px #ebaf04,
            0 0 10px #7b5c05,
            0 0 25px #b07515;

    }

}

.text-ready-payment{
    font-weight: bold;
    color: rgb(6, 150, 215);
    line-height: 0.7em;
    margin-bottom: 0rem;
}

.step {

    padding: 10px;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    background-color: cream;
}

.v-stepper {
    position: relative;
    /*   visibility: visible; */
}


/* regular step */
.step .circle {
    background-color: white;
    border: 3px solid gray;
    border-radius: 100%;
    width: 20px;    /* +6 for border */
    height: 20px;
    display: inline-block;
}

.step .line-progress {
    top: 20px;
    left: 9px;
    height: 100%;
    position: absolute;
    border-left: 3px solid gray;
}

.step.completed .circle {
    visibility: visible;
    background-color: rgb(6,150,215);
    border-color: rgb(6,150,215);
}

.step.completed .line-progress {
    border-left: 3px solid rgb(6,150,215);
}

.step.active .circle {
    visibility: visible;
    border-color: rgb(6,150,215);
}

.step.empty .circle {
    visibility: hidden;
}

.step.empty .line-progress {
    top: 0;
    height: 150%;
}


.step:last-child .line-progress {
    border-left: 3px solid white;
    z-index: -1;
    display: none;
}

.padding-top-10px{
    padding-top: 10px;
}
.payment-container{
    width: 100%;
    max-width: 350px;
    margin: auto;
}
.payment-header{
    background: #0E3D67;
    border-radius: 10px 10px 0px 0px;
}
.payment-body{
    background: #fff;
    border-radius: 0px 0px 10px 10px;
    padding: 10px;
}
.payment-img{
    width: 80%;
    max-width: 200px;
    height: auto;
}
.remark-container p{
    margin-bottom: 0;
}

.crypto-container {
    /*background: white;*/
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 100%;
}
.crypto-container p{
    margin-bottom: 0rem;
}
.crypto-option img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}
.crypto-header {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 10px;
}
.crypto-box {
    background: #f4f4f4;
    /*padding: 10px;*/
    border-radius: 8px;
    margin-bottom: 10px;
}

.crypto-box .crypto-select{
    color: black !important;
    margin-bottom: 0px !important;
}
.crypto-box .crypto-input{
    padding:0px;
}
.crypto-amt{
    color: black !important;
    margin-bottom: 0px !important;
    border: 0px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.crypto-box.crypto-address-box{
    align-items: center;
    padding:10px;
}
.crypto-address-box .crypto-address-qr{
    width: 50%;
    max-width: 200px;
}
.crypto-address{
    font-size: 9px;
}
.crypto-label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}
.crypto-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: 5px;
    background: white;
    border: 1px solid #ddd;
    font-size: 16px;
}
.crypto-select {
    border: none;
    background: none;
    font-size: 16px;
}
.crypto-select {
    width: 100%;
    border: none;
    background: none;
    font-size: 16px;
}
.crypto-option img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}
.crypto-option-select{
    padding: 1px;
}
.crypto-option-select .select2-search__field{
    color:black !important;
    padding: 7px 7px !important;
}
.crypto-option-select .select2-container--default .select2-selection--single{
    background-color: transparent;
    border: 1px solid transparent;
}
.crypto-option-select .select2-search--dropdown .select2-search__field{
    background: #fffafa24;
}
.crypto-option-select .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: -2px;
}
.crypto-option-select .select2-results{
    color: #675e5e;
}
.select2-container--default .select2-results__option {
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex;
    align-items: center;
}
.crypto-option-address-select{
    height: 85px;
    padding: 2px;
}
.crypto-option-address-select span{
    font-size: 0.75rem !important;
}
.crypto-option-address-select .select2-container .select2-selection--single{
    height: 85px;
}
.crypto-option-address-select .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 77px!important;
}

.crypto-icon {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}
.crypto-address-img{
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.border-below{
    border-bottom: 1px solid #8f8f8fdd !important;
}

.crypto-qrcode {
    display: flex;
    align-items: center;
    gap: 10px;
}
.crypto-qr {
    width: 50px;
    height: 50px;
    background: #ddd;
}
.crypto-btn {
    background: red;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
}

.pending-crypto {
    background: var(--primary-color);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.pending-crypto .row {
    display: flex;
    justify-content: space-between;
    padding: 6px 13px 0px 13px;
    border-bottom: 1px solid var(--border-color);
}

.pending-crypto .row:last-child {
    border-bottom: none;
}

.pending-crypto .label {
    color: var(--text-muted);
    font-size: 14px;
}

.pending-crypto .value {
    font-size: 14px;
    font-weight: bold;
}

.pending-crypto .value.green {
    color: var(--accent-color);
}

.btn-copy-address {
    background: transparent;
    color: white;
    margin-top: -12px;
    border: 0;
}
.btn-copy-address span{
    font-size: 12px;
}
.check-in-container {
    top: 80px;
    position: fixed;
    left: 15px;
    z-index: 9;
}
.check-in-container img {
    height: auto;
    width: 80%;
}
.check-in-container p{
    font-size: 14px;
    color: black;
}
.check-in-container .check-in-blog {
    align-items: center;
    background: hsla(0, 0%, 100%, .6);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    padding: 5px;
    width: 60px;
    display: block;
    animation: glow 1s infinite;
    text-align-last: center;
}
@keyframes glow {
    0% {
        box-shadow: 0 0 5px #FFD700;
    }
    50% {
        box-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500;
    }
    100% {
        box-shadow: 0 0 5px #FFD700;
    }
}
/*----------- check in -----------*/

.check-in-modal{
    padding: .8rem 0.4rem;
}

.check-in-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 0px;
    justify-content: center;
}


.check-in-day {
    width: 38px;
    height: 50px;
    background: white;
    border: 2px solid #FFD700;
    color: black;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
    display: grid;
    align-content: center;
    justify-content: center;
    text-align: center;
    margin-top: 3px;
}
.check-in-day img{
    margin:auto;
}
.check-in-day.checked {
    background: green;
    color: white;
}

.check-in-day.missed {
    background: red;
    color: white;
}
.check-in-day-checked{
    position: absolute;
    width: 34px;
    height: 46px;
    background: #04030300;
    border: none;
    color: #31ff00;
    font-size: 40px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
}
.check-in-day-missed{
    position: absolute;
    width: 34px;
    height: 46px;
    background: #04030300;
    border: none;
    color: #ff0000;
    font-size: 40px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
}

.check-in-day.gift {
    background: gold;
    color: black;
    font-weight: bold;
}
.btn-checkin.active{
    color: #fff;
    background-color: #e2af2d;
    border-color: #ff1010;
    box-shadow: 0 0 5px 5px #ffc107;
}
.btn-checkin{
    color: #fff;
    background-color: #4d4b47;
    border-color: #918d8d;
    box-shadow: 0 0 5px 5px #6b685f;
}

.check-in-btn {
    background: #FFD700;
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s;
}

.check-in-btn:hover {
    background: darkgoldenrod;
}

.modal-content-checkin{
    border: 0.5rem dotted #dfdfdf !important;
    box-shadow: 0 0 5px 2px #4a61c3;
    border-radius: 11px;
    background-color: #00000091;
}

@media only screen and (max-width: 430px) {
    .check-in-day {
        width: 35px;
        height: 57px;
        font-size: 10px;
    }
    .check-in-day-missed {
        width: 32px;
        height: 57px;
    }
    .check-in-day-checked{
        width: 32px;
        height: 57px;
    }
}
#NewsModal{
    top: 65px;
}
.close-news-modal{
    position: absolute;
    right: 13px;
    top: 13px;
    border-radius: 50px;
    border: none;
    width: 33px;
    height: 33px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    background-color: goldenrod !important;
    z-index: 99;
    opacity: 1 !important;
    line-height: unset;
}
.modal-news{
    background: transparent;
    padding: -1px;
    border-radius: 14px;
    border-color: red 3px;
    color: white;
    position: relative;
    width: 100%;
    z-index: -999;
    padding: 2%;
}
.modal-news .modal-content-news{
    border: 2px solid #B09E5C;
    border-radius: 14px;
    background: linear-gradient(to bottom, #373537b5 0%, #2b292a85 50%, #171717a1 100%);
}

#payment-qrcode-bitpayz img{
    margin:auto;
}
.dropdown-menu{
    position: relative !important;
}
.dropdown-item.dropdown-bank{
    padding: 0 0.28rem !important;
}
.font-size-20px{
    font-size: 20px;
}
.wallet__main--bonus {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}
.wallet__main--bonus a {
    /*    position: relative;
        display: inline-block;
        width: 85%;
        margin: 0 auto;*/
    /*    padding: 14px 18px;
        border-radius: 30px;
        background: linear-gradient(270deg, #ffcc00, #ff6600, #ff3300, #ffcc00);
        background-size: 400% 400%;*/
    /*    color: #fff;
        font-weight: bold;
        text-align: center;
        font-size: 1.05rem;
        box-shadow: 0 6px 14px rgba(0,0,0,0.35);
        cursor: pointer;
        animation: gradientMove 5s ease infinite;
        overflow: hidden;*/
}
/*

.wallet__main--bonus a::before,
.wallet__main--bonus a::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffcc00 0%, transparent 70%);
    border-radius: 50%;
    animation: sparks 2s linear infinite;
    opacity: 0.8;
}

.wallet__main--bonus a::after {
    left: 30%;
    animation-delay: 1s;
}


.wallet__main--bonus a span.spark {
    position: absolute;
    top: -15px;
    left: 70%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ff9933 0%, transparent 70%);
    border-radius: 50%;
    animation: sparks 2.5s linear infinite;
    opacity: 0.8;
}*/


@keyframes gradientMove {
    0%   {
        background-position: 0% 50%;
    }
    50%  {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


@keyframes sparks {
    0%   {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50%  {
        transform: translateY(20px) scale(0.8);
        opacity: 0.7;
    }
    100% {
        transform: translateY(40px) scale(0.5);
        opacity: 0;
    }
}