:root {
  /* Base Colors */
  --primary-color: #37474f;
  --secondary-color: #282828;
  --background-color: #111111;
  --text-color: #ffffff;
  --footer-color: #414141;

  /* Header and Sidebar */
  --header-top-bg-color: #b4862f;
  --header-top-bg-image: #111111;
  --sidemenu-bg-color: #0c0e10;

  /* Text */
  --primary-text-color: #fff;
  --secondary-text-color: #000;
  --tertiary-text-color: #37474f;
  --muted-text-color: #888;

  /* Link Colors */
  --link-color: #fff;
  --link-hover-color: #ffe119;
  --link-visited-color: #c69100;

  /* Button Colors */
  --button-bg-color: #ffb006;
  --button-text-color: #ffffff;
  --button-hover-bg-color: #505d64;
  --button-active-bg-color: #055e84;
  --button-tertiary-color: #c3c3c3;
  --button-go-bg: #6c0c0c;
  --button-radial-gradient: radial-gradient(132.2% 117.19% at 50% -17.19%, #ebce5f 0, #a16014 100%);

  /* Form Elements */
  --input-bg-color: #000;
  --input-border-color: #ccc;
  --input-focus-border-color: #e5ba5d;
  --input-text-color: #fff;

  /* Notification Colors */
  --success-color: #2ecc71;
  --error-color: #e74c3c;
  --warning-color: #f39c12;

  /* Card and Container Backgrounds */
  --card-bg-color: #fff;
  --container-bg-color: #462b00;
  --card-bg-image: url(/theme/asset/template_desktop15/imgs/bg-casino.png);
  --announce-container-bg: #414141;
  --slot-side-bg-mobile: #4d3333;
  --hc-box-border: #634343;
}

body {
  background-position: center;
  background-size: auto;
  background-attachment: scroll;
  margin: 0;
  line-height: normal;
  font-family: "Open Sans", sans-serif, "Microsoft JhengHei";
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.5em;
  transition: background 0.2s ease-in-out;
  background-color: var(--background-color);
}

/*
body {
    margin: 0;
    padding: 0;
    font: normal 12px/30px Sans-Serif, Tahoma, Helvetica;
    /* Set a specified height, or the minimum height for the background image */
/*    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
/*/*   background-attachment: fixed;
    /* Center the background image */
/*   background-position: center;
    /* Set the background image to no repeat */
/*/*   background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
/*   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden;
}
*/
* {
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

/**************************HEADER***/
#tdHeader-login,
#tdHeader-menu,
#tdHeader-bottom {}

#tdHeader-login {
  border-bottom: #6b82ab 1px solid;
}

#tdHeader-menu {
  border-top: #14223c 0px solid;
  border-bottom: #14223c 0px solid;
}

#tdHeader-bottom {
  border-top: #6b82ab 1px solid;
  border-bottom: #6b82ab 1px solid;
}

#tdHeader-bottom a {
  color: #9ba1ac;
}

/**************************FONT COLOR***/
.clr1 {
  color: #9ba1ac;
}

/**************************OTHER***/
.centered {
  position: absolute;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  text-align: center;
  left: 50%;
  width: 960px;
}

.div-jackpotFrame {
  color: #fff;
  top: 396px;
  height: 340px;
  z-index: 9999;
}

#div-jackpot {
  bottom: 18px;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 40px;
}

.rotate:hover {
  transform: rotateY(360deg);
  transition: 0.6s;
  transform-style: preserve-3d;
}

/************************************************BLINK ANIMATION*/
@keyframes navColors2 {
  0% {
    color: #fff100;
  }

  50% {
    color: red;
  }

  100% {
    color: #fff100;
  }
}

@-webkit-keyframes navColorsT {
  0% {
    color: #fff100;
  }

  50% {
    color: red;
  }

  100% {
    color: #fff100;
  }
}

@-moz-keyframes navColorsT {
  0% {
    color: #fff100;
  }

  50% {
    color: red;
  }

  100% {
    color: #fff100;
  }
}

@-ms-keyframes navColorsT {
  0% {
    color: #fff100;
  }

  50% {
    color: red;
  }

  100% {
    color: #fff100;
  }
}

@-o-keyframes navColors2 {
  0% {
    color: #fff100;
  }

  50% {
    color: red;
  }

  100% {
    color: #fff100;
  }
}

.blinks {
  -webkit-animation: navColors2 1s ease infinite;
  -moz-animation: navColors2 1s ease infinite;
  -ms-animation: navColors2 1s ease infinite;
  -o-animation: navColors2 1s ease infinite;
  animation: navColors2 1s ease infinite;
}

/**************************FOOTER***/
#divFooter {}

#divFooter a {}

/**************************GAMES LOGO***/
#ulgames-logo {
  display: inline;
}

#ulgames-logo li {
  float: left;
  list-style: none;
}

/************************************MENU*/
#cssmenu {
  position: relative;
  z-index: 9998;
}

#cssmenu {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px currentColor;
  border-image: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#cssmenu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px currentColor;
  border-image: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#cssmenu ul li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px currentColor;
  border-image: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#cssmenu ul li a {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px currentColor;
  border-image: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#cssmenu #menu-button {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 0px currentColor;
  border-image: none;
  line-height: 1;
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#cssmenu::after {
  height: 0px;
  line-height: 0;
  clear: both;
  display: block;
  visibility: hidden;
  content: ".";
}

#cssmenu>ul::after {
  height: 0px;
  line-height: 0;
  clear: both;
  display: block;
  visibility: hidden;
  content: ".";
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu {
  background: none;
  width: auto;
  line-height: 1;
  font-family: "Open Sans", sans-serif;
}

#menu-line {
  background: rgb(241, 216, 37);
  transition: 0.25s ease-out;
  left: 0px;
  top: 0px;
  height: 0px;
  position: absolute;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
}

#cssmenu>ul>li {
  float: left;
}

.align-center#cssmenu>ul {
  text-align: center;
  font-size: 0px;
}

.align-center#cssmenu>ul>li {
  float: none;
  display: inline-block;
}

.align-center#cssmenu ul ul {
  text-align: left;
}

.align-right#cssmenu>ul>li {
  float: right;
}

.align-right#cssmenu ul ul {
  text-align: right;
}

#cssmenu>ul>li>a {
  border-width: 1px;
  border-style: solid;
  padding: 21px 14px;
  transition: color 0.2s;
  border-image: linear-gradient(#07b3ff, rgba(0, 0, 0, 0)) 1 100%;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -webkit-border-image: -webkit-linear-gradient(#07b3ff, rgba(142, 122, 80, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(#07b3ff, rgba(142, 122, 80, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(#07b3ff, rgba(0, 0, 0, 0)) 1 100%;
}

#cssmenu>ul>li:hover>a {
  color: #cdcdcd;
}

#cssmenu>ul>li.active>a {
  color: #fff;
}

#cssmenu>ul>li.has-sub>a {
  padding-right: 25px;
}

#cssmenu>ul>li.has-sub>a::after {
  transition: border-color 0.2s;
  top: 21px;
  width: 4px;
  height: 4px;
  right: 10px;
  border-right-color: #07b3ff;
  border-bottom-color: rgb(255, 255, 255);
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  position: absolute;
  content: "";
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

#cssmenu>ul>li.has-sub:hover>a::after {
  border-color: rgb(0, 154, 225);
}

#cssmenu ul ul {
  left: -9999px;
  position: absolute;
}

#cssmenu li:hover>ul {
  left: auto;
}

.align-right#cssmenu li:hover>ul {
  right: 0px;
}

#cssmenu ul ul ul {
  top: 0px;
  margin-left: 100%;
}

.align-right#cssmenu ul ul ul {
  margin-right: 100%;
  margin-left: 0px;
}

#cssmenu ul ul li {
  transition: height 0.2s;
  height: 0px;
  -webkit-transition: height 0.2s ease;
  -moz-transition: height 0.2s ease;
  -o-transition: height 0.2s ease;
}

#cssmenu ul li:hover>ul>li {
  height: 32px;
}

#cssmenu ul ul li a {
  background: rgb(20, 29, 47);
  padding: 10px 20px;
  transition: color 0.2s;
  width: 220px;
  color: rgb(255, 255, 255);
  font-size: 15px;
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
}

#cssmenu ul ul li a:first-child {
  border: 0px currentColor;
  border-image: none;
}

#cssmenu ul ul li:hover>a {
  background: rgb(15, 21, 33);
  color: rgb(251, 170, 25);
}

#cssmenu ul ul li a:hover {
  background: rgb(15, 21, 33);
  color: #cdcdcd;
}

#cssmenu ul ul li.has-sub>a::after {
  transition: border-color 0.2s;
  top: 13px;
  width: 4px;
  height: 4px;
  right: 10px;
  border-right-color: #07b3ff;
  border-bottom-color: rgb(221, 221, 221);
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  position: absolute;
  content: "";
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.align-right#cssmenu ul ul li.has-sub>a::after {
  border-width: 1px 0px 0px 1px;
  border-style: solid none none solid;
  border-color: rgb(221, 221, 221) currentColor currentColor rgb(221, 221, 221);
  left: 10px;
  right: auto;
}

#cssmenu ul ul li.has-sub:hover>a::after {
  border-color: rgb(255, 255, 255);
}

/*************************************************************MOBILE SETTING*/
@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (min-width: 480px) and (max-width: 767px) {}

@media only screen and (max-width: 479px) {}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

table {
  width: 100%;
}

button {
  outline: 0;
  border: 0;
}

input {
  outline: 0;
  border: 0;
}

iframe {
  width: 100%;
  height: 850px;
  border: 0;
}

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

ul,
ol {
  margin-left: 20px;
  margin-bottom: 20px;
}

li {
  list-style-type: disc;
}

.flexslider .slides img {
  border-radius: 10px;
}

#divFooter {
  z-index: 999;
}

.img-fluid {
  transition: 0.2s;
  -webkit-animation: ani-down-top 2.5s ease-in-out infinite alternate;
  animation: ani-down-top 2.5s ease-in-out infinite alternate;
}

@media (max-width: 767px) {
  body {
    font-size: 14px;
  }

  iframe {
    height: 70vh;
  }
}

@media (min-height: 767px) {
  #divBody {
    /* min-height: 500px;*/
  }
}

@media (max-width: 1023px) {
  #body-container {
    display: flex;
    flex-direction: column;
  }

  .divHeader-top {
    order: -1;
  }

  .divHeader-menu {
    order: 3;
  }

  .divHeader-noti {
    order: 2;
  }

  .divHeader-nav {
    order: 1;
  }

  #divBody {
    order: 4;
  }

  #divFooter {
    order: 5;
  }
}

/***************************************************************************** style */
.w1440 {
  max-width: 1440px;
  margin: auto;
  width: 100%;
}

a,
a:hover,
a:visited,
a:active {
  color: var(--text-color);
}

b,
strong {
  color: var(--text-color);
}

h1 {
  color: var(--link-hover-color);
  font-weight: bold;
  font-size: 2em;
}

h2 {
  color: var(--link-hover-color);
  font-weight: bold;
  font-size: 1.5em;
}

h3 {
  color: var(--text-color);
  font-weight: bold;
}

h4 {
  color: var(--text-color);
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 1.2em;
}

h5 {
  color: var(--text-color);
  text-align: center;
}

button.close {
  transition: transform 0.2s ease-in-out;
  font-size: 40px;
  opacity: 1;
  text-shadow: none;
  font-weight: normal;
}

button.close:hover {
  transform: rotate(180deg);
}

.pd-5 {
  padding: 5px;
}

.modal-backdrop {
  /*background-color: var(--text-color); */
}

.modal-backdrop.in {
  opacity: 0.8;
  z-index: 998;
}

@media (max-width: 767px) {
  .box-container {
    margin: 25px auto;
  }
}

@media (max-width: 1023px) {
  .windowOnly {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .mobileOnly {
    display: none !important;
  }
}

/**** bootstrap */
.d-flex {
  display: flex;
}

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

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

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.text-center {
  text-align: center;
  color: var(--secondary-text-color);
}

/**** scroll bar */
::-webkit-scrollbar {
  width: 5px;
  height: 0px;
}

::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border: 0px none #ffffff;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: #888;
}

::-webkit-scrollbar-thumb:active {
  background: #888;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
  border: 0px none #ffffff;
  border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
  background: #f5f5f5;
}

/*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/
::-webkit-scrollbar-corner {
  background: transparent;
}

/**** input */
input::-webkit-input-placeholder {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input::-moz-placeholder {
  transform: translateX(0px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:-ms-input-placeholder {
  transform: translateX(0px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input::placeholder {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:focus::-webkit-input-placeholder {
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

input:focus::-moz-placeholder {
  transform: translateX(200px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition-timing-function: ease-in;
}

input:focus:-ms-input-placeholder {
  transform: translateX(200px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  transition-timing-function: ease-in;
}

input:focus::placeholder {
  -webkit-transform: translateX(200px);
  transform: translateX(200px);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

/*** btn ***/
.btn-login,
.btn-register,
.btn-playnow,
.btn-claim,
#customform_submit,
.btn-play,
.btn-go,
.btn-gol,
.btn-more {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 8px 20px;
  font-size: 0.8em;
  border: 1px solid transparent;
  position: relative;
  transition: 0.1s ease-in-out;
  text-align: center;
  margin: 6px 3px;
  line-height: normal;
}

.btn-login img,
.btn-register img,
.btn-playnow img,
.btn-claim img,
#customform_submit img,
.btn-play img,
.btn-go img,
.btn-gol img,
.btn-more img {
  width: 22px;
  margin-right: 5px;
}

.btn-login,
#customform_submit,
.btn-more {
  color: var(--link-color) !important;
  font-weight: bold;
  background: var(--warning-color);
  background: radial-gradient(132.2% 117.19% at 50% -17.19%, #ffa862 0, #ff6c28 100%);
  width: 100%;
  text-shadow: 1px 1px 0 #a2481b;
  border: 2px solid #a2481b;
  height: unset;
}

.btn-login:hover,
#customform_submit:hover,
.btn-more:hover {}

#customform_submit:hover,
a.btn-login:hover {
  background: var(--warning-color);
}

.btn-login:active,
#customform_submit:active,
.btn-more:active {}

.btn-register,
#registerform_btnSubmit {
  color: var(--text-color);
  font-weight: bold;
  background: var(--button-radial-gradient);
  white-space: nowrap;
  height: unset;
  border: 1px solid transparent;
}

.btn-register:hover {
  background: var(--button-hover-bg-color);
  color: var(--text-color);
  transition: 0.3s;
}

.btn-register:active,
#registerform_btnSubmit:active {}

.btn-play,
.btn-go {
  color: var(--text-color);
  font-weight: bold;
  background: var(--button-go-bg);
}

.btn-play:hover,
.btn-go:hover {
  background: #ca0e0e;
}

.btn-play:active,
.btn-go:active {
  background: #ca0e0e;
}

.btn-play,
.btn-go {
  display: table;
}

.btn-gol {
  color: var(--text-color);
  font-weight: bold;
  background: #15264b;
  border-radius: 50px;
  display: table;
  box-shadow: inset 0 0 2px #445c93;
}

.btn-gol:hover {
  color: var(--text-color);
  background: var(--button-bg-color);
}

.btn-login img,
.btn-register img,
.btn-go img {
  filter: grayscale(1) brightness(5);
}

@media (max-width: 600px) {

  .btn-login,
  .btn-register,
  .btn-playnow,
  .btn-claim,
  #customform_submit,
  #registerform_btnSubmit,
  .btn-play,
  .btn-go,
  .btn-gol,
  .btn-more {
    padding: 0.6em 0.6em;
  }
}

/***************************************************************************** TERMS */
.div-term {
  line-height: normal;
  font-size: 0.9em;
}

.div-term .static-page__content h2 {
  font-size: 1em;
}

.div-term li {
  margin: 8px 0;
}

.collapse-box {
  border: 1px solid #4b5a61;
  border-radius: 6px;
  margin: 10px 0;
  background: #102027;
}

.btn-collapse {
  width: 100%;
  border-radius: 6px;
  margin: 0;
  text-align: left;
  border: 0;
  position: relative;
  padding: 7px 15px;
  color: var(--primary-color);
  color: var(--text-color);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: inset 0 0 3px 0 rgb(0 0 0 / 60%);
}

.btn-collapse.collapsed:after {
  content: "+";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  font-weight: bold;
  font-size: 21px;
}

.btn-collapse.collapsed {
  background-color: var(--sidemenu-bg-color);
  color: var(--text-color);
  border-radius: 6px;
}

.btn-collapse:hover {
  color: var(--text-color);
  background-color: var(--button-bg-color);
}

.btn-collapse:active {
  background-color: var(--button-bg-color);
}

.btn-collapse:not(collapsed):after {
  content: "-";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  font-weight: normal;
  font-size: 21px;
}

.content.collapse {
  padding-left: 10px;
  padding-right: 10px;
}

.content.collapsing {
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 600px) {
  .div-term {
    font-size: 0.7em;
    line-height: 1.4em;
    text-align: justify;
    padding: 0 10px;
  }
}

/***************************************************************************** ADMIN  */
#theme-contain-adminloginx {
  padding: 20px 15px;
  max-width: 500px;
  background: var(--secondary-color);
  border-radius: 5px;
  margin: 15px auto;
  width: 90%;
}

#theme-contain-adminloginx input {
  padding: 5px 7px;
  border: 1px solid #666;
  margin: 5px auto;
  background-color: var(--text-color);
  color: var(--secondary-text-color);
  width: 100%;
}

#theme-contain-adminloginx input[type="submit"] {
  width: auto;
  background: var(--primary-color);
  color: var(--text-color);
  font-weight: bold;
  min-width: 50%;
}

#theme-contain-adminloginx>p+table {
  max-width: 350px;
  margin: 0 auto;
  width: 90%;
}

#theme-contain-adminloginx>p+table>tbody>tr>td:nth-child(2) {
  padding-left: 10px;
}

#theme-contain-adminloginx table {
  border: 0 !important;
}

#theme-contain-adminloginx table td {
  border: 0 !important;
  white-space: nowrap;
  vertical-align: baseline;
}

/***************************************************************************** MENU */
#cssmenu ul {
  margin: 0;
}

#cssmenu ul>li {
  float: none;
  list-style-type: none;
}

#cssmenu>ul {}

#cssmenu>ul>li {}

#cssmenu>ul>li>a:after {
  display: none;
}

#headerMenu {
  background: var(--secondary-color);
}

#cssmenu {
  position: static;
  background: var(--header-top-bg-color);
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#cssmenu>ul {
  display: flex;
  align-items: center;
  position: static;
  justify-content: center;
  max-width: 1440px;
  margin: auto;
}

#cssmenu>ul>li {
  position: static;
}

#cssmenu>ul>li>a,
#cssmenutop ul li a {
  border: 0;
  color: var(--text-color);
  text-transform: uppercase;
  font-size: 0.8em;
  position: relative;
  display: block;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: color 0.2s ease-in-out;
  font-weight: bold;
  margin: auto;
}

#cssmenu>ul>li>a>img,
#cssmenutop ul li a img {
  height: 40px;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: grayscale(1) brightness(5);
}

#cssmenu>ul>li.active>a>img,
#cssmenutop ul li a.active img {
  filter: hue-rotate(225deg) contrast(2);
}

#cssmenu>ul>li.active>a,
#cssmenu>ul>li:hover>a,
#cssmenutop ul li a:hover,
#cssmenutop ul li a.active {
  color: var(--link-hover-color);
}

#menuadd a:hover img,
#menuadd a.active img {
  filter: hue-rotate(221deg) !important;
}

#cssmenu>ul>li.active>a:after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-style: solid;
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent var(--link-visited-color) transparent !important;
  width: 0;
  height: 0;
  transform: none;
}

#cssmenu>ul>li.has-sub>ul {
  position: absolute;
  z-index: 999;
  display: flex;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

#cssmenu>ul>li.has-sub:hover>ul {
  max-height: 500px;
  transition: max-height 0.2s ease-in-out;
}

#cssmenu>ul>li.has-sub>ul>li {
  flex: 1 16.66%;
  max-width: 16.66%;
  height: auto;
}

#cssmenu ul ul li a {
  background: transparent;
  width: auto;
  font-size: 0.7em;
}

@media (max-width: 1023px) {
  #cssmenu>ul>li.has-sub>ul {
    display: none !important;
  }

  #cssmenu {
    background: transparent;
  }

  #cssmenu>ul {
    justify-content: start;
  }
}

#divMenu {
  padding-left: 0 !important;
  overflow: hidden;
}

#menuContainer {
  width: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: 0;
  z-index: 1050;
  max-width: 300px;
  background-color: var(--container-bg-color);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#menutop {
  background: var(--header-top-bg-image);
}

#cssmenutop ul ul {
  display: none !important;
}

#cssmenutop ul {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#cssmenutop ul li {
  list-style-type: none;
  max-width: 33.33%;
  flex: 1 1 33.33%;
  display: none !important;
}

#cssmenutop ul li:nth-child(-n + 6) {
  display: block !important;
}

#cssmenutop ul li a {}

#cssmenutop ul li img {}

#menuadd {}

#menuadd ul {
  margin: 0;
}

#menuadd ul li {
  list-style-type: none;
}

#menuadd a {
  padding: 10px 20px;
  display: flex;
  font-weight: bold;
  align-items: center;
}

#menuadd a img {
  width: 30px;
  margin-right: 10px;
  filter: grayscale(1);
}

#menuadd a:hover,
#menuadd a.active {
  color: var(--link-hover-color);
}

#menuadd a:hover img,
#menuadd a.active img {
  filter: none;
}

#menuadd a.active {
  background: rgb(193 193 193 / 10%);
}

.menu-auth {
  display: flex;
  padding: 10px 10px;
  margin: 0 0 auto;
}

.menu-auth a {
  flex: 1;
}

.menu-lang {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;
  padding-right: 10px;
}

.menu-lang p {
  margin: 0;
  font-size: 0.7em;
}

.menu-lang img {
  width: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 3px;
  padding: 3px;
}

@media (min-width: 1024px) {
  #menuContainer {
    left: 0;
  }

  #divMenu.modal .modal-dialog#menuContainer {
    transform: translate(-25%, 0);
  }

  #divMenu.modal.in .modal-dialog#menuContainer {
    transform: translate(0, 0);
  }
}

@media (max-width: 1023px) {
  #menuContainer {
    right: 0;
  }

  #divMenu.modal .modal-dialog#menuContainer {
    transform: translate(25%, 0);
  }

  #divMenu.modal.in .modal-dialog#menuContainer {
    transform: translate(0, 0);
  }

  #cssmenu>ul>li>a>img,
  #cssmenutop ul li a img {
    height: 30px;
  }

  #cssmenu>ul>li>a,
  #cssmenutop ul li a {
    padding: 1.2em !important;
  }
}

/***************************************************************************** LOGIN */
.customform {
  padding: 0px;
  max-width: 450px;
  margin: auto;
}

.customform dl:nth-child(5) dd,
.customform dl:nth-child(6) dd {
  background: #fff;
  margin: 3px;
}

.customform dd {
  text-align: center;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin: 0;
}

.customform i {
  padding-left: 10px;
  padding-right: 0px;
  position: relative;
}

.customform i img {
  width: 22px;
  filter: hue-rotate(213deg);
}

.customform input {}

#customform_UserName {}

#customform_Password {}

#customform_UserName,
#customform_Password {
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  color: var(--text-color);
}

#customform_submit {}

#customform_submit:hover {}

#customform_submit:active {}

.customform dl:nth-child(7) dd {
  display: flex;
  border: 0;
}

.modal-login .modal-dialog {
  background-color: var(--text-color);
  border-radius: 20px;
  padding: 15px;
}

.modal-login .login-title {
  display: none;
}

.modal-login .logo-login {
  text-align: center;
}

.mlr-bottom {
  max-width: 500px;
  margin: auto;
  border-top: 1px solid #4e5157;
  color: #808a9e;
  font-size: 0.7em;
  padding: 15px 10px 30px;
  margin-top: 25px;
  text-align: center;
}

.mlr-bottom p {
  line-height: normal;
  max-width: 350px;
  width: 90%;
  margin: auto;
}

.mlr-bottom a {
  color: var(--tertiary-text-color);
}

@media (min-width: 768px) {
  #loginModal {
    display: block;
    position: static;
    opacity: 1;
  }

  #loginModal.modal-login .modal-dialog {
    transform: none;
    background: transparent;
    padding: 0;
    width: auto;
    margin: auto;
  }

  #loginModal .logo-login {
    display: none;
  }

  #loginModal .mlr-bottom {
    display: none;
  }

  #loginModal #customform {
    display: flex;
    align-items: center;
    margin: 0px 0;
  }

  .customform {
    max-width: 1000px;
  }

  .customform dl {
    margin: 0;
  }

  .customform input {}

  #customform_UserName,
  #customform_Password {
    font-size: 0.8em;
    padding: 6px 10px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .customform {
    max-width: 450px;
  }
}

#theme-contain-login .div-login {
  max-width: 600px;
  margin: 30px auto;
  padding: 2em 3em;
  background: var(--secondary-color);
  border-radius: 5px;
}

#theme-contain-login .customform {
  padding: 0 40px;
}

#theme-contain-login .customform dl:nth-child(5) dd,
#theme-contain-login .customform dl:nth-child(6) dd {
  width: 100%;
  color: var(--secondary-text-color);
  font-size: 14px;
  padding: 10px 10px;
  background-color: var(--sidemenu-bg-color);
  border: 1px solid #aaa;
  border-radius: 6px;
  margin: 15px 0;
}

#theme-contain-login #customform_UserName,
#theme-contain-login #customform_Password {}

#theme-contain-login #customform_submit {
  margin: 15px auto 25px;
  font-size: 1em;
  min-width: 50%;
  height: 40px;
}

@media (max-width: 699px) {
  #theme-contain-login .div-login {
    margin: 15px;
  }

  #theme-contain-login .customform {
    padding: 0;
  }

  #theme-contain-login .customform dl:nth-child(5) dd,
  #theme-contain-login .customform dl:nth-child(6) dd {
    padding: 0;
  }
}

/***************************************************************************** REGISTER */
.modal-register .modal-dialog {
  max-width: 800px;
  width: 100%;
}

.register {
  max-width: 1440px;
  margin: auto;
  padding: 2em 3em;
  background: var(--secondary-color);
  border-radius: 5px;
}

.register-form {}

#registerform {
  width: 100%;
  padding: 0px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

#registerform dl {
  margin: 15px auto;
  width: 100%;
  flex: 1 1 100%;
}

#registerform dt {
  width: 100%;
  color: var(--text-color);
  font-size: 12px;
  margin-bottom: 5px;
  font-weight: normal;
}

#registerform dd {
  position: relative;
}

#registerform textarea,
#registerform input[type="text"],
#registerform input[type="password"],
#registerform input[type="email"],
#registerform select {
  width: 100%;
  color: var(--text-color);
  font-size: 14px;
  padding: 10px 10px;
  background-color: var(--sidemenu-bg-color);
  padding-left: 20px;
  border: 1px solid #aaa;
  border-radius: 6px;
}

#registerform textarea:focus,
#registerform input[type="text"]:focus,
#registerform input[type="password"]:focus {
  border-color: #e5ba5d;
}

#groupUsername dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#groupUsername dd #registerform_UserName {
  width: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

#groupUsername dd #registerform_UserNameMsg {
  width: 100%;
  color: #e5ba5d;
}

#groupUsername .icnR {
  top: 5px;
}

#registerform input.btnCheckUser {
  margin-top: 0;
  margin-bottom: 0;
  /*margin-left: 15px;*/
  padding: 10px 20px;
  /*max-width: calc(40% - 15px);*/
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
  background: transparent;
  border-radius: 6px;
  background: var(--button-bg-color);
}

#registerform #registerform_varifycode {
  width: calc(100% - 115px);
  float: left;
}

#registerform .btnCheckUser,
#registerform_btnSubmit {}

#registerform .btnCheckUser:hover,
#registerform_btnSubmit:hover {}

#registerform .btnCheckUser:active,
#registerform_btnSubmit:active {}

#groupSubmit {
  text-align: center;
}

#registerform_btnSubmit {
  padding: 15px 75px;
  cursor: pointer;
  border-radius: 5px;
}

#registerform:after {
  font-size: 10px;
  color: var(--text-color);
}

#groupVerifyCode dd:last-child {
  position: static;
}

#groupVerifyCode img {
  margin-left: 15px;
}

.small {
  font-size: 12px;
}

.w3-text-red {
  color: #ff5858;
}

.divRegister-box {
  background-color: var(--text-color);
}

.img-register {
  overflow: hidden;
}

.register-box-wrapper>.right {}

.register-logo {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9;
}

.register-logo img {
  height: 100px;
  display: block;
  margin: auto;
}

#registerform_FullNameDescription {
  color: #e6de67;
  padding-top: 5px;
}

@media (max-width: 1024px) {
  .login-title {
    margin-left: 0;
    margin-right: 0;
  }

  #registerform {
    padding: 0;
  }
}

@media (min-width: 768px) {

  #groupPassword,
  #groupComfirmPassword,
  #groupMobileNumber,
  #groupCurrency,
  #groupAffiliate,
  #groupReferralCode,
  #groupEmail {
    flex: 1 1 50%;
    max-width: 50%;
  }

  #groupPassword,
  #groupCurrency,
  #groupEmail {
    padding-right: 15px;
  }

  #groupComfirmPassword,
  #groupMobileNumber,
  #groupReferralCode,
  #groupAffiliate {
    padding-left: 15px;
  }

  .imgRegister-window {
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .note {
    font-size: 11px;
    width: 550px;
  }

  .small {
    font-size: 11px;
  }
}

@media (max-width: 768px) and (min-width: 608px) {
  #registerform {
    flex-wrap: wrap;
    flex-direction: row;
  }

  #registerform_btnSubmit {
    padding: 15px 35px;
  }

  .note {
    position: absolute;
    width: 535px;
    font-size: 11px;
  }

  .small {
    font-size: 11px;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .register {
    margin: 10px;
  }
}

@media (max-width: 767px) {
  .modal-register .modal-content {
    border: 0;
    border-radius: 0;
  }

  .registration-wrapper {
    padding: 0;
  }

  .divRegister-box {
    padding: 0;
  }

  .register-box-wrapper {
    border-radius: 0;
  }

  .register-logo {
    top: auto;
    left: 10px;
    right: auto;
  }

  .register-logo img {
    height: 50px;
  }

  .div-register {
    border-radius: 0;
    margin: 0;
  }

  #registerform {}

  #registerform .btnCheckUser {
    font-size: 3vw;
  }

  #registerform_btnSubmit {
    margin: 25px auto 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  #groupUsername dd #registerform_UserName {
    width: 100%;
  }

  #groupPassword {
    position: relative;
  }

  #registerform_Password:focus {
    margin-bottom: 37px;
  }

  #registerform_Password:focus+.note {
    display: block;
    margin-top: -37px;
  }

  #registerform input.btnCheckUser {
    font-size: 10px;
  }

  .register-logo {
    display: none;
  }
}

/***************************************************************************** HEADER */
.img-logo {
  height: 40px;
}

@media (max-width: 375px) {
  .img-logo {
    height: 30px;
  }
}

.divHeader-top .img-logo {
  padding-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.divHeader-top {
  position: sticky;
  top: 0;
  z-index: 1060;
  border-bottom: 1px solid #645c50;
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
  background: var(--header-top-bg-image);
  background-position: left;
  background-size: cover;
}

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

.header-topright {
  padding-right: 3px;
}

.htr-wrapper {
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .divHeader-top .btn-login {
    display: none;
  }
}

/*** announcement */
.announce-box {
  margin: 8px auto;
}

.announce-container {
  font-size: 0.875em;
  display: flex;
  background: var(--announce-container-bg);
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 3px 0 rgba(14, 75, 177, 0.6);
  border: rgba(255, 255, 255, 0.1) 1px solid;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%);
  border-bottom: 1px solid var(--announce-container-bg);
}

.announce-icn {
  padding: 2px 15px;
  white-space: nowrap;
}

.announce-icn img {
  width: 30px;
  -webkit-animation: ring 4s 0.7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s 0.7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s 0.7s ease-in-out infinite;
  transform-origin: 50% 4px;
  margin-top: 0;
}

.announce-scroll {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.announce-scroll:before,
.announce-scroll:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}

.announce-scroll:before {
  left: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), var(--announce-container-bg));
}

.announce-scroll:after {
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--announce-container-bg));
}

#horizontal-scrolling-msg {
  width: 100%;
}

#horizontal-scrolling-msg ul {
  margin: 0;
}

#horizontal-scrolling-msg ul li {
  margin-right: 20px;
  list-style-type: none;
}

@media (min-width: 1023px) and (max-width: 1400px) {
  .announce-box {
    padding: 0 8px;
  }
}

@media (max-width: 1023px) {
  .announce-box {
    margin: 0;
    border-radius: 0;
  }
}

@media (max-width: 600px) {
  .announce-icn {
    min-width: 50px;
  }

  .announce-scroll {
    width: calc(100% - 50px);
  }

  .home-box.announce-box {
    margin-left: 0;
    margin-right: 0;
  }

  .announce-container {
    border-radius: 0;
    overflow: hidden;
    width: 100%;
  }
}

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotateZ(0);
  }

  1% {
    -webkit-transform: rotateZ(30deg);
  }

  3% {
    -webkit-transform: rotateZ(-28deg);
  }

  5% {
    -webkit-transform: rotateZ(34deg);
  }

  7% {
    -webkit-transform: rotateZ(-32deg);
  }

  9% {
    -webkit-transform: rotateZ(30deg);
  }

  11% {
    -webkit-transform: rotateZ(-28deg);
  }

  13% {
    -webkit-transform: rotateZ(26deg);
  }

  15% {
    -webkit-transform: rotateZ(-24deg);
  }

  17% {
    -webkit-transform: rotateZ(22deg);
  }

  19% {
    -webkit-transform: rotateZ(-20deg);
  }

  21% {
    -webkit-transform: rotateZ(18deg);
  }

  23% {
    -webkit-transform: rotateZ(-16deg);
  }

  25% {
    -webkit-transform: rotateZ(14deg);
  }

  27% {
    -webkit-transform: rotateZ(-12deg);
  }

  29% {
    -webkit-transform: rotateZ(10deg);
  }

  31% {
    -webkit-transform: rotateZ(-8deg);
  }

  33% {
    -webkit-transform: rotateZ(6deg);
  }

  35% {
    -webkit-transform: rotateZ(-4deg);
  }

  37% {
    -webkit-transform: rotateZ(2deg);
  }

  39% {
    -webkit-transform: rotateZ(-1deg);
  }

  41% {
    -webkit-transform: rotateZ(1deg);
  }

  43% {
    -webkit-transform: rotateZ(0);
  }

  100% {
    -webkit-transform: rotateZ(0);
  }
}

/*** small nav */
.divHeader-nav {}

.nav-breadcrumbs {
  font-size: 0.8em;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
}

.nav-breadcrumbs ul {
  margin: 0;
  display: flex;
  align-items: center;
}

.nav-breadcrumbs li {
  list-style-type: none;
}

.nav-breadcrumbs a {
  display: block;
  padding: 4px 10px;
  white-space: nowrap;
}

.nav-breadcrumbs a:hover {
  text-decoration: underline;
}

.nav-breadcrumbs a.active {
  color: var(--link-visited-color);
}

.nav-list>div {
  display: flex;
}

.nav-breadcrumbs a.active {
  order: -1;
}

.navcontrol {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 3;
  transition: 0.3s;
  visibility: visible;
  cursor: pointer;
  opacity: 1;
}

.navprev {
  left: 0;
}

.navnext {
  right: 0;
}

.navcontrol:hover {
  opacity: 1;
}

.navcontrol:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px auto;
  z-index: 2;
}

.navprev:after {}

.navnext:after {}

.navcontrol:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  left: 0;
  right: 0;
  pointer-events: none;
}

.navprev:before {
  background: linear-gradient(to right, var(--container-bg-color) 75%, rgba(0, 0, 0, 0) 100%);
}

.navnext:before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--container-bg-color) 25%);
}

.controlhide {
  opacity: 0;
  visibility: hidden;
}

.nl-sub {
  position: relative;
}

.nl-sub a.active {
  margin-left: 10px;
}

.nl-sub a.active:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .divHeader-nav {
    margin: 8px auto;
  }

  .headernav-wrapper {}
}

@media (max-width: 1023px) {
  .headernav-wrapper {
    display: flex;
    align-items: center;
  }

  .divHeader-nav {
    position: sticky;
    z-index: 1060;
    background: var(--secondary-color);
    border-bottom: 1px solid #102027;
    box-shadow: 0px 2px 3px rgba(16, 32, 39, 0.3);
  }

  .nav-breadcrumbs {
    max-width: calc(100vw - 100px);
    width: 100%;
    overflow: hidden;
  }

  .navcontrol {
    pointer-events: none;
  }

  .navprev:before {
    background: linear-gradient(to right, var(--container-bg-color), rgba(0, 0, 0, 0));
  }

  .navnext:before {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--container-bg-color));
  }

  .navcontrol:after {
    display: none;
  }
}

@media (max-width: 550px) {
  .nav-breadcrumbs {}
}

/***  btnMenu */
.btn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-right: 0;
  border-left: 2px var(--primary-color) solid;
  cursor: pointer;
  color: var(--text-color);
  font-weight: bold;
  font-size: 0.875em;
}

.btn-menu.active {
  background: var(--button-hover-bg-color);
  color: var(--text-color);
}

@media (min-width: 1024px) {
  .btn-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1061;
    border-right: 2px solid var(--button-hover-bg-color);
    border-left: 0;
    padding: 0 15px;
    border-bottom: 1px solid #505d64;
    border-left: 0 !important;
  }

  .btn-menu:hover {
    color: var(--text-color);
  }

  .btn-menu img {
    margin-right: 10px;
    width: 22px;
    filter: hue-rotate(232deg);
  }
}

@media (max-width: 1023px) {
  .btn-menu {
    width: 100px;
    flex-direction: row-reverse;
  }

  .btn-menu img {
    margin-left: 5px;
    width: 18px;
    filter: hue-rotate(232deg);
  }
}

/***************************************************************************** FOOTER */
.footer-container {
  background: var(--footer-color);
  font-size: 12px;
  margin-top: 0;
}

.footer-border {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 1em;
}

.footer-text__container {}

.ft-box {
  line-height: 1.5em;
  overflow: hidden;
  transition: height 0.4s ease-in-out;
  position: relative;
  padding: 0 10px;
}

.ft-box.col:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
}

.ft-box.col {
  max-height: 150px;
}

.ft-box-wapper div {
  color: #f9f9f9;
}

.ft-box-wapper div b {
  color: var(--text-color);
}

.btn-ft {
  text-align: center;
  margin: 0 auto 10px;
  background: transparent;
  color: var(--button-bg-color);
  display: flex;
  padding: 0 10px;
  font-size: 1em;
  font-weight: bold;
}

.footer-link {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-link ul {
  margin: 0;
}

.footer-link ul>li {
  list-style-type: none;
}

.footer-link a {
  color: #f9f9f9;
}

.footer-social img {
  width: 20px;
  filter: brightness(100);
  margin: 3px;
}

.footer-social img:hover {
  filter: hue-rotate(211deg);
}

@media (max-width: 600px) {
  .footer-link>div {
    flex: 1 1 50%;
  }
}

.footer-partner {
  padding: 10px 15px;
}

.footer-partner img {
  display: block;
  margin: 10px auto 0;
  max-width: 100%;
}

.footer-partner ul {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  white-space: nowrap;
  color: #afb5b9;
}

.footer-partner ul>li {
  list-style-type: none;
  text-align: center;
  padding: 0 10px;
  max-width: 8.33%;
  margin-bottom: 10px;
  color: #939da3;
  font-size: 0.9em;
}

@media (max-width: 699px) {
  .footer-partner ul>li {
    max-width: 20%;
    font-size: 0em;
    padding: 0 5px;
    margin: 0;
    line-height: 0;
  }
}

@media (max-width: 400px) {
  .footer-partner ul>li {
    max-width: 25%;
  }
}

.footer-bank {
  padding: 10px 15px;
}

.footer-bank img {
  display: block;
  margin: 0 auto 0;
  height: 35px;
}

.footer-bank ul {
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: #afb5b9;
  justify-content: space-between;
}

.footer-bank ul>li {
  list-style-type: none;
  text-align: center;
  padding: 5px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin: 5px;
}

.footer-bank ul>li.tag-cs3 {
  border: 0px solid;
  display: none;
}

@media (max-width: 699px) {
  .footer-bank ul {
    flex-wrap: wrap;
  }

  .footer-bank ul>li {
    width: auto;
    font-size: 0.8em;
  }
}

.footer-copyright {
  padding: 1em;
  text-align: center;
}

@media (min-width: 699px) {
  .footer-nav {
    display: none;
  }
}

@media (max-width: 698px) {
  .footer-container {
    padding-bottom: 70px;
  }

  .footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #102027;
    border-top: 1px solid #505d64;
    background: linear-gradient(180deg, #222222 0%, #000000 100%);
  }

  .footer-nav ul {
    margin: 0;
    display: flex;
    align-items: center;
  }

  .footer-nav li {
    list-style-type: none;
    flex: 1;
  }

  .footer-nav a {
    color: var(--text-color);
    display: block;
    text-align: center;
    padding: 10px 5px;
    font-size: 0.8em;
  }

  .footer-nav a>img {
    width: 22px;
    display: block;
    margin: 0 auto;
    filter: grayscale(2) brightness(5);
  }

  .footer-nav a.active {
    color: var(--button-active-bg-color);
  }

  .footer-nav a.active>img {
    filter: none;
  }
}

/***************************************************************************** BODY */
.grey-box {
  padding: 2em 3em;
  background: var(--footer-color);
  border-radius: 5px;
}

@media (max-width: 600px) {
  .grey-box {
    padding: 2em;
  }
}

.title-box {
  display: flex;
  margin: 20px 0px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #505d64;
  align-items: center;
}

.title-box img {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  filter: grayscale(2) brightness(5);
}

.title-box h2 {
  color: var(--text-color);
  margin: 0;
}

.title-box.login-title {
  margin: 20px 40px 20px;
}

/*--- banner ---*/
.divBanner {}

.divBanner img {
  width: 100%;
}

.flexslider {
  margin: 0;
  border: 0;
  background: transparent;
}

.flex-direction-nav {
  height: 0;
}

.flex-direction-nav li {
  list-style-type: none;
}

.btn-homebanner {
  display: flex;
}

.btn-homebanner>a {
  flex: 1;
}

.homebanner-wrapper {
  display: flex;
}

.homebanner-sub {
  position: relative;
}

.hbs-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--primary-color);
  margin-left: 10px;
  position: relative;
}

.hbs-wrapper:before {
  content: "Promo";
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  display: table;
  padding: 0 30px;
  margin: auto;
  text-align: center;
  z-index: 3;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  background: var(--primary-color);
  font-weight: bold;
  font-size: 11px;
}

.homebanner-sub img {
  width: 100%;
}

@media (min-width: 1024px) and (max-width: 1450px) {
  .homebanner-wrapper {
    padding: 0 8px;
  }
}

@media (min-width: 1024px) {
  .homebanner-main {
    width: 70%;
  }

  .homebanner-sub {
    width: 30%;
  }
}

@media (max-width: 1023px) {
  .homebanner-sub {
    display: none !important;
  }
}

/*--- home category ---*/
.home-cat {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.hc-box {
  max-width: calc(33.33% - 1em);
  margin: 0.5em;
}

.hc-box.hc-casino {
  max-width: calc(66.66% - 1em);
}

.hc-box {
  border-radius: 5px;
  padding: 20px;
  width: 100%;
}

.hc-games.hc-box,
.hc-box {
  background: var(--footer-color);
  border: var(--hc-box-border) 1px solid;
}

.hc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}

.hc-title {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.hc-title img {
  width: 50px;
  margin-right: 5px;
  filter: hue-rotate(220deg);
}

.hc-body {}

.hc-body>img {
  width: 100%;
  border-radius: 6px;
  border: #33407a 1px solid;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%);
}

.hc-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

.hc-button a {
  min-width: 50%;
  text-align: center;
  color: var(--secondary-text-color);
  box-shadow: inset 0 0 2px #a36614;
  transition: 0.3s;
}

.hc-casino .provider-list {
  padding: 0;
}

.hc-casino .provider-list li {
  max-width: calc(25% - 1em) !important;
  font-size: 12px;
  margin: 0 0.5em;
}

.hc-casino .provider-list li.tag-special .p-box {
  display: block;
  background-position: center right 15%;
}

.hc-casino .provider-list li.tag-special .p-box:after {
  left: auto;
  right: 0;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  padding-left: 2em;
  padding-right: 0.7em;
}

.hc-casino .provider-list li.tag-special .p-box .p-img {
  width: 100%;
  margin: 0 !important;
}

.hc-casino .provider-list li.tag-special .p-box .p-logo,
.hc-casino .p-logo {
  width: 75%;
  max-width: 150px;
}

.hc-games.hc-box {
  max-width: calc(100% - 1em);
  background: url(/theme/asset/template_desktop15/imgs/bg-img-02.webp);
  background-color: #0e182f;
  background-repeat: no-repeat;
  background-position: 0 -12px;
}

.hgames-list {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.hgames-list li {
  list-style-type: none;
  flex: 1;
  padding: 5px;
  position: relative;
}

.hgames-b {
  background: transparent;
  text-align: center;
  position: relative;
  font-size: 0.8em;
}

.hgames-b img {
  display: block;
  margin: 0 auto 4px;
  max-width: 100%;
}

.hgames-b.tag-exclusive:after {
  content: "EXCLUSIVE";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  color: var(--text-color);
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, #7862ff 0, #150097 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  display: table;
  padding: 0 1.5em;
  font-size: 1em;
}

.hgames-b.tag-exclusive img {
  border: 2px solid var(--button-bg-color);
  box-shadow: 0px 0px 6px 0px rgb(203, 182, 152, 0.7);
  border-radius: 10px;
}

.hgames-list .tag-new:before,
.hgames-list .tag-promo:after {
  position: absolute;
  top: 15px;
  left: 7px;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  margin: auto;
  font-size: 0.7em;
  z-index: 3;
  line-height: 1em;
  padding: 0.2em 0.8em 0.2em 0.3em;
}

.hgames-list .tag-new:before {
  content: "NEW";
  background: red;
  animation: 1s ease 0s infinite normal none scale;
}

.hgames-list .tag-promo:after {
  content: "PROMO";
  background: green;
  animation: 1s ease 0s infinite normal none scale;
}

.hgames-list .tag-new.tag-promo:after {
  top: 33px;
}

@media (min-width: 1024px) {
  .hc-casino .provider-list li:nth-child(n + 5) {
    display: none !important;
  }

  .hgames-list li {
    flex: 16.66%;
  }
}

@media (max-width: 1024px) {
  .home-cat {}

  .hc-box {
    max-width: calc(33.33% - 0.5em);
    margin: 0.25em;
    padding: 15px;
  }

  .hc-box.hc-casino {
    max-width: calc(66.66% - 0.5em);
  }
}

@media (max-width: 1023px) {
  .hc-box {
    max-width: calc(50% - 1em);
    margin: 0.5em;
  }

  .hc-box.hc-casino {
    max-width: calc(100% - 1em);
  }

  .hc-box.hc-sport,
  .hc-box.hc-lottery {
    order: -1;
  }

  .hc-box {
    padding: 8px;
  }

  .hc-casino .provider-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .hc-casino .provider-list li {
    max-width: calc(23% - 0.5em) !important;
    min-width: calc(23% - 0.5em) !important;
  }

  .hgames-list {
    flex-direction: column;
    height: 300px;
    overflow-x: auto;
  }

  .hgames-list li {
    flex: 1 1 50%;
    height: 50%;
    width: 170px;
  }
}

@media (max-width: 599px) {
  .home-cat {
    padding: 0;
  }

  .hc-box {
    background: transparent;
  }

  .hc-box.hc-casino,
  .hc-box.hc-games {
    background: #505d64;
  }

  .hc-box .btn-gol {
    display: none;
  }

  .hc-box.hc-casino .btn-gol,
  .hc-games.hc-box .btn-gol {
    display: block;
  }

  .hc-box {
    padding: 5px;
  }

  .hc-casino .provider-list {
    margin: 0 -0.5em;
    padding: 0 5px;
  }

  .hc-casino .provider-list li {
    max-width: calc(40% - 0.5em) !important;
    min-width: calc(40% - 0.5em) !important;
  }

  .hc-box.hc-casino,
  .hc-games.hc-box {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    padding: calc(0.5em + 5px);
  }

  .hc-games.hc-box .hgames-list {
    margin: 0 calc(-0.5em - 5px);
    padding: 0 calc(0.5em + 5px);
  }
}

/***************************************************************************** PAGE - PROVIDER GAMES LIST */
.provider-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 0;
}

.provider-list li {
  list-style-type: none;
  margin: 0.5em;
  max-width: calc(20% - 1em);
  border-radius: 6px;
}

.p-box {
  border-radius: 6px;
  border: 1px solid #505d64;
  position: relative;
  display: block;
  overflow: hidden;
  background: #37474f;
  background: linear-gradient(169.56deg, #91440b 2.55%, #4e1b01 92.22%);
  box-shadow:
    0 1px 3px #0000001f,
    0 1px 2px #0000003d;
  background-image: url("/theme/asset/template_desktop15/imgs/bg-normal.gif");
  background-size: cover !important;
}

.p-box:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  margin: auto;
  background: linear-gradient(to bottom, transparent, #140a00);
  pointer-events: none;
}

.p-box:hover {
  filter: brightness(1.1);
}

.provider-list li .p-box:after {
  position: absolute;
  display: table;
  font-size: 0.8em;
  font-weight: bold;
  margin: auto;
  pointer-events: none;
  padding: 0.3em 2em 0;
}

.p-logo {
    display: block;
    margin: 15px auto;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.p-img {
  display: block;
  width: 100%;
}

.p-name {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  padding: 0.5em 1em;
  font-size: 0.8em;
}

.p-box:hover .p-name {
  color: #bf8e13;
}

.provider-list li.tag-special {
  max-width: calc(40% - 1em);
  animation: tagspecial 3s ease-in-out infinite;
}

.provider-list li.tag-special .p-box {
  border: 2px solid #26c6da;
  display: flex;
  align-items: center;
  height: 100%;
  background-image: url("/theme/asset/template_desktop15/imgs/bg-special.gif?v1");
  background-size: cover;
  background-position: center right;
}

.provider-list li.tag-special .p-box:before {
  background: linear-gradient(to bottom, transparent, #08131d);
}

.provider-list li.tag-special .p-box:after {
  content: "SPECIAL";
  bottom: -1px;
  right: 1em;
  background: #26c6da;
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
}

.provider-list li.tag-special .p-box .p-logo {
  max-width: 200px;
  width: 34%;
}

.provider-list li.tag-special .p-box .p-img {
  width: 60%;
  margin-top: auto;
}

.provider-list li.tag-cs3 {
  display: none;
}

.provider-list li.tag-cs {}

.provider-list li.tag-cs .p-box {
  height: 100%;
  filter: none !important;
  background: #14191d;
}

.provider-list li.tag-cs .p-box:before {
  display: none;
}

.provider-list li.tag-promo {
  /*animation: tagpromo 3s ease-in-out infinite;*/
}

.provider-list li.tag-promo .p-box {
  border: 1px solid #139c44;
  background: radial-gradient(50% 50% at 50% 50%, #06d60e 0, #0a8835 100%);
  background-image: url("/theme/asset/template_desktop15/imgs/bg-promo.gif");
}

.tag-promo .p-box:before {
  background: linear-gradient(to bottom, transparent, #073c1b);
}

.provider-list li.tag-promo .p-box:after {
  content: "PROMO";
  bottom: -1px;
  right: -1px;
  padding-right: 1em;
  background: #139c44;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 10% 50%, 0% 0%);
}

.provider-list li.tag-hot {
  /* animation: taghot 1s ease-in-out infinite;*/
}

.provider-list li.tag-hot .p-box {
  border: 1px solid #ffa862;
  background: radial-gradient(132.2% 117.19% at 50%, at -17.19%, #ffc531 0, #c90909 100%);
  background: radial-gradient(132.2% 117.19% at 50% -17.19%, #ffc531 0, #c90909 100%);
  background-image: url("/theme/asset/template_desktop15/imgs/bg-hot.gif");
}

li.tag-hot .p-box:before {
  background: linear-gradient(to bottom, transparent, #1b0d02);
}

.provider-list li.tag-hot .p-box:after {
  content: "HOT";
  bottom: -1px;
  right: -1px;
  padding-right: 1em;
  background: #df7903;
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
}

@keyframes tagspecial {

  0%,
  100% {
    box-shadow: 0 0 10px #26c6da;
  }

  50% {
    box-shadow: 0 0 10px #166872;
  }
}

@keyframes tagpromo {

  0%,
  100% {
    box-shadow: 0 0 10px #139c44;
  }

  50% {
    box-shadow: 0 0 10px #a9e2bd;
  }
}

@keyframes taghot {

  0%,
  100% {
    box-shadow: 0 0 10px #c2185b;
  }

  50% {
    box-shadow: 0 0 10px #67022a;
  }
}

@media (max-width: 1440px) {
  .provider-list {
    padding: 10px;
  }
}

@media (max-width: 1200px) {
  .provider-list li {
    max-width: calc(25% - 1em);
  }

  .provider-list li.tag-special {
    max-width: calc(50% - 1em);
  }
}

@media (max-width: 1023px) {
  .provider-list li {
    max-width: calc(33.33% - 1em);
  }

  .provider-list li.tag-special {
    max-width: calc(66.66% - 1em);
  }

  .provider-list li.tag-cs {
    display: none !important;
  }
}

@media (max-width: 699px) {
  .provider-list {
    padding: 1em 0.25em;
  }

  .provider-list li {
    max-width: calc(33.33% - 0.5em);
    margin: 0.25em;
  }

  .provider-list li.tag-special {
    max-width: calc(66.66% - 0.5em);
  }

  .provider-list li.tag-special .p-box {
    padding: 0 5%;
  }

  .provider-list li.tag-special .p-box .p-logo {
    width: 40%;
    position: relative;
    z-index: 2;
  }

  .provider-list li.tag-special .p-box .p-img {
    margin-left: -25%;
    width: 75%;
  }

  .provider-list li.tag-special .p-box:after {}

  .provider-list li .p-box:after {
    font-size: 0.7em;
  }

  .p-name {
    font-size: 0.6em;
    display: none;
  }
}

/*--- PLEASE LOGIN ---*/
#plslogin.modal.pop .modal-dialog {
  transform: scale(0);
  transition: transform 400ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
}

#plslogin.modal.in .modal-dialog {
  transform: scale(1);
}

#plslogin .modal-content {
  background: var(--secondary-color);
}

#plslogin .modal-body {
  padding: 40px;
  text-align: center;
}

#plslogin .modal-body img {
  width: 80px;
}

#plslogin .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: right;
}

#plslogin .modal-footer button {
  background: transparent;
  margin-right: 15px;
  font-size: 0.8em;
  color: #829daa;
}

#plslogin .modal-footer button:hover {
  color: var(--text-color);
}

#plslogin .modal-footer .btn-login {
  width: auto;
}

.modal-dialog-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100% - (0.5rem * 2));
}

@media (min-width: 576px) {
  .modal-dialog-centered {
    min-height: calc(100% - (1.75rem * 2));
  }
}

/**************************************************************************************************************************** PROMOTIONS */

/** Promotion **/
.promotion-sec {
  padding: 0 0 30px;
}

.promo {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Tabs */
ul#promo-tab {
  display: flex;
  padding: 3px;
  border-radius: 45px;
  margin: 0 0 15px;
  max-width: fit-content;
  overflow-x: auto;
}

ul#promo-tab li {
  cursor: pointer;
  transition: 0.2s;
  margin: 2px 5px;
  background: #242938;
  color: #fff;
  min-width: 55px;
  text-align: center;
  border-radius: 45px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 3px solid #242938;
  font-weight: bold;
}

ul#promo-tab li.active,
ul#promo-tab li:hover {
  background: transparent;
  color: var(--link-color);
  border-color: #b4862f;
}

/* Promo Grid */
.promo-content ol#faq_modal {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.promo-content ol#faq_modal li.question {
  width: calc(50% - 10px);
  list-style: none;
  margin: 0;
}

.promo a {
  text-decoration: none;
}

/* Promo Image */
.promo-img {
  position: relative;
  overflow: hidden;
}

.promo-img:before {
  content: '';
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent);
  opacity: 0;
  transition: .3s;
}

.promo-content ol#faq_modal li.question:hover .promo-img:before {
  opacity: 1;
}

.promo-img img {
  border-radius: 12px;
  width: 100%;
  transition: 0.3s;
}

/* Promo Text Overlay */
.promo-txt {
  width: 50%;
  padding: 15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.promo-txt h3 {
  color: var(--tertiary-text-color);
  font-weight: bold;
  margin: 0;
  font-size: 28px;
}

/* Buttons */
.promo-btn {
  display: flex;
  gap: 10px;
  opacity: 0;
  margin-top: 10px;
  transform: translateY(20px);
  transition: .3s;
  position: absolute;
}

.promo-content ol#faq_modal li.question:hover .promo-btn {
  opacity: 1;
  transform: translateY(0);
}

.promo-btn a {
  color: var(--tertiary-text-color);
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
}

.pbtn-info {
  padding: 8px 10px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: .3s;
}

.pbtn-info:hover {
  background: #ead87d;
  color: #000;
  border-color: #ead87d;
}

.pbtn-apply {
  padding: 8px 10px;
  background: #ff0000;
  color: #fff;
  border: 1px solid #ff0000;
  font-size: 12px;
  border-radius: 5px;
}

/** Promotion **/
.promotion-sec {
  padding: 0 0 30px;
}






#promotion-filter {
  padding-bottom: 1em;
}

#myBtnContainer {
  border-radius: 10px;
  padding: 0.5em 1em;
  padding-left: 10px;
  display: flex;
}

#myBtnContainer .btn {
  box-shadow: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  color: var(--text-color);
  transition: color 0.2s ease-in-out;
  font-size: 0.8em;
  cursor: pointer;
  flex: 1;
  background: #505d64;
  margin: 0.25em;
}

#myBtnContainer .btn:hover {
  background: url(--header-top-bg-color);
}

#myBtnContainer .btn.active {
  background: var(--primary-color);
}

@media screen and (max-width: 768px) {
  #myBtnContainer {
    overflow-x: auto;
    padding-left: 0.5em;
  }

  #myBtnContainer .btn {
    font-size: 0.8em;
  }
}

#faq_modal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

#faq_modal>li {
  list-style-type: none;
  max-width: 50%;
}

.promot {
  margin: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: rgba(255, 255, 255, 0.2) 1px solid;
  box-shadow: 0px 0px 6px 0px rgb(203, 182, 152, 0.7);
}

.promo-i {}

.promo-i img {
  width: 100%;
}

.promo-d {
  display: flex;
  justify-content: right;
  align-items: center;
  box-shadow: 0 10px 13px rgba(0, 0, 0, 0.1);
  background-color: var(--secondary-color);
  padding: 10px 10px;
  border: rgba(255, 255, 255, 0.2) 1px solid;
  background: linear-gradient(180deg, #222222 0%, #000000 100%);
}

.promo-d .btn-more {
  margin-right: 6px;
}

.promo-d .btn-gol {}

@media screen and (max-width: 1023px) {
  .promo-content ol#faq_modal li.question {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 650px) {
  .promo-d {
    font-size: 12px;
  }
}

@media only screen and (max-width: 479px) {
  #promotion-filter {
    padding: 10px 10px 10px;
  }

  .tag-cs3 {
    display: block !important;
  }

  .tag-cs4 {
    display: none;
  }

  .footer-partner {
    margin: 10px;
    background: rgba(0, 0, 0, 0.1);
    border: rgba(255, 255, 255, 0.1) 1px solid;
    border-radius: 5px;
    box-shadow:
      0 1px 3px #0000001f,
      0 1px 2px #0000003d;
  }
}

.fancybox-skin {
  background: #141414;
  border: 1px solid #323232;
  color: #808080;
}

.fancybox-inner {
  padding-bottom: 50px;
}

.fancybox-inner .promot {
  display: flex !important;
  justify-content: center;
  align-items: center;
  box-shadow: none;
  border-radius: 0;
}

.fancybox-inner .promot .promo-i {}

.fancybox-inner .promot img {
  width: auto;
  max-width: 100%;
  border-radius: 5px;
  border: 1px solid #505d64;
}

.fancybox-inner .promot .promo-d .btn-login {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 3;
  width: 50%;
  transform: translateX(-50%);
}

.fancybox-inner .promot .promo-d .btn-register {
  display: none;
}

.fancybox-inner .promot .promo-d {
  padding: 0;
  border: 0;
}

@keyframes scale {
  0% {}

  10% {}

  50% {
    filter: brightness(1.5);
  }

  80% {}

  100% {}
}

@keyframes ani-down-top {

  0%,
  to {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/******************NEW ADDED*******************/
.hc-body .hgames-list {
  display: flex;
}

.hc-body .slot-side {
  display: none;
}

.d-menuprod {
  display: block;
}

.m-menuprod {
  display: none;
  width: 45px !important;
}

.menuname {
  display: none;
}

.games-content .tag-new:before {
  content: "NEW";
  background: red;
  animation: 1s ease 0s infinite normal none scale;
}

.games-content .tag-promo:after {
  content: "PROMO";
  background: green;
  animation: 1s ease 0s infinite normal none scale;
}

.games-content .tag-new.tag-promo:after {
  top: 33px;
}

.games-content .tag-new:before,
.games-content .tag-promo:after {
  position: absolute;
  top: 15px;
  left: 0px;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  margin: auto;
  font-size: 0.7em;
  z-index: 3;
  line-height: 1em;
  padding: 0.2em 0.8em 0.2em 0.3em;
}

.header-topright #customform_UserName,
.header-topright #customform_Password {
  color: var(--secondary-text-color);
}

.p-name {
  font-weight: bold;
}

#registerform_btnSubmit {
    background: linear-gradient(180deg, #980000, #420000);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 90px;
    height: 51px;
    border: 0;
    margin: 15px auto 25px;
    font-size: 1em;
    min-width: 50%;
}

.btn-login:hover {
  background: var(--button-bg-color);
}

a.btn-login:hover {
  background: var(--button-bg-color);
}

#customform dl dd i:nth-child(2) {
  display: none;
}

#theme-contain-login #customform_UserName,
#theme-contain-login #customform_Password {
  background: transparent;
}

#contact-info h4,
#contact-info p {
  margin: 0;
}

li#contact-livechat:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(/theme/asset/template_desktop15/imgs/live.png);
  background-size: contain;
  background-repeat: no-repeat;
}

li#contact-phone:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(/theme/asset/template_desktop15/imgs/tele.png);
  background-size: contain;
  background-repeat: no-repeat;
}

li#contact-whatsapp:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(/theme/asset/template_desktop15/imgs/whatsapp.png);
  background-size: contain;
  background-repeat: no-repeat;
}

li#contact-facebook:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url(/theme/asset/template_desktop15/imgs/fb.png);
  background-size: contain;
  background-repeat: no-repeat;
}

#contact-info>ul>li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

#contact-info>ul {
  margin: 0;
}

.contact_form {
  display: none;
}

.gameheader a {
  flex-grow: 1;
  text-align: right;
  color: var(--button-bg-color);
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
}

.gameheader {
  font-weight: bold;
  text-transform: uppercase;
  background: var(--secondary-color);
  padding: 5px 20px;
  display: flex;
  align-items: center;
  margin: 0 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow:
    0 3px 3px -2px rgba(0, 0, 0, 0.2),
    0 3px 4px 0 rgba(0, 0, 0, 0.14),
    0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.gameheader img {
  height: 40px;
  margin-right: 10px;
}

ul#slot-tabs li.inactive:hover {
  background: var(--container-bg-color);
  filter: grayscale(0);
}

.slot-more {
  margin: 10px 0;
  padding-left: 10px;
}

.slot-more ul li img {
  width: 100%;
}

.slot-more ul li {
  width: calc(12.5% - 10px);
  padding: 10px;
  list-style: none;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  box-shadow:
    0 3px 3px -2px rgba(0, 0, 0, 0.2),
    0 3px 4px 0 rgba(0, 0, 0, 0.14),
    0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.slot-more ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  flex-direction: row;
  text-align: center;
  gap: 10px;
  align-items: center;
}

.slot-more h3 {
  color: #fff;
}

.txt-box {
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}

.games {
  width: 100%;
}

.games>ul {
  display: flex;
}

.games-content ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.games-content ul li {
  width: calc(100% / 5.5);
  margin: 4px 7px;
  transition: 0.3s;
  border-radius: 5px;
  overflow: hidden;
}

.games-content ul>li>img {
  width: 100%;
}

.more-games {
  flex-grow: 3;
  text-align: right;
}

.games>ul li {
  padding: 10px 20px;
  background: #ec1c23;
  border-radius: 5px 5px 0 0;
  font-weight: bold;
  cursor: pointer;
  margin-right: 10px;
  border: 1px solid #ec1c12;
  list-style: none;
}

.games>ul li.inactive {
  background: #181717;
  border: 1px solid #ffffff40;
}

.games>ul li a {
  color: #fff;
  text-decoration: none;
}

.games>ul li.inactive a {
  color: #ffffff40;
}

.games>ul li.inactive {
  background: #181717;
  border: 1px solid #ffffff40;
}

.games>ul li:hover a {
  color: #fff;
  transition: 0.2s;
}

.games>ul li:hover {
  background: #ec1c23;
  transition: 0.2s;
}

ul#tabss {
  border-bottom: 1px solid #2d2d2d;
}

.more-games {
  flex-grow: 3;
  text-align: right;
  padding: 10px 20px;
  font-weight: bold;
}

.more-games a {
  color: #ec1c23;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}

.img-box {
  position: relative;
}

.img-box img {
  width: 100%;
}

.slot-container {
  display: flex;
  width: auto;
}

ul#slot-tabs {
  display: flex;
  padding: 0;
  flex-direction: column;
  margin: 0;
}

ul#slot-tabs li {
  padding: 10px 20px;
  text-align: center;
  list-style: none;
  cursor: pointer;
}

ul#slot-tabs li:not(:last-child) {
  border-bottom: 1px solid #3f4143;
}

ul#slot-tabs li img {
  width: auto;
  height: 50px;
}

.slot-side {
  margin-left: 10px;
  background: var(--footer-color);
  height: 100%;
  box-shadow:
    0 3px 3px -2px rgba(0, 0, 0, 0.2),
    0 3px 4px 0 rgba(0, 0, 0, 0.14),
    0 1px 8px 0 rgba(0, 0, 0, 0.12);
}

.slot-game {
  padding: 0 0px 15px 20px;
}

ul#slot-tabs li.inactive {
  filter: grayscale(1);
  background: var(--secondary-color);
}

.slot-game .games-content ul li {
  width: calc(100% / 5);
  padding: 10px;
  margin: 0;
}

.slot-game .more-games {
  text-align: right;
  padding: 20px 10px;
}

ul#games-subtab {
  padding: 10px 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

ul#games-subtab li {
  padding: 0px 35px;
  list-style: none;
  color: #5c5c5c;
  border-right: 1px solid #606060;
  cursor: pointer;
  font-weight: bold;
}

ul#games-subtab li:not(.inactive) {
  color: #ec1c12;
}

#divFooter {
  margin-top: 30px;
}

.nav-btm ul li:nth-child(3) img {
  padding-top: 10px;
  width: 45%;
}

.nav-btm {
  display: none;
  background: linear-gradient(360deg, #a66719, #dbb74f);
  position: fixed;
  bottom: 0;
  left: 0px;
  width: 100%;
  z-index: 10;
  background-size: cover;
}

.nav-btm ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav-btm ul li {
  width: 17%;
  display: inline-block;
}

.nav-btm ul li a {
  color: #220000;
  font-size: 10px;
  font-weight: bold;
}

.nav-btm ul li img {
  width: 40%;
  max-width: fit-content;
  padding: 20px 0px 0px;
}

.nav-btm ul li p {
  font-size: 11px;
  margin-bottom: 5px;
}

.nav-btm ul li:nth-child(3) {
  width: 24%;
}

.bank ul li:nth-child(4) img {
  width: 100%;
}

.bank ul li:nth-child(4) {
  width: 19%;
}

.bank ul li:nth-child(4) .dot {
  top: -2px;
  left: -2px;
}

.bank {
  background: linear-gradient(140deg, rgba(50, 9, 9, 1) 0%, rgba(87, 7, 7, 1) 100%);
  padding: 15px 10px 15px 10px;
  text-align: center;
  overflow: hidden;
  margin: 0;
}

.bank p {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
}

.bank ul {
  padding: 5px;
  margin: 0;
}

.bank ul li {
  display: inline-block;
  float: left;
  color: #ffffff;
  text-transform: uppercase;
  width: 13.5%;
  position: relative;
}

.bank ul li img {
  width: 70%;
  padding-left: 3px;
  filter: brightness(100);
}

.bank ul li .dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #6cff00;
  border-radius: 3px;
  top: 4px;
  left: 4px;
}

.hc-battle.hc-box .hc-body img {
  margin-left: -10%;
}

.hc-battle.hc-box .hc-top {
  justify-content: end;
  padding-bottom: 10px;
  padding-right: 20px;
}

.hc-lotto.hc-box .hc-top {
  padding-top: 10px;
  padding-bottom: 0;
  padding-left: 20px;
}

.hc-battle.hc-box {
  float: left;
  padding: 0;
  margin: 0;
  max-width: initial;
  width: 50%;
  border: 0;
}

.hc-lotto.hc-box {
  float: left;
  padding: 0;
  margin: 0;
  max-width: initial;
  width: 50%;
  border: 0;
}

.spsec2 img {
  width: 110%;
}

.mtg {
  width: 50px !important;
}

.spsec,
.spsec2,
.bank {
  display: none;
}

.spimg1 {
  float: left;
  margin-bottom: 10px;
}

.spimg2 {
  float: right;
  margin-bottom: 30px;
}

.spsec img {
  width: 90%;
}

.hc-button a {
  background: var(--button-bg-color);
}

a#header-register {
  background: var(--button-radial-gradient);
  height: unset;
  border: 1px solid transparent;
  width: 90px;
  border: 0;
}

a#header-login,
#customform_submit {
  color: var(--link-color) !important;
  font-weight: bold;
  background: var(--warning-color);
  background: radial-gradient(132.2% 117.19% at 50% -17.19%, #b30000 0, #5c0000 100%);
  width: 100%;
  text-shadow: 1px 1px 0 #a21b1b;
  border: 2px solid #a21b1b;
  height: unset;
}

.btn-go {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 8px 20px;
  font-size: 0.8em;
  border: 1px solid transparent;
  position: relative;
  transition: 0.1s ease-in-out;
  text-align: center;
  margin: 6px 3px;
  line-height: normal;
}

.btn-register:hover,
#registerform_btnSubmit:hover {
  background: #6f0700;
}

#promosec {
  padding: 0.5em 1em;
  display: flex;
}

#promosec .btn {
  box-shadow: none;
  padding: 0.5em 1em;
  border-radius: 6px;
  color: #fff;
  transition: color 0.2s ease-in-out;
  font-size: 0.8em;
  cursor: pointer;
  flex: 1;
  background: #505d64;
  margin: 0.25em;
}

#promosec .btn.active {
  background: var(--button-bg-color);
}

.flex-direction-nav {
  height: 0;
  display: none;
}

.hc-games.hc-box,
.hc-box {
  background: var(--footer-color);
  border: var(--hc-box-border) 1px solid;
}

.btn-gol {
  background: #842e31;
  padding: 5px 15px;
}

.btn-menu {
  border-left: 2px var(--button-hover-bg-color) solid;
}

.nav-breadcrumbs a.active {
  color: var(--link-visited-color);
}

.nav-breadcrumbs a {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .divHeader-top {
    background: var(--header-top-bg-image);
  }

  .hc-box.hc-casino,
  .hc-games.hc-box {
    background: var(--slot-side-bg-mobile);
    border-radius: 30px 30px 0 0;
  }

  .home-cat {
    padding: 0;
    padding-top: 30px;
    border-radius: 30px 30px 0 0;
    background: var(--footer-color);
    margin-top: -40px;
  }

  .hc-games.hc-box {
    padding-bottom: 50px;
  }

  .hc-box {
    background-color: transparent;
    border-color: transparent;
    background: transparent;
  }

  .spsec,
  .spsec2,
  .bank,
  .nav-btm {
    display: block;
  }

  .hc-casino.hc-box {
    padding-bottom: 70px;
  }

  #divFooter {
    margin-top: 0;
  }

  .spsec2 {
    padding: 40px 0;
    border-radius: 30px 30px 0 0;
    background: var(--footer-color);
    margin-top: -40px;
  }

  .hc-horse.hc-box,
  .hc-fish.hc-box,
  .hc-lottery.hc-box,
  .hc-casino.hc-box,
  .hc-sport.hc-box {
    background: linear-gradient(90deg, rgb(222 189 54 / 31%) 0.04%, rgb(209 142 41 / 15%));
    border: #7a7033 1px solid;
  }

  .hc-games.hc-box,
  .hc-box {
    border: #7a5e33 1px solid;
    background: url(/theme/asset/template_desktop15/imgs/bg-img-02.webp);
    background-color: #2f250e;
    background-repeat: no-repeat;
    background-position: 0 -12px;
  }

  .hc-title img {
    filter: grayscale(2) brightness(5);
    width: 30px;
    margin-right: 10px;
  }

  .slot-container {
    display: flex;
    width: auto;
    flex-wrap: wrap;
  }

  .slot-side {
    background: var(--slot-side-bg-mobile);
    margin-left: 0;
    border-radius: 20px;
    width: 100%;
  }

  ul#slot-tabs li {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    filter: brightness(1.1);
    flex-direction: column;
  }

  ul#slot-tabs li.inactive {
    background: transparent !important;
  }

  .slot-game {
    padding: 12px;
  }

  ul#slot-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .slot-game .games-content ul li {
    width: calc(100% / 2);
    margin: 0;
  }

  ul#slot-tabs li:not(:last-child) {
    border-bottom: 0;
  }

  ul#slot-tabs li img {
    width: 100%;
    height: auto;
  }

  .slot-more ul li {
    width: calc(20% - 10px);
    padding: 3px;
    height: 50px;
  }

  .d-menuprod {
    display: none;
  }

  .m-menuprod {
    display: block;
  }

  .menuname {
    display: block;
    font-size: 10px;
  }

  .hc-body .hgames-list {
    display: none;
  }

  .hc-body .slot-side {
    display: block;
    box-shadow: none;
  }

  .hc-body .slot-side ul#slot-tabs li {
    filter: brightness(1.1);
    width: 20%;
  }
}

@media (max-width: 1023px) {
  .divHeader-nav {
    background: var(--container-bg-color);
  }

  #cssmenu>ul>li>a,
  #cssmenutop ul li a {
    width: 20vw;
  }

  .flexslider .slides img {
    border-radius: 0;
  }
}