:root {
    --primary_text: #FFFFFF;
    --primary_bg: #000000;
    --grey_color: #CCCCCC;
    --input_bg: #324942;
    --primary_border: #F4B120;
    --primary_btn: #FFDF1B;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    position: relative;
    background: var(--primary_bg);
    color: var(--primary_text);
    box-sizing: border-box;
}

/* close style bootstrap */
.form-group {
    margin-bottom: 5px;
}

.btn.focus,
.btn:focus {
    box-shadow: unset;
}

.form-control:focus {
    color: var(--primary_text);
    background-color: var(--input_bg);
    border-color: unset;
    box-shadow: unset;
}

.form-control,
.custom-select,
.form-control:disabled,
.form-control[readonly],
.input input[data-role=none]:not([type=checkbox]),
.input select[data-role=none]:not([type=checkbox]),
.noico:not([type=checkbox]) {
    background-color: var(--input_bg);
    color: var(--primary_text);
    border: 1px solid;
    border-color: var(--primary_border);
}

/* header */
.wrap {
    position: relative;
    max-width: 1024px;
    height: 100%;
    overflow-y: auto;
    margin: auto;
    padding-bottom: 60px;
}

.wrap[data-page=""] {
    padding: 0px;
}

.wrap::-webkit-scrollbar {
    width: 0px;
}

.header {
    width: 100%;
    height: 60px;
    color: var(--primary_text);
    position: relative;
    padding: 0 5px;
}

.header ul {
    margin: 0;
    padding: 0;
    height: 100%;
}

.header ul li {
    list-style: none;
    width: 33.33%;
    margin: auto;
}

.header ul li.logo {
    text-align: center;
}
.header ul li.logo img{
    width: 106px;
    height: 63px;
}
.header ul li.lang {
    text-align: right;
}

.mySwiperBanner {
    width: 100%;
    height: 100%;
}

.mySwiperBanner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiperBanner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

.banner-slider {
    width: 100%;
    /* height: 160px; */
}

.banner-slider div {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.run-marquee {
    width: 100%;
    height: 25px;
    margin: 5px 0;
    border: 1px solid;
    border-color: rgb(244 177 32 / 30%);
    text-shadow: 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange;
}

.btn-log-res .btn {
    width: 50%;
    height: 50px;
    line-height: 1.7;
    border-radius: unset;
    border: 1px solid;
    background: var(--primary_bg);
    color: #e9e99e;
    border-color: var(--primary_border);
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange, 1px 1px 1px orange;
}

.btn-log-res .btn-login {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.btn-log-res .btn-register {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.content {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px 35px;
    /* padding-bottom: 100px; */
}

.content .lobby {
    padding: 4px 10px;
    text-align: center;
}

[data-page=""] .content .lobby {
    padding: 4px;
}

.lobby .game_name {
    color: gold;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}

.content .lobby a {
    display: block;
    max-width: 200px;
    margin: auto;
}

.content .lobby img {
    width: 100%;
    object-fit: none;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 64px;
    width: 100%;
    max-width: 1024px;
    margin: auto;
    background: var(--primary_bg);
}

.footer ul {
    margin: 0;
    padding: 0;
    height: 100%;
}

.footer ul li {
    list-style: none;
    width: 20%;
    text-align: center;
    margin: auto;
}

.footer ul li a {
    color: var(--primary_text);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
}

.footer ul li a span {
    padding-top: 2px;
    color: var(--primary_text);
}

.footer ul li a img {
    width: 18px;
    height: 18px;
}

.footer ul li .btn-home {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    border: 1px solid;
    border-color: var(--primary_border);
    border-radius: 100px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    display: flex;
    background: var(--primary_bg);
}

.footer ul li .btn-home img {
    margin: auto;
    width: 30px;
    height: 30px;
}

#myModalLogin .modal-content,
#myModalRegister .modal-content {
    background-color: var(--primary_bg);
    border: 1px solid;
    border-color: var(--primary_border);
    border-radius: 10px;
}

#myModalLogin .modal-dialog,
#myModalRegister .modal-dialog {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 95%;
}

#myModalLogin .modal-header,
#myModalRegister .modal-header {
    border-bottom: 1px solid;
    border-color: var(--primary_border);
    padding: 5px;
}

#myModalLogin .modal-footer,
#myModalRegister .modal-footer {
    border: unset;
}

#myModalLogin .modal-footer .btn,
#myModalRegister .modal-footer .btn {
    background: var(--primary_btn);
    color: var(--primary_bg);
    padding: 2px;
    width: 200px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: bold;
}

#myModalLogin .modal-title,
#myModalRegister .modal-title {
    text-transform: uppercase;
}

.form-control::-webkit-input-placeholder {
    color: var(--primary_text);
}

@media screen and (min-width:768px) {
    .banner-slider {
        width: 100%;
        height: 280px;
    }

    .footer ul li a img {
        width: 20px;
        height: 20px;
    }
}

.list a,
.copy {
    color: #fff;
    background-color: transparent;
    border: 1px solid var(--primary_border);
}

.slots-tab a {
    background-color: var(--primary_text);
}

.slots-contant a span {
    color: var(--primary_text);
    background-color: #000000;
}

.center .list a:hover,
.btn.gradient:hover {
    color: var(--primary_text);
    background-color: var(--primary_border);
    text-decoration: none;
}

.ref_link.btn,
.btn.gradient,
.center-tab a.active,
.center-tab a:hover,
.slots-tab a.active,
.slots-tab a:hover,
.btn-game,
.list a:hover {
    color: var(--primary_text) !important;
    background-color: var(--primary_border) !important;
}

.center-tab a.active span,
.center-tab a:hover span {
    color: var(--primary_text);
}

#captchaLb {
    margin-top: 10px;
}

.content-info .info-title {
    text-transform: uppercase;
    font-weight: 600;
}

.content-info .contact-list {
    padding: 10px;
}

.content-info .contact-list li {
    padding: 4px;
    background-color: #272727;
    box-shadow: 0px 0px 5px 5px #373737;
    border-radius: 6px;
}

.content-info .contact-list li a {
    color: #b9b9b9;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
}

.content-info .contact-list li a img {
    /* width: 18%; */
    padding: 4px 8px;
}
.contact-list .tel a{
    display: flex;
    align-items: center;
}
.contact-list .tel_num span{
    display: block;
}
.promo-content .modal-content {
    background-color: #000000;
}
.contact-list span{
    color: #a1a1a1;
    padding-left: 10px;
}
.lb_msg,
.lb-msg {
    color: #FFC107 !important;
}

/* For Iphone 14 Pro */
/* @media only screen and (width: 393px) and (height: 852px) and (-webkit-device-pixel-ratio: 3) {
    .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
} */

.support {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.support .bg {
    width: 15%;
}

.cust_service {
    width: 65%;
}

.support .bg img {
    width: 100%;
}

.cust_service .logo img {
    width: 60px;
}

.cust_service .service {
    width: 100%;
    height: 80px;
}

.service .text {
    width: 100%;
    text-align: center;
    padding-top: 10px;
}

.service .text h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 4px;
}

.cust_service .number {
    width: 60%;
}

.number .tel img {
    width: 24px;
}

.number .tel span {
    font-size: 12px;
    color: #e9e99e;
    text-shadow: 1px 1px 1px orange;
}

.form-control-plaintext {
    color: var(--primary_text);
}

.banner_service {
    margin-bottom: 75px;
}

.banner_service img {
    width: 100%;
}

.page.page-game li span {
    color: #ffffff;
}

.game-table td {
    white-space: nowrap;
    border: 1px solid #eee;
}

.form-transfer label {
    color: #000;
}

.form-transfer .btn {
    background-color: #000;
    color: #fff;
}

.transfer label a,
.transfer label span,
.transfer label a p {
    color: #c1c1c1;
}

.transfer label a {
    display: inline-flex;
    line-height: 2;
}

.transfer label a p {
    padding: 0px 4px;
}

.report-list p {
    display: inline-block;
    width: auto;
    vertical-align: top;
    font-size: 12px;
    color: #fff;
}

.report-list p:first-child {
    width: 30%;
    font-weight: 700;
}

/* MENU-LEFT */

.OpenMenuButton {
    cursor: pointer;
}

.DrawerMenu {
    position: fixed;
    z-index: 99;
    width: 90vw;
    height: 100vh;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: -ms-grid;
    display: grid;
    grid-template-areas: 'MENU OVERLAY';
    -ms-grid-columns: 15fr 5fr;
    grid-template-columns: 15fr 5fr
}

@media (min-width: 30em) {

    .DrawerMenu {
        -ms-grid-columns: 5fr 10fr;
        grid-template-columns: 5fr 10fr;
    }
}

#DrawerMenuTrigger:checked~.DrawerMenu {
    -webkit-transform: none;
    transform: none;
}

.MenuContainer {
    grid-area: 'MENU';
    background-color: #000;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.Menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    padding-top: 20px;
}

.Menu a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    padding: 12px 15px 12px 50px;
    border-bottom: 1px solid #bdbdbd;
}

.Menu a+a {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.MenuOverlay {
    grid-area: 'OVERLAY';
}

.home {
    background-image: url(../../images/b3kh/icon/home.png);
    background-position: 10px 5px;
    background-repeat: no-repeat;
}

#divPromotions .modal-content {
    width: 100%;
    max-width: 720px;
    margin: auto;
}
#divPromotions .promo-content p{
    color: #fff;
    font-size: 13px;
}
.bank-details .form-control-plaintext{
    font-size: 14px;
}
.tblBonus td .provider_name{
    color: #fff;
}
.provider_logo, .preferred_bank {
    padding: 6px 10px; 
}

.provider_logo h4, .preferred_bank h4 {
    color: orange;
    font-size: 17px;
    text-decoration: underline;
}

.provider_logo img {
    width: 100%;
}

.preferred_bank ul {
    display: flex;
    flex-wrap: nowrap;
}

.preferred_bank ul li {
    width: 18%;
}

.preferred_bank ul li img {
    width: 100%;
}