@font-face{ font-family: MyriadproBold; src: url(../fonts/MyriadproBold.ttf), url(../fonts/MyriadproBold.woff); }
@font-face{ font-family: BoxedRegular; src: url(../fonts/BoxedRegular.ttf), url(../fonts/BoxedRegular.woff); }
@font-face{ font-family: BoxedLight; src: url(../fonts/BoxedLight.ttf), url(../fonts/BoxedLight.woff); }
@font-face{ font-family: BoxedBold; src: url(../fonts/BoxedBold.ttf), url(../fonts/BoxedBold.woff); }
html{  }
html::-webkit-scrollbar{ width: 10px; background: var(--bg-color); border-left: solid 1px rgba(255, 255, 255, 0.1); }
html::-webkit-scrollbar-thumb{ background: linear-gradient(#57a2f2, #345088); border: solid 2px #040d18; border-radius: 5px; }
*::-webkit-scrollbar{ width: 8px; background: var(--bg-color); border-radius: 8px; }
*::-webkit-scrollbar-thumb{ background: linear-gradient(#57a2f2, #345088); border: solid 2px #040d18; border-radius: 5px; }
.light-theme::-webkit-scrollbar-thumb{ background: rgba(0, 0, 0, 0.75); border: solid 1px #fff; }
body{ height:100%; padding-right: 0 !important; text-align: center; background-color: var(--bg-color); color: #fff; font-size: 14px; font-family: "BoxedRegular", Arial, sans-serif; transition: 0.3s;}
.light-theme body{ background-color: #eef0f1; background-image: none; }
body.active{ overflow:hidden; }
button, a, input, select, textarea, span{ outline: none !important; transition: 0.3s; }
button{ padding: 0; }
a:hover{ text-decoration: none; }
*:before,
*:after{ pointer-events: none; }

:root{
	--black: #000000;
	--white: #ffffff;
	--white-03: rgba(0, 0, 0, 0.03);
	--white-05: rgba(0, 0, 0, 0.05);
	--white-10: rgba(0, 0, 0, 0.1);
	--white-15: rgba(0, 0, 0, 0.15);
	--white-25: rgba(0, 0, 0, 0.25);
	--white-50: rgba(0, 0, 0, 0.50);
	--bg-color: #eeeeee;
	--bg-color-dark: #eeeeee;
	--bg-color-darker: #eeeeee;
	--bg-color-light: #162133;
	--bg-color-gray: #465566;
	--bg-blue: #24334c;
	--bg-blue-light: #364a6b;
	--bg-gray: #222d3e;
	--orange: #ff8839;
	--orange-hover: #fb683d;
	--orange-dark: #fd761d;
	--blue: #2b81de;
	--blue-hover: #0058a5;
	--blue-text: #82beff;
	--red: #ff6541;
	--red-dark: #bd3d15;
	--green: #16e21f;
	--yellow: #e2ca16;
	--blue-light: #67809b;
	--blue-white: #a0c3e9;
	--boxedlight: BoxedLight;
	--boxedsemibold: BoxedSemibold;
	--boxedbold: BoxedBold;
	--myriadbold: MyriadproBold;
 }
.light-theme{
	--white: #000;
	--white-05: rgba(0, 0, 0, 0.05);
	--white-10: rgba(0, 0, 0, 0.1);
	--white-15: rgba(0, 0, 0, 0.15);
	--white-25: rgba(0, 0, 0, 0.5);
	--white-50: rgba(0, 0, 0, 0.75);
	--bg-color: #fff;
	--bg-color-dark: #fff;
	--bg-color-darker: #eef0f1;
	--bg-color-light: #fff;
	--bg-blue: rgba(0, 0, 0, 0.1);
	--bg-blue-light: #fff;
	--bg-color-light: #fff;
	--bg-gray: #fff;
 }
.text-blue{ color: var( --blue-text ) !important; }
.text-blue-d{ color: var( --blue ) !important; }
.text-blue-l{ color: #1284ff !important; }
.text-orange{ color: var( --orange ) !important; }
.text-orange-d{ color: var( --orange-dark ) !important; }
.text-white{ color: var( --white ) !important; }
.text-gray{ color: var( --white-50 ) !important; }
.text-orange-dark{ color: var( --orange-dark ) !important; }
.text-black{ color: #000 !important; }
.text-red{ color: var( --red ) !important; }
.text-red-d{ color: var( --red-dark ) !important; }
.text-green{ color: var( --green ) !important; }
.text-yellow{ color: var( --yellow ) !important; }
.font-light{ font-family: var( --boxedlight ); }
.font-semi-bold{ font-family: var( --boxedsemibold ); }
.font-bold{ font-family: var( --boxedbold ); }
.font-myriad-bold{ font-family: var( --myriadbold ); }
.font-small{ font-size: 10px; }
.font-s-12{ font-size: 12px; }
.bg-color-light{ background-color: var( --bg-color-light ); }
.table-layout-fixed{ table-layout: fixed; }
.dflex-ac-jc{ display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; }
.dflex-ac-js{ display: flex !important; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.dflex-ac-je{ display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.selector-before:before,
.selector-after:after,
.selector-ba:before,
.selector-ba:after{ content: ''; position: absolute; margin: 0 auto; transition: 0.3s; }
.wrapper{ width: 100%; min-height: 100%; position: relative; overflow: hidden; padding: 65px 0 0;  }
.light-theme .wrapper{ background-image:unset; }
.bs-ul{ list-style: none; margin-bottom: 0; width: auto; display: table; padding: 0; }
.bs-ul li{ list-style: none; width: auto; height: auto; display: table-cell; text-align: center; vertical-align: middle; position: relative; }
ul li::marker{ color: var( --orange ); }
ul.decimal-list{ list-style-type: decimal; }
.container{ position: relative; }

@media (min-width: 1200px){
	.container{ max-width: 97%; }
}
@media (max-width: 1200px){
	.container{ max-width: 100%; }
}
.anim-to-left[data-scroll="in"]{ animation: toLeftAnim 1s ease 1 backwards; }
@keyframes toLeftAnim{
	0%{ opacity: 0; transform: translateX(50%); }
	100%{ opacity: 1; transform: translateX(0); }
}

/* Header Section */
.header-section{ width: 100%; height: 60px; background-color: var( --bg-color-dark ); border-bottom: solid 1px var( --white-10 ); position: fixed; top: 0; left: 0; z-index: 100; transition: 0.3s; }
.light-theme .header-section{ background-color: #fff; }

/* Logo */
.logo{ width: 137px; display: inline-block; position: relative; font-size:32px; color:#ffffff; letter-spacing:-1px; white-space:nowrap; }
.logo img{ top: 0; bottom: 0; margin: auto 0; position: absolute; }
.logo .logo-img{ width: 100%; opacity: 0; position: relative; }
.logo .g{ width: 30.66%; left: 0; animation: gAnim 10s ease infinite; }
.logo .basic{ top:unset; bottom:unset; margin:0; position:unset; width:70%; }
@keyframes gAnim{
	0%{ opacity: 0; transform: scale(0.5); }
	 5%{ opacity: 0; transform: scale(0.5); }
	 10%{ opacity: 1; transform: scale(1.1); }
	 15%{ opacity: 1; transform: scale(1); }
	 95%{ opacity: 1; transform: scale(1); }
	 100%{ opacity: 0; transform: scale(1); }
}
.logo .l{ width: 25.55%; right: 17.5%; animation: lAnim 10s ease infinite; }
@keyframes lAnim{
	0%{ opacity: 0; transform: scale(0.5); }
	7%{ opacity: 0; transform: scale(0.5); }
	12%{ opacity: 1; transform: scale(1.1); }
	17%{ opacity: 1; transform: scale(1); }
	95%{ opacity: 1; transform: scale(1); }
	100%{ opacity: 0; transform: scale(1); }
}
.logo .f{ width: 24.82%; right: 0; animation: fAnim 10s ease infinite; }
@keyframes fAnim{
	0%{ opacity: 0; transform: scale(0.5); }
	9%{ opacity: 0; transform: scale(0.5); }
	14%{ opacity: 1; transform: scale(1.1); }
	19%{ opacity: 1; transform: scale(1); }
	95%{ opacity: 1; transform: scale(1); }
	100%{ opacity: 0; transform: scale(1); }
}
.logo .ball{ width: 41.61%; left: 22.5%; animation: lgBallAnim 10s ease infinite; }
@keyframes lgBallAnim{
	0%{ opacity: 0; transform: translateX(-100%) rotate(-360deg); }
	10%{ opacity: 1; transform: translateX(0) rotate(0deg); }
	95%{ opacity: 1; transform: translateX(0) rotate(0deg); }
	100%{ opacity: 0; transform: translateX(0) rotate(0deg); }
}
.logo .stick{ width: 40.88%; left: 27%; top: 5%; animation: lgStickAnim 10s ease infinite; }
@keyframes lgStickAnim{
	0%{ opacity: 0; transform: rotate(45deg); }
	15%{ opacity: 0; transform: rotate(45deg); }
	20%{ opacity: 1; transform: rotate(-25deg); }
	25%{ opacity: 1; transform: rotate(0deg); }
	95%{ opacity: 1; transform: rotate(0deg); }
	100%{ opacity: 0; transform: rotate(0deg); }
}

/* Menu Main */
.menu-main{ height: 100%; margin: 0 0 0 55px; }
.menu-main li{ height: 100%; }
.menu-main li a{ height: 100%; color: var( --white ); font-family: var( --boxedlight ); padding: 0 35px; position: relative; }
.menu-main li a:after{ width: 0; height: 2px; background-color: var( --orange ); bottom: -1px; left: 0; right: 0; opacity: 0; }
.menu-main li a:hover:after{ width: 100%; opacity: 1; }
.menu-main li a.active:after{ width: 100%; opacity: 1; }
.menu-main li a.active{ color: var( --orange ); }

/* My cash */
.my-cash{ display:none; width:100%; height:30px; position:absolute; left:0; bottom:-71px; background-color:var( --bg-color-dark ); border-bottom:solid 1px var( --white-10 ); table-layout:fixed; }

/* Nav Main */
.nav-main{ height: 100%; margin: 0 0 0 auto; }
.nav-main li{ border-left: solid 1px var( --white-05 ); }
.nav-main li:last-child{ border-right: solid 1px var( --white-05 ); }
.nav-main .nav-link{ min-width: 78px; height: 100%; padding: 0 30px; }

/* Theme Toggle */
.theme-toggle{ background-color: rgba(255, 255, 255, 0); border: none; }
.theme-toggle:hover{ background-color: rgba(255, 255, 255, 0.03); }
.theme-toggle .theme-btn{ width: 30px; height: 14px; background-color: var( --blue-light ); border-radius: 7px; position: relative; }
.theme-toggle .theme-btn .tag{ width: 18px; height: 18px; position: absolute; left: 0; background-color: var( --bg-color ); border: solid 1px var( --blue-light ); border-radius: 50%; }
.theme-toggle.active .theme-btn .tag{ left: 13px; background-color: #fff; border-color: var( --orange ); border-width: 4px; }
.theme-toggle .theme-btn .tag:before{ width: 60%; height: 60%; border-radius: 50%; box-shadow: 3px 3px 0 0 var( --blue ); left: -1px; top: -1px; }
.theme-toggle.active .theme-btn .tag:before{ opacity: 0; }

/* Dropdown */
.drop-down{ height: 100%; position: relative; transition: 0.3s; }
.drop-down .toggle-btn{ width: 100%; height: 100%; position: relative; }
.drop-down .toggle-btn:hover{ background-color: rgba(255, 255, 255, 0.03); }
.drop-down.active .toggle-btn{ background-color: rgba(255, 255, 255, 0.03); }
.drop-down .toggle-btn .arrow-icon{ color: var( --orange ); font-size: 12px; position: absolute; bottom: 10px; left: 0; right: 0; margin: 0 auto; opacity: 0; transition: 0.3s; }
.drop-down.active .toggle-btn .arrow-icon{ opacity: 1; bottom: 5px; transform: rotate(180deg); }
.drop-down:hover .toggle-btn .arrow-icon{ opacity: 1; bottom: 5px; }
.drop-down-menu{ position: absolute; left: 50%; transform: translateX(-50%); top: 75%; background-color: var( --bg-color-light ); border: solid 1px var( --white-10 ); padding: 10px 20px; border-radius: 10px; pointer-events: none; opacity: 0; transition: 0.3s; }
.drop-down.active .drop-down-menu{ top: calc( 100% + 5px ); opacity: 1; pointer-events: auto; }
.drop-down-menu a{ color: var( --white-25 ); font-family: var( --boxedlight ); white-space: nowrap; height: 40px; border-bottom: solid 1px rgba(255, 255, 255, 0.03); padding: 0 10px; }
.drop-down-menu a:hover{ color: var( --white ); background-color: var( --white-03 ); }
.drop-down-menu a:last-child{ border-bottom: none; }
.drop-down-menu a .flag-icon{ margin-right: 10px; }

/* Before After Login */
.bal-container{ padding: 0 0 0 30px; }
.before-login{ display: none; }
.before-login.active{ display: block; }
.before-login button{ min-width: 110px; height: 36px; border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; background-color: transparent; margin-left: 5px; }
.before-login .btn-border{ color: var(--white); border: solid 1px var( --blue ); }
.before-login .btn-border:hover{ background-color: var( --orange ); border-color: var( --orange ); }
.after-login{ display: none; margin-left: -31px; }
.after-login.active{ display: block; }
.after-login .btn{ min-width: 110px; height: 36px; border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; font-size: 14px; background-color: transparent; margin-left: 5px; }
.after-login .nav-main{ margin-right: 25px; }
.after-login .nav-main li:first-child{ border-left: none; }
.after-login .nav-main button{ background-color: transparent; border: none; }
.after-login .nav-main button:hover{ background-color: var( --white-03 ); }
.after-login .nav-link .main-icon{ color: var( --blue-white ); font-size: 18px; }
.after-login .message-btn .main-icon{ font-size: 16px; animation: shake2Anim 1.5s ease infinite; }
@keyframes shake2Anim{
	0%{ transform: rotate(0deg); }
	10%{ transform: rotate(10deg); }
	20%{ transform: rotate(-10deg); }
	30%{ transform: rotate(5deg); }
	40%{ transform: rotate(0deg); }
	100%{ transform: rotate(0deg); }
 }
.after-login .message-btn .count{ min-width: 15px; height: 15px; padding:0 5px; background-color: var( --orange-dark ); color: #fff; font-family:Arial; font-size: 9px; border-radius: 15px; position: absolute; left: 12px; top: -5px; animation: countAnim 1s ease infinite; }
.after-login .message-btn .count:empty{ display:none; }
@keyframes countAnim{
	0%{ box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
	50%{ box-shadow: 0 0 10px rgba(255, 175, 122, 0.75); }
	100%{ box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}
.my-information .drop-down-menu a{ font-size: 12px; }
.my-information .drop-down-menu a .icon-panel{ width: 30px; height: 30px; background-color: var( --bg-color ); border-radius: 50%; font-size: 12px; margin-right: 15px; position: relative; z-index: 1; }
.my-information .drop-down-menu a .icon-panel.progress{ background-color: transparent; }
.progress-bar{ width: 120px; margin: 0 -10px 0 -20px; background-color: var( --bg-color ); border-radius: 0 5px 5px 0; padding: 0 5px 0 10px; }
.progress-bar .percentage{ width: 100%; height: 16px; }
.progress-bar .percentage .percent-bar{ width: 100%; height: calc( 100% - 4px ); margin-right: 5px; background-color: #2a3648; overflow: hidden; position: relative; border-radius: 5px; }
.progress-bar .percentage .percent-bar:before{ width: 80%; height: 100%; background-image: linear-gradient(to right,#57a7ff,#1368c5); left: 0; top: 0; border-radius: 5px; }
.progress-bar .percentage .percent-text{ font-size: 10px; }
.btn-blue{ border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; background-color: var( --blue ) !important; margin-left: 5px; }
.btn-blue:hover{ background-color: var( --blue-hover ) !important; }
.btn-orange{ border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; background-color: var( --orange ) !important; margin-left: 5px; }
.btn-orange:hover{ background-color: var( --orange-hover ) !important; }

/* Sidebar */
.sidebar{ display:flex; width: 280px; }
.sidebar.sidebar-left{ order:0; }
.sidebar.sidebar-right{ order:2; }
.sidebar-container{ width: 280px; height: 100%; position: fixed; overflow-y: auto; padding: 0 0 100px; transition: 0.3s; z-index: 99; }
.sidebar-container::-webkit-scrollbar{ width: 0; background: none; }
.sidebar-container::-webkit-scrollbar-thumb{ background: none; border: none; }
.sidebar-panel{ width: 100%; background: var( --bg-color-light ); border: solid 1px var( --white-05 ); padding: 15px; border-radius: 10px; margin: 0 0 15px; }
.sidebar-panel.header{ padding: 10px 15px; margin: 0 0 5px; font-family: var( --boxedbold ); }
.sidebar-panel .panel-title{ padding: 0 5px; margin: 0 0 15px; }
.sidebar-panel .panel-title-tag{ display: inline-block; padding: 4px 18px; margin: 0 0 25px; background: var( --blue ); border-radius: 15px; font-size: 13px; }
.sidebar-panel.sidebar-notice{ padding:10px !important; border-radius:10px; color: #ffffff; background: var(--blue-light); text-shadow: 0 1px 1px rgb(0 0 0 / 70%); text-align:left; }

/* Nav Myinfo */
.nav-myinfo:last-child{ padding-bottom:0; }
.nav-myinfo .myinfo-panel{ border-radius: 5px; background-color: var( --bg-color ); }
.light-theme .nav-myinfo .myinfo-panel{ background-color: #eef0f1; }
.nav-myinfo .myinfo-panel{ margin:0 0 5px; }
.nav-myinfo .myinfo-panel a{ width:100%; height: 50px; color: var( --white ); font-size: 12px; position: relative; z-index: 1; }
.nav-myinfo .myinfo-panel a.active{ color: #fff; }
.nav-myinfo .myinfo-panel a:before,
.nav-myinfo .myinfo-panel a:after{ top: 0; bottom: 0; margin: auto 0; z-index: -1; }
.nav-myinfo .myinfo-panel a:before{ width: calc( 100% - 10px ); height: calc( 100% - 10px ); left: 0; right: 0; margin: auto; border-radius: 5px; background-color: var( --orange ); opacity: 0; }
.nav-myinfo .myinfo-panel a:hover:before{ opacity: 1; }
.nav-myinfo .myinfo-panel a.active:before{ opacity: 1; }
.nav-myinfo .myinfo-panel a:after{ height: 50%; width: 1px; right: 0; background-color: var( --white-10 ); }
.nav-myinfo .myinfo-panel a:last-child:after{ display: none; }
.nav-myinfo .myinfo-panel a i{ margin-right: 8px; color: var( --orange ); }
.nav-myinfo .myinfo-panel a:hover i{ color: #fff; }
.nav-myinfo .myinfo-panel a.active i{ color: #fff; }

.nav-myinfo .myinfo-panel .btn{ width:auto; height:28px; padding:5px 10px; font-size:12px; }
.nav-myinfo .myinfo-panel .btn:hover{ color:#fff; }
.nav-myinfo .myinfo-panel .btn i{ margin-right:3px; color:#fff; }

.nav-myinfo .myinfo-panel .info{ display:flex; flex-direction:column; width:100%; margin:0; padding:10px; list-style:none; font-size:12px; }
.nav-myinfo .myinfo-panel .info li{ display:flex; justify-content:space-between; align-items:center; height:30px; padding:0 5px; }
.nav-myinfo .myinfo-panel .info li.center{ justify-content:center; }
.nav-myinfo .myinfo-panel .info li span{ color:var( --white ); font-size:12px; max-width:110px; overflow:hidden; white-space:nowrap; text-align:left; text-overflow:ellipsis; }
.nav-myinfo .myinfo-panel .info li span.id{ font-size:14px; }
.nav-myinfo .myinfo-panel .info li span.nick{ color:var( --yellow); font-weight:bold; text-align:right; }
.nav-myinfo .myinfo-panel .info li span.nick:after{ margin-left:5px; content:"님"; color:var( --white); font-weight:normal; }
.nav-myinfo .myinfo-panel .info li span.money{ color:var( --orange); text-align:right; }
.nav-myinfo .myinfo-panel .info li span.money:after{ margin-left:5px; content:"원"; color:var( --white); font-weight:normal; }
.nav-myinfo .myinfo-panel .info li span.point{ color:var( --orange); text-align:right; }
.nav-myinfo .myinfo-panel .info li span.point:after{ margin-left:5px; content:"P"; color:var( --white); font-weight:normal; }
.nav-myinfo .myinfo-panel .info li span i{ width:30px; color:var( --blue-text); font-size:16px; text-align:center; }
.nav-myinfo .menu .myinfo-panel a{ width:50%; height: 50px; color: var( --white ); font-size: 12px; position: relative; z-index: 1; }
.nav-myinfo .menu .myinfo-panel a.w33{ width:calc(100% / 3); }
.nav-myinfo .menu .myinfo-panel a.w100{ width:100%; }

/* Nav Essential */
.nav-essential{ padding: 0 0 15px; margin: 0 0 15px; border-bottom: solid 1px var( --white-10 ); }
.nav-essential .essential-panel{ border-radius: 5px; background-color: var( --bg-color ); }
.light-theme .nav-essential .essential-panel{ background-color: #eef0f1; }
.nav-essential .essential-panel a{ width: 50%; height: 50px; color: var( --white ); font-size: 12px; position: relative; z-index: 1; }
.nav-essential .essential-panel a.active{ color: #fff; }
.nav-essential .essential-panel a:before,
.nav-essential .essential-panel a:after{ top: 0; bottom: 0; margin: auto 0; z-index: -1; }
.nav-essential .essential-panel a:before{ width: calc( 100% - 10px ); height: calc( 100% - 10px ); left: 0; right: 0; margin: auto; border-radius: 5px; background-color: var( --orange ); opacity: 0; }
.nav-essential .essential-panel a:hover:before{ opacity: 1; }
.nav-essential .essential-panel a.active:before{ opacity: 1; }
.nav-essential .essential-panel a:after{ height: 50%; width: 1px; right: 0; background-color: var( --white-10 ); }
.nav-essential .essential-panel a:last-child:after{ display: none; }
.nav-essential .essential-panel a i{ margin-right: 8px; color: var( --orange ); }
.nav-essential .essential-panel a:hover i{ color: #fff; }
.nav-essential .essential-panel a.active i{ color: #fff; }

/* Nav Menu */
.page-navigation .nav-menu .nav-link{ height: 50px; color: var( --white ); padding: 0 20px; background-color: var( --bg-blue ); border-radius: 5px; margin: 0 0 5px; position: relative; }
.page-navigation .nav-menu .nav-link:hover{ color: #fff; background-color: var( --bg-blue-light ); }
.light-theme .page-navigation .nav-menu .nav-link:hover{ background-color: rgba(0, 0, 0, 0.4); }
.page-navigation .nav-menu .nav-link.active{ color: var(--white); background-color: var( --bg-color ); }
.light-theme .page-navigation .nav-menu .nav-link.active{ background-color: rgba(0, 0, 0, 0.25); }
.page-navigation .nav-menu .nav-link:before{ width: 4px; height: calc( 100% - 8px ); left: 2px; top: 0; bottom: 0; margin: auto 0; background-color: var( --blue ); border-radius: 1.5px; opacity: 0; }
.page-navigation .nav-menu .nav-link.active:before{ opacity: 1; }
.page-navigation .nav-menu .nav-link .icon-panel{ min-width: 30px; text-align: center; margin-right: 20px; font-size: 22px; color: var( --blue-text ); }
.page-navigation .nav-menu .nav-link.active .icon-panel{ color: var( --orange ) !important; }
.page-navigation .nav-menu .nav-link .text{ transition: 0s; }
.page-navigation .nav-menu .nav-link .soon-tag{ color: #100f0f; background-color: #efae13; font-size: 10px; padding: 2px 8px; margin-left: 8px; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* Featured Slots */
.featured-slots{ width: 100%; margin: 0 0 15px; }
.featured-slots .bs-ul{ width: 100%; display: block; }
.featured-slots .bs-ul li{ cursor: pointer; display: block; margin: 0 0 5px; }
.featured-slots .featured-wrap{ background-color: var( --bg-blue ); padding: 15px; border-radius: 10px; position: relative; overflow: hidden; transition: 0.3s; }
.featured-slots .featured-wrap:hover{ background-color: var( --bg-blue-light ); }
.light-theme .featured-slots .featured-wrap{ background-color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.featured-wrap .game-btn{ width: 80px; display: inline-block; position: relative; border-radius: 10px; overflow: hidden; border: solid 1px var( --white-25 ); }
.featured-wrap:hover .game-btn{ border-color: var( --blue ); box-shadow: 0 0 10px rgba(87, 162, 242, 0.5); }
.featured-wrap .game-btn .game-img{ width: 100%; transition: 0.3s; }
.featured-wrap:hover .game-btn .game-img{ opacity: 0.5; }
.featured-wrap .game-btn .hover{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.3s; opacity: 0; background: linear-gradient(to right, rgba(87, 162, 242, 0.5), rgba(51, 79, 135, 0.5)); }
.featured-wrap:hover .game-btn .hover{ opacity: 1; }
.featured-wrap .game-btn .play-icon{ transition: 0.3s; transform: scale(0.5); opacity: 0; }
.featured-wrap:hover .game-btn .play-icon{ transition-delay: 0.1s; transform: scale(1); opacity: 1; }
.featured-wrap .information{ width: 100%; max-width: 170px; padding: 0 0 0 15px; }
.featured-wrap .information .user-name{ font-size: 12px; font-family: var( --boxedlight ); margin: -4px 0 0; }
.featured-wrap .information .ratings{ border-top: solid 1px var( --white-10 ); margin: 4px 0 0; padding: 4px 0 0; }
.featured-wrap .information .ratings .percentage{ width: 50%; }
.featured-wrap .information .ratings .percentage:first-child{ padding-right: 2px; }
.featured-wrap .information .ratings .percentage:last-child{ padding-left: 2px; }
.featured-wrap .information .ratings .labels{ width: 100%; font-size: 10px; color: var( --white-50 ); margin: 0 0 2px; padding: 0 0 0 5px; }
.featured-wrap .information .ratings .info{ width: 100%; font-size: 10px; padding: 2px 0 2px 8px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; position: relative; transition: 0.3s; }
.featured-wrap:hover .information .ratings .info{ background-color: var( --orange ); }
.featured-wrap .bullet{ width: 5px; height: 5px; border-radius: 50%; background-color: var( --orange ); position: absolute; left: 8px; top: 0; bottom: 0; margin: auto 0; }
.featured-wrap:hover .bullet{ background-color: #ffcdac; }
.featured-dropdown{ display: none; }
.more-target-btn{ position: relative; }
.more-target-btn .arrow-icon{ display: inline-block; transition: 0.3s; position: relative; top: -1px; }
.more-target-btn .opened{ position: absolute; transition: 0.3s; opacity: 0; transform: scale(0.5); }
.more-target-btn.active .opened{ opacity: 1; transform: scale(1); }
.more-target-btn.active .opened .arrow-icon{ transform: rotate(180deg); top: -2px; }
.more-target-btn .closed{ position: absolute; transition: 0.3s; }
.more-target-btn.active .closed{ opacity: 0; transform: scale(0.5); }
.target-depth{ display: none; }

/* Winner Panel */
.winner-panel{ width: 100%; margin: -8px 0; }
.winner-panel .bs-ul{ width: 100%; display: block; }
.winner-panel .bs-ul li{ cursor: pointer; display: block; }
.winner-panel .winner-wrap{ padding: 8px 0; }
.rolling-realtime{ margin: -15px 0; }
.rolling-realtime .winner-wrap{ padding: 15px 0; }
.rolling-realtime .bs-ul li{ height: auto; border-bottom: solid 1px var( --white-10 ); }
.winner-panel .game-btn{ width: 80px; display: inline-block; position: relative; border-radius: 10px; overflow: hidden; border: solid 1px var( --white-25 ); }
.rolling-realtime .game-btn{ width: 60px; }
.winner-panel .game-btn:hover{ border-color: var( --blue ); box-shadow: 0 0 10px rgba(87, 162, 242, 0.5); }
.winner-panel .game-btn .game-img{ width: 100%; transition: 0.3s; }
.winner-panel .game-btn:hover .game-img{ opacity: 0.5; }
.winner-panel .game-btn .hover{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.3s; opacity: 0; background: linear-gradient(to right, rgba(87, 162, 242, 0.5), rgba(51, 79, 135, 0.5)); }
.winner-panel .game-btn:hover .hover{ opacity: 1; }
.winner-panel .game-btn .play-icon{ transition: 0.3s; transform: scale(0.5); opacity: 0; }
.winner-panel .game-btn:hover .play-icon{ transition-delay: 0.1s; transform: scale(1); opacity: 1; }
.winner-panel .information{ padding: 0 0 0 15px; }
.winner-panel .information .user-name{ font-family: var( --boxedlight ); }
.winner-panel .information .amount{ font-family: var( --boxedbold ); margin: 5px 0 0; }
.rolling-realtime .information .user-name{ font-size: 10px; }
.rolling-realtime .information .amount{ font-size: 12px; }
.btn-sidebar{ width: 100%; height: 40px; margin: -10px 0 15px; border-radius: 10px; }

/* Page Content */
.page-content .container{ padding: 0px; margin: 0px; }
.page-panel{ width: 100%; margin-left: 0px; margin-right:0px; }

.middle-button-section{ width: 104%; margin-left: 0px; margin-right:0px; height:50px; border: #251f2f solid 1px; margin-bottom:55px; }
.middle-button-section .middle-btn-area{ display: flex; justify-content: center;}
.middle-button-section .casino-middle-btn, .slot-middle-btn{ width:40%; height:50px;  border-left: #251f2f solid 1px; border-right:#251f2f solid 1px; line-height: 50px; }
.middle-button-section .casino-middle-btn .casino-text:hover, .slot-middle-btn .slot-text:hover{ border-top:orange solid 4px; line-height: 42px; background-color:#0e051b;}
.middle-button-section .casino-text.active, .slot-text.active{ border-top:orange solid 4px; line-height: 42px; background-color:#0e051b;}
.middle-button-section .casino-text, .slot-text{ width:100%; height:50px;  line-height: 50px; color:#888888; font-size:15px; font-weight: bold;}


.page-notice{ width:100%; margin:0 0 15px; padding:15px; border:solid 1px var( --white-05 ); border-radius:10px; color: var(--white); background: var(--bg-color-light); text-shadow: 0 1px 1px rgb(0 0 0 / 70%); font-weight:bold; text-align:left; word-wrap:break-word; }

/* Banner Section */
.banner-section{ width: 103%; padding: 0 0 0px; }
.swiper-carousel{ width: 100%; height: 100%; }
.swiper-carousel .swiper-slide{ width: 100%; border-radius: 10px; overflow: hidden; position: relative; background-color: #000; }
.swiper-carousel .swiper-slide-active{ width: 100%; border-radius: 10px; overflow: hidden; position: relative; background-color: #000; }
.swiper-carousel .carousel-panel{ width: 100%; height: 100%; padding: 0 50px 30px; position: absolute; left: 0; top: 0; transition: 1s; z-index: 1; opacity: 0; transform: translateY(25%); }
.swiper-carousel .swiper-slide-active .carousel-panel{ opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.swiper-carousel .text-container{ text-align: left; width:90%; margin:0 auto; }
.swiper-carousel .text-container.right{ text-align:right; }
.swiper-carousel .text-container h1,
.swiper-carousel .text-container h2, 
.swiper-carousel .text-container h6{ color: #fff; font-family: var( --boxedbold ); margin: 0; }
.swiper-carousel .text-container h1{ font-size: 48px; }
.swiper-carousel .text-container h2{ font-size: 40px; }
.swiper-carousel .text-container h6{ font-size: 18px; margin: 0 0 10px; }
.swiper-carousel .text-container .font-regular{ font-family: BoxedRegular; }
.swiper-carousel .text-container .more-btn{ width: 140px; height: 45px; margin: 30px 0 0; border-radius: 25px; border: none; }
.swiper-carousel .banner-img{ width: 100%; transition: 0.3s; }

/* Swiper Pagination */
.swiper-carousel .swiper-pagination{ width: 90%; right: 0; margin: 0 auto; padding: 0 50px; bottom: 30px; }
.swiper-carousel .swiper-pagination .swiper-pagination-bullet{ width: 30px; height: 6px; margin: 0 5px 0 0; background-color: #fff; border: none; opacity: 0.25; border-radius: 3px; transition: 0.3s; }
.swiper-carousel .swiper-pagination .swiper-pagination-bullet:hover{ opacity: 1; }
.swiper-carousel .swiper-pagination .swiper-pagination-bullet-active{ opacity: 1; width: 50px; background-color: var( --orange-dark ); height: 10px; border-radius: 5px; }
.swiper-button-next, 
.swiper-button-prev{ color: var( --orange ); width: 50px; height: 50px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); transition: 0.3s; }
.swiper-button-prev{ left: 5px; }
.swiper-button-next{ right: 5px; }
.swiper-button-next:hover, 
.swiper-button-prev:hover{ background-color: var( --orange-dark ); color: #fff; }
.swiper-button-next:after, 
.swiper-button-prev:after{ font-size: 20px; }

/* Section Header*/
.section-header{ margin: 0 0 10px; padding: 0 5px; }
.section-header .title{ font-size: 18px; font-family: var( --boxedbold ); margin-right: auto; }
.section-header .see-all{ color: var( --orange ); font-size: 12px; }
.section-header .see-all:hover{ color: var( --red ); }
.section-header .see-all i{ font-size: 18px; margin-left: 8px; }
.section-header.w-border{ color: var(--white); border-bottom: solid 1px var( --white-10 ); padding: 0 5px 15px; position: relative; }
.section-header.w-border:after{ width: 50px; height: 3px; background-color: var( --orange ); bottom: -2px; left: 0; }


/* Main Lobby */
.main-lobby-btn{ width: calc( 50% - 20px ); /*margin: 10px;*/ overflow: hidden; border-radius: 10px; display: inline-block; background-color: #062f82; position: relative; z-index: 1; }
.main-lobby-btn .g-panel{ width: 100%; position: relative; z-index: 1; background-color: var( --blue-dark ); }
.main-lobby-btn .g-panel .g-img{ width: 100%; transition: 0.5s; }

.main-lobby-btn .g-panel .text-container{ position:absolute; top:35%; left:10%; text-align:left; background:transparent; }
.main-lobby-btn .g-panel .text-container.right{ right:10%; left:unset; text-align:right; }
.main-lobby-btn .g-panel .text-container h1,
.main-lobby-btn .g-panel .text-container h2, 
.main-lobby-btn .g-panel .text-container h6{ color: #fff; font-family: var( --boxedbold ); margin: 0; }
.main-lobby-btn .g-panel .text-container h1{ font-size: 32px; }
.main-lobby-btn .g-panel .text-container h2{ font-size: 26px; }
.main-lobby-btn .g-panel .text-container h6{ font-size: 14px; margin: 0 0 10px; }
.main-lobby-btn .g-panel .text-container .font-regular{ font-family: BoxedRegular; }

.main-lobby-btn:hover .g-img{ transform: scale(1.1); }
.main-lobby-btn .g-reflect{ width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: bottom center; position: absolute; bottom: -100%; left: 0; z-index: 1; transform: rotate(180deg) rotateY(180deg); -webkit-mask-image : -webkit-gradient(linear,left top,left bottom,color-stop(0,transparent),color-stop(.2,transparent),color-stop(.5,#000),color-stop(1,#000)) }
.main-lobby-btn .g-detail{ width: 100%; height: auto; overflow: hidden; position: absolute; left: 0; bottom: 0; padding: 10px; z-index: 2; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transition: 0.3s; }
.main-lobby-btn:hover .g-detail{ padding-bottom: 0; }
.main-lobby-btn .g-blur{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.3; }
.main-lobby-btn .g-detail .g-logo{ width: 40px; height: 40px; margin-right: 8px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.2); border: solid 1px rgba(255, 255, 255, 0.5); position: relative; z-index: 1; overflow: hidden; }
.main-lobby-btn .g-detail .g-logo:before{ width: 200%; height: 100%; background-color: rgba(255, 255, 255, 0.07); border-radius: 50%; top: -50%; left: -50%; transform: rotate(-25deg); }
.main-lobby-btn .g-detail .g-info{ width: calc( 100% - 48px ); display:flex; flex-wrap:wrap; }
.main-lobby-btn .g-detail .g-info .name{ width: 100%; color: #fff; font-size: 13px; font-family: var( --boxedbold ); display: inline-block; vertical-align: middle; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-lobby-btn .g-detail .g-info .company{ width: 100%; color: rgba(255, 255, 255, 0.5); font-size: 11px; display: inline-block; vertical-align: middle; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-lobby-btn .g-detail .play-btn{ width: 100%; height: 40px; background-color: rgba(255, 255, 255, 0); border: none; color: #fff; font-size: 12px; font-family: var( --boxedbold ); border-top: solid 1px rgba(255, 255, 255, 0.5); margin: 15px 0 -55px; opacity: 0; position: relative; z-index: 2; }
.main-lobby-btn .g-detail .play-btn:before{ z-index: -1; width: 100%; height: calc( 100% - 10px); left: 0; top: 0; bottom: 0; margin: auto 0; background-color: var( --orange-dark ); opacity: 0; border-radius: 5px; }
.main-lobby-btn .g-detail .play-btn:hover:before{ opacity: 1; }
.main-lobby-btn:hover .g-detail .play-btn{ opacity: 1; margin-bottom: 0; }

/* Popular Games */
.owl-carousel .owl-item img{ width: initial; }
.owl-nav button{ background-color: transparent; border: none; color: var( --orange ); font-size: 10px; }
.owl-nav button:hover{ color: var( --red ); }
.owl-nav button i{ font-size: 16px; }
.popular-games .game-lux-btn{ width: 100%; margin: 0; }
.game-lux-btn{ width: calc( 16.66% - 20px ); margin: 10px; overflow: hidden; border-radius: 5px; display: inline-block; background-color: #eeeeee; padding: 0; position: relative; z-index: 1; }
.g-blur{ background-color: #062f82; }
.gbg-orange{ background-color: #752105; }
.gbg-orange-light{ background-color: #914500; }
.gbg-purple{ background-color: #47116a; }
.gbg-yellow{ background-color: #865a05; }
.gbg-red{ background-color: #6f0200; }
.gbg-green{ background-color: #2b5427; }
.gbg-blue-green{ background-color: #19666e; }
.gbg-lavander{ background-color: #484264; }
.gbg-dark-blue{ background-color: #131e40; }
.gbg-pink-pastel{ background-color: #6e3944; }
.gbg-pink{ background-color: #6a0015; }
.gbg-light-blue{ background-color: #107989; }
.gbg-black{ background-color: #eeeeee; }

.game-lux-btn .g-panel{ width: 100%; position: relative; z-index: 1; background-color: var( --blue-dark ); }
.game-lux-btn .g-panel .g-img{ width: 100%; opacity:1; border: var( --bg-color) solid 2px;  }
.game-lux-btn .g-panel .g-title{ position:absolute; top:0; left:0; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; color:#ffffff; font-size:1.2rem; }
.game-lux-btn .g-panel .g-title .name{  }
.game-lux-btn .g-panel .g-title .company{  }
.game-lux-btn:hover .g-img{ border:orange solid 2px; filter: grayscale(0%)}

/* Game Detail */
.game-lux-btn .g-detail{ width: 100%; height: auto; position: absolute; left: 0; bottom: 0; padding: 10px; z-index: 2; /* -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); */ transition: 0.3s; }
.game-lux-btn:hover .g-detail{ padding-bottom: 0; }
.game-lux-btn .g-blur{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.7; }
.game-lux-btn .g-detail .g-logo{ display:flex; align-items:center; justify-content:center; width: 40px; height: 40px; margin-right: 8px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.2); border: solid 1px rgba(255, 255, 255, 0.3); position: relative; z-index: 1; overflow: hidden; }
.game-lux-btn .g-detail .g-logo:before{ width: 200%; height: 100%; background-color: rgba(255, 255, 255, 0.07); border-radius: 50%; top: -50%; left: -50%; transform: rotate(-25deg); }
.game-lux-btn .g-detail .g-logo img{ max-width:80%; }
.game-lux-btn .g-detail .g-info{ position:relative; width: 100%; display:flex; flex-wrap:wrap; }
.game-lux-btn .g-detail .g-info .name{ width: 100%; color: #3d4eb4; font-size: 16px; font-family: var( --boxedbold ); display: inline-block; vertical-align: middle; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight:bold; text-align: center;  }
.game-lux-btn .g-detail .g-info .company{ width: 100%; color: rgba(255, 255, 255, 0.5); font-size: 12px; display: inline-block; vertical-align: middle; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-lux-btn .g-detail .play-btn{ width: 100%; height: 40px; 
 background-color: rgba(255, 255, 255, 0); border: none; color: #fff; font-size: 13px; font-family: var( --boxedbold ); border-top: solid 1px rgba(255, 255, 255, 0.5); margin: 15px 0 -55px; opacity: 0; position: relative; z-index: 2; }
.game-lux-btn .g-detail .play-btn:before{ z-index: -1; width: 100%; height: calc( 100% - 10px); left: 0; top: 0; bottom: 0; margin: auto 0; background-color: var( --orange-dark ); opacity: 0; border-radius: 5px; }
.game-lux-btn .g-detail .play-btn:hover:before{ opacity: 1; }
.game-lux-btn:hover .g-detail .play-btn{ opacity: 1; margin-bottom: 0; }

.game-lux-btn.active .g-img{ transform: scale(1.1); }
.game-lux-btn.active .g-detail{ padding-bottom: 0; }
.game-lux-btn.active .g-detail .play-btn{ opacity: 1; margin-bottom: 0; }
.game-lux-btn.active .g-detail .play-btn:before{ opacity: 1; }


/* Search Section */
.search-section{ margin: 0 0 5px; }
.search-panel{ width: 100%; height: 40px; border-radius: 5px; position: relative; background-color: var( --bg-color-light ); border: solid 1px var( --white-05 ); }
.search-panel .search-btn{ width: 50px; height: calc( 100% - 8px); background-color: var( --bg-color-light ); border: none; border-right: solid 1px var( --white-10 ); color: var( --orange ); }
.search-panel .search-btn:hover{ color: var( --red ); }
.search-panel .search-input{ width: calc( 100% - 250px); height: 100%; border: none; background-color: rgba(255, 255, 255, 0); padding: 0 20px; color: var( --white ); }

/* Providers Dropdown */
.providers-dropdown{ width: 100%; position: relative; padding: 5px 0 0; }
.providers-dropdown .providers-btn{ width: 200px; height: 30px; position: absolute; right: 0; top: -35px; background-color: rgba(255, 255, 255, 0); border: none; border-left: solid 1px var( --white-10); color: var( --orange ); padding: 0 15px; transition: 0s; }
.providers-dropdown .providers-btn:hover{ color: var( --red ); }
.providers-dropdown .providers-btn.active{ color: var( --red ); }
.providers-dropdown .providers-btn i{ margin-left: auto; transition: 0.3s; }
.providers-dropdown .providers-btn.active i{ transform: rotate(180deg); }
.providers-dropdown .providers-menu{ width: 100%; background-color: var( --bg-color-dark ); border: solid 1px var( --white-10 ); border-radius: 5px; padding: 15px 5px; display: none; }
.providers-dropdown .providers-menu .bs-ul{ width: 100%; }
.providers-dropdown .providers-menu .bs-ul li{ width: 16.66%; position: relative; }
.providers-dropdown .providers-menu .bs-ul li:after{ width: 1px; height: 40%; margin: auto 0; top: 0; bottom: 0; right: 0; background-color: var( --white-15 ); }
.providers-dropdown .providers-menu .bs-ul li:nth-child(6n):after{ display: none; }
.providers-dropdown .providers-menu .bs-ul li:last-child:after{ display: none; }
.providers-dropdown .providers-menu .bs-ul li a{ height: 40px; color: var( --white ); }
.providers-dropdown .providers-menu .bs-ul li a:hover{ color: var( --orange ); }
.providers-dropdown .providers-menu .bs-ul li a .providers-logo{ width: 50px; }
.providers-dropdown .providers-menu .bs-ul li a .providers-logo img{ max-height:24px; }
.providers-dropdown .providers-menu .bs-ul li a .providers-name{ display: inline-block; min-width: 100px; text-align: left; margin-left: 5px; transition: 0s; }
.providers-dropdown .providers-menu .bs-ul li a .providers-name span{ transition: 0s; }

/* Gamelist Section */
.gamelist-panel{ width: 100%; border-radius: 5px; padding: 0 15px; }
.gamelist-panel .gamelist-menu{ width: 100%; border-bottom: solid 1px var( --white-10 ); }
.gamelist-panel .gamelist-menu .bs-ul li a{ padding: 20px 40px; color: var( --blue-white ); font-size: 11px; position: relative; margin: 0 0 -2px; }
.gamelist-panel .gamelist-menu .bs-ul li a:after{ width: 0; height: 1px; left: 0; right: 0; bottom: -1px; background-color: var( --orange ); opacity: 0; }
.gamelist-panel .gamelist-menu .bs-ul li a:hover{ color: var( --orange ); }
.gamelist-panel .gamelist-menu .bs-ul li a.active{ color: var( --white ); }
.gamelist-panel .gamelist-menu .bs-ul li a.active:after{ width: 100%; opacity: 1; }
.gamelist-panel .gamelist-menu .bs-ul li a .icon-panel{ margin-right: 10px; }
.gamelist-panel .gamelist-menu .bs-ul li a .icon-panel img{ transition: 0.3s; filter: brightness(125%) hue-rotate(30deg); }
.gamelist-panel .gamelist-menu .bs-ul li a.active .icon-panel img{ filter: brightness(1) invert(0); }
.gamelist-panel .gamelist-menu .bs-ul li a.active:hover .icon-panel img{ filter: brightness(1) invert(0); opacity: 1; animation: none; }
.gamelist-panel .gamelist-menu .bs-ul li a:hover .icon-panel img{ filter: brightness(0) invert(1); opacity: 1; animation: shakeAnim 0.5s ease 1; }
@keyframes shakeAnim{
	0%{ transform: rotate(0deg); }
	25%{ transform: rotate(10deg); }
	50%{ transform: rotate(-10deg); }
	75%{ transform: rotate(5deg); }
	100%{ transform: rotate(0deg); }
}
.gamelist-panel .gamelist-menu .bs-ul li a .text-panel span{ transition: 0s; }

/* Gamelist Container */
.gamelist-section.wbg-section{ padding: 0; }
.gamelist-container{ width: calc( 100% + 10px ); margin: 15px -5px 0; }
.gamelist-container .game-btn{ display:none; width: calc( 16.66% - 10px ); margin: 0 5px 15px; border-radius: 10px; background-color: var( --bg-blue ); border: solid 1px var( --white-05 ); padding: 1px; position: relative; overflow: hidden; z-index: 1; transition: 0.5s; }
.gamelist-container .game-btn.active{ display:block; }
.gamelist-container .game-btn:hover{ box-shadow: 0 0 10px rgba(162, 207, 255, 0.25); }
.gamelist-container .game-btn:before,
.gamelist-container .game-btn:after{ width: 100%; height: 0; z-index: -1; background-color: var( --blue ); transition: 0s; }
.gamelist-container .game-btn:before{ top: 0; left: 0; }
.gamelist-container .game-btn:after{ bottom: 0; right: 0; }
.gamelist-container .game-btn:hover:before,
.gamelist-container .game-btn:hover:after{ height: 100%; transition: 0.8s; }
.gamelist-container .game-btn .btn-panel{ width: 100%; border-radius: 8px; padding: 5px; overflow: hidden; position: relative; z-index: 1; }
.gamelist-container .game-btn .btn-panel:before{ width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background-image: linear-gradient(180deg,#57a2f2,#14202d); opacity: 0; }
.gamelist-container .game-btn:hover .btn-panel:before{ opacity: 0.75; }
.gamelist-container .game-btn .game-panel{ width: 100%; border-radius: 5px; overflow: hidden; position: relative; background-color: #000; }
.gamelist-container .game-btn .game-panel .main-img{ width: 100%; transition: 0.5s; }
.gamelist-container .game-btn:hover .game-panel .main-img{ opacity: 0.5; transform: scale(1.1); }
.gamelist-container .game-btn .g-tag{ height: 20px; padding: 0 15px 0 10px; border-radius: 10px; position: absolute; left: 5px; top: 5px; color: #fff; font-size: 10px; font-family: var( --boxedbold ); background-color: rgba(0, 0, 0, 0.7); z-index: 1; }
.gamelist-container .game-btn .g-tag .bullet{ width: 6px; height: 6px; border-radius: 50%; background-color: #2dff7c; margin-right: 6px; animation: blinkAnim 0.3s ease infinite; }
.gamelist-container .game-btn .g-tag.popular .bullet{ background-color: #ff4848; }
@keyframes blinkAnim{
	0%{ opacity: 1; }
	50%{ opacity: 0.5; }
	100%{ opacity: 1; }
}
.gamelist-container .game-btn .game-panel .play-btn{ width: 90px; height: 30px; border-radius: 5px; border: none; font-size: 12px; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: scale(0); }
.gamelist-container .game-btn:hover .game-panel .play-btn{ animation: glPlayBtn 0.8s ease 1 forwards; }
@keyframes glPlayBtn{
	0%{ transform: scale(0); }
	50%{ transform: scale(1.1); }
	100%{ transform: scale(1); }
}
.gamelist-container .game-btn .game-info{ margin: 8px 0 3px; }
.gamelist-container .game-btn .game-info .g-logo{ width: 30px; height: 30px; border-radius: 50%; background-color: var( --bg-color ); box-shadow: 0 0 0 1px var( --white-10 ); }
.gamelist-container .game-btn .game-info .g-logo img{ max-width: 60%; }
.gamelist-container .game-btn .game-info .g-info{ width: calc( 100% - 30px); font-size: 12px; color: var( --white ); padding: 0 0 0 10px; }
.gamelist-container .game-btn .game-info .g-info .g-name{ font-family: var( --boxedbold ); margin: 0 0 -2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gamelist-container .game-btn .game-info .g-info .g-providers{ color: var( --white-25 ); font-size: 10px; }

/* Promotion Section */
.promotion-section{ width: calc(100% + 20px); margin: 0 -10px; }
.promotion-banner{ width: calc(50% - 20px); height: 280px; margin: 0 10px 20px; display: inline-block; position: relative; }
div.promotion-banner{ width: 100%; border-radius: 10px; overflow: hidden; }
.promotion-banner.promote-lg{ width: calc(100% - 20px); height: 340px; }
.promotion-banner .banner-panel{ width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: var( --bg-color-light ); }
.promotion-banner .img-panel{ width: 54%; height: 100%; }
.promotion-banner .img-panel .banner-img{ height: 100%; position: relative; left: -35%; }
.promotion-banner.promote-lg .img-panel .banner-img{ left: 0; }
.promotion-banner .info-panel{ width: 46%; height: 100%; color: var( --white ); position: relative; z-index: 2; background-color: var( --bg-color-light ); padding: 0 30px 0 0; transition: 0.3s; }
.promotion-banner .info-panel:before{ width: 150%; height: 150%; top: -25%; left: -15%; background-color: var( --bg-color-light ); border-radius: 50%; z-index: -1; }
.promotion-banner .info-panel p{ color: var( --white-25 ); font-size: 12px; }
.promotion-banner .info-panel .read-more{ width: 130px; height: 40px; margin: 30px 0 0; box-shadow: 0 0 20px rgba(255, 170, 114, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); }

/* Promorion Tag */
.promotion-banner .tag{ width: 80px; height: 30px; background-color: var( --blue ); position: absolute; right: -25px; top: 0; z-index: 3; transform: rotate(45deg); transform-origin: top left; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.1)); }
.promotion-banner .tournament-tag{ background-color: #d71314; }
.promotion-banner .bonus-tag{ background-color: #009a26; }
.promotion-banner.promote-lg .tag{ width: 120px; height: 40px; right: -40px; top: -5px; }
.promotion-banner .tag .text-panel{ width: 100%; height: 100%; color: #fff; font-size: 12px; position: relative; z-index: 1; }
.promotion-banner .tag .text-panel:before,
.promotion-banner .tag .text-panel:after{ width: 50%; height: 100%; top: 0; background-color: var( --blue ); z-index: -1; }
.promotion-banner .tournament-tag .text-panel:before,
.promotion-banner .tournament-tag .text-panel:after{ background-color: #d71314; }
.promotion-banner .bonus-tag .text-panel:before,
.promotion-banner .bonus-tag .text-panel:after{ background-color: #009a26; }
.promotion-banner .tag .text-panel:before{ transform: skew(-45deg); left: -20px; }
.promotion-banner .tag .text-panel:after{ transform: skew(45deg); right: -20px; }

/* Promotion Category */
.promotion-banner .category-panel{ width: 70px; height: 70px; border-radius: 10px; position: absolute; left: 20px; bottom: 20px; background-color: #15243a; box-shadow: 0 0 0 3px var( --white-25 ),
 inset 0 0 10px rgba(0, 0, 0, 0.25); z-index: 4; }
.promotion-banner .category-panel lord-icon{ width: 50px; height: 50px; }
.promotion-banner .category-panel .live-tag{ width: 34px; height: 14px; background-color: #d71314; border-radius: 2px; font-size: 10px; color: #fff; position: absolute; top: -5px; right: 0; left: 0; margin: 0 auto; }
.promotion-banner .category-panel .live-tag span{ animation: blinkAnim 0.5s ease infinite; }
@keyframes blinkAnim{
	0%{ opacity: 1; }
	50%{ opacity: 0.5; }
	100%{ opacity: 1; }
}
.promotion-table th{ border-bottom: solid 2px var( --orange ); }

/* Back Link */
.back-link{ width: 50px; height: 50px; border-radius: 5px; background-color: var( --bg-color-light ); color: var( --orange ); position: absolute; left: 15px; top: 15px; }
.back-link:hover{ background-color: var( --bg-color ); color: var( --blue ); }

/* Tournament Section */
.promotion-banner .tournament-input{ min-height: 40px; color: var(--white); background-color: var( --bg-color ); border: solid 1px var( --white-10 ); border-radius: 5px; padding: 4px 15px; margin: 0 0 10px; }
.promotion-banner .tournament-input .labels{ min-width: 90px; color: var( --blue-text ); }
.promotion-banner .tournament-input .text-prize{ font-size: 28px; font-family: Arial; }

/* With Background Section */
.wbg-section{ background-color: var( --bg-color-light ); padding: 40px 0; border: solid 1px var( --white-05 ); border-radius: 5px; overflow: hidden; position: relative; }
.wbg-section.highlight{ padding-left: 35px; padding-right: 10px; }
.wbg-section.highlight:before{ content: ''; width: 4px; height: 80%; top: 0; bottom: 0; left: 5px; margin: auto 0; border-radius: 2px; position: absolute; background-color: var( --blue ); }

/* BS Table */
.tournament-table{ width: 100%; }
.tournament-table .table-head{ width: 100%; background-color: var( --orange-dark ); border-radius: 10px; margin: 0 0 10px; }
.tournament-table .table-panel{ width: 100%; display: table; table-layout: fixed; }
.tournament-table .table-row{ display: table-row; }
.tournament-table .table-row .table-th{ display: table-cell; height: 40px; vertical-align: middle; }
.tournament-table .table-body{ width: 100%; background-color: #fff; border-radius: 10px; padding: 0 8px; }
.tournament-table .table-row .table-td{ color: #0a0b0d; display: table-cell; vertical-align: middle; height: 50px; font-family: var( --boxedsemibold ); }
.tournament-table .table-row:nth-child(even) .table-td{ background-color: rgba(0, 0, 0, 0.1); }
.tournament-table .table-row .table-td:first-child{ border-radius: 10px 0 0 10px; }
.tournament-table .table-row .table-td:last-child{ border-radius: 0 10px 10px 0; }
.tournament-table .table-row .table-td .tournament-user{ min-width: 110px; padding: 0 5px 0 33px; text-align: left; position: relative; }
.tournament-table .table-row .table-td .tournament-user .trophy-icon{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.tournament-table .more-target-btn{ width: 100%; height: 50px; background-color: transparent; border: none; }

/* Tournament Gamelist */
.tournament-gamelist{ width: calc( 100% + 20px ); margin: 0 -10px; overflow: hidden; }
.tournament-gamelist .game-btn{ width: calc(33.33% - 20px); display: inline-block; margin: 0 10px 35px; }
.tournament-gamelist .game-btn .btn-panel{ width: 100%; position: relative; z-index: 1; padding: 10px 15px; }
.tournament-gamelist .game-btn .btn-panel:before{ width: 100%; height: 100%; left: 0; top: 0; z-index: -1; background-color: var( --bg-color ); background-image: linear-gradient(180deg,#587ebb,#14202d); box-shadow: 0 0 0 1px var( --white-25 ); border-radius: 10px; opacity: 0.5; }
.light-theme .tournament-gamelist .game-btn .btn-panel:before{ background-color: #ccc; background-image: none; opacity: 0.5; }
.tournament-gamelist .game-btn:hover .btn-panel:before{ opacity: 0.9; }
.tournament-gamelist .game-btn .pool-prize{ width: 100%; padding: 4px 10px; border-radius: 5px; color: var(--white); background-color: var( --bg-color ); box-shadow: 0 0 0 1px var( --white-10 ); }
.tournament-gamelist .game-btn .pool-prize .labels{ font-size: 12px; }
.tournament-gamelist .game-btn .pool-prize .amount{ font-size: 18px; color: var( --orange ); }
.tournament-gamelist .game-btn .info-panel{ position: absolute; bottom: 0; right: 0; text-align: right; padding: 0 15px 10px 0; display:flex; justify-content:flex-end; flex-wrap:wrap; align-items:flex-end; }
.tournament-gamelist .game-btn .info-panel .game-name{ color: var( --white ); width:100%; }
.tournament-gamelist .game-btn .info-panel .see-result{ color: var( --blue-text ); font-size: 12px; cursor: pointer; }
.tournament-gamelist .game-btn .info-panel .see-result:hover{ color: var( --orange ); }
.tournament-gamelist .game-btn .game-panel{ width: 40%; border-radius: 10px; overflow: hidden; position: relative; z-index: 2; margin: 15px 0 -25px; background-color: #000; transition: 0.3s; box-shadow: 0 0 15px rgba(87,162,242,0.5), 0 0 0 3px var( --white-15 ); }
.tournament-gamelist .game-btn:hover .game-panel{ border-color: var( --blue ); }
.tournament-gamelist .game-btn .game-panel .main-img{ width: 100%; transition: 0.3s; }
.tournament-gamelist .game-btn:hover .game-panel .main-img{ opacity: 0.5; transform: scale(1.1); }
.tournament-gamelist .game-btn .game-panel .far{ position: absolute; color: #fff; font-size: 24px; transition: 0.3s; opacity: 0; transform: scale(0); }
.tournament-gamelist .game-btn:hover .game-panel .far{ opacity: 1; transform: scale(1); }
.more-game-panel{ transition: 0.3s; }
.more-game-btn{ width: 160px; height: 40px; margin: 20px auto 0; border-radius: 5px; border: none; background-color: var( --orange ); color: #fff; }
.more-game-btn .arrow-icon{ filter: brightness(0) invert(1); }

/* From Section */
.form-section .col-md-9{ padding-right: 50px; }
.form-section .col-md-3{ border-left: solid 1px var( --white-10 ); padding-left: 0; }
.form-menu{ width: 100%; padding: 20px 0 0; }
.form-menu li a{ width: 100%; height: 50px; padding: 0 0 0 30px; color: var( --white ); position: relative; }
.form-menu li a.active{ background-color: var( --white-05 ); }
.form-menu li a:before{ width: 3px; height: 0; left: -2px; top: 0; bottom: 0; margin: auto 0; background-color: var( --orange ); opacity: 0; }
.form-menu li a:hover:before{ height: 100%; opacity: 1; }
.form-menu li a.active:before{ height: 100%; opacity: 1; }
.form-menu li a .icon-panel{ margin-right: 10px; }
.form-menu .menu-depth{ width: 100%; padding: 5px; }
.form-menu .menu-depth a{ padding: 0 0 0 67px; height: 40px; font-size: 12px; margin: 2px 0; }
.form-menu .menu-depth a:hover{ background-color: rgba(0, 0, 0, 0.25); }
.form-menu .menu-depth a.active{ background-color: rgba(0, 0, 0, 0.25); }
.form-menu .menu-depth a:before{ width: 0; height: 0; border-top: 4px solid transparent; border-left: 5px solid var( --orange ); border-bottom: 4px solid transparent; background-color: transparent; left: 45px; top: 0; bottom: 0; margin: auto 0; opacity: 1; }
.form-menu .menu-depth a:hover:before{ height: 0; }
.form-menu .menu-depth a.active:before{ height: 0; animation: arrowAnim 1s ease infinite; }
@keyframes arrowAnim{
	0%{ transform: translateX(0); }
	50%{ transform: translateX(-4px); }
	100%{ transform: translateX(0); }
}

/* Subpage Nav */
.subpg-nav{ width: 100%; border-radius: 8px; background-color: rgba(0, 0, 0, 0.25); padding: 5px 3px; margin: 20px 0 30px; }
.subpg-nav a{ width: calc( 16.66% - 4px); height: 30px; border-radius: 5px; margin: 0 2px; color: #fff; font-size: 12px; }
.subpg-nav a:hover{ background-color: var( --orange ); }
.subpg-nav a.active{ background-color: var( --orange ); }

/* Form Container */
.form-container{ width: 100%; display: inline-block; margin: 40px 0 0; }
.form-container .form-group{ width: 90%; float: left; margin: 0 0 25px; }
.form-container .form-group:last-child{ margin: 0 0; }
.form-container .labels{ width: 100%; text-align: left; float: left; margin: 0 0 10px; padding: 0 0 0 41px; font-size: 14px; color: var( --black ); font-size: 12px; position: relative; }
.form-container .labels:before{ width: 30px; height: 1px; background-color: var( --black ); left: 0; top: 0; bottom: 0; margin: auto 0; }
.form-container .infos{ width: 100%; float: right; display: flex; align-items: center; }
.form-container .form-group .input-container{ width: 100%; height: 40px; float: left; position: relative; display: flex; align-items: center; justify-content: flex-start; background-color: #3d4eb4; border-radius: 5px;  overflow: hidden; }
.form-container .w-btn .input-container{ width: calc(100% - 125px); }
.form-container .form-group .input-container .icon-panel{ min-width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; color: var( --blue-white ); margin: 0 -15px 0 0; }
.form-container .form-group input{ width: 100%; height: 100%; float: left; border: #3d4eb4 solid 1px; background-color:#eee !important; border-radius: 5px; transition: 0.3s; padding: 0 15px;  margin-left:10px}
.form-container .form-group input:read-only{ color: var( --black ); }
.form-container .form-group input::-webkit-input-placeholder{ color: var( --black ); }
.light-theme .form-container .form-group input:read-only{ color: #000; }
.light-theme .form-container .form-group input::-webkit-input-placeholder{ color: #0a0b0d; }
.form-container .form-group .select-input{ width: 100%; height: 40px; float: left; border-radius: 5px; transition: 0.3s; display: flex; align-items: center; }
.form-container .form-group .select-input select{ width: 100%; height: 100%; border: none; color: var( --black ); background-color: transparent; -webkit-appearance: none; padding: 0 15px; cursor: pointer; }
.form-container .form-group .select-input select option{ background-color: var( --light); color: var( --dark ); }
.form-container .form-group .select-input i{ font-size: 18px; position: absolute; right: 15px; }
.form-container .form-group textarea{ width: 100%; height: 200px; float: left; color: var( --black); background-color: rgba(255, 255, 255, 0.03); border-radius: 8px; border: solid 1px var( --white-05 ); transition: 0.3s; padding: 20px 18px; resize: none; }
.form-container .form-group textarea::-webkit-input-placeholder{ color: var( --black ); }
.form-container .form-group .form-btn{ width: 120px; height: 38px; border: none; float: right; padding: 0; margin: 0; white-space: nowrap; background-color: #05a1bf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.5); color: #fff; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; transition: 0.3s; margin: 0 0 0 5px; }
.form-container .form-group .form-btn:hover{ background-color: #05bf7f; }

.form-container .form-group input:-webkit-autofill,
.form-container .form-group input:-webkit-autofill:hover,
.form-container .form-group input:-webkit-autofill:focus,
.form-container .form-group input:-webkit-autofill:active{
	-webkit-text-fill-color: var( --yellow);
	-webkit-box-shadow: 0 0 0px 1000px #222c3d inset;
	box-shadow: 0 0 0px 1000px #222c3d inset;
	transition:background-color 5000s ease-in-out 0s;
}
.form-container .form-group input:autofill,
.form-container .form-group input:autofill:hover,
.form-container .form-group input:autofill:focus,
.form-container .form-group input:autofill:active{
	-webkit-text-fill-color: var( --black);
	-webkit-box-shadow: 0 0 0px 1000px #222c3d inset;
	box-shadow: 0 0 0px 1000px #222c3d inset;
	transition:background-color 5000s ease-in-out 0s;
}



/* Form Btn Group */
.form-container .form-group .infos .btn-grp{ width: 100%; float: left; }
.form-container .form-group .infos .btn-grp button{ width: 16.66%; width: calc(16.66% - 4px); height: 35px; float: left; margin: 0 2px; background-color: #778496; border: none; border-radius: 5px; color: #fff; font-size: 12px; transition: 0.3s; padding: 0; position: relative; z-index: 1; overflow: hidden; }
.form-container .form-group .infos .btn-grp button:hover{ background-color: #7bb2ff; }
.form-container .form-group .infos .btn-grp button:first-child{ margin-left: 0; width: calc(16.66% - 2px); }
.form-container .form-group .infos .btn-grp button:last-child{ width: calc(13.66% - 2px); margin-right: 5px; }

/* Form Footer */
.form-footer{ width: 100%; margin: 50px 0 0; display: flex; align-items: center; justify-content: center; float: left; }
.form-footer button{ width: 160px; height: 40px; border-radius: 5px; background-color: #c1267d; border: none; color: #fff; margin: 0 4px; }
.form-footer .btn-transparent{ width: auto; height: auto; background-color: transparent; color: var( --blue-text ); white-space: nowrap; }
.form-footer button:hover{ background-color: #b67aff; }
.form-footer .btn-transparent:hover{ background-color: transparent; color: var( --orange ); }
/* Sub Page Banner */
.subpage-banner{ width: 100%; height: 200px; margin: 0 0 10px; display: inline-block; position: relative; }
.subpage-banner.size-sm{ height: 150px; }
.subpage-banner .banner-panel{ width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: var( --bg-color-light ); box-shadow: 0 1px 0 var( --white-10 ); }
.subpage-banner .img-panel{ width: 40%; height: 100%; }
.subpage-banner.size-sm .img-panel{ width: 60%; }
.subpage-banner .img-panel .banner-img{ height: 100%; }
.subpage-banner .info-panel{ width: 60%; height: 100%; color: var( --white ); position: relative; z-index: 2; background-color: var( --bg-color-light ); padding: 0 30px 0 10px; transition: 0.3s; box-shadow: -30px 0 100px rgba(13, 129, 222, 0.75); }
.subpage-banner .info-panel:before{ width: 200px; height: 100%; top: 0; left: -50px; background-color: var( --bg-color-light ); border-radius: 50%; z-index: -1; }
.subpage-banner .info-panel p{ color: var( --white-25 ); font-size: 12px; }
.subpage-banner .info-panel .read-more{ width: 130px; height: 40px; margin: 10px 0 0; box-shadow: 0 0 20px rgba(255, 170, 114, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); }
.subpage-banner .category-panel{ width: 70px; height: 70px; border-radius: 10px; position: absolute; left: 20px; bottom: 20px; background-color: #15243a; box-shadow: 0 0 0 3px var( --white-25 ), inset 0 0 5px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 1); z-index: 4; }
.subpage-banner .category-panel lord-icon{ width: 50px; height: 50px; }

/* Atttendance */
.calendar-thing{ border-radius: 10px; background-image: linear-gradient(#017bc4,#08558d); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); padding: 2px 5px 5px; }
.calendar-thing .calendar-inner{ width: 120px; height: 120px; position: relative; flex-flow: column; }
.calendar-thing .calendar-h{ width: 100%; min-height: 20px; background-color: #094b87; border-radius: 8px 8px 0 0; position: relative; }
.calendar-thing .calendar-h:before,
.calendar-thing .calendar-h:after{ width: 10px; height: 20px; border-radius: 5px; background-image: linear-gradient(#7e7e7e,#e6e6e6,#ababab,#e5e5e5,#7a7c7b); top: -8px; }
.calendar-thing .calendar-h:before{ left: 15px; }
.calendar-thing .calendar-h:after{ right: 15px; }
.calendar-thing .calendar-m{ width: 100%; min-height: 25px; background-color: #57585c; margin: 1px 0 0; color: #fff; font-size: 12px; }
.calendar-thing .calendar-d{ width: 100%; height: 100%; background-color: #fff; margin: 1px 0 0; color: #57585c; font-size: 50px; font-family: var( --myriadbold ); border-radius: 0 0 8px 8px; }
.calendar-info .calendar-panel{ padding: 20px 20px 20px 30px; background-color: var( --white-05 ); border-radius: 0 10px 10px 0; }
.calendar-info .calendar-panel p{ font-size: 14px; position: relative; padding: 0 0 0 20px; }
.calendar-info .calendar-panel p:before{ width: 5px; height: 5px; border-radius: 4px; background-color: var( --orange ); left: 0; top: 0; bottom: 0; margin: auto 0; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.25); }
.attendance-nav{ color: var( --white ); }
.attendance-nav .nav-btn{ width: auto; height: 30px; background-color: transparent; border: solid 1px var( --white-25 ); color: var( --white-25 ); font-size: 14px; padding: 0 15px; }
.attendance-nav .nav-btn:first-child{ border-right: none; border-radius: 5px 0 0 5px; }
.attendance-nav .nav-btn:last-child{ border-radius: 0 5px 5px 0; }
.attendance-nav .nav-btn:hover{ color: var( --orange ); }

/* Calendar */
.attendance-calendar{ width: 100%; margin: 30px 0 0; }
.attendance-calendar th{ color: #fff; font-size: 14px; font-weight: normal; text-align: center; padding: 10px 0; background-color: rgba(0, 0, 0, 0.4); }
.attendance-calendar td{ width: 14.28%; height: 120px; text-align: center; background-color: rgba(255, 255, 255, 0); border: solid 1px var( --white-10 ); position: relative; cursor: pointer; transition: 0.3s; z-index: 1; }
.attendance-calendar td:hover{ background-color: #13151a; background-color: rgba(255, 255, 255, 0.03); }
.attendance-calendar td.empty{ pointer-events: none; background-color: rgba(255, 255, 255, 0.02); }
.attendance-calendar td .date{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 50%; color: var( --white ); font-size: 12px; position: absolute; left: 5px; top: 5px; }
.attendance-calendar td.today:before{ content: ''; width: calc( 100% + 10px ); height: calc( 100% + 10px ); background-image: linear-gradient(#57a1f2,#2c598b); box-shadow: 0 5px 10px rgba(133, 191, 255, 0.15); border-radius: 10px; position: absolute; left: -5px; top: -5px; z-index: -1; }
.attendance-calendar td.today:after{ content: ''; width: calc( 100% - 45px ); height: 2px; position: absolute; top: 13px; right: 5px; border-radius: 2px; background-color: rgba(255, 255, 255, 1); }
.attendance-calendar td.today .date{ top: 0; color: #fff; font-size: 20px; font-family: var( --boxedbold ); }
.attendance-calendar td.empty .date{ color: var( --white-25 ); }
.attendance-calendar td .info{ width: 100%; position: absolute; padding: 5px; text-align: left; left: 0; bottom: 0; }
.attendance-calendar td .info .tag{ width: 100%; height: 32px; display: block; margin: 5px 0 0; padding: 0 12px 0 0; font-size: 10px; background-color: var( --blue ); }
.attendance-calendar td .info .tag.bg-orange{ background-color: var( --orange ); }
.attendance-calendar td .info .tag .icon-panel{ width: 32px; height: 100%; background-color: rgba(0, 0, 0, 0.25); margin-right: 8px; color: rgba(255, 255, 255, 0.5); font-size: 14px; }

/* Pagination */
.pagination{ margin:30px 0 0; }
.pagination li{ float:left; }
.pagination>li>a{ width:30px; height:30px; color:#fff; text-decoration:none; background-color: var( --white-10 ); display:flex; align-items:center; justify-content:center; margin:0 3px; border-radius:3px; position:relative; z-index:1; transition:0.3s; overflow:hidden; }
.pagination .turn-pg a{ font-size:12px; margin:0 13px; }
.pagination>li>a:hover{ color:#fff; background-color: var( --blue ); }
.pagination .active{ color:#fff; background-color: var( --orange ); }
.pagination .active:hover{ background-color: var( --orange ); }

/* BS Table */
.bs-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.bs-table thead th{ height: 44px; color: #fff; text-align: center; background: rgb(42, 15, 86); border-bottom: solid 4px var( --bg-color); font-weight: normal; }
.bs-table thead th:first-child{ border-radius: 10px 0 0 10px; }
.bs-table thead th:last-child{ border-radius: 0 10px 10px 0; }
.bs-table tr{ cursor: pointer; }
.bs-table tr td{ height: 50px; color: #0a0b0d; font-size: 15px; text-align: center; padding: 1px; transition: 0.3s; background-color: #fff; }
.bs-table tr:nth-child(even) td{ background-color: #e5e5e5; }
.bs-table tr:first-child td:first-child{ border-radius: 10px 0 0 0; }
.bs-table tr:first-child td:last-child{ border-radius: 0 10px 0 0; }
.bs-table tr:last-child td:first-child{ border-radius: 0 0 0 10px; }
.bs-table tr:last-child td:last-child{ border-radius: 0 0 10px 0; }
.bs-table tr:hover td{ background-color: ; }
.bs-table tr.active td{ background-color: ; }
.bs-table tr td a{ color: #0a0b0d; font-size: 12px; transition: 0.3s; display: inline-block; vertical-align: middle; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.bs-table tr .count-td{ width: 10%; }
.bs-table tr .count-td .count-icon{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 50%; background-image: linear-gradient(#a53cb1, #7950c5); font-size: 10px; }
.bs-table tr .title-td{ text-align: left; padding-left: 20px; max-width: 590px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-table tr .date-td{ width: 20%; color: rgba(255, 255, 255, 0.5); }
.bs-table td .level-txt{ display: inline-block; width: 45px; text-align: left; }
.bs-table tr .nav-td{ width: 30px; }
.bs-table tr td .delete-btn{ background-color: transparent; border: none; color: var( --red-dark); font-size: 14px; transition: 0.3s; }
.bs-table tr td .delete-btn:hover{ color: var( --orange-dark ); }
.bs-table tr td .nav-btn{ background-color: transparent; border: none; position: relative; }
.bs-table tr td .nav-btn i{ position: relative; color: rgba(0, 0, 0, 0.75); font-size: 18px; transition: 0.3s; transform: rotate(0deg); }
.bs-table tr:hover td .nav-btn i{ color: #c42d12; }
.bs-table tr.active td .nav-btn i{ transform: rotate(180deg); }
.bs-table tr td .plus-btn{ width: 16px; height: 16px; background-color: var( --blue ); border: none; border-radius: 50%; color: #fff; font-size: 12px; padding: 0 0 0; display: inline-block; vertical-align: middle; position: relative; }
.bs-table tr td .plus-btn:hover{ background-color: var( --red-dark); }
.bs-table tr td .plus-btn:before,
.bs-table tr td .plus-btn:after{ content: ''; width: 2px; height: 50%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; position: absolute; background-color: #fff; transition: 0.3s; }
.bs-table tr td .plus-btn:after{ transform: rotate(90deg); }
.bs-table tr.active td .plus-btn:before{ height: 0; }
.new-icon{ width:14px; height:14px; display:inline-block; vertical-align: middle; color:#fff; font-size:8px; border-radius:3px; padding:1px 0; background-color: var( --red-dark ); text-align:center; margin-left:3px; }

/* With Depth */
.with-depth thead th{ border-radius: 10px; }
.with-depth thead th:first-child{ border-radius: 10px; }
.with-depth thead th:last-child{ border-radius: 10px; }
.norm-table thead th{ border-radius: 0; }
.norm-table thead th:first-child{ border-radius: 10px 0 0 10px; }
.norm-table thead th:last-child{ border-radius: 0 10px 10px 0; }
.with-depth tr:nth-child(4n + 1) td{ background-color: #e5e5e5; }
.with-depth tr:nth-last-child(2) td:first-child{ border-radius: 0 0 0 10px; }
.with-depth tr:nth-last-child(2) td:last-child{ border-radius: 0 0 10px 0; }
.with-depth tr td{ font-size: 14px; }
.with-depth tr .date-td{ width: 20%; color: #000; }
.with-depth tr .date-td span{ color: #000; }
.with-depth .message-content{ display: none; margin: 3px 0; }
.with-depth tr.depth-click{ cursor: pointer; }
.with-depth tr.dropdown{ background-color: transparent; }
.with-depth tr.dropdown td{ padding: 0; border: none; height: auto; }
.with-depth tr.dropdown td{ background-color: transparent; border: none; }
.with-depth tr.dropdown:hover td{ background-color: transparent; border: none; }

/* Message Content */
.message-content{ width: 100%; border: 1px solid var( --white-15 ); background-color: #fff; margin: 5px 0 0; padding: 10px; border-radius: 5px; }
.message-content .inner-container{ width: 100%; min-height: 200px; max-height:500px; color: #0a0b0d; white-space: pre-wrap; text-align: left; overflow-y: auto; padding: 5px 10px; }
.message-content.dark-bg{ background-color: #393d45; }
.message-content.dark-bg .inner-container{ color: var(--white); font-size: 14px; }
.light-theme .message-content.dark-bg{ background-color: #ffffff; }

/* Level Information */
.level-information{ width: 100%; height: 80px; float: left; display: flex; position: relative; margin-bottom: 10px; border-radius: 3px; background-color: var( --white-05 ); }
.level-information .container{ width: auto; height: 100%; float: left; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0 20px !important; }
.level-information .container .inner{ width: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.level-information .container span{ color: #fff; font-size: 14px; white-space: nowrap; }
.level-information .container .labels{ margin-right: 10px; }
.level-information .container .amount{ color: #efb51d; font-size: 18px; display: inline-block; position: relative; margin: 0; vertical-align: middle; }
.level-information .point-form{ width: 310px; height: 100%; float: right; display: flex; align-items: center; justify-content: center; padding: 0 125px 0 5px; position: relative; }
.level-information .point-form input{ width: 100%; height: 38px; border-radius: 1px; padding: 0 5px; color: #000; font-size: 12px; background-color: #ffffff; border: none; border-radius: 5px; }
.level-information .point-form input::-webkit-input-placeholder{ color: #000; }
.level-information .points-btn{ width: 110px; height: 38px; color: #fff; font-size: 12px; white-space: nowrap; position: absolute; right: 10px; }
.level-information .points-btn:hover{ background-color: #e4127e; }

/* Sports Page */
.sports-board{ width: 100%; }
.sports-board .header{ width: 100%; height: 50px; background-color: var( --bg-color-dark ); display: flex; align-items: center; justify-content: center; padding: 0 10px 0 15px; }
.sports-board .header .more-btn{ width: 90px; height: 24px; margin-left: auto; color: #fff; transition: 0.3s; text-decoration: none; }
.sports-board .header .more-btn:hover{ background-color: var( --red-dark); }
.sports-board .bs-ul{ width: 100%; list-style: none; margin-bottom: 0; width: auto; display: block; padding: 0; }
.sports-board .bs-ul li{ width: 100%; height: auto; display: flex; flex-shrink: 0; list-style: none; margin: 1px 0 0; }
.sports-board .bs-ul li div{ height: 40px; display: flex; align-items: center; justify-content: center; position: relative; color: var( --white ); font-size: 12px; background-color: var( --bg-color-light ); margin-right:1px; }
.sports-board .bs-ul li:nth-child(odd) div{ width: 100%; height: 35px; justify-content: flex-start; padding: 0 15px; background-color: var( --bg-blue ); }
.sports-board .bs-ul li .date-td{ width: 22%; }
.sports-board .bs-ul li .team-td{ width: 35%; }
.sports-board .in-play li .team-td{ width: 40%; }
.sports-board .bs-ul li .vs-td{ width: 11%; color: var( --yellow); }
.sports-board .in-play li .vs-td{ width: 20%; }
.sports-board .bs-ul li .vs-td .score{ width: 30px; height: 24px; background-color: var( --white-03 ); border: solid 1px var( --white-03 ); border-radius: 3px; color: var( --red ); }
.sports-board .bs-ul li .vs-td .vs{ margin: 0 15px; }

/* Sports List */
.sports-list .bs-ul{ display: block; }
.sports-list .bs-ul li{ width: 100%; display: block; border-bottom: solid 1px var( --white-05 ); }
.sports-list .bs-ul li:Last-child{ border-bottom: none; }
.sports-list .bs-ul li a{ width: 100%; height: 36px; color: var( --white-50 ); font-size: 12px; padding: 0 10px; }
.sports-list .bs-ul li a .icon-panel{ width: 20px; margin-right: 18px; }

/* Betting Slip */
.betting-slip{ font-size: 12px; display: none; }
.betting-slip.active{ display: block; animation: betslipToggleLeft 0.5s ease 1 forwards; }
@keyframes betslipToggleLeft{
	0%{ opacity: 0; transform: translateX(-50%); }
	100%{ opacity: 1; transform: translateX(0); }
}
.betslip-myaccount{ font-size: 12px; display: none; min-height:615px; }
.betslip-myaccount.active{ display: block; animation: betslipToggleRight 0.5s ease 1 forwards; }
@keyframes betslipToggleRight{
	0%{ opacity: 0; transform: translateX(50%); }
	100%{ opacity: 1; transform: translateX(0); }
}
.betslip-myaccount .account-information.active{ display: block; }
.cart-option{ height: 40px; border-radius: 5px; background-color: var( --bg-color-dark ); }
.cart-option .close-sb-btn{ color: var( --red ); border: none; background-color: transparent; font-size: 12px; }
.cart-option .close-sb-btn i{ font-size: 14px; }
.cart-option .cart-switch{ font-size: 12px; color: var( --blue-white ); }

/* Betting Slip Header */
.betslip-header { height: 50px; }
.betslip-header button{ width: 50%; height: 100%; color: var( --blue-white ); position: relative; border: none; background-color: var( --white-03 ); border-left: solid 1px rgba(0, 0, 0, 0.3); border-bottom: solid 1px rgba(0, 0, 0, 0.3); }
.betslip-header button:first-child{ border-left: none; }
.betslip-header button:hover{ color: var( --orange ); }
.betslip-header button:before{ width: 0; height: 2px; left: 0; right: 0; bottom: 1px; background-color: var( --orange ); opacity: 0; }
.betslip-header button.active:before{ width: calc( 100% - 20px ); opacity: 1; }
.betslip-header button.active { background-color: transparent; border-bottom: none; color: var( --white ); }

/* Betslip Panel */
.betting-slip .w-border{ border-top: solid 1px rgba(255, 255, 255, 0.1); border-bottom: solid 1px rgba(255, 255, 255, 0.1); }
.betting-slip .bet-amount .col-4{ padding: 0 4px; }
.betting-slip .bet-amount .col-8{ padding: 0 2px; }
.betting-slip .betslip-nav{ margin: 0 -15px; }
.betting-slip .bet-amount input{ width: calc( 100% - 35px ); height: 30px; border: none; border-radius: 2px; margin-right: 5px; background-color: rgba(0, 0, 0, 0.3); padding: 0 10px; color: #fff; }
.betting-slip .bet-amount button{ width: 30px; height: 28px; border: none; border-radius: 2px; }
.betting-slip .betslip-nav .col-4{ padding: 2px; }
.betting-slip .betslip-nav button{ width: 100%; height: 30px; border: none; background-color: var( --yellow ); color: #000; border-radius: 2px; }
.betting-slip .betslip-nav button:hover{ background-color: var( --red ); color: #fff; }
.betting-slip .betslip-footer button{ height: 35px; flex: 1 1 0px; margin: 0 3px; border-radius: 2px; }

/* My Bets */
.no-bet-yet{ display: none; }
.no-bet-yet.active{ display: block; }
.my-bets .header{ padding: 0 10px 15px; border-bottom: solid 1px var( --white-05 ); position: relative; }
.my-bets .header:before{ width: 80px; height: 2px; background-color: var( --orange ); position: absolute; left: 0; bottom: -1px; }
.my-bets .header .btn-grp button { background-color: transparent; border: none; font-size: 14px; color: var( --blue-white ); margin-left: 10px; }
.my-bets .header .btn-grp button:hover { color: var( --red ); }

/* Bettinglist Slip */
.betlist-slip-panel{ width: 100%; border-radius: 5px; background-color: #fff; padding: 8px 8px 8px 5px; margin: 0 0 5px; }
.betlist-slip-panel:first-child{ margin-top: 10px; }
.betlist-slip-panel .odd-panel{ width: 50px; height: 34px; border-radius: 3px; background-color: var( --blue ); }
.betlist-slip-panel .info-panel{ width: calc( 100% - 68px); margin-left: 8px; }
.betlist-slip-panel .info-panel .text{ width: 100%; display: inline-block; color: #000; text-align: left; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betlist-slip-panel .info-panel .text:first-child{ font-family: BoxedBold; }
.betlist-slip-panel .info-panel .text:last-child{ color: #5a5a5a; }
.betlist-slip-panel .delete-btn{ width: 15px; height: 15px; background-color:transparent; border: none; transition:0.3s; outline:none; position: relative; }
.betlist-slip-panel .delete-btn:before,
.betlist-slip-panel .delete-btn:after{ content:''; width:1px; height:100%; background-color:#5a5a5a; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transform:rotate(45deg); transition:0.5s; }
.betlist-slip-panel .delete-btn:after{ transform:rotate(-45deg); }
.betlist-slip-panel .delete-btn:hover:before{ transform:rotate(135deg); background-color:red; }
.betlist-slip-panel .delete-btn:hover:after{ transform:rotate(-135deg); background-color:red; }

/* Dividend Options */
.dividend-option{ background-color: var( --bg-color-dark ); padding: 15px 20px; text-align: left; }
.dividend-option .options{ font-size: 12px; color: var( --white-50 ); margin: 0 0 12px; cursor: pointer; }
.dividend-option .options.active{ color: var( --white ); }
.dividend-option .options:last-child{ margin: 0; }
.dividend-option .options .check-box{ display: inline-block; position: relative; width: 18px; height: 18px; border-radius: 50%; border: solid 1px var( --white-25 ); margin-right: 8px; }
.dividend-option .options .check-box:before{ content: ''; width: 60%; height: 60%; border-radius: 50%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: var( --orange ); opacity: 0; transition: 0.3s; }
.dividend-option .options.active .check-box:before{ opacity: 1; }

/* Sports Header */
.sports-title{ color: var(--white); font-size: 16px; }
.sports-title i{ color: var( --orange ); font-size: 18px; }
.sports-sort ul li{ padding: 0 15px; border-right: solid 1px var( --white-10 ); }
.sports-sort ul li:last-child{ border-right: none; }
.sports-sort ul li a{ font-size: 12px; color: var( --white-50 ); }
.sports-sort ul li a:hover{ color: var( --white ); }
.sports-sort ul li a.active{ color: var( --blue-white ); }
.light-theme .sports-sort ul li a.active{ color: var( --white ); }

/* Betting Table */
.betting-table{ width: 100%; margin: 0 0 10px; position: relative; }
.betting-table.disable-bet{ pointer-events: none; }
.betting-table .no-bet{ width: 100%; height: calc( 100% + 5px); display: none; position: absolute; left: 0; top: -4px; z-index: 2; background-color: rgba(22, 33, 51, 0.5); border-radius: 5px; }
.betting-table .no-bet .lock-icon{ font-size: 34px; width: 80px; height: 80px; background-color: rgba(0, 0, 0, 0.25); border: solid 1px #2e3e58; border-radius: 50%; margin-right: 205px; }
.disable-bet .no-bet{ display: block; }
.betting-table .betting-title{ width: calc( 100% - 6px ); height: 35px; background-color: var( --bg-color ); display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 1; padding: 0 20px; margin: 0 auto 5px; border-bottom: solid 1px var( --white-10 ); border-radius: 5px; color: var(--white); }
.betting-table .betting-title .flag-icon{ max-width: 15px; margin-right: 5px; }
.betting-table .betting-title .sports-icon{ max-width: 16px; margin-right: 5px; }
.betting-table .betting-title .divider{ width: 1px; height: 50%; background-color: var( --white-15 ); }
.betting-table .betting-title .date{ font-size: 12px; }
.betting-list .bs-ul{ width: 100%; border-collapse: separate; border-spacing: 3px 0; margin: 0 0 3px; }
.betting-list .date-td{ width: 13%; color: var( --blue-text ); padding-right: 5px; }
.betting-list .team-td{ width: 36%; }
.betting-list .vs-td{ width: 7%; }
.betting-list .vs-td.disable{ pointer-events: none; }
.betting-list .vs-td.dark-bg .btn-bet{ background-color: #2e3c4c; color: var( --orange ); }
.betting-list .status-td{ width: 8%; }
.betting-list .btn-bet{ width: 100%; height: 35px; background-color: var( --bg-color-gray ); border: none; border-radius: 4px; vertical-align: middle; color: var(--white); font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.2); }
.betting-list .btn-bet:hover{ background-color: #6c7f94; }
.betting-list .btn-bet.active{ background-color: #ffd129; }
.betting-list .btn-bet.active *{ color: #000 !important; }
.betting-list .btn-bet .team{ width: 80%; display: inline-block; position: relative; }
.betting-list .btn-bet .team .team-icon{ position: absolute; max-width: 20px; }
.betting-list .btn-bet .team .team-icon{ position: absolute; max-width: 20px; top: 50%; transform:translateY(-50%); }
.betting-list .btn-bet .team.text-left{ padding-left: 24px; }
.betting-list .btn-bet .team.text-left .team-icon{ left: -3px; }
.betting-list .btn-bet .team.text-right{ padding-right: 24px; }
.betting-list .btn-bet .team.text-right .team-icon{ right: -3px; }
.betting-list .btn-bet .team .text{ max-width: 100%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.betting-list .btn-bet .odd{ width: 20%; display: inline-block; color: var(--white); }

/* Bonus Button */
.bonus-table li{ width: 33.33%; }
.betting-list .bonus-btn{ height: 50px; background-color: #40eb2c; color: #112b20; font-size: 14px; }
.betting-list .bonus-btn span{ transition: 0s; }
.betting-list .bonus-btn i{ font-size: 12px; }
.betting-list .bonus-btn.active i{ color: #64310f !important; }
.betting-list .bonus-btn:hover{ background-color: #2b81de; color: #fff; }
.betting-list .bonus-btn.active{ background-color: var( --orange ); }
.betting-list .bonus-btn.active *{ color: #fff !important; }
.betting-list .bonus-btn .team.text-left{ padding-left: 0; }
.betting-list .bonus-btn .bonus-tag{ width: 40px; height: 40px; border-radius: 50%; background-color: #112b20; color: #fff; margin-left: auto; font-size: 12px; transition: 0.3s; }
.betting-list .bonus-btn:hover .bonus-tag{ background-color: #0c2e52; }
.betting-list .bonus-btn.active .bonus-tag{ background-color: #64310f; }

/* Betting List Button */
.betlist-btn{ width: 100%; height: 35px; border-radius: 4px; border: none; background-color: #d74949; color: #fff; font-size: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2); }
.betlist-btn:hover{ background-color: #c91111; }
.betlist-btn i{ font-size: 12px; transition: 0.3s; }
.betlist-btn.opened{ background-color: #c91111; }
.betlist-btn.opened i{ transform: rotate(180deg); }
.betting-title .betlist-btn{ width: 55px; height: 25px; padding: 0 5px; font-size: 12px; margin: 0 0 0 10px; border-radius: 2px; }

/* Betting Dropdown */
.betting-dropdown{ border-radius: 5px; background-color: rgba(0, 0, 0, 0.25); margin: 5px 0 0; display: none; }
.betting-dropdown .betting-list{ margin: 0 0 15px; }
.betting-dropdown iframe{ width: 100%; }
.betting-dropdown .betting-title{ font-size: 12px; background-color: var( --bg-color-dark ); }
.btn-bet>.hva-txt{ display: table-cell; vertical-align: middle; overflow-x: hidden; text-overflow: ellipsis; font-size:12px; padding:0; }
.btn-bet>.hva-txt:first-child{ width: 54%; float: left; }
.btn-bet>.hva-txt:nth-child(2){ width: 22%; float: left; color: #ffff00; }
.btn-bet>.hva-txt:nth-child(3){ width: 24%; float: right; }

/* Live Indicator */
.live-indicator{ margin-right: 10px; }
.live-indicator .bullet{ width: 8px; height: 8px; display: inline-block; background-color: var( --red ); border-radius: 50%; margin-left: 10px; position: relative; }
.live-indicator .bullet:before,
.live-indicator .bullet:after{ width: 100%; height: 100%; left: 0; top: 0; border: solid 1px var( --red ); border-radius: 50%; }
.live-indicator .bullet:before{ animation: liveBeforeAnim 1.5s ease infinite; }
@keyframes liveBeforeAnim{
	0%{ opacity: 0; transform: scale(0); }
	25%{ opacity: 1; transform: scale(1.8); }
	50%{ opacity: 0; transform: scale(1.8); }
	100%{ opacity: 0; transform: scale(1.8); }
}
.live-indicator .bullet:after{ animation: liveAFterAnim 1.5s ease infinite; }
@keyframes liveAFterAnim{
	0%{ opacity: 0; transform: scale(0); }
	25%{ opacity: 0; transform: scale(0); }
	50%{ opacity: 1; transform: scale(1.8); }
	75%{ opacity: 0; transform: scale(1.8); }
	100%{ opacity: 0; transform: scale(1.8); }
}

/* UPCOMING MATCHES */
.upcoming-match{ width: calc( 100% - 140px); max-width: 900px; margin: 0 auto 30px; background-color: rgba(0, 0, 0, 0.2); padding:15px 0; border-radius:5px; border: solid 1px var( --white-05 ); }
.upcoming-match:last-child{ margin-bottom: 0; }
.upcoming-match .info-panel{ width: 60%; height: 35px; position: relative; background-color: var( --bg-color-dark ); z-index: 1; margin: 0 auto; font-size: 12px; color: var(--white); }
.upcoming-match .info-panel:before,
.upcoming-match .info-panel:after{ width: 100%; height: 100%; background-color: var( --bg-color-dark ); z-index: -1; top: 0; }
.upcoming-match .info-panel:before{ left: -15px; transform: skew(15deg); }
.upcoming-match .info-panel:after{ right: -15px; transform: skew(-15deg); }
.upcoming-match .info-panel i{ font-size: 14px; color: #d74949; }
.upcoming-match .info-panel img{ max-width: 16px; }
.upcoming-match .date-panel{ width: 50%; height: 30px; position: relative; background-color: #d74949; z-index: 1; margin: 0 auto; font-size: 12px; }
.upcoming-match .date-panel:before,
.upcoming-match .date-panel:after{ width: 100%; height: 100%; background-color: #d74949; z-index: -1; top: 0; }
.upcoming-match .date-panel:before{ left: -15px; transform: skew(15deg); }
.upcoming-match .date-panel:after{ right: -15px; transform: skew(-15deg); }
.upcoming-match .team-panel{ width: 100%; position: relative; background-color: var( --bg-color-gray ); z-index: 1; color: var(--white); }
.upcoming-match .team-panel:before,
.upcoming-match .team-panel:after{ width: 100%; height: 100%; background-color: var( --bg-color-gray ); z-index: -1; }
.light-theme .upcoming-match .team-panel{ background-color: #e7e7e7; }
.light-theme .upcoming-match .team-panel:before,
.light-theme .upcoming-match .team-panel:after{ background-color: #e7e7e7; }
.upcoming-match .team-panel:before{ left: -15px; transform: skew(15deg); }
.upcoming-match .team-panel:after{ right: -15px; transform: skew(-15deg); }
.upcoming-match .team-panel .team{ width: 50%; height: 40px; }
.upcoming-match .team-panel .team img{ max-width: 80px; }
.upcoming-match .team-panel .team:first-child img{ margin: 0 15px 0 -50px; }
.upcoming-match .team-panel .team:last-child img{ margin: 0 -50px 0 15px; }
.upcoming-match .team-panel .vs{ width: 40px; height: 100%; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; background-color: #1e2b3a; z-index: 1; font-size: 20px; }
.upcoming-match .team-panel .vs:before,
.upcoming-match .team-panel .vs:after{ width: 100%; height: 100%; background-color: #1e2b3a; z-index: -1; top: 0; }
.light-theme .upcoming-match .team-panel .vs{ background-color: #ffffff; }
.light-theme .upcoming-match .team-panel .vs:before,
.light-theme .upcoming-match .team-panel .vs:after{ background-color: #ffffff; }
.upcoming-match .team-panel .vs:before{ left: -15px; transform: skew(15deg); }
.upcoming-match .team-panel .vs:after{ right: -15px; transform: skew(-15deg); }

/* Realtime Panel */
.realtime-table .betting-title{ width: calc( 100% - 211px ); margin: 0 auto 0 3px; padding-right: 10px; }
.realtime-panel{ display: flex; align-items: center; justify-content: center; margin: 10px 0 5px; position: relative; }
.realtime-panel .realtime-score{ width: calc( 100% - 205px ); margin-right: auto; }
.realtime-panel .realtime-score .team-icon{ max-width: 36px; }
.realtime-panel .realtime-score .score-box{ width: 45px; height: 30px; background-color: #0f1724; border: solid 1px #314059; display: inline-block; position: relative; margin: 0 20px; color: var( --yellow ); font-size: 16px; padding-top: 2px; border-radius: 3px; }
.realtime-panel.changed .score-box{ background-color:#e06257; border:solid 1px #e06257; color:#fff; }
.realtime-panel .betting-list .btn-bet .team.text-left{ padding-left: 0; }
.realtime-panel .betting-list .btn-bet .team.text-right{ padding-right: 0; }

/* Realtime Livebox */
.realtime-livebox{ width: 200px; height: calc( 100% + 42px); position: absolute; right: 3px; top: -45px; background-color: var( --bg-blue ); font-size: 12px; border-radius: 5px; overflow: hidden; }
.realtime-livebox .title-box{ width: 100%; height: 34px; background-color: var( --blue ); }
.realtime-livebox .time-box{ width: 100%; height: calc( 100% - 65px ); position: absolute; left: 0; top: 35px; }
.realtime-livebox .time-box .time{ font-size: 14px; }
.realtime-livebox .footer{ width: calc( 100% - 10px); height: 30px; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; border-top: solid 1px var( --white-10 ); color: var( --blue-white ); }

/* Page Indicator */
.page-indicator ul li{ padding: 0 15px; position: relative; }
.page-indicator ul li:first-child{ padding-left: 0; }
.page-indicator ul li:last-child{ padding-right: 0; }
.page-indicator ul li:after{ width: 1px; height: 75%; right: 0; top: 0; bottom: 0; margin: auto 0; background-color: var( --white-25 ); transform: rotate( 15deg ); }
.page-indicator ul li:last-child:after{ display: none; }
.page-indicator ul li a{ color: var( --blue-white ); font-size: 12px; }
.page-indicator ul li a:hover{ color: var( --white ); }
.page-indicator ul li a.active{ color: var( --white ); }
.page-indicator ul li a i{ color: var( --blue-white ); margin-right: 5px; }
.page-indicator ul li .active i{ color: var( --red ); }

/* Minigame */
.minigame-toggle{ width: 120px; height: 30px; font-size: 12px; }
.minigame-menu{ width:100%; background-color: var( --bg-gray ); }
.minigame-menu ul{ width: 100%; table-layout: fixed; }
.minigame-menu ul li{ position: relative; padding: 0 1px 0 0; }
.minigame-menu ul li:after{ content: ''; width: 1px; height: 60%; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; background-color: var( --white-10 ); }
.minigame-menu ul li:last-child:after{ display: none; }
.minigame-menu ul li a{ height: 50px; color: var(--white); }
.minigame-menu ul li a:hover{ color: var( --blue-text ); background-color: var( --bg-blue-light ); }
.minigame-menu ul li a.active{ background-color: var( --blue ); }
.minigame-container{ width:100%; background-color: var( --bg-color ); overflow: hidden; }
.minigame-container .minigame-panel{ width:auto; display:inline-block; vertical-align:top; overflow: hidden; position: relative; }
.minigame-container .minigame-panel:after{ content:''; width:100%; height:100%; border:solid 5px var( --bg-color ); border-bottom-width:12px; position:absolute; left:0; top:0; z-index:1; }
.minigame-betting .betting-title{ white-space: nowrap; overflow: hidden; }
.minigame-betting .betting-list .bs-ul{ table-layout: fixed; }
.minigame-betting .betting-list .btn-bet{ 
 height: 70px; flex-wrap: wrap; align-content: center; padding: 5px 0 0; }
.minigame-betting .betting-list .btn-bet .bet-info{ width: 80%; padding: 0 0 5px; border-bottom: solid 1px var( --white-10 ); }
.minigame-betting .betting-list .btn-bet.active .bet-info{ border-bottom-color: rgba(0, 0, 0, 0.5); }
.minigame-betting .betting-list .btn-bet .bet-percent{ width: 100%; margin: 5px 0 0; }
.betting-list .dog-icon{ max-width: 20px; }

/* No Betting */
.no-betting{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; background-color: rgba(0, 0, 0, 0.5); display: none; }
.no-betting.active{ display: block; }
.no-betting .icon-panel i{ font-size: 50px; animation: blinkAnim 2s ease infinite; }
@keyframes blinkAnim{
	0%{ opacity: 0.5; transform: rotate(0deg); }
	50%{ opacity: 1; }
	100%{ opacity: 0.5; transform: rotate(360deg); }
}

/* Iframe Menu */
.iframe-menu{ width: calc(100% - 6px); max-width: 800px; margin: 0 auto; }
.iframe-menu .bs-ul li button{ width: 100%; height: 40px; border: none; background-color: var(--bg-blue-light); color: #fff; border-right: solid 1px var(--bg-blue); }
.iframe-menu .bs-ul li button:hover{ background-color: var(--bg-blue); }
.iframe-menu .bs-ul li button.active{ background-color: var(--red); }

/* Footer Section */
.footer-section{ margin: 20px 0 0; background-color: var( --bg-color-dark );  padding: 20px 0 0; border-radius: 10px 10px 0 0; }
.footer-section .footer-list{ width: 100%; max-width: 420px; margin: 0 auto; }
.footer-section .footer-list .header{ width: 100%; padding: 43px 0; position: relative;  margin: 0 0 25px; text-align: left; }
.footer-section .footer-list .header:before{ width: 50px; height: 2px;  left: 0; bottom: -1px; }
.footer-section .footer-list .bs-ul{ width: 100%; display: block; }
.footer-section .footer-list .bs-ul li{ width: 100%; display: block; text-align: left; padding: 0 0 12px; }
.footer-section .footer-background-notice { background: url(/assets/img/bg/notice_bg.png);min-height:200px;width:404px;min-height:415px; }
.footer-section .footer-background-event { background: url(/assets/img/bg/event_bg.png);min-height:200px;width:409px;min-height:415px; }
.footer-section .footer-background table{ width:100%; }
.footer-section .footer-background table td.footer-table-title { width: 70%; text-align: left; padding-left:20px;}
.footer-section .footer-background table td.footer-table-date { width: 25%; text-align: left;}
.footer-section .customer-service .bs-ul li{ padding: 0 0 20px; }
.footer-section .footer-list .bs-ul li a{ color: var( --white-50 ); font-size: 12px; }
.footer-section .footer-list .bs-ul li a:hover{ color: var( --white ); }
.footer-section .footer-list .bs-ul li a .icon-panel{ margin-right: 10px; min-width:40px; height:25px; }
.footer-section .footer-list .bs-ul li a .icon-panel img{ width:25px; }
.footer-section .provider-carousel .carousel-inner{ margin: 0 0 20px; }
.footer-section .provider-carousel .carousel-indicators{ position: relative; margin: 0; }
.footer-section .provider-carousel .carousel-indicators li{ width: 20px; height: 4px; border-radius: 2px; border:none; opacity: .5; }
.footer-section .provider-carousel .carousel-indicators li:hover{ opacity: 1; }
.footer-section .provider-carousel .carousel-indicators .active{ width: 30px; opacity: 1; background-color: var( --orange ); }
.copyright-section{ background-color: var( --bg-color-darker ); border-top: solid 1px var( --white-10 ); color: var( --white-25 ); font-size: 12px; }

/* Roulette Panel */
.roulette-panel{ width: 100%; position: relative; }
.roulette-panel .wheel-item{ width: 100%; max-width: 1100px; height: 100px; margin: 0 auto; background-image: url(/assets/img/roulette/roulette-item.png); background-size: auto 100px; background-repeat: repeat-x; background-position: center; transition: 0s; }
.roulette-panel .wheel-item.active{ transition: 5s; }
.roulette-panel .wheel-item:before,
.roulette-panel .wheel-item:after{ width: 25%; height: 100%; top: 0; z-index: 2; }
.roulette-panel .wheel-item:before{ left: 0; background-image: linear-gradient(to right, var(--bg-color-light), transparent); }
.roulette-panel .wheel-item:after{ right: 0; background-image: linear-gradient(to left, var(--bg-color-light), transparent); }
.roulette-panel .wheel-marker{ width: 4px; height: calc(100% + 8px); position: absolute; top: -4px; left: 0; right: 0; margin: 0 auto; background-color: #d0021b; transition: 0.3s; opacity: 0; }
.roulette-panel .wheel-marker.active{ opacity: 1; }
.roulette-panel .wheel-rolling{ width: 100%; height: 100%; left: 0; top: 0; position: absolute; background-color: rgba(22, 33, 51, 0.8); opacity: 0; transition: 0.3s; z-index: 3; color: var(--white); }
.roulette-panel .wheel-rolling.active{ opacity: 1; }
.roulette-panel .wheel-rolling .timer{ width: 100%; max-width: 50px; display: inline-block; text-align: left; font-size: 24px; }

/* Previous Roll */
.roulette-panel .previous-roll .text-gray{ margin-right: 10px; }
.roulette-panel .previous-roll .roll-list img{ max-width: 24px; }
.roulette-panel .last-roll{ margin-left: 20px; }
.roulette-panel .last-roll .text-gray{ margin-right: 5px; font-size: 12px; }
.roulette-panel .last-roll .bs-ul li{ padding: 0 5px; font-size: 12px; }
.roulette-panel .last-roll img{ max-width: 16px; }

/* Roulette Form */
.roulette-panel .betting-form{ width: 100%; margin: 20px 0 0; position: relative; }
.roulette-panel .betting-form .input-container{ width: 222px; height: 40px; background-color: var(--bg-color); border: solid 1px var(--white-10); position: relative; padding: 0 0 0 40px; }
.roulette-panel .betting-form .input-container i{ font-size: 20px; position: absolute; left: 10px; }
.roulette-panel .betting-form .input-container input{ width: 100%; height: 100%; background-color: transparent; border: none; color: var(--white); font-size: 18px; }
.roulette-panel .betting-form .btn-grp{ width: 500px; height: 40px; background-color: var(--bg-color); border: solid 1px var(--white-10); border-left: none; padding: 0 4px; }
.roulette-panel .betting-form .btn-grp li{ padding: 0 2px; }
.roulette-panel .betting-form .btn-grp li button{ width: 100%; height: 20px; font-size: 12px; border: none; border-radius: 2px; background-color: var(--bg-blue); color: var(--white-50); }
.roulette-panel .betting-form .btn-grp li button:hover{ background-color: #49699e; color: var(--white); }

/* Roulette Betting */
.roulette-betting{ width: 100%; max-width: 1170px; margin: 10px auto 0; }
.roulette-betting .place-bet{ width: calc(33.33% - 20px); margin: 0 10px; }
.roulette-betting .btn-bet{ width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 15px; border-radius: 5px; border: none; overflow: hidden; z-index: 1; position: relative; background-color: var( --bg-color-gray ); color: var( --white-50 ); font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 
 0 2px 2px rgba(0, 0, 0, 0.1); }
.roulette-betting .btn-bet *{ transition: 0s; }
.roulette-betting .btn-bet:hover{ color: rgba(255, 255, 255, 1); background-color: #6c7f94; }
.roulette-betting .btn-bet.active{ background-color: #ffd129; color: #000; }

.roulette-betting .btn-bet .coin-img{ width: 36px; margin-right: 8px; }
.roulette-avatar{ width: 22px; border-radius: 50%; overflow: hidden; }
.roulette-avatar img{ width: 100%; }
.roulette-rank{ width: 44px; height: 18px; border-radius: 4px; font-size: 12px; color: #000; display: flex; align-items: center; justify-content: center; margin: 0 8px; }
.roulette-rank .rank-img{ width: 16px; margin-right: 3px; }
.bg-rank-rust{ background-color: #aa9987; }
.bg-rank-bronze{ background-color: #d8a16e; }
.bg-rank-silver{ background-color: #d6e0ee; }
.bg-rank-gold{ background-color: #ffcb39; }
.bg-rank-diamond{ background-color: #0ec3ff; }
.roulette-betlist{ background-color: var( --bg-color-dark ); border-radius: 5px; border: solid 1px var(--white-10); }
.roulette-betlist .header{ border-bottom: solid 1px var(--white-05); padding: 10px 15px; font-size: 12px; color: var(--white); }
.roulette-betlist .header .fa-caret-down{ display: none; vertical-align: middle; transition: 0.3s; }
.roulette-betlist .header .fa-caret-down.opened{ transform: rotate(180deg); }
.roulette-betlist .bs-ul{ display: block; margin: 10px 0; }
.roulette-betlist .bs-ul li{ display: flex; align-items: center; justify-content: center; padding: 6px 15px; }
.roulette-betlist .bs-ul li .hva-left{ width: 75%; display: flex; align-items: center; justify-content: flex-start; }
.roulette-betlist .bs-ul li .username{ width: calc(100% - 70px); display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; color: var(--white-50); font-size: 12px; padding-left: 4px; }
.roulette-betlist .bs-ul li .data{ color: var(--white-50); font-size: 12px; }

/* Roulette Chat */
.chat-panel{ height: calc( 100% - 60px ); }
.chat-head{ padding: 8px 12px; border-radius: 5px; background-color: var(--bg-color); margin: 10px 0 5px; }
.chat-head .bullet{ width: 7px; height: 7px; display: inline-block; background-color: var( --green ); border-radius: 50%; margin-left: 10px; position: relative; margin-right: 8px; }
.chat-head .bullet:before,
.chat-head .bullet:after{ width: 100%; height: 100%; left: 0; top: 0; border: solid 1px var( --green ); border-radius: 50%; }
.chat-head .bullet:before{ animation: liveBeforeAnim 1.5s ease infinite; }
.chat-head .bullet:after{ animation: liveAFterAnim 1.5s ease infinite; }
.chat-box{ height: calc( 100% - 120px ); overflow-y: scroll; padding-right: 5px; }
.chat-box::-webkit-scrollbar{ width: 6px; background: var(--bg-color); border-radius: 4px; }
.chat-box::-webkit-scrollbar-thumb{ background: var( --bg-color-dark ); border: none }
.chat-content{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; padding: 7px 0; font-size: 12px; position: relative; }
.chat-content .roulette-avatar{ position: absolute; left: 0; top: 7px; }
.chat-content .chat-main{ padding: 0 0 0 27px; text-align: left; }
.chat-content .chat-main .roulette-rank{ height: auto; text-align: center; display: inline-block; margin: 0; }
.chat-content .chat-main .roulette-rank *{ display: inline-block; vertical-align: middle; }
.chat-content .chat-main .roulette-rank .rank-img{ margin-right: 0; }
.chat-content .chat-main .username{ margin-right: 3px; color: var(--white); }
.chat-content .chat-main .message{ overflow-wrap: break-word; color: var( --white-50 ); }
.chat-compose{ width: 100%; position: absolute; bottom: 0; left: 0; }
.chat-compose textarea{ width: 100%; height: auto; resize: none; border-radius: 2px; border: solid 1px var(--white-10); background-color: var(--bg-color); padding: 12px; color: #fff; }

/*=========================================================== M O D A L ===============================================================*/
.modal-dialog{ flex-wrap: wrap; align-content: center; margin:0 auto; }
.modal-logo{ width:100%; margin:0 0 20px; text-align:center; font-size:72px; font-weight:900; line-height:1; }
.modal-logo img{ max-width:100%; }
.modal-notice{ width:100%; margin:0 0 10px; padding:15px; border:1px solid rgba(0, 0, 0, 0.2); border-radius:10px; background-color:var( --bg-color-light ); background-clip:padding-box; box-shadow: 0 0 0 2px rgb(255, 255, 255, 0.1); font-weight:bold; text-align:left; word-wrap:break-word; }

.modal-backdrop{ background-color: #0b0210; }
.modal-backdrop.show{ opacity: .5; }
.modal{ padding-right: 0 !important; overflow-y: auto; }
.modal::-webkit-scrollbar{ width: 0; background-color: transparent; }
.modal::-webkit-scrollbar-thumb{ background-color: transparent; }
.modal-content{ background-color: var( --bg-color-light ); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10); }

/* Modal Close Button */
.modal-close-btn{ width:36px; height:36px; background-color:transparent; border: solid 1px var( --white-50 ); border-radius:50%; transition:0.3s; outline:none; position: absolute; top: 10px; right: 10px; z-index: 3; }
.modal-close-btn:before,
.modal-close-btn:after{ content:''; width:2px; height:calc(100% - 10px); background-color: var( --white-50 ); position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transform:rotate(45deg); transition:0.3s; }
.modal-close-btn:after{ transform:rotate(-45deg); }
.modal-close-btn:hover:before{ transform:rotate(135deg); background-color:var( --orange ); }
.modal-close-btn:hover:after{ transform:rotate(-135deg); background-color:var( --orange ); }

/* Modal Banner */
.modal-banner{ width: 100%; height: 160px; background-image: url(/assets/img/banner/login-banner.jpg); background-repeat: no-repeat; background-position: top left; padding: 0 30px 40px; }
.modal-banner .btn-orange{ width: 110px; height: 35px; margin: 5px 0 0; }

/* Modal Header */
.modal-header{ border: none; padding: 0; margin: -45px 0 0; }
.modal-header .title{ width: 100%; color: var( --black ); font-size: 20px; display: inline-block; text-align: center; }
.modal-header .sub-title{ font-family: var( --boxedlight ); }

/* Modal Body */
.modal-body{ padding: 0 15px 20px; z-index: 1; margin-top:50px; margin-left:50px; padding-left:0px; padding-right:0px; }
.modal-body:before{ width: 700px; height: 700px; border-radius: 50%; top: -80px; left: 50%; transform: translateX(-50%); z-index: -1; }
.modal-body .form-container{ margin: 30px auto 0; }
.modal-body .form-container .form-group{ margin-left:60px; }
.modal-body .form-group .infos{ flex-wrap: wrap; }
.modal-body .form-group .infos .captcha{ display:flex; width:100%; height:60px; margin-bottom:5px; background-color:transparent; border-radius:5px; border:none; }
.modal-body .form-group .infos .captcha img{ width:200px; height:100%; border-radius:5px; background-color:var( --white-05 ); border-radius:5px; border:solid 1px var( --white-05 ); }
.modal-body .form-group .infos .captcha button{ width:50px; height:calc(100% - 10px); margin:5px; }
.modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }

/* Login Modal */
.loginModal .modal-dialog{ max-width:360px;}
.loginModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.loginModal .modal-close-btn{ display:none; }
.loginModal .modal-body:before{ display:none; }
/* .loginModal .modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }
.loginModal .modal-body .form-footer button{ width: 100%; }
.loginModal .modal-body .form-footer .btn-transparent{ color: var( --orange ); margin: 30px 0 0; }
.loginModal .modal-body .form-footer .btn-transparent:hover{ color: var( --yellow ); } */

/* Join Code Modal */
.joinCodeModal .modal-dialog{ max-width:360px;}
.joinCodeModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.joinCodeModal .modal-close-btn{ display:none; }
.joinCodeModal .modal-body:before{ display:none; }
/* .joinCodeModal .modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }
.joinCodeModal .modal-body .form-footer button{ width: 100%; }
.joinCodeModal .modal-body .form-footer .btn-transparent{ color: var( --orange ); margin: 30px 0 0; }
.joinCodeModal .modal-body .form-footer .btn-transparent:hover{ color: var( --yellow ); } */

/* Join Modal */
.joinModal .modal-dialog{ max-width: 760px; }
.joinModal .modal-body:before{ display:none; }
.joinModal .modal-body .form-container{ max-width: 100%; }
.joinModal .modal-banner{ background-image: url(/assets/img/banner/join-banner.jpg); background-position: center center; padding-bottom: 70px; }
.joinModal .modal-banner .welcome-text{ color: var( --yellow ); font-family: var( --boxedbold ); margin: 0 0 5px; }
.joinModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.joinModal .modal-close-btn{ display:none; }

/* Light Theme */
.light-theme .gamelist-panel .gamelist-menu .bs-ul li a .icon-panel img{ filter: brightness(0); opacity: 0.5; }
.light-theme .gamelist-panel .gamelist-menu .bs-ul li a.active .icon-panel img{ filter: brightness(1); opacity: 1; }
.light-theme .gamelist-panel .gamelist-menu .bs-ul li a:hover .icon-panel img{ opacity: 1; }
.light-theme .gamelist-panel .gamelist-menu .bs-ul li a{ padding: 20px 40px; color: var( --white-50 ); }
.light-theme .gamelist-container .game-btn .game-info .g-logo{ background-color: var( --white-25 ); }
.light-theme .roulette-panel .wheel-rolling{ background-color: rgba(255, 255, 255, 0.8); }
.light-theme .roulette-betting .btn-bet{ background-color: #eef0f1; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.10); }
.light-theme .roulette-betting .btn-bet:hover{ background-color: #cccccc; }
.light-theme .roulette-betting .btn-bet.active{ background-color: #ffd129; }
.light-theme .betting-list .btn-bet{ background-color: #eef0f1; }
.light-theme .betting-list .btn-bet:hover{ background-color: #cccccc; }
.light-theme .betting-list .btn-bet.active{ background-color: #ffd129; }
.light-theme .betting-list .vs-td.dark-bg .btn-bet{ background-color: #e7e7e7; }
.modal-default .modal-banner{ height: 120px; background-image: url(/assets/img/modal-head.jpg); }
.messageModal .message-content{ background-color: var( --white-05 ); border-radius: 5px; border: solid 1px var( --white-05 ); }
.dark-table thead th{ background-color: rgba(0, 0, 0, 0.75); border-bottom: solid 4px var( --bg-color-light); }
.dark-table tr td{ background-color: rgba(255, 255, 255, 0.1); color: var(--white); }
.dark-table tr .date-td{ width: auto; color: var(--white); }
.dark-table tr:nth-child(4n + 1) td{ background-color: rgba(255, 255, 255, 0.05); }
.dark-table tr td .nav-btn i{ position: relative; color: var(--white-50); }
.dark-table .message-content{ border: 1px solid var( --white-15 ); background-color: rgba(0, 0, 0, 0.5); }
.dark-table .message-content .inner-container{ color: var(--white); }


.white-menu-bar {
	background-color: white;
	width: 100%;
	height:63px
}

.page-panel {
	margin-top: 30px; /* Adjust this value based on the actual height of the white menu bar */
}

.navbar {
	margin-left: 0; /* Remove left margin */
	padding-left: 0; /* Remove left padding */
}

.navbar li.nav-item{
	font-size : 17px;
	font-weight: 700;
	padding-right:40px
}

.navbar li.nav-item a:hover{
	color:#674ec8 !important;
	font-weight: bold;
	border-bottom:solid 5px #674ec8;
}

/* General styles for the banner-section and boxes */
.banner-section {
	display: flex;
	justify-content: space-between;
	margin: 30px 60px; /* Top and bottom 30px, left and right 60px */
	flex-wrap: wrap; /* Ensure flex items wrap to the next line if needed */
}

.left-box, .right-box {
	box-sizing: border-box;
	border-radius: 10px;
	height: 565px;
	margin-top: 15px;
	overflow: hidden; /* Hide overflow to ensure smooth slide transition */
	position: relative; /* Add position relative for absolute positioning of slides */
}

.left-box {
	width: 60%; /* 60% width for the left box */
}

.right-box {
	width: 33%; /* 40% width for the right box */
	margin-right: 115px;
}

.slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.banner-img {
	width: 100%;
	height: 539px;
	display: block;
	border-radius: 10px; /* Optional: add rounded corners to images */
	flex-shrink: 0; /* Ensure images do not shrink */
}

/* Styles for real-time-deposit-withdrawal section */
.real-time-deposit-withdrawal {
	background-color: white;
	margin-left: 60px; /* Margin similar to banner-section */
	padding: 20px;
	border-radius: 10px; /* Optional: add rounded corners */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: add shadow for better visibility */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.real-time-deposit-withdrawal .container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: auto;
}

/* Withdrawal section */
.withdrawal {
	width: 47%; /* Adjust width if necessary */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.withdrawal-top {
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	margin-bottom: 20px;
}

.withdrawal-top h3 {
	font-size: 18px;
	font-weight: bold;
}

.withdrawal-top .withdrawal-img {
	width: 100px;
	height: auto;
	border-radius: 5px; /* Optional: add rounded corners to images */
}

.withdrawal-bottom {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	width: 100%;
}

/* Charge section */
.charge {
	width: 47%; /* Adjust width if necessary */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.charge-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.charge-top h3 {
	font-size: 18px;
	font-weight: bold;
}

.charge-top .charge-img {
	width: 100px;
	height: auto;
	border-radius: 5px; /* Optional: add rounded corners to images */
}

.charge-bottom {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	width: 100%;
}

.slides {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.box {
	width: 12.5%; /* Each box takes 1/8th of the width since we have 8 boxes in total */
	flex-shrink: 0; /* Ensure boxes do not shrink */
}

/* Box styles */
.real-time-deposit-withdrawal {box-shadow: 0px 13px 20px 0px #c7c4c4;}
.real-time-deposit-withdrawal .box {
	width: 23%; /* Adjust width to fit four boxes per row with some gap */
	background-color: #eaeaea;
	padding: 10px;
	margin: 1% 0;
	border-radius: 5px;
	text-align: center;
	margin-left:20px;
}

.real-time-deposit-withdrawal .aad {
	font-size: 14px;
	font-weight: bold;
	color: #3d4eb4;
	margin-top:10px;
}

.real-time-deposit-withdrawal .amount {
	font-size: 18px;
	margin-top: 15px;
	font-weight: 200;
	color: #3d4eb4;
	display: flex;
	align-items: center;
	text-align: center;
	margin-left:25px;
}

.real-time-deposit-withdrawal .amount img {
	width: 16px; /* Adjust size as needed */
	height: 16px; /* Adjust size as needed */
	margin-right: 5px; /* Space between the icon and the text */
}

.real-time-deposit-withdrawal h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: -5px;
	color: #000000;
}

/* Responsive styles for mobile screens */
@media (max-width: 768px) {
	.banner-section {
		flex-direction: column; /* Stack boxes vertically */
		margin: 20px; /* Adjust margins for smaller screens */
	}
	.left-box, .right-box {
		width: 100%; /* Make both boxes full width on mobile */
		margin-bottom: 20px; /* Add some space between the boxes */
	}
	.banner-section { width:100% !important; height:330px; margin:10px }
	.banner-section .right-box, .real-time-deposit-withdrawal { display: none;}
	.banner-section .left-box { width:95%; margin-left:0px;}
	.banner-section .left-box .banner-img { height: 310px; }

}


/* Game Lobby Area styles */
.game-lobby-area { margin-left:60px;}
.game-lobby-area .image-title {
	text-align: center;
	margin-top: 20px;
}

.game-lobby-area .image-boxes {
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	margin-top: 20px;
}

.game-lobby-area .image-boxes .box {
	background-color: var(--bg-color-light);
	color: var(--white);
	width: 22%;
	padding: 20px;
	margin: 10px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.game-lobby-area .image-boxes {
		flex-direction: column;
	}
	.game-lobby-area .image-boxes .box {
		width: 100%;
	}

}

.banner-section {
	width: 103%;
	position: relative;
	overflow: hidden;
}
.carousel {
	width: 100%;
	height: 100%;
	display: flex;
	transition: transform 0.5s ease-in-out;
}
.carousel-slide {
	min-width: 100%;
	box-sizing: border-box;
}
.carousel-slide img {
	width: 100%;
	height: auto;
}
.carousel-button-prev, .carousel-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0,0,0,0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
}
.carousel-button-prev {
	left: 10px;
}
.carousel-button-next {
	right: 10px;
}
.carousel-pagination {
	position: absolute;
	bottom: 10px;
	width: 100%;
	text-align: center;
}
.carousel-pagination span {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #ccc;
	margin: 0 5px;
	border-radius: 50%;
	cursor: pointer;
}
.carousel-pagination .active {
	background-color: #000;
}

.casino-section { width:98%; margin-left:50px}
.casino-section .casino-text-title { float: left; margin-right: 20px; width: 40%;}
.footer-section { margin-left:30px;}
@media (max-width: 768px) {
	.casino-section { width:98%; margin-left:5px}
	.casino-section .casino-text-title { width:100%; margin-left:0px;}
	.footer-section{ display: none;}
	.balance-box, .points-box { width: 120px !important;}
	.mobile-login-area { display: block !important;}
}


.balance-box {
	background-color: #4d61dc;
	color: white;
	border-radius: 10px;
	padding: 5px 10px;
	margin-right: 10px;
	font-weight: bold;
	width : 200px;
}
.points-box {
	background-color: #674ec8;
	color: white;
	border-radius: 10px;
	padding: 5px 10px;
	font-weight: bold;
	width : 200px;
}
.balance-points-container {
	display: flex;
	align-items: center;
	position: fixed;
	right: 20px;
	top: 65px;
	z-index: 1000; /* Ensure it's above other elements */
}

.full-width-box {
	width: 100%;
	background-color: #171555;
	padding: 5px;
	box-sizing: border-box;
	display: flex;
	justify-content: start;
	margin-left:50px;
	border-radius: 10px;
	padding-left:20px;
}
.btn-custom {
	background-color: #54537d;
	color: white;
	border: none;
	padding: 10px 20px;
	margin: 5px;
	cursor: pointer;
	height:30px;
	border-radius: 5px;
	line-height: 15px;
}
.btn-custom.selected {
	background-color: #6869e7;
	color: white;
}
.btn-custom:hover {
	background-color: #6869e7;
}

.page-title-big { font-size: 2em; color:#000; font-weight: bold;}
.description { font-size: 1.2em; color:#000; font-weight: 400; margin-top: 40px;}

.subModal.exchange-list, .subModal.change-list { margin-top:35px;}
@media (max-width: 768px) {
	.full-width-box {
		width: 100%;
		background-color: #171555;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		justify-content: start;
		margin-left:0px;
		border-radius: 10px;
		padding-left:20px;
	}
	.modal-body {
		padding: 0 15px 20px;
		z-index: 1;
		margin-top: 50px;
		margin-left: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.modal-body .form-container .form-group {
		margin-left: 10px;
	}
	.form-container .form-group .infos .btn-grp button:first-child{ margin-left: 0; width: calc(16.66% - 2px); }
	.form-container .form-group .infos .btn-grp button:last-child{ width: calc(16.66% - 2px); margin-right: 5px; }
	.form-container .form-group .infos .btn-grp button:last-child {
		width: calc(100% - 2px);
		margin-bottom: 5px;
	}
	.subModal.exchange-list, .subModal.change-list { margin-top:75px;}
	.mobile-logout{display: block !important;}
}