:root {
  --bg-color: #1c1c1c;        
  --font-color: #ffffff;      
  --primary-color: #333333;   
  --secondary-color: #d7b390;
  --accent-color: #d7b390;    
}



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(--font-color) !important;
    font-size: 16px;
    line-height: 1.5em;
    transition: background 0.2s ease-in-out;
    background-color: #000 !important;
}


* {
    margin: 0;
    padding: 0;
}

table {
    width: 100%;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

.spsec, .spsec2, .bank, .hc-body .slot-side {
display:none;
}



/*********FIXED LEFT BUTTON******/
.fixed-left-button {
  position: fixed !important;
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99; /* Ensure it stays on top of everything */
}

.fixed-left-button .btn {
 padding:3px 0px  !important;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden; 
  border-radius: 50%; /* CRITICAL: This clips the sheen to the circle */
  transition: all 0.3s ease;
  animation: pulse-zoom 3s infinite ease-in-out;
}


.fixed-left-button .btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6), /* The "Glass" light */
    transparent
  );
  transform: skewX(-25deg);
  animation: glass-sheen 3s infinite;
}


@keyframes pulse-zoom {
  0%, 100% { transform: scale(1); filter: brightness(100%); }
  15% { transform: scale(1.1); filter: brightness(120%); } 
  30% { transform: scale(1); filter: brightness(100%); }
}

@keyframes glass-sheen {
  0% { left: -200%; }
  10% { left: -200%; }
  40% { left: 200%; } 
  100% { left: 200%; }
}


.btn-whatsapp, .btn-whatsapp::after { animation-delay: 0s !important; }
.btn-telegram, .btn-telegram::after { animation-delay: 0.8s !important; }
.btn-rtp, .btn-rtp::after { animation-delay: 1.6s !important; }

.fixed-left-button .btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none; 
}

.fixed-left-button .btn:hover {
  animation: none !important;
  transform: scale(1.2) !important;
}

.fixed-left-button .btn:hover::after {
  display: 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: var(--font-color);
    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: var(--font-color)100;
    }

    50% {
        color: red;
    }

    100% {
        color: var(--font-color)100;
    }
}

@-webkit-keyframes navColorsT {
    0% {
        color: var(--font-color)100;
    }

    50% {
        color: red;
    }

    100% {
        color: var(--font-color)100;
    }
}

@-moz-keyframes navColorsT {
    0% {
        color: var(--font-color)100;
    }

    50% {
        color: red;
    }

    100% {
        color: var(--font-color)100;
    }
}

@-ms-keyframes navColorsT {
    0% {
        color: var(--font-color)100;
    }

    50% {
        color: red;
    }

    100% {
        color: var(--font-color)100;
    }
}

@-o-keyframes navColors2 {
    0% {
        color: var(--font-color)100;
    }

    50% {
        color: red;
    }

    100% {
        color: var(--font-color)100;
    }
}

.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 a:hover {color: var(--accent-color);}

.ft-box-wapper a {color: var(--accent-color) !important;}
.ft-box-wapper a:hover {color: #fff !important;}

/**************************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: var(--font-color);
    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:hover>a {
    color: #cdcdcd;
}

#cssmenu>ul>li.active>a {
    color: var(--font-color);
}

#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 .2s ease;
    -moz-transition: height .2s ease;
    -o-transition: height .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 .2s ease;
    -moz-transition: color .2s ease;
    -o-transition: color .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(--font-color);
}

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

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

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

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

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

h5 {
    color: var(--font-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(--font-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-color);
}

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

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

::-webkit-scrollbar-thumb {
    background: #5f5f5f;
    border: 0px none var(--font-color);
    border-radius: 50px;
}

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

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

::-webkit-scrollbar-track {
    background: #333333;
    border: 0px none var(--font-color);
    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 var(--font-color) 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: 0 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;
}

/*====================  WINNERLIST ========================*/
.popuptext {
    width: 350px;
    background: linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
    color: #414141 !important;
    text-align: center;
    border-radius: 4px;
    padding: 8px 12px;
    position: fixed;
    z-index: 99999999;
    font-size: 14px;
    border: 1px solid #be9f38;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    bottom: 16px;
    left: 6px;
}

.popuptext.showpopup {
  animation: fadepop 9s ease-in-out forwards;
}

#imageid { float: left; width: 15%; margin-left: 8px; }

@keyframes fadepop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  5.56% {
    opacity: 1;
    transform: translateY(0);
  }
  38.89% {
    opacity: 1;
    transform: translateY(0);
  }
  44.44% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.btn-login,
#customform_submit,
.btn-more {
    color: #fff !important;
    font-weight: bold;
    background: linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
    width: 100%;
    text-shadow: none;
    height: unset;
}



#customform_submit:hover,
a.btn-login:hover {
  background: linear-gradient(180deg, #A77F4B 0%, #E4C58C 100%) !important;
}


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

.btn-register,
#registerform_btnSubmit {
    color: #fff !important;
    font-weight: bold;
    background: linear-gradient(180deg, #B80000 0%, #730000 100%);
    white-space: nowrap;
    height: unset;
    border: 1px solid transparent;
}

.btn-register:hover {
    color: var(--font-color);
    transition: 0.3s;
}

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

.btn-play{
    color: var(--font-color);
    font-weight: bold;
    background: var(--accent-color);
}


.btn-go {
    color: var(--font-color);
    font-weight: bold;
    background: #ffcb00;
}

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

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

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

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

.btn-gol:hover {
    color: #000;
    background: var(--accent-color);
}

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

@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: var(--bg-color);
}

.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(--font-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(--font-color);
    font-weight: bold;
    font-size: 21px;
}

.btn-collapse.collapsed {
    background: var(--secondary-color);
    color: var(--font-color);
    border-radius: 6px;
}

.btn-collapse:hover {
    color: var(--font-color);
    background-color: var(--accent-color);
}

.btn-collapse:active {
    background-color: var(--accent-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(--font-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 {
    margin: 15px auto;
    width: 90%;
    border: var(--primary-color) solid 2px;
    max-width: 500px;
    padding: 2em 3em;
    background: #1c1c1c;
    border-radius: 5px;
}

#theme-contain-adminloginx table tr:nth-child(2) td:first-child, #theme-contain-adminloginx table tr:nth-child(3) td:first-child, #theme-contain-adminloginx table tr:nth-child(4) td:first-child, #theme-contain-adminloginx table tr:nth-child(5) td:first-child {
    display: none;
}

#theme-contain-adminloginx input {
    width: 100%;
    font-size: 14px;
    padding: 10px 10px;
    padding-left: 20px;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border: 0;
    border-bottom: 2px solid var(--accent-color);
}

#theme-contain-adminloginx input[type="submit"] {
    background: linear-gradient(180deg, #B80000 0%, #730000 100%);
    height: unset;
    width: 100%;
    border: 0;
    color: #fff;
}

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

#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(--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;
    white-space: nowrap;
    color: var(--font-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,
#cssmenu>ul>li:hover>a,
#cssmenutop ul li a:hover,
#cssmenutop ul li a.active {
    color: var(--accent-color);
}

#cssmenu>ul>li.active>a>img,
#cssmenutop ul li a.active img {
    filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
}

#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(--accent-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(--primary-color);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#menutop {
    background: #1c1c1c;
}

#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(--accent-color);
}

#menuadd a:hover img,
#menuadd a.active img {
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
}

#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 {
    margin: 3px;
}

.customform dd {
    text-align: center;
    display: flex;
    align-items: center;
    border: 0;
    border-radius: 6px;
    margin: 0;
}

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

.customform i img {
    width: 22px;
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
}

.customform input {}

#customform_UserName {}

#customform_Password {}

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



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

.modal-login .modal-dialog {
    background-color: var(--font-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(--primary-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: #1c1c1c;
    border-radius: 5px;
}

#theme-contain-login .div-login #customform dl{
width: 100%;
}

#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%;
    font-size: 14px;
    padding: 10px 10px;
    margin: 15px 0;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border: 0;
    border-bottom: 2px solid var(--accent-color);
}



#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 {
    border: var(--primary-color) solid 2px;
    max-width: 1440px;
    margin: auto;
    padding: 2em 3em;
    background: #1c1c1c;
    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(--font-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%;
    font-size: 14px;
    padding: 10px 10px;
    padding-left: 20px;
border-radius: 0;
    color: #fff;
    background: #2d2d2d;
border: 0;
    border-bottom: 2px solid var(--accent-color);
}

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

#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: var(--accent-color);
}

#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(--accent-color);
}

#registerform #registerform_varifycode {
    width:calc(100% - 155px);
    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(--font-color);
}

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

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

.small {
    font-size: 12px;
}

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

.divRegister-box {
    background-color: var(--font-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,
    #groupVerifyCode {
        flex: 1 1 50%;
        max-width: 50%;
    }

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

    #groupComfirmPassword,
    #groupMobileNumber,
    #groupReferralCode,
    #groupVerifyCode {
        padding-left: 15px;
        padding-right: 0;
    }

    .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) {

}

@media (max-width: 767px) {
    .register {
        padding: 20px;
        margin: auto 10px;
margin-bottom: 40px;
    }
.title-box.login-title{
    margin: 0 !important;
}
    .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;
    transform: scale(3) translateX(10px);
}

@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;
    background: var(--bg-color);
    z-index: 1060;
    border-bottom: 1px solid #414141;
    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(--bg-color);
    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(--primary-color);
    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(--primary-color);
}

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

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

#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: none;
    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(--accent-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 var(--font-color);
    border-right: 2px solid var(--font-color);
    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;
        background: #1c1c1c;
    }

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

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

    .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(--font-color);
    font-weight: bold;
    font-size: 0.875em;
}

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

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

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

    .btn-menu img {
        margin-right: 10px;
        width: 22px;
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
    }
}

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

    .btn-menu img {
        margin-left: 5px;
        width: 18px;
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
    }
}

/***************************************************************************** FOOTER */
.footer-container {
    background: #1c1c1c;
    font-size: 12px;
    margin-top: 0;
}

.footer-border {
    margin-top: 1em;
}

.footer-text__container { border-bottom: 1px solid rgba(255, 255, 255, 0.1);}

#theme-contain-home .seo-casino-home {
    display: none;
}

.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(--font-color);
}

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

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

.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(187deg) brightness(1.4) saturate(1.2);
}

@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: var(--bg-color);
        border-top: 1px solid #414141;
    }

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

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

    .footer-nav a {
        color: var(--font-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(--accent-color);
    }

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

/***************************************************************************** BODY */
.grey-box {
    padding: 2em 3em;
    background: var(--primary-color);
    border-radius: 5px;
}
.affiliate-content.grey-box{
    margin-bottom: 30px;
}
@media (max-width: 600px) {
    .grey-box {
        padding: 2em;
    }
}

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

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

.title-box h2 {
    color: var(--font-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-control-nav {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    z-index: 100;
}
.flex-control-paging li a.flex-active{
    background: #ffc486e0;
}
.flex-control-paging li a{
    background: #a77f4bcc;
box-shadow:none;
}
.flex-control-paging li a:hover{
    background: #ddbd84d6;
}

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

.flex-direction-nav a{
width:30px;
height:30px;
}

.flex-direction-nav a:before{
font-size: 30px;
color : var(--secondary-color)
}

.btn-homebanner {
    display: none;
}

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

.homebanner-wrapper {
    display: flex;
padding: 0 8px;

}

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

#cssmenu.homemenu {
    background: transparent;
display: block;
}

.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) {
#cssmenu.homemenu {
    background: transparent;
display: none;
}
    .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(--primary-color);
    border: var(--secondary-color) 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(187deg) brightness(1.4) saturate(1.2);
}


.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: #000;
    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: var(--bg-color);
    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(--font-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(--accent-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 100%;
        height: 100%;
        width: 170px;
    }
}

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

    .hc-box {
        background: transparent;
    }

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

    .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 #414141;
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--primary-color);
    background: linear-gradient(169.56deg, #91440b 2.55%, #4e1b01 92.22%);
    background-image: url("/data/2239/uploads/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(--accent-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 var(--accent-color);
    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: var(--accent-color);
    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 var(--accent-color);
    }

    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 var(--accent-color);
    }

    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(--bg-color);
}

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

#plslogin .modal-body img {
    width: 80px;
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
}

#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(--font-color);
}

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

.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(--font-color);
    transition: color 0.2s ease-in-out;
    font-size: 0.8em;
    cursor: pointer;
    flex: 1;
    background: #414141;
    margin: 0.25em;
}

#myBtnContainer .btn:hover {
    background: url(--primary-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(--bg-color);
    padding: 10px 10px;
    border: rgba(255, 255, 255, 0.2) 1px solid;

}

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

.promo-d .btn-gol {}

@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: #333333;
        border: 0;
        border-radius: 5px;

    }
}

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

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

}

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

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

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

.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 {
border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color);
    margin-left: 5px;
}

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

#registerform_btnSubmit {
    background:linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
    /*background: url(/theme/asset/template_desktop15/imgs/DaftarButton.png);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-login:hover {

}

a.btn-login:hover {
    background: var(--accent-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(--accent-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(---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: var(--font-color);
}

.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 var(--font-color)fff40;
}

.games>ul li a {
    color: var(--font-color);
    text-decoration: none;
}

.games>ul li.inactive a {
    color: var(--font-color)fff40;
}

.games>ul li.inactive {
    background: #181717;
    border: 1px solid var(--font-color)fff40;
}

.games>ul li:hover a {
    color: var(--font-color);
    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(--primary-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: 0;
}
.seoseo {
margin-top: 30px;
    margin-bottom: -10px;
    padding-bottom: 30px;
}

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

.nav-btm {
    display: none;
    background: var(--bg-color);
    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: var(--font-color)fff;
    font-size: 10px;
    font-weight: bold;
}

.nav-btm ul li img {
    width: 40%;
    max-width: fit-content;
    padding: 10px 0px 0px;
    filter: invert(1);
max-width: 29.23px;
}

.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: var(--primary-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: var(--font-color);
    font-weight: bold;
}

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

.bank ul li {
    display: inline-block;
    float: left;
    color: var(--font-color)fff;
    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,
.hc-body .slot-side {
    display: none;
}

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

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

.spsec img {
    width: 90%;
}

.hc-button a {
    background: linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
}
.div-login #customform_submit, a#header-login{
    width: 100%;
    border: 0;
    min-width: 90px;
    max-width: 90px;
}
a#header-register {
    background:linear-gradient(180deg, #B80000 0%, #730000 100%);
    height: unset;
    width: 100%;
    border: 0;
    min-width: 90px;
    max-width: 90px;
color: #fff !important;
}

a#header-login,
#customform_submit {
    font-weight: bold;
    background: linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
    width: 100%;
    border: 0;
    height: unset;
color: #fff !important;
text-shadow: none;
}

.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,
a#header-register:hover {
    background:linear-gradient(180deg, #f03333 0%, #730000 100%);
    color: #000;

}


#promosec {
    padding: 0;
    display: unset;
}
#promosec ul#promo-tab {
    display: flex;
    padding: 0.5em 1em;
    margin: 0;
}

#promosec ul#promo-tab li {
    box-shadow: none;
    padding: 0.5em 1em;
    border-radius: 6px;
    color: var(--font-color);
    transition: color 0.2s ease-in-out;
    font-size: 0.8em;
    cursor: pointer;
    flex: 1;
    background: #414141;
    margin: 0.25em;
    list-style: none;
    display: inline-block;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
}

#promosec ul#promo-tab li.active, #promosec ul#promo-tab li:hover {
    font-weight: bold;
    background: var(--accent-color);
    outline: 0;
    color: #000;
}
#promosec ul#promo-tab li.active.focus, 
#promosec ul#promo-tab li.active:focus,
#promosec ul#promo-tab li:focus,
#promosec ul#promo-tab li.focus,
#promosec ul#promo-tab li:active.focus,
#promosec ul#promo-tab li:active:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.popup-promo ul li{
list-style: none;
}

.popup-promo ul {
    margin-left: 0;
}
.popup-promo {
    max-width: 700px;
color: #fff;
padding: 0 15px;
}
.popup-promo th{
    text-align: center;
color: #222;
}

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

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


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

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

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

@media screen and (max-width: 768px) {
    .divHeader-top {

    }
.footer-copyright {
    margin-bottom: 1em;

}


    .hc-box.hc-casino,
    .hc-games.hc-box {
        background: var(--secondary-color);
        border-radius: 30px 30px 0 0;
    }
.spsec, .spsec2 {
    display: none !important;
}
    .home-cat {
        padding: 0;
        padding-top: 30px;
        padding-bottom: 30px;
        border-radius: 30px 30px 0 0;
        background: var(--primary-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: 10px;
    }

    #divFooter {
        margin-top: 0;
    }

    .spsec2 {
        padding: 30px 0;
        border-radius: 0;
        background: #000;
        margin-top: 0;
    }


    .hc-horse.hc-box,
    .hc-fish.hc-box,
    .hc-lottery.hc-box,
    .hc-casino.hc-box,
    .hc-sport.hc-box {
        background: #1c1c1c;
        border: #1c1c1c 1px solid;
    }

    .hc-games.hc-box,
    .hc-box {
        border: 0;
        background: url(/theme/asset/template_desktop15/imgs/bg-img-02.webp);
        background:transparent;
        background-repeat: no-repeat;
        background-position: 0 -12px;
    }

    .hc-title img {
        filter: hue-rotate(187deg) brightness(1.4) saturate(1.2);
        width: 30px;
        margin-right: 10px;
    }

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

    .slot-side {
        background: #414141;
        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;
        padding: 5px;
    }

    .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: 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) {
  .popuptext{
    left: 50%;
    bottom: 70px;
    max-width: 350px !important;
    width: 100% !important;
    transform: translateX(-50%) translateY(10px);
  }
.popuptext.showpopup {
  animation: fadepop2 9s ease-in-out forwards;
}
@keyframes fadepop2 {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  5.56% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  38.89% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  44.44% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

.homebanner-wrapper{
padding: 0;
margin:0;
}
.announce-container{
border-radius: 0;
}
#cms5-prod-list{
    grid-template-columns: repeat(3, 1fr);
}
    .divHeader-nav {
        background: var(--container-bg-color);
    }

    #cssmenu>ul>li>a,
    #cssmenutop ul li a {
        width: fit-content;
    }

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

a.yabtn.bts-popup-close::before, a.yabtn.bts-popup-close::after{
    display:none;
}
a.yabtn.bts-popup-close {
    position: inherit;
    top: inherit;
    right: inherit;
    width: inherit;
    height: inherit;
    background: var(--accent-color);
    border-radius: 0;
    color: #fff;
}
.popbtn {
    margin: 20px;
}
a.tidakbtn {
    border: 1px solid #fff;
    color: #fff;
    padding: 5px 20px;
    text-transform: uppercase;
    margin-right: 5px;
}
a.yabtn {
    border: 1px solid var(--accent-color);
    color: #fff;
    padding: 5px 20px;
    text-transform: uppercase;

}
#popmsg {
    max-width: 600px;
}
#popmsg h3 {
    text-align: left;
margin-bottom: 0;
}
#popmsg p{
margin-top: 0;
}
#licensing ul {
    list-style-type: disc;
    padding-left: 20px;
}
p.titleleft {
    color: #ce9046;
    font-size: 18px;
    font-weight: bold;
}
.crimg {
    width: 100%;
    max-width: 300px;
    margin: auto;
}
.crbox {
    background: #333333;
    color: #fff;
    padding: 20px;
    width: 100%;
    max-width: 650px;
    text-align: left;
    border-radius: 15px;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
.footer-licensing a {
    color: #fff;
    padding: 0 8px;
    font-size: 14px;
    font-family: "Galano-Medium", "krungthep", sans-serif;
    font-weight: normal;
}
.footer-licensing a:hover {
    color: var(--accent-color);
}
.footer-licensing {
    color: #939393;
}

.copyRight{
    position: relative;
    padding: 0 10px;
    text-align: center;
    margin-top: 18px;
    padding-top: 30px;
    font-size: 12px;
    color: #414755;
    font-weight: bold;
}
.copyRight:before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.1);
}
/*====================  POPUP VIDEO  ========================*/
.bts-popup {
  z-index:9999999999;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgb(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;

}
.bts-popup.is-visible {
  opacity: 1;
  visibility: visible;

}

.bts-popup-container {
    top: 0;
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: auto;
    margin-top: 50vh;
    transform: translateY(-50%);
    border-radius: 10px;
    text-align: center;
    background: #1c1c1c !important;
    padding: 20px;
    color: #fff;
    border: 1px solid #000000;
}
.info-text1 {
    font-size: 24px !important;
    text-align: left;
}
.info-text2 {
    font-size: 14px !important;
    text-align: justify;
}


.bts-popup-container .bts-popup-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
background:#000;
border-radius:40px;
}
.bts-popup-container .bts-popup-close::before, .bts-popup-container .bts-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 16px;
  height: 3px;
  background-color: white;
}
.bts-popup-container .bts-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.bts-popup-container .bts-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 6px;
  top: 13px;
}

div#theme-contain-access-denied {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    background: #1c1c1c;
    z-index: 10000000;
}

   .container {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     padding: 20px;
   }

   .icon-circle {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     background-color: #ff4d4f;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 60px;
     font-weight: 100;
     color: white;
     box-shadow: 0 0 20px rgba(255, 77, 79, 0.6);
   }

   .message {
     font-size: 1.8rem;

     margin-top: 20px;
   }

   .description {
     margin-top: 10px;
     font-size: 16px;

   }

   .home-btn {
     margin-top: 30px;
     padding: 12px 24px;
     font-size: 16px;
     background-color: #ff4d4f;
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     text-decoration: none;
     transition: background-color 0.3s ease;
   }

   .home-btn:hover {
     background-color: #dd0000;
     color: #fff;
   }


/*侧边栏*/
.aside {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 56px;
}
.asideBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.asideBar {
  position: relative;
}
.asideIcon1 {
  width: 56px;
  height: 56px;
  background-size: 56px;
  transition: all 0.4s ease;
  display: block;
  box-shadow: 0 4px 6px 0 rgba(184, 208, 255, 0.3);
  border-radius: 50%;
  margin-bottom: 3px;
  background: url(/data/2239/uploads/icon_03.png) center no-repeat;
  background-size: contain;
}
.asideBar:hover .asideIcon1 {
  background: url(/data/2239/uploads/icon_04.png) no-repeat;
  background-size: contain;
}
.helpCenter {
    position: relative;
    background: #fff;
    top: 5px;
    text-align: center;
    line-height: 46px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 14px;
    width: 216px;
    margin: 3px 0;
    display: flex;
color: #000;
    gap: 10px;
padding: 5px;
}
.helpCenter img {
    width: 24%;
}
.helpCenter a {
  color: #b1987f;
}
.helpCenter:after {
  content: "";
  position: absolute;
  display: block;
  width: 8.48528137px;
  height: 8.48528137px;
  background: transparent;
  border-style: solid;
  border-width: 4.24264069px;
  right: -2px;
  border-color: #fff #fff transparent transparent;
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.asideIcon2 {
  width: 56px;
  height: 56px;
  background-size: 56px;
  transition: all 0.4s ease;
  display: block;
  box-shadow: 0 4px 6px 0 rgba(184, 208, 255, 0.3);
  border-radius: 50%;
  margin-bottom: 3px;
  background: url(/data/2239/uploads/icon_05.png) center no-repeat;
  background-size: contain;
}
.asideBar:hover .asideIcon2 {
  background: url(/data/2239/uploads/icon_06.png) no-repeat;
  background-size: contain;
}
.asideIcon3 {
  width: 56px;
  height: 56px;
  background-size: 56px;
  transition: all 0.4s ease;
  display: block;
  box-shadow: 0 4px 6px 0 rgba(184, 208, 255, 0.3);
  border-radius: 50%;
  margin-bottom: 3px;
  background: url(/data/2239/uploads/icon_01.png) center no-repeat;
  background-size: contain;
}
.asideBar:hover .asideIcon3 {
  background: url(/data/2239/uploads/icon_02.png) no-repeat;
  background-size: contain;
}
.ewmslide {
  box-sizing: border-box;
  padding: 12px;
}
.ewmList:nth-child(1) {
  border-bottom: 1px solid rgba(211, 183, 151, 0.2);
  margin-bottom: 10px;
}
.ewmList img {
  width: 100%;
  display: block;
}
.ewmList p {
  font-size: 14px;
  color: #b1987f;
  line-height: 30px;
}
.ewmslide:after {
  top: 23px;
}

.asideAlt {
  position: absolute;
  display: none;
  right: 56px;
  padding-right: 15px;
  top: 2px;
}
.asideBar:hover .asideAlt {
  display: block;
}
.helpCenter2 {
    position: relative;
    width: 54px;
    background: #fff;
    top: 5px;
    text-align: center;
    line-height: 46px;
    box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
    border-radius: 4px;
    font-size: 14px;
    margin: 3px 0;
}
.helpCenter2 img {
    width: 100%;
    margin: 3px 0;
}
#search-bar {
    border: 2px solid #333333;
    padding: 16px;
    border-radius: 6px;
    background: #333333;
    margin: 25px 0;
position: relative;
}
/*=================================== REDEEM-MALL PROUCT ===================================*/
#desc, #enquiry, #details, #code, span.caption {
    display: none;
}
#cms5-prod-view #desc, #cms5-prod-view #enquiry, #cms5-prod-view #details, #cms5-prod-view #code, #cms5-prod-view span.caption {
    display: block;
}

#cms5-prod-list ul {
    background: #414141;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    display: inline-block;
    transition: 0.3s;
        height: 100% !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    vertical-align: top;
    position: relative;
    text-align: center; 
}
#cms5-prod-list ul #title a, #cms5-prod-list ul #title a:visited {
color: #fff;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 60px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin: 10px 0;
    margin-bottom: 0;
}
#cms5-prod-list ul #title{
    height: auto;
    overflow: unset;
}
#cms5-prod-list ul #price {
    color: #d1ae8e;
    font-weight: bold;
    font-size: 18px;
}
#cms5-prod-list ul li{
list-style: none;
}

/*=================================== REDEEM-MALL PROUCT PAGE ===================================*/
div#offer-strike{text-decoration: line-through !important;}




#cms5-prodcatlist {
    display: block;
    width: 92%;
    max-width: 1250px;
    margin: 25px auto 0;
}
div#cms5-prodcatlist ul {
    list-style: none;
    padding: 0;
    text-align: center;
}
div#cms5-prodcatlist ul li {
    display: inline-block;
    margin: 5px 2px;
    width: 13.5%;
    background: #444;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}
div#cms5-prodcatlist ul li a {
    text-transform: capitalize;
    color: #fff;
}
#back-btn a {
display: block;
    width: fit-content;
    border: 0;
    padding: 8px 15px;
    background: #d1ae8e;
    color: #000;
    font-weight: bold;
}
#back-btn a:hover { background: #d9c4b8;color: #3c3836; }
#cms5-prod-view > table > tbody > tr {
    direction: rtl;
}
#cms5-prod-view > table > tbody > tr > td {
    width: 50%;
    direction: ltr;
    display: inline-block;
    padding: 0 20px;
}
#cms5-prod-view table#particular {
    padding-top: 59px;
    margin: 30px auto;
color: #fff;
}
#cms5-prod-view table#particular tbody tr {
    display: flex;
    gap: 10px;
    justify-content: left;
    align-items: baseline;
    margin-bottom: 10px;
}
#cms5-prod-view table#particular tbody tr#addcart #caption{
display:none;
}
#cms5-prod-view table#particular tbody tr#desc {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

#cms5-prod-view #particular #caption {
    font-size: 20px !important;
}
#cms5-prod-view #particular td#title {
    font-size: 20px !important;
    font-weight: bold !important;
}
#cms5-prod-view table#particular tr td#code {
    font-size: 20px;
}
#cms5-prod-view #particular #price {
    font-size: 20px !important;
}
#cms5-prod-view table#particular tr td#price {
color: var(--accent-color);
    font-weight: bold;
    font-size: 20px ;
}
#cms5-prod-view table#particular tr td#addcart a {
    padding: 10px;
    text-align: center;
    background: var(--secondary-color);
    color: #000;
    width: 126px;
    line-height: 2;
    height: 45px;
    border: 0px;
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px #6f6865;
}
#cms5-prod-view table#particular tr td#addcart a:hover, #cms5-prod-list ul #addcart a:hover, #back-btn a:hover {
    background: #d1ae8e;
    box-shadow: 0px 0px 0px 0px #6f6865;
    border: 0;
}
#cms5-prod-view #desc {
    border-top: 0px solid #d4d4d4;
}
td#qty input {
    text-align:center;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color);
}
#cms5-prod-view {
clear: both;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 25px auto 52.14px auto;
    background: #333333;
}
.gcontent {
    color: #777;
    font: 12px/1.4 "helvetica neue",arial,sans-serif;
    width: 250px;
    margin: 20px auto;
}
#galleria {
    height: 260px;
}
.galleria-container {
    width: 250px;
    height: 260px;
    position: relative;
    overflow: hidden;
    background: transparent;
}
.galleria-stage {
    position: absolute;
    top: 10px;
    bottom: 60px
    right: 10px;
    overflow: hidden;
    left: -46px;
}
/*=================================== REDEEM-MALL  ===================================*/
.intro button#customformuw_submit, .intro button#customform_submit {
    width: 48.5%;
    padding: 10px;
    background: linear-gradient(0deg, #a3775e, #3c3836);
    color: #fff;
    border: 0;
    border-radius: 20px;
    font-size: 15px;
}

#search-bar label {
    font-size: 18px;
    margin: 8px 0;
    color: #fff;
    display: inline-block;
    font-weight: 500;
}
div#price-range input#stock {
    margin-left: 10px;
}
#search-form input#submit-btn {
    background: linear-gradient(180deg, #E4C58C 0%, #A77F4B 100%);
    color: #fff;
    padding: 15px 1px;
    border: 0px #075fc6 solid;
    border-radius: 15px;
    font-size: 14px;
    font-weight: normal;
    width: 14%;
    position: absolute;
    bottom: 29px;
    right: 0;
    left: unset;
    margin: 0 15px 0 0;
}



/*=================================== REDEEM-MALL ADD CART ===================================*/
#prod-cart {
    margin: 10px 0px 50px;
    padding: 20px 0;
    display: block;
    width: 100%;

}
#prod-cart .tbllist{
    background: #fff;
    width: 100%;
    overflow-x: auto;
    padding: 0;
}




#prod-cart .tbllist form table,
#prod-cart .tbllist form table td,
#prod-cart .tbllist form table tr {
    background: #fff !important;
}


#prod-cart .tbllist #cart-member-info tr td{
color:#333;
}


#prod-cart .tbllist #price, #prod-cart .tbllist #qty, #prod-cart .tbllist #weight,#prod-cart .tbllist #total{
color:#333;
}

#prod-cart .tbllist form table {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 0;
}


#prod-cart #cart-gamepoint-info b{
color:#333;
}


#cart-member-info #caption{
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#prod-cart .tbllist form table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbllist.rounded.spacer tr td {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#prod-cart .tbllist form table tr td, #prod-cart .tbllist form table tr th {
    border-right: 0px solid !important;
    text-align: left;
    padding: 15px;
    background: #333;
    font-weight: 600;
    font-size: small;
    color: #000;
}
.tbllist.rounded.spacer tr th {
    border: 1px solid #d1ae8e;
    background: #d1ae8e !important;
    color: black !important;
    text-align: left;
    padding: 10px;
    width: 14%;
    font-weight: bold;
}
#prod-cart p {
    color: #fff;
}
#prod-cart p a {
    color: #d1ae8e;
}

#continue-shopping {
padding: 7px;
    background: red;
    border-radius: 10px;
    border: 3px red solid;
    color: #ffffff;
    box-shadow: inset 0 0 5px red;
    width: 14%;
    text-align: center;
    margin-top: 7px;
    float: left;
    white-space: nowrap;
    width: fit-content;
}
#continue-shopping:hover {     

background: #c10000;
    border: 3px #c10000 solid;
    box-shadow: inset 0 0 5px #c10000;
 }

#btn-submit button {
    padding: 7px 20px;
    background: #d1ae8e;
    border-radius: 10px;
    border: 3px #d1ae8e solid;
    color: #000;
    box-shadow: inset 0 0 5px #d1ae8e;
    width: 14%;
    text-align: center;
    margin-top: 7px;
    width: 100%;
}
#btn-submit button:hover {
    background: #d1ae8e;
    border: 3px #d1ae8e solid;
    box-shadow: inset 0 0 5px #d1ae8e;
}
div#continue-shopping a {
    color: white;
}
.alert-warning {
    margin-top: 12px;
    color: red;
    float: left;
    background: transparent;
    font-size: 16px;
    margin-left: 20px;
}
#theme-contain-prod #remoteloginform, #theme-contain-prod #customform {
    width: 26%;
    margin: 100px auto 100px auto;
    text-align: center;
    padding: 40px 30px;
    border: 0;
    border-radius: 0;
    color: #fff;
    background: #1c1c1c;
}
.customform, .loginform {
    border: 0px solid green;
    margin: 0;
    text-align: right;
}
#theme-contain-prod #remoteloginform input, #theme-contain-prod #customformuw input, #theme-contain-prod #customform input {
    width: 100%;
    max-width: unset;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color) !important;
}
#prod-cart #remoteloginform dl, #prod-cart #customformuw dl, #prod-cart #customform dl {
    display: block;
}
#customformuw dl, #customform dl, #loginform dl {
    display: inline-block;
    width: auto;
    text-align: center;
}
#theme-contain-prod #customformuw .caption, #theme-contain-prod #customform .caption {
    display: none !important;
}

#icon-delete {
    list-style: none;
}
#icon-delete a {
    color: #f00;
}
.tbllist .tbl td a, .tbllist .tbl td a:visited {
    color: var(--accent-color);
    text-decoration: none;
    font-size: small;
    font-weight: 300;
}
.tbllist.rounded.spacer input[type="button"] {
    background: #000;
    color: white;
    border: 0px solid;
    border-radius: 4px;
    font-size: 12px;
    padding: 3px 12px;
}


#theme-contain-prod #customformuw dl:nth-of-type(3) dd img {
    width: 100px !important;
    margin-top: 10px;
}
#theme-contain-prod #remoteloginform input#remoteloginformsubmit, #theme-contain-prod #customformuw input#customformuw_submit, #theme-contain-prod #customform input#customform_submit {
    background: var(--header-top-regbtn-bg-color);
    color: var(--header-top-regbtn-text-color);
    border-radius: 10px;
    border: 3px var(--header-top-regbtn-bg-color) solid !important;
    padding: 8px;
    width: 46%;
}
#theme-contain-prod #remoteloginform input#remoteloginformsubmit, #theme-contain-prod #customformuw input#customformuw_submit:hover, #theme-contain-prod #customform input#customform_submit:hover {
    color: var(--header-top-regbtn-text-hover-color);
    border-color: var(--header-top-regbtn-bg-color);
    background: var(--header-top-regbtn-bg-hover-color);
}
#cart-member-info tbody td{
    border-bottom: 0;
}
#theme-contain-prod #customform input#customform_submit{
    font-weight: bold;
    background: var(--secondary-color);
    width: 100%;
    border: 0;
    height: unset;
    color: #000 !important;
    text-shadow: none;
}

#cms5-prod-list {
    margin: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding-bottom: 30px;
    color: #fff;
}
div#sort {
    float: right;
    position: absolute;
    top: 63px;
    right: 40%;
    display: flex;
    gap: 10px;
}
#search-bar legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 24px;
    font-size: 24px;
    line-height: inherit;
    color: #fff;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
select#sortlist {
    border-radius: 4px;
    height: 38px;
    border-radius: 0;
    border: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color);
}
input#price-min {
    border-radius: 3px;
    display: inline-block;
    width: 33%;
    padding: 0px 4px;
    height: 38px;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color);
}
input#price-max {
    display: inline-block;
    border-radius: 3px;
    width: 33%;
    padding: 0 4px;
    height: 38px;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color);
}
div#price-range {
    display: inline-block;
    width: 44%;
}
div#keyword {
    display: none;
}
a#clear-btn {
    color: #d1ae8e;
    position: absolute;
    width: max-content;
    right: 220px;
    bottom: 44px;
    font-size: 18px;
    line-height: 18px;
}
input#stock {
    display: none;
}
label#stock-label {
    display: none;
}
#cms5-prod-list ul #addcart a {
    padding: 8px 10px;
    text-align: center;
    color: #000;
    font-weight: normal;
    background: var(--secondary-color);
    background-size: 100%;
    width: 150px;
    height: 40px;
    border: 0px solid white;
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px #6f6865;
    margin: 10px auto;
    line-height: 1.5;
    white-space: nowrap;
    display: block;
}
#cms5-prod-list #photo img{
    width: 100%;
border-radius: 20px 20px 0 0;
    height: 100%;

}
#theme-contain-prod #remoteloginform, #theme-contain-prod #customformuw, #theme-contain-prod #submember-login {
    width: 26%;
    margin: 25px auto 0;
    text-align: center;
    background: #fff;
    border-radius: 17px;
    padding: 18px;
    padding: 40px 30px;
}
#theme-contain-prod #remoteloginform input, #theme-contain-prod #customformuw input, #theme-contain-prod #submember-login input, #theme-contain-prod #customform input {
    width: 100%;
    max-width: unset;
    border-radius: 0;
    color: #fff;
    background: #2d2d2d;
    border-bottom: 2px solid var(--accent-color) !important;
    margin: 15px 0;
        padding:10px;
}

#cms5-pagenum{
    background: transparent;
    padding: 0;
width: fit-content;
    margin: 0 auto;
}
.page-prod #theme-nav {
    display: none;
}
#apimeminfo {
    color: #fff;
    width: 92%;
    max-width: 1250px;
    margin: auto;
    font-size: 16px;
}
#apimeminfo a{
    background: red;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
}
#btn-submit {
    margin-left: 15px;
    float: left;
}
#theme-contain-prod {
    padding: 0 10px;
    max-width: 1440px;
    margin: auto;
    width: 100%;
}
.tbllist .tbl tfoot td{
    background: #d1ae8e;
}
#cart-member-info caption{
    background: #111;
    padding: 10px;
    color: #d1ae8e;
}
#prod-cart #cart-shipping{
    color:#333;
    background: #fff;
    padding: 10px;
}
#prod-cart #cart-shipping label{
    margin: 0;
}
#prod-cart .tbllist .tbl td{
    /*color: #fff;*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
input#form_Addr1 {
    margin-bottom: 10px;
}
#cart-member-info input, #cart-member-info select{
    color:#333;
    padding: 5px;
    border-radius:5px;
    border: 1px solid #ccc;
    font-weight: normal;
    width: 100%;
    /*max-width: 300px;*/
    height: 100%;
    min-height: 35px;
}
#prod-cart .tbllist.rounded.spacer tr td {
    border: 0;
}
#submit button{
    border: 2px solid #666;
    border-radius: 5px;
    padding: 4px 10px;
    text-transform: uppercase;
    background: #666;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 8px;
}

#submit input{
    border: 2px solid #333;
    border-radius: 5px;
    padding: 4px 10px;
    text-transform: uppercase;
    background:#fff;
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
#cart-member-info tr td{
    padding: 15px;
}
#cart-shipping tr td{
    padding: 15px;
}


@media all and (max-width: 933px), only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 1024px),
 only screen and (min--moz-device-pixel-ratio: 3) and (max-width: 1024px),
 only screen and (-o-min-device-pixel-ratio: 3/1) and (max-width: 1024px),
 only screen and (min-device-pixel-ratio: 3) and (max-width: 1024px),
 only screen and (min-resolution: 384dpi) and (max-width: 1024px),
 only screen and (min-resolution: 3dppx) and (max-width: 1024px) {

#cms5-prod-list{
    grid-template-columns: repeat(3, 1fr);
}

#cart-gamepoint-info tr td { width: 50% }
#cart-gamepoint-info tr:nth-of-type(1) td { padding-top: 15px }
#cart-gamepoint-info tr:nth-of-type(3) td { text-align: center; }
#search-form { display: flex;  flex-direction: row;  }
#search-form input#submit-btn { width: 20%; bottom: 0px; position: relative; margin: 0 0 30px;  }
#search-bar {  display: flex;  flex-wrap: wrap;  }
fieldset { width: 100%;  }
div#sort {  top: 0%; left: 0%; position: relative;  }
div#price-range {  width: 80%; margin-bottom: 0px;  }

#prod-cart .tbllist form {  overflow-x: scroll;  }
#continue-shopping {  width: auto;  }
div#btn-submit button { width: 130px; }
#theme-contain-prod #remoteloginform, #theme-contain-prod #customformuw, #theme-contain-prod #customform {  width: 100%;  }
#prod-cart select#form_Country, #prod-cart input#form_PostCode, #prod-cart input#form_contact, #prod-cart input#form_State {  }
.tbllist.rounded.spacer tr th { font-size: 14px; }
.tbllist.rounded.spacer tr td { font-size: 12px; padding: 8px; }
.tbllist .tbl td a, .tbllist .tbl td a:visited { font-size: 12px; }
.galleria-stage { top: 20px; }
a#clear-btn{
    right: 20px;
    bottom: 30px;
}
div#cms5-prodcatlist ul li {
        width: 47% !important;
    }
}


@media screen and (max-width: 768px) {
.alert-warning {
    margin-left: 0;
}
.btn-homebanner{
    background: #1c1c1c;
}
.hc-horse.hc-box, .hc-sport.hc-box {
    margin-right: 3.5px;
    max-width: calc(50% - 10.5px);
}
.hc-fish.hc-box, .hc-lottery.hc-box {
    margin-left: 3.5px;
    max-width: calc(50% - 10.5px);
}
#cms5-prod-list{
    grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.currency{
    margin-top: 5px;
}
    #cms5-prod-list ul {

    }
#cms5-prod-list #photo img{
    width: 100%;
    height: 100%;

}
    #cms5-prod-view > table > tbody > tr > td {
        width: 100%;
        padding: 0 30px;
    }
#cms5-prod-view > table > tbody > tr {
    direction: rtl;
}
#cms5-prod-view table#particular {
    padding-top: 59px;
    margin: auto;
    margin-top: 30px;
}
}



@media screen and (max-width: 430px) {
    #cms5-prod-list ul {

    }
    #search-form {
        flex-direction: column;
    }
    #search-form input#submit-btn, div#price-range {
        width: 100%;
    }

}


/* 容器 */
.uw88-floating {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 999;
}

/* 左侧竖条（贴右边） */
.uw88-tab {
    background: linear-gradient(180deg, #B80000, #730000);
    color: #fff;
    writing-mode: vertical-rl;
    padding: 0 8px;
    border-radius: 10px 0 0 10px;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: transform 0.3s ease;
    height: 200px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.uw88-tab img {
    width: 18px;
    height: 18px;
}
/* 右侧滑出面板（关键：absolute） */
.uw88-panel {
  position: absolute;
  top: 0;
  right: 0;

  background: linear-gradient(180deg, #B80000, #730000);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 0;
height: 250px;
    justify-content: center;
  transform: translateX(100%);
  transition: all 0.3s ease;
  box-shadow: -4px 0 15px rgba(0,0,0,0.25);
}

/* hover 展开（向左滑出） */
.uw88-floating:hover .uw88-panel {
  transform: translateX(0);
}

/* 按钮项 */
.uw88-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #B80000 0%, #730000 100%);
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
border: 1px solid #cd201a;
  transition: all 0.2s ease;
}

/* hover 效果 */
.uw88-item:hover {
  transform: translateX(-3px);
  background: linear-gradient(180deg, #f03333 0%, #730000 100%);
}



/* icon */
.uw88-item img {
  width: 20px;
  height: 20px;
}