@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --body-color: #24262b;
    --sidebar-color: #251e18;
    --primary-color: #695CFE;
    --primary-color-light: #F6F5FF;
    --search-bar: #272a30;
    --toggle-color: #DDD;
    --text-color: #fff;
    --header: #24262b;
    --dark-white: #1a1b1f;
    --dark-white2: #1c1e22;
    --dark-white3: #1c1e22;
    --box-radio: url(../image/download.png);
    --white-dark: #fff;
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.3s ease;
    --tran-05: all 0.3s ease;
    --info-bg: #31343c;
    --vip-table: #0d1325;
    --vip-table-row: #00091e;
}

body {
    min-height: 100vh;
    background-color: var(--body-color);
    transition: var(--tran-05);
    overflow-x: hidden;
    background: #12173d url("../image/bg.jpg");
}

::selection {
    background-color: var(--primary-color);
    color: #fff;
}

body.light {
    --body-color: #E4E9F7;
    --sidebar-color: #fff;
    --primary-color: #3a3b3c;
    --primary-color-light: #3a3b3c;
    --toggle-color: #fff;
    --text-color: #000;
    --search-bar: #f6f7fa;
    --header: #ffffff;
    --white-dark: #000;
    --dark-white: #fff;
    --dark-white2: #f2f2f7;
    --dark-white3: #fff;
    --box-radio: url(../image/download-l.png);
    --info-bg: #ffffff;
    --vip-table: #fff;
    --vip-table-row: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

a {
    color: #fff;
}

a:hover {
    text-decoration: none;
    color: #fff;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    border: none;/
}

a:hover,
a:focus {
    text-decoration: none;
}

button,
button:focus,
button:hover {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

ul,
p,
h1,
h2,
h3,
h4,
h5 {
    margin: 0px;
    padding: 0px;
}

/* width */
::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #272a30;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b08b5f;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #b08b5f;
}

.table-responsive::-webkit-scrollbar {
    width: 0px;
}

input:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.bx-menu1 {
    display: none;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: linear-gradient(90deg, rgba(21,20,22,1) 0%, rgba(35,30,23,1) 100%);
    z-index: 100;
    transition: all 0.5s ease;
}

.sidebar.close {
    width: 78px;
    opacity: 1 !important;
    text-shadow: none;
}

.sidebar .logo-details {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
}

.sidebar .logo-details i {
    font-size: 30px;
    color: #fff;
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
}

.sidebar .logo-details .logo_name {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.sidebar.close .logo-details .logo_name {
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links {
    height: 100%;
    padding: 50px 0 150px 0;
    overflow: auto;
}

.sidebar.close .nav-links {
    overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar {
    display: none;
}

.sidebar .nav-links li {
    position: relative;
    list-style: none;
    transition: all 0.4s ease;
}

.sidebar .nav-links li:hover {}

.sidebar .nav-links li .iocn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar.close .nav-links li .iocn-link {
    display: block
}

.sidebar .nav-links li i {}

.sidebar .nav-links li.showMenu i.arrow {
    transform: rotate(-180deg);
}

.sidebar.close .nav-links i.arrow {
    display: none;
}

.sidebar .nav-links li a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar .nav-links li a .link_name {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    transition: all 0.4s ease;
    padding-top: 5px;
}

.sidebar.close .nav-links li a .link_name {
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li .sub-menu {
    padding: 6px 6px 14px 80px;
    margin-top: -10px;
    background: none;
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu {
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: #fff;
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.sidebar .nav-links li .sub-menu a:hover {
    opacity: 1;
}

.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
}

.sidebar.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}

.hide-op .link_name {
    display: none !important;
}

.sidebar.close .nav-links li .sub-menu .link_name {
    font-size: 18px;
    opacity: 1;
    display: block;
    position: relative;
    left: -52px;
    text-shadow: none;
    font-weight: 100;
    font-size: 12px;
    width: 94px;
}

.sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li:hover .sub-menu.blank {
    top: 50%;
    transform: translateY(-50%);
}

.sidebar .profile-details {
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #b08b5f;
    padding: 12px 0;
    transition: all 0.5s ease;
}

.sidebar.close .profile-details {}

.sidebar.close .profile-details {
    width: 78px;
}

.sidebar .profile-details .profile-content {
    display: flex;
    align-items: center;
}

.sidebar .profile-details img {
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: #1d1b31;
    transition: all 0.5s ease;
}

.sidebar.close .profile-details img {
    padding: 10px;
}

.sidebar .profile-details .profile_name,
.sidebar .profile-details .job {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details p,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job {
    display: none;
}

.sidebar .profile-details .job {
    font-size: 12px;
}

.home-section {
    position: relative;
    height: 100%;
    left: 260px;
    width: calc(100% - 260px);
    transition: all 0.5s ease;
    color: var(--text-color);
}

.sidebar.close~.home-section {
    left: 78px;
    width: calc(100% - 78px);
}

.home-section .home-content {
    display: block;
    align-items: center;
    padding: 1vw;
    flex-direction: column;
    width: 100%;
    max-width: 1920px;
    margin: 0px auto;
    padding-top: 85px;
}

.home-section .home-content .bx-menu,
.home-section .home-content .text {
    color: #11101d;
    font-size: 27px;
}

.home-section .home-content .bx-menu {
    margin: 0 15px;
    cursor: pointer;
    position: absolute;
    left: -35px;
    background: #1a1c20;
    color: #fff;
    z-index: 1000;
    border-radius: 40px;
    padding: 7px;
}

.home-section .home-content .text {
    font-size: 26px;
    font-weight: 600;
}

.home-fiba-countdown-numbers {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    height: 0px;
    width: 245px;
    font-size: 14px;
    transform: translateY(13px);
    position: absolute;
    top: 35%;
    left: 85%;
    transform: translate(-50%, -50%);
  }
  
  .home-fiba-countdown-numbers span {
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    /* font-family: "digitalnumber"; */
    font-size: 22px;
    color: #7fea73;
    line-height: 36px;
  }

  .desktop-view{
    display: block;
}

.mobile-view{
    display: none;
}

@media (max-width:420px) {
    .sidebar.close .nav-links li .sub-menu {
        display: none;
    }
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.label {
    width: 65px;
    height: 35px;
    background-color: #b08b5f;
    display: flex;
    border-radius: 50px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin: 0px;
    top: 1px;
}

.ball {
    width: 39px;
    height: 37px;
    /* background-color:white; */
    position: absolute;
    top: -1px;
    left: 0px;
    border-radius: 50%;
    transition: transform 0.2s linear;
    background: linear-gradient(to right, rgba(59, 88, 26, 1) 0%, rgba(52, 55, 63, 1) 47%, rgba(52, 55, 63, 1) 100%);
    background: #b08b5f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox:checked+.label .ball {
    transform: translateX(35px);
}

.icon-change {
    color: pink;
    background: url("../image/bxs-moon.svg");
    position: absolute;
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1);
}

.moon {
    color: pink;
    background: url("../image/bxs-moon.svg");
    position: absolute;
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1);
}

.sun {
    color: yellow;
    background: url("../image/bxs-sun.svg");
    position: absolute;
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1);
}

.side-img {
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sidebar .nav-links li:hover a {
    background: #6e5037;
    padding-right: 20px;
    border-radius: 0px 30px 30px 0px;
}

hr.hr-style {
    margin: 20px;
    border-top: 1px solid #151619;
    position: relative;
}

hr.hr-style:after {
    border-top: 1px solid #32353b;
    position: absolute;
    height: 1px;
    content: '';
    width: 100%;
}

.sidebar .nav-links li:hover a.mode-wrap {
    background: none;
    padding: 0px;
}

.mode-wrap {
    display: flex;
    justify-content: center;
}

.mode-clr {
    display: flex;
    justify-content: space-between;
    width: 150px;
    color: #fff;
}

span.mode-text.text {
    margin-left: 19px;
    font-size: 11px;
    font-weight: bold;
}

.mode-clr i {
    padding: 7px;
    font-size: 18px;
    position: relative;
    top: 1px;
}

.rtxt {
    display: flex;
    flex-direction: column;
}

.txt-curr {
    font-size: 12px;
    text-align: end;
    color: #5f5f5f;
}

.checkboxs {
    opacity: 0;
    position: absolute;
}

.checkboxs:checked+.label .ball {
    transform: translateX(35px);
}

.icon-changes {
    color: pink;
    background: url("../image/bxs-moon.svg");
    position: absolute;
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1);
}

.sicon-changes {
    color: pink;
    background: url("../image/bxs-moon.svg");
    position: absolute;
    height: 20px;
    width: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1);
}

.dropdown {
    position: relative;
    height: 40px;
    margin-bottom: 20px;
}

.dropdown::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 1000;
    width: 8px;
    height: 8px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(42deg);
    transition: 0.5s;
    pointer-events: none;
}

.dropdown.active::before {
    top: 17px;
    transform: rotate(316deg);
}

.dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: var(--search-bar);
    font-size: 14px;
    border: none;
    outline: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 8px 14px;
    border-radius: 30px;
    color: #d4af6e;
}

.dropdown .options {
    position: absolute;
    bottom: 45px;
    width: 100%;
    background: var(--search-bar);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

.dropdown.active .options {
    display: block;
}

.dropdown .options div {
    padding: 10px 20px;
    cursor: pointer;
}

.dropdown .options div:hover {
    background: #62baea;
    color: #fff;
}

.side-in-box .link_name {
    display: flex;
    flex-direction: column;
}

.spt {
    display: flex;
    align-items: center;
}

.ico-spt {
    background:  linear-gradient(90deg, rgba(97,69,48,1) 0%, rgba(211,166,110,1) 100%);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 1;
}

.spt-btn {
    background: #292c32;
    color: #b1b1b1;
    padding: 8px 20px;
    position: relative;
    left: -6px;
    font-size: 14px;
    border-radius: 0px 30px 30px 0px;
}

.scm {
    display: flex;
    justify-content: center;
}

.scm-in {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    gap: 10px;
}

.mode-wrap2 p {
    text-align: center;
    color: #fff;
}

.scm-in a {
    font-size: 26px;
    background: none !important;
    padding: 0px !important;
}

.clr-b {
    color: #26a7e8;
}

.clr-gl {
    color: #4fce5d;
}

.clr-g {
    color: #7bb32e;
    fill: #7bb32e;
}

.clr-y {
    color: #c98e10;
}

.clr-f {
    color: #1973eb;
}

.clr-r {
    color: #f13e6b;
}

.scm-in a:hover {
    background: none !important;
    padding: 0px !important;
}

.show-slide {
    display: none;
}

.sidebar.close .show-slide {
    display: block;
}

.sidebar.close img:hover,
.sidebar.close .active img {
    background: linear-gradient(90deg, rgba(90,63,44,1) 0%, rgba(229,181,120,1) 100%);
    border-radius: 30px;
    padding: 6px;
}

.sidebar.close li:hover a {
    background: none;
}

.sidebar.close .mode-wrap {
    display: none;
}

.clr-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #2d3035;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    color: #fff;
    font-weight: 100;
    font-size: 15px;
    cursor: pointer;
}

li.in-slc:hover .options-in {
    opacity: 1;
}

.options-in {
    opacity: 0;
    position: absolute;
    top: -45px;
    width: 136px;
    left: 65px;
    border-radius: 5px;
}

.option-show {
    background: var(--dark-white2);
    padding-bottom: 18px;
    position: relative;
    bottom: 200px;
    border-radius: 18px;
    padding: 10px;
}

.opt-itm {
    color: var(--text-color);
    text-shadow: none;
    font-weight: 100;
    font-size: 11px;
    padding: 5px;
    text-align: left;
    margin: 5px;
    border: 1px solid #b08b5f00;
    cursor: pointer;
}

li.in-slc {
    position: relative;
}

.sidebar.close li.in-slc:hover {}

.sidebar.close li.in-slc:hover .bg-hover {
    background: #292c32;
    position: absolute;
    padding: 5px;
    width: 136px;
    left: 19px;
    height: 39px;
    z-index: -1;
    border-radius: 18px;
    top: 1px;
    border: 1px solid #b08b5f;
}

.sidebar.close li.in-slc:hover {}

.sidebar.close li.in-slc:hover .clr-box {
    background: none;
    opacity: 0;
}

.opt-itm.active,
.opt-itm:hover {
    border: 1px solid #b08b5f;
    border-radius: 18px;
}

.opt-itm.active:after,
.opt-itm:hover:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f192";
    position: absolute;
    right: 19px;
    color: #b08b5f;
}

.link_name2:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
    position: absolute;
    right: 0px;
    transform: rotate(270deg);
}

.hide-op .link_name2 {
    display: none;
    opacity: 0;
}

.mode-clr2 {
    display: flex;
    justify-content: space-between;
    width: 157px;
    background: #292c32;
    border-radius: 18px;
    padding: 1px 8px;
    align-items: center;
    height: 41px;
    position: absolute;
    left: -75px;
    top: -20px;
    border: 1px solid #b08b5f;
}

.mode-clr2 .rtxt {
    font-size: 12px;
    color: #fff;
}

.mode-clr2 label {
    width: 61px;
    height: 30px;
    margin: 0px;
    color: #fff;
}

.mode-clr2 .ball {
    width: 31px;
    height: 30px;
    top: 0px;
}

li.hide-op {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.sidebar.close .box-mode {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #2d3035;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    color: #fff;
    font-weight: 100;
    font-size: 15px;
    cursor: pointer;
}

.ico-spt2 {
    background: linear-gradient(90deg, rgba(97,69,48,1) 0%, rgba(211,166,110,1) 100%)!important;
}

.text-out {
    font-size: 12px;
    width: 94px !important;
    position: relative;
    left: -28px !important;
}

.sidebar.close .mode-wrap2 p {
    display: none;
}

.sidebar.close .scm-in {
    display: grid;
    grid-template-columns: repeat(1, 2fr);
    gap: 10px;
}

.sidebar.close .mode-clr {
    position: relative;
    left: 57px;
    background: #292c32;
    border-radius: 18px;
    width: 260px !important;
    opacity: 0;
    height: 40px;
    transition: all 0.4s ease;
    border: 1px solid #b08b5f;
}

.sidebar.close .rtxt {
    width: 89px;
    justify-content: center;
    padding-right: 14px;
}

.sidebar .btn-ball {
    opacity: 0;
}

.sidebar.close li.hide-op:hover .mode-clr {
    opacity: 1;
    height: 40px;
    padding: 1px;
}

.sidebar.close .btn-ball {
    opacity: 1;
    left: 19px;
    width: 40px;
    height: 40px;
    top: 0px;
}

.sidebar.close .mode-text {
    margin: 0px;
    text-align: right;
}

.btn-log {
    font-size: 20px;
}

.btn-log i {
    font-size: 25px;
    margin-right: 15px;
}

.btn-log {
    display: flex;
    border: none;
    background: none;
    color: #fff;
    text-align: center;
    margin: 0px auto;
    font-size: 13px;
    align-items: center;
    text-align: center;
}

.btn-log p {
    margin: 0px;
}

.sidebar.close .btn-log i {
    margin: 0px;
}

.sidebar li.hide-op {
    margin: 0px;
}

.sidebar.close li.hide-op {
    margin-top: 10px;
}

.sidebar .nav-links li.active img {
    background: linear-gradient(to right, rgba(59, 88, 26, 1) 0%, rgba(52, 55, 63, 1) 47%, rgba(52, 55, 63, 1) 100%);
    border-radius: 30px;
    padding: 6px;
}

/**********Header************/
.bx-menu2 {
    margin: 0 15px;
    cursor: pointer;
    position: absolute;
    left: -35px;
    background: #b08b5f;
    color: #fff;
    z-index: 1000;
    border-radius: 40px;
    padding: 7px;
    top: 10px;
}

.home-header {
    z-index: 100;
    height: 65px;
    box-shadow: 0px 1px 0px 0px #000;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    position: fixed;
    background: #131927;
    width: calc(100% - 260px);
    /* border-bottom: 1px solid #171290; */
}

.home-header.side-off {
    width: calc(100% - 78px);
}

.header-l {
    display: flex;
    align-items: center;
}

.logo {
    padding: 0px 14px;
    /* margin-right: 20px; */
}

.logo img {
    height: 45px;
}

img {
    max-width: 100%;
}

.search-bar {
    display: flex;
    background: #0d121c;
    height: 43px;
    border-radius: 30px;
    width: 30vw;
    align-items: center;
    border: 1px solid #2b2b30;
}

.input-search {
    background: none;
    border: none;
    width: 100%;
    color: #fff;
}

.search-bar i {
    font-size: 20px;
    color: #a5835b;
    padding: 10px 20px;
}

.header-r {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-r button {
    background: linear-gradient(90deg, rgba(90,63,44,1) 0%, rgba(229,181,120,1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2vw 1vw;
    border-radius: 18px;
    color: #fff;
    text-shadow: 0px 1px 3px #000;
    font-weight: bold;
    font-size: 0.8vw;
}

.btn-signup {
    background: linear-gradient(90deg, rgba(208,160,13,1) 0%, rgba(255,252,173,1) 100%)!important;
}

.btn-sign {
    /* color: #b08b5f !important; */
    text-shadow: none !important;
}

/**********Banner************/
.swiper {
    width: 100%;
    height: 100%;
    padding: 0px 10px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    object-fit: cover;
    border-radius: 18px;
}

.swiper-slide {
    width: auto;
}

/* .swiper-slide:first-child {
    width: 38%;
} */

.swiper-button-next,
.swiper-button-prev {
    background: #fff;
    border-radius: 50px;
    width: 40px;
    height: 40px;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    color: #a3a3a3;
    font-size: 20px;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 1px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: #e0b176;
    font-size: 20px;
    font-weight: bold;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 2px;
}

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

.swiper-slide2 {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**********Product slider************/
.game-wrap {
    display: flex;
    gap: 10px;
}

.gm-image {}

.gm-image img {
    width: 52px;
    margin: 5px;
}

.gm-image2 img {
    height: 6vw;
}

.ply-name {
    color: #929292;
    font-size: 0.5vw;
}

.ply-won {
    font-size: 0.6vw;
}

.wh-txt {
    /* color:#fff; */
}

.gn-txt {
    color: #fff2aa;
}

.gm-detail {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
}

.gm-nm {
    font-size: 0.5vw;
    color: #fff;
}

.product-in {
    display: flex;
    justify-content: space-between;
    background: var(--dark-white);
    padding: 20px;
    border-radius: 25px;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
}

.product-slider {
    display: flex;
    margin: 20px 0px;
    max-width: 100%;
}

.ttl-txt {
    display: flex;
    font-size: 0.8vw;
}

.ttl-slider {
    display: flex;
    align-items: center;
}

.img-ico img {
    height: 30px;
    margin-right: 10px;
}

.pd-item-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    float: left;
    width: 33%;
}

.pd-item-2 {
    width: 30%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.pd-item-3 {
    width: 30%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.yl-txt {
    color: #f5c01f;
    margin-right: 10px;
}

.gn-txt2 {
    color: #5ee419;
    margin-right: 10px;
}

.pk-txt {
    color: #e70b60;
    margin-right: 10px;
}

@-webkit-keyframes shrink {
    0% {
        color: green;
        transform: scale(1);
    }

    100% {
        transform: scale(1);
        color: grey;
    }
}

@keyframes shrink {
    0% {
        color: green;
        transform: scale(1);
    }

    100% {
        transform: scale(1);
        color: grey;
    }
}

@-webkit-keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }

    100% {
        transform: scale(1);
        color: green;
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }

    100% {
        transform: scale(1);
        color: green;
    }
}

/* $. Classes\*----------------------------------------------------------------*/
.animate {
    transform: translate3d(0, 0, 0);
    perspective: 1000;
    filter: blur(0);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transform-origin: center left;
}

.animate--shrink,
.hero__title .slick-current>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: shrink;
    animation-name: shrink;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
}

.animate--grow,
.no-js .hero__title .slick-dupe:nth-child(2)>span,
.hero__title .slick-current+.slick-slide>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-name: grow;
    animation-name: grow;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    tap-highlight-color: transparent;
    padding-top: 15px;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[dir=rtl] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 0;
    outline: none;
}

.slick-vertical .slick-slide::-moz-selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-current {
    position: relative;
}

.hero__title .slick-slide {
    overflow: hidden;
    padding: 0px 0;
}

.hero__title [aria-hidden] {
    transition: 1s;
}

.hero__title .slick-current>span {
    box-sizing: border-box;
    display: block;
}

.no-js .hero__title .slick-dupe:nth-child(2)>span {
    padding: 1em;
}

.hero__title-misc {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: grey;
}

.slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 768px;
}

/* .slider .swiper-slide {
    width: 18%;
}

.slider .swiper-slide:nth-child(2n) {
    width: 18%;
}

.slider .swiper-slide:nth-child(3n) {
    width: 18%;
}

.slider .swiper-slide:first-child {
    width: 37%;
} */

.all-1 .swiper {
    width: 100%;
    height: 100%;
    padding: 0px;
}

.all-1 .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.all-1 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.all-1.swiper-button-prev,
.all-1 .swiper-button-next {
    height: 25px;
    width: 25px;
    top: 29px;
    background-color: white;
    background-size: 14px;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: 0.6s all;
    cursor: pointer;
    background-repeat: no-repeat;
}

.all-1 .swiper-button-prev:hover,
.all-1.swiper-button-next:hover {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.all-1 .swiper-button-prev {
    left: initial;
    right: 35px;
    top: 29px;
    height: 25px;
    width: 25px;
}

.all-1 .swiper-button-next {}

.all-1 .swiper-button-next:after,
.all-1 .swiper-button-prev:after {
    color: #000;
    font-size: 12px;
}

.gm-nm2 {
    /* color:#fff; */
    font-size: 0.7vw;
}

.prv-nm {
    background: #444444;
    font-size: 0.5vw;
    padding: 3px;
    border-radius: 18px;
    color: #fff;
    margin-top: 20px;
    text-align: center;
}

.gm-image2 {}

.all-1 .swiper-card .gm-detail {
    padding-top: 20px;
}

.b-game {
    display: flex;
    flex-direction: column;
    display: flex;
    padding: 15px 10px;
    max-width: 100%;
}

.ttl-all {
    display: block;
}

.lobby-wrap ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0px;
    gap: 20px;
}

.lobby-wrap {
    background: #231e17;
    padding: 20px;
    border-radius: 0px 18px 18px 18px;
}

.lobby-wrap img {
    border-radius: 15px;
}

.wrap-ttl {
    display: inline-block;
    background: var(--dark-white3);
    padding: 10px 20px;
    border-radius: 18px 0px 0px 0px;
    position: relative;
    font-weight: bold;
}

/*.lobby-wrap ul li img{border-radius:20px;}*/
.wrap-ttl span {
    color: #ff7979;
}

.wrap-ttl:after {
    background: var(--box-radio) no-repeat;
    content: "";
    height: 68px;
    width: 83px;
    position: absolute;
    background-size: 100% 100%;
    top: 0px;
    right: -72px;
}

.carousel {
    background: #231e17;
    border-radius: 18px;
}

.carousel-cell {
    width: 100%;
    height: auto;
    margin-right: 10px;
    /* background: #231e17; */
    border-radius: 0px 18px 18px 18px;
    counter-increment: gallery-cell;
}

.carousel-cell:before {
    display: block;
    text-align: center;
    line-height: 200px;
    font-size: 80px;
    color: white;
}

.flickity-prev-next-button {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #b08b5f;
    border-radius: 50px;
}

.flickity-prev-next-button:hover {
    background: #161f64;
}

.flickity-prev-next-button .arrow {
    fill: white;
}

.flickity-prev-next-button.no-svg {
    color: white;
}

.flickity-prev-next-button.previous {
    right: 50px;
    top: -25px;
    left: auto;
}

.flickity-prev-next-button.next {
    right: 0px;
    top: -25px;
}

.lobby {
    flex-direction: column;
    display: flex;
    padding: 20px;
    max-width: 100%;
}

ol.flickity-page-dots {
    display: none;
}

.lobby-all ul {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    list-style: none;
    gap: 25px 0px;
}

.lobby-all ul li img {
    display: block;
    margin: 0px auto;
    border-radius: 10px;
}

.leader-board {
    max-width: 65vw;
    margin: 0px auto;
    width: 100%;
    margin-top: 40px;
}

.leader-box {
    display: flex;
    justify-content: space-between;
    background: #231e17;
    border-radius: 15px;
    align-items: center;
    padding: 20px;
    gap: 20px;
    background-size: 100% 100%;
}

.lead-top-l {
    display: flex;
    width: 50%;
    justify-content: space-between;
}

table.wn-table tr:nth-child(odd) {
    background: #231e17;
}

.wn-table {
    width: 100%;
}

.winner-table {
    background: #352b1e;
    padding: 15px;
}

.lead-r {
    width: 50%;
}

table.wn-table tr td {
    padding: 10px;
    text-align: center;
}

.lead-in-l {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: baseline;
}

.lead-btn {
    display: inline-flex;
    background: linear-gradient(90deg, #ba803c 0%, rgb(244 207 95) 100%)!important;
    color: #fff;
    padding: 5px 20px;
    border-radius: 18px;
    margin-top: 42%;
}

.lead-in-l p {
    width: 180px;
    font-weight: bold;
    font-size: 20px;
    line-height: 22px;
    color: #fff;
}

.board-in {
    position: relative;
}

.top-win {
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 10;
}

.winner-board {
    margin-top: 20px;
}

.btn-in {
    background: linear-gradient(90deg, #ba803c 0%, rgb(244 207 95) 100%)!important;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 18px;
    /* font-size: 12px; */
    color: #fff;
    margin-bottom: 10px;
}

table.board-tlb {
    width: 100%;
}

.boar-btm {
    background: #231e17;
    padding: 20px;
    border-radius: 18px;
}

table.board-tlb tr td {
    text-align: left;
    padding: 7px;
    font-size: 0.8vw;
}

table.board-tlb tr th {
    color: #fff2aa;
    font-weight: 100;
}

table.board-tlb tr td:last-child {
    text-align: right;
}

table.board-tlb tr th:last-child {
    text-align: right;
}

.home-footer {
    background: #231e17;
}

.footer-in {
    max-width: 65vw;
    margin: 0px auto;
    width: 100%;
    margin-top: 40px;
    padding-top: 0vw;
    padding-bottom: 40px;
}

.footer-l p {
    color: #9a7951;
}

.footer-wrap {
    display: flex;
    padding-top: 4vw;
}

.footer-l {
    width: 28vw;
    padding-right: 60px;
    font-size: 12px;
    position: relative;
    line-height: 30px;
    top: 0px;
}

.footer-r {
    width: 65%;
    display: flex;
    padding: 0px 20px;
    justify-content: space-between;
}

.footer-l:after {
    height: 250px;
    border-right: 1px solid #9a7951;
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
}

.footer-menu ul {
    list-style: none;
    padding: 0px;
    padding-left: 55px;
}

.footer-menu ul li a {
    color: #9a7951;
    font-size: 12px;
    line-height: 30px;
}

.footer-menu ul li a:hover {
    color: #fff;
}

.footer-ll {
    color: #9a7951;
    font-size: 12px;
}

.footer-ll p {
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-ll-in {
    display: flex;
    gap: 60px;
}

.footer-ll-in a {
    color: #fff;
}

.footer-dnw p {
    margin-bottom: 7px;
}

.footer-bottom {
    display: flex;
    border-top: 1px solid #9a7951;
    margin: 20px 0px;
    padding-top: 30px;
    justify-content: space-between;
}

.footer-img ul {
    list-style: none;
    display: flex;
    gap: 10px;
    filter: grayscale(0.5);
}

.ft-btm-r img {
    /* filter: contrast(0.5); */
    height: 30px;
}

.ft-btm-r ul {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: 5vw;
}

.footer-img img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(36%) saturate(457%) hue-rotate(353deg) brightness(85%) contrast(90%);
    height: 30px;
}

.ft-btm-l {
    display: flex;
    width: 50%;
    gap: 20px;
    align-items: flex-start;
}

.ft-btm-l p {
    font-size: 12px;
    color: #9a7951;
}

.product-slider {
    display: block;
}

.product-slider-m {
    display: none;
}

.product-in-m {
    grid-template-columns: 100%;
    display: grid;
    justify-content: space-between;
    background: var(--dark-white);
    padding: 20px;
    border-radius: 25px;
}

.login-modal {
    padding: 0px;
    width: 100%;
}

.login-modal .modal-body {
    padding: 0px;
    position: relative;
}

.modal-dialog.login-modal {
    max-width: 464px;
}

.login-modal .modal-content {
    background: none;
    border: none;
}

.login-modal .close {
    position: absolute;
    right: 18px;
    font-size: 41px;
    z-index: 1;
    color: #fff;
}

.mdl-form-box {
    top: 35%;
    width: 100%;
    padding: 20px;
    background: #4b4b4b;
}

.mdl-form-box .form-control {
    color: #fff;
    background: #1a1b1f;
    border: none;
}

.mdl-form-box label {
    color: #fff;
    font-size: 14px;
}

.mdl-form-box .form-control:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.modal-height{
    max-height: 400px;
    overflow-y:scroll;
}

.modal-open .modal{
    overflow-y: hidden;
}

.container-checkbox {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12px !important;
}

.container-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.container-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #26282d;
    border: 1px solid #646d74;
    border-radius: 2px;
}

.container-checkbox:hover input~.checkmark {
    background-color: #26282d;
}

.container-checkbox input:checked~.checkmark {
    background-color: #26282d;
}

.container-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container-checkbox input:checked~.checkmark:after {
    display: block;
}

.container-checkbox .checkmark:after {
    left: 6px;
    top: 1px;
    width: 7px;
    height: 12px;
    border: solid #dcad73;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mdl-form-box .form-check {
    padding-left: 0px;
}

.pop-btm {
    bottom: 0px;
    width: 100%;
    background: #1f1714;
    left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px auto;
    text-align: center;
    padding: 10px;
    border-radius: 0px 0px 20px 20px;
}

.wrap-ico {
    display: inline-block;
    justify-content: center;
}

.wrap-ico ul {
    display: flex;
}

.pop-btm p {
    color: #73898a;
    font-size: 14px;
}

.wrap-ico ul {
    list-style: none;
    justify-content: center;
    background: #26282d;
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 40px;
    gap: 10px;
}

.login-modal .modal-body {
    background: #251e18;
    border-radius: 18px;
}

.wrap-pop {
    position: relative;
    background: #251e18;
    border-radius: 0px 0px 50px 50px;
}

.log-wrap button {
    padding: 8px 30px;
    border-radius: 18px;
    font-size: 14px;
}

.log-wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-inn {
    background: linear-gradient(90deg, rgba(90,63,44,1) 0%, rgba(229,181,120,1) 100%);
    color: #fff;
}

.btn-up {
    background: linear-gradient(90deg, rgba(208,160,13,1) 0%, rgba(255,252,173,1) 100%);
    color: #fff;
}

.form-group {
    position: relative;
    width: 100%;
}

.btn-forgot {
    /* position: absolute;
    right: 0px;
    top: 0px; */
    display: flex;
    width: 100%;
    padding: 5px 0px;
    justify-content: space-between;
}

.btn-forgot a {
    display: flex;
    right: 0px;
    font-size: 12px;
    /* position: absolute; */
    color: var(--text-color);
}

.btn-forgot .carousel-control-next {
    position: relative;
    opacity: 1;
    width: auto;
}

.mdl-form-in {
    display: flex;
    position: relative;
    justify-content: flex-start;
}

.car-left {
    position: relative;
    padding: 25px;
    background: #b08b5f;
    border-radius: 18px 20px 0px 0px;
}

.car-left a {
    padding-left: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    color: var(--text-color);
}

.car-left a:hover {
    color: var(--white-dark);
}

.car-left i {
    padding-right: 20px;
}

.btn-rest {
    color: #fff;
    background: #b08b5f;
    width: 100%;
}

.all-1 {
    display: contents;
}

.all-1 .game-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/************Sport******************/
.sport-ifame {
    display: block;
    margin: 0px auto;
    min-width: 1560px;
    width: 1560px;
}

.page-ttl {
    display: inline-flex;
    background: linear-gradient(90deg, #ba803c 0%, rgb(244 207 95) 100%);
    padding: 8px 20px;
    border-radius: 0px 20px 20px 0px;
    align-items: center;
    text-shadow: 0px 1px 3px #000;
}

.ico-ttl {
    margin-right: 5px;
}

.page-nm {
    color: #fff;
}

.slot-lobby {
    width: 100%;
}

.slt-lbby ul {
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    gap: 18px;
    grid-template-columns: repeat(7, 1fr);
}

.slt-lbby {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.mix {
    display: none;
}

.filter-menu-bar {
    margin: 20px 0;
    display: inline-flex;
    justify-content: flex-start;
    /* grid-template-columns:repeat(6,1fr); */
    gap: 10px;
    flex-wrap: wrap;
}

.pmbox {
    background: #1c1e22;
    color: #ffffff;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 25px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border-radius: 25px;
    text-align: center;
    border: 1px solid #b08b5f;
}

.pmbox:hover,
.pmbox.active {
    color: #fff;
    background: #b08b5f;
}

.promo-content {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
    margin-bottom: 30px;
}

.pm-boxer {
    display: flex;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    max-width: 100%;
    height: auto;
    align-content: center;
    grid-gap: 10px;
    color: #fff;
    flex-direction: column;
}

.pm-boxer_inner {
    height: 85px;
    padding: 10px 20px;
}

.pm-boxer img {
    border-radius: 18px;
}

h4.ttl-promo {
    color: #21276d;
    font-size: 17px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

.promo-per {
    color: #e40080;
    display: flex;
    margin-top: 20px;
}

.pm-boxer_inner_sec {
    display: flex;
    align-items: flex-end;
}

.moreinfo_btn {
    background: #ffc000;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    width: 100px;
    height: 30px;
    font-size: 13px;
}

.apply_btn {
    background: linear-gradient(to bottom, #b60000 0%, #5a0500 100%, #f1e767 100%);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    width: 100px;
    height: 30px;
    font-size: 13px;
}

.text_red {
    color: #e40080;
    margin-left: 10px;
    font-weight: bold;
}

.text_blue {
    color: #9a7922;
}

.modal-dialog.promo {
    max-width: 800px !important;
    border-radius: 18px;
}

.modal-content.promo {
    border: none;
    background: #251e18;
    border-radius: 18px;
    /* border: 1px solid #b08b5f; */
}

button.close-promo {
    background: none;
    border: none;
    font-size: 19px;
    padding: 7px;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
    color: #ffffff;
}

.grlist {
    color: var(--text-color);
}

.pm-title-wrapper {
    font-size: 16px;
    font-weight: 700;
    background: #b08b5f;
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 18px 20px 0px 0px;
}

.pmtable-wrapper {}

table.promo-table tr th {
    color: #000;
    background: #b08b5f;
    padding: 4px;
    text-align: center;
    border: 1px solid #b08b5f;
}

table.promo-table tr td {
    border: 1px solid #b08b5f;
    padding: 5px;
    color: #fff;
    text-align: center;
    background: #16110d;
}

.gr-title {
    margin-top: 20px;
    font-weight: 700;
    font-size: 16px;
    color: #b08b5f;
    padding: 15px;
}

.grlist ol {
    padding: 5px 30px;
    margin-top: 5px;
}

.grlist ol li {
    padding-bottom: 8px;
    font-size: 14px;
    color: var(--text-color);
}

.grlist ol span {
    font-weight: bold;
    color: #fff;
}

.promo-pop-cont {
    /* border: 1px solid #b08b5f; */
    /* border-radius: 0px 0px 20px 20px; */
    color: var(--text-color);
    padding: 20px;
    max-height: 650px;
    overflow-y: scroll;
}

.promo-pop-cont-1 {
    padding: 15px;

}

.promo-nav button {
    background: #251e18;
    padding: 10px 30px;
    color: #fff;
    border-radius: 18px;
}

.filter-box {
    margin-top: 30px;
}

.close-promo span {
    font-size: 40px;
}

.promo-title {
    color: red;
    font-weight: bold;
}

.af-wrap {
    width: 100%;
    margin: 0px auto;
}

.aff-bnr {
    position: relative;
}

.btn-aff {
    background: #b08b5f;
    color: #fff;
    font-size: 20px;
    padding: 10px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    width: 25vw;
    font-weight: bold;
}

.btn-aff-wrap {
    display: flex;
    justify-content: center;
    margin-top: -30px;
}

.aff-1 h4 {
    text-align: center;
    font-size: 35px;
}

.aff-1 {
    margin-top: 4vw;
}

.in-aff-1 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #251e18;
    border-radius: 30px;
    padding: 20px;
}

.aff-in-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
}

.in-aff-top {
    display: flex;
    align-items: flex-end;
    color: #b08b5f;
    justify-content: space-between;
}

.in-aff-top h5 {
    font-size: 24px;
    width: 50%;
    margin-bottom: 18px;
}

.aff-content p {
    color: #fff;
    font-size: 15px;
}

.aff-content a {
    color: #b08b5f;
}

.aff-reward h4 {
    font-size: 35px;
    text-align: center;
}

.aff-reward {
    margin-top: 4vw;
}

.aff-reward p {
    color: #6a717b;
    font-size: 15px;
    text-align: center;
    margin-top: 1vw;
    margin-bottom: 3vw;
}

.btn-reward {
    background: #251e18;
    color: #fff;
    border-radius: 18px;
    font-size: 24px;
    padding: 10px 40px;
}

.btn-reward {
    text-align: center;
    margin: 0px auto;
    display: flex;
    padding: 10px 20px;
}

.rwd-graph {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4vw;
}

.graph-in {
    background: #251e18;
    border-radius: 18px;
    padding: 20px;
}

.aff-in-2 {
    display: flex;
    justify-content: space-between;
    height: 7vw;
}

.rwd-l h5 {
    color: #b08b5f;
    margin-bottom: 20px;
}

.rwd-l p {
    font-size: 15px;
}

.rwd-info {
    font-size: 15px;
}

.ttx-y {
    font-size: 24px;
    color: #f6c722;
}

.ttx-g {
    color: #b08b5f;
}

.rwd-wrap {
    background: #1f1714;
    margin: 0px;
    margin-top: 20px;
    border-radius: 18px;
    height: auto;
}

.rwd-top-l {
    display: flex;
    flex-direction: column;
    width: 50%;
    font-size: 12px;
}

.rwd-top {
    display: flex;
    color: #6a717b;
    padding: 20px 50px;
    font-size: 15px;
}

.img-graph img {
    display: block;
    margin: 0px auto;
}

.wd-ft {
    display: flex;
    justify-content: end;
    padding: 5px 65px;
}

p.rwd-ft-p {
    text-align: center;
    padding: 10px;
}

.rwd-l {
    width: 60%;
}

.top-txt {
    color: #6a717b;
    padding: 20px;
}

.rewd-date {
    background: #251e18;
    margin-top: 4vw;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 20px 50px;
    align-items: baseline;
}

.rewd-1 {
    display: flex;
    align-items: center;
    width: 50%;
    justify-content: center;
    margin-top: 30px;
}

.rewd-date h4 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px auto;
    display: block;
    width: 100%;
    text-align: center;
}

.amt-red {
    background: #1f1714;
    color: #f6c622;
    margin: 10px;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
}

.rwd-table {
    margin: 4vw auto;
    display: block;
    text-align: center;
}

.table-wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 2vw;
}

.rwd-in {
    width: 50%;
}

table.rwdin-table tr th:first-child {
    text-align: left;
}

table.rwdin-table tr th:last-child {
    text-align: right;
}

table.rwdin-table {
    width: 100%;
}

table.rwdin-table tr td:first-child {
    text-align: left;
}

table.rwdin-table tr td:last-child {
    text-align: right;
}

table.rwdin-table tr:nth-child(even) {
    background: #b08b5f;
}

table.rwdin-table tr th {
    font-size: 12px;
    font-weight: 100;
    color: #b08b5f;
    padding: 10px 20px;
}

table.rwdin-table tr td {
    padding: 10px 20px;
    font-size: 15px;
}

table.rwdin-table tr {
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
}

.af-wrap.aff-off {
    width: 1140px;
    margin: 10px auto;
}

.vip-wrap ul {
    list-style: none;
    display: flex;
    gap: 10px;
    margin-top: 2vw;
}

.vip-wrap ul li a {
    position: relative;
    display: flex;
}

.vip-ttl {
    position: absolute;
    bottom: 2vw;
    text-align: center;
    width: 100%;
    font-size: 1vw;
    text-transform: uppercase;
    color: #c3bd9d;
}

.txt-gn {
    color: #b08b5f;
}

.vip-wrap2 ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vip-wrap2 ul li {
    background: var(--dark-white);
    border-radius: 18px;
}

.vip-wrap2 ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.vip-ttl-wrap {
    padding-bottom: 20px;
    text-align: center;
    color: var(--text-color);
}

.vip-ttl-wrap h4 {
    color: #c3bd9d;
    font-size: 0.8vw;
}

.info-all {
    display: flex;
    width: 100%;
    gap: 20px;
}

.info-side ul {
    display: flex;
    flex-direction: column;
    background: var(--info-bg);
    padding: 20px;
    border-radius: 18px;
    list-style: none;
}

.info-side {
    width: 18vw;
}

.info-content {
    width: 75%;
    padding: 20px 40px;
    background: var(--info-bg);
    border-radius: 18px;
    color: #66717e;
    font-size: 12px;
}

.info-content p {
    margin-bottom: 20px;
}

.info-side ul a {
    color: #66717e;
    padding: 5px 20px;
    border-radius: 18px;
    font-size: 15px;
}

.info-side ul a.active,
.info-side ul a:hover {
    background: #3e9730;
    color: #fff;
}

.info-content h4 {
    margin-bottom: 20px;
    color: var(--text-color);
}

.info-content ol {
    margin: 15px;
}

.info-content ol li {
    margin-bottom: 20px;
}

.inf-mn-m {
    display: none;
}

button.btn-tnc {
    background: #b08b5f;
    width: 100%;
    text-align: left;
    font-size: 16px;
    padding: 8px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
    position: relative;
}

button.btn-tnc.collapsed {
    background: #1c1e22;
    color: #fff;
}

button.btn-tnc:focus {
    outline: none;
}

.tnc-card {
    margin-bottom: 5px;
}

.tnc-body {
    background: rgb(36 38 43);
    padding: 20px 20px 10px;
    border-radius: 4px;
    margin-top: 2px;
    line-height: 1.3;
}

.tnc-body ol {
    padding-left: 15px;
}

.tnc-body ol li {
    padding-bottom: 8px;
}

.bank-table tr.trans td {
    background: var(--dark-white2);
    color: var(--text-color);
    border: 1px solid #b08b5f;
    padding: 2px;
}

.bank-table tr.trans1 td {
    background: var(--dark-white2);
    color: var(--text-color);
    border: 1px solid #b08b5f;
    padding: 2px;
}

.bank-table tr.dwbox td {
    background: #b08b5f;
    color: #000;
    font-weight: 600;
    padding: 2px;
}

button.btn-tnc::after {
    content: '>';
    font-size: 16px;
    line-height: 1;
    position: absolute;
    right: 17px;
    top: 10px;
    transform: rotate(270deg);
    transition: all 0.3s;
}

button.btn-tnc.collapsed::after {
    content: '>';
    transform: rotate(90deg);
    transition: all 0.3s;
}

.inf-wrap {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.info-side ul li {
    margin-bottom: 20px;
}

.btn-cnt a {
    background: linear-gradient(to bottom, rgba(119, 59, 250, 1) 0%, rgba(90, 28, 198, 1) 100%);
    padding: 10px 40px;
    font-size: 16px;
    border-radius: 30px;
}

.btn-cnt {
    display: flex;
    justify-content: center;
}

.btn-cnt a:hover {
    background: linear-gradient(to bottom, rgba(90, 28, 198, 1) 0%, rgba(119, 59, 250, 1) 100%);
}

.dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

.dropdown-menu.pull-right:before {
    right: 9px;
    left: auto;
}

.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

.dropdown-menu.pull-right:after {
    right: 10px;
    left: auto;
}

.top-down::before {
    display: none;
}

.top-down .dropdown-toggle::after {
    display: none;
}

.dropbtn {
    background-color: var(--dark-white2);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-af {
    display: inline-block;
}

.dropdown-content {
    display: none;
    min-width: 298px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown-af:hover .dropdown-content {
    display: block;
    position: absolute;
    right: 20px;
    animation-duration: 0.5s;
}

.dropdown-af:hover .dropbtn {
    background-color: #1c1e22;
}

.drop-box {
    padding: 20px 10px;
    background: var(--dark-white2);
    margin-top: 12px;
}

.use-img img {
    border-radius: 50px;
    width: 52px;
}

.dropdown-af {}

button.dropbtn {
    padding: 0px 0px !important;
}

button.dropbtn i {
    padding: 10px 15px;
    font-size: 20px;
    color: #6f6f6f;
    padding-left: 5px;
}

.top-down {
    margin: 0px;
    background: #4d4d4d;
    border-radius: 30px;
    padding: 0px 20px;
    height: auto;
}

.bln-top {
    display: flex;
    align-items: center;
    justify-content: center;
}

span.bln-ico {
    color: #ffb800;
    font-size: 20px;
    display: flex;
}

.blc-all {
    font-size: 15px;
    color: #b08b5f;
}

.txt-wh {
    color: var(--text-color);
}

.bln-ttl {
    color: #b08b5f;
    font-size: 14px;
}

span.ico-dwn {
    color: var(--text-color);
}

button.btn-wal {
    background: #b08b5f;
    height: 50px;
    font-size: 16px;
    border-radius: 40px;
    padding: 0px 20px;
    color: #fff;
    /* display: flex; */
    align-items: center;
}

button.btn-wal i {
    padding-right: 10px;
    font-size: 20px;
}

.top-down .dropdown-menu {
    background: none;
    min-width: 275px;
    border-radius: 18px;
    transform: translate3d(0px, 60px, 0px) !important;
    padding: 0px;
    margin: 0px;
    border: none;
}

.top-down .dropdown-menu:before {
    border-bottom: 7px solid #1c1e22;
    border-right: 7px solid #1c1e22;
    display: none;
}

.top-down .dropdown-menu:after {
    border-bottom: 6px solid #1c1e22;
    display: none;
}

.dropdown-menu {
    left: auto !important;
    right: 0px !important;
}

.dropbl {
    background: var(--dark-white2);
    min-width: 24vw;
    border-radius: 18px;
    padding: 15px;
}

input.bln-search {
    height: 40px;
    position: relative;
}

.bln-all ul {
    display: flex;
    flex-direction: column;
}

.bln-in {
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
}

.bln-all ul li {
    margin: 3px 0px;
    border: 1px solid #ffffff00;
    border-radius: 18px;
    padding: 5px 0px;
    cursor: pointer;
    list-style: none;
}

.bln-all {
    margin-top: 10px;
}

.bln-all ul li:hover {
    border: 1px solid #b08b5f;
    border-radius: 18px;
}

.progress2 {
    padding: 9px 6px;
    border-radius: 30px;
    user-select: none;
    position: relative;
    border-radius: 1vw;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    background: var(--search-bar);
}

.progress-bar1,
.progress-bar2,
.progress-bar3,
.progress-bar4,
.progress-bar5 {
    height: 6px;
    border-radius: 30px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;
    transition-property: width, background-color;
}

.progress-moved .progress-bar1 {
    width: 20%;
    background-color: #EF476F;
    animation: progressAnimation 6s;
}

.progress-moved .progress-bar2 {
    width: 40%;
    background-color: #EF476F;
    animation: progressAnimation2 6s;
}

.progress-moved .progress-bar3 {
    width: 60%;
    background-color: #EF476F;
    animation: progressAnimation3 6s;
}

.progress-moved .progress-bar4 {
    width: 80%;
    background-color: #EF476F;
    animation: progressAnimation4 6s;
}

.progress-moved .progress-bar5 {
    width: 100%;
    background-color: #EF476F;
    animation: progressAnimation5 6s;
}

@keyframes progressAnimation {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 20%;
        background-color: #EF476F;
    }
}

@keyframes progressAnimation2 {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 40%;
        background-color: #EF476F;
    }
}

@keyframes progressAnimation3 {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 60%;
        background-color: #EF476F;
    }
}

@keyframes progressAnimation4 {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 80%;
        background-color: #EF476F;
    }
}

@keyframes progressAnimation5 {
    0% {
        width: 5%;
        background-color: #F9BCCA;
    }

    100% {
        width: 100%;
        background-color: #EF476F;
    }
}

.lvl-bar {
    user-select: none;
    background-color: #949393;
    position: relative;
    border-radius: 1vw;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
}

.user-img img {
    height: 40px;
    border-radius: 50px;
}

.drop-box {}

.user-img {}

.user-dtl {
    display: flex;
    align-items: end;
    gap: 10px;
}

.lvl-in img {
    height: 16px;
}

.lvl-in ul {
    list-style: none;
    display: flex;
    gap: 9px;
}

.user-lv p {
    font-size: 12px;
}

span.nxt-xp {
    color: var(--text-color);
}

.nxt-lvl {
    display: flex;
    gap: 10px;
}

.drop-btn {
    background: var(--search-bar);
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
}

.drop-btn ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
}

.drop-btn ul li a {
    font-size: 12px;
    color: #5e697b;
    padding: 6px 10px;
}

span.iv-icon {
    margin-right: 10px;
}

.btn-bln {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2vw 1vw;
    border-radius: 18px;
    color: #fff;
    font-weight: bold;
    font-size: 0.8vw;
}

.header-r-af {
    display: flex;
    align-items: center;
    gap: 10px;
}

button.btn-out {
    display: flex;
    margin: 10px 20px;
    background: none;
    border: none;
    color: #5e697b;
    align-items: center;
    font-size: 12px;
}

button.btn-out i {
    margin-right: 10px;
    font-size: 14px;
}

.drop-btn ul li a:hover {
    background: none;
    color: var(--text-color);
}

button.btn-out:hover {
    color: #fff;
}

button.btn-msg {
    background: none;
    color: #6a717b;
    font-size: 20px;
}

button.btn-msg:hover {
    color: #fff;
}

.af-modal {
    padding: 0px;
    width: 100%;
}

.af-modal .modal-body {
    padding: 0px;
    position: relative;
}

.modal-dialog.af-modal {
    max-width: 600px;
    border-radius: 18px;
}

.af-modal .modal-content {
    background: none;
    border: none;
    border-radius: 18px;
}

.af-modal .close {
    position: absolute;
    right: 18px;
    font-size: 41px;
    z-index: 1;
    color: var(--text-color);
    top: 6px;
}

.af-modal .modal-body {
    background: #251e18;
    border-radius: 18px;
}

.af-fm-ttl {
    display: flex;
    padding: 15px 20px;
    justify-content: space-between;
    background: #b08b5f;
    border-radius: 18px 20px 0px 0px;
}

.ttl-af {
    color: var(--text-color);
}

.ttl-history {
    display: flex;
    padding-right: 35px;
}

.ttl-history a {
    position: relative;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.af-form {
    padding: 20px;
    max-height: 550px;
    overflow-y: scroll;
    /* border: 1px solid #b08b5f; */
}

.af-tab {
    margin-bottom: 15px;
}

.af-tab ul li a {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none !important;
    color: var(--text-color) !important;
}

.af-tab ul {
    display: grid;
    justify-content: space-between;
    border: none;
    border-radius: 10px;
    background: var(--search-bar);
    margin-bottom: 20px;
    grid-template-columns: 15% 15% 15% 15% 15% 15%;
    margin: 0px;
}

.af-tab ul li a p {
    font-size: 11px;
}

.af-tab ul li a.active {
    background: #b08b5f !important;
    border-radius: 10px;
    color: #fff !important;
}

.af-content-wrap mdl-form-box {
    border-radius: 18px;
}

.af-content-wrap .mdl-form-box {
    border-radius: 10px;
    margin-bottom: 15px;
}

.radio-group input,
.radio-group .content {
    display: none;
    background: var(--dark-white);
    line-height: 25px;
    padding: 5px 15px;
    color: var(--text-color);
    font: normal 1em/150% Sans-Serif;
    min-width: 200px;
    max-width: 440px;
    border-radius: 5px;
}

#one:checked~.one,
#two:checked~.two,
#three:checked~.three {
    display: block;
}

.radio-group label {
    cursor: pointer;
    background: var(--dark-white);
    height: 71px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    color: var(--text-color);
    font: normal 1em/150% Sans-Serif;
    margin-right: 2px;
    transition: background .25s linear;
    border-radius: 5px;
}

.radio-group label:hover,
.radio-group input:checked+label {
    background: #b08b5f;
    color: #fff;
}

.amt-box ul {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    list-style: none;
}

.amt-box ul li button {
    background: #919295;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
}

.amt-box ul li button:hover,
.amt-box ul li button.active {
    background: #b08b5f;
}

.bnk-table tr td {}

.bnk-table {
    width: 100%;
    position: relative;
}

.radio-group label p {
    font-size: 12px;
}

.upload-file {
    display: flex;
    position: relative;
    justify-content: space-between;
    width: 100%;
}

.btn-file {
    padding: 5px 20px;
    height: 37px;
    top: 0px;
    position: relative;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    width: 30%;
    color: #fff;
    border: none;
    background: #128807;
}

.upload-file .form-control {
    width: 256px;
}

.custom-file-input {
    position: absolute;
    z-index: 2;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
}

.bnk-table tr td {
    font-size: 12px;
    padding: 0px 10px;
}

.bnk-table {
    width: 100%;
}

.radio-group label p {
    font-size: 12px;
}

.upload-file {
    display: flex;
    position: relative;
    justify-content: space-between;
    width: 100%;
}

.btn-file {
    padding: 5px 20px;
    height: 37px;
    top: 0px;
    position: relative;
    margin-left: 10px;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    width: 30%;
    color: #fff;
    border: none;
    background: #b08b5f;
}

.upload-file .form-control {
    width: 100%;
}

.custom-file-input {
    position: absolute;
    z-index: 2;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 12px;
}

.btn-smt {
    background: #b08b5f;
    color: #fff;
    padding: 8px 20px;
    border-radius: 18px;
    width: 100%;
}

.bank-detail {
    background: var(--dark-white);
    border-radius: 10px;
    padding: 5px 15px;
    color: var(--text-color);
    margin-bottom: 15px;
}

.bank-detail tr td {
    padding: 5px 10px;
}

.tranc-table{
    padding-bottom: 10px;
}

.tranc-table tr td {
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
}

.tranc-table tr th {
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 12px;
    color: var(--text-color);
}

.tranc-table tr {
    border-radius: 18px;
    text-align: center;
}

.tranc-table tr:nth-child(even) {
    background: #26282d;
}

.tranc-table::-webkit-scrollbar-thumb{
    background: #272a30;
}

.amt-box {
    position: relative;
}

.btn-cpy {
    background: transparent;
    color: #fff;
    position: absolute;
    bottom: 2px;
    right: 0px;
    padding: 4px 14px;
}

.btn-dt {
    background: transparent;
    color: #fff;
    position: absolute;
    bottom: 2px;
    right: 0px;
    padding: 4px 14px;
}

.qr-code img {
    display: block;
    margin: 0px auto;
    width: 25%;
}

.ttl-history a {
    display: flex;
    color: var(--text-color);
    background: #272a30;
    width: 100%;
    border-radius: 5px;
    padding: 0px 20px;
}

.ttl-history a:hover {
    color: var(--white-dark);
}

.ttl-history a .nxt-ico {
    margin-right: 5px;
    display: flex;
}

.ttl-history .carousel-control-next, .ttl-history .carousel-control-prev{
    opacity: 1;
}

.af-fm-ttl-us {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    position: relative;
    font-size: 20px;
}

.vip-tp {
    right: 35px;
    position: relative;
}

.af-fm-ttl-us .ttl-af {
    padding-top: 15px;
}

.vip-nm {
    position: absolute;
    bottom: 26px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    color: #fff;
    text-align: center;
}

.item-box.user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color);
}

.vip-user img {
    height: 60px;
    display: flex;
    border-radius: 50px;
    margin: 0px auto;
}

.lvl-in-top ul {
    list-style: none;
    display: flex;
    gap: 5px;
}

.lvl-in-top ul li img {
    filter: grayscale(1);
    height: 20px;
}

.lvl-in-top {
    margin: 5px;
}

.item-box.uer-bln {
    background: #251e18;
    margin: 15px;
    border-radius: 10px;
    color: var(--text-color);
}

.top-bx-l {
    display: flex;
    font-size: 12px;
}

.top-box ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    align-items: center;
}

.top-box ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.top-bx-l i {
    color: #5e697b;
    font-size: 20px;
    margin-right: 15px;
}

.amt-ttl {
    color: #5e697b;
}

.top-box {
    margin-top: 15px;
}

.top-box-fav ul {
    display: flex;
    list-style: none;
    flex-direction: column;
}

.top-box-fav ul li {
    display: flex;
    gap: 15px;
}

.img-ttl img {}

.fav-gm {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    width: 100%;
}

.fav-l h4 {
    font-size: 14px;
    color: var(--text-color);
}

.top-box-fav {
    margin-top: 15px;
}

.fav-l {
    font-size: 12px;
    color: #5e697b;
}

.fav-r {
    font-size: 12px;
    text-align: right;
}

.tp-t {
    color: #5e697b;
}

.img-ttl {
    width: 25%;
}

.slider .swiper-slide:first-child source {
    width: 100%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.d-show {
    display: block !important;
}

.m-show {
    display: none !important;
}

.msg-wrap {
    display: flex;
    font-size: 12px;
}

.msg-r {
    padding: 15px;
    border: 1px solid #b08b5f;
    border-left: none;
}

.msg-l {
    border: 1px solid #b08b5f;
}

.msg-l a {
    color: var(--white-dark);
}

.msg-l .nav-tabs {
    border: none;
}

.msg-l a {
    padding: 15px 5px;
    border-radius: 0px !important;
    line-height: 13px;
}

.msg-l ul {
    border-radius: 0px;
}

.msg-l ul li {
    border-radius: 0px;
}

.msg-l ul li a.active,
.msg-l ul li a:hover {
    background: #b08b5f !important;
    color: #fff !important;
    border: 1px solid #fff0 !important;
}

.btn-bln-all {
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    border-bottom: 1px solid #4e535e;
    padding-bottom: 10px;
}

.btn-amt {
    display: flex;
    gap: 10px;
    align-items: center;
}

button.btnall {
    padding: 5px 10px;
    border-radius: 10px;
    background: #b08b5f;
    color: #fff;
}

button.btnall:hover {
    background: #b08b5f;
}

.panel-default>.panel-heading {
    color: #333;
    background: none;
    border-color: #e4e5e7;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel-default>.panel-heading a {
    display: block;
    padding: 14px;
    font-size: 14px;
    border-radius: 10px;
    /* margin-bottom: 10px; */
}

.panel-default>.panel-heading a:after {
    content: "";
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
    /* background-color: #eee; */
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
    content: "\2212";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
    content: "\002b";
    -webkit-transform: rotate(90deg);
    transform: rotate(0deg);
}

.btn-wrap {
    padding: 10px;
    font-size: 12px;
}

.blnc {
    margin-bottom: 10px;
}

.blnc .panel-body {
    background: #333941;
    border-radius: 10px;
}

.revamp-form {
    display: flex;
    gap: 10px;
}

.revamp-date {
    display: flex;
    gap: 10px;
}

.img-veg {
    position: absolute;
    bottom: 6px;
    height: 30px;
    right: 4px;
}

.lobby-wrap ul {
    display: grid;
    list-style: none;
    padding: 0px;
    gap: 10px;
    grid-template-columns: repeat(8, 1fr);
}

.lby-all {
    border-radius: 18px;
    margin-top: 20px;
}

/** Download **/
button.close-modal {
    background: none;
    border: none;
    position: absolute;
    right: 4px;
    top: 0px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    z-index: 2;
}

button.close-modal:focus {
    outline: none;
    box-shadow: none;
}

.modal-dialog.dl-dialog {
    top: 6%;
}

.modal-content.modal-download {
    padding: 0 15px 15px;
    background: #414141;
    color: #fff;
    border: 1px solid #b08b5f;
    overflow: hidden;
}

.access-info-wrapper {
    display: block;
    max-width: 500px;
    margin: 15px auto 0;
}

table.access-table tr td {
    background: #2f2f2f;
    border: 1px solid #b08b5f;
    color: #fff;
    padding: 4px 5px;
    font-size: 13px;
    line-height: 1.3;
}

.main-text {
    color: #ECE2D8;
}

.dld-wrap {
    position: relative;
    margin: 15px;
    text-align: center;
}

.dld-box {
    position: absolute;
    bottom: 5%;
    left: 6%;
}

.dl-device {
    background: url(../image/dl-btn.png)no-repeat center;
    background-size: contain;
    display: block;
    color: #fff;
    width: 150px;
    height: 42px;
    margin: 10px auto 0;
    padding: 6px 5px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;
}

.dl-device:hover {
    color: #fff;
}

.dl-device img {
    max-width: 18px;
    vertical-align: sub;
}

.download-wrap {
    padding-top: 15px;
    text-align: center;
}

a.devide-btn {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0px;
    display: inline-block;
    width: 120px;
    padding: 5px 2px;
    margin: 0 5px;
    border-radius: 5px;
    border: 1px solid #b08b5f;
    background: #b08b5f;
}


.in-out button {
    color: #fff;
    border-radius: 18px;
    padding: 0px 10px;
    font-size: 13px;
}

button.in-bnt {
    border: 1px solid #b08b5f !important;
    background: none;
    color: #ffffff;
}

button.out-bnt {
    background: #b08b5f !important;
    border: 1px solid #41d2f800 !important;
    color: #000;
}

.in-out {
    display: flex;
    align-items: center;
    gap: 5px;
}

button.in-bnt:hover {
    background: #b08b5f !important;
    color: #000;
}

button.out-bnt:hover {
    background: none !important;
    border: 1px solid #b08b5f !important;
    color: #fff;
}

.blc-amt {
    display: flex;
    gap: 10px;
}

/* download modal */
.download-tab {
    padding: 10px;
}

.downloadbody {
    text-align: center;
}

.downloadbox {
    text-align: center;
    width: 23%;
    margin: 0 5px;
    display: inline-block;
    height: 173px;
}

.ndl-btn {
    background: #b08b5f;
    color: #000000;
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 700;
    border-radius: 5px;
    display: block;
    margin: auto;
    margin-top: 10px;
    width: 78%;
}

.ndl-btn:hover,
.ndl-btn:focus {
    color: #000000;
    background: #c7b300;
}

.adl-btn {
    background: #b08b5f;
    color: #000000;
    font-size: 13px;
    padding: 5px 10px;
    font-weight: 700;
    border-radius: 5px;
    display: block;
    margin: auto;
    width: 78%;
    margin-top: 10px;
}

.adl-btn:hover,
.adl-btn:focus {
    color: #ffffff;
    background: #c7b300;
}

.dl {
    max-width: 500px;
    margin: auto;
    margin-top: 10px;
}

.dl table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.dl table th {
    border: 1px solid #454545;
    text-align: center;
    padding: 8px;
    background: #191b1e;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}

.dl table td {
    text-align: left;
    padding: 8px;
    background-color: #232528;
    border: 1px solid #454545;
    color: #ffffff;
}

.dl .username_custom {
    color: #b08b5f;
    font-weight: bold;
}

.downloadboxContent {
    padding: 20px;
    border: 1px solid #ce9c2d;
    background: #000000;
}

/* lotto */
.lotto-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-top: 40px;
}

.lotto-btn {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: var(--dark-white);
    border-radius: 30px;
}

.lotto-btn-content {
    display: flex;
    align-items: center;
    color: #b08b5f;
    justify-content: space-between;
    padding-left: 25px;
    font-size: 20px;
    cursor: pointer;
}

.lotto-btn-content img {
    width: 72%;
}

.lotto-wrap {
    padding: 20px;
    border-radius: 0px 18px 18px 18px;
    max-width: 1140px;
    margin: 0px auto;
}

table.lotto-table tr th {
    color: #fff;
    background: #b08b5f;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--text-color);
}

table.lotto-table tr td {
    border: 1px solid var(--text-color);
    padding: 5px;
    color: #fff;
    text-align: center;
    background: transparent;
}

.lotto-table-wrapper {
    display: flex;
    gap: 30px;
}

.grid-fourD {
    display: flex;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-fourD-div1 {}

.grid-fourD-div2 {
    grid-area: 1 / 2 / 2 / 5;
}

.grid-fourD-div3 {}

.grid-fourD-div4 {}

.grid-fourD-div5 {}

.grid-fourD-div6 {}

.grid-fourD-div7 {}

.grid-fourD-div8 {}

.fourD-item {
    float: left;
    width: 214px;
    background-color: #2f2f2f;
    padding: 10px 8px;
    margin-bottom: 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.fourD-item02 .fd-top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.fourD-item02 .fd-top-left {
    float: left;
    width: 70px;
    padding-left: 10px;
    padding-top: 5px;
    height: 35px;
}

.fourD-titleBG {
    background-color: #1c1c1c;
    padding: 5px;
    height: 30px;
}

.fourD-item .fd-title-01 {
    padding-top: 2px;
    padding-left: 3px;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

.fourD-item .fd-title-02 {
    float: left;
    padding-left: 3px;
    width: 95px;
    font-size: 11px;
    font-weight: bold;
    color: #000;
}

.fourD-item .fd-title-03 {
    float: left;
    font-size: 11px;
    color: #000;
}

.fd-title-01w {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
}

.fourD-item .fd-title-02w {
    float: left;
    padding-left: 3px;
    width: 120px;
    font-size: 13px;
    color: #fff;
}

.fourD-item .fd-title-03w {
    float: right;
    font-size: 13px;
    color: #fff;
    text-align: right;
}

.fourD-item02 .fd-top-right {
    float: right;
    display: inline-block;
    padding-top: 10px;
    padding-right: 10px;
}

.fourD-item .fd-row-01,
.fourD-item .fd-row-02 {
    margin-top: 7px;
}

.fourD-item .fd-row-bg {}

.fd-bg {
    background: url("../image/common/4d/4d-img.png")center no-repeat;
    border-radius: 12px;
    position: relative;
    height: 350px;
    display: flex;
    width: 660px;
}

.fd-co {
    width: 511px;
    position: relative;
}

.fd-date {
    padding: 42px 11px 11px 11px;
}

.fd-btn {
    bottom: 11px;
    left: 50px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 90%;
    align-items: baseline;
    bottom: 0px;
}

.date-time {
    background-color: #3b3941;
    border-radius: 18px;
    padding: 7px;
    text-align: center;
    margin-bottom: 20px;
}

.lotto-app {
    margin-top: 625px;
}

.container-fd {
    width: 1570px;
    margin: 0px auto;
}

.fd-row-01 table tr td {
    color: #fff;
    padding: 1px;
    border: 2px solid #2f2f2f;
}

td.fourD-topTxtthree {
    color: #fff;
    padding: 2px;
}

.fourD-title {
    color: #fff;
    /* padding: 5px; */
}

/* contact us */
.contact-grid {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; */
    display: flex;
    gap: 40px;
}

.contact-wrap {
    border: 1px solid #b08b5f;
    text-align: center;
    border-radius: 18px;
    align-self: center;
    padding: 20px;
    width: 200px;
    height: 150px;
}

.contact-wrap img {
    padding-bottom: 20px;
}

.contact-wrap span {
    font-size: 16px;
}

/* vip */
.vip-sec {
    background: #00091e;
}

.vip-sec .container {
    max-width: 1130px;
}

.vip-turnover {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

.vip-turnover-text {
    border: 1px solid #00ccff;
    border-radius: 25px;
    padding: 10px;
    background: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    width: 100%;
}

.vip-turnover span {
    color: #b08b5f;
    font-weight: bold;
    font-size: 16px;
}

.vip-img img {
    max-height: 100px;
    display: block;
}

.vip-img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vip-in-table {
    background: #251e18;
    /* border-radius:10px; */
    /* margin-top:20px; */
    padding: 20px;
    margin-bottom: 20px;
    max-width: 1366px;
    margin: 0px auto;
    border: 1px solid #b08b5f;
    border-radius: 10px;
}

.vip-all tr td {
    text-align: center;
    padding: 15px;
    /* background: rgb(255 255 255 / 16%); */
    color: var(--text-color);
    border: 1px solid #fff;
}

.vip-all tr td h3 {
    text-align: left;
    color: #ffffff;
}

.vip-all tr td:first-child {
    text-align: left;
    /* background: #55040e; */
    color: #b08b5f;
    width: 20%;
    font-weight: 800;
}

table.vip-all tr:first-child td {
    background: none;
    /* color:#ffffff; */
}

.vip-all tr th:nth-child(even) {
    background: #ffffff1f;
}

.vip-all tr td:nth-child(even) {
    /* background: #ffffff1f!important; */
}

tr.titleRow td {
    background: linear-gradient(to bottom, rgba(215, 155, 52, 1) 0%, rgba(249, 229, 129, 1) 15%, rgba(238, 201, 91, 1) 58%, rgba(215, 152, 42, 1) 83%, rgba(215, 162, 65, 1) 100%) !important;
    color: #000 !important;
}

tr.titleRow p {
    margin: 0px;
}

.vip-all tr:first-child td {
    border: none;
}

table.vip-all tr td:nth-child(2) .vip-cell {
    /* color:#ae7932; */
    text-transform: uppercase;
    font-weight: bold;
}

.vip-cell {
    text-transform: uppercase;
    font-weight: bold;
}


table.vip-all tr td {
    width: 15%;
    border-radius: 0;
    border: none;
}

.vip-wrap {
    /* background: rgb(0 0 0 / 70%); */
    /* border-radius: 10px; */
    /* margin-top: 20px; */
    padding: 20px 0;
    /* margin-bottom: 20px; */
}

.vip-tnc {
    padding: 0px 20px;
    overflow-y: scroll;
    max-height: 400px;
}

.vip-tnc h4 {
    font-size: 16px;
    font-weight: bold;
}

.vip-tnc ul {
    margin-bottom: 20px;
}

.status-vip {
    max-width: 30%;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-bottom: 100px;
}

table.vip-status-table tr td {
    padding: 10px;
    font-size: 16px;
    text-transform: uppercase;
    text-align: right;
    color: #ffcc00;
}

table.vip-status-table tr td:first-child {
    /* font-style:italic; */
}

table.vip-status-table tr td:last-child {
    text-align: center;
    border: 1px solid #ffcc00;
    margin-bottom: 10px;
    border-collapse: separate;
    border-spacing: 0 15px;
    border-radius: 29px;
    width: 180px;
    background: #000000;
    color: #fff;
    font-weight: 700;
}

.vip-player-current {
    height: 350px;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.img-vp {
    width: 126px;
}

table.vip-status-table {
    border-collapse: separate;
    border-spacing: 10px 15px;
    margin-top: 34px;
}

.vip-top {
    background: url("../image/vip/vip.png") no-repeat center;
    border-radius: 10px;
    display: flex;
    margin: 40px auto;
    max-width: 1366px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 50px;
    position: relative;
    background-size: 100% 100%;
    height: 420px;
    font-size: 10px;
    margin-top: 14px;
}

.vip-top-1 {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-top: 14px;
}

img.img-vp {
    width: 102px;
    position: absolute;
    right: 100px;
    top: -12px;
}

table.vip-status-table {
    border-collapse: separate;
    border-spacing: 10px 15px;
    margin-top: 34px;
}

.ttl-vip {
    color: #b08b5f;
    font-size: 2.2rem;
    text-align: center;
    font-weight: 900;
    position: relative;
    /* height: 80px; */
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    padding-top: 40px;
}

.ttl-vip:after {
    content: " ";
    width: 25%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background: url("../image/vip/title-arrow-right.png")no-repeat right;
    right: 0;
    /* background-size: 100% 100%; */
    background-size: contain;
}

.ttl-vip:before {
    content: " ";
    width: 25%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background: url("../image/vip/title-arrow-left.png") no-repeat left;
    background-position: 0;
    left: 0;
    /* background-size: 100% 100%; */
    background-size: contain;
}

/* .progress-bar-container {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 75px auto !important;
}

.progress-bar-container .line {
    width: 100%;
    margin: auto;
    background: #fff;
    height: 58px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-radius: 50px;
    transition: all .9s ease;
}

.progress-bar-container .line .line-progress {
    content: " ";
    width: 0;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(255,222,196,1) 1%,rgba(255,189,139,1) 29%,rgba(209,115,45,1) 100%);
    position: absolute;
    z-index: 2;
    border-radius: 50px;
    transition: all .9s ease;
    top: 0;
    left: 0;
}

.progress-bar-container ul {
    padding: 15px 0 0;
    z-index: 99;
    position: absolute;
    width: 100%;
    margin: -40px 0 0;
    left: 0;
    bottom: -67px;
    display: flex;
}

.progress-bar-container ul li {
    list-style: none;
    float: left;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    font-weight: 700;
    transition: all .2s ease;
    vertical-align: bottom;
    position: relative;
    width: 25%;
}

.progress-bar-container ul li .min-reload {
    font-size: 12px;
    line-height: 2rem;
    display: block;
    opacity: 1;
    padding: 0;
    color: var(--text-color);
}

.progress-bar-containe i {
    color: #000;
} */

.min-reload i {
    color: var(--text-color);
    font-style: initial;
}

.step-inner {
    color: #b08b5f;
    font-weight: 900;
    font-size: 20px;
}

.step-inner::before {
    width: 1px;
    height: 15px;
    position: absolute;
    background: #b08b5f;
    top: -15px;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

table.vip-all tr:nth-child(even) {
    background: #392d15;
    color: #000;
}

table.vip-all tr:first-child {
    background: none;
}

table.vip-all tr {
    color: #000;
    /* background: #ffffff40; */
}

table.vip-all {
    border-spacing: 0px 15px;
    /* background: #ffffff1f; */
    border-radius: 10px;
}

table.vip-all td:first-child,
table.vip-all th:first-child {}

table.vip-all td:last-child,
table.vip-all th:last-child {}

.vip-cell2 img {
    width: 50%;
}

.vip-mark {
    font-size: 13px;
    margin-top: 15px;
    color: #b08b5f;
    text-align: center;
}

.vip-grn {
    max-width: 1366px;
    margin: 0px auto;
    position: relative;
}

.vipgn {
    margin-bottom: 30px;
}

.vipgn h4 {
    color: #009edb;
    font-size: 18px;
    position: relative;
    margin: 0px;
    font-weight: 800;
}

.vipgn p {
    color: #fff;
    font-size: 13px;
}

hr.line-vp {
    border-top: 5px solid #009edb;
    margin-bottom: 40px;
}

.ttl-vip-2:after {
    content: " ";
    width: 40%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    width: 25%;
    left: 35px;
    right: 0;
    margin: 0px auto;
    bottom: -35%;
    background: url("../image/vip/about-vip-title-top.png")no-repeat right;
}

.ttl-vip-2 {
    color: #009edb;
    font-size: 2.2rem;
    text-align: center;
    width: 100%;
    height: 135px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin: 30px 0px;
    text-align: center;
}

.vip-about {
    margin: 0px auto;
    max-width: 1366px;
    color: #fff;
}

.vip-about p {
    margin-bottom: 50px;
    text-align: center;
}

.vip-about ul li {
    margin-bottom: 16px;
    position: relative;
    /* padding-left: 50px; */
}

.vip-bottom img {
    display: block;
    margin: 0px auto;
}

.vip-about ul {
    list-style: none;
    padding-left: 0;
}

.img-crown {
    animation: crown 6s ease-in-out infinite;
    position: absolute;
    right: 0px;
    bottom: 16%;
    width: 27%;
}

@-webkit-keyframes crown {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.vip-level-title {
    margin-top: 10px;
    color: #009edb;
}

.vip-lvl i {
    font-size: 15px;
    margin: 2px !important;
}

.vip-level-text {
    color: #b08b5f;
    margin-top: 10px;
    font-size: 18px;
}

.clred {
    color: #b08b5f;
}

.clr {
    color: #fff;
}

.ttl-second {
    font-size: 20px;
    color: var(--#fff);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.panel-group {
    border-radius: 10px;
    margin-top: 15px;
}

.panel-group .panel-heading a:after {
    content: '-';
    float: right;
}

.panel-group .panel-heading a.collapsed:after {
    content: '+';
}

.panel-default>.panel-heading {
    text-align: left;
    background: #b08b5f;
    border: none;
    font-size: 20px;
    font-weight: 900;
    border-radius: 10px;
}

.panel-title {
    font-size: 30px;
    color: #fff;
}

.panel-group .panel {
    background: none;
    border-radius: 10px;
    border: 1px solid #b08b5f;
}

.panel-body {
    text-align: left;
    background: var(--dark-white);
    color: var(--text-color);
    border: none !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

.vip_status_wrap {
    display: block;
    grid-template-columns: 75px auto;
    align-items: center;
}

.vip_status_wrap img {
    width: 70px;
}

.status_wrapper {
    margin-top: 0px;
}

.poker_org_txt {
    color: #b08b5f;
}

.progress-bar {
    position: relative;
    overflow: hidden;
    height: 45px;
    margin-top: 25px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #b08b5f;
}

.progress-bar>span {
    position: relative;
    display: block;
    height: 100%;
}

.progress-bar>span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #b08b5f;
}

.grey-color {
    color: #a5a5a5;
}

.gold-color {
    color: #a38842;
}

.blue-color {
    color: #a5c0d4;
}

.purple-color {
    color: #7d6daa;
}

.brown-color {
    color: #f0c783;
}

.elite-color {
    color: #c0a06e;
}

.progress_percent_bronze {
    width: 46%;
}

.progress_percent_silver {
    width: 24%;
}

.progress_percent_gold {
    width: 46%;
}

.progress_percent_platinum {
    width: 68%;
}

.progress_percent_diamond {
    width: 100%;
}

.current-status-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.current-status h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.status-bottom h6 {
    margin: 0;
    padding: 15px 0 0px;
    position: relative;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    color: #b08b5f;
}

.status-bottom h6:before {
    width: 1px;
    height: 15px;
    position: absolute;
    background: #b08b5f;
    bottom: 15px;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

.status-bottom p {
    color: var(--text-color);
    font-size: 15px;
    padding: 7px 1px 0;
    line-height: 13px;
    text-align: center;
    font-weight: bold;
}

/* 17/4/2023 */
.af-tab1 {
    margin-bottom: 15px;
}

.af-tab1 ul li a {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none !important;
    color: var(--text-color) !important;
}

.af-tab1 ul {
    display: grid;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-radius: 10px;
    background: var(--search-bar);
    margin-bottom: 20px;
    grid-template-columns: repeat(3,1fr);
    margin: 0px;
}

.af-tab1 ul li a p {
    font-size: 11px;
}

.af-tab1 ul li a.active {
    background: #b08b5f !important;
    border-radius: 10px;
    color: #fff !important;
}

div#bankList img {
    width: 30px;
    height: 30px;
}

.btn-cpy-1 {
    background: transparent;
    color: #fff;
    position: relative;
    right: 0px;
    padding: 1px 10px;
}

div#bankList label {
    width: 80px;
    margin-right: 5px;
}

/* 25/4/2023 */
.nav-tabs.index-game-tab {
    border-bottom: none;
}

.nav-tabs.index-game-tab .nav-item.show .nav-link,
.nav-tabs.index-game-tab .nav-link.active {
    background: #231e17;
    padding: 10px 20px;
    border-radius: 18px 0px 0px 0px;
    border: none;
    position: relative;
    font-weight: bold;
    color: var(--text-color);
}

.nav-tabs.index-game-tab .nav-link {
    background: #231e17;
    padding: 10px 20px;
    border-radius: 18px 0px 0px 0px;
    position: relative;
    font-weight: bold;
    color: #495057;
    border: none;
}

.nav-tabs.index-game-tab li {
    margin-right: 40px;
}

.nav-tabs.index-game-tab li:not(:first-child) .nav-link::before {
    background: var(--box-radio) no-repeat;
    content: "";
    height: 68px;
    width: 52px;
    position: absolute;
    background-size: 100% 100%;
    top: 0px;
    left: -38px;
    rotate: 180deg;
}

.nav-tabs.index-game-tab .nav-link::after {
    background: var(--box-radio) no-repeat;
    content: "";
    height: 68px;
    width: 60px;
    position: absolute;
    background-size: 100% 100%;
    top: 0px;
    right: -48px;
}

.nav-tabs.index-game-tab .nav-link:hover {
    border: none;
    color: var(--text-color);
}

.index-game-tab .nav-item .show span,
.index-game-tab .nav-item .active span {
    color: #b08b5f;
}

/** Activation **/
.activation-content {
    color: var(--text-color);
    padding: 0px 50px;
}

.nav-tabs.active-tabs {
    border-bottom: none;
    max-width: 480px;
    margin: auto;
    padding-bottom: 15px;
}

.nav-tabs.active-tabs li.nav-item {
    margin: auto;
}

.nav-tabs.active-tabs .nav-item.show .nav-link,
.nav-tabs.active-tabs .nav-link.active {
    color: #000;
    background: #b08b5f;
    border-color: #000;
}

.nav-tabs.active-tabs .nav-link {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    width: auto;
    height: auto;
    font-size: 11px;
    color: #b08b5f;
    background: #000;
    padding: 5px 1px;
    text-align: center;
    margin: 0 5px;
    border-radius: 30px;
    text-transform: uppercase;
}

.sms-activate {
    text-align: center;
}

.sms-activate input {
    max-width: 50px;
    height: 50px;
    display: inline-block;
    margin: auto 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #a7a7a7;
    font-size: 35px;
    font-weight: 600;
    color: #252525;
}

.sms-activate input:focus {
    outline: none;
    border: 1px solid #b08b5f;
}

.next-active {
    text-align: center;
    padding: 15px 0 10px;
}

.finish-hide {
    display: none;
}

.nav-tabs.active-tabs li.nav-item {
    margin: auto;
    width: 50%;
}

.activate-wrapper {
    margin: auto;
}

.step-activate {
    display: grid;
    grid-template-columns: 55px auto;
    grid-gap: 10px 4px;
}

.activ {
    color: #ffd154;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    padding: 13px 0;
}

.activ h3 {
    font-size: 24px;
    color: var(--text-color);
    font-weight: 700;
    margin-bottom: 1px;
}

.simple {
    text-align: center;
    color: var(--text-color);
    border-bottom: 1px solid #959595;
    margin: auto;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.2;
    padding-bottom: 5px;
}

a.live-btn {
    display: inline-block;
    background: #252a2f;
    color: #fff;
    padding: 3px 10px;
    border-radius: 30px;
    border: 1px solid #fff;
    margin-top: 5px;
    font-size: 14px;
}

a.live-btn:hover {
    background: #b08b5f;
    color: #000;
}

.finish-wrapper {
    color: #fff;
    text-align: center;
    padding: 0px 50px;
}

.finish-wrapper h1 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.acc-activ {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    padding: 5px 0;
}

.acc-activ img {
    padding: 10px;
}

.congrazt {
    line-height: 1;
    border-bottom: 1px solid #cacaca;
    padding: 0 0 9px;
}

button.btn-play {
    background: linear-gradient(45deg, rgba(245, 245, 245, 1) 0%, rgba(232, 232, 232, 1) 100%);
    margin: auto;
    padding: 5px 15px;
    border-radius: 35px;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 900;
    color: #3e3e3e;
    border: none;
}

.btn-submt {
    width: 40%;
    background: #b08b5f;
    color: #fff;
    border: 1px solid #b08b5f;
    font-size: 19px;
    padding: 7px 25px;
    border-radius: 10px;
    display: block;
    margin: 0px auto;
}

.lobby-wrap-1 ul {
    display: grid;
    list-style: none;
    padding: 0px;
    gap: 30px 20px;
    grid-template-columns: repeat(6, 1fr);
}

.lobby-wrap-1 {
    background: #231e17;
    padding: 20px;
    border-radius: 0px 18px 18px 18px;
}

.lobby-wrap-1 img {
    border-radius: 15px;
}

/* announcement modal */
.ann-wrap {
    display: flex;
    background: #292929;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    align-items: center;
}

.announcementpopupimg img {
    /* width: 400px; */
    margin: auto;
    border-radius: 5px;
}

#announcementpopup .carousel-control-prev {
    left: -22px;
}

#announcementpopup .carousel-control-next {
    right: -22px;
}

.announcementmodal.modal {
    z-index: 999999;
}

.announcementmodal .modal-content {
    position: relative;
}

.announcementmodal .close {
    right: 0;
    bottom: -35px;
    color: #fff;
    opacity: 1;
    position: absolute;
    z-index: 111;
    text-align: center;
    left: 48%;
    font-size: 27px;
    font-weight: 100;
    border: 2px solid #fff;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.announcementmodal.detectannouncementmodal02 .close {
    position: absolute;
    right: 55px;
    top: 20px;

}

.announcementmodal .modal-content {
    background-color: transparent;
    border: none;
}


.announcementmodal .modal-dialog {
    max-width: 500px;
}

.annou-pop {
    border-radius: 18px;
    background: #231e17;
    padding: 20px;
    color: #fff;
    border: 1px solid #dcad73;
}

.annou-ttle {
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid #dcad73;
    padding-bottom: 7px;
}

.annou-content {
    padding-top: 25px;
    font-size: 12px;
}

.announcementmodal .modal_close {
    z-index: 10;
    color: #fff;
    opacity: 1;
}

.annou-content img {
    display: block;
    margin: 0px auto;
}

.annou-pop p {
    margin-top: 20px;
    margin-bottom: 0px;
}

.round {
    position: relative;
    margin-right: 10px;
    height: 16px;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    height: 16px;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px;
    margin: 0px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 1px;
    opacity: 0;
    position: absolute;
    top: 3px;
    transform: rotate(-45deg);
    width: 12px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
    background-color: #2283f6;
    border-color: #2283f6;
}

.round input[type="checkbox"]:checked+label:after {
    opacity: 1;
}

.cls-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    font-size: 12px;
    color: #fff;
}

/* side menubar */
.left_container_bonus {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    margin-bottom: 20px;
    padding: 0px 18px;
}

.left_container_bonus_box {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    border-radius: 5px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(108,78,54,1) 0%, rgba(180,139,93,1) 100%);
    /* width: 100%; */
}

.left_container_bonus_txt {
    position: absolute;
    flex-direction: column;
    display: flex;
}

.left_container_bonus_txt_top {
    font-weight: 700;
}

.left_container_bonus_txt_btm {
    font-size: 13px;
    color: #ffffff;
    font-weight: bold;
    padding: 0px 18px;
}

.sidebar.close .left_container_bonus {
    display: none;
}

/* index page - daily challenge */
.daily_wrap {
    /* background-color: #1c2532;
    */
    padding: 0;
}

.daily_wrap_img {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: -10px;
    position: relative;
}

.daily_wrap_img img {
    width: 100%;
}

.daily_table_wrap {
    background-color: var(--dark-white);
    padding: 20px 10px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.battle_card_title {
    font-size: 20px;
    max-height: 52px;
    max-width: 160px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 17px;
}

.daily_wrap_img_inn {
    padding: 20px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.battle_card_timer {
    padding: 9px 15px;
    width: 160px;
    height: 51px;
    background: hsla(0, 0%, 100%, .18);
    border: 1px solid hsla(0, 0%, 100%, .1);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.battle_card_label {
    position: absolute;
    left: -1px;
    top: -2px;
    transform: translateY(-50%);
    font-weight: 800;
    font-size: 9px;
    line-height: 120%;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #000;
    opacity: .9;
    background: #fed700;
    border-radius: 8px 8px 8px 0;
    padding: 2px 6px;
    white-space: nowrap;
}

.battle_card_timer_block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.battle_card_block_value {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    color: #fff;
}

.battle_card_block_name {
    color: #ffffffb8;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
}

.battle_card_timer_dot {
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    color: #fff;
    align-self: flex-start;
}

.battle_card_prize {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    background: #fed700;
    box-shadow: 0 6.88237px 13.1093px -6.88237px rgba(0, 0, 0, .08);
    border-radius: 8px;
    font-weight: 800;
    color: #000;
    height: 36px;
    width: fit-content;
}

.battle_card_prize_title {
    font-size: 9px;
    line-height: 120%;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
    width: 32px;
    margin-right: 6px;
    white-space: pre-line;
    flex-shrink: 0;
}

.battle_card_prize_amount {
    font-size: 24px;
    line-height: 110%;
    letter-spacing: -.02em;
    font-feature-settings: "tnum" on, "lnum" on;
    font-weight: 800;
}

.daily_table_wrap table thead tr {
    color: #fff2aa;
    font-size: 11px;
    font-weight: 600;
}

.daily_table_wrap table img {
    width: 27px;
}

.table_user {
    display: inline-flex;
    align-items: center;
    grid-gap: 10px;
}

.table_user_content {
    display: flex;
    flex-direction: column;
}

.table_user_content span {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.02em;
    color: #fff2aa;
    font-weight: 500;
}

.table_user_content span.name {
    color: var(--text-color);
}

.daily_table_wrap table tr th {
    padding: 5px;
}

.daily_table_wrap table tr {
    border-bottom: 1px solid #93acd3;
}

.daily_view {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0px 5px 0px;
    gap: 10px;
}

.daily_view a {
    font-weight: 600;
    font-size: 12px;
    /* min-width: 150px; */
    width: 100%;
}

.btn-more {
    color: #fff;
    background: linear-gradient(90deg, rgba(208,160,13,1) 0%, rgba(255,252,173,1) 100%);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 12px;
    border: none;
    text-shadow: 0px 1px 3px #000;
}

.btn-challenge {
    background: linear-gradient(90deg, rgba(90,63,44,1) 0%, rgba(229,181,120,1) 100%);
    border-radius: 5px;
    padding: 5px 10px;
    color: #fff;
    text-shadow: 0px 1px 3px #000;
}

.arrow_slider_wrp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
}

.arrow_slider_wrp.arrow_slider_wrp_slots_custom {
    display: flex;
    align-items: center;
    justify-content: end;
}

.arrow_slider {
    display: flex;
    grid-gap: 6px;
    margin: 10px 0;
    justify-content: space-between;
}

.arrow_slider .slide-arrow {
    cursor: pointer;
    background-color: #b08b5f;
    padding: 6px 13px;
    border-radius: 50%;
    color: #fff;
}

.daily_icon {
    width: 25px;
    margin-right: 10px;
}

/* index page - live deposit */
.transaction_container {
    position: relative;
    margin-top: 20px;
    background-color: var(--dark-white);
    padding: 20px;
    border-radius: 18px;
    background: #231e17 url(../image/index/live-transaction.png) bottom right no-repeat;
    /* padding: 0 10px; */
    margin: 20px 10px 10px 10px;
}

.transaction_title_box {
    display: grid;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 70%;
    /* padding: 10px; */
    grid-template-columns: repeat(2, 1fr);
}

.transaction_title {
    display: flex;
    align-items: center;
}

.transaction_title img {
    width: 25px;
    margin-right: 10px;
}

.transaction_title .text {
    font-weight: 900;
    font-style: italic;
    font-size: 20px;
    line-height: 20px;
    color: #A6A9B2;
}

.transaction_time {
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #ffffff;
    padding: 10px;
    text-shadow: 0px 3px #000000;
}

.transaction_box {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
}

.transaction_content {
    width: calc(100% - 20px);
    position: relative;
}

.transaction_content_box_title {
    display: flex;
    align-items: center;
}

.transaction_content_box {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.transaction_content_1_title {
    font-weight: 700;
    font-size: 14px;
    color: #fff2aa;
    width: 50%;
}

.transaction_content_2_title {
    font-weight: 700;
    font-size: 14px;
    color: #fff2aa;
    width: 50%;
}

.transaction_content_1 {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color);
    width: 50%;
}

.transaction_content_1 img {
    width: 30px;
    margin-right: 10px;
}

.transaction_content_2 {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-color);
    width: 50%;
}

.text-trs {
    color: #b08b5f;
    font-size: 20px;
    line-height: 21px;
}

.fnt-wh {
    color: var(--text-color);
    font-size: 20px;
    font-weight: bold;
}

.btn-live {
    display: flex;
    align-items: center;
}

.wrap-live {
    width: calc(100% - 20px);
    background-color: #352b1e;
    border-radius: 10px;
    padding: 15px;
    overflow: hidden;
    position: relative;
    /* margin-left: 35px; */
}

/* view more and tnc modal */
.view_modal .modal-content {

    background: none;
    padding: 0px;
    border-radius: 10px;
}

.view_modal .modal-body {
    padding: 0px;
}

.modal_body_view {
    background: #232323;
    padding: 10px 0px;
    border-radius: 10px;
}

.modal_body_view h5 {
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    margin: 0px;
    padding-top: 10px;
}

.view_modal button.close {
    color: #fff;
    position: absolute;
    right: 15px;
    top: 15px;
}

.tnc-content {
    padding-top: 13px;
    margin: 15px;
    border-top: 1px solid #93acd3;
    font-size: 12px;
    color: #ffffff;
}

.tournament_sec_daily {
    padding: 10px;
    /* background: #0e1235; */
}

/* vip 1 */
.user_vip_inner {
    grid-gap: 20px;
    color: #fff;
    display: -ms-flexbox;
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: 340px 1fr;
    margin: 0 auto;
    min-height: 350px;
    padding: 0;
    position: relative;
    width: 100%;
}

.user_vip_inner .user_vip_left {
    background: #251e18;
    border-radius: 0.75rem;
    margin: 0 auto;
    padding: 7px;
    width: 100%;
}

.user_vip_inner .vip_inner {
    display: block;
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

.user_vip_inner .user_vip_body {
    display: grid;
    grid-Gamingsoft-rows: 40px 1fr 45px 45px 40px 68px;
    margin: 0 auto;
    padding: 10px;
    width: 100%;
}

.user_vip_inner .user_vip_head {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
}

.user_vip_inner .user_vip_head h2 {
    color: #e6eb85;
    font-size: 16px;
    line-height: 1.4;
    margin: 0 auto;
    padding: 8px;
    text-transform: uppercase;
    width: 100%;
}

.user_vip_inner .user_level_bg {
    background: url(/static/media/vip_mid.a4e399b….svg) 50% no-repeat;
    background-size: 70%;
    margin: 0 auto;
    min-height: 120px;
    width: 140px;
}

.user_vip_inner .user_level_bg,
.user_vip_inner .user_level_light {
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;

}

.user_vip_inner .user_level_light {
    border-radius: 50%;
    box-shadow: 0 0 100px 50px #fed791;
    height: 0;
    position: absolute;
    width: 0;
    z-index: 1;
}

.user_vip_inner .user_level_pic {
    margin: 0 auto;
    z-index: 2;
}

.user_vip_inner .user_vip_score_body {
    color: var(--text-color);
    display: grid;
    grid-template-columns: 80px 1fr;
    line-height: 1.3;
    margin: 10px auto 0;
    padding: 0;
    width: 100%;
}

.user_vip_inner .score_title {
    padding-left: 5px;
    text-align: left;
}

.user_vip_inner .score_value {
    padding-right: 5px;
    text-align: right;
}

.vip_overview .yellow2 {
    color: #d5f193;
}

.user_vip_inner .score_process {
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 2;
}

.user_vip_inner .user_vip_next_txt {
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    text-align: center;
}

.user_vip_inner .usr_vip_score_inner {
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
}

.user_vip_inner .usr_vip_score_box {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

.user_vip_inner .usr_vip_score_box_item {
    background: linear-gradient(180deg, rgba(220,174,115,1) 0%, rgba(103,72,51,1) 100%);
    border-radius: 0.5rem;
    display: block;
    display: flex;
    flex-direction: column;
    /* min-height: 60px; */
    text-align: center;
    justify-content: center;
    padding: 10px;
}

.user_vip_inner .user_vip_righ {
    background: #251e18;
    border-radius: 0.75rem;
    display: block;
    margin: 0 auto;
    padding: 7px;
    position: relative;
    width: 100%;
}

.user_vip_inner .vip_inner {
    display: block;
    height: 100%;
    margin: 0 auto;
    width: 100%;
}

.user_vip_inner .user_vip_right_body {
    margin: 0 auto;
    padding: 10px 10px 18px;
    width: 100%;
}

.user_vip_inner .user_vip_head {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    text-align: center;
}

.user_vip_inner .user_level_list,
.user_vip_inner .user_vip_level_process {
    margin: 0 auto;
    padding: 5px 20px;
    width: 100%;
    position: relative;
}

.user_vip_inner .user_level_list_body {
    grid-gap: 20px 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 10px auto;
    width: 100%;
}

.user_vip_inner .level_box_item {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.user_vip_inner .levle_box_body {
    background: linear-gradient(180deg, rgba(220,174,115,1) 0%, rgba(103,72,51,1) 100%);
    border-radius: 0.5rem;
    color: #f0e356;
    cursor: pointer;
    font-family: Montserrat-Bold;
    font-size: 12px;
    height: 100px;
    min-width: 36px;
    position: relative;
    z-index: 1;
}

.user_vip_inner .levle_box_pic {
    align-items: center;
    background: url(../image/vip/giftbox.png) 50% no-repeat;
    display: flex;
    height: 60px;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.user_vip_inner .levle_box_title {
    background: #fff3ab;
    border-radius: 0 0 0.5rem 0.5rem;
    color: #333;
    padding: 3px 0 0;
    text-transform: uppercase;
    z-index: 11;
}

.user_vip_inner .levle_box_body:after {
    background: #fff3ab;
    bottom: -6px;
    content: "";
    height: 12px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 12px;
    z-index: -1;
}

.user_vip_inner .usr_vip_score_box_item h5 {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.user_vip_inner .big_score_box .usr_vip_score_box_item h3 {
    font-size: 18px;
    margin: 10px auto;
    font-weight: 600;
    line-height: 1;
}

.ant-progress {
    box-sizing: border-box;
    color: hsla(0, 0%, 100%, .85);
    display: inline-block;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ant-progress-line {
    font-size: 14px;
    position: relative;
    width: 100%;
}

.ant-progress-bg,
.ant-progress-success-bg {
    background-color: #177ddc;
    border-radius: 100px;
    position: relative;
    transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
}

.ant-progress-outer {
    display: inline-block;
    margin-right: 0;
    padding-right: 0;
    width: 100%;
}

.ant-progress-show-info .ant-progress-outer {
    margin-right: calc(-2em - 8px);
    padding-right: calc(2em + 8px);
}

.ant-progress-inner {
    background-color: hsla(0, 0%, 100%, .08);
    border-radius: 100px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

.ant-progress-text {
    color: hsla(0, 0%, 100%, .85);
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    margin-left: 8px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    width: 2em;
    word-break: normal;
}

.user_vip_inner .usr_vip_score_box_item h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin-top: 16px;
}

.yellow {
    color: #ffc805;
}

.user_vip_inner .user_vip_level_desc {
    color: var(-color-grey7);
    font-size: 14px;
    min-height: 40px;
    padding: 10px 8px;
    text-align: center;
}

.card_overview {
    display: block;
    margin: 30px auto;
    position: relative;
    width: 100%;
    padding: 30px 0;
}

.rank_slider_container {
    overflow: hidden;
    /* Add this line to hide overflowing content */
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.rank_slider_wrapper {
    color: #fff;
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    margin: 46px auto 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.rank_slider_slide {
    background: #251e18;
    margin: 0 auto;
    padding: 20px 12px 30px;
    /* border: 1px solid #80f801; */
    /* opacity: 0.5; */
}

.rank_slider_slide,
.rank_slider_slide_out {
    border-radius: 0.75rem;
    position: relative;
    width: 100%;
}

.rank_slider_slide_out {
    border: 2px solid transparent;
    /* Optional: Add your inactive slide styles here */
}

.swiper-slide-active {
    opacity: 1;
}

.rank_slider_image {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: -50px;
    width: 100px;
}

.rank_slider_image img {
    align-items: center;
    display: block;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

.rank_slider_slider_body {
    padding: 10px 0 20px;
    position: relative;
    text-align: center;
    top: 20px;
    z-index: 2;
}

.rank_slider_title {
    margin: 10px auto 0;
    text-align: center;
    width: 100%;
}

.rank_slider_slider_body h4 {
    color: #fff077;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin-top: 5px;
    text-align: center
}

.rank_slider_slider_body h5 {
    color: #adb6c4;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 5px;
    text-align: center
}

.rank_slider_slider_body h6 {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin-top: 5px;
    text-align: center
}

.rank_slider_title h5 {
    color: #ffffff;
}

.rank_slider_rule_1 {
    margin: 5px auto 0;
    padding: 0;
    width: 100%
}

.rank_slider_rule_box {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    margin: 0 auto;
    width: 100%
}

.rank_slider_rule_box_item {
    background: linear-gradient(180deg, rgba(220,174,115,1) 0%, rgba(103,72,51,1) 100%);
    border-radius: .5rem;
    display: block;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    text-align: center;
    /* border: 1px solid #80f801; */
}

.rank_slider_rule_box_item h5 {
    color: #000;
    font-family: Montserrat-Medium;
    font-size: 13px;
    font-weight: 600;
    margin-top: 5px
}

.rank_slider_rule_box_item h4 {
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fffdf7;
}

.rank_slider_rule_2,
.rank_slider_rule_3 {
    margin-top: 10px;
    text-align: center
}

.rank_slider_slider_body hr {
    background-color: var(--color-green1);
    border: none;
    height: 1px;
    margin: 0 auto;
    width: 70%
}

.rank_slider_rule_3 hr {
    margin-top: 10px
}

.rank_slider_rule_4 {
    margin: 5px auto;
    padding: 0;
    width: 100%
}

.rank_slider_tr_3 {
    grid-gap: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 2px
}

.rank_slider_tr_2 {
    grid-gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 40px
}

.rank_slider_rule_4 div {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    margin-top: 5px;
    text-align: center
}

.rank_slider_slide_out.active {}

.rank_slider_slide_out.active .rank_slider_slide {
    background: linear-gradient(to bottom, rgba(114, 213, 9, 1) 0%, rgba(50, 56, 56, 1) 100%);
    opacity: 1;
}

.rank_slider_slide_out.active .rank_slider_slide.rank_slider_slide:before {
    background: linear-gradient(180deg, #12442b, #85e6a1)
}

.rank_slider_slide_out.active .rank_slider_slide_bottom .btn {
    background: #85e6a1;
    color: #000
}

.rank_slider_slide_bottom .btn {
    background: linear-gradient(90deg, rgba(90,63,44,1) 0%, rgba(229,181,120,1) 100%);
    border: none;
    border-radius: 1.2rem;
    color: #000;
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 40px;
}

.level_pagediv {
    display: grid;
    grid-template-columns: 30% auto 30%;
    height: 100%;
    margin: 20px auto 0;
    width: 200px
}

.level_pagediv,
.level_pagediv .level_btn {
    align-items: center;
    justify-content: center;
    text-align: center
}

.level_pagediv .level_btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #fff;
}

.rank_slider_slider_body hr {
    background-color: #746140;
    border: none;
    height: 1px;
    margin: 0 auto;
    width: 70%;
}

.rank_slider_title h4 {
    color: #fff;
}

/* referral program */
.bonus_box {
    background: #251e18;
    border-radius: 0.75rem;
    color: #fff;
    display: -ms-flexbox;
    display: grid;
    flex-wrap: wrap;
    margin: 10px auto;
    min-height: 260px;
    padding: 0;
    position: relative;
    width: 100%;
}

.bonus_box_custom {
    grid-template-columns: 275px 1fr;
}

.bonus_left_box {
    background: #1f1714;
    border-radius: 0.75rem;
    float: left;
    margin: 10px;
    min-height: 250px;
    position: relative;
}

.copy_overview_inner {
    padding: 10px;
}

.copy_title {
    color: #b08b5f;
    font-size: 24px;
    min-height: 68px;
    padding: 10px 10px 0;
    font-weight: 700;
}

.copy_value_title {
    color: #fff;
    font-size: 10px;
    margin-bottom: 10px;
    padding: 0 5px;
}

.copy_value {
    align-items: center;
    border-radius: 0.25rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 10px;
    height: 34px;
    justify-content: space-between;
    letter-spacing: -.02em;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 0 0 0 0px;
    text-align: left;
}

.copybtn {
    background-color: #b08b5f;
    width: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    font-size: 15px;
    border-radius: 4px;
    color: #000;
}

.copy_value input {
    height: 34px;
    background-color: #3b3b3b;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    padding: 5px;
    color: #fff;
}

.bonus_right_box_top {
    background: #b08b5f;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 108px;
    padding: 10px 16px;
    border-radius: 0.75rem;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bonus_data_block {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    font-size: 14px;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

.bonus_data_block h4 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 20px;
    margin-top: 18px;
    text-align: center;
}

.bonus_data_block span {
    line-height: 40px;
    font-weight: 600;
}

.bonus_right_box_bottom {
    background: #b08b5f;
    display: grid;
    justify-items: flex-start;
    margin-bottom: 10px;
    margin-top: 15px;
    min-height: 140px;
    position: relative;
    border-radius: 0.75rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    grid-template-columns: minmax(120px, 240px) 90px 2fr;
    align-items: center;
    grid-gap: 30px;
}

.bonus_plan_title {
    align-items: center;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    font-style: italic;
    margin: 0 auto;
    padding-left: 30px;
    max-width: 240px;
    justify-content: center;
    font-weight: 700;
    line-height: 1.3;
}

.bonus_plan_txt {
    min-width: 150px;
    display: flex;
    grid-column-end: auto;
    grid-column-start: auto;
    align-items: center;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 24px;
    justify-content: left;
    padding-left: 20px;
    text-align: left;
    font-weight: 700;
    position: relative;
}

.trophy_m {
    display: none;
}

.bonus_plan_txt_tooltit,
.bonus_plan_txt_tooltit2 {
    display: none;
    position: absolute;
    font-size: 10px;
    color: #fff;
    width: 260px;
    font-weight: 500;
    top: 33px;
    z-index: 999;
    background-color: #333333;
    padding: 5px;
    border-radius: 10px;
}

.bonus_ques,
.bonus_ques2 {
    color: #fff;
    margin-left: 10px;
    cursor: pointer;
    font-size: 18px;
}

.bonus_card_overview_title {
    margin: 0 auto;
    padding: 0;
}

.bonus_card_overview_title h2 {
    color: #fff;
    display: block;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 22px;
    margin-top: 22px;
    text-align: center;
    font-weight: 700;
}

.bonus_card_overview_inner {
    display: flex;
    color: #fff;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    min-height: 98px;
    position: relative;
}

.bonus_card_item {
    align-items: center;
    background: #1f1714;
    border-radius: 8px;
    display: flex;
    width: 32%;
}

.bonus_card_item_icon {
    margin: 0 10px;
    position: relative;
    width: 80px;
}

.bonus_card_item_div {
    display: flex;
    flex-direction: column;
    margin-left: 13px;
}

.bonus_card_item_title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    margin-bottom: 0;
}

.bonus_card_item_number {
    color: #b08b5f;
    font-size: 20px;
    font-weight: 800;
    line-height: 32px;
    margin-bottom: 0;
}

.bonus_card_item_people {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 0;
}

.bonus_invite_box_title {
    color: #fff;
    display: block;

    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 22px;
    margin-top: 22px;
    text-align: center;
    font-weight: 400;
}

.bonus_content_box {
    background: linear-gradient(95deg, #393939, #101010);
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    flex-direction: row;
}

.bonus_left_content_box {
    padding: 30px 0 30px 30px;
    width: 45%;
}

.bonus_left_title {
    color: #b08b5f;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    line-height: 40px;
}

.bonus_left_text {
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
}

.bonus_left_money {
    color: #b08b5f;
    font-size: 16px;
    font-weight: 900;
}

.bonus_right_content_box {
    align-items: center;
    display: flex;
    flex: 1 1;
    justify-content: center;
}

.bonus_right_content_box img {
    width: 270px;
    padding: 10px;
}

.bonus_invite_list {
    background: #251e18;
    border-radius: 18px 18px 18px 18px;
    margin-top: 24px;
    opacity: 1;
    padding-bottom: 30px;
    padding-top: 24px;
}

.bonus_table_title {
    color: #b08b5f;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    text-align: center;
}

.bonus_invite_list .bonus_table_ul {
    display: flex;
    flex-direction: column;
    padding: 0 36px;
}

.bonus_invite_list .bonus_table_ul .bonus_table_li {
    cursor: pointer;
    display: flex;
    width: 100%;
}

.bonus_invite_list .bonus_table_ul .bonus_table_list_li {
    background: hsla(0, 0%, 100%, .7);
    border-radius: 8px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
}

.bonus_table_text {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 50%;
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.bonus_table_invite_nav {
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 16px;
    font-weight: 800;
    justify-content: center;
    min-height: 40px;
    text-align: center;
    width: 190px;
}

.bonus_invite_list .bonus_table_ul .bonus_table_list_li:nth-last-child(3) {
    background: #f4d5af;
}

.bonus_invite_list .bonus_table_ul .bonus_table_list_li:nth-last-child(2) {
    background: #e7bb87;
}

.bonus_invite_list .bonus_table_ul .bonus_table_list_li:last-child {
    background: #b08b5f;
}

.bonus_box .bonus_card_overview {
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.bonus_card_overview_title h2 {
    color: #fff;
    display: block;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 22px;
    margin-top: 22px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.questiontool_wrap {
    position: relative;
}

.bonus_bets_box {
    background: #251e18;
    border-radius: 8px;
    margin-top: 20px;
    min-height: 620px;
    padding-bottom: 20px;
    width: 100%;
}

.bonus_bets_top {
    display: flex;
    justify-content: space-around;
}

.bonus_bets_top_left {
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-top: 30px;
    padding-left: 35px;
    width: 49%;
}

.bonus_bets_bgc {
    background-color: hsla(0, 0%, 100%, .1);
    border-radius: 10px;
    padding: 20px 20px 25px 25px;
    font-weight: 600;
}

.bonus_bets_desc {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
}

.bonus_bets_top_example {
    color: #fff;
    line-height: 26px;
    margin-top: 10px;
    padding-right: 12px;
    width: 100%;
    margin-bottom: 0;
}

.bonus_bets_top_example_title {
    font-size: 16px;
    margin-bottom: 0;
}

.bonus_bets_top_example_desc {
    font-size: 14px;
    margin-left: 15px;
    margin-bottom: 0;
}

.bonus_bets_top_right {
    align-items: center;
    justify-content: center;
    position: relative;
    width: 49%;
    display: flex;
}

.bonus_card_overview_desc {
    color: #adb6c4;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin: 15px auto;
}

.bonus_bets_top_right img {
    width: 75%;
    padding: 10px;
}

.bonus_bets_bottom {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    padding: 20px;
    flex-wrap: nowrap;
}

.bonus_bets_bottom_box {
    background-color: #1f1714;
    border-radius: 15px 15px 15px 15px;
    box-sizing: border-box;
    padding: 20px
}

.bonus_bets_bottom_left {
    width: 48%;
}

.bonus_bets_bottom_right {
    width: 48%;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.bonus_bets_bottom_right h2 {
    align-items: center;
    display: flex;
    font-size: 18px;
    font-weight: 500;
    height: 30px;
    justify-content: center;
}

.bonus_bets_number {
    position: relative;
    align-items: center;
    color: #b08b5f;
    display: flex;
    font-size: 30px;
    font-weight: 700;
    height: 60px;
    justify-content: center;
    position: relative;
}

.bonus_bets_number_text {
    color: #adb6c4;
    font-weight: 600;
    height: 30px;
    text-align: center;
    margin-bottom: 0;
}

.bonus_ranking_overview {
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
    position: relative;
    width: 100%;
}

.bonus_ranking_inner {
    grid-column-gap: 10px;
    color: #fff;
    display: grid;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
}

.bonus_ranking_item {
    background: #251e18;
    border-radius: 0.75rem;
    display: grid;
    min-height: 110px;
    padding: 10px;
}

.bonus_item_title {
    color: #fff;
    font-size: 22px;
    height: 42px;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    font-weight: 700;
}

.bonus_ranking_data {
    background: #1f1714;
    border-radius: 0.75rem;
    display: grid;
    grid-template-columns: 30% 40% 30%;
    margin: 0 auto;
    min-height: 280px;
    width: 100%;
}

.bonus_ranking_level2 {
    padding-top: 80px;
}

.bonus_ranking_level1 {
    padding-top: 20px;
}

.bonus_ranking_level3 {
    padding-top: 80px;
}

.bonus_userinfo_body {
    display: grid;
    font-size: 10px;
    grid-template-rows: 30px 100px 20px 20px;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

.bonus_userinfo_ranking_level {
    font-size: 12px;
    padding-top: 15px;
}

.bonus_ranking_level2 .bonus_userinfo_ranking_level {
    background: linear-gradient(180deg, #f39d42, #9ea8ba);
    -webkit-background-clip: text;
    color: transparent;
}

.bonus_userinfo_avatar_bg {
    border: 1px solid #f39d42;
    border-radius: 50%;
    display: block;
    height: 80px;
    margin: 10px auto;
    overflow: hidden;
    padding: 3px;
    position: relative;
    width: 80px;
}

.bonus_userinfo_body .bonus_userinfo_score,
.bonus_userinfo_body .bonus_userinfo_username {
    align-items: center;
    color: #fff;
    display: block;
    justify-content: center;
    margin: 10px auto;
    text-align: center;
    transform: scale(.8);
    font-size: 16px;
}

.bonus_userinfo_body .bonus_userinfo_score {
    color: #b08b5f;
}

.bonus_ranking_lottery {
    grid-gap: 10px;
    display: grid;
    margin: 0 auto;
    min-height: 280px;
    padding: 0 8px;
    width: 100%;
}

.bonus_lottery_item {
    background: #1f1714;
    border-radius: 0.25rem;
    color: #3f526e;
    display: -ms-flexbox;
    display: grid;
    flex-wrap: wrap;
    font-size: 10px;
    grid-template-columns: minmax(60px, 100px) 1fr 100px;
    margin: 0 auto;
    min-height: 50px;
    padding: 0 10px;
    position: relative;
    width: 100%;
}

.bonus_lottery_item div {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 12px 3px;
    text-align: center;
    font-size: 16px;
}

.bonus_username {
    color: #ffffff;
}

.bonus_yellow {
    color: #b08b5f;
}

.bonus_footer_overview {
    background: #251e18;
    border-radius: 15px;
    display: flex;
    margin-bottom: 30px;
    opacity: 1;
    padding: 15px 15px 15px 24px;
    flex-direction: row;
}

.bonus_footer_left {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 315px;
}

.bonus_footer_right {
    flex: 1 1;
    width: 100%;
    margin-left: 25px;
}

.bonus_footer_right .bonus_footer_right_content {
    background: #1f1714;
    border-radius: 15px;
    height: 100%;
    opacity: 1;
    padding: 26px 23px 18px 29px;
    width: 100%;
}

.bonus_footer_right_content .bonus_footer_right_text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 14px;
}

.bonus_footer_last_text {
    margin-bottom: 0;
}

.bonus_footer_right_href {
    color: #b08b5f;
    display: block;
    font-size: 16px;
    font-weight: 600;
}

/* account activation modal */
.otp-wrap {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.otp-wrap .form-control {
    text-align: center;
}

.modalhead_btn.active {
    background-color: #b08b5f;
    color: #000;
    padding: 5px 10px;
    border-radius: 3rem;
    margin: 0px 0px 5px;
}

.btn_login_modal {
    background-color: #b08b5f;
    color: #000;
    padding: 7px;
    width: 100%;
    border-radius: 10px;
    border: none;
    margin: 20px 0;
}

.btn_login_modal {
    background-color: #b08b5f;
    color: #000;
    padding: 7px;
    width: 100%;
    border-radius: 10px;
    border: none;
    margin: 20px 0;
}

.code {
    max-width: 102px;
    overflow: hidden;
}

.verification-code {
    padding-right: 0;
    overflow: hidden;
}

.verification-code img {
    height: 50px;
}

.resend-text {
    margin-top: 15px;
    color: #fff;
    /* display: none; */
}

.reg_form h4 {
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}

.reg_form i {
    text-align: center;
    display: block;
    margin: 0px auto;
    font-size: 130px;
    color: #2283f6;
    margin-bottom: 10px;
    filter: invert(52%) sepia(92%) saturate(375%) hue-rotate(55deg) brightness(104%) contrast(115%);
}

.reg_form p {
    text-align: center;
    color: #c3c3c3;
    font-size: 12px;
}

.btn-otp {
    background: #b08b5f;
    color: #fff;
    border-radius: 5px;
    width: 60%;
}

/* afterlogin  */
.m-show-wal {
    display: none;
}

.btn-tk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0px;
}

.btn-tk h5 {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding-bottom: 10px;
    padding: 15px;
    background: #b08b5f;
    border-radius: 10px 10px 0px 0px;
    color: #000;
}

.btn-token {
    background: #5f5f5f;
    min-width: 150px;
    padding: 10px;
    text-align: center;
    display: flex;
    gap: 14px;
    justify-content: center;
    border-radius: 8px;
    align-items: center;
    font-size: 17px;
    color: #fff;
}

.point-wrp {
    display: flex;
    gap: 15px;
}

span.img-point img {
    height: 30px;
}

.point-btm {
    border-top: 1px solid #b08b5f;
    width: 92%;
    padding-bottom: 20px;
}

.ply-point {
    text-align: center;
    padding: 15px;
    color: #ffffff;
    font-weight: bold;
}

.point-btm ul {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.afterlogin_dep_head {
    /* background-color: #2c2e34; */
    padding: 1.25rem 1.25rem;
    justify-content: space-between;
    display: flex;
    align-items: center;
}

.afterlogin_dep_headbody_wrap {
    overflow: hidden;
    border-radius: 1rem;
    margin-top: 20px;
}

.afterlogin_dep_headbody_wrap.afterlogin_dep_headbody_wrap_custom {
    overflow: hidden;
    border-radius: 1rem;
    margin-top: 0;
}

.head_col_1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    color: #fff;
}

.head_col_1 span {
    font-weight: 600;
}

.trans_btn {
    background-color: #35383d;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 12px;
}

.head_bal {
    font-size: 30px;
    font-weight: 700;
}

.head_bal span {
    color: #b08b5f;
}

.pen-top {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.pen-l {
    border-right: 1px solid #5b5b5b;
    padding: 0px 10px;
}

.re-status {
    text-align: end;
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
    color: #fff;
}

.pen-r {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
}

.pen-l p {
    font-weight: bold;
    font-size: 12px;
}

.pen-time {
    font-size: 16px;
    font-weight: bold;
}

.pen-r p {
    font-weight: bold;
    font-size: 12px;
}

.pen-time small {
    font-weight: bold;
    font-size: 14px;
}

button.btn-if {
    color: #2283f6;
    padding: 0px;
    background: none;
    border: none;
}

.table-pen {
    border-top: 1px solid #5b5b5b;
    padding-top: 20px;
    padding-bottom: 20px;
}

.table-pen table th {
    background: #b08b5f;
    color: #fff;
    padding: 10px;
}

.table-pen table {
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.table-pen table tr:nth-child(even) {
    background: #2c2e34;
}

.table-pen table tr:nth-child(odd) {
    background: #92929266;
}

.table-pen table tr td {
    padding: 10px;
    font-size: 12px;
}

.table-pen table tr td:first-child {
    width: 38%;
    font-weight: bold;
}

.table-pen table tr:last-child {}

p.txt-sm {
    font-size: 12px;
    font-weight: bold;
    color: #ed1d49;
    margin: 0px;
    margin-top: 12px;
}

.pentop-l {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-cancel {
    background: #ed1d49;
    color: #fff;
    border-radius: 5px;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
}

.btnmr-if {
    background: #b08b5f;
    color: #000;
    border-radius: 5px;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.penttop-r {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.btn-pending {
    display: flex;
    align-items: flex-start;
    justify-content: end;
    gap: 10px;
}

.pay-status .card {
    background: none;
    margin-bottom: 20px;
    border: double #907759;
    padding: 0px;
    border-radius: 10px;
    color: #fff;
}

.pay-status .card-body {
    padding-top: 0px;
}

.radio-group.usdt-tab{
    grid-template-columns: repeat(4,1fr);
    display: grid;
    gap: 10px;
}

.radio-group.usdt-tab label{
    height: auto;
}

.usdt-tab img{
    width: 30px;
}

.amt-qr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 20px;
}

.qr-img img {
    height: 130px;
}

.qr-area {
    border: 1px solid #5f5f5f;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.qr-nm {
    color: #2283f6;
    font-size: 12px;
}

.qr-info {
    font-size: 12px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: #fff;
}

.qr-img {
    margin: 10px 0px;
}

.atten {
    border: 1px solid #5f5f5f;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px;
}

.atten img {
    height: 20px;
}

.af-info p {
    margin: 0px;
    color: #fff;
}

.txt-rd {
    color: #ed1d49;
}

.af-info {
    margin-top: 15px;
}

.trans-btn-wrap{
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.btn-trans{
    padding: 5px 20px;
    height: 37px;
    top: 0px;
    position: relative;
    border-radius: 5px;
    border: none;
    font-size: 12px;
    width: 100%;
    color: #fff;
    border: none;
    background: #b08b5f;   
}

button.btn-wal.wallet{
    display: flex;
}

.add_bank_with_wrap {
    color: #b08b5f;
    display: flex;
    flex-direction: column;
    height: 112px;
    background-color: #272727;
    border-radius: 0.75rem;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.add_bank_with_wrap p {
    margin-bottom: 0;
}

.add_bank_with_wrap i {
    font-size: 24px;
    margin-bottom: 10px;
}

.add-bank-content{
    padding: 30px;
    color: #fff;
}

.btn-df {
    border: none;
    background: #ed1d49;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px;
}

.btn-df:hover {
    background: #c5163b;
}

#modal-profile .af-modal .modal-body{
    max-height: 600px;
    overflow-y: scroll;
}

.add-bank-title{
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    position: relative;
    font-size: 20px;
    background: #b08b5f;
    border-radius: 18px 20px 0px 0px;
}

/* inbox page */
.history_table_wrap {
    background-color: #24262b00;
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 40px;
}

.history_table {
    color: #ecf1ff80;
    text-align: center;
}

.history_table tr th {
    padding: 0 5px;
    vertical-align: initial;
}

tr.unread td {
    font-weight: bold;
    color: #fff;
}

.history_table tr td {
    padding: 3px 5px;
    vertical-align: initial;
}

.history_table tr th:last-child {
    text-align: right;
}

.history_table tr td:last-child {
    color: #f4ba00;
    text-align: right;
}

.msg_user {
    cursor: pointer;
}

.msg_user:hover {
    color: #fff;
}

.history_table_wrap.history_table_wrap_inbox {
    background-color: #24262b00;
    padding: 0;
    border-radius: 10px;
    margin-top: 0;
}

.btn-del {
    border: none;
    background: #ed1d49;
    color: #fff;
    border-radius: 5px;
    padding: 5px 20px;
    margin-bottom: 15px;
}

.btn-delete {
    color: #f4ba00;
    padding: 0px;
    border: none;
    background: none;
}

.btn-delete:hover {
    color: #d7a402;
}

.inbox-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow-y: auto;
    max-height: 400px;
}

.inbox-text {
    background: #404348;
    margin: 0px 15px;
    border-radius: 10px;
    padding: 15px;
}

.modal-dialog.inbox {
    max-width: 500px !important;
    border-radius: 18px;
}

.modal-content.inbox {
    border: none;
    background: #191b1e;
    border-radius: 18px;
}

button.close-inbox {
    background: none;
    border: none;
    font-size: 33px;
    padding: 11px;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
    color: #ffffff;
}

.wrapper {
    margin: 0 auto;
}

.chatMsg {
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 80px);
    margin-bottom: 30px;
}

.chatMsg ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 0px;
}

.chatMsg ul li {
    position: relative;
    margin-bottom: 15px;
}

.msg,
.msg-reply {
    display: block;
    /* margin-left: 10px; */
    /* background: #cbcbcb; */
    /* padding: 10px 15px; */
    position: relative;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
    color: #000;
    border-radius: 5px;
    /* margin-right: 10px; */
}

.msg::before,
.msg-reply::before {
    position: absolute;
    left: -8px;
    top: 0px;
    content: "";
    display: block;
    /* border-right: 12px solid #fff; */
    border-bottom: 15px solid transparent;
}

.msg-date2 {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0px auto;
    color: #fff;
    font-weight: 100;
}

.msg-reply {
    margin-left: inherit;
    /* margin-right: 10px; */
    background: #616161;
    color: #fff;
    /* margin-left: 10px; */
    padding: 10px;
    font-size: 13px;
}

.msg-reply::before {
    left: inherit;
    right: -9px;
    border-right: inherit;
    /* border-left: 12px solid #4d61a6; */
}

.avatar,
.avatar-reply {
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 30px;

    height: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.avatar img,
.avatar-reply img {
    max-width: 30px;
}

.avatar-reply {
    left: inherit;
    right: 0;
}

.chatBox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.chatBox .mdi-attachment {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: 20px;
    bottom: 15px;
    color: #4d61a6;
    cursor: pointer;
}

.chatBox .mdi-send {
    width: 32px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    z-index: 2;
    bottom: 8px;
    right: 10px;
    font-size: 16px;
    color: #fff;
    background: #2283f6;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
}

.chatBox .mdi-send.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.chatBox textarea {
    display: block;
    resize: none;
    width: 100%;
    border: 0;
    border-top: 1px solid #ccc;
    background: #fff;
    padding: 12px 50px 12px 40px;
    position: absolute;
    bottom: 0;
    min-height: 45px;
    overflow: hidden;
    color: #000;
}

.hiddendiv {
    display: none;
}

.chatBox textarea:focus {
    outline: none;
}

.msg-date {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    gap: 10px;
    /* border-bottom: 1px solid #a4a4a4; */
}

.msg-content {
    line-height: 18px;
    margin-top: 0px;
    font-size: 13px;
    background: #cbcbcb;
    padding: 10px;
    border-radius: 5px;
}

.mdi-send:before {
    content: "\f1d8";
    position: absolute;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    text-align: center;
    right: 10px;
}

.item-box.uer-bln.inbox-table-wrap{
    width: 1200px;
    margin: 0px auto;
    padding: 20px;
}

/* lucky draw popout */
.floating img {
    width: 50%;
}

.floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 100px;
    margin-top: 5px;
    bottom: 10%;
    position: fixed;
    z-index: 1000;
}

@keyframes floating {
    from {
        transform: translate(0, 0px);
    }

    65% {
        transform: translate(0, 15px);
    }

    to {
        transform: translate(0, -0px);
    }
}

.floating-all img {
    width: 70%;
}

.floating_modal .modal-content {
    background: none;
    border: none;
}

.floating-wrap img {
    display: block;
    margin: 0px auto;
    opacity: 1;
}

.floating-wrap .close {
    color: #fff;
    opacity: 1;
}

.floating_modal .close {
    color: #fff;
    opacity: 1;
    font-size: 50px;
    position: absolute;
    right: 0px;
    z-index: 10;
}

.floating-wrap a {
    position: relative;
}

.floating-text {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0px auto;
    text-align: center;
    padding: 16px;
    color: #000;
    font-weight: bold;
}

.floating-pop {
    display: inline-flex;
    padding: 10px 20px;
    color: #fff;
    font-size: 50px;
    text-shadow: 3px 3px black;
    line-height: 30px;
}

#closeButton {
    right: 0;
    top: 0px;
    color: #fff;
    opacity: 1;
    position: absolute;
    z-index: 111;
    text-align: center;
    left: 48%;
    font-size: 27px;
    font-weight: 100;
    border-radius: 100%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    font-weight: bold;
}

.text-gold {
    font-size: 37px;
    line-height: 33px;
    background: #ECE976;
    background: repeating-linear-gradient(to bottom, #ECE976 0%, #F29835 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 0px #000);
}

/* mission page */
.daily-wrap {
    margin: 20px auto;
    max-width: 1040px;
}

.mission-bg ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.mission-bg ul li {
    list-style: none;
}

.mission-bg ul li a {
    display: block;
    position: relative;
}

.ms-wrap {
    position: absolute;
    top: 0px;
    padding: 15px;
    text-align: center;
    width: 100%;
}

.ms-ttl {
    text-transform: uppercase;
}

.ms-amt {
    font-weight: bold;
    color: #fbe621;
    text-transform: uppercase;
}

.ms-btn {
    position: absolute;
    bottom: -5px;
}

.mission_modal .modal-content {
    background: #251e18;
    border-radius: 18px;
}

.mission_modal .modal-dialog {
    max-width: 800px;
}

.mission_modal .close {
    position: absolute;
    right: 0px;
    color: #fff;
}

.mission_modal ul,
.mission_modal ol {
    padding-left: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #787878;
    font-size: 12px;
}

.mission_modal ul li {
    list-style: circle;
    margin-bottom: 15px;
}

.mission_modal ol li {
    list-style: auto;
    margin-bottom: 10px;
}

.mission_modal .modal-body {
    padding: 20px 30px;
    color: #fff;
}

.mission_modal h4 {
    /* border-bottom: 1px solid #fff; */
    display: inline-flex;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.mission_modal h5 {
    padding: 10px 0px;
}

.mission_modal table tr td,
.mission_modal table tr th {
    padding: 10px;
    text-align: center;
    font-size: 12px;
}

.mission_modal .close {
    color: #fff;
    font-size: 34px;
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 10px;
}

.clm-btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.clm-btn button {
    background: #b08b5f;
    border-radius: 10px;
    font-size: 12px;
    padding: 10px 14px;
    color: #000;
    font-weight: 600;
    border: none;
    margin: 0 5px;
}

.mission-content{
    overflow-y: auto;
    max-height: 400px;
}

/* fortune wheel */
.wheel_product .wheel-wrap {
    position: relative;
    overflow: hidden;
    width: calc(100% - 20px);
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
    height: 880px;
    margin-bottom: -120px;
}

.wheel-wrap .wheel_product_bg {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    border-radius: 18px;
}

.wheel-wrap .wheel_product_img {
    width: 48.6%;
    position: absolute;
    top: auto;
    right: 23.5%;
    bottom: 29%;
    transform: rotate(0deg);
    animation: wheelRotate 7s cubic-bezier(.37, -.15, .3, .94) infinite;
    z-index: 4;
    filter: drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff);
}

.wheel-wrap .wheel_product_frame {
    width: 55.5%;
    position: absolute;
    bottom: 5%;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0px auto;
    animation: wheelRotate 7s cubic-bezier(.37, -.15, .3, .94) infinite;
}

.wheel-wrap .wheel_product_zeus {
    width: 38%;
    position: absolute;
    left: -0%;
    bottom: 25%;
    z-index: 2;
}

@keyframes wheelRotate {
    0% {
        transform: rotate(0deg)
    }

    80% {
        transform: rotate(1turn)
    }

    to {
        transform: rotate(1turn)
    }
}

.wheel-wrap .wheel_product_arrow {
    width: 9%;
    position: absolute;
    bottom: 45%;
    z-index: 6;
    top: auto;
    left: 0;
    right: 0;
    margin: 0px auto;
}

.wheel-wrap .lightning {
    position: absolute;
    width: 28%;
    height: 50%;
    right: 1.3%;
    bottom: 25%;
    mix-blend-mode: lighten;
}

.wheel-wrap .wheel_product_img {
    width: 48.6%;
    position: absolute;
    right: 23.5%;
    bottom: 32%;
    transform: rotate(0deg);
    animation: wheelRotate 7s cubic-bezier(.37, -.15, .3, .94) infinite;
    z-index: 4;
    filter: drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff) drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff) drop-shadow(0px 0px 10px #bd6fff)drop-shadow(0px 0px 10px #bd6fff) drop-shadow(0px 0px 10px #bd6fff);
}

.wheel-wrap .wheel_product_content {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.wheel_product.wheel-wrap {
    position: relative;
    overflow: hidden;
    width: calc(100% - 20px);
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 600px;
    margin-bottom: 40px;
}

.slider_title.wheel-ttl {
    color: #e2e7f3;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
    font-style: italic;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
}

.wheel-all ul {
    display: flex;
    justify-content: center;
    margin-bottom: 55px;
    gap: 20px;
    font-weight: bold;
}

.wheel-all ul li {
    list-style: none;
}

span.yell-text {
    color: #b08b5f;
    font-weight: bold;
}

.whl-btn {
    background: #1f1714;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    gap: 5px;
}

a.btn-spin {
    background: #b08b5f;
    padding: 8px 20px;
    margin: 0px;
    display: flex;
    border-radius: 8px;
    color: #000;
}

.wheel-all .btn-more {
    background: #b08b5f;
    padding: 8px 20px;
    margin: 0px;
    display: flex;
    border-radius: 8px;
    font-size: 15px;
}

.wheel-bg {
    display: block;
}

.wrapper_inner {
    overflow: hidden;
}

/* daily page */
.daily-bg {
    position: relative;
    text-align: center;
}

.daily-bg ul {
    position: absolute;
    bottom: 55px;
    display: flex;
    gap: 10px;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0px auto;
    list-style: none;
}

.daily-bg ul li a {
    position: relative;
    display: block;
}

.daily-bg ul li a.claimed .daily-content {
    display: none;
}

.daily-content {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: 0px auto;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.daily-bg ul li a img {
    filter: grayscale(0.8);
}

.daily-bg ul li a.claimed img {
    filter: none;
}

.daily-bg ul li a.active img {
    filter: none;
}

.modal-congrat h5 {
    color: #b08b5f;
    font-size: 38px;
    font-weight: bold;
    text-align: center;
}

.congrat-text {
    text-align: center;
    font-size: 20px;
}

.image-wrap img {
    display: block;
    margin: 0px auto;
    position: relative;
}

.color-text1 {
    color: #b08b5f;
    font-weight: bold;
}

.color-text2 {
    color: #edb543;
    font-weight: bold;
}

.img-wrap-top {
    position: absolute !important;
    bottom: -27px;
    left: 0;
    right: 0;
    margin: 0px auto;
}

img.img-wrap {
    height: 80%;
    margin-top: 20px;
}

.tokenredeem {
    display: block;
    margin: 0px auto;
    margin-top: 35px;
    background: #ed1d49;
    border: none;
    z-index: 10;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 18px;
}

.token-pt {
    z-index: 10;
}

.image-wrap {
    height: 250px;
    position: relative;
}

.daily-wrap-in {
    background: #272a30;
    color: #fff;
    padding: 20px;
    border-radius: 18px;
    box-shadow: 0px 0px 10px #b08b5f;
}

.daily_modal .close {
    position: absolute;
    right: 30px;
    top: 35px;
    color: #fff;
    opacity: 1;
    font-size: 47px;
    z-index: 2;
}

.daily_modal .modal-body {
    background: none;
}

.daily_modal .modal-content {
    background: none;
    border: none;
}

.btn-bfr {
    position: absolute;
    bottom: 30%;
    display: flex;
    gap: 10px;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0px auto;
    list-style: none;
}

button.btn-dly {
    background: #b08b5f;
    color: #000;
    border: none;
    padding: 10px 30px;
    box-shadow: 0px 0px 20px 8px #fde403, 0px 0px 20px 0px #7ff800;
    font-size: 20px;
    border-radius: 10px;
    font-weight: bold;
}

/* play 2 earn */
.play2earn {
    padding: 40px;
}

.play2earn-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.p2e-ttl-1 {
    background: #1b1b1b;
    text-align: center;
    line-height: 1;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
}

.p2e-info-content {
    padding: 10px;
    border: 1px solid #37393f;
    border-top: none;
    padding-bottom: 0;
}

.p2e-amount {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.p2e-amount-box {
    width: 100%;
    background: #494949;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-bar.p2e {
    width: 100%;
    background-color: #494949;
    border-radius: 25px;
    margin: 10px 0;
    border: none;
    height: auto;
}

.progress-bar-fill {
    height: 20px;
    background: linear-gradient(to bottom, #b08b5f 0%, #b08b5f 99%);
    transition: width 0.5s;
    border-radius: 25px;
}

.p2e-btn-group {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.p2e-btn-group a {
    background: #b08b5f;
    color: #fff;
    padding: 5px 10px;
    display: block;
    text-align: center;
    width: 40%;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 5px;
}

.p2e-btn-group a:hover {
    background: #b08b5f;
    color: #fff !important;
}

.btn-p2e {
    color: #b08b5f;
    font-weight: bold;
}

.p2e-table {
    max-width: 1000px !important;
}

.btn-apply {
    background: #b08b5f;
    color: #fff;
    font-weight: bold;
}

.history-play-to-earn {
    margin: 10px 0px;
}

.btn-apply:hover {
    color: #fff;
    background: #b08b5f;
}

.dataTables_wrapper {
    color: #fff;
}

table.dataTable.compact thead th,
table.dataTable.compact thead td {
    background: #b08b5f;
    color: #fff;
    padding: 6px;
    text-align: center;
    font-size: 12px;
}

.dataTables_length label {
    display: flex;
    grid-gap: 10px;
    align-items: center;
    max-width: 30%;
    color: #fff;
}

.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td {
    border: 1px solid #7a7a7a;
    text-align: center;
    color: #ffffff;
}

.dataTables_paginate {
    display: flex;
    gap: 10px;
}

.p2e .a.paginate_button {
    color: #000;
    display: block;
}

.p2e a.paginate_button.current {
    color: #fff;
}

.p2e .btn-apply {
    background: linear-gradient(to bottom, rgba(84, 63, 22, 1) 0%, rgba(173, 132, 57, 1) 99%);
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 6px 20px;
}

.dataTables_length label select {
    background: #7a7a7a;
    border: none;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    color: #fff;
}

.dataTables_scroll {
    margin-top: 25px;
}

.dataTables_scrollHead {
    position: relative;
    border: 0px;
    width: 100%;
}

/*Redemption*/
.red-bg {
    background: url("../image/reward-redemption/rr-bg.png") no-repeat center top;
}

.redemp-title {
    padding-bottom: 15px;
}

.redemption-wrapper {
    text-align: center;
    /* max-width: 1000px; */
    margin: 0 auto;
    margin-bottom: 55px;
    margin-top: 45px;
    display: flex;
}

.redemp-box {
    position: relative;
    margin: 15px 2px 35px;
    display: inline-block;
    text-transform: uppercase;
}

.redemp-box {
    background: url("../image/reward-redemption/bg-reward.png")no-repeat;
    background-size: 100%;
    width: 312px;
    height: 226px;
    margin: 0 auto;
    padding: 13px 25px;
    position: relative;
}

.redemp-inner {
    position: relative;
    top: -40px;
}

.prize-credit {
    padding-bottom: 15px;
}

.point-text {
    line-height: 8px;
    color: #b08b5f;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000, 2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000, 1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000, -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
}

.require-text {
    font-size: 14px;
    font-weight: 100;
    padding: 9px 0;
}

.claim-btn-wrap {
    margin-top: -30px;
}

.point-text.top {
    margin-top: -15px;
}

.prize-item {
    margin-top: -40px;
}

.prize-sub {
    font-size: 11px;
    font-weight: 600;
}

.require-text.top {
    min-height: 78px;
}

.max-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* top: -75px; */
}

.top-btn {
    display: flex;
    position: relative;
}

.top-btn-wrap {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

.pred-btn-point {
    display: flex;
    position: relative;
    align-items: center;
    font-weight: bold;
}

.subtitle-wrap {
    position: relative;
}

.sub-box.redemp {
    position: relative;
    top: 2px;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    /* font-weight: bold; */
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 100;
    justify-content: center;
    margin-bottom: 20px;
}

.top-btn {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.red-txt {
    text-align: center;
    color: #ff0000;
}

.red-redemp-txt {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    right: -11px;
    color: #ff0000;
}

.pred-btn {
    background: none;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: bold;
}

span.red-pnt {
    color: #edc983;
}

.pt-btn {
    font-size: 20px;
}

.red-txt-gd {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    background: #F5E489;
    background: linear-gradient(to bottom, #F5E489 0%, #D88127 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 20px;
    filter: drop-shadow(2px 2px 0px black);
}

.submit-btn {
    background: none;
    border: none;
    display: block;
    margin: 0px auto;
}


img.img-sh {
    position: absolute;
    z-index: 1;
    left: 0px;
}

img.img-sh2 {
    z-index: 2;
}

.transc-l img {
    display: block;
    margin: 0px auto;
}

.btn-live {
    display: flex;
    align-items: center;
}

.text-trs {
    color: #fde403;
    font-size: 20px;
    line-height: 21px;
}

.fnt-wh {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}


.rep_modal .modal-dialog {
    background: none;
}

.rep_modal .modal-content {
    background: none;
    border: none;
}

.rep_modal .daily-wrap-in {
    box-shadow: none;
    border: none;
    background: url("../image/reward-redemption/bg-reward.png")no-repeat center top;
    background-size: contain;
    min-width: 312px;
}

.rep_modal img.img-wrap {
    height: 85% !important;
    position: relative;
    top: -78px;
}

.modal-congrat {
    position: relative;
}

.rep_modal .modal-congrat h5 {
    position: absolute;
    top: 57%;
    left: 0;
    right: 0;
    margin: auto;
    color: #c498ff;
    font-size: 28px;
}

.rep_modal .congrat-text {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 67px;
}

.rep_modal .color-text1 {
    color: #c498ff;
}

.rep_modal .close {
    position: absolute;
    right: 30px;
    top: 18px;
    color: #db9bfc;
    opacity: 1;
    font-size: 47px;
}

.reptnc_modal .modal-content {
    background: none;
    padding: 0px;
}

.reptnc_modal .modal_body_view {
    background: #070315;
    border: 1px solid #db9bfc;
    box-shadow: 0px 0px 19px 4px #6b12ae;
}

.reptnc_modal .tnc-content ul,
.reptnc_modal .tnc-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.reptnc_modal .tnc-content ul li {
    list-style: circle;
}

.reptnc_modal .tnc-content ol li {
    list-style: auto;
}

.reptnc_modal .close {
    position: absolute;
    right: 30px;
    top: 18px;
    color: #db9bfc;
    opacity: 1;
    font-size: 47px;
}

.reptnc_modal .modal_body_view h5 {
    color: #db9bfc;
}

.reptnc_modal .tnc-content {
    color: #ffffff;
    border-top: 1px solid #db9bfc;
}

.rep_modal .claim-btn-wrap {
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 0px auto;
    right: 0;
}

/* announcement bar */
.ann-wrap {
    display: flex;
    background: #231e17;
    padding: 10px;
    border-radius: 10px;
    margin: 10px 0;
    align-items: center;
}

@media (max-width:1328px) {
    .af-wrap {
        width: 100%;
    }

    .af-wrap .aff-off {
        width: 100%;
        margin: 0px auto;
    }

    .aff-in-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .rwd-graph {
        grid-template-columns: repeat(1, 1fr);
    }

    .rwd-wrap {
        height: auto;
        padding: 20px;
    }

    .rwd-top {
        padding: 0px;
    }

    .table-wrap {
        flex-direction: column;
    }

    .rwd-in {
        width: 100%;
    }

    .rwd-l {
        text-align: center;
        width: 100%;
    }

    .aff-in-2 {}

    .rwd-r img {
        display: block;
        margin: 0px auto;
    }

    .btn-aff {
        width: 70%;
    }

    .rewd-1 {
        flex-direction: column;
        width: 100%;
    }

    .rewd-date {
        flex-direction: column;
    }

    .info-side {
        width: 25%;
    }
}

@media (max-width:1260px) {
    .product-in {
        grid-template-columns: 50% 50%;
    }

    .af-wrap {
        width: 100%;
    }

    .af-wrap.aff-off {
        width: 100%;
        margin: 0px auto;
    }

    .slide-off .pd-item-2 {
        width: 30%;
    }

    .pd-item-3 {
        display: none;
    }

    .slide-off .pd-item-3 {
        display: block;
    }

    .swiper-card .game-wrap {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .videoswiper .swiper-card .gm-detail {
        padding-top: 0px;
    }

    .prv-nm {
        display: none;
    }

    .gm-nm2 {
        font-size: 1vw;
    }

    .ply-won {
        font-size: 1vw;
    }

    .ttl-txt {
        font-size: 1vw;
    }

    .ply-name {
        font-size: 0.8vw;
    }

    .gm-nm {
        font-size: 0.8vw;
    }

    .gm-image2 {
        margin-top: 10px;
    }

    .videoswiper .swiper-button-prev {
        left: 0px;
        top: 8vw;
    }

    .videoswiper .swiper-button-next {
        top: 8vw;
        right: 0px;
    }

    .pd-item-1 {}

    .pd-item-2 {
        width: 50%;
    }

    .search-bar {
        display: none;
    }

    .header-r button {
        padding: 0.5vw 2vw;
        font-size: 1.5vw;
    }

    .leader-box {
        flex-direction: column;
    }

    .lead-top-l {
        width: 100%;
    }

    .lead-r {
        width: 100%;
    }

    .footer-menu ul {
        list-style: none;
        padding: 0px;
        padding-left: 30px;
    }

    .page-block {
        max-width: 100%;
    }

    .footer-l:after {
        height: 195px;
        border-right: 1px solid #1b1d21;
        content: "";
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .slider .swiper-slide:first-child {
        width: 50%;
    }

    .slider .swiper-slide:nth-child(2n) {
        width: 50%;
    }

    .slider .swiper-slide:nth-child(3n) {
        width: 50%;
    }

    .slider .swiper-slide {
        width: 50%;
    }

    .slider .swiper-slide img {
        padding-right: 10px;
    }

    .rwd-wrap {
        height: auto;
        margin-top: 10vw;
    }

    .vip-ttl-wrap h4 {
        color: #c3bd9d;
        font-size: 2vw;
    }

    .aff-1 h4 {
        font-size: 6vw;
    }

    element.style {}

    .vip-ttl {
        font-size: 2vw;
    }

    .info-side {
        width: 25%;
        font-size: 12px;
    }

    .info-side ul {
        padding: 15px;
    }

    .info-side ul a {
        padding: 5px;
    }

    .info-all {
        display: flex;
    }

    .slider .swiper-slide:first-child picture {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slider .swiper-slide:first-child source {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .d-show {
        display: none !important;
    }

    .m-show {
        display: block !important;
    }

    button.btn-wal{
        height: 30px;
        font-size: 12px;
        padding: 0px 10px;
        align-items: center;
    }

    button.btn-wal.wallet{
        display: flex;
    }

    .contact-grid{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
}

@media (max-width: 999px) {
    .transaction_container {
        background-size: contain;
    }

    .transaction_title_box {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 25px;
    }

    .wrap-live {
        width: 100%;
    }

    .daily-bg ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: relative;
    }

    .daily-bg ul li a img {
        display: block;
        margin: 0px auto;
    }

    .modal-congrat h5 {
        font-size: 7vw;
    }

    .daily_modal .close {
        top: -35px;
    }

    .mission-bg ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .bonus_box_custom {
        grid-template-columns: 1fr;
    }

    .bonus_right_box_top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top-left-radius: 0.75rem;
        border-bottom-right-radius: 0.75rem;
    }

    .trophy_m {
        display: block;
        width: 90px;
        margin: auto;
    }

    .trophy_w {
        display: none;
    }

    .bonus_right_box_bottom {
        grid-gap: 0;
        border-bottom-right-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        grid-template-columns: 110px 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        padding: 10px;
    }

    .bonus_right_box {
        padding: 10px;
    }

    .bonus_card_overview_inner {
        display: grid;
        justify-content: initial;
        grid-gap: 15px;
    }

    .bonus_card_item {
        width: 100%;
    }

    .bonus_content_box {
        display: grid;
    }

    .bonus_left_content_box {
        padding: 30px;
        width: 100%;
    }

    .bonus_bets_top {
        display: grid;
    }

    .bonus_bets_top_left {
        width: 100%;
        padding: 30px;
    }

    .bonus_bets_top_right {
        width: 100%;
    }

    .bonus_bets_bottom {
        display: grid;
        grid-gap: 15px;
    }

    .bonus_bets_bottom_left {
        width: 100%;
    }

    .bonus_bets_bottom_right {
        width: 100%;
    }

    .bonus_ranking_inner {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }

    .bonus_footer_overview {
        display: grid;
        padding: 10px;
    }

    .bonus_footer_right {
        margin-left: 0;
    }

    .bonus_footer_left {
        margin: auto;
        padding-bottom: 20px;
        width: auto;
    }

    .bonus_footer_right .bonus_footer_right_content {
        padding: 10px;
    }

    .aff-reward h4 {
        font-size: 20px;
    }

    .aff-in-2 {
        flex-direction: column;
        height: auto;
    }

    .red-in img {
        margin-top: 15px;
    }

    .rewd-date h4 {
        font-size: 16px;
    }

    .btn-aff-wrap {
        margin-top: 10px;
    }

    .aff-bnr {
        padding-top: 10px;
    }

    .user_vip_inner {
        display: block;
        grid-template-columns: 1fr;
    }

    .user_vip_inner .user_level_list_body {
        grid-template-columns: repeat(3, 1fr);
    }

    .user_vip_inner .user_level_list {
        padding: 0px;
    }

    .vip-wrap ul {
        flex-direction: column;
    }

    .vip_title_b {
        font-size: 14px;
    }

    .afterlogin_dep_head {
        padding: 0.7rem 1.25rem;
        justify-content: center;
    }

    .m-show-wal {
        display: block;
    }

    .m-hide-wal {
        display: none;
    }

    .pen-top {
        flex-direction: column;
    }

    .home-fiba-countdown-numbers {
        position: absolute;
        top: 30%;
        left: 80%;
        transform: translate(-50%, -50%);
        font-size: 12px;
      }
      
      .home-fiba-countdown-numbers span {
        font-size: 18px;
      }

}

@media (max-width:840px) {
    .product-slider {
        display: none;
    }

    .product-slider-m {
        display: block;
        margin-top: 15px;
    }

    .gm-image2 img {
        height: 13vw;
    }

    .swiper-card .game-wrap {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .videoswiper .swiper-button-prev,
    .videoswiper .swiper-button-next {
        display: none;
    }

    .ttl-txt {
        font-size: 4vw;
    }

    .gm-detail {
        display: flex;
        flex-direction: column;
        font-size: 4vw;
        justify-content: center;
    }

    .gm-nm2 {
        font-size: 2vw;
    }

    .ply-won {
        font-size: 2vw;
    }

    .header-r button {
        padding: 1vw 2vw;
        font-size: 3vw;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .sport-ifame {
        width: 100%;
        min-width: 100%;
    }

    .home-section .home-content {
        padding-top: 75px;
    }

    .slt-lbby ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .aff-in-2 {
        flex-direction: column;
        height: auto;
    }

    .in-aff-top h5 {
        font-size: 18px;
    }

    .btn-aff {
        width: 85%;
        margin-top: 20px;
        font-size: 16px;
    }

    .vip-ttl {
        font-size: 4vw;
    }

    .vip-wrap2 ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .vip-ttl-wrap h4 {
        font-size: 3vw;
    }

    .vip-ttl-wrap p {
        font-size: 3vw;
    }

    .vip-wrap ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .info-content p {
        margin-bottom: 20px;
    }

    .info-side ul {
        display: none;
    }

    .info-content {
        width: 100%;
        padding: 20px;
    }

    .dropdown2 .options {
        position: absolute;
        bottom: -265px;
        z-index: 1;
    }

    .dropdown2.active::before {
        transform: rotate(313deg);
    }

    .dropdown2::before {
        top: 14px;
        transform: rotate(137deg);
    }

    .inf-mn-m {
        display: block;
    }

    .dropdown2 {
        width: 200px;
        margin: 0px;
    }

    .info-all {
        display: flex;
        flex-direction: column;
    }

    .bank-detail {
        background: #26282d;
        border-radius: 10px;
        padding: 5px 15px;
        color: #fff;
        margin-bottom: 15px;
    }

    .bank-detail tr td {
        padding: 5px 10px;
    }

    .tranc-table tr td {
        color: #fff;
    }

    .ttl-history a .nxt-ico {
        font-size: 17px;
        display: flex;
        margin-right: 8px;
    }

    .footer-l:after {
        border-right: 1px solid #1b1d2100;
    }

    .promo-content {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer-img ul {
        justify-content: center;
    }

    .btn-bln-all {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-amt {
        width: 100%;
        justify-content: space-between;
    }

    button.btnall {
        padding: 2px 10px;
        font-size: 12px;
    }

    .footer-ll-in {
        display: initial;
    }

    .mobile-none {
        display: none;
    }

    .left_container_bonus{
        padding: 0px 20px 0px 20px;
    }

}

@media (max-width:768px) {
    .status-bottom p {
        font-size: 7px;
    }

    .status-bottom h6 {
        font-size: 13px;
        padding: 21px 0 0px;
    }

    .vip-top {
        background: url("../image/vip/mobile.png") no-repeat top;
        height: auto;
        background-size: contain;
        display: block;
    }

    .vip-player-current {
        height: 220px;
    }

    .status-vip {
        max-width: 100%;
        margin-bottom: 10px;
    }

    .vip-turnover {
        margin: 0px;
    }

    .vip-turnover-text {
        font-size: 12px;
        padding: 5px;
    }

    .vip-turnover span {
        font-size: 12px;
    }

    .status-vip {
        margin-bottom: 50px;
    }

    .ttl-vip {
        font-size: 20px;
        padding-top: 30px;
    }

    .ttl-second {
        font-size: 16px;
    }

    .vip-in-table {
        font-size: 11px;
        padding: 0px;
    }

    .vip-mark {
        font-size: 11px;
    }

    .vip-lvl i {
        font-size: 10px;
        white-space: nowrap;
    }

    .vip-level-text {
        font-size: 15px;
    }

    .vip-img {
        width: 90px;
    }

    .panel-body {
        font-size: 12px;
    }

    .floating {
        margin-left: 20px;
    }

    .dataTables_scrollHead {
        overflow-x: scroll;
    }

    .dataTables_scrollHead::-webkit-scrollbar-thumb{
        background: #73898a;
    }

    .dataTables_scrollHead::-webkit-scrollbar {
        width: 2px;
        height:2px;
        border-radius: 10px;
    }


    .bottom {
        font-size: 10px;
    }

    .desktop-view{
        display: none;
    }
    
    .mobile-view{
        display: block;
    }

    .home-fiba-countdown-numbers {
        top: 67%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
    }

    .home-fiba-countdown-numbers span {
        font-size: 16px;
    }
}

@media (max-width:660px) {
    .sidebar {
        width: 100%;
        z-index: 1000;
    }

    .home-section {
        width: 100%;
        left: -260px;
    }

    .bx-menu1 {
        color: #fff;
        position: absolute;
        right: 5%;
        font-size: 30px;
        top: 15px;
        display: block;
        z-index: 10;
    }

    .sidebar.close~.home-section {
        left: 0px;
        width: calc(100% - 0px);
    }

    .sidebar.close {
        transition: all 0.5s ease;
        left: -78px;
    }

    .mode-wrap {
        justify-content: flex-start;
        padding-left: 6vw;
    }

    li.hide-op {
        justify-content: flex-start;
        padding-left: 6vw;
    }

    .sidebar .profile-details {
        width: 100%;
    }

    .btn-log {
        justify-content: flex-start;
        text-align: left;
        margin: 0px;
        padding-left: 7vw;
    }

    .btn-log {
        justify-content: flex-start;
        text-align: left;
        margin: 0px;
        padding-left: 7vw;
    }

    .sidebar .nav-links li:hover a.mode-wrap {
        padding-left: 6vw;
    }

    .search-bar {
        display: none;
    }

    .bx-menu2 {
        left: 0px;
        top: 15px;
        border: 1px solid #6f6f6f;
        position: relative;
        height: 32px;
        margin: 0px;
    }

    .home-header.side-off {
        width: 100%;
        padding: 0vw 2vw;
    }

    .home-header {
        width: 100%;
    }

    .winner-board {}

    .leader-board {
        max-width: 100%;
        padding: 15px;
        margin: 0px;
    }

    .footer-in {
        padding: 10vw;
        max-width: 100%;
    }

    .footer-wrap {
        flex-direction: column;
    }

    .footer-l {
        width: 100%;
        padding: 0px;
    }

    .footer-r {
        width: 100%;
        flex-direction: column;
        margin-top: 10vw;
        padding: 0px;
    }

    .footer-ll {
        margin-top: 30px;
    }

    .footer-menu ul {
        display: flex;
        padding: 0px;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-menu ul li a {
        display: block;
        flex-wrap: wrap;
    }

    .footer-menu ul li {
        display: flex;
    }

    .footer-ll p {
        text-align: center;
    }

    .ft-btm-l {
        flex-direction: column;
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .ft-btm-l img {
        width: fit-content;
        display: block;
        margin: 0px auto;
    }

    .ft-btm-l p {
        text-align: center;
    }

    .ft-btm-r {
        margin-top: 30px;
    }

    .carousel-cell {
        height: auto;
    }

    .lobby-all ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .lobby-wrap ul {
        flex-direction: column;
        grid-template-columns: repeat(2, 1fr);
    }

    .product-slider {
        display: none;
    }

    .logo img {
        height: auto;
    }

    .logo {
        padding: 0px;
    }

    table.wn-table tr td {
        font-size: 3vw;
    }

    table.board-tlb tr td {
        font-size: 2.5vw;
    }

    .login-modal .modal-content {
        height: 100%;
    }

    .modal-dialog.login-modal {
        margin: 0px;
        height: 100%;
    }

    .pop-btm {
        position: absolute;
    }

    button.btn-wal {
        padding: 5px;
        height: auto;
        font-size: 2vw;
    }

    .blc-all {
        font-size: 2.5vw;
    }

    .top-down {
        padding: 0vw 1vw;
    }

    .top-down .dropdown-menu {
        width: 100%;
        min-width: 275px;
        right: 0px !important;
        transform: translate3d(100px, 50px, 0px) !important;
    }

    .dropbl {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .bln-all {
        width: 100%;
        margin-top: 0px;
    }

    .use-img img {
        width: 30px;
    }

    button.dropbtn i {
        padding: 5px 10px;
        font-size: 20px;
    }

    button.btn-wal i {
        font-size: 16px;
    }

    .bln-ttl {
        font-size: 2.5vw;
    }

    button.btn-msg {
        font-size: 16px;
    }

    .bln-icon {
        font-size: 12px;
    }

    .blc-amt {
        font-size: 12px;
    }

    input.bln-search {
        height: 30px;
    }

    span.ico-dwn {
        font-size: 9px;
    }

    .af-modal {
        margin: 0px auto;
        height: 100%;
        background: var(--dark-white);
    }

    .lotto-table-wrapper {
        display: initial;
        gap: 0px;
    }

    .lotto-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .lotto-btn-content img {
        width: 50%;
    }

    .lotto-btn-content {
        font-size: 17px;
    }

    .contact-grid {
        display: initial;
    }

    .contact-wrap {
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .nav-tabs.index-game-tab li:not(:first-child) .nav-link::before {
        display: none;
    }

    .nav-tabs.index-game-tab li {
        margin-right: 0px;
        font-size: 13px;
    }

    .lobby-wrap-1 ul {
        flex-direction: column;
        grid-template-columns: repeat(2, 1fr);
    }

    .flickity-prev-next-button.previous {
        right: 30px;
        top: -25px;
        left: auto;
    }

    .flickity-prev-next-button.next {
        right: 0px;
        top: -25px;
    }

    .nav-tabs.index-game-tab .nav-link::after {
        height: 0px;
    }

    .nav-tabs.index-game-tab .nav-link {
        padding: 10px 10px;
        border-radius: 0px 20px 0px 0px;
        font-size: 12px;
    }

    .nav-tabs.index-game-tab {
        flex-wrap: nowrap;
    }

    .nav-tabs.index-game-tab .nav-item.show .nav-link,
    .nav-tabs.index-game-tab .nav-link.active {
        padding: 10px 10px;
        border-radius: 0px 20px 0px 0px;
        font-size: 12px;
    }

    .transaction_title_box {
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        gap: 25px;
    }

    .lead-btn {
        margin-top: 10%;
    }

    .btn-wal span {
        display: none;
    }

    button.btn-wal i {
        padding: 0px;
    }

    .header-r-af {
        gap: 5px;
    }

    .daily-bg ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        position: relative;
    }

    .ndl-btn i,
    .adl-btn i {
        display: block;
    }

    .downloadbox {
        width: 45%;
    }

    .mission-bg ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .play2earn-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .p2e-amount {
        grid-template-columns: repeat(1, 1fr);
    }

    .dataTables_length label select {
        width: auto;
    }

    .page-ttl {
        display: none;
    }

    .wheel_product.wheel-wrap {
        height: 300px;
        width: 100%;
        margin: 0px auto;
        min-height: 215px;
    }

    .wheel-all ul {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }

    .m-hide-wal {
        display: none;
    }

    .redemp-box{
        width: 100%;
    }

    .redemption-wrapper {
        display: flex;
        flex-direction: column;
        gap: 86px;
    }

    .rep_modal img.img-wrap {
        position: relative;
    }

    .rep_modal .congrat-text {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 45px;
        font-size: 14px;
    }

    .rep_modal .image-wrap {
        height: auto;
    }

    .rep_modal .modal-congrat h5 {
        font-size: 18px;
    }

    .rep_modal .close {
        right: 0px;
    }

    button.submit-btn {
        display: block;
        margin: 0px auto;
    }

    .rep_modal .claim-btn-wrap {
        position: absolute;
        bottom: 0px;
        left: 0;
        margin: 0px auto;
        right: 0;
    }

    .rep_modal .daily-wrap-in{
        min-width: 100%;
    }

    .radio-group.usdt-tab {
        grid-template-columns: repeat(2,1fr);
        display: grid;
        gap: 5px;
    }

    .upload-file .form-control{
        width: 100%;
    }

    .btn-file{
        padding: 0;
    }

    .af-form{
        padding: 10px;
    }

    .af-tab ul{
        display: flex;
        overflow-x: scroll;
        overflow-y:hidden;
        flex-wrap: nowrap;
    }

    .af-tab ul::-webkit-scrollbar-thumb{
        background: #73898a;
    }

    .af-tab ul::-webkit-scrollbar {
        width: 2px;
        height:2px;
        border-radius: 10px;
    }

    .left_container_bonus_txt_btm{
        font-size: 11px;
        padding: 0px 8px;
    }

    .left_container_bonus {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;
        margin-bottom: 20px;
        padding: 0px 10px;
    }

    .floating-wrap {
        display: flex;
        max-width: 400px;
    }
}

@media (max-width:420px) {
    .product-in-m {
        padding: 10px;
    }

    .gm-image2 {
        margin-top: 0px;
    }

    .gm-nm2 {
        font-size: 3vw;
    }

    .ply-won {
        font-size: 3vw;
    }

    .btn-bfr {
        bottom: 20%;
    }

    button.btn-dly {
        padding: 10px 20px;
        font-size: 15px;
    }

    .use-img img{
        display: none;
    }

    .af-tab ul li a p{
        font-size: 9px;
    }

    .mdl-form-box{
        padding: 10px;
    }

}

.tournament-bg {
    background: #231e17;
    padding: 20px;
    border-radius: 18px;
}

.input-search::placeholder {
    color: #81684c;
}

.link_name p {
    color: #d4af6e;
}

#qrCodeLink::placeholder{
    width:95%;
}

.home-fiba-countdown-banner {
    position: relative;
}

.home-fiba-countdown-content {
    position: relative;
}

.home-fiba-countdown-banner img {
    border-radius: 18px;
    margin: 0 auto;
}

.w-bg {
    background: none;
    margin-bottom: 0;
}