:root {

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

        /* Header and Sidebar */
        --header-top-bg-color: #37474f;
        --header-top-bg-image: #102027;
        --sidemenu-bg-color: #0c0e10;

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

        /* Link Colors */
        --link-color: #fff;
        --link-hover-color: #37c2d6;
        --link-visited-color: #26c6da;


        /* Button Colors */
        --button-bg-color: #33aeda;
        --button-text-color: #fff;
        --button-hover-bg-color: #505d64;
        --button-active-bg-color: #055e84;
        --button-tertiary-color: #c3c3c3;
        --button-go-bg:#c2185b;
        --button-radial-gradient: radial-gradient(132.2% 117.19% at 50% -17.19%, #62c6ff 0, #526eff 100%);

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

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

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

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

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

table {
    width: 100%;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

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

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

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

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

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

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

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

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

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

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



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

    50% {
        color: red;
    }

    100% {
        color: #fff100;
    }
}

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

    50% {
        color: red;
    }

    100% {
        color: #fff100;
    }
}

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

    50% {
        color: red;
    }

    100% {
        color: #fff100;
    }
}

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

    50% {
        color: red;
    }

    100% {
        color: #fff100;
    }
}

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

    50% {
        color: red;
    }

    100% {
        color: #fff100;
    }
}

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

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

    #divFooter a {
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#cssmenu > ul > li > a {
    border-width: 1px;
    border-style: solid;
    padding: 21px 14px;
    transition: color 0.2s;
    border-image: linear-gradient(#07b3ff, rgba(0, 0, 0, 0)) 1 100%;
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    -webkit-transition: color .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: #fff;
}

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

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

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

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

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

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

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

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

#cssmenu ul ul li {
    transition: height 0.2s;
    height: 0px;
    -webkit-transition: height .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(--text-color);
}

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

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

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

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

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

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

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

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

.pd-5 {
    padding: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 600px) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#cssmenu>ul {}

#cssmenu>ul>li {}

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

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

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

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

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

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

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

#cssmenu>ul>li.active>a>img,
#cssmenutop ul li a.active img {
    filter: none;
}

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

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

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

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

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

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

    #cssmenu {
        background: transparent;
    }

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

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

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

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

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

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

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

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

#cssmenutop ul li a {}

#cssmenutop ul li img {}

#menuadd {}

#menuadd ul {
    margin: 0;
}

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

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

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

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

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

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

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

.menu-auth a {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.customform i img {
    width: 22px;
}

.customform input {}

#customform_UserName {}

#customform_Password {}

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

#customform_submit {}

#customform_submit:hover {}

#customform_submit:active {}

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

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

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

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

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

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

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

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

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

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

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

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

    .customform {
        max-width: 1000px;
    }

    .customform dl {
        margin: 0;
    }

    .customform input {}

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

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

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

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

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

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

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

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

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

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

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

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

.register-form {}

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

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

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

#registerform dd {
    position: relative;
}

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

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

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

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

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

#groupUsername .icnR {
    top: 5px;
}

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

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

#registerform .btnCheckUser,
#registerform_btnSubmit {}

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

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

#groupSubmit {
    text-align: center;
}

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

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

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

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

.small {
    font-size: 12px;
}

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

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

.img-register {
    overflow: hidden;
}

.register-box-wrapper>.right {}

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

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

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

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

    #registerform {
        padding: 0;
    }
}

@media (min-width: 768px) {

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

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

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

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

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

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

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

    #registerform_btnSubmit {
        padding: 15px 35px;
    }

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

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

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

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

    .registration-wrapper {
        padding: 0;
    }

    .divRegister-box {
        padding: 0;
    }

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

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

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

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

    #registerform {}

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

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

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

    #groupPassword {
        position: relative;
    }

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

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

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

    .register-logo {
        display: none;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.navprev {
    left: 0;
}

.navnext {
    right: 0;
}

.navcontrol:hover {
    opacity: 1;
}

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

.navprev:after {
    background-image: url("./imgs/icn-arrow-left.png");
}

.navnext:after {
    background-image: url("./imgs/icn-arrow-right.png");
}

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

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

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

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

.nl-sub {
    position: relative;
}

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

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

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

    .headernav-wrapper {}
}

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

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

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

    .navcontrol {
        pointer-events: none;
    }

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

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

    .navcontrol:after {
        display: none;
    }
}

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

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

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

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

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

    .btn-menu img {
        margin-right: 10px;
        width: 22px;
    }
}

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

    .btn-menu img {
        margin-left: 5px;
        width: 18px;
    }
}

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

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

.footer-text__container {}

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

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

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

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

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

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

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

.footer-link ul {
    margin: 0;
}

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

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

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

.footer-social img:hover {
    filter: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.divBanner img {
    width: 100%;
}

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

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

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

.btn-homebanner {
    display: flex;
}

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

.homebanner-wrapper {
    display: flex;
}

.homebanner-sub {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hc-title img {
    width: 50px;
    margin-right: 5px;
}

.hc-body {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .hc-box {
        padding: 8px;
    }

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

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

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

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

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

    .hc-box {
        background: transparent;
    }

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

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

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

    .hc-box {
        padding: 5px;
    }

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

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

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

    .hc-games.hc-box .hgames-list {
        margin: 0 calc(-0.5em - 5px);
        padding: 0 calc(0.5em + 5px);
    }
}
/***************************************************************************** PAGE - PROVIDER GAMES LIST */
.provider-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 0;
}

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

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

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

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

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

.p-logo {
    display: block;
    margin: 1em auto 0.5em;
    width: 90%;
    max-width: 150px;
}

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

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

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

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

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

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

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

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

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

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

.provider-list li.tag-cs {}

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

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

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

.provider-list li.tag-promo .p-box {
    border: 1px solid #139c44;
    background: radial-gradient(50% 50% at 50% 50%, #06d60e 0, #0a8835 100%);
    background-image: url("./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("./imgs/bg-hot.gif");
}

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

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

@keyframes tagspecial {

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

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

@keyframes tagpromo {

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

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

@keyframes taghot {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.promo-i {}

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

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

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

.promo-d .btn-gol {}

@media screen and (max-width: 1023px) {
    #faq_modal>li {
        max-width: 100%;
    }
}

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

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

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

    .tag-cs4 {
        display: none;
    }

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

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

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

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

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

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

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

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

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

@keyframes scale {
    0% {}

    10% {}

    50% {
        filter: brightness(1.5);
    }

    80% {}

    100% {}
}

@keyframes ani-down-top {

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

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

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

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

.d-menuprod {
    display: block;
}

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

.menuname {
    display: none;
}

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

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

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

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

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

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

#registerform_btnSubmit {
    background: url(./imgs/DaftarButton.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 90px;
    height: 40px;
    border: 0;
    margin: 15px auto 25px;
    font-size: 1em;
    min-width: 50%;
}

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

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

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

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

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

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

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

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

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

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

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

.contact_form {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

.games {
    width: 100%;
}

.games>ul {
    display: flex;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.img-box {
    position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#divFooter {
    margin-top: 30px;
}

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

.nav-btm {
    display: none;
    background: url(./imgs/footerbtm2.png) top center;
    position: fixed;
    bottom: 0;
    left: 0px;
    width: 100%;
    z-index: 10;
    background-size: cover;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.spsec2 img {
    width: 110%;
}

.mtg {
    width: 50px !important;
}

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

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

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

.spsec img {
    width: 90%;
}

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

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

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

.btn-register:hover,
#registerform_btnSubmit:hover {
    background: #526eff;
}

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 768px) {
    .divHeader-top {
        background: url(./imgs/HEADERBAR.png);
        background-position: center;
        background-size: cover;
    }

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

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

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

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

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

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

    #divFooter {
        margin-top: 0;
    }

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


.hc-horse.hc-box,
.hc-fish.hc-box,
.hc-lottery.hc-box,
.hc-casino.hc-box,
.hc-sport.hc-box {
    background: linear-gradient(90deg, rgba(54, 151, 222, .31) .04%, rgba(85, 41, 209, .15));
    border: #33407a 1px solid;
}
.hc-games.hc-box,
.hc-box {
    border: #33407a 1px solid;
    background: url(./imgs/bg-img-02.webp);
    background-color: #0e182f;
    background-repeat: no-repeat;
    background-position: 0 -12px;
}

.hc-title img {
    filter: grayscale(2) brightness(5);
    width: 30px;
    margin-right: 10px;
}
    .slot-container {
        display: flex;
        width: auto;
        flex-wrap: wrap;
    }

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

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

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

    .slot-game {
        padding: 12px;
    }

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

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

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

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

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

    .d-menuprod {
        display: none;
    }

    .m-menuprod {
        display: block;
    }

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

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

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

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

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

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

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