/* Define CSS Variables */
:root {
    /* Base Colors */
    --primary-color: #98825b;
    --secondary-color: #1a202c;
    --tertiary-color: #ffffff;
    --black-color: #000000;

    /* Text & link */
    --primary-text-color: #98825b;
    --secondary-text-color: #1a202c;
    --tertiary-text-color: #fff;
    --body-text-color: #333;

    /*Body*/
    --body-background-color: #fff;
    --body-text-color: #333;


    /* Header, Footer */
    --header-bg-color: #98825b;
    --header-text-color: #333;
    --footer-bg-color: #333;
    --footer-text-color: #efefef;

    /*Menu*/
    --menu-bg-color: #1a202c;
    --menu-text-color: #fff;
    --menu-text-hover-color: #98825b;
    --menu-hover-bg-color: 26, 32, 44;
    --menu-hover-bg-opacity: 0.8;

    /*scrolling message*/
    --scrollingmsg-bg-color: linear-gradient(90deg, transparent, #98825b, transparent);
    --scrollingmsg-text-color: #1a202c;


    /**jackpot & live feed*/
    --jackpot-frame-bg-color: #1a202c;
    --jackpot-bg-img: url(/data/2066/uploads/jackpot-home.gif);
    --jackpot-text-color: #fff;
    --jackpot-title-color: #ffc55e;
    --jackpot-username-color: #898989;
    --jackpot--deposit-color: #cfb78d;
    --jackpot--withdraw-color: #ffc050;


    /* Button Colors */
    --button-bg-color: #dbbd87;
    --button-text-color: ;
    --button-hover-bg-color: ;
    --button-active-bg-color: ;
    --playnow-gradient-color: linear-gradient(180deg, #ffecce, #ffc55e, #c9ab77);
    --playbutton-bg-color: #ffa300;
    --demobutton-bg-color: #98825b;

    /* Form Elements */
    --input-bg-color: #fff;
    --input-border-color: #ccc;
    --input-focus-border-color: #3498db;
    --input-text-color: #333;

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

    /* Card and Container Backgrounds */
    --card-bg-color: #fff;
    --container-bg-color: #ecf0f1;

    /* VIP */
    --vip-background: #12100f;

    /* Banking */
    --bank-linearOne-color: #98825b;
    --bank-linearTwo-color: #65583f;

    /* Modal Popup */
    --close-btn: #ec1c12;
}




::-webkit-scrollbar {
    background: var(--secondary-color);
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
    border-radius: 0px;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-family: "Nunito", sans-serif;
    font-size: initial;
}

input {
    outline: unset;
}

a {
    color: unset;
}
/*
a {
    color: #b7ae33;
}
*/

a:hover {
    text-decoration: none;
    color: var(--tertiary-text-color);
}

.page {
    display: flex;
}

.page.active {
    display: block !important;
}

.themetbl {
    display: table;
}

.themetblrow {
    display: block;
}

.themetblcell {
    display: block;
}

.themetblwidth {
    width: 100%;
}

.themetblheight {
    height: 100%;
}

.theme-container-box {
    width: 100%;
    height: auto;
}

#theme {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    background-size: cover;
}

#theme-frame {
    height: 100%;
    background: var(--body-background-color);
    margin: auto;
    width: 100%;
}

#theme-header {
    display: block;
}

#theme-header-link {
    width: 100%;
    background: var(--header-bg-color);
    position: relative;
    top: 0px;
    color: var(--header-text-color);
    display: block;
}

#theme-header-link .container {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#theme-menu {
    flex-grow: 1;
}

/*#theme-header-top {  background: #e1e1e2; border-top: 2px solid transparent;  }
#theme-header-userdefine {  display:block;  height:100%;  width:100%;  }*/

#theme-header-logo {
    display: none;
    position: absolute;
    width: 200px;
}

#theme-header-logo img {
    border: 0px;
    padding: 10px 0 0 5px;
    width: 100%;
}

#theme-menu {
    clear: both;
    flex-grow: 1;
}

#theme-container {
    clear: both;
    min-height: 0px;
    text-align: left;
}

#theme-title {
    display: none;
}

#theme-frame-panel {
    display: none;
}

#theme-contain {
    float: left;
    width: 100%;
    display: inline;
}

#theme-lang {
    display: none;
    padding-right: 20px;
    z-index: 999;
}

#theme-lang ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: right;
}

#theme-lang ul li {
    display: inline;
}

#theme-lang ul li a,
#theme-lang ul li a:visited {
    padding: 3px 5px 3px 5px;
    border-left: 1px solid #888888;
    color: var(--tertiary-text-color);
}

#theme-lang ul li:first-child a {
    border-left: 0px;
}

#theme-share {
    text-align: right;
    float: right;
    padding: 10px;
    color: var(--tertiary-text-color);
}

#theme-share a,
#theme-share a:visited,
#theme-share a:hover {
    color: var(--tertiary-text-color);
    text-decoration: none;
}

#theme-nav {
    clear: both;
    display: block;
    overflow: hidden;
}

#theme-nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#theme-nav ul li {
    display: inline;
}

#theme-nav ul li a {
    padding: 0px 10px 0px 10px;
    background: url(/theme/_plain_css/imgs/arrow-v.png) left no-repeat;
}

.menu-top-header {
    display: none;
}

.collapse {
    display: none;
}

.clearboth {
    clear: both;
}

#logo {
    width: 160px;
    padding: 5px;
}

.logo img {
    width: 100%;
}

#redirectaddr {
    padding: 9px;
    text-align: center;
    font-size: 15px;
    background: var(--tertiary-color);
    border-radius: 20px;
    font-weight: bold;
}

.home-link {
    margin-bottom: 15px;
}

.home-link a {
    color: var(--primary-text-color);
    font-size: 12px;
    margin: 0 0 30px 0;
}

.home-link a:hover {
    color: var(--secondary-color);
}

/*=================================== BUTTON ===================================*/
.btn-box {
    display: flex;
}

.btn-login {
    border: 1px solid var(--tertiary-color);
    border-radius: 20px;
    margin: 0 10px 0 5px;
    background: var(--secondary-color);
}

.btn-login .btn {
    color: var(--tertiary-text-color);
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.2s;
    border-radius: 20px;
}

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

.btn-sign-up {
    border: 0px solid var(--black-color);
    border-radius: 20px;
    background: var(--button-bg-color);
    animation: 1.5s ease 0s infinite normal none move;
}

.btn-sign-up .btn {
    color: var(--black-color);
    text-transform: uppercase;
    font-weight: bold;
    transition: 0.2s;
    border-radius: 20px;
}

.btn-sign-up .btn:hover {
    color: var(--tertiary-text-color);
}

.play-btn {
    position: relative;
    float: left;
    background: var(--playnow-gradient-color);
    color: var(--tertiary-text-color);
    padding: 10px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 20px;
    border: none;
    filter: drop-shadow(0px 1px 3px #595959);
    margin: 0 0 30px 0;
    animation: 1.5s ease 0s infinite normal none move;
}

.play-btn a {
    color: var(--secondary-text-color);
}

.login-btm a {
    color: var(--primary-color);
}

.login-btm a:hover {
    color: var(--tertiary-text-color);
}

.submit,
button.prev_step,
input[type="submit"] {
    border: 0px solid #e1d0a8;
    outline: unset;
    text-align: center;
    text-transform: uppercase;
}

@keyframes move {
    0% {
        opacity: 0.8;
    }

    10% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    70% {
        transform: scale(0.8);
        box-shadow: #ffd73490 0 0 0 0.2rem;
    }

    80% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: #ffd73450 0 0 0 0.5rem;
        opacity: 1;
    }
}

/*=================================== MODAL ===================================*/
.modal-content {
    background: linear-gradient(180deg,var(--primary-color), var(--secondary-color));
    box-shadow: 0 0 15px rgba(0, 15, 128, 0.37);
    border: 0px solid var(--tertiary-color) !important;
    border-radius: 10px;
}

.modal-body {
    color: #aaaaaa;
}

.modal-header {
    border-bottom: 0 !important;
    padding: 0 !important;
    border: unset;
    height: 0;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 999;
}

.modal-header .close {
    margin-top: 0px !important;
    padding: 8px 13px;
    background: var(--close-btn);
    opacity: 1;
    border-radius: 50%;
    color: var(--tertiary-text-color);
    text-shadow: none;
}

.modal-dialog {
    width: 40%;
    margin: 6% auto;
}

/*=================================== MAIN MENU ===================================*/
div#cmsmenu {
    background: var(--menu-bg-color);
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: flex-end;
}

ul.cmsmenu {
    margin: 0px;
    list-style: none;
    padding: 0px;
    background-color: transparent;
    background-repeat: repeat;
    border-color: transparent;
    border-width: 0px;
    border-style: solid;
}

ul.cmsmenu li {
    display: block;
    margin: 0 15px;
    vertical-align: middle;
    border-width: 0px;
    color: var(--menu-text-color);
    cursor: default;
    z-index: 2;
    padding: 10px 0;
}

ul.cmsmenu li a:hover {
    color: var(--menu-text-hover-color);
    background-color: transparent;
}
ul.cmsmenu li:hover>a {
    background-color: unset;
}
.cmsmenui.active {
    color: var(--menu-text-hover-color);
    border-radius: 5px;
    padding: 5px;
    margin: 10px;
}

ul.cmsmenu a,
ul.cmsmenu li.dis a:hover,
ul.cmsmenu li.sep a:hover {
    background-color: transparent;
    border-color: transparent;
    padding: 0;
}

ul.cmsmenu ul {
    float: left;
    z-index: -1;
    left: -128px;
    top: 67%;
    padding-top: 26px;
    border-radius: 10px;
    background: rgba(var(--menu-hover-bg-color), var(--menu-hover-bg-opacity)) ;
    width: 180px;
}

.menu-logo {
    position: absolute;
    top: 100%;
    width: 15%;
}

.menu-logo img {
    width: 100%;
    margin: 15px;
}

/*=================================== SUB MENU ===================================*/
.header-link {
    display: flex;
    flex-direction: row;
    padding: 10px 10px;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
}

.clock {
    color: var(--tertiary-text-color);
    font-size: 12px;
    opacity: 1;
    padding-right: 10px;
    border-right: 1px solid var(--secondary-color)
}

.menu-downloadapp {
    position: relative;
    margin: 0 0 0 30px;
    font-size: 18px;
}

.menu-downloadapp a {
    color: var(--tertiary-text-color);
}

.menu-downloadapp a:hover {
    color: var(--secondary-text-color)
}

/*=================================== LANGUAGE DROPDOWN BUTTON ===================================*/
.dropdown:hover .dropdown-content {
    display: block;
    padding-top: 5px;
    padding-left: 3px;
}

.language.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 15px;
    background: transparent;
}

.language .dropbtn {
    background: unset;
    color: var(--tertiary-text-color);
    border: none;
}

.language .dropbtn .glyphicon {
    top: 0px;
    left: 5px;
    font-size: 7px;
}

.language .dropdown-content img,
button.dropbtn img {
    width: 28px;
}

.language .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--tertiary-text-color);
    min-width: max-content;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0px 2px 7px 0px #00000033;
    z-index: 9999;
}

.language .dropdown-content a {
    color: var(--secondary-text-color);
    padding: 2px 5px;
    text-decoration: none;
    display: block;
}

.language .dropdown-content a:hover {
    text-decoration: underline;
}

.lang-active {
    color: #cfb78d !important;
}

.language {
    background: #6fd0fd00;
}

.language span {
    color: var(--black-color);
}

.country-flag-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 5px;
}

.country-info {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    float: left;
}

.country-name {
    font-size: 10px;
    margin: 0;
    color: #5d4f37;
}

.country-languages {
    font-size: 11px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/*----------------------------------------------------------------------------- HOME PAGE -----------------------------------------------------------------------------*/
/*=================================== BANNER ===================================*/
.flexslider {
    border: 0;
    margin: 0;
}

.flex-control-nav {
    bottom: 0;
}

.flex-direction-nav .flex-prev {
    left: 0;
}

.flex-direction-nav .flex-next {
    right: 0;
}

.flexslider .slides img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    filter: drop-shadow(0px 5px 6px #000000bd);
}

.flexslider .flex-control-paging li a.flex-active {
    background: var(--primary-color);
}

.flexslider .flex-control-nav li {
    margin: 0 13px;
}

.flexslider .flex-control-paging li a {
    width: 20px;
    height: 10px;
    position: absolute;
    margin-top: -3%;
    z-index: 9 !important;
    background: #9f9e9e89;
    border: 1px solid var(--tertiary-color);
}

.flex-direction-nav a:before {
    font-size: 35px;
    display: inline-block;
    content: "\f001";
    color: var(--secondary-text-color);
    text-shadow: 1px 1px 0 var(--tertiary-color);
}

.home-page {
    margin-top: 60px;
}

.announcetext {
    padding: 15px 5px 0;
    background: var(--scrollingmsg-bg-color);
    width: 100%;
    color: var(--scrollingmsg-text-color);
    overflow-x: hidden;
    position: relative;
}

.marqIcon {
    display: inline-block;
    width: 3%;
}

marquee#horizontal_scrollmsg {
    vertical-align: middle;
    display: inline-block;
    width: 94%;
}

marquee#horizontal_scrollmsg ul {
    list-style: none;
    padding: 0;
    width: 100vw;
}

/*=================================== WITHDRAW ===================================*/
.empty {
    float: left;
    width: 100%;
}

.live-feed-holder {
    background: var(--jackpot-frame-bg-color);
    border-radius: 15px;
}

.live-feed-primary-part-holder {
    background: var(--jackpot-bg-img) no-repeat;
    background-size: 100%;
    border-radius: 15px;
    padding: 0px;
    width: 100%;
    height: 70px;
    position: relative;
}

.live-feed-primary-part-holder #subcontent #jackpot {
    top: 40%;
    left: 0;
    font-size: x-large;
    font-weight: 900;
    color: var(--jackpot-title-color);
    position: absolute;
    width: 100%;
    text-align: center;
}

.live-feed-secondary-part-holder {
    border-radius: 15px;
    box-shadow: 0 0 10px 0 #00000080;
    display: flex;
    height: 300px;
    max-height: 500px;
    padding: 8px 15px;
    position: relative;
    width: 100%;
    flex-direction: column;
}

.live-feed-secondary-part-holder h4 {
    color: var(--jackpot-title-color);
    font-style: italic;
    font-weight: 800;
    margin: 0 0 10px 0;
}

.live-feed-secondary-part-holder>table {
    border-collapse: separate;
    opacity: 1;
    overflow: hidden;
    width: 100%;
}

.live-feed-secondary-part-holder>table>thead>tr>th {
    color: var(--jackpot-text-color);
    font-size: 12px;
    font-weight: 500;
    padding: 0 0 10px;
    text-transform: uppercase;
}

.live-feed-secondary-part-holder>table>tbody,
.live-feed-secondary-part-holder>table>tbody>tr {
    width: 100%;
    line-height: 3rem;
}

.live-feed-secondary-part-holder>table>tbody>tr>td:first-of-type {
    color: var(--jackpot-username-color);
    font-weight: 600;
}

.live-feed-secondary-part-holder>table>tbody>tr>td:nth-of-type(2) {
    color: var(--jackpot--deposit-color);
    font-weight: 500;
}

.live-feed-secondary-part-holder>table>tbody>tr>td:nth-of-type(3) {
    color: var(--jackpot--withdraw-color);
    font-weight: 600;
}

/*.live-feed-secondary-part-holder>table>tbody>tr:nth-child(2n) {  background-color: #232a33; border-radius: 10px;  }*/

/*=================================== VIDEO & AMBASSADOR ===================================*/
.video-box {
    margin-top: 60px;
}

.vid-wrapper {
    height: 415px;
    max-height: 600px;
    margin-bottom: 15px;
}

.vid-wrapper iframe {
    border-radius: 15px;
}

.side-banner img {
    float: right;
    width: 100%;
    border-radius: 15px;
    filter: drop-shadow(0px 5px 6px #000000bd);
}

.live-btm {
    display: flex;
    margin: 15px 0 0 0;
}

.vid-btn {
    display: flex;
    justify-content: space-between;
}

.vid-btn div {
    flex: 0 0 32%;
}

.vid-btn div img {
    filter: grayscale(1);
    width: 100%;
    border-radius: 15px;
}

.vid-btn div.active img {
    filter: grayscale(0);
    width: 100%;
    border-radius: 15px;
}

.vid-btn:hover {
    cursor: pointer;
}

/*=================================== HOME-PROMOTION ===================================*/
.hpromo {
    display: flex;
    flex-direction: column;
    margin: 60px auto 0;
}

.promo-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 15px 0;
}

.item-title {
    font-size: 20px;
    text-transform: capitalize;
    margin: 0;
    font-weight: bold;
}

.promo-line .promo-btn {
    position: relative;
}

.promo-line .promo-btn a {
    padding: 5px 20px;
    background: var(--primary-color);
    border-radius: 10px;
    color: var(--tertiary-text-color);
    text-decoration: none;
    font-weight: 600;
}

.promo-line .promo-btn a:hover {
    color: var(--secondary-text-color);
}

.promo-sec ol {
    margin: 0;
    padding: 0;
    text-align: center;
    gap: 15px;
}

.promo-sec ol li.question img {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.hpromo-wrapper .swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.hpromo-wrapper ol#faq_modal {
    display: flex;
    flex-direction: nowrap;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    gap: 15px;
    justify-content: space-between;
}

.hpromo-wrapper ol#faq_modal li.question {
    width: 34% !important;
    padding: 0px;
    display: inline-block;
    list-style: none;
}

.hpromo-button {
    display: none;
}

.hpromo-button .swiper-pagination {
    display: none;
}

.hpromo-button .swiper-button-prev,
.swiper-button-next {
    position: absolute;
    width: 30px;
    height: 50px;
    margin-top: -15%;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
    top: auto;
    filter: drop-shadow(1px 1px 2px black);
}

.note {
    margin-top: 15px !important;
}

/*=================================== FREE-PLAY GAME ===================================*/
.freeplay-section {
    margin-top: 60px;
}

#div-gameLobby {
    width: 100%;
    padding: 0 15px;
}

.main-title h4 {
    color: #0e486a;
    font-size: x-large;
    font-weight: 600;
}

.gameLobby-container .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.gameLobby-wrapper .swiper-slide {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

.gameLobby-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: space-between;
}

.gameLobby-slide {
    padding: 1px;
    margin: 0px 12px;
    width: 22% !important;
}

.game-slide {
    background-color: var(--tertiary-text-color);
    color: var(--black-color) !important;
    border-radius: 18px;
    display: block;
    overflow: hidden;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.game-top {
    position: relative;
    padding: 25px 10px 15px;
    overflow: hidden;
    color: #444;
    display: flex;
    flex-direction: column;
}

.game-top .game-detail {
    float: left;
}

.game-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.game-pro {
    font-size: 12px;
    margin: 0;
    color: #666;
}

.game-top .btn-play {
    padding: 5px;
    font-size: 14px;
    font-weight: 600;
    background: var(--primary-color);
    color: var(--secondary-text-color);
    border-radius: 10px;
    width: 30%;
    text-align: center;
}

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

/*=================================== PANEL ===================================*/
.home-info,
.page-panel {
    margin-top: 60px;
}

.panel-group {
    margin-bottom: 15px;
}

.panel {
    padding: 0;
    max-height: 0;
    overflow: hidden;
}

.page-panel {
    margin-bottom: 0px;
}

.panel.panel-default {
    background-color: transparent;
    height: auto;
    max-height: fit-content;
    margin-bottom: 10px;
}

.panel-default>.panel-heading {
    background: linear-gradient(90deg, var(--secondary-color), var(--button-bg-color), var(--secondary-color));
    border-radius: 5px;
    color: var(--tertiary-text-color);
    border-color: #ddd;
}

.panel-heading a {
    color: var(--tertiary-text-color);
}

.panel-title {
    color: var(--tertiary-text-color);
}

.panel-title:hover {
    color: #ffd58c;
}

.panel-body {
    padding: 10px !important;
    color: black;
    background: var(--tertiary-color);
    margin: 0px;
    font-size: 14px;
    border-top: 0px solid #ddd !important;
}

.panel-body p a {
    color: #ff8400;
}

.panel-body p a:hover {
    color: #ff0000;
}

#accordion {
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.2s;
}

/*=================================== FOOTER ===================================*/
#theme-footer {
    background: var(--footer-bg-color);
    padding: 30px 0;
    clear: both;
    border-top: 0px solid #888888;
}

.footer-title {
    color: var(--footer-text-color);
    margin-top: 30px;
    text-align: left;
    font-weight: 600;
}

.pay ul li {
    width: 25%;
    display: inline-block;
    padding: 0 5px;
    margin: 10px;
}

.license ul li {
    display: inline-block;
    padding: 0 5px;
    margin: 10px;
}

.license .modal-lg {
    width: max-content;
}

.license .modal-content {
    background: var(--secondary-color) 61;
}

.social ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    list-style: none;
}

.social ul li {
    width: 25%;
    display: inline-block;
    padding: 0 7px;
    filter: grayscale(1);
}

.social ul li:hover {
    filter: grayscale(0);
    transition: filter 0.3s;
}

.social ul,
.pay ul,
.license ul {
    margin: 0;
    padding: 0;
}

.social ul li img,
.pay ul li img,
.license ul li img {
    width: 100%;
    height: auto;
}

.responsible li {
    list-style: none;
    margin-left: 3%;
    filter: opacity(0.6) drop-shadow(0 0 white);
}

button#cert-btn {
    background: none;
    border: none;
    padding: 0;
}

button#cert-btn img {
    width: 100%;
}

center {
    display: none;
}

.copyright {
    display: flex;
    flex-direction: row;
    text-align: center;
    justify-content: center;
    margin: 30px 0 0 0;
    list-style: none;
}

.copyright p {
    margin: 0;
    color: #a6a6a6;
}

/*=================================== LOGIN ===================================*/
.login {
    text-align: center;
}

.login .logo {
    width: 50%;
    margin: auto;
    padding: 10px 0;
}

.login span {
    text-align: center;
}

.login #customform {
    width: 50%;
    margin: auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.login #customform dl {
    margin: 0;
}

.login #customform dl,
#loginform dl {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.login-btm {
    text-align: center;
    padding: 30px;
}

#customform #customform_UserName,
#customform #customform_Password {
    width: 100%;
    font-size: 15px;
    border: 0;
    border-bottom: 1px solid white;
    padding: 10px;
    color: var(--tertiary-text-color);
    background: transparent;
    outline: unset;
}

.login input#customform_submit {
    background: #c2a46e;
    color: var(--tertiary-text-color);
    padding: 5px 20px;
    font-weight: bold;
    margin-top: 15px;
    border-radius: 20px;
}

/*=================================== REGISTER ===================================*/
/*------------------------------------------------- REGISTER LEFT -------------------------------------------------*/
#theme-contain-registration {
    background: #f2f5f5;
}

.register {
    display: flex;
    background: #f2f5f5;
    border-radius: 10px;
    width: 80%;
    margin: 30px auto;
    flex-wrap: wrap;
}

.reg-txt {
    width: 100%;
    text-align: center;
    padding: 10px;
    background: linear-gradient(90deg, transparent, var(--bank-linearOne-color), transparent);
    color: var(--secondary-text-color);
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 30px;
}

.regis-content {
    width: 100%;
}

.regis-box {
    width: 50%;
    background: var(--tertiary-color);
    padding: 40px;
    float: left;
    border-radius: 10px;
}

.register #registerform {
    width: 100%;
    overflow: auto;
}

.register #registerform dl {
    margin-bottom: 5px;
}

.register #registerform dt {
    width: 100%;
    color: #927d37;
    font-size: 10px;
    display: none;
}

.register #registerform dd {
    text-align: left;
}

.register #registerform #groupSubmit dd {
    float: left;
    width: 100%;
}

.register #registerform textarea,
.register #registerform input[type="text"],
.register #registerform input[type="text"],
.register #registerform input[type="password"] {
    width: 100%;
    color: var(--black-color);
    font-size: 13px;
    padding: 10px;
    background: white;
    border: 1px solid #9a9a9a !important;
    border-radius: 5px;
    margin: 5px 0;
    height: 40px;
}

.register #registerform .btnCheckUser,
#registerform_btnSubmit {
    color: var(--tertiary-text-color);
    font-weight: bold;
    background: var(--primary-color);
    padding: 10px;
    text-transform: uppercase;
    border-radius: 5px;
    font-size: 11px;
    outline: 0;
    border: 0;
}

.register #registerform dl#groupCurrency {
    width: 100%;
}

.register #registerform #registerform_Currency {
    background: var(--tertiary-color);
    width: 100%;
    color: #757575;
    border: 1px solid #9a9a9a !important;
    padding: 10px;
    border-radius: 5px;
    outline: unset;
}

dl#groupVerifyCode {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.register input::placeholder {
    transform: translateX(0px);
    transition: 0.4s;
}

.register input:focus::placeholder {
    transform: translateX(200px);
    transition: 0.4s;
    opacity: 0;
    transition-timing-function: ease-in;
}

.reg p {
    font-size: 10px;
    color: grey;
    margin-top: 20px;
}

.small.w3-text-green {
    color: green !important;
}

.small.w3-text-red {
    color: red !important;
}

/*------------------------------------------------- REGISTER RIGHT-------------------------------------------------*/
.regis-dtl {
    width: 45%;
    float: right;
    background: transparent;
    border-radius: 10px;
}

.regis-banner {
    width: 100%;
}

.regis-banner img {
    width: 100%;
    border-radius: 10px;
    margin: auto;
}

.regis-info h4 {
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 30px;
    font-weight: bold;
    margin-top: 15px;
}

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

/*=================================== HOT & NEW ===================================*/
.hot-provider {
    background: #ff0000;
    color: var(--tertiary-text-color);
    position: absolute;
    margin: -2% 0 0 11%;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 10px;
    animation: 1s ease 0s infinite normal none scale;
    width: 40px;
}

.new-provider {
    background: #ff9900;
    color: var(--tertiary-text-color);
    position: absolute;
    margin: -2% 0 0 11%;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 10px;
    animation: 1s ease 0s infinite normal none scale;
    width: 40px;
}

.float-dot {
    background: #f7af00;
    color: #03045e;
    position: absolute;
    left: 70%;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 10px;
    top: 5%;
    animation: move;
    animation: 1s ease 0s infinite normal none scale;
}

@keyframes scale {
    0% {
        opacity: 0.8;
    }

    10% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    70% {
        transform: scale(0.8);
    }

    80% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*=================================== SPORT/ CASINO/ SLOT/ POKER ===================================*/
.game-filter {
    display: flex;
    width: 100%;
    background: #e1e1e2;
    margin: 30px 0;
    padding: 15px;
    border-radius: 10px;
    justify-content: center;
}

.gf-wrapper {
    display: grid;
    flex-direction: row;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
    grid-gap: 15px 0px;
    grid-template-columns: repeat(6, 0.7fr);
    justify-content: space-between;
}

.logo-box {
    width: 170px;
    height: 40px;
    background: var(--tertiary-color);
    border-radius: 20px;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
}

.logo-box.active {
    border: 0px solid #fe9b1c;
    background: #c7aa76;
    color: var(--tertiary-text-color);
}

.swiper-slide {}

.swiper-slide button {}

.swiper-slide .logo-box img {
    width: 60px;
}

.games-box.active {
    display: block;
}

.games-box {
    position: relative;
    transform: translateY(0%);
    width: 100%;
    display: none;
}

/*------------------------------------------------- SPORT -------------------------------------------------*/
.sport-container {
    margin: 0 auto;
}

.sport-pc iframe {
    width: 100%;
    height: 600px;
}

.divSport-title h1 {
    text-align: center;
}

.iframe-sport {
    width: 100%;
    text-align: center;
}

.iframe-sport iframe {
    width: 100%;
    height: 600px;
}

.live-tvsports {
    display: inline-block;
}

#api-leaguefeed {
    position: unset !important;
    text-align: center;
    height: unset !important;
}

#api-leaguefeed .brick {
    min-width: 205px;
    border-radius: 10px;
    border: 0px solid #6fd0fd;
    opacity: 1 !important;
    height: auto !important;
    margin: 10px;
    position: unset !important;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

#api-leaguefeed .brick>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#api-leaguefeed .brick>ul>li {
    padding: 5px 10px;
}

#api-leaguefeed #playtime {
    background: var(--secondary-color);
    color: var(--tertiary-text-color);
    text-align: center;
    border-radius: 10px 10px 0 0;
}

#api-leaguefeed #livetv a,
#api-leaguefeed #livetv a:visited {
    display: block;
    color: var(--tertiary-text-color);
    text-decoration: none;
    text-align: center;
    background: #896526;
    padding: 10px;
    border-radius: 10px;
}

#api-leaguefeed #versus {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
}

#api-leaguefeed #versus div:nth-child(1) {
    color: #0080ff;
}

#api-leaguefeed #versus div:nth-child(2) {
    color: var(--black-color);
    font-size: 12px;
}

#api-leaguefeed #versus div:nth-child(3) {
    color: red;
}

/*------------------------------------------------- CASINO-------------------------------------------------*/
.js-tabs {}

.js-tabcontent {
    width: 100%;
}

.js-tabs a {
    font-weight: bold;
    outline: unset;
}

.game-box {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.games-item {
    flex: 0 0 18%;
}

.games-item:hover .hover-box {
    transform: translateY(0);
    opacity: 1;
    transition: 0.3s;
}

.img-box {
    position: relative;
    overflow: hidden;
}

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

.hover-box {
    position: absolute;
    padding-top: 0%;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(90%);
    opacity: 0;
    background: #00000080;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.hover-box span {
    padding: 6px;
    margin: 3px auto;
    width: 52%;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    color: var(--black-color);
}

.hover-box span:first-child {
    background: var(--playbutton-bg-color);
    color: var(--tertiary-color);
}

.hover-box span:last-child {
    background: var(--demobutton-bg-color);
}

.txt-box {
    display: none !important;
}

.txt-box {
    display: flex;
    background: var(--black-color);
    position: relative;
    margin: 0;
    color: var(--tertiary-text-color);
    padding: 10px 10px 15px;
    align-items: center;
    justify-content: space-between;
}

.txt-box::before {
    content: "";
    height: 4px;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #ec1c12;
    position: absolute;
    z-index: 9;
}

.txt-box::after {
    content: "";
    width: 40%;
    height: 6px;
    background: #ec1c12;
    position: absolute;
    bottom: 2px;
    margin-left: 8px;
    z-index: 9;
    -webkit-transform: perspective(0.5em) rotateX(8deg);
    transform: perspective(0.5em) rotateX(8deg);
}

img.love {
    width: 20px;
    float: right;
}

#id-firsty3 .games-item,
#id-firsty4 .games-item,
#id-firsty5 .games-item,
#id-firsty6 .games-item,
#id-firsty7 .games-item,
#id-firsty10 .games-item,
#id-firsty14 .games-item,
#id-firsty15 .games-item,
#id-firsty16 .games-item,
#id-firsty17 .games-item {
    flex: 0 0 31%;
}

#id-firsty18 .games-item {
    flex: 0 0 23%;
}

/*=================================== JACKPOT ===================================*/
.jackpot-sec {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.jackpot-sec img {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 20px;
}

#subcontent #jackpot {
    position: absolute;
    top: 60%;
    left: 32.5%;
    width: auto;
    margin: auto;
    font-size: xxx-large;
    font-weight: bold;
    color: #ffa500;
}

/*========================== COCKFIGHT & HORSE RACING ==========================*/
.title {
    margin-bottom: 30px;
}

.title h1 {
    color: var(--secondary-text-color);
    text-align: left;
    padding: 10px 0;
    font-weight: bold;
    border-bottom: 1px solid #cbcbcb;
}

.banner img {
    width: 100%;
    border-radius: 15px;
}

.cockfight-info h1 {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--primary-text-color);
}

.cockfight-line h1,
.cockfight-line h2,
.cockfight-line h3 {
    color: #00baf6;
}

.cockfight-line p a {
    color: #0d59ff;
}

.cockfight-line p a:hover {
    color: #00baf6;
}

.racing-info h1 {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--primary-text-color);
}

/*=================================== PROMOTION CATEGORY ===================================*/
.tab {
    margin: 30px 0;
    overflow: hidden;
    background: #f3f5f6;
    border-radius: 10px;
    padding: 0 15px;
}

.tab .promo-tablinks {
    border: 0;
    border-radius: 0;
    background-color: #f3f5f6;
    color: #a5a5a5;
    margin: 5px 5px;
}

.tab .promo-tablinks:hover {
    color: #feb54a;
}

.tab .promo-tablinks.active {
    color: #feb54a;
    border-bottom: 3px solid #feb54a;
}

input[type="checkbox"],
input[type="radio"] {
    height: 10px;
    margin: 4px 5px 0 0 !important;
}

/*=================================== PROMOTION DETAIL===================================*/
.promo-wrapper {
    width: 100%;
    padding: 0;
}

#promobox ol#faq_modal {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    gap: 25px;
    justify-content: flex-start;
}

#promobox ol#faq_modal li.question {
    width: 100%;
    list-style: none;
    padding: 0px;
    display: inline-block;
}

#promobox ol#faq_modal .promo img {
    border-radius: 10px;
    width: 100%;
}

#promobox ol#faq_modal::after {
    content: "";
    flex: auto;
}

.promo .info h3 {
    color: var(--secondary-text-color);
    margin: 0px;
}

.promo .info h5 {
    color: #7d5205;
    margin-bottom: 10px;
}

.promo .tnc-btn {
    color: var(--black-color);
    padding: 5px 10px;
    background: linear-gradient(to top, #98825b, #ffb649);
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.promo .join-btn {
    color: var(--tertiary-text-color);
    padding: 5px 15px;
    background: linear-gradient(to top, #98825b, var(--secondary-color));
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
}

.promo-count {
    padding: 30px 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.promo-count span {
    font-size: 12px;
    color: var(--secondary-text-color);
    width: 100%;
}

.time-container {
    display: flex;
    margin-top: 5px;
}

.day-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.day-number {
    border-radius: 5px;
}

.day-text,
.time-text {
    margin: 0;
    color: #535d64;
    font-size: 12px;
}

.time-box-container {
    display: flex;
    margin: 0 10px;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.time-colon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #e1e1e2;
    padding: 0 5px;
}

.time-hour {
    border-radius: 5px 0 0 5px;
}

.time-sec {
    border-radius: 0 5px 5px 0;
}

.day-number,
.time-hour,
.time-min,
.time-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 40px;
    background: #e1e1e2;
    color: #4d4d4d;
}

/*=================================== PROMOTION FANCY BOX===================================*/
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
    border: 0;
    outline: none;
    vertical-align: top;
    background: var(--tertiary-color);
    border-radius: 15px;
}

div#faq_fbwrap {
    position: fixed !important;
    transform: translateY(0%);
    width: 70% !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
}

.fancybox-opened .fancybox-skin {
    margin: auto !important;
    width: auto;
    height: auto;
    box-shadow: none;
}

.fancybox-skin {
    padding: 30px;
    text-shadow: none;
    position: relative;
}

.fancybox-outer,
.fancybox-inner {
    position: relative;
}

.fancybox-close {
    top: 0px;
    right: 0px;
}

.fancybox-inner {
    width: 100% !important;
    background-color: var(--tertiary-text-color);
    overflow: auto;
    height: 525px;
    color: var(--black-color) !important;
    padding: 0 10px;
}

.fancybox-inner p {
    margin-bottom: 0;
    font-size: 14px;
}

.fancybox-inner h4 {
    display: none;
}

.fancybox-inner .promo-banner img {
    width: 100%;
    margin: 0 0 15px;
}

.fancybox-inner .promo {
    display: flex;
    flex-direction: row;
    padding: 0px;
    border-bottom: 0px solid #313131;
}

.fancybox-inner .promo .promo-row img {
    position: relative;
    left: 40%;
}

.fancybox-inner .promo .info,
.fancybox-inner .promo .promo-count {
    display: none;
}

.fancybox-inner .promo-img,
.fancybox-inner .promo-txt {
    border-radius: 0;
    width: 100%;
}

.fancybox-inner strong {
    font-size: 15px;
    color: #efbd63;
}

.fancybox-inner table {
    width: 100%;
}

.fancybox-inner table.tbl-list {
    margin: 15px 0px;
}

.tbl-list .title {
    font-weight: bold;
    font-size: large;
}

.td-bg-color {
    background: #c7aa76;
}

.tbl-list a {
    color: #995f04;
}

.fancybox-inner #tbllisting tr td {
    padding: 5px;
    border: 1px solid #c9c9c9;
}

.fancybox-inner .promo-list {
    margin: 15px 0 0 0;
}

.fancybox-inner .promo-list ul {
    padding: 15px;
    line-height: 2.5rem;
    list-style: number;
}

.fancybox-inner .promo-list a {
    color: #9f6702;
}

/*=================================== VIP ===================================*/
#theme-contain-vip {
    background: var(--vip-background);
}

.vip-banner {
    position: relative;
}

.vip-banner img {
    width: 100%;
}

.vip-banner-title {
    position: absolute;
    width: 100%;
    top: 35%;
    color: var(--tertiary-text-color);
    padding: 0 60px;
    text-shadow: 0 2px 5px black;
}

.vip-banner-title h4 {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 5px 30px;
}

.vip-banner-title h2 {
    font-size: 40px;
    font-weight: bold;
    margin: 0 0 5px 30px;
}

.vip-banner-title p {
    font-size: 18px;
    margin: 0 0 5px 30px;
    width: 40%;
}

.vip-table-content {
    width: 100%;
    margin: auto;
    color: var(--tertiary-text-color);
    margin-top: -120px;
    position: relative;
    margin-bottom: 30px;
    padding: 30px;
}

.vip-table-content h4,
.vip-table-content h5 {
    color: var(--tertiary-text-color);
    font-weight: bold;
    margin-left: 60px;
}

.sml-title {
    font-weight: bold;
    font-size: 16px;
}

#vip-table {
    border-radius: 15px;
    margin: auto;
}

#vip-table td,
#vip-table th {
    padding: 5px 10px;
}

.vip-level {
    text-align: center;
    color: #f6af01;
}

.bgclr01 {
    width: 150px;
}

.text-gold {
    color: #a68952;
    padding: 8px 10px !important;
    border-top: 1px solid var(--tertiary-color);
    border-bottom: 1px solid var(--tertiary-color);
}

.vip-tbcntnt {
    border-radius: 10px;
}

.vip1 {
    background: var(--secondary-color);
    border-radius: 10px;
    color: var(--tertiary-text-color);
    padding: 50px;
    width: 48% !important;
    float: left;
    height: 500px;
}

.vip-heading1 h3 {
    color: #ffc353;
    font-weight: bolder;
    margin: 0 0 20px 0;
}

.vip-body1 li {
    color: var(--primary-text-color);
    list-style: none;
}

.vip2 {
    background: var(--secondary-color);
    border-radius: 10px;
    color: var(--tertiary-text-color);
    padding: 50px;
    width: 48% !important;
    float: right !important;
    height: 500px;
    margin-bottom: 30px;
}

.vip-heading2 h3 {
    color: #ffc353;
    font-weight: bolder;
    margin: 0 0 20px 0;
}

.vip-body2 li {
    color: var(--primary-text-color);
    list-style: none;
}

.vip-body2 h5 {
    margin-top: 20px;
}

/*=================================== BANKING ===================================*/
.bank-table table {
    background: linear-gradient(180deg, #98825b 0%, #65583f 100%);
    border: 0px solid #102632;
    width: 100%;
    margin: auto;
    font-size: 14px;
}

.bank-table table tr,
.bank-table table th,
.bank-table table td {
    padding: 10px;
    color: var(--tertiary-text-color);
    text-align: center;
    border: 1px solid white;
}

.gateway {
    border: 1px solid #e1e1e2;
    padding: 10px 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px var(--secondary-color)ad;
}

.paygate {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    width: 100%;
    margin: 0;
}

.paygate li img {
    width: 80%;
}

/*=================================== CONTACT ===================================*/
.contact {
    text-align: center;
}

.contact-malaysia,
.contact-singapore,
.contact-indonesia {
    margin-bottom: 30px;
}

.c-area {
    border: 0px solid red;
    padding: 10px;
}

.c-area img {
    filter: drop-shadow(2px 4px 6px black);
    width: 50%;
}

.c-inner {
    width: 65%;
    padding: 10px;
    margin: 20px auto;
    border: 1px solid var(--secondary-color)
    border-radius: 15px;
}

p.c-title {
    font-size: 24px;
    font-weight: bolder;
    color: var(--primary-text-color);
}

.c-inner p {
    text-align: center;
}

.qr {
    width: 80%;
    margin: auto;
}

.qr img {
    width: 100%;
}

.center {
    text-align: left;
    margin: auto;
}

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

.feedback h1 {
    border-bottom: 1px solid #cbcbcb;
}

.seo-line {
    margin-bottom: 30px;
    padding: 0 30px;
}

.seo-line form {
    background: var(--tertiary-color);
    padding: 10px;
    border-radius: 10px;
}

.seo-line input {
    outline: unset;
    width: 330px;
    height: 30px;
    max-height: 30px;
    max-width: 330px;
    border: 1px solid #c8c8c8;
    margin-bottom: 5px;
    background: white;
}

#TextArea1,
#TextArea2 {
    border: 1px solid #c8c8c8;
    max-width: 330px;
    max-height: 200px;
}

/*=================================== DOWNLOAD APP===================================*/
.downloadapp {
    display: flex;
    align-items: flex-end;
}

.left-text {
    position: relative;
    width: 100%;
    text-align: center;
}

.left-text h3 {
    margin: 0 0 10px 0;
}

.left-text h2 {
    margin: 0 0 10px 0;
    font-weight: bolder;
}

.left-image img {
    width: 100%;
}

.download-qr {
    margin: 30px 0 30px 0;
}

.download-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    width: 100%;
}

.icon-hover-box {
    width: 100%;
}

.icon-hover-box button {
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
}

.right-step {
    list-style: none;
}

.download-icon {
    background: var(--secondary-color);
    color: var(--tertiary-text-color);
    border: 0;
}

.download-icon.active {
    background: var(--primary-color);
    color: var(--tertiary-text-color);
    border: 0;
}

.download-divider {
    background-color: transparent;
    width: 10px;
    height: auto;
}

.download-nav-link {
    background: var(--secondary-color);
    padding: 30px 0;
    border-radius: 10px 10px 0 0;
}

.games-download {
    position: relative;
    transform: translateY(0%);
    width: 100%;
    text-align: left;
    display: none;
}

.games-download.active {
    display: flex;
}

.games-download img {
    width: 50%;
    margin: auto;
}

.right-text {
    background: var(--secondary-color);
    padding: 30px;
    border-radius: 0 0 10px 10px;
    color: var(--tertiary-text-color);
    border-top: 1px solid var(--primary-color);
}

.right-text h4 {
    margin-top: 0;
}

#theme-contain-downloadapp a {
    color: #ffa300;
}

#theme-contain-downloadapp a:hover {
    color: #ff4343;
}

.download-bottom-title {
    text-align: center;
    margin-top: 60px;
}

.download-bottom-title p {
    font-size: medium;
}

.download-bottom-term {
    padding: 20px;
    background: linear-gradient(45deg, var(--secondary-color), #4a4e57);
    border-radius: 10px;
    width: 60%;
    margin: 0 auto 30px auto;
    color: var(--tertiary-text-color);
}

.download-bottom-term h4 {
    text-align: center;
}

.download-bottom-term li {
    margin: 3px 0;
}

.download-bottom-term table {
    background-color: var(--primary-color);
    width: 100%;
    color: var(--black-color);
}

.download-bottom-term td,
.download-bottom-term table th {
    border: 1px solid var(--tertiary-color);
    padding: 5px 0px 5px 5px;
}

/*=================================== HELP ===================================*/
#theme-contain-help-center {
    background: #f1f1f1;
}

.filtering {
    margin: 15px 0 30px 0;
}

.filtering .filters {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.help-center {
    margin: 0 0 60px 0;
    background: var(--tertiary-color);
    padding: 30px;
    border-radius: 8px;
}

.help-info .panel.panel-default {
    width: 100%;
    background-color: #f1f1f1 !important;
    height: auto;
    max-height: fit-content;
    margin-bottom: 10px;
    border: 0;
    border-radius: 10px;
}

.help-info .panel-default>.panel-heading {
    background: transparent !important;
    border: 0;
}

.help-info .panel-title1 {
    color: #767676;
    text-align: left;
}

.help-info .panel-title1:hover {
    color: var(--primary-text-color);
}

.help-info .panel-body a {
    color: #11a6d6;
}

.help-info::after {
    margin-bottom: 60px;
}

.filterDiv {
    float: left;
    color: var(--black-color) !important;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 2px;
    display: none;
}

.show {
    display: block;
}

.btn2 {
    border: none;
    outline: none;
    border-radius: 20px;
    padding: 10px 30px;
    background-color: #f1f1f1;
    cursor: pointer;
}

.btn2:hover {
    background-color: #ddd;
}

.btn2.active {
    background-color: var(--primary-text-color);
    color: white;
    border-radius: 20px;
    padding: 10px 30px;
}

/*=================================== PRODUCT ===================================*/
.intro {
    margin: 25px 0;
    text-align: justify;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.intro button#customform_submit {
    width: 48.5%;
    padding: 10px;
    background: linear-gradient(0deg, #26292e, #d6a779);
    color: var(--tertiary-text-color);
    border: 0;
    border-radius: 20px;
    font-size: 15px;
}

.intro .modal-content {
    background: var(--tertiary-color);
}

.modal-header {
    border-bottom: unset;
}

p.r {
    margin: 15px 0 10px;
}

p.r span {
    color: red;
    font-weight: 600;
}

p.t {
    font-size: 20px;
    color: var(--primary-text-color);
    font-weight: 600;
    text-transform: uppercase;
}

.intro .modal-header .close {}

.intro .modal-body {
    padding: 30px;
}

.intro h4 {
    color: #131417;
}

.intro p {
    color: #4e4e4e;
}

.intro .b {
    color: var(--black-color);
}

.intro .b span {
    color: #d7bb4b;
    font-weight: 600;
    font-size: 15px;
}

.intro ol.o {
    list-style-type: upper-alpha;
    margin-top: 10px;
}

.intro ol.o li {
    margin: 0 0 30px;
    color: #131417;
}

.intro ol.o li img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 rgb(65 70 92 / 30%);
}

.back-btn {
    padding: 11px 17px;
    text-align: center;
    background: linear-gradient(to bottom, #0a69d7 0%, #004ea9 100%);
    background-size: 100%;
    width: 126px;
    height: 38px;
    border: 0px;
    color: var(--tertiary-text-color);
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px #5379b3;
}

/*=================================== PRODUCT SEARCH BAR===================================*/
div#search-bar {
    border: 1px solid #4c4c4c52;
    padding: 16px;
    border-radius: 6px;
    background: white;
    filter: drop-shadow(0px 2px 3px grey);
    max-width: 1250px;
    margin: 25px auto 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 24px;
    font-size: 24px;
    line-height: inherit;
    color: #0a69d7;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}

#keyword {
    display: none;
    width: 40%;
}

#keyword input.alphanumeric {
    color: black;
    border-radius: 4px;
    padding: 0 3px;
    height: 38px;
    font-size: 15px;
    width: 79%;
    border: 1px solid #1e3365;
    display: inline-block;
}

div#price-range {
    display: inline-block;
    width: 60%;
}

div#price-range input#stock {
    margin-left: 12px;
}

div#price-range input#price-min {
    border-radius: 3px;
    display: inline-block;
    width: 23%;
    padding: 0px 4px;
    height: 38px;
    border: 1px solid #0a69d7;
}

input#price-max {
    display: inline-block;
    border-radius: 3px;
    width: 23%;
    padding: 0 4px;
    height: 38px;
    border: 1px solid #0a69d7;
}

#search-form input#submit-btn {
    background: linear-gradient(to bottom, #03a1ed 0%, #004ea9 100%);
    color: white;
    padding: 15px 1px;
    border: 0px #075fc6 solid;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 0 1px var(--black-color);
    width: 14%;
    position: absolute;
    bottom: 24px;
    right: 0;
    left: unset;
    margin: 0 15px 0 0;
}

a#clear-btn {
    display: none;
    color: red;
    border-radius: 5px;
    padding: 5px 10px;
    border: unset;
    font-size: 12px;
    background: #4c4c4c45;
}

div#sort {
    float: right;
    position: absolute;
    top: 48%;
    right: 39%;
}

select#sortlist {
    border-radius: 4px;
    height: 38px;
    border: 1px solid #0a69d7;
}

/*=================================== PRODUCT IMAGE===================================*/
#cms5-prod-list {
    width: 92%;
    max-width: 1250px;
    margin: 25px auto 0;
    text-align: center;
    padding-bottom: 20px;
}

#cms5-prod-list ul {
    background: var(--tertiary-color);
    border-radius: 20px;
    margin: 10px;
    padding: 32px 11px;
    display: inline-block;
    transition: 0.3s;
    height: 280px;
    border: 0px solid #424242;
    width: 226px;
    vertical-align: top;
    position: relative;
}

#cms5-prod-list ul:hover {
    box-shadow: 2px 4px 10px #d4d4d4;
}

#cms5-prod-list ul li {
    list-style: none;
}

#cms5-prod-list .caption,
#cms5-prod-list #desc,
#cms5-prod-list #details,
#cms5-prod-list #enquiry,
#cms5-prod-list #code {
    display: none;
}

#cms5-prod-list ul #title a,
#cms5-prod-list ul #title a:visited {
    color: #444;
    font-size: 14px;
}

#cms5-prod-list ul #title a:hover {
    color: #335587;
}

#cms5-prod-list ul #price {
    color: #a10000;
    font-weight: 600;
    font-size: 15px;
}

#cms5-prod-list #addcart a {
    margin: auto;
}

#cms5-prod-list ul #addcart a {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    padding: 8px 10px;
    text-align: center;
    background: linear-gradient(to bottom, #0a69d7 0%, #004ea9 100%);
    background-size: 100%;
    width: 150px;
    height: 40px;
    border: 0px;
    color: var(--tertiary-text-color);
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px #5379b3;
}

#cms5-prod-list ul #addcart a:hover {
    background: linear-gradient(to top, #004ea9 0%, #0a69d7 100%);
    box-shadow: 0px 0px 0px 0px #5379b3;
    border: 2px solid #1476e8;
}

#cms5-faq-list ol {
    list-style: none;
}

#cms5-faq-list ol#faq {
    display: inline-flex;
    width: 100%;
    flex-direction: column;
    padding: 0;
}

#cms5-faq-list ol#faq li#faq {
    border-bottom: 0px dashed #444;
}

#cms5-faq-list ol#faq li#faq img {
    width: 100%;
}

#cms5-faq-list ol#faq li#faq .promotion-btn {
    display: flex;
}

/*=================================== PROUCT DETAIL PAGE ===================================*/
#cms5-prodcatlist {
    display: block;
}

div#cms5-prodcatlist ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

div#cms5-prodcatlist ul li {
    display: inline-block;
    margin: 5px 2px;
    width: 12.6%;
    background: #0a69d7;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
}

div#cms5-prodcatlist ul li a {
    text-transform: capitalize;
    color: var(--tertiary-text-color);
}

div#back-btn {
    position: relative;
    top: 31px;
    left: 20px;
}

div#back-btn a {
    border: 0px solid red;
    padding: 8px 15px;
    background: #0a69d7;
    margin-top: 33px;
    color: white;
}

div#back-btn a:hover {
    background: #cce1f4;
    color: #0a69d7;
}

#cms5-prod-view {
    padding: 20px;
}

#cms5-prod-view>table>tbody>tr {
    direction: rtl;
}

#cms5-prod-view>table>tbody>tr>td {
    width: 45%;
    direction: ltr;
    display: inline-block;
}

#cms5-prod-view table#particular {
    padding-top: 59px;
    margin: 70px auto;
}

#cms5-prod-view table#particular tr td#title {
    font-size: 30px !important;
    font-weight: 600 !important;
}

#cms5-prod-view table#particular tr td#code {
    font-size: 19px;
}

#cms5-prod-view table#particular tr td#price {
    color: #797979;
}

#cms5-prod-view table#particular tr td#addcart a {
    padding: 10px;
    text-align: center;
    background: linear-gradient(to bottom, #0a69d7 0%, #004ea9 100%);
    background-size: 100%;
    width: 126px;
    height: 45px;
    border: 0px;
    color: var(--tertiary-text-color);
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px #5379b3;
}

#cms5-prod-view table#particular tr td#addcart a:hover {
    background: linear-gradient(to top, #004ea9 0%, #0a69d7 100%);
    box-shadow: 0px 0px 0px 0px #5379b3;
    border: 2px solid #1476e8;
}

#cms5-prod-view #particular #caption {
    display: none;
}

#cms5-prod-view #particular #price {
    font-size: 20px !important;
}

#cms5-prod-view #particular #sharelink {
    padding: 0;
}

#cms5-prod-view #desc {
    border-top: 0px solid #d4d4d4;
    padding-top: 10px;
}

#cms5-prod-view #desc td#content {
    padding-top: 40px;
}

div#cms5-pagenum ul {
    padding: 0;
    margin: 0;
    text-align: center;
}

div#cms5-pagenum ul li {
    display: inline-block;
    width: 3%;
    vertical-align: top;
    color: #0a69d7;
    margin: 30px 10px;
    font-weight: bold;
}

div#cms5-pagenum a,
a:hover,
a:active,
a:focus {
    color: #7d7d7d;
    text-decoration: none;
}

.gcontent {
    color: #777;
    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: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}

/*=================================== PRODUCT ADD CART ===================================*/
#prod-cart {
    width: 90%;
    margin: 0px auto;
    padding: 36px 0;
}

#prod-cart .tbllist form table {
    border: 1px solid #cccccc;
}

#prod-cart .tbllist form table tr {
    border-bottom: 1px solid var(--black-color);
}

#prod-cart .tbllist form table tr:first-child {
    background: var(--tertiary-color);
}

#prod-cart .tbllist form table tr td {
    text-align: left;
}

#prod-cart .tbllist form table tr td,
#prod-cart .tbllist form table tr th {
    border-right: 0px solid !important;
    text-align: left;
    padding: 10px;
    background: #fbfbfb;
    font-weight: 600;
}

#prod-cart .tbllist form table tr td:last-child,
#prod-cart .tbllist form table tr th:last-child {
    border-right: 0;
}

#prod-cart .tbllist form table input[value="UPDATE"] {
    padding: 0 10px;
    background: transparent;
    text-decoration: underline;
    color: blue;
}

#prod-cart .tbllist form table input[value="EMPTY"] {
    background: transparent;
}

#prod-cart .tbllist form #continue-shopping a {
    padding: 10px;
    margin: 5px 0;
    text-align: center;
    background: #fbed86;
    display: inline-block;
    float: right;
    border-radius: 10px;
}

#prod-cart #remoteloginform dl,
#prod-cart #customform dl {
    display: block;
}

#prod-cart>p>a {
    color: var(--black-color)8ff;
}

#prod-cart input#form_recipientName,
input#form_Addr1,
input#form_Addr3 {
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    padding: 8px 6px;
    width: 92%;
}

#prod-cart input#form_State {
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    padding: 8px 6px;
    width: 37%;
}

#prod-cart input#form_PostCode {
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    padding: 8px 6px;
    width: 20%;
}

#prod-cart select#form_Country {
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    padding: 8px 6px;
    width: 19%;
}

#prod-cart input#form_contact {
    border: 1px solid #f1f1f1;
    border-radius: 7px;
    padding: 8px 6px;
    width: 26%;
}

.tbllist {
    padding: 0px;
    background: var(--tertiary-color);
}

.tbllist .tbl tfoot td {
    color: var(--black-color);
}

.tbllist .tbl td {
    border-top: 1px solid #5ae;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--black-color);
}

.tbllist .tbl td a,
.tbllist .tbl td a:visited {
    color: var(--black-color);
    text-decoration: none;
}

.tbllist.rounded.spacer tr td {
    border: 1px solid #cccccc;
    padding: 12px;
    text-align: center;
    background: #fbfbfb;
}

.tbllist.rounded.spacer tr th {
    background: #00c3b3 !important;
    color: #4c4c4c;
    width: 15%;
    text-align: center;
    padding: 7px 0;
}

.tbllist.rounded.spacer tr th {
    background: #0a69d7 !important;
    border: 1px solid #0063d4;
    text-align: left;
    padding: 10px;
    width: 14%;
    color: white;
    font-weight: 600;
}

.tbllist.rounded.spacer input[type="button"] {
    background: #0a69d7;
    color: white;
    border: 0px solid;
    border-radius: 4px;
    font-size: 12px;
    padding: 3px 12px;
}

div#continue-shopping {
    padding: 7px;
    background: linear-gradient(to left, #0a69d7 0%, #044590 100%);
    border-radius: 10px;
    border: 3px #517ab9 solid;
    color: var(--tertiary-text-color);
    box-shadow: inset 0 0 5px var(--black-color);
    width: 14%;
    text-align: center;
    margin-top: 7px;
}

div#continue-shopping:hover {
    background: linear-gradient(to right, #0a69d7 0%, #044590 100%);
}

div#continue-shopping a {
    color: white;
}

div#continue-shopping a:hover {
    color: var(--tertiary-text-color);
}

.alert-warning {
    background-color: #fdfdfd00 !important;
    margin-top: 12px;
    color: red;
}

.customform,
.loginform {
    border: 0px solid green;
    margin: 0;
    text-align: right;
}

#theme-contain-prod #customform .caption {
    display: none !important;
}

#theme-contain-prod #customform dl:nth-of-type(3) dd {
    display: inline-block;
    vertical-align: bottom;
    width: 49%;
}

#theme-contain-prod #customform dl:nth-of-type(3) dd img {
    width: 100px !important;
    margin-top: 10px;
}

#theme-contain-prod input#customform_submit {
    position: unset;
}

#theme-contain-prod #remoteloginform,
#theme-contain-prod #customform {
    width: 26%;
    margin: 25px auto 0;
    text-align: center;
    background: #d6d6d6;
    border-radius: 17px;
    padding: 40px 30px;
    border: 0px solid green;
}

#theme-contain-prod #remoteloginform input,
#theme-contain-prod #customform input {
    width: 100%;
    border-bottom: 2px solid #0a69d7 !important;
    border: 0px;
    border-radius: 0;
    background: transparent;
    color: #1b2e60;
    max-width: unset;
}

#theme-contain-prod #remoteloginform input#remoteloginformsubmit,
#theme-contain-prod #customform input#customform_submit {
    color: var(--tertiary-text-color);
    background: linear-gradient(to left, #0a68d3 0%, #05448d 100%);
    border-radius: 10px;
    border: 3px #517ab9 solid;
    padding: 8px;
    width: 46%;
}

#theme-contain-prod #remoteloginform input#remoteloginformsubmit,
#theme-contain-prod #customform input#customform_submit:hover {
    background: linear-gradient(to right, #0a68d3 0%, #05448d 100%);
    border-radius: 10px;
    border: 3px #517ab9 solid;
    color: #d5e7ff;
}

#icon-delete {
    list-style: none;
}

#icon-delete a {
    color: #f00;
}

/*============================== OTHER OF PRODUCT ==============================*/
#theme-nav {
    display: none;
}

#theme-nav {
    text-align: center;
    background: white;
    margin-top: 15px;
}

#theme-nav ul {
    margin: 0;
    padding: 0;
}

#theme-nav ul li {
    display: inline-flex;
    flex-direction: column;
    margin: 0px 6px;
}

#theme-nav ul li a {
    color: var(--tertiary-text-color);
    background: #0a69d7;
    padding: 10px 50px;
    border-radius: 4px;
    cursor: pointer;
}

#theme-nav ul li:first-child a {
    position: relative;
    color: #0a69d7;
}

#theme-nav ul li:first-child a:after {
    content: "All Product";
    color: var(--tertiary-text-color);
    font-size: 12px;
    position: absolute;
    left: 0;
    right: 0;
}

fieldset {}

caption {
    text-align: center;
    font-size: 20px;
    color: var(--tertiary-text-color);
    font-weight: 600;
    background: #867560;
}

span#name {
    color: red;
}

span.effect-photogrp {
    position: relative;
}

img#piclayer {
    position: absolute;
    top: -70px;
    left: 0px;
}

.ctrllist.iconx32 ul {
    margin: 0;
}

input#submit-btn {
    border-radius: 5px;
    padding: 6px;
    color: #03927c;
    font-weight: 600;
    width: 10%;
}

#offer-strike {
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-decoration: line-through;
    color: #838383;
}

#enquiry,
#sharelink {
    display: none;
}

#submember-login table {
    width: fit-content;
    background: #efefef;
}

#submember-login table tr:last-child td:last-child>p:nth-child(1)>a {
    background: #d4d4d4;
    padding: 5px 20px;
    display: block;
    text-align: center;
}

#submember-login table tr:last-child td:last-child>p:nth-child(3)>a {
    text-decoration: underline;
    color: var(--black-color)8ff;
}

#submember-login table tr td {
    padding: 10px 20px;
}

#submember-login input[type="submit"] {
    background: #ffc903;
    padding: 5px 20px;
    display: block;
    width: 100%;
    text-align: center;
}

#search-form input#submit-btn:hover {
    color: #ffeb92;
    border-color: #ff000000;
}

#content p {
    margin: 3px 0;
    line-height: 30px;
    display: list-item;
}

#qty input[type="text"] {
    text-align: center;
}

#btn-submit button {
    background: -webkit-linear-gradient(right, #805836 0%, #d1a36d 100%);
    padding: 13px;
    width: 14%;
    color: white;
    margin-top: 13px;
    font-size: 16px;
    border: 5px #e1d0a8 solid;
    border-radius: 10px;
    box-shadow: inset 0 0 5px var(--black-color);
}

#btn-submit button:hover {
    background: #9a9a9a;
    color: white;
}

table#apimeminfo {
    background: #dcb686;
    padding: 12px 1px;
    border-radius: 7px;
    border-spacing: 2em;
    margin: 1rem auto;
}

table#apimeminfo b {
    padding: 2px 5px;
    border-radius: 6px;
    color: #4c4c4c;
    letter-spacing: 1px;
    font-size: 13px;
}

table#apimeminfo a {
    background: -webkit-linear-gradient(right, #480505 0%, #d60013 100%);
    color: white;
    padding: 7px 25px;
    border-radius: 11px;
    border: 3px #e1d0a8 solid;
}

table#apimeminfo a:hover {
    background: #736d6d;
}

a#clear-btn:hover {
    color: #d88383;
    background: -webkit-linear-gradient(right, #4c4c4c 0%, #4c4c4c 100%);
}

table#apimeminfo tr td {
    padding: 1rem 1.2rem;
    border-radius: 6px;
    border: 6px solid white;
}

/*=================================== MOBILE DROP MENU ===================================*/
.menu-dropdown {
    background: transparent;
    width: 60px;
    display: none;
    overflow: hidden;
}

.mobile-dropdown-content {
    display: none;
    position: absolute;
}

.mobile-dropdown-content a {
    float: none;
    color: black;
}

.mobile-dropdown-content a:hover {
    background-color: #ddd;
}

.mobile-down-list {
    margin: 0;
    list-style: none;
    padding: 0;
}

.mobile-down-list li {
    margin-bottom: 15px;
}

.menu-dropdown:hover .mobile-dropdown-content {
    display: block;
    background: var(--tertiary-color);
    height: auto;
    width: 150px;
    z-index: 5;
    padding: 5px 0 0 10px;
    border-radius: 10px;
    margin: 5px 0 0 0;
}

ol.f {
    list-style-type: decimal;
    padding: 0;
}

ol.f span {
    color: red;
    font-weight: 600;
}

.step ol li img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 rgb(65 70 92 / 30%);
}

.step ol li {
    display: inline-block;
    width: 48%;
    margin: 10px;
    vertical-align: top;
}

#search-bar {
    width: 90%;
    max-width: 1250px;
    margin: 25px auto 0;
}

.poster img {
    width: 100%;
}

/*=================================== MOBILE MENU ===================================*/
.mobile-menu-top {
    display: flex;
    align-items: center;
    height: 60px;
    background: var(--secondary-color);
}

.mobile-menu-90 {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#mySidenav .logo img {
    width: 90%;
}

#mySidenav li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#mySidenav li button {
    width: 100%;
    height: auto;
    margin: 5px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid #c0a26e90;
    padding: 10px 5px;
}

#mySidenav li img {
    width: 40%;
    margin: 10px;
}

.mobile-90-2 li span {
    font-size: 16px;
}

.mobile-menu-90 li a,
.mobile-menu-90 li a span {
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: var(--tertiary-text-color);
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    background: linear-gradient(to bottom, #98825b, var(--secondary-color));
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30px;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: relative;
    top: 0;
    font-size: 40px;
    margin: 0 30px 0 0;
    color: var(--tertiary-text-color);
}

.mobile-sidebar span {
    font-size: 30px;
    cursor: pointer;
    color: var(--tertiary-text-color);
}

.menu-top-header .mobile-logo img {}

.mobile-download {
    display: flex;
    justify-content: flex-end;
    font-size: x-large;
}

.mobile-download a {
    color: var(--tertiary-text-color);
}

.divider {
    border-bottom: 1px solid var(--secondary-color)
    margin: 20px 0 !important;
}

.sub-m {
    margin-left: 10px;
    margin-bottom: 20px !important;
}

.sub-m a {
    margin: 0 0 0 20px;
    color: var(--tertiary-text-color);
}

.mobile-currency {
    width: 100%;
}

.mobile-currency-icon img {
    width: 30px;
}

.mobile-currency-detail {
    color: var(--tertiary-text-color);
    margin-left: 20px;
}

.mobile-currency-detail p {
    margin: 0;
}

.mobile-90-2 {
    background: url(/data/2066/uploads/side-img.png) no-repeat;
    background-size: 60%;
    background-position: top right;
    margin: 0 10px 0 0;
    padding: 0;
}

.mobile-menu-90 li {
    width: 30%;
}

/*=======================================================================================================*/
/*-----------------------------------------------------------------------------   MOBILE VIEW -----------------------------------------------------------------------------*/
/*=======================================================================================================*/
@media all and (max-width: 932px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #theme-menu {
        display: none;
    }

    #theme-header-logo {
        display: none;
    }

    .menu-top-header {
        display: block;
    }

    .container {
        width: 100%;
    }

    .menu-downloadapp {
        display: none;
    }

    ul.cmsmenu {
        display: none;
    }

    .menu-logo {
        display: none;
    }

    .mobile-logo {
        text-align: center;
    }

    .language.dropdown {
        margin-left: 0;
        font-size: 18px;
    }

    .dropdown:hover .dropdown-content {
        padding: 10px;
    }

    .country-name {
        font-size: 16px;
    }

    .country-languages {
        font-size: 20px;
    }

    .country-flag-container {
        margin-bottom: 15px;
    }

    .menu-top-header .mobile-logo img {
        width: 100%;
    }

    .header-link {
        width: 100%;
    }

    .clock {
        display: none;
    }

    .btn-login .btn,
    .btn-sign-up .btn {
        font-size: 16px;
    }

    #mySidenav li {
        font-weight: 600;
        text-transform: uppercase;
    }

    #mySidenav .logo img {
        width: 70%;
        margin: 15px;
    }

    /*------------------------------------------------------ FOOTER ------------------------------------------------------*/
    .pay ul li {
        padding: 0;
    }

    .social {
        width: 100%;
    }

    .social ul li {
        width: 20%;
        filter: grayscale(0);
    }

    /*------------------------------------------------------ HOME PAGE ------------------------------------------------------*/
    #mainslider {
        width: 100%;
    }

    .side-banner {
        display: none;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    .announcetext {
        font-size: x-large;
    }

    .item-title {
        text-align: left;
        font-size: 30px;
        margin: 0 0 15px 0;
    }

    .empty {
        width: 100%;
        margin: 50px 0 0 0;
    }

    .live-feed-secondary-part-holder {
        height: auto;
    }

    .live-feed-secondary-part-holder>table>tbody>tr>td:first-of-type {
        padding: 5px 0;
    }

    .hpromo-wrapper ol#faq_modal li.question {
        width: 70% !important;
    }

    div#faq_fbwrap {
        width: 90% !important;
    }

    /*------------------------------------------------------ SPORT/ CASINO/ SLOT/ POKER  ------------------------------------------------------*/
    .gf-wrapper {
        grid-template-columns: repeat(2, 50%);
        grid-gap: 8px 8px;
    }

    .swiper-slide {
        width: 100%;
    }

    .logo-box {
        width: 100%;
        margin: 0;
    }

    .api-leaguefeed-free-wall .brick {
        min-width: 44% !important;
    }

    .sport-pc {
        display: block;
    }

    .sport-mobile {
        display: block;
    }

    .games-item {
        flex: 0 0 29%;
    }

    #id-firsty .games-item,
    #id-firsty2 .games-item,
    #id-firsty8 .games-item,
    #id-firsty9 .games-item,
    #id-firsty11 .games-item,
    #id-firsty12 .games-item,
    #id-firsty13 .games-item {
        flex: 0 0 29%;
    }

    #id-firsty3 .games-item,
    #id-firsty4 .games-item,
    #id-firsty5 .games-item,
    #id-firsty6 .games-item,
    #id-firsty7 .games-item,
    #id-firsty10 .games-item,
    #id-firsty14 .games-item,
    #id-firsty15 .games-item,
    #id-firsty16 .games-item,
    #id-firsty17 .games-item,
    #id-firsty18 .games-item {
        flex: 0 0 46%;
    }

    .play-btn {
        position: relative;
        float: none;
        font-size: 20px;
    }

    .cockfight-info,
    .cockfight,
    .racing-btn,
    .racing-info,
    .lotto-info {
        text-align: center;
    }

    /*------------------------------------------------------ PROMOTION ------------------------------------------------------*/
    .info {
        padding: 10px 15px 0;
    }

    .promo-count {
        padding: 10px 0 0;
        justify-content: flex-start;
    }

    .fancybox-inner .promo .promo-row img {
        left: 0%;
        width: 100%;
    }

    .fancybox-inner table {
        font-size: small;
    }

    /*------------------------------------------------------ VIP  ------------------------------------------------------*/
    .vip-table-content h4,
    .vip-table-content h5 {
        margin-left: 0px;
    }

    .vip-banner-title {
        display: none;
    }

    .vip-table-content {
        width: 100%;
        margin-top: -50px;
        font-size: 10px;
    }

    .vip-table {
        width: 100%;
    }

    #vip-table td,
    #vip-table th {
        padding: 0;
        border-bottom: 1px solid #4f4540;
    }

    .vip1,
    .vip2 {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .vip1 {
        height: 620px;
    }

    .vip2 {
        height: 500px;
    }

    /*------------------------------------------------------ DOWNLOAD APP /BANKING ------------------------------------------------------*/
    .download-bottom-term {
        width: 90%;
    }

    .download-bottom-term td,
    .download-bottom-term table th {
        font-size: x-small;
    }

    .download-bottom-term ol {
        padding: 0 0 0 15px;
    }

    .bank-table table {
        font-size: 10px;
    }

    .c-inner {
        width: 85%;
    }

    /*------------------------------------------------------ PRODUCT------------------------------------------------------*/
    #cms5-prod-view>table>tbody>tr>td {
        width: 100%;
    }

    #cms5-prod-view table#particular {
        padding-top: 0px;
        margin: 15px auto;
    }

    #cms5-prod-view .gcontent {
        width: 100% !important;
    }

    #cms5-prod-view div#photo {
        float: left;
        padding: 0;
    }

    #cms5-prod-list ul {
        width: 38%;
        padding: 10px 0;
    }

    #prod-cart {
        margin: 0px auto !important;
    }

    /*------------------------------------------------------ LOGIN / REGISTER ------------------------------------------------------*/
    .modal {
        padding: 0;
    }

    .modal-dialog {
        width: 90% !important;
        margin: 20% auto !important;
    }

    .login #customform {
        width: 75%;
        padding: 10px 0;
    }

    .login-btm {
        text-align: center;
        padding: 0 30px;
    }

    .register {
        width: 100%;
    }

    .regis-box {
        width: 100%;
    }

    .regis-dtl {
        padding: 10px;
    }
}

/*=====================================================================================================*/
/*-------------------------------------------------------------------  MOBILE VIEW PORTRAIR -------------------------------------------------------------------*/
/*=====================================================================================================*/
@media only screen and (min-device-width: 250px) and (max-device-width: 660px) and (orientation: portrait) {
    #mySidenav li {
        font-size: 14px;
    }

    .jackpot-sec #subcontent #jackpot {
        top: 50%;
        font-size: 20px;
        left: 29%;
    }

    .swiper-slide.gameLobby-slide {
        width: 55% !important;
    }

    .hot-provider,
    .new-provider {
        margin: -8% 0 0 35%;
    }

    .downloadapp {
        flex-direction: column;
    }

    .left-text {
        margin-top: 30px;
    }

    .regis-dtl {
        display: none;
    }
}

/*=====================================================================================================*/
/*---------------------------------------------------------------- MOBILE VIEW LANDSCAPE ----------------------------------------------------------------*/
/*=====================================================================================================*/
@media only screen and (min-device-width: 375px) and (max-device-width: 932px) and (orientation: landscape) {
    .menu-top-header .mobile-logo img {
        width: 70%;
    }

    #mySidenav li {
        font-size: 20px;
    }

    .mobile-menu-90 li {
        width: 18%;
    }

    .pay ul li {
        width: 13%;
    }

    .social {
        width: 50%;
    }

    .responsible li img {
        width: 60%;
    }

    .live-feed-primary-part-holder {
        height: 180px;
    }

    .live-feed-primary-part-holder #subcontent #jackpot {
        top: 30%;
        font-size: 48px;
    }

    .live-feed-secondary-part-holder h4 {
        font-size: 30px;
    }

    .live-feed-secondary-part-holder>table>thead>tr>th {
        font-size: 20px;
    }

    .live-feed-secondary-part-holder>table>tbody>tr {
        font-size: 20px;
    }

    .hpromo-wrapper ol#faq_modal li.question {
        width: 50% !important;
    }

    .swiper-slide.gameLobby-slide {
        width: 30% !important;
    }

    .api-leaguefeed-free-wall .brick {
        min-width: 22% !important;
    }

    .hot-provider,
    .new-provider {
        margin: -4% 0 0 18%;
    }

    .gf-wrapper {
        grid-template-columns: repeat(4, 25%);
    }

    .jackpot-sec #subcontent #jackpot {
        top: 55%;
        font-size: 36px;
        left: 30%;
    }

    #vip-table td,
    #vip-table th {
        font-size: 18px;
    }

    .vip-banner-title {
        display: block;
    }

    .vip1 {
        height: 480px;
    }

    .vip2 {
        height: 390px;
    }

    #cms5-prod-list ul {
        width: 28%;
    }

    .contact-line {
        display: flex;
    }

    .download-left {
        display: none;
    }

    .download-bottom-term ol li {
        font-size: 16px;
    }

    .download-bottom-term td,
    .download-bottom-term table th {
        font-size: 16px;
    }

    .regis-dtl {
        display: none;
    }
}

/*=====================================================================================================*/
/*---------------------------------------------------------------------   IPAD PORTRAIT ---------------------------------------------------------------------*/
/*=====================================================================================================*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .language.dropdown {
        font-size: 24px;
    }

    .menu-top-header .mobile-logo img {
        width: 80%;
    }

    .pay ul li {
        width: 13%;
    }

    .license ul li {
        width: 13%;
    }

    .social {
        width: 50%;
    }

    .social ul li {
        width: 20%;
    }

    .responsible li img {
        width: 60%;
    }

    .language {
        font-size: 24px;
    }

    .language .dropbtn .glyphicon {
        font-size: 12px;
    }

    .live-feed-primary-part-holder {
        min-height: 140px;
    }

    .live-feed-primary-part-holder #subcontent #jackpot {
        font-size: 48px;
    }

    .live-feed-secondary-part-holder h4 {
        font-size: 30px;
    }

    .live-feed-secondary-part-holder>table>thead>tr>th {
        font-size: 20px;
    }

    .live-feed-secondary-part-holder>table>tbody>tr {
        font-size: 20px;
    }

    .jackpot-sec #subcontent #jackpot {
        font-size: 36px;
        left: 30%;
        top: 52%;
    }

    #mySidenav li {
        margin: 10px;
        font-size: 20px;
    }

    .mobile-menu-90 li {
        width: 26%;
    }

    .mobile-90-2 {
        background-size: contain;
    }

    .mobile-90-2 li span {
        font-size: 24px;
    }

    .mobile-menu-90 li a,
    .mobile-menu-90 li a span {
        font-size: 18px;
    }

    .dropdown .dropbtn {
        width: 100%;
    }

    .swiper-slide.gameLobby-slide {
        width: 55% !important;
    }

    .api-leaguefeed-free-wall .brick {
        min-width: 28% !important;
    }

    .gf-wrapper {
        grid-template-columns: repeat(4, 24%);
    }

    .hot-provider,
    .new-provider {
        margin: -5% 0 0 18%;
    }

    #cms5-prod-list ul {
        width: 22%;
    }

    #vip-table td,
    #vip-table th {
        font-size: 14px;
    }

    .vip-banner-title {
        display: block;
        top: 18%;
    }

    .vip-body1 h5,
    .vip-body2 h5 {
        font-size: 20px;
    }

    .vip-body1 li,
    .vip-body2 li {
        font-size: 18px;
    }

    .vip1 {
        height: 600px;
    }

    .vip2 {
        height: 480px;
    }

    .downloadapp {
        display: flex;
        flex-direction: column;
    }

    .left-text {
        margin-top: 30px;
    }

    .modal-dialog {
        width: 60%;
        margin: 5% auto;
    }

    .regis-box {
        width: 48%;
    }

    .regis-dtl {
        width: 48%;
    }
}

/*=====================================================================================================*/
/*---------------------------------------------------------------------    IPAD LANDSCAPE --------------------------------------------------------------------*/
/*=====================================================================================================*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .mobile-menu-90 li {
        width: 18%;
    }

    .language.dropdown {
        font-size: 24px;
    }

    .menu-top-header .mobile-logo img {
        width: 70%;
    }

    .empty {
        margin: 0;
    }

    .hpromo-wrapper ol#faq_modal li.question {
        width: 40% !important;
    }

    .dropdown .dropbtn {
        width: 100%;
    }

    .mobile-menu-90 li a,
    .mobile-menu-90 li a span {
        font-size: 18px;
    }

    .mobile-90-2 li span {
        font-size: 20px;
    }

    .pay ul li {
        width: 38%;
        margin: 10px 5px;
    }

    .license ul li {
        margin: 10px;
    }

    .social ul li {
        width: 100%;
        padding: 0 5px 0 0;
    }

    .live-feed-primary-part-holder #subcontent #jackpot {
        top: 35%;
        font-size: 20px;
    }

    .live-feed-primary-part-holder {
        background-size: 100%;
        height: 65px;
    }

    .live-feed-secondary-part-holder>table>thead>tr>th {
        font-size: 11px;
        padding: 0 5px 0 0;
    }

    .live-feed-secondary-part-holder>table>tbody>tr>td:first-of-type,
    .live-feed-secondary-part-holder>table>tbody>tr>td:nth-of-type(2),
    .live-feed-secondary-part-holder>table>tbody>tr>td:nth-of-type(3) {
        font-size: 10px;
        padding: 5px 0;
    }

    .live-feed-secondary-part-holder>table>tbody,
    .live-feed-secondary-part-holder>table>tbody>tr {
        line-height: 1.8rem;
    }

    .vid-wrapper {
        height: 340px;
    }

    .side-banner {
        display: block;
    }

    .gf-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }

    .jackpot-sec #subcontent #jackpot {
        font-size: 40px;
        left: 32%;
        top: 55%;
    }

    .cockfight-info,
    .cockfight,
    .racing-btn,
    .racing-info,
    .lotto-info {
        text-align: left;
    }

    .new-provider,
    .hot-provider {
        margin: -3% 0 0 14%;
    }

    .tab .promo-tablinks {
        font-size: 20px;
    }

    .fancybox-inner .promo .promo-row img {
        width: auto;
    }

    #vip-table td,
    #vip-table th {
        font-size: 16px;
    }

    .vip-table-content {
        font-size: 16px;
    }

    .vip-banner-title {
        display: block;
    }

    .vip-body1 h5,
    .vip-body2 h5 {
        font-size: 16px;
    }

    .vip-body1 li,
    .vip-body2 li {
        font-size: 15px;
    }

    .vip1,
    .vip2 {
        width: 49% !important;
        height: 600px;
    }

    #cms5-prod-list ul {
        width: 22%;
    }

    .modal-dialog {
        width: 60%;
        margin: 10% auto;
    }

    .regis-banner img {
        width: 100%;
    }

    .regis-dtl {
        width: 48%;
    }

    .regis-box {
        width: 48%;
    }
}

/*=====================================================================================================*/
/*------------------------------------------------------------------------- BIG SCREEN -------------------------------------------------------------------------*/
/*=====================================================================================================*/
@media screen and (max-width: 2305px) and (min-width: 1280px) {
    .menu-logo img {
        width: 70%;
    }

    .hot-provider,
    .new-provider {
        margin: -2% 0 0 8%;
    }
}

.process .process-step-circle {
    border-color: var(--primary-color) !important;
}