:root {
        /* Base Colors */
        --primary-color: #37474f;
        --secondary-color: #282828;
        --background-color: #102027;
        --footer-color: #37474f;

        /* Header and Sidebar */
        --header-top-bg-color: #37474f;
        --header-top-bg-image: #102027;
        --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: #37c2d6;
        --link-visited-color: #26c6da;

        /* Button Colors */
        --button-bg-color: #33aeda;
        --button-text-color: #fff;
        --button-hover-bg-color: #505d64;
        --button-active-bg-color: #055e84;
        --button-tertiary-color: #c3c3c3;
        --button-go-bg: #1a3d77;
        --button-radial-gradient: radial-gradient(132.2% 117.19% at 50% -17.19%, #62c6ff 0, #526eff 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: #505d64;
        --card-bg-image: url(/theme/template_desktop15/imgs/bg-casino.png);
        --announce-container-bg: #505d64;
        --slot-side-bg-mobile: #4d3333;
        --hc-box-border: #634343;
    }

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

* {  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;  }


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


/**************************GAMES LOGO ************************** /
#ulgames-logo {  display: inline;  }
#ulgames-logo li {  float: left;  list-style: none;  }


/************************************ MENU ************************************/
#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;  z-index: 9998;  background: none;  width: auto;  line-height: 1;  font-family: "Open Sans", sans-serif;  }
#cssmenu::after {  height: 0px;  line-height: 0;  clear: both;  display: block;  visibility: hidden;  content: ".";  }
#cssmenu #menu-button {  display: none;  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::after {  height: 0px;  line-height: 0;  clear: both;  display: block;  visibility: hidden;  content: ".";  }
#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>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 .2s ease;  -moz-transition: color .2s ease;  -o-transition: color .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 {  float: left;  }
#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 li:hover>ul {  left: auto;  }
#cssmenu ul li:hover>ul>li {  height: 32px;  }

#cssmenu ul ul {  left: -9999px;  position: absolute;  }
#cssmenu ul ul li {  transition: height 0.2s;  height: 0px;  -webkit-transition: height .2s ease;  -moz-transition: height .2s ease;  -o-transition: height .2s ease;  }
#cssmenu ul ul li:hover>a {  background: rgb(15, 21, 33);  color: rgb(251, 170, 25);  }
#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 .2s ease;  -moz-transition: color .2s ease;  -o-transition: color .2s ease;  }
#cssmenu ul ul li a:hover {  background: rgb(15, 21, 33);  color: #cdcdcd;  }
#cssmenu ul ul li a:first-child {  border: 0px currentColor;  border-image: none;  }

#cssmenu ul ul li.has-sub:hover>a::after {  border-color: rgb(255, 255, 255);  }
#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);  }

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

#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;  }

.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 li:hover>ul {  right: 0px;  }
.align-right#cssmenu ul ul {  text-align: right;  }
.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;  }
.align-right#cssmenu ul ul ul {  margin-right: 100%;  margin-left: 0px;  }


/************************************************ 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;  }


/************************************************************* 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(--primary-text-color);  }

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

h1 {  color: var(--link-hover-color); }
h2 {  color: var(--link-hover-color);  }
h3 {  color: var(--text-color);  }
h4 {  color: var(--primary-text-color);  }
h5 {  color: var(--primary-text-color);  }

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(--primary-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-corner {  background: transparent;  }
/*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/


/**************************************** 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, #customform1_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: 0px 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, #customform1_submit 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, #customform1_submit, .btn-more {  color: var(--link-color) !important;  font-weight: bold;  background: var(--button-gradient-blue);  width: 100%;  text-shadow: 1px 1px 0 var(--secondary-color);  height: unset;  }
.btn-login:hover, #customform_submit:hover, #customform1_submit:hover, .btn-more:hover {  background: var(--secondary-color);  }
.btn-login:active, #customform_submit:active, #customform1_submit:active, .btn-more:active {  }
.btn-login img, .btn-register img, .btn-go img {  filter: grayscale(1) brightness(5);  }

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

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

.btn-register, #registerform_btnSubmit {  color: var(--primary-text-color);  font-weight: bold;  background: var(--button-gradient-red);  white-space: nowrap;  height: unset;  border: 0px solid transparent;  }
.btn-register:hover {  background: var(--primary-color);  color: var(--primary-text-color);  transition: 0.3s;  }
.btn-register:hover, #registerform_btnSubmit:hover {  background: var(--primary-color);  transition: 0.3s; }
.btn-register:active, #registerform_btnSubmit:active {  }

.btn-play, .btn-go {  color: var(--primary-text-color);  font-weight: bold;  background: var(--button-gradient-yellow);  }
.btn-play:hover, .btn-go:hover {  background: var(--quater-color);  }
.btn-play:active, .btn-go:active {  background: #ca0e0e;  }
.btn-play, .btn-go {  display: table;  }

.btn-gol {  color: var(--secondary-text-color);  font-weight: bold;  background: var(--background-color);  border-radius: 50px;  display: table;  box-shadow: inset 0 0 2px #445c93;  padding: 5px 15px;  }
.btn-gol:hover {  background: var(--secondary-text-color);  color: var(--primary-text-color);  }

@media (max-width: 600px) {  .btn-login, .btn-register, .btn-playnow, .btn-claim, #customform_submit, #customform1_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;  max-width: 1220px;  }
.div-term .static-page__content h2 {  font-size: 1em;  }
.div-term ul {  margin: 0;  }
.div-term li {  margin: 8px 0 8px 15px;  }
.div-term .content p {  margin: 10px 0 10px;  }

.collapse-box {  border: none;  border-radius: 10px;  margin: 10px 0;  background: var(--background-color);  color: var(--secondary-text-color);  }

.btn-collapse {  width: 100%;  border-radius: 6px;  margin: 0;  text-align: left;  border: 0;  position: relative;  padding: 7px 15px;  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 {  background-color: var(--background-color);  color: var(--text-color);  border-radius: 5px;  }
.btn-collapse.collapsed:after {  content: "+";  position: absolute;  top: 0;  bottom: 0;  right: 10px;  display: flex;  justify-content: center;  align-items: center;  color: var(--secondary-text-color);  font-weight: bold;  font-size: 21px;  }
.btn-collapse:hover {  color: var(--primary-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(--secondary-text-color);  font-weight: normal;  font-size: 21px;  }

.content.collapse {  padding: 0 20px; }
.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(--primary-text-color);  color: var(--secondary-text-color);  width: 100%;  }
#theme-contain-adminloginx input[type="submit"] {  width: auto;  background: var(--primary-color);  color: var(--primary-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;  }

#cssmenu {  position: static;  background: var(--primary-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(--primary-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: 600;  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);  padding: 3px;  }
#cssmenu>ul>li.active>a, #cssmenu>ul>li:hover>a, #cssmenutop ul li a:hover, #cssmenutop ul li a.active {  color: var(--secondary-text-color);  }
#cssmenu>ul>li.active>a>img, #cssmenutop ul li a.active img {  filter: grayscale(1) brightness(0.1);;  }
#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(--secondary-text-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>ul>li {  flex: 1 16.66%;  max-width: 16.66%;  height: auto;  }
#cssmenu>ul>li.has-sub:hover>ul {  max-height: 500px;  transition: max-height 0.2s ease-in-out;  }
#cssmenu ul ul li a {  background: transparent;  width: auto;  font-size: 0.7em;  }

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


@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(--header-top-bg-color);  overflow-y: auto;  display: flex;  flex-direction: column;  justify-content: space-between;  }
#menutop {  background: var(--primary-color);  }

#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) brightness(5);  }
#menuadd a:hover, #menuadd a.active {  color: var(--primary-color);  }
#menuadd a:hover img, #menuadd a.active img {  filter: none;  filter: hue-rotate(180deg) saturate(5);  }
#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: 0;  padding: 0 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 *****************************************************/
.customform1 {  padding: 0px;  max-width: 450px;  margin: auto;  }
.customform1 dl:nth-child(5) dd, .customform dl:nth-child(6) dd {  background: #fff;  margin: 3px;  }
.customform1 dl:nth-child(7) dd {  display: flex;  border: 0;  }
.customform1 dd {  text-align: center;  display: flex;  align-items: center;  border: 1px solid rgba(0, 0, 0, 0.2);  border-radius: 6px;  margin: 0;  }
.customform1 i {  padding-left: 10px;  padding-right: 0px;  position: relative;  }
.customform1 i img {  width: 22px;  filter: hue-rotate(45deg) saturate(5) brightness(0.8); }
.customform1 input {  }

#customform1_UserName {  }
#customform1_Password {  }
#customform1_UserName, #customform1_Password {  width: 100%;  text-align: left;  padding: 10px 15px;  color: var(--secondary-text-color);  }
#customform1_submit {  background: var(--button-gradient-yellow);  }
#customform1_submit:hover {  background: var(--button-gradient-red); }
#customform1_submit:active {  }

.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 dl:nth-child(7) dd {  display: flex;  border: 0;  }
.customform dd {  text-align: center;  display: flex;  align-items: center;  border: 1px solid rgba(0, 0, 0, 0.2);  border-radius: 2px;  margin: 0;  }
.customform i {  padding-left: 10px;  padding-right: 0px;  position: relative;  }
.customform i img {  width: 22px;  filter: hue-rotate(45deg) saturate(5) brightness(0.8); }
.customform input {  }

#customform_UserName {  }
#customform_Password {  }
#customform_UserName, #customform_Password {  width: 100%;  text-align: left;  padding: 10px 15px;  color: var(--secondary-text-color);  }
#customform_submit {  }
#customform_submit:hover {  background: var(--button-gradient-yellow); }
#customform_submit:active {  }

.modal-login .modal-dialog {  background-color: var(--primary-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(--background-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(--primary-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(--secondary-text-color);  font-size: 14px;  padding: 10px 10px;  background-color: var(--background-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;  padding: 10px 20px;  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 {  }
#registerform_btnSubmit {  padding: 15px 75px;  cursor: pointer;  border-radius: 5px;  }
#registerform:after {  font-size: 10px;  color: var(--primary-text-color);  }

#groupSubmit {  text-align: center;  }
#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(--primary-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, #groupReferralCode, #groupEmail {  flex: 1 1 50%;  max-width: 50%;  }
        #groupPassword, #groupCurrency, #groupEmail {  padding-right: 15px;  }
         #groupAffiliate {  max-width: 100%;  padding-left: 0px;  }
        #groupComfirmPassword, #groupMobileNumber, #groupReferralCode {  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 *******************************************/
@media (max-width: 375px) {  .img-logo {  height: 30px;  }  }
.img-logo {  height: 40px;  }

.divHeader-top {  position: sticky;  top: 0;  z-index: 1060;  border-bottom: 1px solid var(--quater-color);  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);  }
.divHeader-top .img-logo {  padding-left: 10px;  margin-top: 10px;  margin-bottom: 10px;  }

.headertop-wrapper {  display: flex;  justify-content: space-between;  align-items: center;  }
.header-topright {  padding-right: 3px;  display: flex;  align-items: center;  }

.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: 5px 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-list>div {  display: flex;  }

.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;  color: var(--secondary-text-color)}
.nav-breadcrumbs a:hover {  text-decoration: underline;  }
.nav-breadcrumbs a.active {  color: var(--secondary-text-color);  order: -1;  }

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

.navcontrol {  position: absolute;  width: 40px;  height: 40px;  z-index: 3;  transition: 0.3s;  visibility: visible;  cursor: pointer;  opacity: 1;  }
.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;  }
.navcontrol:before {  content: "";  position: absolute;  top: 0;  bottom: 0;  z-index: -1;  left: 0;  right: 0;  pointer-events: none;  }

.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 var(--quater-color);  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;  }
        .navcontrol:after {  display: 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));  }
  }

@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(--quater-color) solid;  cursor: pointer;  color: var(--primary-text-color);  font-weight: 400;  font-size: 0.875em;  }
.btn-menu.active {  background: var(--button-hover-bg-color);  color: var(--primary-text-color);  }


@media (min-width: 1024px) {
        .btn-menu {  position: fixed;  top: 0;  left: 0;  z-index: 1061;  border-right: 2px solid var(--quater-color);  border-left: 0;  padding: 0 15px;  border-bottom: 1px solid var(--quater-color);  border-left: 0 !important;  }
        .btn-menu:hover {  color: var(--primary-text-color);  }
        .btn-menu img {  margin-right: 10px;  width: 22px;  filter: hue-rotate(180deg) saturate(5);  filter: grayscale(1) brightness(5);  }
  }

@media (max-width: 1023px) {
        .btn-menu {  width: 100px;  flex-direction: row-reverse;  }
        .btn-menu img {  margin-left: 5px;  width: 18px;  filter: grayscale(1) brightness(5);  }
  }


/******************************************************************* FOOTER **************************************************************/
.footer-container {  background: var(--footer-color);  font-size: 12px;  margin-top: 0;  padding-top: 15px;  }
.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 {  max-height: 150px;  }
.ft-box.col:after {  content: "";  position: absolute;  bottom: 0;  left: 0;  right: 0;  height: 50px;  pointer-events: none;  }
.ft-box-wapper p {  color: var(--text-color);  }
.ft-box-wapper div {  color: #f9f9f9;  }
.ft-box-wapper div b {  color: var(--primary-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: var(--text-color);  }
.footer-social img {  width: 20px;  filter: brightness(100);  margin: 3px;  }
.footer-social img:hover {  filter: none;  }

@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-qlink, .footer-function {  width: 25%;  }
.footer-right {  width: 50%;  }
.footerright {  display: flex;  }
.footer-legal {  width: 50%;  }

.footer-bank {  padding: 10px 0;  width: 100%;  }
.footer-bank img {  display: block;  margin: 0 auto 0;  height: 30px;  filter: drop-shadow(0px 1px 5px #698fca);  }
.footer-bank ul {  margin: 0;  display: flex;  align-items: center;  white-space: nowrap;  color: transparent;  justify-content: space-between;  }
.footer-bank ul>li {  display: block;  background: #08a3de;  list-style-type: none;  text-align: unset;  padding: 5px;  width: auto;  border: none;  border-radius: 6px;  margin: 0;  }
.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-bank img {  height: 20px;  }
  }

.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(--primary-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(--primary-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 {  display: flex !important;  position: absolute;  top: 50%;  justify-content: space-between;  width: 100%;  }
.flex-direction-nav li {  list-style-type: none;  }
.flex-direction-nav .flex-prev {  left: 0px;  }
.flex-direction-nav .flex-next {  right: 0px;  text-align: right;  }
.flex-direction-nav a:before {  margin-top: 12px; }


.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(25% - 1em);  margin: 0.5em;  border-radius: 5px;  padding: 20px;  width: 100%;  }
.hc-box.hc-casino {  max-width: 100%;  /*max-width: calc(66.66% - 1em);*/  }
.hc-games.hc-box, .hc-box {  background: var(--header-top-bg-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: 30px;  margin-right: 5px;  filter: hue-rotate(180deg) saturate(5);  padding: 2px;  }
.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(--primary-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(20% - 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/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(--primary-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(5) {  display: block !important;  }
        .hc-casino .provider-list li:nth-child(n + 6) {  display: none !important;  }
        .hgames-list li {  flex: 16.66%;  }
  }

@media (max-width: 1024px) {
        .home-cat {  }
        .hc-box {  max-width: calc(25% - 0.5em);  margin: 0.25em;  padding: 15px;  }
        .hc-box.hc-casino {  max-width: 100%;  }
  }

@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: 0;  }
        .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;  padding: 5px;  }
        .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-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 #00289c;  position: relative;  display: block;  overflow: hidden;  box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;  background-image: url("/theme/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: 1em auto 0.5em;  width: 90%;  max-width: 150px;  }
.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: var(--tertiary-text-color);  }

.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/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-cs {  }
.provider-list li.tag-cs3 {  display: none;  }
.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(/data/2168/uploads/bg-promo-green.gif);  }
.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(/data/2168/uploads/bg-hot-red.gif);  }
.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%);  }

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


@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(--primary-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));  }
    }


/************************************* PREOMOTIONS *************************************/
#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(--primary-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);  }

#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: 768px) {
        #myBtnContainer {  overflow-x: auto;  padding-left: 0.5em;  }
        #myBtnContainer .btn {  font-size: 0.8em;  }
  }

@media screen and (max-width: 1023px) {  #faq_modal>li {  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 img {  width: auto;  max-width: 100%;  border-radius: 5px;  border: 1px solid #505d64;  }
.fancybox-inner .promot .promo-i {  }
.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 {  width: 90px;  height: 45px;  border: 0;  margin: 15px auto 25px;  font-size: 1em;  min-width: 50%;  }


#customform dl dd i:nth-child(2) {  display: none;  }
#theme-contain-login #customform_UserName, #theme-contain-login #customform_Password {  background: var(--background-color);  }
#contact-info h4, #contact-info p {  margin: 0;  }

li#contact-livechat:before {  content: "";  display: block;  width: 50px;  height: 50px;  background: url(/theme/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/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/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/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 {  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 a {  flex-grow: 1;  text-align: right;  color: var(--button-bg-color);  text-decoration: underline;  font-size: 12px;  cursor: pointer;  }
.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 {  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;  flex-direction: row;  text-align: center;  gap: 10px;  align-items: center;  }
.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 li img {  width: 100%;  }
.slot-more h3 {  color: #fff;  }

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

.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 {  width: 100%;  }
.games>ul {  display: flex;  }
.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 a {  color: #fff;  text-decoration: none;  }
.games>ul li.inactive {  background: #181717;  border: 1px solid #ffffff40;  }
.games>ul li.inactive a {  color: #ffffff40;  }
.games>ul li:hover {  background: #ec1c23;  transition: 0.2s;  }
.games>ul li:hover a {  color: #fff;  transition: 0.2s;  }

.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%;  }

ul#tabss {  border-bottom: 1px solid #2d2d2d;  }
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;  }
ul#slot-tabs li.inactive {  filter: grayscale(1);  background: var(--secondary-color);  }

.slot-container {  display: flex;  width: auto;  }
.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;  }
.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 {  display: none;  background: var(--header-top-bg-color);  position: fixed;  bottom: 0;  left: 0;  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: #ffffff;  font-size: 10px;  font-weight: bold;  }
.nav-btm ul li img {  width: 40%;  max-width: fit-content;  padding: 20px 0px 0px;  filter: invert(1);  }
.nav-btm ul li p {  font-size: 10px;  margin-bottom: 5px;  }
.nav-btm ul li:nth-child(3) {  width: 24%;  }
.nav-btm ul li:nth-child(3) img {  width: 30%;  padding: 15px 0px 0px;  }

.bank {  background: var(--footer-color);  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;  }
.bank ul li:nth-child(4) {  width: 19%;  }
.bank ul li:nth-child(4) .dot {  top: -2px;  left: -2px;  }
.bank ul li:nth-child(4) img {  width: 100%;  }

.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;  }
.hc-button a {  background: var(--button-bg-color);  }

.mtg {  width: 50px !important;  }
.spsec img {  width: 90%;  }
.spsec2 img {  width: 110%;  }
.spsec, .spsec2, .bank, .hc-body .slot-side {  display: none;  }
.spimg1 {  float: left;  margin-bottom: 10px;  }
.spimg2 {  float: right;  margin-bottom: 30px;  }

a#header-register {  background: var(--button-gradient-red);  height: unset;  border: 1px solid transparent;  width: 90px;  border: 0;  }
a#header-register:hover {  background: var(--button-gradient-yellow);   }
a#header-login, #customform_submit {  color: var(--link-color) !important;  font-weight: bold;  background: var(--button-gradient-yellow);  width: 100%;  text-shadow: 1px 1px 0 #000;  border: none;  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;  }

#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;  }
.nav-breadcrumbs a.active {  color: var(--secondary-text-color);  }
.nav-breadcrumbs a {  font-weight: bold;  }


@media screen and (max-width: 768px) {
        .divHeader-top {  background: linear-gradient(180deg, #0045ff, #001b49);  }
        #divFooter {  margin-top: 0;  }
        .spsec, .spsec2, .bank, .nav-btm {  display: block;  }
        .spsec2 {  padding: 40px 0;  border-radius: 30px 30px 0 0;  background: var(--footer-color);  margin-top: -40px;  }

        .home-cat {  padding: 30px 0 0 0;  border-radius: 30px 30px 0 0;  background: transparent;  margin-top: -40px;  }
        .hc-box {  background-color: transparent;  border-color: transparent;  background: transparent;  }
        .hc-box.hc-casino, .hc-games.hc-box {  background: var(--slot-side-bg-mobile);  border-radius: 30px 30px 0 0;  }

        .hc-casino.hc-box {  padding-bottom: 10px;  margin-top: -30px;  }
        .hc-horse.hc-box, .hc-fish.hc-box, .hc-lottery.hc-box, .hc-casino.hc-box, .hc-sport.hc-box {  background: linear-gradient(90deg, rgba(54, 151, 222, .31) .04%, rgba(85, 41, 209, .15));  border: #33407a 1px solid;  background: var(--secondary-color);  }
        .hc-games.hc-box {  padding-bottom: 50px;  }
        .hc-games.hc-box, .hc-box {  border: #33407a 1px solid;  background: url(/theme/template_desktop15/imgs/bg-img-02.webp);  background-color: #0e182f;  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;  }
        ul#slot-tabs {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;  }
        ul#slot-tabs li:not(:last-child) {  border-bottom: 0;  }
        ul#slot-tabs li img {  width: 100%;  height: auto;  }
        .slot-game {  padding: 12px;  }
        .slot-game .games-content ul li {  width: calc(100% / 2);  margin: 0;  }
        .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: flex;  }
        .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(--primary-color);  }
        .nav-breadcrumbs a {  color: var(--primary-text-color);  }
        #cssmenu>ul>li>a {  width: 20vw;  }
        #cssmenutop ul li a {  width: 10vw;  }
        .flexslider .slides img {  border-radius: 0;  }
    }