@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;700&display=swap');
/* CSS Document */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15; 
  -webkit-text-size-adjust: 100%; 
  -webkit-tap-highlight-color: #000; 
    height:100%;
    background-color: #000;
}

body {
	margin: 0px;
	border: 0px;
	font-family: 'Chakra Petch', 'Tahoma', sans-serif;
	background-color: #888;
	background: radial-gradient(ellipse at center, #041860 0%,#000000 100%); 
	color: #C9C9C9;

    
    /* 
    background-image: url("../images/4333110.jpg");
    background-position: center top;
    
    background-repeat: no-repeat;
    background-size:cover;/*
    height: calc(100vh - 100px);
    
    
	width: 100%;
    background: radial-gradient(ellipse at center, #3B0303 0%,#000000 100%);
    */
}
h1, h2, h3, h4, h5 {
  font-family: 'Chakra Petch', 'Tahoma', sans-serif;
}

h1 {
    color: #feb40a;
    margin-top: 5px;
	text-transform: uppercase;
	background: linear-gradient(to bottom, #ffbd00 20%,#ffa500 60%, #ff6a00 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-weight: bold;
    font-size: 1.5rem;
}
h2 {
  color: #feb40a;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}
h3 {
  color: #feb40a;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.bg-sec h3{
    margin-left: 10px;
}
h4 {
  color: #F5F5F5;
  margin-top: 5px;
  margin-bottom: 5px;
    font-size: 1rem;
}
h5 {
    color: #DDD;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
    color: #FFA30C;
}
a.md-badge:link, a.md-badge:visited, a.md-badge:hover, a.md-badge:active {
    color: black;
}
.md-badge {
    font-size: 0.8rem;
}
ul {
    list-style: none;
}
.promotion ul {
    list-style:disc;
}
hr {
    margin-bottom: 0px;
}

.btn {
    box-sizing: border-box;
    border-radius: 0px;
    width: 300px;
    padding: 0.5rem;
}

.btn-100 {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 0px;
    width: 100%;
    padding: 0.5rem;
}

.btn-user{
	border-radius: 5px;
	border: thin solid #b3570e;
    padding: 0px 5px;
    font-weight: bold;
}
.header-box {
    flex-basis: 100%;
    margin-bottom: 20px;
}
.container {
  max-width: 970px;
  margin: auto auto;
	padding: 0px 10px;
}
.fx-3-1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 300px;
    flex: 1;
}

.fx-2-1 {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
    min-width: 320px;
    flex: 1;
}
.fx-2-1 ul {
    margin: 0rem 1rem;
    padding: 0;
}
.fx-2-1 ul li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}
.fx-2-1 ul li span {
    padding-left: 1rem;
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem;
}
.fx-2-1 ul li:before {
    content: url("../images/icn-right.png");
    position: absolute;
    width: 36px;
    height: 36px;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.fx-wrap {
    display: flex;
    flex-wrap: wrap;
}

.fx-center {
    justify-content: center;
}

.fx-ai-center {
    display: flex;
    align-items: center;
}
section {
  display: flex;
}
.alert-danger {
  color: bisque;
  background-color: #44090A;
  border-color: #3C0001;
}
.block {
  flex: 1;
}
.block-s {
  flex: 1;
}

.container-head {
    padding-left: 5px;
    padding-right: 5px;
}

.container-banner {
  display:flex;
  max-width: 1200px;
  margin:auto auto;
  width:100%;
}

.fx {
  display: flex;
  flex-wrap: wrap;
}
.taskbar {
  max-width: 500px;
  margin: 10px auto;
}
.taskbar img {
  width: 50px;
}
.taskbar > div {
  margin-top: auto;
}
.m-icon a:link, .m-icon a:visited, .m-icon a:active {
  color: #CFCFCF;
}
.m-icon {
  font-size: 2rem;
  color: #CFCFCF;
}

.m2-icon {
  font-size: 2rem;
}
.s-icon {
  font-size: 1.2rem;
  color: #CFCFCF;
}
.icon-xs {

    height: 30px;
}

.icon-30 {
    width: 30px;
    height: 30px;
}

.icon-sm {
    width: 50px;
}
.fav-icon {
    position: absolute;
    color: #000;
    padding: 0px 8px;
    top: 45px;
    right: 15px;
    font-size: 1rem;font-weight: 700;
    background-color: #FFC800;
    border-radius: 15px;
}

.grid-box {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-flow: dense;
    width: 100%;
    grid-gap: 10px;
    padding: 8px;
}
.game-detail {

}
.product-list {
    margin: 20px 0px;
    border: 3px solid #820002;
    border-radius: 10px;
    background-color: #260000;
    padding: 20px 0px;
}
.profile-icon {
    font-size: 2rem;
    color: #FFBC00;
    border-radius: 50%;
    background-color: #820002;
    width: 70px;
    height: 70px;
    padding-top: 5px;
    margin-bottom: -50px;
}


.btn-logout {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #464646;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding-top: 4px;
}

.active-logo{
    width: 200px;
}

.inactive-logo{
    height: 80px;
    padding: 5px;
    margin: 0px 8px;
}

.closed-logo{
    opacity: 0.7;
    filter: grayscale(100%);
}

/* --------------display--------------- */
.d-block ,.d-sm-none  {
  display:none;
}
.d-none ,.d-xl-block  {
  display:block;
}

.bg-main {
	border-radius: 3px;
	background-color: rgba(184,184,184,15%);
}


.bg-sec {
	border-radius: 3px;
    background-color: rgb(75 41 0 / 26%);
}

.bg-alert {
	color: #FFFFFF;
	background-image: -webkit-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: -moz-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: -o-linear-gradient(270deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
	background-image: linear-gradient(180deg,rgba(93,8,9,1.00) 0.13%,rgba(117,0,0,1.00) 99.70%);
}

.bg-notice {
	color: #FFFFFF;
	background-image: -webkit-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -moz-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -o-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: linear-gradient(180deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
}
/*----------------  form ---------------*/

.main-form button{
    background-color: transparent;
}
/*********** form ***************/
.input-icon {
  position: absolute;
  width: 30px;
  top: 18px;
  left: 15px;
  text-align: center;
  color: #e37f00;
}
.form-control {
  color: #AAA;
  background-color: #222;
  border-radius: 5px;
  width: 100%;
  font-size: 1rem;
  border: none;
  text-align: center;
  height: calc(2.5em + .5rem);
}
.form-group {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
}
.form-select {
  -webkit-appearance: none;
  padding-left: 50px;
}
.form-otp {
	border: medium solid rgb(255,68,0);
	padding: 10px;
	border-radius: 5px;
	width: 100%;
}
.form-otp input{
	background-color: #EEE;
}
/*---------------- header ---------------*/
nav {
  display: flex;
  /* border: thin dashed #D200FF; */
}
nav .navicon {
  color: #FFBC00;
  font-size: 35.0px;
  line-height: 40.0px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0px;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0px 10px;
	z-index: 900;
    height: 100px;
	background-image: url(../images/bg-honeycomb.png);
	background-repeat: repeat-x;
	background-position: 0% top;
}

header .logo img {
    max-width: 200px;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: -30px;
}

#box-header {
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
}
.box-balance {
    display: flex;
    
}
.logo-page {
  margin: 10px auto;
    justify-content: center;
}
.logo-page img {
  width: 150px;
}
.header-btn {
  display: flex;
  font-size: 16px;
  line-height: 14px;
  font-weight: 700;
  color: #222;
  border-style: none;
  border-radius: 8px;
  padding: 10px 15px;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 155, 0, 1.00) 100%);
  background: linear-gradient(0deg, #efbb2a, #f6e7a2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
}
.header-mainbox {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	flex-grow: 1;
	max-width: 250px;
    max-height: 80px;
    margin-top: 10px;
	background-image: url(../images/bg-panel.png);
	background-repeat: no-repeat;
	background-position: right top;
    
}
.txt-1r{
    font-size: 1rem;
}
.txt-2r{
    font-size: 2rem;
}
.txt-credit {
    min-width: 100px;
    text-align: center;
}
/*---------------- bank ---------------*/
#box-bank {
    text-align: center;
}
#box-bank > img{
    border-radius: 100%;
    width: 50px;
    margin: 3px;
}
/*---------------- splash ---------------*/

#body-splash {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
}
.splash-img {

    max-width: 400px;
  margin: 10px auto;
    width: 100%;
}
.promotion-img {

    max-width: 400px;
  margin: 10px auto;
    width: 100%;
}
.splash-detail {
    padding: 0px 10px;
  }
#box-hilight {
  display: flex;
  justify-content: center;
  color: #DDDDDD;
}
.hilight-btn {
  display: flex;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #FFD7D8;
  border-radius: 3px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  background-image: -webkit-linear-gradient(270deg,rgba(230,0,0,1.00) 11.34%,rgba(108,21,10,1.00) 48.92%,rgba(170,62,30,1.00) 91.36%,rgba(255,149,61,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(230,0,0,1.00) 11.34%,rgba(108,21,10,1.00) 48.92%,rgba(170,62,30,1.00) 91.36%,rgba(255,149,61,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(230,0,0,1.00) 11.34%,rgba(108,21,10,1.00) 48.92%,rgba(170,62,30,1.00) 91.36%,rgba(255,149,61,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(230,0,0,1.00) 11.34%,rgba(108,21,10,1.00) 48.92%,rgba(170,62,30,1.00) 91.36%,rgba(255,149,61,1.00) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  border-style: none;
}

.gray-btn {
	display: flex;
	font-size: 16px;
	line-height: 20px;
	color: #FFD7D8;
	border-radius: 3px;
	padding: 15px 20px;
	justify-content: center;
	align-items: center;
	background-image: -webkit-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(41,41,41,1.00) 11.34%,rgba(0,0,0,1.00) 91.36%,rgba(56,35,15,1.00) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
	border-style: none;
}

.pro-btn {
  display: flex;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: #FFD7D8;
  border-radius: 3px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  background-image: -webkit-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: -moz-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: -o-linear-gradient(270deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
  background-image: linear-gradient(180deg,rgba(255,212,0,1.00) 11.34%,rgba(84,71,5,1.00) 48.92%,rgba(148,123,0,1.00) 91.36%,rgba(255,190,61,1.00) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  border-style: none;
}

.pro-des {
    margin-top: -5px;
}

.slogan-img {
  width: 150px;
}

/************ start play button */

.btn-glow ,.btn-glow-yellow{
    
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.btn-glow:before,.btn-glow-yellow:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}


.btn-glow:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ff6100c7;
    left: 0;
    top: 0;
    border-radius: 10px;
}

.btn-glow-yellow:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}
.btn-glow-yellow:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffd700c7;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/************ end play button */
/*---------------- contents / body ---------------*/
#box-body{
    margin-top: -750px;
    
}
.contents {
  display: flex;
  width: 100%;
  align-items: center;
}
.box-dark {
  width: 100%;
  padding: 20px 0px;
  background: rgb(51,51,51);
  background: -moz-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-radial-gradient(top center, ellipse cover,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: radial-gradient(ellipse at top center,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=1 );
}
.box-red {
  width: 100%;
  background-image: url("../images/splash-bg.png"); /*background-color: #222;*/
  background-position: center top;
  background-size: cover;
  border-bottom: thick solid #960001;
}
.box-black {
  background-color: #111;
  padding: 20px 10px;
}

.box-banner {
  width:100%;
  background-image: url(/images/promotions/bg.jpg);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
}
/*---------------- service ---------------*/
#box-showoff {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    background-color: #000;
    border-radius: 10px;
    padding: 20px 10px;
    margin: 10px 0px;
}
.showeach {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
}

.showeach > div > img {
    padding: 10px;
    width: 45px;
    height: 45px;
}

/*---------------- slider ---------------*/
/*how many images we have
$slides: 4;

// how much we want each slide to show
$time_per_slide: 4;

// total time needed for full animation
$total_animation_time: $time_per_slide * $slides;
*/

.box-slide{
    overflow: hidden;
    height: 400px;
    width: 450px;
}

.slide-img{
    /* transition: top 2s;*/
    width:auto;
    height: 100%;
    max-height: 500px;
    position:relative;
    -webkit-animation:slide-down 15s infinite;
    -moz-animation:slide-down 15s infinite;
    animation:slide-down 15s infinite;
}
.sub-panel {
    align-content: space-between;
    /*
        display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    */
    text-align: center;
    }
@keyframes slide-down{   
  0%,100%{top:calc(100% * -1);}
  30%{top:calc(100% * -1);}
  65%{top: calc(100% * -0);}
  95%{top: calc(100% * -0);}
} 


/*---------------- download ---------------*/
#box-download {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background: rgb(51,51,51);
  background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(9,9,9,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(9,9,9,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#090909',GradientType=0 );
  border-bottom: thick solid #B30002;
}
/*---------------- game ---------------*/
#box-game {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 0px;
	background-color: #000000;
}
.each-game {
  display: flex;
  flex-basis: 150px;
  max-width: 200px;
}
.each-game img {
  width: 100%;
    height: 100%;
}

/*---------------- footer ---------------*/
footer {
  background-color: #000;
  color: #DDD;
  font-size: 12px;
  justify-content: center;
}
.box-footer {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    flex-grow: 1;
    flex-wrap: wrap;
}
.box-footer h3 {
    color: #F5F5F5;
    font-size: 1rem;
}
#footer-tags a{
    display: inline-block;
    padding: 5px 8px;
    text-decoration: none;
    color: #F5F5F5;
    background: hsla(0,0%,100%,.2);
    border-radius: 5px;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

#main-panel {
	background-image: url("../images/panel.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
    margin-bottom: 0px;
    height: 90px;
}
.popup-lkwheel {
    display: flex;
    justify-content: flex-end;
    
}
.box-lkwheel {
    display: flex;
    align-items: center;
    position: fixed;
    right: 10px;
    bottom: 100px;
    width: 150px;
}
.box-lkwheel .popup-lkw-label {
    position: absolute;
}
.box-lkwheel .popup-lkw-w {
    align-content: center;
    justify-content: center;
    animation-name: spinwheel;
    -webkit-animation: spinnow 5s normal linear infinite;
    animation: spinnow 5s normal linear infinite;
}

@keyframes spinnow {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

.fixed-bottom{
	background-image: -webkit-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: -moz-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: -o-linear-gradient(270deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
	background-image: linear-gradient(180deg,rgba(1,12,49,0.00) 0%,rgba(0,5,23,0.79) 44.16%,rgba(0,0,0,1.00) 83.76%);
}

.footer-bar {
                position:sticky;
                bottom: 0px;
                right: 0;
                max-height: unset;
                overflow: hidden;
            }
/**************** line icon ************/
.greenline {
    color: #249500;
    font-size: 3rem;
    background: lightblue;
  background-clip: content-box;
}
.greenline:before {
    display:flex;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    background:#FFF;
}

            .line-item .-link {
                
                display: flex;
                /*
                border-style: solid; 
                border-color: #035a07;
                border-radius: 15px;
                */
                margin-left: auto;
                margin-right: auto;
                max-width: 300px;
                min-height: 70px;
                color: #F5F5F5;
                justify-content: center;
                align-items: center;
                text-align: center;
            }


/*----------------  swal ก๊อปมาจาก temp-main ยังไม่มีเวลาไล่ดูว่ามันคืออะไร---------------*/

       .swal2-popup {
	background-color: #0D0D0D;
	border-radius: 1rem;            

        }

        .swal2-popup .swal2-title {
	color: #FF8E11;
        }

        .swal2-popup .swal2-input {

            height:2rem;

        }

        .swal2-popup .swal2-input:focus {
	box-shadow: none;
	border: 1px none #aaa;
        }

        .swal2-popup .swal2-styled.swal2-confirm {
	background-color: #414141;
	color: #F5F5F5;
	border-radius: 5px;
        }

        .swal2-popup .swal2-styled.swal2-cancel {

            background-color:#404040;

            border-radius:5px;

        }



        @media screen and (max-width: 480px) {

        .swal2-popup .swal2-validation-message {

            font-size:0.9rem;

        }

        .swal2-popup .swal2-title {

            font-size:1.4rem;

        }

        .swal2-icon.swal2-warning {
	color: #F5F5F5;
	border-color: #DDD;
        }



        }

 .swal-wide {
                width: 510px !important;
            }
            .swal2-popup {
                background-color: #222; 
                background: #45484d;
                background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
                background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%);
                background: linear-gradient(to bottom, #45484d 0%, #000000 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=0);
                font-family: 'Chakra Petch', 'Tahoma', sans-serif;
                width: 478px;
                padding: 17px;
                border-radius: 3px;
                text-align: center;
                /*position: fixed;*/
                /*left: 50%;*/
                /*top: 50%;*/
                /*margin-left: -256px;*/
                /*margin-top: -200px;*/
                overflow: hidden;
                display: none;
                /*z-index: 99999;*/
            }
            #swal2-title {
                font-family: 'Chakra Petch', 'Tahoma', sans-serif;
                color: #E96220;
                background: linear-gradient(to bottom, #ffe000 20%,#ffa500 60%, #ff6a00 90%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-size: 1.5rem;
                text-align: center;
                font-weight: 600;
                text-transform: none;
                position: relative;
                margin: 25px 0;
                padding: 0;
                line-height: 40px;
                display: block; 
            }
            .swal2-popup .swal2-file, .swal2-popup .swal2-input, .swal2-popup .swal2-textarea {
                background-color: #EEE;
}
            .swal2-popup #swal2-content {
                color: #DDD;
}
            .swal2-popup .swal2-styled.swal2-confirm {
                /* background-color: #3399FF; */
                background: #c81919;
                background: -moz-linear-gradient(top, #c81919 0%, #811212 100%);
                background: -webkit-linear-gradient(top, #c81919 0%, #811212 100%);
                background: linear-gradient(to bottom, #c81919 0%, #811212 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c81919', endColorstr='#811212', GradientType=0);
                color: white;
                border: none;
                box-shadow: none;
                font-size: 17px;
                font-weight: 500;
                -webkit-border-radius: 4px;
                border-radius: 5px;
                /*padding: 10px 32px;*/
                /*margin: 26px 5px 0 5px;*/
                cursor: pointer;
            }                
            @media (max-width: 375px) {
                .swal-wide {
                    width: 270px !important;
                    margin: 0 auto !important;
                    top: 10% !important;
                }        
                .swal-wide .sa-custom {
                    width: 240px !important;
                    height: 200px !important;
                }
            }

.has-error .form-control {     
                border-color: #F00 !important;
            }
            .help-block {
                color: #F00 !important;
                margin-bottom: 0px !important;
            }
           
            .lds-dual-ring {
                display: inline-block;
                width: 20px;
                height: 20px;
            }
            .lds-dual-ring:after {
                content: " ";
                display: block;
                width: 20px;
                height: 20px;
                margin: 1px;
                border-radius: 50%;
                border: 5px solid #000;
                border-color: #000 transparent #000 transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }
            @keyframes lds-dual-ring {
                0% {
                    transform: rotate(0deg);
                }        
                100% {
                    transform: rotate(360deg);
                }
            }        
            .lds-dual-ring-lg {
                display: inline-block;
                width: 40px;
                height: 40px;
            }
            .lds-dual-ring-lg:after {
                content: " ";
                display: block;
                width: 40px;
                height: 40px;
                margin: 1px;
                border-radius: 50%;
                border: 10px solid #000;
                border-color: #000 transparent #000 transparent;
                animation: lds-dual-ring 1.2s linear infinite;
            }
            @keyframes lds-dual-ring-lg {
                0% {
                    transform: rotate(0deg);
                }        
                100% {
                    transform: rotate(360deg);
                }
            }
            #getotp{        
                font-weight: 900;        
                text-decoration: underline;        
            }        
            #getotp:hover{        
                cursor:point;        
            }
/*----------------  modal ---------------*/
.register-comment {
    text-align: left;
  width: 90%;
  background-color: #310b00;
  border-radius: 8px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  font-weight: 100;
    list-style: circle;
}

.box-login {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #111111;
    color: #AAA;
}
.modal-comment {
      font-size: 0.9rem;
      color: #FFA91E;
    padding: 10px;
  }
.modal-login {
  margin: auto;
    margin-top: 80px;
  border-radius: 10px;
  width: 400px;
  padding: 10px 10px;
  background-color: #111111;
  color: #AAA;
}
.modal-register {
   margin-top: 80px;
  border-radius: 10px;
  padding: 50px;
  background-color: #111111;
  color: #AAA;
}
.register-comment {}
.modal-input {
  position: relative;
  margin: 10px 0px;
}
.modal-btn-ok {
font-family: 'Chakra Petch', 'Tahoma', sans-serif;
  border-radius: 8px;
  color: #FFF;
  width: 100%;
  padding: 15px;
  margin: 10px 0px;
  background-image: -webkit-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -moz-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: -o-linear-gradient(270deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
	background-image: linear-gradient(180deg,rgba(255,106,0,1.00) 0.13%,rgba(173,114,7,1.00) 99.56%);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  border-style: none;
  cursor: pointer;
    text-shadow: 0 1px 4px #6d3a04;
}

/*---------------- sweet alert ---------------------*/

/*----------------  padding ---------------------*/
.pd-5 {
  padding: 5px;
}
.pdt-5 {
  padding-top: 5px;
}
.pdb-5 {
  padding-bottom: 5px;
}
.pdl-5 {
  padding-left: 5px;
}
.pdr-5 {
  padding-right: 5px;
}
.pd-10 {
  padding: 10px;
}
.pdt-10 {
  padding-top: 10px;
}
.pdb-10 {
  padding-bottom: 10px;
}
.pdl-10 {
  padding-left: 10px;
}
.pdr-10 {
  padding-right: 10px;
}
.mr-3 {
  margin-right: 3px;
}
.ml-3 {
  margin-left: 3px;
}
.mt-3 {
  margin-top: 3px;
}

.mt-m15 {
    margin-top: -15px;
}
.mb-3 {
  margin-bottom: 3px;
}

.mr-5 {
  margin-right: 5px;
}
.ml-5 {
  margin-left: 5px;
}
.mt-5 {
  margin-top: 5px;
}
.mb-5 {
  margin-bottom: 5px;
}

.mt-20 {
    margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-120 {
    margin-top: 120px;
}

.my-m25 {
    margin-top: -25px;
    margin-bottom: -25px;
}
.my-m50 {
    margin-top: -50px;
    margin-bottom: -50px;
}

.mx-m25 {
    margin-left: -25px;
    margin-right: -25px;
}
.mx-m50 {
    margin-left: -50px;
    margin-right: -50px;
}
.w-100 {
  width: 100%;
}
.fw-100 {
  flex-basis: auto;
}
/******************  **********************/
.txt-white {
  color: #DDDDDD;
}
.fx-100p {
    display: flex;
    flex-basis: 100%;
}
.fx-100 {
    display: flex;
    flex-basis: 100px;
}
.fx-440 {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 300px;
  align-content: center;
}
.fx-280 {
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  flex-basis: 280px;
  text-align: center;
    
}
.fx-280 > p {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.fx-200 {
    margin: 15px;
    flex-basis: 200px;
    flex-grow: 1;
}
.div80 {
  height: 80px;
}
.jp-vdo {
  width: 100%;
  max-width: 550px;
}
.img-100 {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
  .rev-wrap {
    flex-wrap: wrap-reverse;
  }


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

.fx-evenly-around{
    display: flex;
    align-content: space-around;
	justify-content: space-evenly;
}
.fx-between{
    display: flex;
	justify-content: space-between;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.btn-tag {
  background-color: #960001;
  color: #D7D7D7;
  font-size: 0.8rem;
  border-radius: 5px;
  padding: 5px 10px;
  line-height: 2.5;
  border-style: none;
}
.header-bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  opacity: 1;
  transition: -webkit-transform .5s ease-out;
  transition: transform .5s ease-out;
  transition: transform .5s ease-out, -webkit-transform .5s ease-out;
}
.header-bar-out {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.detail-btn {
  display: flex;
  color: #FFF;
  font-size: 16px;
  line-height: 14px;
  padding: 8px 10px;
  justify-content: center;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(180deg, rgba(230, 0, 0, 1.00) 0%, rgba(255, 61, 61, 61.00) 100%);
  background: linear-gradient(0deg, #E30000, #FF4343);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$from, endColorstr=$to, GradientType=1);
  border-radius: 5px;
  border-style: none;
  cursor: pointer;
}
.btn-gl{
    display: inline-block;
    color: #FFA30C;
    border:0.2em solid #e66500;
    border-color: #e66500;
    border-radius:30px;
    padding:10px 15px;
    text-align:center;

}

.text-balance {
	text-transform: uppercase;
	background: linear-gradient(to bottom, #ffa500 0%,#FF3D00 70%, #ff7600 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 1.8rem;
    min-width: 90px;
    max-width: 95px;
    text-align: center;
}

.fs-3rem {
    font-size: 3rem;
}

.text-turnover {
	text-transform: uppercase;
	color: #BBBBBB;
    background: linear-gradient(to bottom, #EEEEEE 0%,#a9a391 70%, #FFFFFF 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 1.8rem;
    min-width: 90px;
    max-width: 95px;
    text-align: center;
}
.text-menu {
    animation-name: flash-text,jump-text;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}
.text-black {
    color: #000;
}
.text-gray {
    color: #5A5A5A;
}
.grid-item {
    padding: 0px 5px;
    place-self: stretch;
    overflow: hidden;
}
.grid-history {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto auto auto;
	width: 100%;
}


@keyframes flash-text {
0%{color: #ff640742}
40%{color: #ff640742}
50%{color: #ff6407cc}
51%{color: #ff640742}
52%{color: #ff8607d4}
53%{color: #ff640742}
54%{color: #ff6407cc}
80%{color: #ff64078c}
90%{color: #ff640742}
91%{color: #ffffff36}
92%{color: #ff640742}
}
@keyframes jump-text {
    0%{
        padding-bottom: 2px;
        padding-top: 4px
    }
    1%{
        padding-bottom: 0px;
        padding-top: 6px
    }
    2%{
        padding-bottom: 2px;
        padding-top: 4px
    }
    90%{
        padding-bottom: 2px;
        padding-top: 4px
    }
    91%{
        padding-bottom: 4px;
        padding-top: 2px
    }
    92%{
        padding-bottom: 2px;
        padding-top: 4px
    }
    100%{
        padding-bottom: 2px;
        padding-top: 4px
    }
}
article > h2 , #hotgames > h2{
    text-align: center;
}

article > p{
    margin-top: -10px;
}


#body-main {
    margin-top: 80px;
}


.bg-gray {
    background-color: #151515;    
}

.footer-end {
    padding: 20px 0px;
}

.hotgames-img {
    width: 150px;
}

#hotgames {
	text-align: center;
	padding: 20px 0px;
	background-color: rgba(13,13,13,0.75);
}

#footer-tags {
    padding: 5px;
}


.linear-top {
	background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.90) 0.13%,rgba(0,0,0,0.00) 11.28%);
	background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.90) 0.13%,rgba(0,0,0,0.00) 11.28%);
	background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.90) 0.13%,rgba(0,0,0,0.00) 11.28%);
	background-image: linear-gradient(180deg,rgba(0,0,0,0.90) 0.13%,rgba(0,0,0,0.00) 11.28%);
}

.bg-parallax {
    display:flex;
    position: relative;
    background-image: url("../images/bgneon2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 700px;
    margin-top: 80px;
    transform-style: inherit;
    z-index: -100;
    background-size:cover;
    transform-origin: center center 0;
    transform:  translateZ(-2px) scale(2);
}


/*----------------  box popup ---------------*/
#popup-login{
    z-index: 990;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}
.box-popup {
  background-color: #111111;
  margin: 70px auto;
  padding: 10px;
  border-radius: 3px;
  width: 400px;
  position: relative;
  /*transition: all 5s ease-in-out;*/
}
.box-popup .close {
  position: absolute;
  top: 0px;
  right: 10px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FFBC00;
}
.box-popup .close:hover {
  color: #ff5353;
}
.box-login {
    position: fixed;
    margin-left: auto;
    margin-right: auto;
  border: medium solid #c1ab52;
  border-radius: 10px;
  width: 400px;
  padding: 30px 10px;
  background-color: #111111;
  color: #AAA;
}

.box-popup .logo img{
    width: 200px;
}
.btn-close {
    position: absolute;
    right: 20px;
    top: 10px;
    left:auto;
}

.modal-header {
    display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 10px 20px;
  text-align: center;
    justify-content: center;
}

.modal-body {
  position: relative;
  margin: 0px;
    text-align: center;
}
#login-form a:link {
  color: #CCC;
  text-decoration: underline;
}
.modal-body a:active {
  color: #CCC;
}
.modal-body a:visited {
  color: #CCC;
}
.modal-content {
  background-color:#000000;
}
/**************  Media Query *******************/
@media screen and (max-width:1200px) {
  header .logo img {
    width: 150px;
  }
.box-lkwheel {
    width: 150px;
}
  .d-none .d-xl-block {
    display:block;
  }
  .d-block .d-sm-none {
    display:none;
  }
    
    
    
}
@media screen and (max-width:768px) {
    .box-lkwheel {
    width: 150px;
    }
  .each-game {
    flex-basis: 150px;
  }
  header {
    margin-bottom: 0px;
  }
  header .logo img {
    width: 250px;
  }
 header .logo img {
    width: 150px;
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
  }

    .btn{
        width: 100%;
    }
  .jp-vdo {
    width: 90%;
    max-width: 550px;
  }
  .box-slide {
        overflow: hidden;
        height: 500px;
        width: auto;
    }
    
      .promotion-img {
    max-width: 300px;
    width: 100%;
          margin: -20px auto;
  }
    .grid-box {
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: dense;
        width: 100%;
        grid-gap: 10px;
        top: 0px;
    }
  /*---------------- splash ---------------*/
  .splash-img {
    max-width: 550px;
    width: 100%;
  }
    .showeach {
        justify-content: center;
    }
    
  
#body-splash {
    flex-wrap: wrap-reverse;
}
    #box-showoff{
        width: 85%;
    }

  /*************************/

  /************/
/*************************/
    .box-popup {
        padding: 10px 0px;
        width: 100%;
        margin: auto;
        position: fixed;
        background-color: #111111;
        color: #AAA;
        height: 100%;
        border-style: none;
        /*transition: all 1s ease-in-out;*/
    }
  /*************************/
  .modal-login {
    border: none;
    width: 100%;
    padding: 0px;
      background-color: #111;
      height: 100%;
  }
  .modal-register {
    margin-top: 80px;
	  padding: 0px;
    padding-bottom: 30px;
    padding-top: 0px;
    border: none;
	  
  }
  .modal-body {
    margin: 10px 20px;
      text-align: center;
  }
  .modal-input {
    position: relative;
    margin: 20px 0px;
  }

  
      .modal-btn-ok {
    position: fixed;
    border-radius: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0px 0px;
    z-index: 901;
  }
    #pro-detail-1 {
        order:2;
    }
    #pro-detail-2{
        order: 1;
    }
}
@media screen and (max-width:650px) {
  header .logo img {
    width: 100px;
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
  }
.box-lkwheel {
    width: 100px;
}
  .d-sm-none  {
    display:block;
  }
  .d-xl-block {
    display:none;
  }
    .box-slide {
        overflow: hidden;
        height: 320px;
        width: 320px;
    }
    .showeach {
        justify-content:flex-start;
    }
    
    
}
@media screen and (max-width:320px) {
  .each-game {
    flex-basis: 220px;
  }
  header .logo img {
    width: 80px;
  }
    #box-showoff{
        width: 100%;
    }
    .hotgames-img{
        width: 130px;
    }
}
/* ***************************/