@charset "UTF-8";

body {
    font-family: Noto Sans Thai,sans-serif;
    background-image: linear-gradient(180deg, #fff, #c2c6cf 50%, #0075ff);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-size: 14px;
    animation: fade-in 1s, bg-move 15s linear infinite;
    -webkit-animation: fade-in 1s, bg-move 15s linear infinite;
    touch-action: pan-y;
}

body.bg-homepage{
    background: url(../images/background-homepage.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
}

::-moz-selection {
    background: rgba(0, 0, 0, 0.2);
}

::selection {
    background: rgba(0, 0, 0, 0.2);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    from {
        opacity: 0;
    }
}

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

.clear {
    clear: both;
    display: block;
    width: 100%;
    font-weight: 400;
}

.material-icons{
    color: #CEE7EC !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-size: 16px;
    line-height: 24px;
}
div.wrapper {
    /* height: calc(100vh - 109px); */
    margin-top: 85px;
    margin-bottom: 180px;
}
li {
    list-style: none;
}
footer {
    display: none !important;
}
button:focus {
    outline: none;
}
.bg_blue{
    background-image: linear-gradient(180deg, #fff, #c2c6cf 50%, #0075ff);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* 
.bg_blueW{
    background:#eefcfd;
} */

.bg-gary {
    background: #f0f0f0;
}

.bg-yl {
    background: none;
    color: #000;
}

.mb-150{
    margin-bottom: 150px;
}

.bg-box{
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
    padding: 10px 15px;
}

.justify-content-between {
    justify-content: space-between;
}

/* ======================================= โทนสีแต่ละหวย */

/* หวย 5 นาที */
.bg-yeekeeC{
    background: #99d91d;
}
.border-yeekeeC{
    border:1px solid #99d91d;
}
.text-color-yeekeeC{
    color:#99d91d;
}

/* หวย ATM*/
.bg-ATM{
    background: #2acbe0;
}
.border-ATM{
    border:1px solid #2acbe0;
}
.text-color-ATM{
    color:#2acbe0;
}

/* หวย ATMGold*/
.bg-ATMGold{
    background: #3f6418;
}
.border-ATMGold{
    border:1px solid #3f6418;
}
.text-color-ATMGold{
    color:#3f6418;
}

/* หวยฟ้า*/
.bg-Huay{
    background: #3b5898;
}
.border-Huay{
    border:1px solid #3b5898;
}
.text-color-Huay{
    color:#3b5898;
}
/* หวยฟ้า5*/
.bg-Huay5 {
    background: #ff9100;
}

.border-Huay5 {
    border: 1px solid #ff9100;
}

.text-color-Huay5 {
    color: #ff9100;
}
/* หวยlto5*/
.bg-lto5 {
    background: #000675;
}

.border-lto5 {
    border: 1px solid #000675;
}

.text-color-lto5 {
    color: #000675;
}

/* ======================================= โทนสีแต่ละหวย */
/* หวยฟ้าVip*/
.bg-HuayVip{
    background: #b456f0;
}
.border-HuayVip{
    border:1px solid #b456f0;
}
.text-color-HuayVip{
    color:#b456f0;
}
/* ======================================= โทนสีแต่ละหวย */


/* =========== main หวย ATM */

.main-class-yeekee .rounded_color .fa-stack i{
    color:#2acbe0 !important;
}

.main-class-yeekee .content-two-option button:hover,
.main-class-yeekee .content-two-option .active{
    color: #333333;
    background: #f1fcfd;
}

.title-head h4.bg-atm{
    /* background: rgb(54, 194, 206);
    background: linear-gradient(180deg, rgba(54, 194, 206, 1) 0%, rgba(0, 159, 189, 1) 52%, rgba(54, 194, 206, 1) 100%); */
}



/* =========== main หวย ATM Vip */

.main-class-yeekee-vip .title-head h4{
    /* background: rgb(244, 191, 20) !important;
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%) !important; */
}

.main-class-yeekee-vip .rounded_color .fa-stack i{
    color:#3f6418 !important;
}

.main-class-yeekee-vip .br-radius .bg-warning{
    background-color: #33ff33 !important;
}

.main-class-yeekee-vip .content-two-option button:hover,
.main-class-yeekee-vip .content-two-option .active{
    background: rgb(244, 191, 20) !important;
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%) !important;
}



/* =========== main หวย ATM 5 นาที */

.main-class-custom .title-head h4{
    /* background: #00ffff; */
}

.main-class-custom .rounded_color .fa-stack i{
    color:#99d91d !important;
}

.main-class-custom .br-radius .bg-warning{
    background: #00ffff !important;
        color: #000;
}

.main-class-custom  .br-radius.border-warning{
    border-color: #00ffff!important;
}

.main-class-custom .content-two-option button:hover,
.main-class-custom .content-two-option .active{
    background: rgb(116, 223, 16);
    background: linear-gradient(180deg, rgba(116, 223, 16, 1) 0%, rgba(195, 233, 2, 1) 50%, rgba(116, 223, 16, 1) 100%);
}




/* =========== main หวยฟ้า */

.main-class-huay-fah .title-head h4{
    background: #2f4c8b !important;
    background: linear-gradient(90deg,#2f4c8b,#5d85c4) !important;
}

.main-class-huay-fah .status-open-custom{
    border: 1px solid #2f4c8b;
}

.main-class-huay-fah .group-button a .status-countdown-custom{
    background: #2f4c8b !important;
    background: linear-gradient(90deg,#2f4c8b,#5d85c4) !important;
}

.main-class-huay-fah .rounded_color .fa-stack i{
    color:#3b5898 !important;
}

.main-class-huay-fah .br-radius .bg-warning{
    background-color: #3b5898!important;
}

.main-class-huay-fah .br-radius.border-warning{
    border-color: #3b5898!important;
}

.main-class-huay-fah .nav-navigation li:nth-child(1) a{
    margin-bottom: 15px !important;
}

.main-class-huay-fah .nav-navigation li:nth-child(2) a{
    display: none;
}
.main-class-Fah5 .nav-navigation li:nth-child(2) a {
    display: none;
}

.main-class-huay-fah .content-two-option button:hover,
.main-class-huay-fah .content-two-option .active{
    background: #3b5898;
}


/* =========== main หวยฟ้า 5 */

.main-class-huay-fah-5 .title-head h4 {
    background: #001281 !important;
}

.main-class-huay-fah-5 .status-open-custom {
    border: 1px solid #001281;
}

.main-class-huay-fah-5 .group-button a .status-countdown-custom {
    background: #001281;
}

.main-class-huay-fah-5 .rounded_color .fa-stack i {
    color: #001281 !important;
}

.main-class-huay-fah-5 .br-radius .bg-warning {
    background-color: #001281 !important;
}

.main-class-huay-fah-5 .br-radius.border-warning {
    border-color: #001281 !important;
}

.main-class-huay-fah-5 .content-two-option button:hover,
.main-class-huay-fah-5 .content-two-option .active {
    background: #001281;
}

.main-class-huay-fah-5 .nav-navigation li:nth-child(1) a {
    margin-bottom: 15px !important;
}

.main-class-huay-fah-5 .nav-navigation li:nth-child(2) a {
    display: none;
}
/* =========== สิ้นสุด main =========== */

/* =========== main หวย lto 5 */

.main-class-huay-lto-5 .title-head h4 {
    background: #e13121 !important;
    background: linear-gradient(90deg,#ee871e,#e13121) !important;
}

.main-class-huay-lto-5 .status-open-custom {
    border: 1px solid #e13121;
}

.main-class-huay-lto-5 .group-button a .status-countdown-custom {
    background: #e13121 !important;
    background: linear-gradient(90deg,#ee871e,#e13121) !important;
}

.main-class-huay-lto-5 .rounded_color .fa-stack i {
    color: #e13121 !important;
}

.main-class-huay-lto-5 .br-radius .bg-warning {
    background: linear-gradient(90deg,#ee871e,#e13121) !important;
}

.main-class-huay-lto-5 .br-radius.border-warning {
    border-color: #e13121 !important;
}

.main-class-huay-lto-5 .content-two-option button:hover,
.main-class-huay-lto-5 .content-two-option .active {
    background: linear-gradient(90deg,#ee871e,#e13121) !important;
}

.main-class-huay-lto-5 .nav-navigation li:nth-child(1) a {
    margin-bottom: 15px !important;
}

.main-class-huay-lto-5 .nav-navigation li:nth-child(2) a {
    display: none;
}
/* =========== สิ้นสุด main =========== */

/* =========== main หวยฟ้า Vip */

.main-class-huay-fah-vip .title-head h4{
    background: #b456f0;
}

.main-class-huay-fah-vip .status-open-custom{
    border: 1px solid #b456f0;
}

.main-class-huay-fah-vip .group-button a .status-countdown-custom{
    background: #b456f0;
}

.main-class-huay-fah-vip .rounded_color .fa-stack i{
    color:#b456f0 !important;
}

.main-class-huay-fah-vip .br-radius .bg-warning{
    background-color: #b456f0!important;
}
.main-class-huay-fah-vip .br-radius.border-warning{
    border-color: #b456f0!important;
}

.main-class-huay-fah-vip .content-two-option button:hover,
.main-class-huay-fah-vip .content-two-option .active{
    background: #b456f0;
}

.main-class-huay-fah-vip .nav-navigation li:nth-child(1) a{
    margin-bottom: 15px !important;
}

.main-class-huay-fah-vip .nav-navigation li:nth-child(2) a{
    display: none;
}


.main-class-custom-yeekee3 .group-button a .status-countdown-custom{
    background: #daa520;
    color: #fff;
}

.main-class-custom-yeekee3 .br-radius .bg-warning{
    background: #daa520 !important;
    color: #fff;
}

.main-class-custom-yeekee3 .br-radius.border-warning {
    border-color: #daa520 !important;
}


.main-class-custom-yeekee3vip .group-button a .status-countdown-custom{
    background: #ff9966;
    color: #fff;
}

.main-class-custom-yeekee3vip .br-radius .bg-warning{
    background: #ff9966 !important;
    color: #fff;
}

.main-class-custom-yeekee3vip .br-radius.border-warning {
    border-color: #ff9966 !important;
}

/* =========== สิ้นสุด main =========== */

.boxUser{
    margin: 30px auto;
    text-align: center;
}
.boxUser a{
    width: 150px;
    color: #000;
    text-align: center;
    display: inline-block;
}

.boxUser a span{
    display: block;
    text-transform: uppercase;
    font-size: 22px;
}

.boxUser a span img{
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}




.menu-popup .open-modal,
.menu-popup .cta {
  display: inline-block;
  font-weight: bold;
  background: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.75rem;
  margin-bottom: 1rem;
  border-radius: 5px;
}

/* MODAL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-popup .icon-menu{
    border: none;
    margin-left: 10px;
    font-size: 26px;
    color: #000;
    background: none;
    cursor: pointer;
}
.popupCart.popMenu{
    background-image: linear-gradient(180deg, #fff, #c2c6cf 50%, #0075ff);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.popupCart.popMenu .fancybox-button{
    background-color: #0075ff;
    border: 2px solid #ffffff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
    top: 10px;
    right: 10px;
    padding: 3px;
}

.popupCart.popMenu .fancybox-button svg{
        width: 35px;
    height: 35px;
}

.popupCart.popMenu .fancybox-button svg path{
        fill: #fff;
}

.popMenu .nav-mobile {
    padding: 30px 60px;
    border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.popMenu .nav-mobile .nav-link{
    width: calc(25% - 5px + 5px);
    display: block;
    float: left;
    text-align: center;
    color: #000;
    font-size: 18px;
    padding: 5px;
    margin: 10px 0;
}

.popMenu .nav-mobile .nav-link .bg-box{
    width: 100px;
    height: 100px;
    text-align: center;
    margin: 5px auto;
    padding: 15px 0;
}

.popMenu .nav-mobile .nav-link .bg-box img{
    width: 70px;
    height: auto;
}

.popMenu .nav-mobile .nav-link .notification-user{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 40px;
    border-radius: 50px;
    text-align: center;
    padding: 0;
    font-size: 20px;
    line-height: 40px;
    background: #ff0000;
}

.popMenu .credit .bg-graph-purple{
        border: 1px solid rgb(255, 255, 255);
    background: rgb(77, 157, 249);
}

.popMenu .credit h2{
    font-size: 30px;
    color: #ffd495;
    text-align: left;
    margin: 10px 0;
}



.money_mobile a {
    /* display: none; */
   display: block;
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 0 5px;
    margin: 0 10px;;
}

.logoCenter{
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: -1;
}

.nav-menu {
     width: 100%;
     height: 80px;
    position: fixed;
    top: 0;
    padding: 0 15px;
    z-index: 99;
    background: #ffffff;
}

.nav-menu .navbar-brand {
    color: #fff;
    height: auto;
}

.nav-menu .navbar-brand .logo-demo img{
    width: auto;
    height: 80px !important;
    padding: 5px;
}

.navbar-nav{
    float: right !important;
}

/* .nav-menu .navbar-brand:hover {
    color: #fff;
    text-decoration: none;
} */

.nav-menu .navbar-brand img {
    float: left;
}

.nav-menu .navbar-brand span {
    margin: 15px 5px;
    font-weight: 500;
    display: block;
    float: right;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-menu .navbar-collapse {
    margin-right: 20px;
}

.nav-menu .navbar-toggler {
    /*    border: 1px solid #fff;*/
    padding: 0;
}

.nav-menu .navbar-toggler-icon {
    color: #6c757d;
    font-size: 22px;
    padding: 6px 0;
}

marquee{
    margin: 0 20px;
    color: #343a40;
    background: #00e5a1;
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 5px 10px;
}

.money_mobile a img{
    width: 35px;
    height: 35px;
}

.icon-alert.mobile{
    position: relative;
    /* display: none; */
}

a.icon-alert{
    font-size: 26px;
    color: #000;
}

.nav-menu .nav-item {
    margin: 0 5px;
    line-height: 20px;
}

.nav-menu .nav-item .nav-link {
    color: #343a40;
}

.nav-menu .nav-item .nav-link span {
    margin: 0 5px;
    line-height: 20px;
}

.nav-menu .nav-item .nav-link span.badge{
    padding: 5px 7px;
    background: #f80202;
    color: #fff;
    font-weight: normal;
    font-size: 12px;

}

.nav-menu .nav-item .nav-link span i,
.nav-menu .nav-item .nav-link i{
    padding: 5px;
    border: 1px solid #fff;
    border-radius: 50px;
    width: 28px;
    height: 28px;
    text-align: center;
}

.nav-menu .nav-item .dropdown-menu {
    background: #fff;
    /* background: #252525; */
}

.nav-menu .nav-item .dropdown-menu .badge{
    margin: 0;
    padding: 5px 7px;
}

.nav-menu .nav-item .icon-alert{
    display: block;
    margin-top: 10px;
}

.nav-menu .nav-link img{
    width: 30px;
    height: auto;
    margin: 2px;
}

.dropdown-item {
    /* color: #fff; */
    color: #28c8d2;
    font-size: 12px;
    font-weight: 300;
}

.dropdown-item:hover {
    background: #28c8d2;
    color: #252525;
}
/* 
.login.bg-graph-purple {
    background: #acc3c6bd;
    border-radius: 20px;
    border: 2px solid #fff;
} */

.login h5 {
    color: #fff;
    font-size: 22px;
    padding: 5px;
}

.login .form-group {
    margin: 20px 0;
}

.login .form-group.left{
    width: 50%;
    float: left;
    margin-top: 0;
    padding-left: 8px;
    font-size: 16px;
    color: #000;
}

.login .form-group.left.Remember input{
    transform: scale(1.5);
}

.login .form-group.right{
    width: 50%;
    float: right;
    margin-top: 0;
    text-align: right;
}

.login .form-group.right a{
    color: #fff;
    font-size: 16px;
}

.login label{
    font-size: 20px;
}

.login .form-control {
    height: 60px;
    background: #ececec;
    border-color: transparent;
    font-weight: 300;
    font-size: 18px;
    padding: 10px 10px;
    border: 1px solid #000;
    border-radius: 15px;
}

.login .footer-login{
    justify-content: space-between !important;
    display: flex;
    width: 100%;
}

.login .submit {
    width: 49%;
    display: block;
    text-align: center;
    color: #000;
    font-size:18px;
    padding: 10px;
    border-radius: 20px;
    border: none;
     border: 1px solid #000;
    background: linear-gradient(88deg, rgb(146, 146, 146) -9.55%, rgb(255, 255, 255) 52.09%, rgb(174, 174, 174) 114.72%) !important;
}

.login .btn-register{color: #343a40;
   width: 49%;
    color: #fff;
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #EAEAEA;
   
}


.login input::-webkit-input-placeholder {
    color: #363636;
}

.login input:-moz-placeholder {
    color: #363636;
}

.login .form-group-btn {
    width: 100%;
    display: inline-block;
    margin: 20px 0 0;
}

.login .form-group-btn a {
    color: #28c8d2;
    padding: 10px 30px;
    border: 1px solid #28c8d2;
    border-radius: 40px;
}

.login .form-group-btn .btn-forgot {
    position: absolute;
    right: 30px;
   border-radius: 16px;
    color: #000;
    border: 1px solid rgb(0, 0, 0);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.note-register{
    width: 100%;
    padding: 20px 10px;
    border-radius: 15px;
    display: flex;
    border: 1px solid rgb(255, 255, 255);
    background: #4d9df9;
}

.note-register .icon{
    width: 25%;
    max-width: 80px;
    height: 80px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
}

.note-register .icon img{
    width: 100%;
    height: auto;
}

.note-register .note-step{
    width: 75%;
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
}

.note-register .note-step h5{
    font-weight: 700;
    margin: 0;
}

.note-register .note-step p{
    margin: 0;
}

.text-gold {
    color: #fff;
}

.card{
    border-radius: 15px;
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
}

.card .card-header {
    color: #000;
    background-color:transparent;
    /* background: rgb(54, 194, 206);
    background: linear-gradient(180deg, rgba(54, 194, 206, 1) 0%, rgba(0, 159, 189, 1) 52%, rgba(54, 194, 206, 1) 100%); */
    border-radius: 15px 15px 0 0;
    padding: 10px;
    /*    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0000000%, rgba(85, 85, 85, 1) 50%, rgba(37, 37, 37, 1) 100%);*/
}

.card.yeekee-vip .card-header{
    color: #000;
    background-color:#33ff33;
    text-align: left;
        /* background: rgb(244,191,20);
        background: linear-gradient(180deg, rgba(244,191,20,1) 0%, rgba(255,212,44,1) 50%, rgba(244,191,20,1) 100%); */
}

 .card.yeekee-vip .title-type{
    color: #000 !important;
 }

.card.yeekee-vip .number{
        background-color: rgb(255, 255, 255);
    color: #000;
}

.card.yeekee-custom .card-header{
    color: #000 !important;
    background: #00ffff !important;
        border: none !important;
}

.card.yeekee-huay .card-header{
    color: #fff;
    background: #3b5898;
}
.card.yeekee-huay5 .card-header {
    color: #fff;
    background: #ff9100;
}

.card.yeekee-lto5 .card-header {
    color: #fff;
    background: #000675;
}

.card.yeekee-huay-vip .card-header{
    color: #fff;
    background: #b456f0;
}



.card .card-header p {
    font-size: 14px;
}
.card .card-header p.float-left{
    width: 40%;
}
.card .card-header span{
    margin-left: 0 !important;
    width: 60%;
    display: inline-block;
    /* text-align: right !important; */
}

.card .card-header span.show-round-yeekee-all{
    width: auto;
    float: none;
}

.card .card-header span.show-round-yeekee-vip-all{
    width: auto;
    float: none;
}

.card .card-header span.show-round-yeekee-fah-all{
    width: auto;
    float: none;
}
.card .card-header span.show-round-yeekee-fah-5-all {
    width: auto;
    float: none;
}
.card .card-header span.show-round-yeekee-lto-5-all {
    width: auto;
    float: none;
}

.card .card-header span.show-round-yeekee-fah-vip-all{
    width: auto;
    float: none;
}

.card .card-header span.show-round-yeekee-yeekee5-all{
    width: auto;
    float: none;
}

.background-card-body {
    background: none;
    border-radius: 15px;
}

/*
.background-card-body1 {
    background: #b7b7b7;
}
*/

.card-body {
    color: #363636;
    padding: 0 15px;
    font-size: 18px;
}

.card-body .border-secondary {
    border-color: #ececec !important;
}

.card-body .title-type {
    border-bottom: 1px solid #ececec;
}

.content-yeekee .card {
    border: 2px solid #eeeeee;
    font-size: 12px;
    font-weight: 300;
}

.close-time {
    position: absolute;
    top: 20px;
    right: 10px;
    color: #fff;
    margin: 0 auto;
    border-radius: 5px;
}

.yeekee-tab-navigation {
    width: 100%;
    margin-bottom: 25%;
}

.nav-navigation {
    /*    border-bottom: 1px solid #252525;*/
}

.nav-navigation li:nth-child(1) a {
    margin-right: 10px;
    margin-bottom: 5px;
}

.nav-navigation li:nth-child(2) a {
    margin-left: 10px;
    margin-bottom: 5px;
}

.nav-navigation li a {
    height: 50px;
    font-size: 20px;
    display: block;
    color: #343a40;
    /* background: #dce6f5; */
       border: 1px solid #fff;
    border-radius: 5px;
    background: #ADA996;
    background: -webkit-linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
    background: linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
}

.nav-navigation li a:hover {
    text-decoration: none;
    color: #252525;
}

.nav-navigation li a.active {
    color: #fff;
    /* background: #fff; */
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 0 !important;
    background: #4d9df9;
}

.nav-navigation li a.active.custom {
    color: #fff;
    background: #0000ff;
    border: 1px solid #0000ff;
    /*    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0000000%, rgba(85, 85, 85, 1) 50%, rgba(37, 37, 37, 1) 100%);*/
    border-radius: 5px;
}


.yeekee-tab-navigation .tab-content{
    width: 100%;
    /* background: #fff; */
    display: inline-block;
    padding: 5px 0;
    border-radius: 5px;
}

.content-setting-number,
.box__two-option {
    width: 100%;
    display: inline-block;
}

.content-setting-number button {
    width: 32.9%;
    height: 40px;
    margin: 2px;
    border: none;
    display: block;
    float: left;
    font-size: 16px;
    line-height: 46px;
    padding: 0;
    border-radius: 5px;
    text-align: center;
    color: #343a40;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.content-setting-number button span{
   width: 50%;
    height: 40px;
    float: right;
    border-radius: 0 5px 5px 0;
    color: #fff;
    display: inline-block;
    background: linear-gradient(356.26deg, rgb(157, 157, 157) 3.16%, rgb(217, 217, 217) 97.05%);
}

.content-setting-number button:nth-child(7),
.content-setting-number button:nth-child(8){
    width: 49.6%;
}

/* .content-setting-number button:first-child {
    margin-left: 0;
}

.content-setting-number button:last-child {
    margin-right: 0;
} */

.content-setting-number button.active {
    background: #4e9df9;
    color: #ffffff;
    outline: none;
}

.content-setting-number button.active span{
    background: linear-gradient(rgb(23, 88, 187) 0%, rgb(8, 61, 139) 46.35%, rgb(1, 30, 74) 100%);
}

.content-setting-number button.active.custom {
    background: #4e9df9;
    color: #fff;
    outline: none;
}

.content-two-option {
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.content-two-option button {
    width: 24%;
    padding: 10px;
    margin: 0 0.5% 1%;
    border: none;
    display: block;
    float: left;
    background: #f1fcfd;
    color: #343a40;
    border-radius: 5px;
    font-size: 16px;
    border: 1px solid #fff;
}

.playing-list-poy .card{
    background: transparent;
    border: none;
}

.main-class-yeekee-vip .content-two-option button:hover {
    background: rgb(244, 191, 20);
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%);
    color: #fff;
}
.main-class-yeekee-vip .content-two-option .active{
    background: rgb(244, 191, 20);
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%);
    color: #fff;
}

.main-class-custom .content-two-option .active {
    background: rgb(116, 223, 16);
    background: linear-gradient(180deg, rgba(116, 223, 16, 1) 0%, rgba(195, 233, 2, 1) 50%, rgba(116, 223, 16, 1) 100%);
    color: #fff;
}

.content-two-option button:hover {
    color: #fff;
    background: rgb(116, 223, 16);
    background: linear-gradient(180deg, rgba(116, 223, 16, 1) 0%, rgba(195, 233, 2, 1) 50%, rgba(116, 223, 16, 1) 100%);
}

.content-two-option button.custom:hover {
    color: #fff;
    background: #4e9df9;
}

.title-head.bg-graph-purple h4{
    /* background: rgb(54, 194, 206);
    background: linear-gradient(180deg, rgba(54, 194, 206, 1) 0%, rgba(0, 159, 189, 1) 52%, rgba(54, 194, 206, 1) 100%); */
}

.title-head.bg-graph-custom {
    background: #0000ff;
}
.title-head .deposit{
    /* background-color: #2ea64b;
    border-radius: 20px; */
}
.title-head .deposit h4 a{
    color: #fff;
    height: auto;
    float: none;
    margin: 0;
}
/* .title-head .withdraw{
    background-color: #2dc8ff;
    border-radius: 20px;
} */
.title-head .withdraw h4 a{ 
    color: #fff;
    height: auto;
    float: none;
    margin: 0;
}

.title-head{
    width: 100%;
    display: inline-block;
    margin: 10px 0;
}

.title-head.boxHeader{
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 10px 0 0;
}

/* .title-head .homeProfile{
    position: absolute;    
} */

.title-head .homeProfile a{
    text-decoration: none;
    position: absolute;
    top: 10px;
    left: 10px;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    background: linear-gradient(356deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%) !important;
}

.title-head .homeProfile a img{
    width: 40px;
}
.title-head .bg-play{
    width: 90%;
    float: left;
    margin: 0 15px;
    border-radius: 20px;
    color: #fff;
    background: #f12711;
    background: -webkit-linear-gradient(to bottom, #f5af19, #f12711);
    background: linear-gradient(to bottom, #f5af19, #f12711);
}


.title-head.bg-happyH{
    background: #26a5b5;
    border-radius: 20px;
}
.title-head.bg-happyH h4{
    color: #fff;
}

.title-head h4 {
    width: 100%;
    display: inline-block;
    float: left;
    font-size: 20px;
    line-height: 40px;
    color: #fff;
    border-radius: 8px;
    border: 1px solid rgb(255, 255, 255);
    background: #4d9df9;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.title-head h4.bg-yeekeeC{
    background: #99d91d;
}

.title-head h4.bg-yeekeeH-life{
    /* background: rgb(244, 191, 20);
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%); */
}

.title-head.bg-graph-custom h4 {
    width: 100%;
    display: inline-block;
    font-size: 18px;
    line-height: 30px;
    margin: 0px;
    color: #fff;
}

.title-head h4 a {
    height: 33px;
    /* float: left; */
    display: block;
    /* margin-top: -1px; 
    margin-right: 5px;*/
    color: #fff;
}

.title-head h4 a span {
    display: inline-block;
    color: #fff;
    padding: 5px;
    font-size: 22px;
}

.box-show-number-bet-two {
    width: 100%;
    display: inline-block;
}

.box-show-number-bet-two .nav-tabs{
    border:none;
}

.box-show-number .bg-gary,
.box-show-number-bet-two .bg-gary {
    width: 100%;
    display: inline-block;
    background: transparent;
}

.box-show-number h3,
.box-show-number-bet-two h3 {
    text-align: center;
    color: #000000;
    padding: 0px 0px 8px 0px;
    font-size: 20px;
}

.box-show-number .lists,
.box-show-number-bet-two .lists {
    height: 90px;
    width: 100%;
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
}

.box-show-number .lists div,
.box-show-number-bet-two .lists div {
    height: 70px;
    width: auto;
    display: inline-block;
    position: relative;
}

.box-show-number .lists div .animate__number,
.box-show-number-bet-two .lists div .animate__number {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 180px;
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.box-show-number .lists div .animate__number span,
.box-show-number-bet-two .lists div .animate__number span {
    width: 60px;
    height: 60px;
    float: left;
    color: #3b5898;
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 60px;
}

.box-show-number .lists div .animate__number span .number-two,
.box-show-number-bet-two .lists div .animate__number span .number-two {
    padding: 0px 0px 0px 60px;
}

.box-show-number .lists div .animate__number span .animate__number.active,
.box-show-number-bet-two .lists div .animate__number span .animate__number.active {
    -webkit-animation: numbers-to-cart 0.5s;
    -moz-animation: numbers-to-cart 0.5s;
    -o-animation: numbers-to-cart 0.5s;
    animation: numbers-to-cart 0.5s;
}


.box-show-number .lists .number,
.box-show-number-bet-two .lists .number {
    float: left;
    display: block;
    width: 60px;
    height: 60px;
    margin: 15px 5px;
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    line-height: 70px;
    color: #333333;
    border-radius: 5px;
    position: relative;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.box-show-number .lists .number span,
.box-show-number-bet-two .lists .number span {
    width: 2px;
    height: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: flash 1.5s infinite;
    -moz-animation: flash 1.5s infinite;
    -o-animation: flash 1.5s infinite;
    animation: flash 1.5s infinite;
}

.all-item-number {
    margin: 20px 0;
}

.all-item-number .bg-box {
    margin: 5px 0;
}

.all-item-number .bg-box .topic_head{
    background: #4d9df9;
    border-color: #fff;
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 10px 0;
}

.all-item-number .detail-number h5{
    font-size: 18px;
}

.all-item-number .detail-number ul{
    display: inline-block;
    padding: 0;
    margin: 0;
}


.all-item-number .detail-number ul li{
    padding: 5px 10px;
    font-size: 16px;
    background: #4d9df9;
    border:1px solid #fff;
    color: #fff;
    float: left;
    margin: 0 5px;
    border-radius: 5px;
}


.keyboard-number .group button.save-number{
    width: 100%;
    background: #4d9df9;
    border-color: #fff;
    color: #fff;
}


.keyboard-number {
    width: 100%;
    display: inline-block;
    margin: 10px auto;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px 0px;
}

.keyboard-number .group {
    width: 100%;
}

.keyboard-number .group button {
    cursor: pointer;
    display: block;
    float: left;
    width: calc(33.33% - 5px + 0.8px);
    margin: 0px 4px 4px 0px;
    height: 50px;
    font-weight: normal;
    line-height: 36px;
    text-align: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    border: solid 1px #6c757d;
    color: #343a40;
    font-size: 24px;
    font-weight: 700;
    border-radius: 4px;
}

.keyboard-number .group button.active {
    color: #343a40 !important;
    background: #00e5a1;
}

.keyboard-number .group button:active {
    color: #343a40 !important;
    background: #00e5a1;
}

.keyboard-number .group button.delete {
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.14);
    border: 0 none;
    margin: 0px 3.5px 4px 0px;
    position: relative;
    font-size: 1rem;
    padding: 2px 0px 0px 0px;
    font-weight: 500;
    border-radius: 5px;
    background: #FF416C;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #FF4B2B, #FF416C);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #FF4B2B, #FF416C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.keyboard-number .group button.delete i {
    margin-right: 5px;
}

.keyboard-number .group button.enter {
    border: 0 none;
    /* margin: 0px 0px 4px 3.5px; */
    position: relative;
    font-size: 1rem;
    padding: 2px 0px 0px 0px;
    /* color: #fff;
    background-color:#ffc000;
    border-color: #ffc000; */
    font-weight: 500;
    border-radius: 5px;
}

.keyboard-number .group button.cancel {
    border: 0 none;
    /* margin: 0px 0px 4px 3.5px; */
    position: relative;
    font-size: 1rem;
    padding: 2px 0px 0px 0px;
    color: #fff;
    background: linear-gradient(rgb(23, 88, 187) 0%, rgb(8, 61, 139) 46.35%, rgb(1, 30, 74) 100%);
    font-weight: 500;
    border-radius: 5px;
}
/* 
.keyboard-number .group:last-child button {
    width: calc(75% - 5px + 0.8px);
} */

.container-info {
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
    color: #343a40;
    border-radius: 8px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
}

.container-info h4 {
    color: #343a40;
    border-bottom: 1px solid #fff;
}

.status-open {
    1px solid #28c8d2;
}
.status-open-custom {
    border: 1px solid #fff;
}

.status-close {
    background: #ebebeb;
}

.group-button a {
    width: 100%;
    height: 140px;
    float: left;
    text-decoration: none;
    display: block;
    padding: 0;
    color: #252525;
    position: relative;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
}


.group-button a.status-close .close-time {
    width: 100%;
    text-align: center;
    background: #898989;
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size:18px;
    border-radius: 10px 10px 0 0;
    position: static;
}

.group-button a .status-countdown {
    width: 100%;
    text-align: center;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px;
    display: inline-block;
    color: #fff;
    font-weight: 300;
    margin: 0;
    font-size: 18px;
    background: #006600;
}


.group-button a .status-countdown .logo{
    width: 50px;
    height: 50px;
    float: left;
    border-radius: 40px;
    padding: 8px 0;
    margin: 0 5px;
    line-height: 0;
    text-align: center;
    background: linear-gradient(90deg, rgb(194, 151, 67) -0.08%, rgb(241, 215, 130) 22.71%, rgb(255, 239, 192) 51.19%, rgb(232, 202, 117) 77.13%, rgb(191, 146, 62) 100.08%);

}

.group-button a .status-countdown-custom {
    width: 100%;
    text-align: center;
    background:#00ffff;
    display: inline-block;
    color: #000;
    font-weight: 300;
    margin: 0;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 10px 10px 0 0;
}

.group-button a .topic-head {
   display: inline-block;
    margin: 0 auto;
    padding: 5px 0 0;
}

.group-button a .topic-head .logo{
    width: 40px;
    height: 40px;
    float: left;
}

.group-button a .topic-head .logo img{
    width: 100%;
    height: auto !important;
}

.group-button a .info {
    font-size: 16px;
    line-height: 40px;
    font-weight: 500;
    margin: 0 5px;
}

.group-button a .time {
    display: block;
    text-align: center;
    font-size: 14px;
    margin: 10px 0;.group-button a .status-countdown .info
}

.info-register {
    border-radius: 15px;
    border: 1px solid rgb(255, 255, 255);
    background: #4d9df9;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
    padding: 20px 15px 10px;
    margin: 10px 0;
}

.info-register h3 {
    color: red;
}

.info-register ul li{
        font-size: 14px;
    font-weight: 300;
    margin-bottom: 10px;
    color: #fff;
}
.form-register {
    background: #707070;
}

.form-register form label {
    color: #ffcc27;
    font-weight: 300;
}

.form-register form .form-control {
    background: #252525;
    border-color: #252525;
    color: #fff;
    font-weight: 300;
}

.form-register form .custom-select {
    margin: 0 4px;
    background: #252525;
    border-color: #252525;
    color: #fff;
}

.yeekee-number {
        width: 100%;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    padding: 20px 10px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.yeekee-number .number {
    font-size: 30px;
    margin: 15px 0;
}

.yeekee-list {
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.yeekee-list .card-body {
    color: #252525;
    padding: 15px;
    font-size: 14px;
}

.yeekee-list .card {
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    border: solid 1px #cccccc;
}

.yeekee-list .card .card-body p {
    margin: 0px 0px 5px 0px;
}

.yeekee-list .card .card-body p.number {
    color: #3b5898;
    font-size: 20px;
    line-height: 20px;
    font-weight: 300;
}

.yeekee-list .card .card-body p.title {
    color: rgba(26, 26, 26, 0.6);
}




.select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select select {
    display: inline-block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    cursor: pointer;
    outline: 0;
    border: 1px solid #252525;
    border-radius: 0;
    background: #252525;
    color: #fff;
    border-radius: .25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select select::-ms-expand {
    display: none;
}

.select select:hover,
.select select:focus {
    color: #fff;
    background: #252525;
}

.select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.select__arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 0;
    height: 0;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #7b7b7b transparent transparent transparent;
}

.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
    border-top-color: #ccc;
}

.select select:disabled ~ .select__arrow {
    border-top-color: #ccc;
}

.info-Terms .border-scroll {
    border: 1px solid #252525;
    background: #b7b7b7;
    height: 120px;
    padding: 20px;
    font-size: 12px;
    font-weight: 300;
    overflow-y: scroll;
}

.send-register {
    text-align: center;
    margin-bottom: 50px;
}

.send-register a {
    padding: 10px;
    display: inline-block;
    width: 120px;
    margin: 0 5px;
}

.send-register a:hover {
    text-decoration: none;
}

.send-register a.cancel {
    background: #252525;
    color: #fff;
}

.send-register a.subffcc27mit {
    background: #ffcc27;
    color: #252525;
}

.banner-top {
    margin: 20px 0;
    border-radius: 15px;
    overflow: hidden;
}
.banner-top .carousel-indicators .active {
    opacity: 1;
}

.banner-top .carousel-indicators li {
    background-color: rgb(233, 233, 233);
    opacity: 0.5;
}

.box-home.bg-graph-purple{
    padding: 10px 10px 0;
    margin:5px 0;
   border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.credit h2 {
    font-size: 26px;
    color: #00c42b;
    text-align: right;
    margin: 10px 0;
}

.credit h2 span {
    font-size: 16px;
    margin-right: 10px;
    font-weight: 300;
}

.credit h2 a{
    text-transform: uppercase;
    font-size: 18px;
    font-weight: normal;
    color: #343a40;
    letter-spacing: 1px;
}

.credit .bg-graph-purple {
    padding: 5px 20px;
    margin-bottom: 10px;
   border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.credit .bg-graph-purple .logo-demo{
    display: block;
    padding: 5px;
}

.credit .btn-primary {
    display: block;
    font-size: 20px;
    line-height: 36px;
    color: #fff;
    border: 2px solid#fff;
    border-radius: 40px;
    background: linear-gradient(rgb(170, 235, 87) 0%, rgb(19, 80, 47) 100%) !important;
}

.credit .btn-danger{
    font-size: 26px;
    border-color: #fb8a2c;
    border-radius: 40px;
    background: #f12711;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.credit .btn-success {
     display: block;
    font-size: 20px;
    line-height: 36px;
    color: #fff;
    border: 2px solid#fff;
    border-radius: 40px;
    background: linear-gradient(rgb(255, 201, 9) 0%, rgb(229, 45, 45) 50%, rgb(255, 201, 9) 100%) !important;
}

.cart-item-lists {
    width: 100%;
    border: 1px solid #fff;
    position: fixed;
    bottom: 0;
    padding: 10px;
    color: #333333;
    background: rgba(255, 255, 255, 0.85);
}

.cart-item-lists h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

.cart-item-lists .number {
    width: 90%;
    font-size: 16px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box__button-show-lists {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.box__button-show-lists .show-lists {
    display: block;
    padding: 0px 20px;
    border: 0 none;
    width: auto;
    height: 40px;
    line-height: 40px;
    outline: none;
    text-decoration: none;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-weight: normal;
    text-align: center;
    color: #fff;
    cursor: pointer;
    z-index: 5;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #4e9df9;
    border: solid 1px #4e9df9;
}

.box__button-number-sets {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.box__button-number-sets .number-sets {
    display: block;
    padding: 0px 20px;
    border: 0 none;
    width: auto;
    height: 40px;
    line-height: 40px;
    outline: none;
    text-decoration: none;
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    font-weight: normal;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    z-index: 5;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: rgb(77, 157, 249);
    border: solid 1px rgb(77, 157, 249);
}
.box__button-number-sets .number-sets i{
    font-size: 20px;
    margin-right: 5px;
}

.popupCart .content {
    width: 100%;
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(42, 147, 138, 1) 100%);
    border-radius: 4px;
    overflow: hidden;
}

.popupCart .content header {
    padding: 13px 7px 10px;
    height: 48px;
    width: 100%;
    background-color: #EEFCFE;
    position: relative;
}

.popupCart .content header h1 {
    font-size: 20px;
    text-align: center;
    color: #343a40;
    line-height: 20px;
    width: 100%;
    margin: 0px;
}

.popupCart .content .navigation-tab {
    width: 100%;
    height: 40px;
}

.popupCart .content .navigation-tab ul {
    width: 100%;
    height: 40px;
    list-style: none;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #979797;
}

.popupCart .content .navigation-tab ul li {
    float: left;
    width: 50%;
    height: 40px;
    font-weight: normal;
    font-style: normal;
    line-height: 40px;
    color: #343a40;
    display: block;
    text-align: center;
    cursor: pointer;
    background: #ADA996;
    background: -webkit-linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
    background: linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
}

.popupCart .content .navigation-tab ul li a {
    color: #252525;
}

.popupCart .content .navigation-tab ul li a.active,
.popupCart .content .navigation-tab ul li a:hover {
    display: block;
    color: #fff;
    border-bottom: 2px solid #fff;
    text-decoration: none;
    background: #ebebeb;
    ackground: #1A2980;
    background: -webkit-linear-gradient(to bottom, #26D0CE, #1A2980);
    background: linear-gradient(to bottom, #26D0CE, #1A2980);
}


.popupCart .content .box__button {
    padding: 20px 6px;
    height: 148px;
}

.popupCart .content .box__button .btn-gold {
    cursor: pointer;
    text-align: center;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    border: solid 1px #fff;
    height: 40px;
    line-height: 40px;
    padding: 0px;
    background: #00c6ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #0072ff, #00c6ff);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.popupCart .content .lists table {
    width: 100%;
    color: #343a40;
    background: #fff;
}
.popupCart .content .lists table thead{
        border-radius: 14px;
    color: #fff;
    border: 1px solid rgb(255, 255, 255);
    background: rgb(77, 157, 249);background: #00e5a1;
    border-radius: 14px;
    color: #fff;
}
.popupCart .content .lists table thead tr th {
    padding: 20px 10px;
    letter-spacing: normal;
    font-size: 18px;
    line-height: 16px;
}

.popupCart .content .lists table thead tr {
    background: none;
}

.popupCart .content .lists table tr {
    text-align: left;
}

.popupCart .content .lists table tbody tr {
    font-weight: 300;
    font-style: normal;
    line-height: 16px;
    border-top: 1px solid #ebebeb;
}

.popupCart .content .lists table tbody tr td {
    padding: 15px 10px;
}

.popupCart .content .lists .btn-black {
    text-align: center;
    color: #fff;
    border-radius: 4px;
    border: solid 1px #fff;
    background: #11998e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.next {
    border-top: 1px solid #ebebeb;
    text-align: center;
    margin: 30px auto;
    padding-top: 20px;
}

.next .pagination > li > a,
.next .pagination > li > span {
    color: #898989;
    border: none;
}

.next .pagination > .active > a,
.next .pagination > .active > a:focus,
.next .pagination > .active > a:hover,
.next .pagination > .active > span,
.next .pagination > .active > span:focus,
.next .pagination > .active > span:hover {
    background-color: transparent;
    border-color: none;
    color: #ffc000;
    text-decoration: underline;
}

.popupCart.fancybox-content {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    vertical-align: top !important;
}

.popupCart.fancybox-content .text-header {
    background: #ffcc27;
    color: #252525;
    padding: 15px;
    margin: 0;
    font-size: 22px;
}

.popupCart h2.text-header{
    font-size: 18px !important;
}

.popupCart .lists {
    padding: 10px 5px 45px;
    border-bottom: solid 2px #fff;
    position: relative;
    border: 1px solid rgb(224 224 224);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.popupCart .lists .btn-danger {
    background: #ff3399 !important;
    color: #fff !important;
    border-color: #ff3399 !important;
}

.popupCart .lists h2 {
    width: 100%;
    height: 40px;
    margin: 0px 0px 12px 0px;
    padding: 0px;
    font-size: 18px;
    line-height: 40px;
}

.popupCart .lists .ranking-number {
    width: 38px;
    font-size: 14px;
    border: 1px solid #ced4da !important;
    padding: 5px !important;
}

.popupCart .lists .number {
    width: 55px;
    font-size: 16px;
    line-height: 28px;
}

.popupCart .lists .item {
    width: 100%;
    position: relative;
}

.popupCart .lists .item .form-control:focus {
    border-color: #ced4da;
    box-shadow: none;
}

.popupCart .lists .item.number-is-duplicate.number-is-duplicate-active input {
    border-color: #ffc107;
}

.popupCart .lists .item.number-is-duplicate.number-is-duplicate-active .number {
    background: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.popupCart .lists .item.number-is-duplicate.number-is-duplicate-active .input-group-append-price {
    background: #ffc107;
    color: #000;
}

.popupCart .lists .item.number-is-duplicate.number-is-duplicate-active .input-group-append-price .bg-black {
    background: none;
    color: #000;
}


.popupCart .lists .item.warning input {
    border-color: #dc3545 !important;
}

.popupCart .lists .item.warning .number {
    background: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
}

.arrow-up {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    border: solid 1px #cccccc;
    z-index: 90000;
    cursor: pointer;
    float: right;
    text-align: center;
}

.arrow-up i {
    font-size: 18px;
    line-height: 38px;
    color: #3b5898;
}


.arrow-down {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    border: solid 1px #cccccc;
    z-index: 90000;
    cursor: pointer;
    position: absolute;
    text-align: center;
    right: 12px;
    top: 10px;
}

.arrow-down i {
    font-size: 18px;
    line-height: 38px;
    color: #3b5898;
}

.popupCart .setting {
    margin: 10px 5px;
    padding: 12px 5px 0px;
    min-height: 155px;
    border: 1px solid rgb(225 225 225);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
}


.popupCart .setting h3 {
    width: 100%;
    margin: 15px 0;
    font-size: 14px;
}

.popupCart .setting .form-price .input-group {
    width: 100%;
    margin: 0px 6px 0px 0px;
}


.popupCart .setting .form-price .box__chip-lists {
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 10px;
    border: 1px solid rgb(225 225 225);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
}


.popupCart .setting .form-price .price {
    width: 75px;
    text-align: center;
    margin: 0px 3px 5px 3px;
    letter-spacing: normal;
    border-radius: 5px;
    background-color: white;
    padding: 2px 15px;
    display: block;
    float: left;
    line-height: 35px;
    cursor: pointer;
    background: hsla(0,0%,100%,.45);
    color: #000;
    outline: none !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 17%);
}

.popupCart .setting .form-price .price.active {
    animation-duration: 0.5s;
    animation-name: bounceIn;
}

.popupCart .setting .text-gold {
    color: #3b5898;
}


.popupCart .setting .bg-black {
    background: white;
}


.popupCart .setting .bg-gold {
    background-color: #3b5898;
}


.popupCart .setting .text-black {
    color: #000000;
}


.popupCart .setting .border-gold {
    border: 1px solid #3b5898;
}


.popupCart .box-confirm {
    margin: 10px 5px;
    padding: 10px 20px;
    border: 1px solid rgb(225 225 225);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
}

.popupCart .box-confirm h4 {
    line-height: 23px;
    padding: 20px;
    max-width: 48%;
    display: inline-block;
    font-size: 16px;
    border-radius: 10px;
    margin: 5px 1% 20px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;

    span {
        font-size: 16px;
        color: #3b5898;
    }
}

.popupCart .box-confirm h4.text-danger {
    text-align: right;
}

.popupCart .box-confirm .btn-cancel {
    text-align: center;
    color: #ffffff;
    background: none;
    cursor: pointer;
    line-height: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: #990000;
    border: 1px solid #990000;
}

.popupCart .box-confirm .btn-confirm {
    text-align: center;
    color: #fff;
    border: 1px solid #27A5B9;
    cursor: pointer;
    line-height: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: #27A5B9;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
}

.navigation-transaction {
    width: 100%;
    display: inline-block;
}
.navigation-transaction ul {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.navigation-transaction ul li {
    width: 49%;
    text-align: center;
    margin-bottom: 10px;
}
.navigation-transaction.ATM .dropdown-menu a {
    border-radius: 0;
    background: #fff;
    color: #343a40;
    font-weight: 500;
}

.navigation-transaction.ATM .dropdown-menu a.active{
    background: #00e5a1;
    color: #fff;
}

.navigation-transaction ul li a {
    font-size: 14px;
    color: #343a40;
    padding: 15px 5px;
    border-radius: 16px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.navigation-transaction ul li a.active {
    color: #fff;
    background: #4d9df9;
}

.navigation-transaction ul li .dropdown a {
    color: #343a40;
    display: block;
    padding: 15px 5px;
    background: #ADA996;
    background: -webkit-linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
    background: linear-gradient(to bottom, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
}

.navigation-transaction ul li .dropdown-menu a {
    line-height: 24px !important;
    background: #fff;
    border-radius: 0;
    padding: 2px 5px !important;
}

.button-deposit a {
    font-size: 14px;
}

.totol-deposit{
    border: 1px solid rgb(255, 255, 255);
    background: rgb(77, 157, 249);
    border-radius: 32px;
    padding: 20px;
    margin: 10px 0;
}

.totol-deposit h2{
    color: #fee8a6;
    font-size: 36px;
}

.totol-deposit h2 span{
    font-size: 14px;
}

.transfer-bank {
    margin: 0 5px 30px;
    padding: 15px;
    border-radius: 4px;
}

.transfer-bank ul.thumbnails.image_picker_selector{
    width: 100%;
    overflow: hidden;
}

.transfer-bank ul.thumbnails.image_picker_selector li{
    width: 100%;
    margin: 0 !important;
}

.transfer-bank ul.thumbnails.image_picker_selector li .thumbnail img{
    border-radius: 50px;
    float: left;
    margin: 10px 15px;
}

.transfer-bank ul.thumbnails.image_picker_selector li .thumbnail{
    width: 100%;
    display: inline-block;
    border-radius: 15px;
    background: #fff;
}

.transfer-bank ul.thumbnails.image_picker_selector li .thumbnail.selected {
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 10px;
}

.transfer-bank ul.thumbnails.image_picker_selector li .thumbnail p{
    margin: 12px;
    font-size: 16px;
}

.transfer-bank #detail .input-group-append {
    margin-left: 10px;
}

.transfer-bank #detail .input-group .input-group-append #button-addon2{
    width: 100%;
}

.transfer-bank #detail .input-group-append button{
    width: 48%;
    font-size: 18px;
    padding: 14px 5px;
    border: 1px solid rgb(255, 255, 255) !important;
    background: rgb(78 157 249) !important;
    border-radius: 10px;
}

.transfer-bank #detail .input-group-append button.btn-back{
    border: 1px solid rgb(255, 255, 255) !important;
    background: transparent !important;
}

.transfer-bank .form-control {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #000;
}

.transfer-bank .price-rate{
    width: 100%;
    display: inline-block;
    padding: 10px 0;
}

.transfer-bank .price-rate .col-nav {
    width: calc((100% / 3) - 10px);
    float: left;
    margin: 5px;
    text-align: center;
}

.transfer-bank .price-rate .col-nav button {
    width: 100%;
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 5px;
    border-radius: 15px;
    border: 1px solid rgb(255, 255, 255);
    background: #4d9df9;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;

}

.transfer-bank ul {
    list-style: none;
    margin: 0 0 15px;
    padding: 0;
}

.transfer-bank p,
.transfer-bank li {
    color: #1a1a1a;
    margin: 0;
    font-size: 16px;
}

.transfer-bank p.note{
    font-size: 12px;
}

.transfer-bank .info {
    color: #1a1a1a;
    font-size: 20px;
    margin: 0 0 13px;
}

.transfer-bank .info.wd{
    font-size: 12px;
    text-align: center;
    padding: 10px;
    color: #007bff;
    border-radius: 20px;
    background: #dde8fa;
}

.transfer-bank .infoRed{
    font-size: 12px;
    text-align: center;
    color: #ff0000;
    margin-bottom: 10px;
}

.transfer-bank .amount{
   padding: 15px;
    border-radius: 20px;
    margin-top: 10px;
    border: 1px solid rgb(255, 255, 255);
    background: rgb(77, 157, 249);
}

.transfer-bank .amount p{
    color: #fff;
}

.transfer-bank .amount h3{
    color: #feeaa7;
    font-size: 36px;
    font-weight: 700;
    margin: 5px 0;
}

.transfer-bank .Turnover{
    text-align: center;
    margin-top:10px ;
}

.transfer-bank .Turnover p{
    color: #de7f7f;
}

.noti-transfer .info{
    font-size: 20px;
    padding: 5px 0;
}

.noti-transfer label{
    font-size: 14px;
    margin: 10px 0;
}

.noti-transfer .form-control {
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #000;
    background-color: #fff;
}

.noti-transfer .gj-datepicker-bootstrap [role=right-icon] button{
    width: 50px;
    background-color: #fff;
    border: 1px solid #000;
    z-index: 0;
}

.noti-transfer .gj-datepicker-bootstrap [role=right-icon] button .gj-icon{
    font-size: 28px;
    top: 15px;
}

.noti-transfer .gj-timepicker-md [role=right-icon]{
    font-size: 30px;
    border-left: 1px solid #ccc;
    padding: 10px;
}

.noti-transfer .inputUpload {
    margin: 15px 0;
}

.noti-transfer .inputUpload .form-control-file {
    position: relative;
    width: 100%;
    height: 50px;
    outline: none;
    visibility: hidden;
    cursor: pointer;
    border-radius: 10px;
}
.noti-transfer .inputUpload .form-control-file:before {
    content: attr(data-title);
    position: absolute;
    left: 0;
    width: 100%;
    height: 50px;
    font-size: 20px;
    padding: 10px 20px;
    opacity: 1;
    visibility: visible;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: visible;
    color: #fff;
    border-radius: 10px;
    border: 1px solid rgb(255, 255, 255);
    background: #4d9df9;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
.noti-transfer .inputUpload .form-control-file:hover:before {
    border-style: solid;
    border-style: solid;
    font-size: 14px;
    line-height: 30px;
}


.noti-transfer .button-noti button{
    width: 48%;
    font-size: 18px;
    padding: 14px 5px;
    border: 1px solid rgb(255, 255, 255) !important;
    background: rgb(78 157 249) !important;
    border-radius: 10px;
}

.noti-transfer .button-noti button.btn-back{
    border: 1px solid rgb(255, 255, 255) !important;
    background: transparent !important;
}


.amountAll{
    width: 100%;
    border: 1px solid #b6c7e2;
    font-size: 16px;
    padding: 8px;
    margin: 10px 0;
    border-radius: 20px;
    color: #3b5898;fv
    background: #dde8fa;
}

.transfer-bank .list_bank {
    margin: 0 -5px 13px -6px;
}

.transfer-bank .list_bank .bankName {
    position: relative;
    padding: 8px;
    border-radius: 4px;
}

.transfer-bank .list_bank .bankName input {
    position: absolute;
    z-index: 0;
    left: 70px;
    top: 25%;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    opacity: 0.1;
}

.transfer-bank .list_bank .info {
    position: relative;
    display: block;
    cursor: pointer;
    z-index: 1;
}

.transfer-bank .list_bank .bank-color {
    width: 100%;
    height: 100%;
}

.transfer-bank .list_bank .info div {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    margin: 0px !important;
    color: #1a1a1a;
    min-height: 125px;
}

.transfer-bank .list_bank .info .bank-name {
    position: absolute;
    bottom: 10px;
    left: 0px;
    text-align: center;
    width: 100%;
    color: #fff;
}

.transfer-bank .list_bank .info img {
    display: block;
    width: 75px !important;
    opacity: 0.7;
    left: 50%;
    top: 15px;
    position: absolute;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.transfer-bank .list_bank .active {
    border: solid 3px #3b5898;
    padding: 6px;
}

.transfer-bank .list_bank .active .info img {
    opacity: 1;
}

.transfer-bank .list_bank .info .title {
    font-size: 12px;
    color: rgba(26, 26, 26, 0.6);
}



.transfer-bank .submit {
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
}

.info-user {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 10px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    --border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
}

.info-user .imgBank{
    width: 25%;
    float: left;
}
.info-user .imgBank img{
    width: 100%;
    height: auto;
}
.info-user .detail{
    width: 75%;
    float: right;
    padding: 0 15px;
}

.info-user .detail h3 {
    font-size: 14px;
    line-height: 18px;
    color: #898989;
    margin-bottom: 5px;
}

.withdraw-button {
    margin: 10px 0;
}

.withdraw-button button {
    width: 48%;
    font-size: 18px;
    padding: 14px 5px;
    border: 1px solid rgb(255, 255, 255) !important;
    background: rgb(217, 217, 217) !important;
    border-radius: 10px;
}

.withdraw-button button.btn-back{
    border: 1px solid rgb(255, 255, 255) !important;
    background: transparent !important;
}

.content__lists .box__rusult .card-header {
    padding: 4px;
}

.content__lists .box__rusult.card-body {
    padding: 4px;
}

.summary-content p {
    color: #252525;
    padding: 5px;
}

.summary-content .text-centertext-muted {
    color: #252525;
}

.summary-content p.summary-total {
    font-size: 20px;
}

#card-result-yeekee{
    /* padding-bottom: 20px; */
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

#card-result-yeekee .title-type.yeekee{
    color: #fff !important;
}

#card-result-yeekee .title-type{
    color: #000 !important;
    /* border:1px solid #28c8d2 !important; */
}
#card-result-yeekee .card-header, #card-result-yeekee .card-body, #card-result-yeekee .card-body div {
    /* border: 1px solid rgb(230 230 230); */
}
#card-result-yeekee .card-header .btn-warning{
    color: #ffffff;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: #006600;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee .title-type.yeekee{
    color: #000;
}

#card-result-yeekee-vip button{
        color: #000;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: #33ff33;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
#card-result-yeekee-vip, #card-result-yeekee-vip .btn-previous-yeekee-vip, #card-result-yeekee-vip .btn-next-yeekee-vip{
    /* background-color: #fff; */
}

#card-result-yeekee-vip .number{
    background: #fff;
    color: #000;
}
 
#card-result-yeekee-vip .card-header, #card-result-yeekee-vip .card-body, #card-result-yeekee-vip .card-body div {
    border-color: transparent !important;
}

#card-result-yeekee-vip .card-header{
    color: #000;
    background-color: #33ff33 !important;
    border-radius: 15px 15px 0 0;
    padding: 10px;
}

#card-result-yeekee-fah .titleH{
    color:#3b5898 !important;
}
#card-result-yeekee-fah button{
    background-color: #3b5898 !important;
    color: #fff;
    border: none;
}
#card-result-yeekee-fah, #card-result-yeekee-fah .btn-previous-yeekee-fah, #card-result-yeekee-fah .btn-next-yeekee-fah{
    background-color: #fff;
    border-color: #3b5898 !important;
    color: #fff;
}
#card-result-yeekee-fah .card-header .btn-danger {
    border:1px solid #3b5898 !important;
}
#card-result-yeekee-fah .card-header, #card-result-yeekee-fah .card-body, #card-result-yeekee-fah .card-body div {
    border-color: #3b5898 !important;
}


#card-result-yeekee-fah-vip .titleH{
    color:#b456f0 !important;
}
#card-result-yeekee-fah-vip button{
    background-color: #b456f0 !important;
    color: #fff;
    border: none;
}
#card-result-yeekee-fah-vip, #card-result-yeekee-fah-vip .btn-previous-yeekee-fah-vip, #card-result-yeekee-fah-vip .btn-next-yeekee-fah-vip{
    background-color: #fff;
    border-color: #b456f0 !important;
    color: #fff;
}
#card-result-yeekee-fah-vip .card-header .btn-danger {
    border:1px solid #b456f0 !important;
}
#card-result-yeekee-fah-vip .card-header, #card-result-yeekee-fah-vip .card-body, #card-result-yeekee-fah-vip .card-body div {
    border-color: #b456f0 !important;
}

#card-result-yeekee-fah-5 .titleH {
    color: #ff9100 !important;
}

#card-result-yeekee-fah-5 button {
    background-color: #ff9100 !important;
    color: #fff;
    border: none;
}

#card-result-yeekee-fah-5,
#card-result-yeekee-fah-5 .btn-previous-yeekee-fah-5,
#card-result-yeekee-fah-5 .btn-next-yeekee-fah-5 {
    background-color: #fff;
    border-color: #ff9100 !important;
    color: #fff;
}

#card-result-yeekee-fah-5 .card-header .btn-danger {
    border: 1px solid #ff9100 !important;
}

#card-result-yeekee-fah-5 .card-header,
#card-result-yeekee-fah-5 .card-body,
#card-result-yeekee-fah-5 .card-body div {
    border-color: #ff9100 !important;
}

#card-result-yeekee-lto-5 .titleH {
    color: #000675 !important;
}

#card-result-yeekee-lto-5 button {
    background-color: #000675 !important;
    color: #fff;
    border: none;
}

#card-result-yeekee-lto-5,
#card-result-yeekee-lto-5 .btn-previous-yeekee-lto-5,
#card-result-yeekee-lto-5 .btn-next-yeekee-lto-5 {
    background-color: #fff;
    border-color: #000675 !important;
    color: #fff;
}

#card-result-yeekee-lto-5 .card-header .btn-danger {
    border: 1px solid #000675 !important;
}

#card-result-yeekee-lto-5 .card-header,
#card-result-yeekee-lto-5 .card-body,
#card-result-yeekee-lto-5 .card-body div {
    border-color: #000675 !important;
}

#card-result-yeekee-custom-yeekee10.card .card-header{
    background: #6600ff !important;
}

#card-result-yeekee-custom-yeekee10 button{
    background: #6600ff !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee10 .titleH{
        color: #fff !important;
    padding: 2px !important;
}

#card-result-yeekee-custom-yeekee10 .titleH span{
    width: auto;
    float: none;
}


#card-result-yeekee-custom-yeekee5vip.card .card-header{
    background: #cc99ff !important;
}

#card-result-yeekee-custom-yeekee5vip button{
    background: #cc99ff !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee5vip .titleH{
        color: #fff !important;
    padding: 2px !important;
}
#card-result-yeekee-custom-yeekee5vip .titleH span{
    width: auto;
    float: none;
}
#list-view-yeekee-yeekee5vip .card.yeekee-custom .card-header{
    color: #fff !important;
    background: #cc99ff !important;
}

#card-result-yeekee-custom-yeekee10vip.card .card-header{
    background: #006699 !important;
}

#card-result-yeekee-custom-yeekee10vip button{
    background: #006699 !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee10vip .titleH{
        color: #fff !important;
    padding: 2px !important;
}
#card-result-yeekee-custom-yeekee10vip .titleH span{
    width: auto;
    float: none;
}
#list-view-yeekee-yeekee10vip .card.yeekee-custom .card-header{
    color: #fff !important;
    background: #006699 !important;
}

#card-result-yeekee-custom-yeekee3.card .card-header{
    background: #daa520 !important;
}

#card-result-yeekee-custom-yeekee3 button{
    background: #daa520 !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee3 .titleH{
        color: #fff !important;
    padding: 2px !important;
}
#card-result-yeekee-custom-yeekee3 .titleH span{
    width: auto;
    float: none;
}
#list-view-yeekee-yeekee3 .card.yeekee-custom .card-header{
    color: #fff !important;
    background: #daa520 !important;
}

#card-result-yeekee-custom-yeekee3vip.card .card-header{
    background: #ff9966 !important;
}

#card-result-yeekee-custom-yeekee3vip button{
    background: #ff9966 !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee3vip .titleH{
        color: #fff !important;
    padding: 2px !important;
}
#card-result-yeekee-custom-yeekee3vip .titleH span{
    width: auto;
    float: none;
}
#list-view-yeekee-yeekee3vip .card.yeekee-custom .card-header{
    color: #fff !important;
    background: #ff9966 !important;
}





.view-yeekee .check-round-result, button.button-view {
    /* color: #28c8d2 !important;
    border-color: #28c8d2 !important;
    background-color: #eefcfd !important; */
}

.view-yeekee .active, button.button-view.active {
    border-radius: 5px;
    background: rgb(77, 157, 249);
    border: 2px solid #fff !important;
    color: #fff !important;
}



.view-yeekee-vip .check-round-vip-result, button.button-view-vip {
    padding: 15px 0;
    color: #000;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    background-image: none;
    border: 1px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
button.check-round-vip-result.btn-outline-danger:hover, button.button-view-vip.btn-outline-danger:hover {
    background: #33ff33 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
}
.view-yeekee-vip .active, button.button-view-vip.active {
    
    color: #000 !important;
    border-radius: 5px;
    background: #33ff33 !important;
    border: 1px solid #fff !important;
}


.view-yeekee-fah .check-round-fah-result, button.button-view-fah {
    color: #3b5898 !important;
    border-color: #3b5898 !important;
    background-color: #eefcfd !important;
}
button.check-round-fah-result.btn-outline-danger:hover, button.button-view-fah.btn-outline-danger:hover {
    background-color: #3b5898 !important;
    border-color: #3b5898 !important;
    color: #fff !important;
}
.view-yeekee-fah .active, button.button-view-fah.active {
    background-color: #3b5898 !important;
    border-color: #3b5898 !important;
    color: #fff !important;
}

.view-yeekee-fah-5 .check-round-fah-5-result,
button.button-view-fah-5 {
    color: #ff9100 !important;
    border-color: #ff9100 !important;
    background-color: #eefcfd !important;
}

button.check-round-fah-5-result.btn-outline-danger:hover,
button.button-view-fah-5.btn-outline-danger:hover {
    background-color: #ff9100 !important;
    border-color: #ff9100 !important;
    color: #fff !important;
}

.view-yeekee-fah-5 .active,
button.button-view-fah-5.active {
    background-color: #ff9100 !important;
    border-color: #ff9100 !important;
    color: #fff !important;
}

.view-yeekee-lto-5 .check-round-lto-5-result,
button.button-view-lto-5 {
    color: #000675 !important;
    border-color: #000675 !important;
    background-color: #eefcfd !important;
}

button.check-round-lto-5-result.btn-outline-danger:hover,
button.button-view-lto-5.btn-outline-danger:hover {
    background-color: #000675 !important;
    border-color: #000675 !important;
    color: #fff !important;
}

.view-yeekee-lto-5 .active,
button.button-view-lto-5.active {
    background-color: #000675 !important;
    border-color: #000675 !important;
    color: #fff !important;
}

.view-yeekee-fah-vip .check-round-fah-vip-result, button.button-view-fah-vip {
    color: #b456f0 !important;
    border-color: #b456f0 !important;
    background-color: #eefcfd !important;
}
button.check-round-fah-vip-result.btn-outline-danger:hover, button.button-view-fah-vip.btn-outline-danger:hover {
    background-color: #b456f0 !important;
    border-color: #b456f0 !important;
    color: #fff !important;
}
.view-yeekee-fah-vip .active, button.button-view-fah-vip.active {
    background-color: #b456f0 !important;
    border-color: #b456f0 !important;
    color: #fff !important;
}

#card-result-yeekee-custom-yeekee5 .titleH{
    color:#000 !important;
}

#card-result-yeekee-custom-yeekee5 button{
    background-color: #00ffff !important;
    border: 1px solid rgb(255, 255, 255) !important;
    color: #000 !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#card-result-yeekee-custom-yeekee5 .card-header{
    background: #00ffff !important;
}

#card-result-yeekee-custom-yeekee5 .number{
    background: #fff;
    color: #000;
}

div[id^='card-result-yeekee-custom-'], div[id^='card-result-yeekee-custom-'] .btn-previous-yeekee-custom, div[id^='card-result-yeekee-custom-'] .btn-next-yeekee-custom{
    background-color: #fff;
    border-color: #fff !important;
}
div[id^='card-result-yeekee-custom-'] .card-header .btn-danger {
    border:1px solid #74df10 !important;
}
div[id^='card-result-yeekee-custom-'] .card-header, div[id^='card-result-yeekee-custom-'] .card-body, div[id^='card-result-yeekee-custom-'] .card-body div {
    /* border-color: #74df10 !important; */
}
.view-yeekee-custom .check-round-custom-result, button.button-view-custom {
    padding: 15px 0;
    color: #000;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    border: 1px solid rgb(121 121 121) !important;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
button.check-round-custom-result.btn-outline-danger:hover, button.button-view-custom.btn-outline-danger:hover {
    border-color: #74df10 !important;
    color: #fff !important;
    background: rgb(116, 223, 16) !important;
    background: linear-gradient(180deg, rgba(116, 223, 16, 1) 0%, rgba(195, 233, 2, 1) 50%, rgba(116, 223, 16, 1) 100%) !important;
}
.view-yeekee-custom .active, button.button-view-custom.active, button.button-view-custom.btn-outline-danger.active, button.check-round-custom-result.btn-outline-danger.active {   
    border-color: #00ffff !important;
    color: #000 !important;
    background: #00ffff !important;
}
.view-yeekee-custom .active, button.button-view-yeekee10.active, button.button-view-yeekee10.btn-outline-danger.active, button.check-round-yeekee10-result.btn-outline-danger.active{
    border-color: #6600ff !important;
    color: #fff !important;
    background: #6600ff !important;
}
.view-yeekee-custom .active, button.button-view-yeekee5vip.active, button.button-view-yeekee5vip.btn-outline-danger.active, button.check-round-yeekee5vip-result.btn-outline-danger.active{
    border-color: #cc99ff !important;
    color: #fff !important;
    background: #cc99ff !important;
}
.view-yeekee-custom .active, button.button-view-yeekee10vip.active, button.button-view-yeekee10vip.btn-outline-danger.active, button.check-round-yeekee10vip-result.btn-outline-danger.active{
    border-color: #006699 !important;
    color: #fff !important;
    background: #006699 !important;
}
.view-yeekee-custom .active, button.button-view-yeekee3.active, button.button-view-yeekee3.btn-outline-danger.active, button.check-round-yeekee3-result.btn-outline-danger.active{
    border-color: #daa520 !important;
    color: #fff !important;
    background: #daa520 !important;
}
.view-yeekee-custom .active, button.button-view-yeekee3vip.active, button.button-view-yeekee3vip.btn-outline-danger.active, button.check-round-yeekee3vip-result.btn-outline-danger.active{
    border-color: #ff9966 !important;
    color: #fff !important;
    background: #ff9966 !important;
}


#list-view-yeekee-yeekee10 .card.yeekee-custom .card-header{
    color: #fff !important;
    background: #6601ff !important;
}

#list-view-yeekee-yeekee5 .content-yeekee .card,
#list-view-yeekee-yeekee5vip .content-yeekee .card{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#list-view-yeekee-yeekee10 .content-yeekee .card,
#list-view-yeekee-yeekee10vip .content-yeekee .card{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

#list-view-yeekee-yeekee3 .content-yeekee .card,
#list-view-yeekee-yeekee3vip .content-yeekee .card{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}





/* .card .custom {
    border:1px solid #99d91d !important;
} */
.result-content .custom{
    padding: 0 15px;
    border-radius: 15px;
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
}

.result-content .bg-danger.custom{
    background-color: #99d91d !important;
    color: #fff;
    border-radius: 8px 8px 0 0;
}
.result-content .border-danger{
    border-color:#f4bf14 !important;
}


.result-content .bg-danger{
    background-color: #ef67cb !important;
    color: #fff;
}

.result-content .text-danger{
    color:#fff !important;
}

.result-content .badge-danger{
    background-color: #ef67cb !important;
}


.result-content .border-danger.H{
    border-color:#fff !important;
    padding: 0 15px;
}

.result-content .border-danger.H .card-header{
    text-align: left;
    background: #006600;
}

.result-content .border-danger.H .title-type{
    color: #000 !important;
}

.result-content .border-danger.H .number{
    background-color: rgb(255, 255, 255);
    color: #000;
}

/* .result-content .border-danger.H .card{
       padding: 15px;
    border: 1px solid rgb(255, 255, 255);
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
} */

.result-content .border-danger.H .border-warning{
    border-color: rgb(121 121 121) !important;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
}

.result-content .border-danger.H .bg-warning{
    /* color: #fff;
    border-radius: 8px 8px 0 0; */
    /* background: rgb(54, 194, 206) !important;
    background: linear-gradient(180deg, rgba(54, 194, 206, 1) 0%, rgba(0, 159, 189, 1) 52%, rgba(54, 194, 206, 1) 100%) !important; */
}

.result-content .border-danger.H-vip{
    border-color:#fff !important;
        padding: 0 15px;
} 
.result-content .border-danger.H-vip .border-danger{
   border-color:rgb(121 121 121) !important;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
}

.result-content .border-danger.H-vip .border-danger.active{
    border-color: #fff !important;
}

.result-content .border-danger.H-vip .bg-danger{
    border-radius: 8px 8px 0 0;
    background: rgb(244, 191, 20) !important;
    background: linear-gradient(180deg, rgba(244, 191, 20, 1) 0%, rgba(255, 212, 44, 1) 50%, rgba(244, 191, 20, 1) 100%) !important;
}

.result-content .border-danger.Huay{
    border-color:#3b5898 !important;
} 
.result-content .border-danger.Huay .border-danger{
    border-color:#3b5898 !important;
}

.result-content .border-danger.Huay .bg-danger{
    background-color: #3b5898 !important;
    border-radius: 8px 8px 0 0;
}

.result-content .border-danger.HuayVip{
    border-color:#b456f0 !important;
} 
.result-content .border-danger.HuayVip .border-danger{
    border-color:#b456f0 !important;
}

.result-content .border-danger.HuayVip .bg-danger{
    background-color: #b456f0 !important;
    border-radius: 8px 8px 0 0;
}
.yeekee-fah-5 {
    color: #ff9100 !important;
}
.result-content .border-danger.Huay5 {
    border-color: #ff9100 !important;
}

.result-content .border-danger.Huay5 .border-danger {
    border-color: #ff9100 !important;
}

.result-content .border-danger.Huay5 .bg-danger {
    background-color: #ff9100 !important;
    border-radius: 8px 8px 0 0;
}

.yeekee-lto-5 {
    color: #000675 !important;
}
.result-content .border-danger.lto5 {
    border-color: #000675 !important;
}

.result-content .border-danger.lto5 .border-danger {
    border-color: #000675 !important;
}

.result-content .border-danger.lto5 .bg-danger {
    background-color: #000675 !important;
    border-radius: 8px 8px 0 0;
}





.result-content .title-update .badge-danger,
.result-content .title-update .badge-warning{
    float: right;
    font-size: 12px;
    padding: 8px;
}

.result-content .title-type {
    font-size: 14px;
    text-align: center;
    border: none;
    padding: 5px;
    color: #000 !important;
    /* border-bottom: 1px solid #fff; */
}

.result-content .number {
    /* color: #fff; */
    font-size: 24px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgb(220, 220, 220);
    /* background: rgb(77, 157, 249); */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.result-content .datepicker{
        margin: 15px 5px;
    text-align: center;
    width: auto;
}





.history-credit .card{
    margin-bottom: 20px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.history-credit .card .card-header span{
    width: auto;
    float: none;
    font-weight: 500;
}

.history-credit .card .card-header span.badge{
    font-size: 12px;
    margin: 0;
    padding: 10px !important;
    width: 100%;
    text-align: center !important;
}

.history-credit .card-body {
    color: #252525;
    padding: 0 10px;
}

.history-credit .left p,
.history-credit .right p{
    font-size: 14px;
    margin: 0;
}

.topic-navigation{
    width: 100%;
    display: inline-block;
}

.topic-navigation .col-nav {
    width: calc((100% / 3) - 10px);
    float: left;
    margin: 5px;
    text-align: center;
}

.topic-navigation .col-nav a {
    display: block;
    color: #000000;
    font-size: 12px;
    font-weight: 500;
    padding: 5px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;

}
.topic-navigation .col-nav a img{
   width: 45px;
    height: auto;
    margin: 0 auto;
}


.lotto-navigation {
        width: 100%;
    display: inline-block;
}

.lotto-navigation .col-nav {
    width: calc((100% / 5) - 10px);
    min-height: 100px;
    float: left;
    margin: 5px;
    /*    border: 1px solid #252525;*/
    text-align: center;
}

.lotto-navigation .col-nav.pc_w3,
.lotto-navigation .col-nav.w5{
    /* width: 31.33%; */
}

.lotto-navigation .col-nav a span {
    display: block;
    font-size: 30px;
    line-height: 34px;
    color: #ffc000;
}

.lotto-navigation .col-nav a {
    display: block;
    color: #343a40;
    font-size: 14px;
    font-weight: 500;
    padding: 5px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;

}
.lotto-navigation .col-nav a i{
    font-size: 30px;
    color: #28c8d2;
}

.lotto-navigation .col-nav a img{
    width: 45px;
    height: auto;
    margin: 0 auto 5PX;
}

.lotto-navigation .col-nav.w5 a i{
    font-size: 30px;
    color: #fff;
}


.lotto-navigation .col-nav a:hover i{
    color: #fff;
}

.lotto-navigation .col-nav a:hover {
    text-decoration: none;
}

.lotto-navigation .col-nav a:hover span {
    color: #fff;
}

.progress-deposite {
    width: 100%;
    text-align: center;
    padding: 8px 0px 4px 0px;
}

.progress-deposite .content {
    display: inline-block;
    width: auto;
}

.progress-deposite .content .progress__bar {
    height: 50px;
    position: relative;
}

.progress-deposite .content .progress__bar::before {
    content: '';
    width: 100%;
    height: 2px;
    background: #ccc;
    position: absolute;
    bottom: 22px;
    left: 0;
    z-index: -1;
}

.progress-deposite .content .progress__bar .step {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 50px;
    background: #fff;
    color: #cccccc;
    border: solid 1px #cccccc;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.progress-deposite .content .progress__bar .step span {
    font-size: 20px;
    line-height: 50px;
    display: block;
    text-align: center;
    color: #ccc;
}

.progress-deposite .content .progress__bar .step:last-child {
    margin: 0px 0px 0px 0px;
}

.progress-deposite .content .progress__bar .step.active {
    border: solid 1px #ffcc27;
    background: #ffcc27;
}

.progress-deposite .content .progress__bar .step.active span {
    color: #252525;
}

.box-calendar {
    background: linear-gradient(356deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    border-radius: 10px;
}

.link-promo{
    border-radius: 5px;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    --border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
}

.link-promo .card {
    background: transparent;
}

.link-promo .card-body {
    color: #252525;
}

.link-promo p{
    padding-bottom: 5px;
}

.link-promo .copylink{
    height: 50px;
    line-height: 36px;
    color: #4d9df9;
    border: 1px solid #4d9df9;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.af-content .title-head{
    display: flex;
    justify-content: space-between;
}

.af-content .item-center{
    padding: 8px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.af-content .item-center p{
    margin: 0;
}

.af-content .item-center p.day-af{
    font-size: 12px;
    font-weight: 300;
}

.af-content .item-center p.user-af{
    font-weight: 500;
    font-size: 16px;
}

.af-content .item-center p.totol-af{
    color: #00c42b;
}

.af-content .table{
    background: #fff;
}

.af-content .navigation-transaction ul li {
    width: 50%;
    padding: 2px;
   
}

.af-content .bg-box .border{
    background-color: #4d9df9;
}

.af-content .title {
    margin: 0;
    padding: 5px;
    border-radius: 20px;
    color: #fff;
}

.af-content .number {
    font-size: 20px;
    font-weight: 500;
    padding: 5px 10px;
    margin: 0;
    color: #00c42b;
    border-radius: 5px;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    --border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
}

.af-content .intro{
    padding: 5px 10px;
    border-radius: 5px;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    --border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px;
}

.af-content .revenue-month{
    padding: 0;
}
/* .af-content .revenue-month li {
    margin-bottom: 10px;
} */

.af-content .revenue-month li a {
    font-size: 14px;
    padding: 10px 5px;
    background: #ebebeb;
    display: block;
    color: #252525;
    border-radius: 5px;
}

.af-content .revenue-month li.active a {
    background: #4d9df9;
    color: #ffffff;
}

.af-content .card{
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    border-radius: 5px;
    padding: 10px;
}

.af-content .card.withdraw p{
    font-weight: 500;
    color: #000000;
    margin: 0;
}

.revenue-month-day .bg-box{
    border-radius: 5px;
}

.set-number {
    text-align: center;
    display: block;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 15px;
    color: #fff;
    border-radius: 5px;
    background: rgb(77, 157, 249);
}

.set-number:hover {
    color: #252525;
    background: #00ccff;
    text-decoration: none;
}
.list-set-number .bg-success{
    background-color: #0066ff!important;
}
.list-set-number .card-header {
    padding: 0;
    font-size: 12px;
}

.list-set-number .card-body {
    color: #252525;
    padding: 10px 15px;
}

.list-set-number .card-body p {
       margin-bottom: 3px;
    font-size: 12px;
}

.list-set-number .card-body .dropdown-toggle {
    padding: 5px 15px;
    font-size: 14px;
}

.list-set-number .card-body .dropdown-item {
    color: #252525;
}

.content-create .form-control{
    height: 50px;
    color: rgb(109, 109, 109);
    border-radius: 16px;
    border: 1px solid rgb(0, 0, 0);
    background: rgba(255, 255, 255, 0.45) !important;
}

.content-create .create-tab .nav-tabs{
    border: none;
}

.content-create .create-tab .nav-tabs.tabsNo .nav-link {
    width: 49.6%;
    padding: 10px 0;
    font-size: 16px;
    color: #343a40;
    border: 1px solid #fff;
    text-align: center;
    margin: 10px 2px 0;    
    background: rgba(255, 255, 255, 0.45);
}

.content-create .create-tab .nav-tabs .nav-item.show .nav-link, 
.content-create .create-tab .nav-tabs .nav-link.active{
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    background: #4d9df9;
}

.create-tab .fade:not(.show) {
    opacity: 0;
    display: none;
}

.create-tab .tab-nav-style-4.nav-tabs {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: hsla(0, 0%, 100%, .45);
}

.create-tab .tab-nav-style-4.nav-tabs .nav-item {
    width: 10%;
    padding: 1px;
    line-height: 35px;
    font-size: 18px;
}

.create-tab .tab-nav-style-4.nav-tabs .nav-link {
    text-align: center;
    border-radius: 0;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    color: #333333;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.create-tab .tab-nav-style-4.nav-tabs .nav-link.active{
    background: #4e9df9 !important;
    color: #fff;
}

.create-tab .theme-light .tab-content-style-4.tab-content {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: hsla(0, 0%, 100%, .45);
}

.create-tab .btn-group-sp-4 {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 1px;
}

.create-tab .btn-group-sp-4 li {
    width: calc(10% - 3px + 1px);
    margin: 1px;
    margin-bottom: 4px;
}

.create-tab .btn-group-sp-4 li .btn {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    color: #333333;
    background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}


.content-create .card-body,
.content-news .card-body {
    color: #252525;
}
.bonus-amount.bg-warning{
    border-radius: 20px;
    background: #00c6ff;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff) !important;  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0072ff, #00c6ff) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bonus-amount .card-body a {
    color: #fff;
}

.bonus-amount .card-body a:hover {
    color: #fff;
    text-decoration: none;
}

.bonus-amount h2 {
    font-size: 28px;
}

.bonus-amount p{
    margin-bottom: 5px;
}

.bonus-vip.bg-success {
    border-radius: 20px;
    background: #7F00FF;
    background: -webkit-linear-gradient(to top, #E100FF, #7F00FF);
    background: linear-gradient(to top, #E100FF, #7F00FF);
}

.bonus-vip .card-body a {
    color: #fff;
}

.bonus-vip .card-body a:hover {
    color: #fff;
    text-decoration: none;
}

.bonus-vip h2 {
    font-size: 28px;
}

.bonus-vip p{
    margin-bottom: 5px;
}

.award {
    width: 100%;
    height: 52px;
    font-size: 18px;
    border: 1px solid #999;
    display: block;
    text-align: center;
    line-height: 52px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #ffcc27;
    background: #252525;
}
.bonus-day .award {
    color: #fff;
    background: #00c6ff;
    border: 1px solid #fff;
}
.bonus-day {
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    padding: 0px 0px 80px 0px;
}

.bonus-day button {
    width: 100%;
    height: 40px;
    line-height: 35px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-color: #ff69b4;
    background-color: #ff69b4;
    color: #252525;
    display: block;
    text-align: center;
}

.bonus-day button.success {
    background: #3b5898;
    color: #fff;
}

.bonus-day .title-page {
    margin: 0px 0px 8px 0px;
}

.bonus-day.award {
    width: 100%;
    height: 52px;
    font-size: 28px;
    border: 1px solid #999;
    display: block;
    text-align: center;
    line-height: 52px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #3b5898;

}

.bonus-day .award.success {
    border: 1px solid #3b9854;
    color: #3b9854;
}

.bonus-day .number {
    font-size: 20px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    display: block;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    background: none;
    background: #4d9df9;
    border: solid 1px #cccccc;
}

.bonus-day .title {
    color: #1a1a1a;
    padding: 10px 0px 0px 0px;
}

.bonus-day .border-secondary {
    height: 36px;
    border-radius: 5px;
    border: 0px;
    width: 100%;
    display: block;
    text-align: center;
    line-height: 36px;
    color: #ffffff;
    border-radius: 8px;
    border: 1px solid rgb(255, 255, 255) !important;
    background: rgb(77, 157, 249);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.bonus-day .box-success .number {
    color: #ffffff;
    background: #27a5b5;
    border: 0px;
}


.bonus-day .box-success .border-success {
    height: 36px;
    background-color: #27a5b5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 0px;
    width: 100%;
    display: block;
    text-align: center;
    line-height: 36px;
    color: #252525;
    border: none !important;
}

.bonus-day .box-success .border-success i {
    color: #ffffff;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    width: 100%;
    display: block;
}

.user-vip-current {
    padding: 21px 0px 16px 0px;
    width: 100%;
    margin: 0px 0px 21px 0px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.user-vip-current h1 {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    padding: 0px;
    margin: 0px 0px 8px 0px;
    text-align: center;
    display: block;
}

.user-vip-current .current-vip {
    width: 240px;
    height: 65px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    margin: 0 auto 20px auto;
    display: block;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 70px;
    background: #7F00FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.user-vip-current .text-note {
    font-size: 14px;
    color: #3b5898;
    text-align: center;
}

.user-vip-current .note {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    width: 100%;
    text-align: center;
    margin: 0px 0px 4px 0px;
    line-height: 16px;
}

.user-vip-current .current-money {
    font-size: 24px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    line-height: 24px;
    color: #000;
}

.user-vip-current .progress {
    margin: 0px 0px 3px 0px;

}

.user-vip-current .progress-info {
    width: 100%;
    margin: 0px 0px 20px 0px;
}

.user-vip-current .progress-info span {
    display: block;
    float: left;
    width: 50%;
    text-align: left;
    font-size: 14px;
    color: #000;
    line-height: 30px;
}

.user-vip-current .progress-info span:nth-child(2) {
    text-align: right;
}

.user-vip-current .next-vip {
    margin: 0px auto;
    display: inline-block;
    width: auto;
    border: 1px solid #cccccc;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 10px 50px;
    left: 50%;
    position: relative;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.user-vip-current .title {
    display: block;
    text-align: center;
    font-size: 14px;
    margin-bottom: 5px;
    color: rgba(26, 26, 26, 0.6);
}

.user-vip-current .money {
    color: red;
    font-size: 24px;
    margin-bottom: 5px;
    text-align: center;
}

.user-vip-current .text-note-info {
    color: #003399;
}

.user-vip-current .form-confirm-bonus {
    padding: 8px 0px 24px 0px;
    width: 100%;
    background: #fff;
}

.user-vip-current .form-confirm-bonus button {
    cursor: pointer;
    display: block;
    color: #fff;
    width: 195px;
    height: 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    background-color: #9b9b9b;
    margin: 0px auto 35px;
}

.user-vip-current .form-confirm-bonus button:hover {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background-color: #3b5898;
}

.user-vip-current .form-confirm-bonus .no-bonus {
    background: url(../img/icon/background-trophy.svg) no-repeat center 0px;
    height: 51px;
    text-align: center;
    line-height: 51px;
    color: rgba(26, 26, 26, 0.6);
    width: 100%;
}

.user-vip-current .user-bonus {
    width: 100%;
}

.user-vip-current .user-bonus p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    margin: 0px;
}

.user-vip-current .user-bonus p i {
    color: #3b5898;
    margin: 0px 5px;
}


.user-vip-current .user-bonus p p:nth-child(2) {
    font-size: 23px;
    color: #3b5898;
    margin: 6px 0px 16px 0px;
}

.user-vip-current .user-bonus p p:nth-child(3) {
    color: rgba(0, 0, 0, 0.8);
}


.user-vip-current .ranking-vip {
    border: 1px solid #979797;
    height: 36px;
    margin: 0px 0px 4px 0px;
}

.user-vip-current .ranking-vip div {
    color: #000;
    float: left;
    width: 20%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
}

.user-vip-current .ranking-vip div.active {
    color: #fff;
    background-color: #7f00ff;
    height: 34px;
}

.user-vip-current .ranking-level {
    font-size: 14px;
    color: #000;
    line-height: 16px;
    margin: 0px 0px 8px 0px;
}

.user-vip-current .ranking-level i {
    color: #3b5898;
}


.user-vip-current .ranking-level-money {
    margin: 0px 0px 0px 0px;
}

.user-vip-current .ranking-level-progress {
    margin: 0px 0px 8px 0px;
}

.user-vip-current .ranking-money {
    text-align: center;
    color: #3b5898;
    font-size: 18px;
    padding: 15px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.user-vip-current .btn-confirm-bonus {
    width: 100%;
    max-width: 60px;
    padding: 0px;
    display: block;
    margin: 0px auto;
    background-color: #9b9b9b;
}

.user-vip-current .btn-confirm-bonus:hover {
    background-color: #9b9b9b;
}

.user-vip-current .btn-confirm-bonus.active {
    background-color: #3b9854;
}

.user-vip-current .btn-confirm-bonus-99 {
    max-width: 100%;
    font-size: 11px;
}

.user-vip-current .btn-confirm-bonus-99.active {
    background-color: #dd9117 !important;
    color: #000;
    max-width: 100%;
}

.user-vip-current .ranking-status {
    color: #3b9854;
    text-align: center;
}

.user-vip-current .ranking-status i {
    color: #3b9854;
    font-size: 20px;
    padding: 10px 0px 0px 0px;
}


.user-vip-current .progress-info {
    font-size: 14px;
    line-height: 16px;
    color: #1a1a1a;
}

.user-vip-current .current-money {
    margin-top: 10px;
}

.user-vip-current .box__betAll {
    border: 1px solid #3b9854;
    padding: 7px 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    text-align: center;
}

.user-vip-current .box__betAll span {
    width: 100%;
    font-size: 12px;
    color: #3b9854;
    line-height: 16px;
    position: relative;
}

.user-vip-current .box__betAll span i {
    top: 1px;
    margin: 0px 4px 0px 0px;
    background: #3b9854;
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}


.user-vip-current .box__betAll p {
    width: 100%;
    font-size: 20px;
    line-height: 16px;
    color: #000000;
    margin: 10px 0px 15px;
}

.user-vip-current .box_betWaiting {
    border: 1px solid #dd9117;
    padding: 7px 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    text-align: center;
}

.user-vip-current .box_betWaiting span {
    width: 100%;
    font-size: 12px;
    color: #dd9117;
    line-height: 16px;
    position: relative;
}

.user-vip-current .box_betWaiting span i {
    top: 1px;
    margin: 0px 4px 0px 0px;
    background: #dd9117;
    position: relative;
    width: 12px;
    height: 12px;
    display: inline-block;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}


.user-vip-current .box_betWaiting p {
    width: 100%;
    font-size: 20px;
    line-height: 16px;
    color: #000000;
    margin: 10px 0px 15px;
}

.user-vip-current .progress {
    position: relative;
    margin: 8px 0px 0px 0px;
}

.user-vip-current .progress .progress-bar {
    position: absolute;
    top: 0;
    z-index: 1;
    left: 0;
    height: 8px;
}

.user-vip-current .progress .progress-bar.bg-info{
    background: #7F00FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #E100FF, #7F00FF) !important;  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #E100FF, #7F00FF) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.user-vip-current .progress .progress-bar-betall {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.user-vip-current .progress .progress-bar-betall.bg-warning {
    background: #dd9117;
}

.box-ranking-vip {
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.ranking-vip {
    margin: 0px 0px 4px 0px;
}

.ranking-vip div {
    color: #000;
    float: left;
    width: 20%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.45);
}

.ranking-vip div.active {
    color: #fff;
    background: #7F00FF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #E100FF, #7F00FF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #E100FF, #7F00FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
ckground-color: #3b5898;
}

.list-ranking .border-bottom {
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.45);
    padding: 15px;
    border-radius: 5px;
}

.list-ranking .ranking-vip {
    border: 1px solid #979797;
    height: 36px;
    margin: 0px 0px 4px 0px;
}

.list-ranking .ranking-vip div {
    color: #000;
    float: left;
    width: 20%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
}

.list-ranking .ranking-vip div.active {
    color: #fff;
    background-color: #3b5898;
    height: 34px;
}

.list-ranking .ranking-level {
    font-size: 14px;
    color: #000;
    line-height: 16px;
    margin: 0px 0px 8px 0px;
}

.list-ranking .ranking-level i {
    color: #3b5898;
}

.list-ranking .ranking-level-money {
    margin: 0px 0px 0px 0px;
}

.list-ranking .ranking-level-progress {
    margin: 0px 0px 8px 0px;
}

.list-ranking .ranking-money {
    text-align: center;
    color: #3b5898;
    font-size: 18px;
    padding: 15px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.list-ranking .ranking-level-progress {
    position: relative;
}

.list-ranking .ranking-level-progress .progress-bar {
    position: absolute;
    height: 6px;
    z-index: 1;
}

.list-ranking .progress-bar.bg-info {
    background: #7F00FF !important;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #E100FF, #7F00FF) !important;  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #E100FF, #7F00FF) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.list-ranking .ranking-status {
    color: #3b9854;
    text-align: center;
}

.list-ranking .ranking-status i {
    color: #3b9854;
    font-size: 20px;
    padding: 10px 0px 0px 0px;
}
.ranking2 .ranking-status i{
    color: #3f6418;
}

.ranking2 .btn-success{
    background-color: #e100ff;
    border-color: #fff;
}

.how-to .card-title {
    padding: 15px 15px 0;
    margin: 0;
}

.how-to .accordion-toggle {
    width: 100%;
    color: #252525;
    cursor: pointer;
    padding: 10px 20px;
    text-align: left;
    outline: none;
    transition: 0.4s;
    margin: 0;
    display: inline-block;
    background: #ebebeb;
    color: #363636;
}

.how-to .accordion-toggle h5 {
    width: 85%;
    float: left;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 0;
}

.how-to button:focus {
    outline: none;
}

.how-to .accordion-toggle:after {
    content: '\002B';
    color: #363636;
    font-weight: 100;
    float: right;
    margin-left: 5px;
    font-size: 28px;
    line-height: 24px;
}

.how-to .accordion-toggle:hover,
.how-to .accordion-toggle.active {
    background: #4d9df9;
    color: #ffffff;
}

.how-to .accordion-toggle:hover:after,
.how-to .accordion-toggle.active:after {
    content: "\2212";
    color: #252525;
}

.how-to .accordion-content {
    display: none;
    padding: 40px 15px;
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
    margin-top: -5px;
    margin-bottom: 30px;
    background: #f7f7f7;
}

.how-to .accordion-content h5 {
    margin: 10px 0;
    font-size: 18px;
    font-weight: 500;
    color: #191164;
    text-transform: uppercase;
}

.how-to .close {
    opacity: 1;
    font-size: 32px;
    font-weight: 100;
    color: #252525;
}

.content-massages {}

.content-massages .tab-wrap {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: flex;
}

.content-massages input[type="radio"][name="tabs"] {
    position: absolute;
    z-index: -1;
}

.content-massages input[type="radio"][name="tabs"]:checked + .tab-label-content label {
    color: #252525;
}

.content-massages input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    display: block;
}

.content-massages input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
    left: calc((100% / 3) * 0);
}

.content-massages input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
    left: calc((100% / 3) * 1);
}

.content-massages input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
    left: calc((100% / 3) * 2);
}

.content-massages input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
    left: 0;
}

.content-massages label {
    width: 100%;
    padding: 15px;
    cursor: pointer;
    color: #898989;
    background-color: #fff;
    box-sizing: border-box;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
    margin: 0;
    ;
}

.content-massages .slide {
    background: #ffcc27;
    width: calc(100% / 3);
    height: 4px;
    position: absolute;
    left: 0;
    top: calc(100% - 3px);
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
}

.content-massages .tab-label-content {
    width: 100%;
}

.content-massages .tab-label-content .tab-content {
    position: absolute;
    top: 60px;
    display: none;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.contact-info .card-body {
    color: #252525;
}

.content-play .bg-box{
    padding-bottom: 0;
    background: linear-gradient(175deg, rgb(0, 169, 242) 1.32%, rgb(23, 45, 157) 99.58%);
}




.content-play .card{
    background: none;
    border: none;
}
.content-play .card-title{
    padding: 0;
}
.content-play .card-title h3{
    font-size: 18px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    border-radius: 8px;
    border: 1px solid rgb(255, 255, 255);
    background: rgb(77, 157, 249);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.content-play a {
    width: 100%;
    height: 141px;
    float: left;
    text-decoration: none;
    display: block;
    margin: 0 0 15px 0;
    position: relative;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    cursor: pointer;
    text-align: center;
}
 
.content-play a.yeekee.disable{
    border: 1px solid #ccc;
} 

.content-play a.yeekee {
    width: 100%;
    height: 150px;
    padding: 5px 10px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    border: 1px solid #3b5898;
    border-radius: 10px;
    /* background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%); */
    background: linear-gradient(356deg, rgb(211 228 248) 3.16%, rgb(255, 255, 255) 58.91%);
    overflow: hidden;
    z-index: 1;
}
.content-play a.huay {
    width: 100%;
    height: 141px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    /* border: 1px solid #ffc000; */
    border-radius: 5px;
}

.content-play a.huayC .info {
    color: #fff !important;
    background: #2f4c8b !important;
    background: linear-gradient(90deg,#2f4c8b,#5d85c4) !important;
}

.content-play a.fah-5 {
    background: #fff;
    border: 1px solid #ff9100;
}

.content-play a.fah-5 .info {
    color: #fff !important;
    background: #ff9100 !important;
}

.content-play a.fah-5-C {
    background: #fff;
    border: 1px solid #001281;
}

.content-play a.fah-5-C .info {
    color: #fff !important;
    background: #001281 !important;
}

.content-play a.lto-5 {
    background: #fff;
    border: 1px solid #000678;
}

.content-play a.lto-5 .info {
    color: #fff !important;
    background: #000678 !important;
}

.content-play a.lto-5-C {
    background: #fff;
    border: 1px solid #e13121;
}

.content-play a.lto-5-C .info {
    color: #fff !important;
    background: #e13121 !important;
    background: linear-gradient(90deg,#ee871e,#e13121) !important;
}

.content-play a.yeekee-vip {
    background: #fff;
    border: 1px solid #b456f0;
}
.content-play a.yeekee-vip .info {
    color: #fff !important;
    background: #b456f0 !important;
}
.content-play a.yeekee-custom {
    background: #fff;
    border: 1px solid #0000ff;
}

.content-play a.yeekee-custom .info {
    color: #fff !important;
    background: #0000ff !important;
}
.content-play a.yeekee5 {
    /* background: #00ffff !important; */
    border: 2px solid #fff;
}
.content-play a.yeekee5::after{
    content: '';
    width: 400px;
    height: 130px;
    background: #00ffff;
    position: absolute;
    bottom: -20px;
    left: 40px;
    z-index: -1;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}


.content-play a.yeekee5 .info{
    /* background: #99d91d !important; */
    /* background: rgb(116, 223, 16) !important;
    background: linear-gradient(180deg, rgba(116, 223, 16, 1) 0%, rgba(195, 233, 2, 1) 50%, rgba(116, 223, 16, 1) 100%) !important; */
}

.content-play a.yeekee3 {
    border: 2px solid #fff;
}

.content-play a.yeekee3::after{
    content: '';
    width: 400px;
    height: 130px;
    background: #daa520;
    position: absolute;
    bottom: -20px;
    left: 40px;
    z-index: -1;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.content-play a.yeekee3vip {
    border: 2px solid #fff;
}

.content-play a.yeekee3vip::after{
    content: '';
    width: 400px;
    height: 130px;
    background: #ff9966;
    position: absolute;
    bottom: -20px;
    left: 40px;
    z-index: -1;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}



.content-play a.yeekeeH{
    border: 2px solid #fff;
}

.content-play a.yeekeeH::after{
    content: '';
    width: 400px;
    height: 250px;
    background: #006600;
    position: absolute;
    bottom: -135px;
    right: -70px;
    z-index: -1;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.content-play a.yeekeeH .info{
    font-size: 22px !important;
    line-height: 20px !important;
    font-style: italic;
}

.content-play a.yeekeeH-life{
    border: 2px solid #fff;
}

.content-play a.yeekeeH-life::after{
    content: '';
    width: 400px;
    height: 250px;
    background: #33ff33;
    position: absolute;
    bottom: -135px;
    right: -70px;
    z-index: -1;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.content-play a.yeekeeH-life .info{
    font-size: 22px !important;
    line-height: 20px !important;
    font-style: italic;
}




.content-play a.yeekee-vip .time {
    color: #0094aa;
}

.content-play a.yeekee h2 {
    font-stretch: normal;
    line-height: 43px;
    letter-spacing: normal;
    color: #0094aa;
    text-align: center;
    height: 43px;
    width: 100%;
    border-right: none;
    border-left: none;
    font-size: 20px;
    font-weight: 300;
    margin: 0;
}

.content-play a.yeekee.disable h2{
    color: #898989;
}
.content-play a.yeekee.disable .time{
    color: #898989;
}

.content-play a.yeekee .time {
    display: flex;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    /* line-height: 20px; */
    letter-spacing: normal;
    /* text-align: center; */
    color: #343a40;
    width: 100%;
    /* padding: 10px 0 5px; */
    font-size: 14px;
}

.content-play a.yeekee .btn-play{
    width: 100%;
    height: 45px;
    font-size: 18px;
    margin-top: 5px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #fff;
    color: #000;
    background: linear-gradient(175deg, rgb(194, 151, 67) -0.08%, rgb(241, 215, 130) 22.71%, rgb(255, 239, 192) 51.19%, rgb(232, 202, 117) 77.13%, rgb(191, 146, 62) 100.08%);
    /* background: linear-gradient(175deg, rgb(0, 169, 242) 1.32%, rgb(23, 45, 157) 99.58%); */
    box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 16px 0px;
    cursor: pointer;
}

.content-play a.yeekee .day{
    font-size: 14px;
    color: #343a40;
}

.content-play a.yeekee .info {
    display: inline-block;
    width: 100%;
    text-align: left;
    font-stretch: normal;
    letter-spacing: normal;
    color: #001281;
    /* background: #001281; */
    padding: 10px 10px 5px;
    line-height: 18px;
    font-size: 16px;
    font-weight: 700;
    /* border-radius: 15px 15px 0 0; */
}

.content-play a.yeekee .info .logo{
    width: 50px;
    height: 50px;
    float: left;
    border-radius: 40px;
    padding: 5px 0;
    border: 2px solid #d9d7d7;
    line-height: 0;
    text-align: center;
    box-shadow: rgba(255, 255, 255, 0.55) 0px 0px 16px 0px;
    background: linear-gradient(45deg, #999 5%, #fff 10%, #ccc 30%, #ddd 50%, #ccc 70%, #fff 80%, #999 95%);
    /* background: linear-gradient(90deg, rgb(194, 151, 67) -0.08%, rgb(241, 215, 130) 22.71%, rgb(255, 239, 192) 51.19%, rgb(232, 202, 117) 77.13%, rgb(191, 146, 62) 100.08%); */
}

.content-play a.yeekee .info .logo img{
    height: 35px !important;
}

.content-play a.yeekee .info span img{
    width: 20px;
    display: inline-block;
    margin-top: -5px;
    margin-right: 3px;
}

.content-play a.yeekee.disable .info{
    background: #900101;
}


/* หวยหุ้น */
.content-play a.lotto.government{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}
.content-play a.lotto.mala{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}
.content-play a.lotto.hanoi{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}
.content-play a.lotto.laos{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}
.content-play a.lotto.foreign{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}
.content-play a.lotto.foreign-thai{
    background: linear-gradient(356deg, rgb(139, 170, 207) 3.16%, rgb(255, 255, 255) 58.91%);
    color: #343a40;
}

.content-play a.lotto{
    width: 100%;
    height: 150px;
    padding: 5px 10px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.16);
    background: #ffffff;
    border-radius: 15px;
    border: 2px solid #fff;
}

.content-play a.lotto .info {
    display: inline-block;
    width: 100%;
    text-align: left;
    font-stretch: normal;
    letter-spacing: normal;
    color: #001281;
    /* padding: 10px 15px; */
    line-height: 20px;
    font-size: 18px;
    font-weight: 700;
    /* margin-top: 10px; */
    border-radius: 15px 15px 0 0;
}

.content-play a.lotto .time {
    display: block;
    opacity: 0.8;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: left;
    color: #343a40;
    width: 100%;
    /* padding: 10px 0 5px; */
    font-size: 14px;
}

.content-play a.lotto .day{
    font-size: 12px;
    color: #343a40;
    float: left;
    margin-bottom: 10px;
    background: rgb(217, 217, 217);
    padding: 3px 10px;
}

.content-play a.lotto .info .flag-icon{
    margin-top: 3px !important;
    float: left;
}

.content-play a.lotto .btn-play{
    width: 100%;
    height: 45px;
    font-size: 18px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #fff;
    color: rgb(255, 255, 255);
    background: linear-gradient(175deg, rgb(0, 169, 242) 1.32%, rgb(23, 45, 157) 99.58%);
    box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 16px 0px;
    cursor: pointer;
}

.flag-icon{
    width: 30px !important;
    height: 30px !important;
    line-height: 24px !important;
    margin-top: 0 !important;
    border-radius: 100px;
    background-size: cover !important;
}
.result-content .card-body{
    border-radius: 0 0 5px 5px;
    padding: 20px 5px !important;
}

.result-content .card-body .card{
    background: transparent;
}

/* สีหวยหุ้น */
.foreign{
    border: none;
    background-color: transparent;
}

.foreign .title-update {
    text-align: center;
    font-size: 18px;
    padding: 15px 5px;
    margin: 0 0 15px;
    color: #fff;
    border-radius: 10px 10px 0 0;
    background: #4d9df9;
}
.foreign .card{
    border-radius: 5px;
    background: rgb(77, 157, 249) !important;
    border: 2px solid #fff !important;
        box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.foreign .card-body{
    color: #fff;
    padding: 0 10px;
}

.foreign .info{
   border-bottom: 1px solid #fff;
} 

.foreign .number {
    font-size: 16px;
    border: none;
    padding: 5px;
        box-shadow: none;
    background: none;
}

.foreign-thai{
    border: none;
    background-color: transparent;
}

.foreign-thai .title-update {
    text-align: center;
    font-size: 18px;
    padding: 15px;
    margin: 0;
    color: #fff;
    border-radius: 15px 15px 0 0;
    background: #4d9df9;

}

.foreign-thai .card{
    border-radius: 5px;
    background: rgb(77, 157, 249) !important;
    border: 2px solid #fff !important;
    box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
}

.foreign-thai .card-body{
    padding: 0;
    border-radius: 5px;
    color: #fff;
}

.foreign-thai.lotto .card-body{
    background: #fff;
    color: #000;
    border-radius: 0;
    padding: 10px 5px;
}

.foreign-thai.lotto .card-body span{
    color: #fff;
     border-radius: 5px;
    background: rgb(77, 157, 249);
    border: 2px solid #fff !important;
}

.foreign-thai .info{
    border-radius: 5px;
}


.government .title-type {
    background: transparent;
}

.government p.title-type{
        font-size: 16px;
    margin: 5px 0 !important;
}

.government{
    border: none;
    background-color: transparent;
}

.government .title-update {
    text-align: center;
    font-size: 16px;
    padding: 15px;
    color: #fff;
    border-radius: 10px 10px 0 0;
    background: #4d9df9;
    margin: 0;
}

.government .card{
    background: #fff;
    border: 2px solid #fff !important;
}

.government .card-body{
    padding: 0;
}

.government .info{
    /* background: #4d9df9;  fallback for old browsers */
}

.government .number {
    padding: 10px 5px;
    background: rgb(77, 157, 249);
}

.government .info:first-child{
    border-radius: 15px 15px 0 0;
}
.mala.card{
     border: 1px solid #6f369e;
     background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */  
}
.mala .info{}

.hanoi.card{
    border: 1px solid #6f369e;
     background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.hanoi .info{}

.laos.card{
    border: 1px solid #6f369e;
    background: #8E2DE2;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #4A00E0, #8E2DE2);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #4A00E0, #8E2DE2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.laos .info{}


/* หวยหุ้น */

/* สีส่วนเลขอั้น */
.input-group-red .popupCart .lists .ranking-number{
    border: 1px solid #dc3545 !important;
}
.input-group-red .input-group-text{
    color: #fff;
    background-color: #dc3545;
}
.input-group-red .form-control{
    border: 1px solid #dc3545;
}

/*เพิ่มเติม 26/11*/

.contentResult .card-body h1 {
    margin-top: 30px;
    color: #008800;
}

.contentResult .card-body .close-info{
    color: #003399 !important;
}

.contentResult .title {
    text-align: center;
    width: 100%;
    color: rgba(26, 26, 26, 0.6);
    margin: 0px 0px 2px 0px;
}

.contentResult .number {
    font-size: 34px;
}

.contentResult .card-lists .card-header {
    height: 40px;
}

.contentResult .card-lists .number {
    font-size: 20px;
    margin: 0;
}

.contentResult .card-lists.active-first-number .text-primary,
.contentResult .card-lists.active-sixteen .text-primary{
    color: #fff !important;
}

.contentResult .card-lists .text-primary {
    color: #4d9df9 !important;
}

.banner-link img {
    width: 100%;
    height: auto;
}

footer {
    background: #252525;
    font-size: 14px;
    font-weight: 300;
}

.menu-footer{
    width: 60%;
    position: fixed;
    bottom: 20px;
    left: 20%;
    right: 0;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 0 20px;
    margin: 0 1%;
    background: rgb(77, 157, 249);
    display: flex;
    align-items: center;
    z-index: 99;
}

.menu-footer .col-nav{
    width: calc((100% / 5) - 15px);
    float: left;
    margin: 10px 5px;
    text-align: center;
}

.menu-footer .col-nav a {
    display: block;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.menu-footer .col-nav a img{
    width: 80px;
    margin: 0 auto;
}

.menu-footer .col-nav.img-center{
    width: 200px;
    display: inline-block;
    margin: 0;
    position: relative;
}

.menu-footer .col-nav.img-center a img{
       width: 250px;
    position: absolute;
    left: -25px;
    z-index: 2;
}

.toast{
    width: 50%;
    position: fixed;
    top: 0;
    left: 25%;
    right: 25%;
    padding: 20px;
    z-index: 99;
    font-size: 16px;
    color: #fff;
    font-weight: 300;
}

.toast .toast-header{
    font-size: 20px;
}
.pagination .page-link{
    color: #27a5b5;
}
.pagination .page-item.active .page-link{
    background-color: #27a5b5;
    border-color: #27a5b5;
}

.badge{
    background: #0066ff;
    color: rgb(255, 255, 255);
    padding: 10px 30px;
    border-radius: 5px;
    font-size: 16px;
    margin: 15px 0;
}
.process{
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 20px 0;
}

.process h1{
        background: #27a5b5;
    margin: 0 30px;
    padding: 10px 20px;
    border-radius: 40px;
    margin-bottom: 20px;
    border: 1px solid #fff;
    color: #fff !important;
}
.process .text-danger {
    color: #003399!important;
}

.btn-outline-warning {
    padding: 15px 0;
    color: #000;
   background: linear-gradient(356.26deg, rgb(219, 235, 255) 3.16%, rgb(255, 255, 255) 59.89%);
    background-image: none;
    border: 1px solid rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}

.btn-outline-warning:hover{
    color: #fff;
    background: #006600;
    border-color: rgb(255, 255, 255);
}
.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle{
    color: #ffffff;
    border-radius: 5px;
    background: #006600;
    border: 1px solid #fff !important;
}


/* responsive mobile*/



@media (max-width: 575.98px) {
    div.wrapper{
        margin-bottom: 130px;
    }

    .banner-top {
        height: 200px;
        margin-bottom: 0;
        overflow: hidden;
    }

	.nav-mobile{
        background: #e7f3f5;
    }
    
    .icon-alert.mobile{
        display: block;
        font-size: 26px;
        margin: 0 10px;
        color: #000;
    }

    .nav-mobile .text-white{
        color: #343a40 !important;
        font-size: 18px;
        line-height: 36px;
    }

    .close-time {
        font-size: 12px;
    }
    .title-head .w75{
        width: 75%;
        font-size: 16px;
    }
    .money_mobile a {
        color: #343a40;
        font-size: 12px;
        padding: 5px;
        display: block;
        border: 2px solid #000;
        border-radius: 5px;
    
    }

    .transfer-bank{
        padding: 0 5px 20px;
        margin: 0;
    }

    .money_mobile a img {
        width: 30px;
        height: auto;
        margin-right: 5px;
    }

    .nav-menu .navbar-brand.mx-auto {
                margin-top: 0;
        margin-left: 0 !important;
        padding: 0;
    }

    .nav-menu .navbar-brand .logo-demo img {
        width: auto;
        height: 70px !important;
    }

    .nav-menu .navbar-brand img {
        width: auto;
        height: 50px;
    }

    .nav-menu .navbar-brand span {
        font-size: 14px;
        letter-spacing: 1px;
        margin: 10px 5px;
        /*        display: none;*/
    }

    .nav-menu .navbar-collapse {
        margin: 5px 0;
        border-top: 1px solid #fff;
    }
    .nav-menu .navbar-collapse .badge{
        width: 25px;
        height: 25px;
        padding: 3px;
        margin: -5px;
        font-size: 14px;
        font-weight: normal;
    }

    .nav-menu .nav-item .nav-link span {
        width: 25px;
        display: block;
        float: left;
        text-align: center;
    }

    .content-setting-number button {
        width: 32.1%;
        height: 38px;
        margin: 2px 1px;
        font-size: 10px;
        line-height: 40px;
    }
    .content-setting-number button span{
        height: 40px;
    }

    .content-setting-number button:nth-child(7),
    .content-setting-number button:nth-child(8){
        width: 48.6%;
    }

    .content-setting-number button:first-child {
        margin-left: 1%;
    }

    .popupCart .setting .form-price .box__chip-lists {
        height: auto;
        display: inline-block;
    }

    .popupCart .box-confirm h4.text-danger {
        text-align: left;
    }

    .lotto-navigation .col-nav,
    .lotto-navigation .col-nav {
        width: calc((100% / 4) - 4px);
        margin: 2px;
    }

    .lotto-navigation .col-nav.w5{
        /* width: 48%; */
    }

    #box-numbers .card-body {
        padding: 0;
    }
    .keyboard-number{
        display: inline-block;
    }

    .keyboard-number .group button.delete{
        font-size: 22px;
    }
    .keyboard-number .group button.enter,
    .keyboard-number .group button.cancel {
        font-size: 14px;
    }

    .keyboard-number .group button{
        height: 50px;
        font-size: 16px;
        margin: 2px;
        font-weight: 500;
    }

    /* .keyboard-number .group:last-child button {
        width: calc(100% - 5px + 0.8px);
    } */
    .contentResult .card-lists{
        box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 10px;
    }
    .contentResult .card-lists .card-header {
        height: 60px;   
        border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    }

    .card .card-header p {
        font-size: 14px;
        font-weight: 300;
    }

    .card .card-header p.float-left{
        width: 100%;
        text-align: center !important;
    }

    .card .card-header span{
        width: 40%;
        text-align: left !important;
        float: left;
        font-size: 16px;
    }
    .card .card-header p.text-left {
        font-size: 18px;
        font-weight: 500;
    }

    .contentResult .col-6 .number {
        font-size: 20px;
    }

    .lotto-navigation .col-nav a {
        font-size: 12px;
        font-weight: 500;
        padding: 10px 5px;
        line-height: 15px;
        margin: 0 auto;
    }

    .lotto-navigation .col-nav a i{
        font-size: 30px;

    }

    .box-recently{
        margin-bottom: 100px;
    }

    .card-title {
        padding: 20px;
    }
    
    .content-play a {
        margin: 0;
    }

    .content-play a.yeekeeH .info{
        padding: 5px 10px !important;
    }

    .content-play a.yeekee .info {
        padding: 5px 2px;
        font-size: 10px;
        letter-spacing: 0;
    }

    .content-play a.yeekee.yeekee5 .info{
        font-size: 12px;
        padding: 5px 2px;
    }

    .content-play a.yeekee.yeekee5 .time{
        font-size: 10px;
    }

    .content-play a.yeekee .info .logo,
    .group-button a .status-countdown .logo{
        width: 22px;
        height: 22px;
        padding: 2px 0 0;
        margin-top: 14px;
    }

    .content-play a.yeekee .info .logo img,
    .group-button a .status-countdown .logo img{
        height: 18px !important;
    }

    .content-play a.lotto .info {
        padding: 5px 5px;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .content-play a.yeekee .time{
        font-size: 10px;
    }

    .cart-item-lists .number {
        width: 55%;
    }

    .cart-item-lists h2 {
        font-size: 14px;
    }

    .popupCart .content .lists table tbody tr td {
        font-size: 12px;
        font-weight: 500;
    }

    .group-button a .status-countdown{
        font-size: 16px;
    }

    .group-button a .topic-head .logo{
        width: 25px;
        height: 25px;
        margin-top: 6px;
    }

    .group-button a .info {
        font-size: 9px;
        line-height: 34px;
    }

    .group-button a .time{
        font-size: 10px;
    }

    .group-button a .topic-head{
        margin: 5px auto 0;
        padding: 2px 0 0;
    }

    .group-button a .well{
        margin: 0;
    }

    .content-play a {
        margin: 0 0 10px;
    }
    .flag-icon {
        width: 20px !important;
        height: 20px !important;
        line-height: 30px !important;
        margin-top: 0 !important;
    }

    .content-play a.lotto .time{
        font-size: 11px;
    }

    .content-play a.lotto .btn-play{
        height: 35px;
        font-size: 14px;
    }

    .yeekee-tab-navigation .nav-navigation li{
        width: 50%;
        float: left;
        padding: 0 5px !important;
    }

    .nav-navigation li a{
        padding: 10px !important;
        font-size: 16px;
        height: 45px;
        line-height: 20px;
    }

    .popupCart .box-confirm h4{
        text-align: center;
    }

    .navigation-transaction ul li .dropdown .dropdown-menu{
        width: 100%;
    }
    .navigation-transaction ul li .dropdown a{
        font-size: 11px;
        line-height: 31px;
        padding: 10px 5px;
    }

    .box-calendar .card-body{
        padding: 0;
    }

    .group-button a.status-close .close-time{
        font-size: 16px;
        padding: 10px 20px;
    }

    .group-button a .status-countdown-custom{
        font-size: 16px;
        padding: 10px 20px;
    }

    .content-two-option button{    
        height: 35px;
        margin: 2px 1px;
        font-size: 10px;
        line-height: 12px;
    }
    .af-content .navigation-transaction ul{
        display: block;
    }
    .af-content .navigation-transaction ul li{
        width: calc((100% / 2) - 0px);
        padding: 5px;
        margin-bottom: 0;
        float: left;
    }

    .af-content .card.withdraw p{
        font-size: 14px;
        margin: 0;
    }

    .af-content .card.withdraw p.day{
        font-size: 12px;
    }

    .menu-footer{
       width: 96%;
        margin: 0 2%;
        left: 0;
        padding: 0 10px;
    }
    .menu-footer .col-nav a img{
        width: 34px;
    }

    .menu-footer .col-nav a{
        font-size: 12px;
        padding: 0;
    }

    .menu-footer .col-nav.img-center{
         width: 100px;
    }

    .menu-footer .col-nav.img-center a img{
        width: 110px;
        left: -5px;
    }
    .logoCenter{
        text-align: left;
    }
    .popMenu .nav-mobile{
        padding: 10px;
    }

    .popMenu .nav-mobile .nav-link{
        font-size: 12px;
        font-weight: 500;
        margin: 0;
    }

    .popMenu .nav-mobile .nav-link .bg-box{
        width: 65px;
        height: 65px;
        padding: 8px 0;
        margin-bottom: 10px;
    }

    .popMenu .nav-mobile .nav-link .bg-box img {
        width: 50px;
        height: auto;
    }

    .result-content .border-danger.H .border-warning{
        font-size: 14px;
        padding: 0;
    }

    #card-result-yeekee .title-type{
        text-align: center;
    }

    #card-result-yeekee-vip .title-type{
        text-align: center;
    }

    .content-play a.yeekee{
        height: 140px;
        padding: 5px 0;
    }

    .content-play a.yeekee .btn-play{
        width: 90%;
        height: 35px;
        font-size: 14px;
        margin: 0 auto;
    }

    .content-play a.yeekeeH::after{
        bottom: -170px;
        right: -100px;
    }

    .content-play a.yeekeeH-life::after{
        bottom: -170px;
        right: -100px;
    }

    .content-play a.yeekee5::after{
        bottom: -30px;
        left: -10px;
    }

    .content-play a.yeekee3::after{
        bottom: -30px;
        left: -10px;
    }

    .content-play a.yeekee3vip::after{
        bottom: -30px;
        left: -10px;
    }

    .content-play a.lotto{
        height: 160px;
        padding: 5px 2px;
    }

    .title-head .homeProfile a{
        top: 15px;
        left: 5px;
        font-size: 10px;
    }

    .title-head h4{
        font-size: 12px;
    }

    .create-tab .tab-nav-style-4.nav-tabs .nav-link.active{
        border-radius: 0;
    }

    .content-create .create-tab .nav-tabs.tabsNo .nav-link{
        width: 48.6%;
    }

    .create-tab .tab-nav-style-4.nav-tabs .nav-item{
        width: 20%;
        font-size: 12px;
        line-height: 22px;
    }

    .tab-nav-style-4.nav-tabs .nav-item .nav-link{
        padding: 5px;
    }

    .create-tab .btn-group-sp-4 li{
        width: calc(20% - 3px + 1px);
    }

    .create-tab .btn-group-sp-4 li .btn{
        font-size: 12px;
    }

    .popupCart .lists{
        margin: 0 5px;
    }

    .all-item-number .bg-box .topic_head{
        font-size: 14px;
    }

    .all-item-number .detail-number h5 {
        font-size: 14px;
    }

    .card-body .title-type {
        font-size: 14px;
    }

}

@media screen and (max-width: 800px) {

    .tab-wrap {
        width: 100%
    }
}