::placeholder,
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
	color: #333 !important;
}
.flex{ display: flex !important;}
.grid{ display: grid !important;}
.floatl{ float:left; }.floatr{ float:right; }
.btn-warning{ color: #080808; }
.bold{ font-weight: bold !important; }
.br0{ border-radius: unset !important; }
.txtc{ text-align: center !important; }
.hidden{ display: none; opacity: 0; }
.textl{text-align:left !important;} .textr{text-align:right !important;} .textc{text-align:center !important;}
.bgwhite{ background: #131313 !important;}
.form-group { margin-bottom: 0.7rem; }
.overflow-x{ overflow-x: hidden; }
.overflow-x body{ overflow-x: hidden; }
.mrg-0{ margin: 0!important; }
.mrg-top-60{ margin-top: 60px !important; }
.mrg-top-80{ margin-top: 80px !important; }
/* @font-face { font-family: system-ui; src: url(../fonts/Fonts/system-ui.ttc); }
@font-face { font-family: Helvetica-BlkCond; src: url(../fonts/Fonts/HelveticaLTStd-BlkCond.otf); }
@font-face { font-family: Helvetica-Light; src: url(../fonts/Fonts/HelveticaLTStd-Light.otf); }
@font-face { font-family: system-ui-Book; src: url(../fonts/Fonts/ufonts.com_futura-book.ttf); } */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5{ color: #080808; }
.gamelistbox h1, h2, h3, h4, h5 {
    color: #fefefe !important;
}
html, body{ 
    /* background: linear-gradient(90deg, #000 10%, #202020, #202020, #000 90%);  */
    overflow-x: hidden; font-family: 'Montserrat', "Open Sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif; 
}
body{
	/* background-image: url("../images/csjbg.jpg") !important; */
    background-image: url(/images/bgpurple.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background: linear-gradient(to bottom, rgb(3 0 4) 0%, rgb(1 4 15) 10%, rgb(0 17 74) 50%, rgb(0 0 0) 100%);
	color: #020202;
    width: 100%;
    height: 100%;
    background-color: #020202 !important;
}
a{ color: #fefefe !important; }
a:hover{ color: unset; }
ul{ margin:0; padding:0; list-style-type: none; }
img{ object-fit: contain; }
.btn:hover {
    box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.4) !important;
}
.btn-check{
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.icon-search2:before{ content: "\e8b6"; }
.icon-lock2:before{ content: "\e897"; }
.icon-person:before{ content: "\e7fd"; }
.icon-phone2:before{ content: "\e0cd"; }
/**** Background Setting ****/
.site-wrap{
	position: relative;
    margin: auto;
    padding-top: 60px;
	padding-bottom: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.site-section{
    max-width: 1000px;
    margin: auto;
    padding: 0;
}
.main .site-section{
	padding-top: 0;
}
.login-layout .site-wrap{
	padding-top: 40px;
	padding-bottom: 0;
}
.login-layout .site-section{
   width: 100%;
    margin: 0 auto;
	padding: 0;
}
.owl-carousel .owl-item img{
    object-fit: contain;
	max-height: 400px;
}
.slideout .site-wrap{
	animation: righttoleft 0.4s;
}
.slidein .site-wrap{
	right: -120%;
	animation: lefttoright 0.3s;
}
@keyframes righttoleft {
  0% {right: -100%; position: fixed;}
  100% {right: 0; position: fixed;}
}
@keyframes lefttoright {
  0% {right: 0; position: fixed;}
  100% {right: -120%; position: fixed;}
}
.rotate{
	font-size: 16px !important;
	animation: rotate360 0.7s infinite;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes glowing {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
@keyframes rotate360 {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.site-nav-marquee{
    /* border-top: 1px solid #091f6e;
    border-bottom: 1px solid #091f6e;
    box-shadow: 0 0 4px #091f6e; */
	position: relative;
    display: flex;
    width: 100%;
	/* box-shadow: 0 0 2px #444; */ 
    border-radius: 10px;
}
.site-nav-marquee img{
	max-width: 25px;
    height: 25px;
    object-fit: contain;
    margin: 0 3px;
}
.smarquee-main{
	position: relative;
    /* display: flex; */
    width: 100%;
    z-index: 1;
    overflow: hidden;
}
.site-nav-marquee marquee {
	font-size: 13px;
    white-space: nowrap;
    margin: auto;
    padding-left: 40px;
}
.site-nav-marquee marquee span{
	color: #eee;
}

.smarquee-main .elem1{
    color: #fefefe;
    font-size: 13px;
    white-space: nowrap;
    margin: auto;
    /* margin-top: 1%; */
    white-space: nowrap;
    animation: scroll linear infinite;
    transform: translateX(100%);
}
@keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
}

.nonloop-block-15{
	position: relative;
	/*background: #000;*/
    width: 100%;
}
.site-backhome{
	position: fixed;
    top: 0;
    padding: 5px;
    z-index: 10;
	overflow: hidden;
    animation: backhome2 0.6s;
}
.site-backhome img{
	width: 30px;
    height: 30px;
}
@keyframes backhome2 {
  0% { margin-left: -50px; opacity: 0; }
  60% { margin-left: -50px; opacity: 0; }
  100% { margin-left: 0; opacity: 1; }
}
.owl-dots{
	position: absolute;
    display: flex;
    width: 100%;
    bottom: 10px;
    left: 0;
}
.owl-dots .owl-dot{
	margin: 0 3px;
}
.owl-dots .owl-dot:first-child{ margin-left: auto; }
.owl-dots .owl-dot:last-child{ margin-right: auto; }
.owl-dots .owl-dot span{
	display: block;
    transition: all 0.3s ease;
    width: 7px;
    height: 7px;
	background: #444;
    border-radius: 50%;
}
.owl-dots .owl-dot.active span{
	background: #7df5ff;
    box-shadow: 0 0 5px #e45ed6;
}
/**************** Header *****************/
.site-header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 13;
    background: #000000d1;
    /* background: linear-gradient(0deg, #b3b3b3, #ffffff);
    background: linear-gradient(270deg, rgb(3 0 4) 0%, rgb(1 4 15) 10%, rgb(0 17 74) 50%, rgb(0 0 0) 100%);
    box-shadow: 0 0 6px #ff0b9b;
    border-bottom: 1px solid #97fbfb; */
	/* box-shadow: 0 0 3px #000a; */
}
.sheader-main{
	display: flex;
	box-shadow: 0 0 2px #565212;
}
.sheader-logo{
	padding: 0 4px;
	margin: auto 0;
}
.sheader-logo img{
	height: 60px;
    width: 100px;
    margin-left: 10px;
}
.sheader-menu{
	display: flex;
	margin: auto;
    margin-right: 10px;
	padding-top: 2px;
}
.sheader-login{
	display: flex;
}
.sheader-nav{
	display: flex;
	height: 60px;
	width: 45px;
	cursor: pointer;
}
.sheader-nav:before{
	/* content: '';
	background: url(../images/icon4/navbar.png) no-repeat;
	background-size: contain;
	width: 25px;
	height: 25px;
	margin: auto; */
}
.sheader2-hidden{
	position: fixed;
	display: none;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
    transition: background 0.3s, opacity 0.3s;
}
.sheader2-hidden.active{
	display: block;
}
.sheader2-main{
	position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 280px;
    background: #fffd;
    box-shadow: 0 2px 5px #000;
}
.sheader2-close{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    background: #0e0e0e;
    opacity: .5 !important;
	z-index: -1;
	
}
.sheader2-hidden.active .sheader2-main{
	animation: leftNavOpen 0.5s;
}
.sheader2-hidden.active .sheader2-close{
	opacity: 1;
	animation: fadeIn 0.6s;
}
.sheader2-hidden.fadeOut .sheader2-main{
	right: -300px;
	animation: leftNavClose 0.4s;
}
.sheader2-hidden.fadeOut .sheader2-close{
	opacity: 0;
}
@keyframes leftNavOpen {
  0% { right: -300px; }
  100% { right: 0; }
}
@keyframes leftNavClose {
  0% { right: 0; }
  100% { right: -300px; }
}
.sheader2-top{
	position: absolute;
    top: 0;
    right: 0;
    /* background: #000;
    box-shadow: 0 0 1px #000; */
    display: flex;
    width: 100%;
    height: 40px;
    z-index: 10;
}
.sheader2-back{
	display: flex;
    width: 45px;
    height: 40px;
	margin-right: auto;
	cursor: pointer;
}
.sheader2-back:before{
	content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    background: url(../images/icon4/back.png) no-repeat;
    background-size: contain;
    margin: auto;
}
.sheader2-lang{
	display: flex;
	padding-right: 15px;
	padding-left: 15px;
	cursor: pointer;
}
.sheader2-lang span{
	margin: auto 0;
    font-size: 13px;
    color: #fefefe;
}
.sheader2-lang a{
	display: flex;
    width: 40px;
    height: 40px;
}
.sheader2-lang a img{
	height: 25px;
    width: 25px;
    margin: auto;
}
.sheader2-lang > i{
	font-size: 10px;
    color: #fefefe;
    margin: auto;
}
.sheader2-group,
.sheader2-lang-group{
	position: absolute;
    background: url(../images/promo_bg.jpg);
    background-size: cover;
    /* background-image: url(/images/frame.jpg) !important;
    background-size: cover;
    background-position: center; */
	display: block;
    overflow: auto;
    padding-top: 40px;
    height: 100%;
	width: 100%;
}
.sheader2-lang-group{
	display: none;
	z-index: 2;
}
.sheader2-lang-group.active{
	display: block;
	animation: fadeIn 0.5s ease;
    /* background: #2f2f2f; */
}
.sheader2-member{
	display: grid;
    padding: 30px 10px;
}
.sheader2-member h4{
	color: #080808;
	margin: auto;
    margin-bottom: 5px;
    font-size: 20px;
}
.sheader2-member span{
	margin: auto;
    margin-bottom: 15px;
    font-size: 14px;
    color: #080808;
}
.sheader2-login{
	display: flex;
    margin: auto;
}
.sheader2-login a{
	padding: 6px 15px;
    letter-spacing: 0.5px;
	min-width: 100px;
}
.sheader2-login .slogin2{
    background: linear-gradient(90deg, #28ffad, #01f586);
    box-shadow: 0 0 3px #5affb188;
}
.sheader2-games .row{
	margin: 0;
	padding: 0 6px;
}
.sheader2-games .row .col-4{
	padding: 0;
}
.sheader2-gitems{
	display: grid;
    background: #181818;
    box-shadow: 0 0 2px #0003;
	border-bottom: 2px solid #181818;
    border-radius: 4px;
    padding: 8px 3px;
    margin: 4px;
	transition: border 0.3s ease;
}
.sheader2-gitems:hover,
.sheader2-gitems:active,
.sheader2-gitems:focus{
	border-color: #091f6e;
}
.sheader2-gitems.active{
	border-color: #091f6e;
}
.sheader2-gitems img{
	width: 22px;
    height: 22px;
    margin: 4px auto;
}
.sheader2-gitems span{
	font-family: system-ui;
    margin: auto;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: #080808;
	padding-top: 2px;
}
.sheader2-menu{
	display: grid;
	margin-top: 30px;
	margin-bottom: 30px;
}
.sheader2-menu a{
	display: flex;
    width: 100%;
    height: 50px;
    background: url(../images/navbar.gif);
    background-size: cover;
    /* border-bottom: 1px solid #f23a2e; */
    padding: 5px 10px;
    margin-top: 5px;
}
.sheader2-menu a span{
	margin: auto;
    margin-right: 0;
    font-size: 13px;
    font-family: system-ui;
    letter-spacing: 1px;
    padding: 0 5px;
    color: #fefefe;
}
.sheader2-menu a img{
	width: 22px;
    height: 22px;
    margin: auto 10px;
}
/**************** Footer *****************/
/*
.footer-contactbox{
	height: 5.44rem;
    background: #ededed;
    border-bottom: 0.01rem solid rgba(95,99,109,.3);
    padding-top: 0.18rem;
}

.footer-contactbox .title{
    font-family: system-ui;
    font-size: 16px;
    color: #080808;
    line-height: 1.1rem;
    display: block;
    padding-left: 0.7rem;
}

.footer-contactbox ul{
	display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    overflow-x: scroll;
    padding-bottom: 0.3rem;
}

.footer-contactbox ul li{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 3.2rem;
    cursor: pointer;
}
*/
.sfooter-main2{
	display: flex;
	/*height: 5.44rem;
    background: #000;*/
    padding-top: 0.50rem;

    background: #000;
    border-top: 1px solid #091f6e;
    border-bottom: 1px solid #091f6e;
}

.sfooter-main2 ul > li{
	display: inline-block;
	margin-left: 20px;
	
}

.sfooter-contain ul > li{
	display: inline-block;
	margin-left: 20px;
	
}

.sfooter-main2 .contact-text{
	font-size: 12px;
}
.sfooter-main2 a{
	color: #091f6e;
}
.sfooter-main2 .title{
	font-weight: 700;
	font-size: 18px
}
.sfooter-main2 .title2{
	font-weight: 400;
	font-size: 14px
}
.site-footer{
	background: #000;
	padding: 60px 0;
}
.sfooter-main{
	display: flex;
	/*background: #000;*/
}
.sfooter-main2{
	display: flex;
	/*border-top-color: #e2e2e2;*/
}

.sfooter-main2 ul li img{
	max-width: 50px;
}

.sfooter-main2 ul li svg{
	max-width: 50px;
}
.sfooter-main2 ul li span{
	display:flex;
	flex-direction: column;
	align-items: center;
}
.sfooter-left{
	margin-left: 5%;
}
.sfooter-contain{
	/*padding: 20px 25px;*/
    padding-right: 10px;
    max-width: 400px;
    margin: auto;
}
.sfooter-contain h4{
	color: #fecf25;
    font-family: system-ui;
    font-weight: bold;
    background: linear-gradient(135deg, #fee925, #ffad17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    min-width: max-content;
	margin-bottom: 5px;
}
.sfooter-contain p{
	font-size: 11px;
    font-family: system-ui;
	word-break: break-all;
    line-height: 120%;
	margin-bottom: 8px;
    color: #bbb;
}
.sfooter-button{
	display: flex;
}
.sfooter-button a{
	display: inline-block;
	margin-right: 4px;
}
.sfooter-button a img{
	width: 100%;
    max-width: 80px;
}
.sfooter-right{
	margin: auto;
}
.sfooter-mobile img{
	width: 100%;
    max-width: 300px;
	min-width: 160px;
	margin: -60px 0;
}
@media(max-width:640px){
	.site-footer{
		padding: 40px 0;
	}
	.sfooter-contain{
		padding-top: 15px;
		padding-bottom: 15px;
		zoom: 0.7;
	}
	.sfooter-contain h4{
		font-size: 21px;
	}
}
/***************** Login *****************/
.site-login-logo{
	display: flex;
}
.site-login-logo img{
	max-width: 180px;
    height: 120px;
    margin: auto;
}
.site-login-form{
	margin: auto;
    max-width: 420px;
}
.site-login-group{
	margin: 10px 25px;
    /*     background: #080808;
	box-shadow: 0 1px 2px #342a186b; */
    padding: 1px;
    border-radius: 12px;
}
.site-login-title{
	display: flex;
    height: 70px;
    /*     background: #080808;
    border-radius: 10px 10px 0 0; */
}
.site-login-title h4{
	font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: auto;
    font-family: system-ui;
    color: #fefefe !important;
}
.login-form-box{
	/* background: #000; */
    min-height: 300px;
    border-radius: 0 0 10px 10px;
	padding: 20px;
}
.login-form-box .form-group{
	position: relative;
    display: grid;
	margin-bottom: 10px;
}
.login-form-box .form-group .login-cicon{
	position: absolute;
    top: 12px;
    left: 15px;
    width: 20px;
    height: 20px;
    /* filter: hue-rotate(300deg); */
    filter: brightness(0.85) grayscale(1);
}
.login-form-box .form-group input,
.login-form-box .form-group select{
	height: 45px;
    font-size: 13px;
    font-family: 'Helvetica-Light';
    border-radius: 60px;
    background: #fefefe;
    /* border: 1px solid #595959; */
    padding: 0 20px;
    padding-left: 45px;
    letter-spacing: 0.5px;
    color: #080808;
}
.btn-css4{
	width: 90%;
    text-align: center;
    font-family: system-ui;
    text-transform: uppercase;
    /*     background: #080808; */
    /* background: linear-gradient(0deg, #925913, #e2bf3c, #f4ea9d, #fffce2, #f3c81d); */
    background: linear-gradient(to bottom, #0ad6ff 0%, #f23efb 100%);
    /* box-shadow: 0 0 3px #091f6e; */
    color: #ffffff !important;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    border: none;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1.4px;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: background 0.4s ease;
}
.btn-css4:hover,
.btn-css4:active{
	background: #0ad6ff;
}
.login-language{
	margin-left: auto;
}
.login-language a{
	display: inline-block;
	transition: filter 0.4s ease;
}
.login-language a img{
	width: 30px;
	height: 30px;
	border-radius: 50%;
}
.login-language a:hover,
.login-language a:active{
	filter: brightness(1.2);
}
.login-form-box hr{
	border-color: #fefefe;
	margin: 12px 0;
}
.login-back{
	display: flex;
    margin: auto;
	font-size: 15px;
    padding: 0 15px;
	color: #fefefe !important;
	transition: color 0.4s ease;
	font-family: system-ui-Book;
    letter-spacing: 1px;
}
.login-back:before{
	content: "\f104";
    font-family: 'icomoon' !important;
    padding-right: 5px;
    margin: auto;
}
.login-notes{
    font-family: system-ui;
    font-size: 12px;
    color: #fefefe !important;
    padding: 0 15px;
	margin: 0;
}
.slogin-livechat{
	margin-top: 30px;
}
.slogin-livechat a{
	display: grid;
	margin: auto;
}
.slogin-livechat a img{
	width: 40px;
    height: 40px;
    margin: auto;
    /* filter: hue-rotate(166deg); */
    filter: grayscale(1);
}
.slogin-livechat a span{
	margin: auto;
    font-size: 12px;
    font-family: system-ui;
    letter-spacing: 0.4px;
    color: #080808;
}
/***************** index *****************/
.site-games{
	padding: 10px 8px;
	padding-bottom: 15px;
}
.sgames-main{
	display: flex;
    /*padding-top: 5px;*/
    padding-bottom: 5px;
    /*background: #000;*/
    border-image-slice: 1;
    /*box-shadow: 0 0 1px #444a;*/
}
.swiper-sgames-nav{
	display: block;
    /* margin: 0 5px; */
	margin-top: 10px !important;
}
.swiper-sgames-nav li{
	display: flex;
    width: 100%;
    /* font-size: 13px;
    font-family: system-ui;
    min-width: 70px;
    margin: auto;
    color: #fefefe; */
    /*box-shadow: 0 2px 5px #000;*/
    /*border: 1px solid #f;*/
    /*border-top: unset !important;*/
	/* border-radius: 0.3rem;
    text-align: center;
    padding: .8rem .5rem;
    cursor: pointer;
    margin-bottom: 6px;
    font-weight: 500;
    margin: 0 2px;
    box-shadow: 2px 3px 0px 0px #02020263; */
}
.swiper-sgames-nav li.active span{
    /* background: linear-gradient(0deg, #fdfdfd, #ffdf77, #d4a849);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 24px  !important;
    color: #13efea !important;
}
.sgames-group{
	width: 100%;
    margin: 0 auto;
	overflow: hidden;
}
.sgames-title{
	margin: 0 6px;
	margin-bottom: 4px;
    width: 100%;
}
.sgames-title span{
	/*font-size: 14px;*/
    color: #091f6e;
    /*text-decoration: underline;
    text-transform: uppercase; */
    font-family: system-ui;
    text-shadow: 0 0 1px;
    letter-spacing: 0.7px;
}
.sgames-row:nth-child(2) .sgames-title span{ color: #080808; }
.sgames-row:nth-child(3) .sgames-title span{ color: #080808; }
.sgames-row:nth-child(4) .sgames-title span{ color: #080808; }
.sgames-row:nth-child(5) .sgames-title span{ color: #080808; }
.sgames-row:nth-child(6) .sgames-title span{ color: #080808; }
.sgames-row:nth-child(7) .sgames-title span{ color: #080808; }
.sgames-title span.active{
	display: block;
}
.sgames-row{
	display: none;
	margin: 0 2px;
	flex-wrap: wrap;
}
.sgames-row.active{
	display: flex;
	animation: fadeIn 0.8s;
}

.sgames-row.active[data-name="2x"] .sgames-item .badge-multiplier{
    position: absolute;
    background: linear-gradient(0deg, #c28920 15%, #ffd95a, #ffe58f, #ffd95a, #d4a849 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 18px;
}
.sgames-row.active[data-name="5x"] .sgames-item{
    
}
.sgames-row.active[data-name="10x"] .sgames-item{
    
}
.sgames-row.active[data-name="20x"] .sgames-item{
    
}

.sgames-item{
	padding: 4px 2px;
}
.sgames-item:hover,
.sgames-item:active,
.sgames-item:focus{
	/* animation: glowing 1.5s infinite; */
}
.sgames-item img{
	width: 100%;
}
.sgames-slider{
	margin-bottom: 15px;
}
.sgames-slider:last-child{
	margin-bottom: 10px;
}
.sgames-slider .owl-stage{
	display: -webkit-box;
}
.sgames-slider .owl-item .slide-item{
	margin: 0 auto;
}
.sgames-slider .owl-item .slide-item a img{
	max-height: 180px;
}
.sgames-slider .owl-dots{
	top: -18px;
    right: 0;
    bottom: unset;
    left: unset;
}
.sgames-slider .owl-dots .owl-dot span{
	width: 7px;
    height: 7px;
	background: #333;
}
.sgames-slider .owl-dots .owl-dot:last-child{
	margin-right: 10px;
}
/***************** SOD Header *******************/
.sodhead-nav{
	display: flex;
    background: #0000004f;
    min-height: 70px;
}
.sodhead-left{
	margin: auto 0;
    padding-left: 6px;
	padding-right: 15px;
}
.sodhead-left h5{
	font-size: 13px;
    color: #080808;
    padding: 0 5px;
    font-family: 'Helvetica-Light';
    font-weight: normal;
	text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: auto;
}
.sodhead-amount{
	display: flex;
}
.sodhead-amount img{
	margin-top: 2%;
	width: 25px;
    height: 25px;
    /* filter: grayscale(1); */
}
.sodhead-amount span{
	display: flex;
    color: #080808;
	/*text-shadow: 0 2px 4px #000a;*/
    font-family: 'Helvetica-BlkCond';
}
.sodhead-amount span font:first-child{
	font-size: 12px;
    margin-right: 2px;
    margin-top: 1px;
}
.sodhead-amount span font:last-child{
	font-size: 16px;
    margin-bottom: auto;
    color: #f3f3f3;
}
.sodhead-right{
	display: flex;
	margin-left: auto;
	width: 70%;
}
.sodhead-right a{
	display: grid;
	position: relative;
	background: #0000004f;
    padding: 5px 4px;
	padding-bottom: 8px;
	width: 100%;
}
.sodhead-right a:after{
	content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: #4e4e4e;
}
.sodhead-right a img{
	width: 30px;
    height: 30px;
    margin: auto;
    margin-bottom: 0;
	/* filter: grayscale(1) brightness(0.8); */
}
.sodhead-right a span{
	font-size: 11px;
    color: #f3f3f3;
    letter-spacing: -0.2px;
    line-height: 120%;
    margin: auto;
    margin-top: 0;
	/* filter: grayscale(1) brightness(0.8); */
}
.sodhead-right a.active img,
.sodhead-right a.active span{
    text-decoration: underline;
    font-weight: 700;
}
/**************** Promotion ******************/
.site-title{
	display: flex;
    width: 100%;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    border-image-slice: 1;
    /* border-image-source: linear-gradient(110deg, #ededed 10%, #ededed, #ededed 20%, #0611eb 60%, #0611eb, #0611eb 80%); */
    /* margin-top: 3px; */
    background: #00000070;
}
.site-title h4{
	font-size: 14px;
    font-weight: bold;
    margin: 8px auto;
    text-transform: uppercase;
    font-family: sans-serif;
    letter-spacing: 1.8px;
    color: #080808;
    /* background: linear-gradient(135deg, #091f6e, #006ffd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    line-height: 20px;
}
.spromo-main{
	margin: 15px;
}
.spromo-item{
	margin-bottom: 15px;
}
.spromo-img img{
	width: 100%;
}
.spromo-detail{
	display: none;
	padding: 10px;
	/* background: #fefefe; */
    border: 1px solid #818181;
    background: url(../images/promo_bg.jpg);
    background-size: cover;
    /* border-radius: 5px; */
	margin-top: 1px;
}

.spromo-item.active .spromo-detail{
	display: block;
	animation: fadeIn 0.6s;
}
.spromo-detail h4{
	font-size: 24px;
    font-weight: 900;
    text-shadow: 2px 2px #bb2bee;
    font-family: Helvetica-BlkCond;
    /* background: linear-gradient(180deg, #fab04e 20%, #ebd567 30%, #f8d068 80%); */
	/* background: linear-gradient(180deg, #8ebefd 20%, #8ebefd 30%, #8ebefd 80%); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.spromo-detail p{
	font-size: 14px;
	color: #f9f9f9;
}
/*************** Deposit ****************/
.site-ctbox{
	max-width: 700px;
    margin: 25px auto;
}
.swallet-main{
	padding: 0 30px;
}
.swallet-title{
	font-family: system-ui;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #ddb57b;
}
.site-ctbox .form-group label{
	width: auto;
	font-family: system-ui;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #fefefe;
    margin-bottom: 2px;
}
    .radio_bank .radio_bank_detail {
        display: none !important;
    } 
.site-ctbox .form-group input,
.site-ctbox .form-group select{
	position: relative;
	/* background: #282828; */
    border-radius: 5px;
    width: 100%;
    min-height: 30px;
    color: #080808;
    font-size: 13px;
    padding: 2px 15px;
    letter-spacing: 0.5px;
	margin-bottom: 5px;
}
.site-ctbox .form-group input:disabled{
	background: #b3b3b3;
    /* border: 1px solid #000; */
}
.site-ctbox .btn-css2,
.site-ctbox .btn-css3{
	width: 100%;
}
.css-select2{
	position: relative;
}
.css-select2 select{
	-webkit-appearance: none;
}
.css-select2:before{
	content: "\f107";
    position: absolute;
    top: 14px;
    right: 8px;
    font-family: 'icomoon' !important;
    font-size: 18px;
    text-align: center;
    color: #fec55c;
    line-height: 0;
    z-index: 1;
}
.radio_group{
	display: grid;
	margin-bottom: 15px;
}
.radio_saved{
	display: flex;
    width: 100%;
}
.radio_saved input{
	display: none;
}
.radio_check{
	display: block;
    width: 10px;
    height: 10px;
    background: #eee;
    border-radius: 50%;
    margin-top: 15px;
	transition: background 0.4s ease;
}
.radio_saved input:checked + span{
    background: #091f6e !important;
	box-shadow: 0 0 3px #3d8ef8;
}
.radio_bank{
	display: flex;
	width: 100%;
}
.radio_bank img{
	width: 100%;
    max-width: 110px;
    height: 44px;
    margin: 0 3px;
}
.radio_bank_detail{
	display: grid;
	width: 100%;
}
.radio_bank_detail span{
	background: #666;
    color: #eee;
    width: 100%;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 120%;
    padding: 10px;
}
#gamemenu-modal .close{
    color: #fff;
}
.btn-light.active{
    color: #fff !important;
    font-weight: bold;
    /* background: linear-gradient(0deg, #925913, #e2bf3c, #f4ea9d, #fffce2, #f3c81d); */
    background: linear-gradient(to bottom, #0ad6ff 0%, #f23efb 100%);
    border: none !important;
}
.btn-css2,
.btn-css3{
	font-family: system-ui;
    text-transform: uppercase;
    width: max-content;
    min-width: 85px;
    border: none !important;
    /* background: linear-gradient(0deg, #925913, #e2bf3c, #f4ea9d, #fffce2, #f3c81d);  */
    background: linear-gradient(to bottom, #0ad6ff 0%, #f23efb 100%);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.2px;
    margin: auto 3px;
	border-radius: 0.3rem;
    color: ;
}
.btn-css2 span{
    /* background: linear-gradient(0deg, #fdfdfd, #ffdf77, #d4a849);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.btn-css3{
    background: #ffffff;
	color: #020202 !important;
    padding: 8px 12px;
	font-weight: unset;
	border-radius: 0.3rem;
}
.btn-css2:hover,
.btn-css2:active,
.btn-css3:hover,
.btn-css3:active{
	animation: glowing 1s infinite;
}
.form-to-date{
	display: flex;
}
.form-to-date input{
	margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
}
.form-to-date span{
	font-size: 12px;
    color: #080808;
	margin: auto 10px;
}

.radio_dgroup{
	display: flex;
}
.radio_date{
	display: flex;
    margin-right: 5px;
}
.radio_date input{
	display: none;
}
.radio_date span{
	padding: 3px 5px;
    font-size: 12px;
    background: #d8d8d8;
    border-radius: 5px;
    color: #080808;
    width: 100%;
    min-width: max-content;
    transition: background 0.4s ease;
    text-align: center;
}
.radio_date input:checked + span{
    border: 1px solid #b9b9b9;
    background: #fff;
    color: #080808;
}

.site-spanel{
	max-width: 700px;
    margin: auto;
}
.spanel-main{
	display: grid;
	margin: 10px 25px;
}
.spanel-main a{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 55px;
    border-bottom: 1px solid #fefefe;
}
.spanel-main a:last-child{
	border-bottom: unset;
}
.spanel-main a:after{
	content: "\f0da";
	font-family: 'icomoon' !important;
	position: absolute;
	right: 0;
	top: 0;
	color: #0f0f0f;
	height: 55px;
	line-height: 55px;
	width: 50px;
	text-align: center;
	z-index: -1;
}
.spanel-main a span{
	font-size: 13px;
    font-family: 'system-ui';
    color: #080808;
    letter-spacing: 0.5px;
    margin: auto 0;
    padding: 5px 20px;
}

.spanel-main a span b{
	color: #fefefe;
}

.site-report{
	max-width: 700px;
    margin: auto;
}
.sreport-main{
	margin: 25px 20px;
    border: 1px solid #f6cd03;
    border-radius: 10px;
}
.sreport-title{
	display: flex;
    padding: 5px 15px;
    height: 50px;
	border-bottom: 1px solid #f6cd03;
}
.sreport-title h4{
	margin: auto;
    font-family: system-ui;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    color: #fecf25;
    background: linear-gradient(135deg, #fee925, #ffad17);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.4px;
}
.sreport-table{
	padding: 15px;
	padding-top: 0;
}
.sreport-table table{
	width: 100%;
	font-family: system-ui-Book;
}
.sreport-table table thead{
	border-bottom: 1px solid #444;
}
.sreport-table table thead th{
	width: 100%;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 10px;
    text-shadow: 0 0 2px #edededa;
}
.sreport-table table thead th span,
.sreport-table table thead th font{
	display: block;
    margin: auto;
}
.sreport-table table tbody tr td{
	padding: 10px 0px;
    text-align: center;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
}
.sreport-table table tbody tr td:last-child{
	border-right: none;
}
.sreport-table table tbody tr:last-child td{
	border-bottom: none;
}
.sreport-table table tbody tr td span{
	display: block;
    font-family: sans-serif;
    color: #dbd6cc;
    line-height: 150%;
    letter-spacing: 0.2px;
    font-size: 12px;
    min-height: 45px;
    max-width: 90px;
    margin: auto;
}
.sreport-table table tbody tr td font{
	display: inline-block;
    color: #080808;
    font-size: 12px;
    background: #333;
    padding: 2px 10px;
    border-radius: 20px;
    width: 50%;
    min-width: 70px;
    max-width: 200px;
}

.site-zpanel{
	display: flex;
}
.zpanel-main{
    max-width: 1200px;
    min-width: 900px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: auto;
}
.zpanel-main h3{
	font-size: 26px;
    color: #ffcb0c;
	padding: 0 15px;
}
.zpanel-group{
	display: flex;
	margin-top: -40px;
}
.zpanel-item{
	position: relative;
    overflow: hidden;
    border-radius: 10px;
    /*padding-top: 60px;*/
    margin: 10px;
}
.zpanel-center{
	color: #080808;
    padding: 10% 10%;
    padding-top: 35px;
    width: 100%;
    min-height: 228px;
    min-width: 300px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    border-radius: 10px;
}
.zpanel-item h4{
	text-align: end;
	text-transform: uppercase;
	font-size: 21px;
	font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.zpanel-item:nth-child(1) h4{ color: #f1c300 !important; }
.zpanel-item:nth-child(2) h4{ color: #ec1c23 !important; }
.zpanel-item:nth-child(3) h4{ color: #02c7bd !important; }
.zpanel-item:nth-child(4) h4{ color: #b401e2 !important; }
.zpanel-item p{

	text-align: end;
    font-size: 13px;
    line-height: 140%;
}
.zpanel-bottom{
	position: absolute;
    width: 100%;
	height: 44px;
    bottom: -39px;
    left: 0;
    background: #000;
    display: flex;
	transition: all 0.2s ease-in-out;
    transition-delay: 0.2s;
}
.zpanel-item:nth-child(1) .zpanel-bottom{ background: #f1c300 !important; }
.zpanel-item:nth-child(2) .zpanel-bottom{ background: #ec1c23 !important; }
.zpanel-item:nth-child(3) .zpanel-bottom{ background: #02c7bd !important; }
.zpanel-item:nth-child(4) .zpanel-bottom{ background: #b401e2 !important; }
.zpanel-bottom span{
	color: #080808ededed;
    background: inherit;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: auto;
    margin-top: -5px;
    height: 49px;
    padding: 0 20px;
	padding-top: 9px;
    border-radius: 10px;
	text-shadow: 0 0 1px #000a;
	letter-spacing: 0.4px;
}
.zpanel-hover{
	height: 100%;
    width: 100%;
    position: absolute;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
	transition: all 0.3s ease-out;
	opacity: 0;
    left: 0;
    bottom: -100%;
}
.zpanel-item:nth-child(1) .zpanel-hover{ background-size: 100% 91% !important; }
.zpanel-item:nth-child(2) .zpanel-hover{ background-size: 100% 100% !important; }
.zpanel-item:nth-child(3) .zpanel-hover{ background-size: 100% 91% !important; }
.zpanel-item:nth-child(4) .zpanel-hover{ background-size: 100% 90% !important; }
.zpanel-item:hover .zpanel-bottom,
.zpanel-item:active .zpanel-bottom,
.zpanel-item:focus .zpanel-bottom{
	bottom: 0;
	animation: glowing 3s infinite;
}
.zpanel-item:hover .zpanel-hover,
.zpanel-item:active .zpanel-hover,
.zpanel-item:focus .zpanel-hover{
	bottom: 0;
	opacity: 1;
}

.filter-orange{
	/* filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(325deg) saturate(600%) contrast(0.8); */
}

.sponsor-by img{
	max-width: 80px;
}
.event-item{
	background: rgb(0,0,0,0.25);
	border-radius: 0.5rem;
	max-width: 270px;
	/*margin-left: 5rem!important;
	margin-right: 5rem!important;*/
}
.event-item img{
	border-radius: 50%;
    background-color: rgba(255, 255, 255);
    padding: 5px;
	width: 50px !important;
}

.event-item img,
.event-item p{
	font-size: 12px !important; 
	margin: 0 auto;
	text-align: center;
	color: black;
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.event-item h4{
	font-size: 16px !important; 
	text-align: center;
	color: #091f6e;
	font-weight: 500;
}
.event-item h5{
	font-size: 14px !important; 
	text-align: center;
	color: black;
	font-weight: 500;
}

.event-row .owl-dots{
	top: -18px;
    right: 0;
    bottom: unset;
    left: unset;
}



.subpage-wrap { 
    padding: 0;
}
.subpage-wrap img {
    border-radius: 0px;
    position: inherit;
    height: auto; 
    width: 100%;
    margin: 10px;
}
.gamelistbox{    
    margin: 10px auto;
    width: 90%; 
    text-align: center;
}
.game-maintain{
    filter: grayscale(1);
}

.subpage-wrap { 
    padding: 0;
}
.subpage-wrap img {
    border-radius: 0px;
    position: inherit;
    height: auto; 
    width: 100%;
    margin: 10px;
}
.gamelistbox{    
    margin: 10px auto;
    width: 90%; 
    text-align: center;
}
.game-maintain{
    filter: grayscale(1);
}

.gamelist{
    /* margin-left: 300px; */
}
.sgames-item,.game-provider  {
    opacity: 0; /* Start with container opacity at 0 */
    animation: fadeIn 1s forwards; /* Apply the fadeIn animation to each item */
}

.game-provider img{
    height: 100px;
    width: 100px;
    align-items: center;
    font-size: .18rem;
    color: rgba(162,170,189,.5);    
    transition: filter .3s ease;
    cursor: pointer;
    border-radius: 1rem;
    background: black;
}


.game-provider img:hover,
.game-provider.active img {
    filter: brightness(1.25);
    box-shadow: 0 0 3px #e3c477;
}

@keyframes fadeIn {
from {
    opacity: 0; /* Start the item with opacity at 0 */
}
to {
    opacity: 1; /* End the item with opacity at 1 */
}
}
.sgames-item{
    position: relative;
    width: 30%;
    height: auto;
    margin: 0 5px;
    margin-bottom: 12px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 0 2px 2px 0 rgba(45,45,45,.1), 0 4px 4px 0 rgba(49,49,49,.1), 0 8px 8px 0 rgba(42,42,42,.1), 0 16px 16px 0 rgba(32,32,32,.1);
    transition: all 0.4s ease;
}
.sgames-item img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    background: linear-gradient(3deg, #000000 -10%, transparent 55%);
    box-shadow: -1px 0px 4px 0px #66cfe4, inset 0 0 10px 0 #f23efb;
    border: 1px solid #66cfe4;
}
.sgames-item h5 {
    position: absolute;
    text-shadow: 0 0 4px #000;
    bottom: 0;
    font-size: 14px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    width: 100%;
}
.sgames-hidden {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000a;
    box-shadow: 0 0 3px #e3c477;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 2;
}
.sgames-hidden a {
    margin: auto;
    min-width: 120px;
    min-height: 35px;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100px);
}
.sgames-item:hover .sgames-hidden a,
.sgames-item:active .sgames-hidden a{
    transform: translateY(0);
}
.sgames-item:hover .sgames-hidden,
.sgames-item:active .sgames-hidden{
    opacity: 1;
}
.sgames-hidden a{
    margin: auto;
    min-width: 120px;
    min-height: 35px;
    transition: transform 0.3s ease-in-out;
    transform: translateY(100px);
}

.sheader2-games img,
/* .sheader2-menu img, */
.sheader2-back img,
.site-nav-marquee img,
.sheader-nav:before,
.sheader2-back:before{
    filter: grayscale(1);
}


/**************** Bottom Nav *****************/
.bottom-nav{
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
    background: #000000d1;
    /* box-shadow: 0 0 6px #ff0b9b;
    border-top: 1px solid #97fbfb; */
    /* box-shadow: 0 0 30px #97fbfb; */
    z-index: 12;
}
.bottom-nav-center{
	display: flex;
}
.bottom-nav-center a{
	display: grid;
	width: 100%;
	height: 60px;
	padding-top: 0.25rem!important;
	padding-bottom: 0.25rem!important;
	transition: filter 0.5s ease;
}
.bottom-nav-center a.active{
	/* filter: brightness(10); */
    /*     background: #080808; */
}
.bottom-nav-center a:hover img,
.bottom-nav-center a:active img,
.bottom-nav-center a.active img{
	/* filter: grayscale(1) brightness(10); */
}
.bottom-nav-center a img{
	/* width : 28px; */
	height: 28px;
	margin: auto;
	/* filter: grayscale(1); */
}
.bottom-nav-center a span{
	font-size: 13px;
    font-weight: bold;
	margin: auto;
	background: #fefefe;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 100%;
	letter-spacing: -0.3px;
}
.bottom-nav2-center{
	display: flex;
	position: relative;
	height: 80px !important;
	width: 80px !important;
	min-width: 80px;
	margin-top: -25px;
	padding: 0 !important;
	animation: glowing 1.8s infinite;
}
.bottom-nav2-center:before{
	content: '';
	position: absolute;
	background: url(../images/nav-circle.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	width: 100%;
	height: 100%;
}
.bottom-nav2-center span{
	margin: auto;
	z-index: 1;
}
.modal{
    top: 25%;
}
.modal-content{
    /* background: linear-gradient(to bottom, rgb(3 0 4) 0%, rgb(1 4 15) 10%, rgb(0 17 74) 50%, rgb(0 0 0) 100%) !important; */
    border: 1px solid #66cfe4 !important;
    box-shadow: 0 0 6px #f23efb; 
}
.modal-header{
    border-bottom: unset !important;
}

/***/

.sgames-item img{
    background: linear-gradient(3deg, #000000 -10%, transparent 55%);
    box-shadow: -1px 0px 4px 0px #66cfe4, inset 0 0 10px 0 #f23efb;
    border: 1px solid #66cfe4;
}
.modal-content{
    background: #0a0c33 !important;
    /* background: linear-gradient(to bottom, #66cfe4 0%, #f23efb 100%); */
    /* background: linear-gradient(180deg, #fff 10%, #c1c1c1, #848484, #fff 90%); */
}
.bottom-nav{
    /* box-shadow: 0 0 6px #ffbe0b;
    border-top: 1px solid #414141;
    box-shadow: 0 0 30px #262626; */
    box-shadow: 0 0 5px #262626;
}
.bottom-nav-center a.active,.btn-light.active{
    /* background: linear-gradient(145deg, #4b4b4b 0%, #555757 34%, #252525 65%, #000000 100%) !important; */
}
/* body,
.site-header,
.bottom-nav{
    background: #f2f2f2;
    background: url(/images/frame.jpg);
    background-size: cover;
    background-position: center;
} */

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.btn-angpao-redeem{
    background: linear-gradient(0deg, #925913, #e2bf3c, #f4ea9d, #fffce2, #f3c81d) !important; 
}