body {
    background-position: center;
    background-size: auto;
    background-attachment: scroll;
    margin: 0;
    line-height: normal;
    font-family: "Open Sans", sans-serif, "Microsoft JhengHei";
    font-family: "Poppins-Regular", "Microsoft JhengHei";
    color: #000;
    font-size: 16px;
    font-size: 14px;
    background: #efefef;
}
center { display: none; }

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

.underline {
    text-decoration: underline;
}

img {
    vertical-align: middle;
}

table {
    width: 100%;
}

button {
    outline: 0;
    border: 0;
}

input {
    outline: 0;
    border: 0;
}

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

.wrapper {
    margin: 0 auto;
}

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

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

li {
    list-style-type: disc;
}

ul.step1 {
    margin-left: 56px;
}

ul.step1 > li:nth-child(1)::marker {
    content: "1.1 ";
}

ul.step1 > li:nth-child(2)::marker {
    content: "1.2 ";
}

ul.step1 > li:nth-child(3)::marker {
    content: "1.3 ";
}

ul.step1 > li:nth-child(4)::marker {
    content: "1.4 ";
}

ul.step1 > li:nth-child(5)::marker {
    content: "1.5 ";
}

ul.step1 > li {
    margin-bottom: 8px;
}

ul.step2 {
    margin-left: 56px;
}

ul.step2 > li:nth-child(1)::marker {
    content: "a. ";
}

ul.step2 > li:nth-child(2)::marker {
    content: "b. ";
}

ul.step2 > li:nth-child(3)::marker {
    content: "c. ";
}

ul.step2 > li:nth-child(4)::marker {
    content: "d. ";
}

ul.step2 > li:nth-child(5)::marker {
    content: "e. ";
}

ul.step2 > li {
    margin-bottom: 8px;
}

ul.step3 {
    margin-left: 56px;
}

ul.step3 > li:nth-child(1)::marker {
    content: "2.1 ";
}

ul.step3 > li:nth-child(2)::marker {
    content: "2.2 ";
}

ul.step3 > li:nth-child(3)::marker {
    content: "2.3 ";
}

ul.step3 > li:nth-child(4)::marker {
    content: "2.4 ";
}

ul.step3 > li:nth-child(5)::marker {
    content: "2.5 ";
}

ul.step3 > li {
    margin-bottom: 8px;
}

ul.step4 {
    margin-left: 56px;
}

ul.step4 > li:nth-child(1)::marker {
    content: "3.1 ";
}

ul.step4 > li:nth-child(2)::marker {
    content: "3.2 ";
}

ul.step4 > li:nth-child(3)::marker {
    content: "3.3 ";
}

ul.step4 > li:nth-child(4)::marker {
    content: "3.4 ";
}

ul.step4 > li:nth-child(5)::marker {
    content: "3.5 ";
}

ul.step4 > li {
    margin-bottom: 8px;
}

ul.step5 {
    margin-left: 56px;
}

ul.step5 > li:nth-child(1)::marker {
    content: "4.1 ";
}

ul.step5 > li:nth-child(2)::marker {
    content: "4.2 ";
}

ul.step5 > li:nth-child(3)::marker {
    content: "4.3 ";
}

ul.step5 > li:nth-child(4)::marker {
    content: "4.4 ";
}

ul.step5 > li:nth-child(5)::marker {
    content: "4.5 ";
}

ul.step5 > li {
    margin-bottom: 8px;
}

ul.step6 {
    margin-left: 56px;
}

ul.step6 > li:nth-child(1)::marker {
    content: "5.1 ";
}

ul.step6 > li:nth-child(2)::marker {
    content: "5.2 ";
}

ul.step6 > li:nth-child(3)::marker {
    content: "5.3 ";
}

ul.step6 > li:nth-child(4)::marker {
    content: "5.4 ";
}

ul.step6 > li:nth-child(5)::marker {
    content: "5.5 ";
}

ul.step6 > li:nth-child(6)::marker {
    content: "5.6 ";
}

ul.step6 > li:nth-child(7)::marker {
    content: "5.7 ";
}

ul.step6 > li:nth-child(8)::marker {
    content: "5.8 ";
}

ul.step6 > li:nth-child(9)::marker {
    content: "5.9 ";
}

ul.step6 > li:nth-child(10)::marker {
    content: "5.10 ";
}

ul.step6 > li:nth-child(11)::marker {
    content: "5.11 ";
}

ul.step6 > li:nth-child(12)::marker {
    content: "5.12 ";
}

ul.step6 > li:nth-child(13)::marker {
    content: "5.13 ";
}

ul.step6 > li:nth-child(14)::marker {
    content: "5.14 ";
}

ul.step6 > li:nth-child(15)::marker {
    content: "5.15 ";
}

ul.step6 > li:nth-child(16)::marker {
    content: "5.16 ";
}

ul.step6 > li:nth-child(17)::marker {
    content: "5.17 ";
}

ul.step6 > li:nth-child(18)::marker {
    content: "5.18 ";
}

ul.step6 > li:nth-child(19)::marker {
    content: "5.19 ";
}

ul.step6 > li:nth-child(20)::marker {
    content: "5.20 ";
}

ul.step6 > li {
    margin-bottom: 8px;
}

ul.step7 {
    margin-left: 56px;
}

ul.step7 > li:nth-child(1)::marker {
    content: "6.1 ";
}

ul.step7 > li:nth-child(2)::marker {
    content: "6.2 ";
}

ul.step7 > li:nth-child(3)::marker {
    content: "6.3 ";
}

ul.step7 > li:nth-child(4)::marker {
    content: "6.4 ";
}

ul.step7 > li:nth-child(5)::marker {
    content: "6.5 ";
}

ul.step7 > li:nth-child(6)::marker {
    content: "6.6 ";
}

ul.step7 > li:nth-child(7)::marker {
    content: "6.7 ";
}

ul.step7 > li {
    margin-bottom: 8px;
}

ul.step8 {
    margin-left: 56px;
}

ul.step8 > li:nth-child(1)::marker {
    content: "7.1 ";
}

ul.step8 > li:nth-child(2)::marker {
    content: "7.2 ";
}

ul.step8 > li:nth-child(3)::marker {
    content: "7.3 ";
}

ul.step8 > li:nth-child(4)::marker {
    content: "6.4 ";
}

ul.step8 > li:nth-child(5)::marker {
    content: "7.5 ";
}

ul.step8 > li:nth-child(6)::marker {
    content: "7.6 ";
}

ul.step8 > li:nth-child(7)::marker {
    content: "7.7 ";
}

ul.step8 > li:nth-child(8)::marker {
    content: "7.8 ";
}

ul.step8 > li:nth-child(9)::marker {
    content: "7.9 ";
}

ul.step8 > li:nth-child(10)::marker {
    content: "7.10 ";
}

ul.step8 > li:nth-child(11)::marker {
    content: "7.11 ";
}

ul.step8 > li:nth-child(12)::marker {
    content: "7.12 ";
}

ul.step8 > li:nth-child(13)::marker {
    content: "7.13 ";
}

ul.step8 > li {
    margin-bottom: 8px;
}

#provider-box > p {
    margin-left: 32px;
}

.headerMenu {
    box-shadow: 0px 0px 10px #403c39;
}

.txtcolor1 {
    color: #ffbd42;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.txtcolor2 {
    color: red;
}

.icnSocial1 {
    border-radius: 40px;
    width: 35px;
    height: 35px;
}

.center {
    text-align: center;
}

@media screen and (max-width: 767px) {
    iframe {
        height: 70vh;
    }
}

@media screen and (min-height: 767px) {
    #divBody {
        min-height: 500px;
    }
}
/***************************************************************************** style */
.w1440 {
    max-width: 1440px;
    margin: auto;
    width: 100%;
}

a {
    color: #000;
    cursor: pointer;
}

a:hover {
    color: #ffbd42;
}

b,
strong {
    color: #000;
}

h1 {
    color: #000;
    font-weight: bold;
}

h3 {
    color: #000;
    font-weight: bold;
}

h3.info-text {
    margin-bottom: 50px;
    font-weight: bold;
    position: relative;
    text-align: center;
}

h3.info-text:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: 150px;
    height: 1px;
    border-top: 3px dotted #ccc;
}

h4 {
    color: #000;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 15px;
}

h5 {
    color: #eb2e42;
    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: #fff; */
}

.modal-backdrop.in {
    opacity: 0.8;
}

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

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

@media screen and (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: #000;
}

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

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

/*************************************************************** lottery **/
#drawresult ul {
    width: 100%;
    padding: 0;
    text-align: center;
}

#drawresult ul > li {
    border: 0px solid !important;
}

#drawresult ul > li table caption {
    border-radius: unset !important;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
}

#drawresult ul > li {
    width: 100% !important;
}

#drawresult ul > li#M table {
    border: 1px solid #f2bc00 !important;
}

#drawresult ul > li#M table caption {
    background-color: #f2bc00 !important;
    color: #000 !important;
    background-image: url("/data/2076/uploads/lotto-magnum.png");
}

#drawresult ul > li#P table {
    border: 1px solid #148ea4 !important;
}

#drawresult ul > li#P table caption {
    background-color: #148ea4 !important;
    background-image: url("/data/2076/uploads/lotto-pmp.png");
}

#drawresult ul > li#T table {
    border: 1px solid #dd0000 !important;
}

#drawresult ul > li#T table caption {
    background-color: #dd0000 !important;
    background-image: url("/data/2076/uploads/lotto-toto.png");
    color: #ffc7c7;
}

#drawresult ul > li#S table {
    border: 1px solid #12689a !important;
}

#drawresult ul > li#S table caption {
    background-color: #12689a !important;
    background-image: url("/data/2076/uploads/lotto-singapore.png");
    color: #8dd5ff;
}

#drawresult ul > li#B table {
    border: 1px solid #da002c !important;
}

#drawresult ul > li#B table caption {
    background-color: #da002c !important;
    background-image: url("/data/2076/uploads/lotto-sabah.png");
    color: #ffc7c7;
}

#drawresult ul > li#K table {
    border: 1px solid #4e9803 !important;
}

#drawresult ul > li#K table caption {
    background-color: #4e9803 !important;
    background-image: url("/data/2076/uploads/lotto-sandakan.png");
}

#drawresult ul > li#W table {
    border: 1px solid #094405 !important;
}

#drawresult ul > li#W table caption {
    background-color: #094405 !important;
    background-image: url("/data/2076/uploads/lotto-sarawak.png");
    color: #9bff94;
}

#drawresult ul > li#H table {
    border: 1px solid #95650a !important;
}

#drawresult ul > li#H table caption {
    background-color: #95650a !important;
    background-image: url("/data/2076/uploads/lotto-gd.png");
    color: #fff0d4;
}

#drawresult ul > li#N table {
    border: 1px solid #777 !important;
}

#drawresult ul > li#N table caption {
    background-color: #777 !important;
    background-image: url("/data/2076/uploads/lotto-perdana.png");
    color: #f9f9f9;
}

#drawresult ul > li#R table {
    border: 1px solid #00aced !important;
}

#drawresult ul > li#R table caption {
    background-color: #00aced !important;
    background-image: url("/data/2076/uploads/lotto-lucky.png");
}

#drawresult ul > li ol.p li {
    width: 31.3333% !important;
    display: block;
    float: left;
    background: rgba(0, 0, 0, 0.1);
    margin: 1%;
    border: rgba(0, 0, 0, 0.2) 1px solid;
}

#drawresult ul > li ol.c li {
    width: 31.3333% !important;
    display: block;
    float: left;
    background: rgba(0, 0, 0, 0.1);
    margin: 1%;
    border: rgba(0, 0, 0, 0.2) 1px solid;
}

#drawresult ul > li ol.abc li {
    width: 33.3333%;
    display: block;
    float: left;
}

#drawresult ul > li ol.abc li::before {
    content: "";
    font-size: 12px;
    font-weight: bold;
}

/*************************************************************** theme color setting **/
/**** black */

/**** red */
body.color-red .header-top {
    background: #7b0b07;
}

body.color-red .headertop-wrapper {
    border-color: #7b0b07;
}

body.color-red #header-login:hover {
    background: rgba(0, 0, 0, 0.3);
}

body.color-red .i-count:after {
    background: #ffbd42;
    color: #000;
}

body.color-red #togglesettings.open .settingboxwrapper {
    background-color: rgba(0, 0, 0, 0.2);
}

body.color-red #btn-settingsbox:hover {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

body.color-red #btn-settingsbox.btn-setting__open {
    background: rgba(0, 0, 0, 0.2);
}

body.color-red .modal-settings .modal-dialog .popup-wrapper {
    background: #550303;
}

body.color-red .btn-lr:hover,
body.color-red #header-register:hover {
    background: linear-gradient(to bottom, #550303, #410606);
}

body.color-red .dropdown.language > a:hover,
body.color-red .dropdown.language > a:active,
body.color-red .dropdown.language > a:focus {
    background: rgba(0, 0, 0, 0.3);
}

body.color-red #cssmenu > ul > li > a {
    color: #dbba9c;
    font-weight: bold;
}

body.color-red #cssmenu > ul > li > a > img {
    filter: none;
    opacity: 1;
}

body.color-red #cssmenu > ul > li.active > a {
    border-bottom-color: #dbba9c;
}

body.color-red #cssmenu > ul > li:hover > a {
    background: #390505;
}

body.color-red .divfooter {
    background: #550303;
}

body.color-red .footer-copyright {
    background: #430101;
}

body.color-red #divHome-announce {
    background: #550303;
}

body.color-red .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

@media screen and (min-width: 1024px) {
    body.color-red #cssmenu > ul > li > ul:before {
        background-color: rgba(38, 7, 7, 0.8);
    }

    body.color-red #divMenu {
        background: #550303;
    }
}

@media screen and (max-width: 1023px) {
    body.color-red #menuContainer #menuHead {
        background: #7b0707;
    }

    body.color-red #cssmenu > ul > li.active > a {
        background: #eee;
    }

    body.color-red #cssmenu > ul > li > a {
        color: #000;
    }
}

/**** grey */
body.color-grey {
    background: #fff;
}

body.color-grey .header-top {
    background: #eee;
}

body.color-grey .headertop-wrapper {
    border-color: #ccc;
}

body.color-grey .btn-menu span {
    /*background: #888;*/
}
/*body.color-grey img.logo { filter: grayscale(1) brightness(0.3); }*/
body.color-grey .header-icon {
    filter: brightness(0.3);
}

body.color-grey .currency {
    color: #222;
    border-right-color: #888;
}

body.color-grey .currency img {
    filter: grayscale(1) brightness(0.3);
}

body.color-grey #togglesettings img {
    filter: grayscale(1) brightness(0.6);
}

body.color-grey #togglesettings .btn-settings:hover img,
body.color-grey #togglesettings .btn-settings.active img,
body.color-grey #togglesettings #btn-settingsbox:hover img {
    filter: grayscale(0) brightness(0);
}

body.color-grey #togglesettings #btn-settingsbox.btn-setting__open img,
body.color-grey #togglesettings #btn-settingsbox.btn-setting__open:hover img {
    filter: grayscale(1) brightness(2);
}

body.color-grey .settingsList .dropdown-toggle {
    background: rgba(0, 0, 0, 0.1);
}

body.color-grey #togglesettings.open .settingboxwrapper {
    background-color: rgba(0, 0, 0, 0.1);
}

body.color-grey #btn-settingsbox:hover {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

body.color-grey #btn-settingsbox.btn-setting__open {
    background: rgba(0, 0, 0, 0.3);
}

body.color-grey .modal-settings .modal-dialog .popup-wrapper {
    background: #fff;
    color: #000;
}

body.color-grey .settings-head .close,
body.color-grey .modal-settings h4 {
    color: #000;
}

body.color-grey .settings-head {
    border-color: rgba(0, 0, 0, 0.5);
}

body.color-grey #header-login {
    color: #222;
}

body.color-grey #header-login:hover {
    background: rgba(0, 0, 0, 0.1);
}

body.color-grey .dropdown.language > a {
    color: #222;
}

body.color-grey .dropdown.language > a:hover,
body.color-grey .dropdown.language > a:active,
body.color-grey .dropdown.language > a:focus {
    background: rgba(0, 0, 0, 0.1);
}

body.color-grey #divHome-announce {
    background: #ccc;
    color: #000;
}

body.color-grey .divfooter {
    background: #eee;
}

body.color-grey .footer-copyright {
    background: #888;
}

body.color-grey .fcontent-title {
    color: #444;
}

body.color-grey .fcontent-mini {
    color: #444;
}

body.color-grey .fcontent-detail {
    color: #aaa;
}

body.color-grey .fcc-box {
    border-color: #444;
}
#divFooter center {  display: none;  }
body.color-grey #divFooter-info h3 {
    color: #444;
}

body.color-grey #divFooter-info {
    color: #888;
}

body.color-grey #divFooter-info a {
    color: #888;
}

body.color-grey .footer-contact img {
    filter: invert(0.5);
}

body.color-grey .count-jackpot {
    color: #fff;
}

body.color-grey .jackpotfoot {
    color: #ccc;
}

body.color-grey .modal-backdrop {
    background: rgba(0, 0, 0, 0.8);
}

body.color-grey .noti-item {
    color: #000 !important;
}

body.color-grey .noti-item[data-status="read"] {
    background: rgba(173, 173, 173, 0.2);
}

body.color-grey .noti-item[data-status="unread"] {
    background: rgba(133, 133, 94, 0.2);
}

body.color-grey .i-fav {
    filter: brightness(0);
}

body.color-grey .i-fav.active {
    filter: none;
}

body.color-grey .game-item {
    border-color: rgba(0, 0, 0, 0.2);
}

body.color-grey .game-item-hover {
    background: rgba(255, 255, 255, 0.6);
}

body.color-grey .game-title {
    color: #222;
}

body.color-grey .btn-pn {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 1024px) {
    body.color-grey #divMenu {
        background: #ccc;
    }

    body.color-grey #togglesettings:after {
        background-color: rgba(0, 0, 0, 0.5);
    }

    body.color-grey .tops-container {
        background: #eee;
        border-color: #eee;
    }

    body.color-grey .gl-next,
    .gl-prev {
    }

    body.color-grey .game-item {
        background: #fff;
    }

    body.color-grey .btn-gl {
        color: #888;
    }

    body.color-grey .btn-gl:hover {
        color: #666;
    }

    body.color-grey .btn-gl:active {
        color: #222;
    }

    body.color-grey .btn-gl.active {
        color: #ffbd42;
        border-color: #ffbd42;
    }
}

@media screen and (max-width: 1023px) {
    body.color-grey #menuContainer #menuHead {
        background: #eee;
    }

    body.color-grey #cssmenu > ul > li.active > a {
        background: #eee;
    }

    body.color-grey #cssmenu > ul > li > a {
        color: #000;
    }

    body.color-grey .fcontent-detail {
        background: #fff;
    }
}

/***************************************************************************** TERMS */
.collapse-box {
    border: 1px solid #888;
    border-radius: 6px;
    margin: 10px 0;
}

.btn-collapse {
    width: 100%;
    border-radius: 0;
    margin: 0;
    text-align: left;
    border: 0;
    position: relative;
    padding: 7px 15px;
    background-color: #af0013;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.btn-collaps:hover {
    border-color: #eb2e42;
    color: #fff;
}

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

.btn-collapse.collapsed {
    background-color: transparent;
}

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

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

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

/***************************************************************************** ADMIN  */
#theme-contain-adminloginx {
    padding: 20px 15px;
}

#theme-contain-adminloginx input {
    padding: 5px 7px;
    border: 1px solid #666;
    margin: 5px auto;
    background-color: #fff;
    color: #000;
}

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

/***************************************************************************** MENU */
.icnMenu1 {
    background-image: url("/data/2076/uploads/icn-menu-12.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu2 {
    background-image: url("/data/2076/uploads/icn-menu-13.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu3 {
    background-image: url("/data/2076/uploads/icn-menu-16.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu4 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu5 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu6 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu7 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu8 {
    background-image: url("/data/2076/uploads/icn-menu-11.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu9 {
    background-image: url("/data/2076/uploads/icn-menu-15.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu10 {
    background-image: url("/data/2076/uploads/icn-menu-30.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu11 {
    background-image: url("/data/2076/uploads/icn-menu-38.webp");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu12 {
    background-image: url("/data/2076/uploads/icn-menu-17.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu13 {
    background-image: url("/data/2076/uploads/icn-menu-18.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu14 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu15 {
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
}
.icnMenu16 {
    background-image: url("/data/2076/uploads/icn-menu-referral.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
.icnMenu17 {
    background-image: url("/data/2076/uploads/icn-menu-19.png");
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin: 0 6px 0 0;
    padding: 4px 0 0 30px;
    filter: brightness(0);
}
#cssmenu > ul > li:hover > a .icnMenu1,
#cssmenu > ul > li:hover > a .icnMenu2,
#cssmenu > ul > li:hover > a .icnMenu3,
#cssmenu > ul > li:hover > a .icnMenu8,
#cssmenu > ul > li:hover > a .icnMenu9,
#cssmenu > ul > li:hover > a .icnMenu10,
#cssmenu > ul > li:hover > a .icnMenu11,
#cssmenu > ul > li:hover > a .icnMenu12,
#cssmenu > ul > li:hover > a .icnMenu13,
#cssmenu > ul > li:hover > a .icnMenu16,
#cssmenu > ul > li:hover > a .icnMenu17 {
    filter: brightness(2);
}
.menulabel {
    display: none;
}
#menuContainer {
    border-right: #808080 1px solid;
}

#cssmenu {
}

#divMenu {
}

#divMenu.fade {
}

#cssmenu {
    position: static;
}

#cssmenu > ul {
    display: flex;
    white-space: nowrap;
    position: static;
}

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

#cssmenu > ul > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    position: static;
    text-align: center;
    font-size: 14px;
    padding: 10px 15px;
    color: #4c3814;
    text-transform: uppercase;
    transition: none;
    font-weight: bold;
    overflow: hidden;
}

#cssmenu > ul > li > a > img {
    height: 20px;
    filter: brightness(0);
    opacity: 0.7;
}

#cssmenu > ul > li.active > a {
    color: #000;
    background: transparent;
}

#cssmenu > ul > li.active > a > img {
    filter: brightness(0);
    opacity: 1;
}

#cssmenu > ul > li:hover > a > img {
    filter: brightness(0) invert(1);
    opacity: 1;
}

#cssmenu > ul > li:hover > a {
    /*height: 44px;*/
    color: #fff;
    background: #080808;
    background: linear-gradient(180deg, #222222 0%, #000000 100%);
}

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

#cssmenu > ul > li.has-sub > a::after {
    display: none;
}

#cssmenu li:nth-child(11) {
    display: block;
}
#cssmenu li:nth-child(12) {
    display: block;
}
#cssmenu li:nth-child(13) {
    display: none;
}
#cssmenu li:nth-child(14) {
    display: none;
}
#cssmenu li:nth-child(15) {
    display: none;
}
#cssmenu li:nth-child(16) {
    display: none;
}

#btn-fav {
    display: none;
}
#btn-setting {
    display: block;
}

#cssmenu ul ul {
    left: 0 !important;
    right: 0;
    position: absolute;
    z-index: 99;
    max-width: 1820px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
}

#cssmenu > ul > li:hover > ul,
#cssmenu > ul > li > ul:hover {
    opacity: 1;
    visibility: visible;
}

#cssmenu ul ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    margin: auto;
    margin-left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(5px);
}

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

#cssmenu ul ul li {
    height: auto;
    margin-bottom: 10px;
    width: 12.5%;
}

#cssmenu ul ul li:hover {
    height: auto;
}

#cssmenu ul ul li a {
    width: auto;
    background-color: transparent;
}

#cssmenu ul ul li a:hover {
    background-color: transparent;
}

#cssmenu ul ul li:hover > a {
    background-color: transparent;
}

@media screen and (min-width: 1024px) {
    #divMenu {
        display: block !important;
        background: linear-gradient(0deg, rgb(183 126 24) 7%, rgba(245, 215, 105, 1) 46%, rgba(255, 223, 163, 1) 63%, rgba(236, 205, 94, 1) 100%);
    }

    #menuContainer {
        padding-left: 15px;
        padding-right: 15px;
    }

    #btnMenu {
        display: none;
    }

    #cssmenu > ul {
        background-image: none !important;
        padding-top: 0 !important;
    }

    #cssmenu > ul > li > a > img {
        margin-right: 5px;
    }

    #cssmenu > ul > li > ul {
        padding-bottom: 20px;
        max-width: 1400px;
    }

    #cssmenu > ul > li > ul:before {
        background-color: rgba(0, 0, 0, 0.8);
    }

    #cssmenu > ul > li > ul > li a {
        text-align: center;
        font-weight: 700;
        padding: 10px;
    }

    #cssmenu > ul > li > ul > li img {
        max-width: 160px;
        width: 100%;
        display: block;
        margin: auto;
        margin-bottom: 5px;
    }

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

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

    #cssmenu > ul > li.active > a {
        border-bottom: 2px solid #080808;
    }

    #divMenu {
        display: block;
        position: static;
        opacity: 1;
        overflow: hidden !important;
    }

    #divMenu .modal-dialog {
        width: 100%;
        margin: 0;
        transition: none;
        transform: none;
        position: static;
    }

    .menuHeader {
        display: none !important;
    }

    #cssmenu > ul > li > ul:hover li {
        opacity: 0.6;
    }

    #cssmenu > ul > li > ul li:hover {
        opacity: 1;
    }
}

@media screen and (min-width: 1250px) {
    #menuContainer {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 1500px) and (min-width: 1249px) {
    #cssmenu > ul > li > a {
        font-size: 12px;
    }
}

@media screen and (max-width: 1250px) and (min-width: 1024px) {
    #cssmenu > ul > li > a {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 10px;
    }

    .btn-login,
    .btn-register {
        font-size: 12px;
    }
}

@media screen and (max-width: 1023px) {
    #divMenu {
        padding-left: 0 !important;
        overflow: hidden;
    }

    #divMenu ul {
        margin: 5px 5px;
        padding: 0;
    }

    #divMenu ul li {
        float: none;
        display: flex;
        flex-direction: column;
        list-style: none;
    }

    #divMenu ul li a {
        border: 0;
        color: #444;
        text-transform: capitalize;
        padding: 15px 20px;
        margin: 2px 0;
        font-size: 14px;
        line-height: normal;
        border-radius: 40px;
    }

    #divMenu ul li.active a {
        color: #000;
        background: linear-gradient(to bottom, #fef769, #e1b334);
    }

    #divMenu ul li a:hover {
        background-color: #eee;
        color: #000;
        transition: 0.2s;
    }

    #divMenu ul li a > img {
        margin-right: 10px;
        width: 18px;
    }

    #menuContainer {
        width: 100%;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        margin: 0;
        z-index: 1050;
        max-width: 280px;
        background-color: #fff;
        overflow-y: auto;
    }

    #cssmenu {
        margin-bottom: auto;
    }

    #cssmenu,
    #menuadd {
    }

    #cssmenu > ul {
    }

    #cssmenu > ul {
        display: flex;
        flex-wrap: wrap;
        padding: 5px;
        margin: 0;
        white-space: normal;
    }

    #menuadd > ul {
        margin-top: -10px;
    }

    #cssmenu > ul > li {
        list-style-type: none;
        padding: 0;
        flex: 1 calc(33.33% - 4px);
        max-width: calc(33.33% - 4px);
        margin: 1px 2px;
    }

    #cssmenu > ul > li > a {
        text-transform: capitalize;
        border-radius: 0px;
        text-align: left;
        color: #fff;
        display: block;
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        font-size: 11px;
        padding: 7px;
        background: #eee;
        text-transform: none;
        border: 1px solid #eee;
    }

    #cssmenu > ul > li > a img,
    #menuadd > ul > li > a img {
        height: auto;
        width: 20px;
        margin-right: 10px;
    }

    #cssmenu > ul > li > a img {
        filter: brightness(0);
        margin-bottom: 0;
        opacity: 1;
    }

    #cssmenu > ul > li:hover > a img {
        filter: brightness(2) invert(1);
        opacity: 1;
    }

    #cssmenu > ul > li:hover > a {
        background: #eee;
        border-color: #ffbd42;
    }

    #cssmenu > ul > li:active > a {
        background: #aaa;
    }

    #cssmenu > ul > li:active > a img {
        opacity: 1;
    }

    #cssmenu > ul > li > ul,
    #menuadd > ul > li > ul {
        display: none !important;
    }

    #cssmenu > ul > li:hover,
    #menuadd > ul > li:hover {
    }

    #cssmenu > ul > li:hover a,
    #menuadd > ul > li:hover a {
    }

    #divMenu .modal-dialog {
        transform: translate(-100%, 0);
        transition: 0.15s;
    }

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

    .modal-menu.fade .modal-dialog {
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
    }

    .modal-menu.fade:not(.in) .modal-dialog {
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
    }

    #divMenu .modal-dialog {
        transition: transform 0.15s, opacity 0s;
    }

    #menuContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #menuContainer #menuHead {
        order: -1;
        background: #333;
        padding: 20px 10px;
        text-align: center;
    }

    .menuhead-auth {
        display: flex;
        margin-top: 20px;
    }

    .menuhead-auth .auth-box {
        flex: 1;
        margin: 2px;
    }

    .menuhead-auth .auth-box .btn-login {
        width: 100%;
    }

    #menuadd > ul {
        display: block;
        padding: 5px;
        margin: 0;
    }

    #menuadd > ul > li {
        list-style-type: none;
        padding: 0;
        flex: 1 calc(33.33% - 4px);
        max-width: calc(33.33% - 4px);
        margin: 1px 2px;
    }

    #menuadd > ul > li > a {
        text-transform: capitalize;
        border-radius: 50px;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        margin-top: 3px;
        margin-bottom: 3px;
        text-align: left;
        padding-left: 20px !important;
        color: #fff;
        display: block;
        color: #000;
    }

    .add-menu > div {
        border-top: 1px solid #dbdbdb;
    }

    #divMenu p {
        line-height: normal;
        padding-top: 20px;
        padding-left: 20px;
        color: #888;
        font-size: 12px;
    }

    .nav-language {
        margin-left: 10px;
        margin-right: 10px;
    }

    .nav-language p {
        color: #aaa;
    }

    #divMenu .nav-language li {
        padding: 0;
    }

    #divMenu .nav-language li.active a,
    .nav-language .dropdown-menu .country a.active {
        background-color: #efefef !important;
        background-repeat: no-repeat;
        background-image: url("/data/1806/uploads/icn-checked.png");
        background-position: right 15px center;
        background-size: 18px;
        pointer-events: none;
        cursor: default;
    }

    .nav-language .country {
        font-size: 10px;
        color: #aaa;
        padding-left: 15px;
        padding-top: 10px;
    }

    .nav-language .flag {
        width: 20px;
        margin-right: 5px;
        border-radius: 50%;
        border: 1px solid #aaa;
    }

    .nav-footer {
        line-height: normal;
        text-align: center;
        border-top: 1px solid #dbdbdb;
        padding: 20px 0 40px;
        background-color: #222;
        color: #fff;
        margin-top: 25px;
        font-size: 12px;
    }

    .nav-language .dropdownLanguage {
        display: none !important;
    }
    .nav-language .dropdown-menu {
        position: static;
        display: block;
        border: 0;
        box-shadow: none;
        float: none;
    }
    .nav-language .dropdown-menu .country {
        padding: 0;
    }
    .nav-language .dropdown-menu .country .lang {
        padding-left: 0 !important;
        display: block !important;
    }
    .nav-language .dropdown-menu .country a {
        display: block;
        padding: 15px 20px !important;
        border-radius: 40px;
        font-size: 14px;
        color: #000 !important;
    }
    .nav-language .dropdown-menu .country a.active {
        color: #000;
    }
    .nav-language .dropdown-menu .country a:after {
        display: none;
    }
}

@media (min-width:1024px) {
    #cssmenu li:last-child.has-sub > ul a { font-size: 0; }
}

@media (max-width:1023px) {
    #cssmenu li:nth-child(10) { display: block; }
    #cssmenu li:last-child.has-sub { flex: 100%; max-width: 100%; margin: 0; }

        #cssmenu li:last-child.has-sub > a { display: none; }

        #cssmenu li:last-child.has-sub > ul { display: flex !important; !I; !; position: static; opacity: 1; visibility: visible; flex-wrap: wrap; justify-content: start; }

            #cssmenu li:last-child.has-sub > ul > li { width: 100%; margin-bottom: 0; flex: 1 1 calc(33.33% - 4px); ); ); ); ); ); max-width: calc(33.33% - 4px); margin: 1px 2px; }

            #cssmenu li:last-child.has-sub > ul:before { display: none; }

            #cssmenu li:last-child.has-sub > ul > li > a { color: #000; display: flex; flex-direction: column; justify-content: space-between; height: 100%; text-align: center; font-size: 11px; padding: 7px; background: #eee; text-transform: none; border: 1px solid #eee; border-radius: 0; /* margin: 2px; */ font-weight: bold; }

            #cssmenu li:last-child.has-sub > ul img { width: 35px; }

    #cssmenu li:last-child img { width: 35px; display: block; margin: auto; margin-bottom: 5px; }
}

/***************************************************************************** HEADER TOP */
.header-logo {
    position: relative;
}

.header-logo:after {
    background: linear-gradient(90deg, #b00022, #ff0031);
    content: "";
    position: absolute;
    top: -15px;
    bottom: -15px;
    right: -35px;
    left: -85px;
    z-index: 1;
    transform: skewX(-20deg);
    border-bottom-right-radius: 30px;
    background: linear-gradient(to bottom, #980000, #4c0000);
}

.header-top {
    background: linear-gradient(180deg, #222222 0%, #000000 100%);
}

.headertop-wrapper {
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;
}

img.logo {
    height: 75px;
    position: relative;
    z-index: 2;
}

@media screen and (min-width: 1250px) {
    .headertop-wrapper {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (min-width: 768px) {
    .header-top {
        position: relative;
    }

    .header-top.ontop {
        z-index: 9999;
    }
}

@media screen and (max-width: 1023px) {
    .header-top {
        position: relative;
    }

    .headertop-wrapper {
        border-bottom: 1px solid #888;
        padding: 5px 5px;
    }

    img.logo {
        height: 50px;
    }
}

@media screen and (max-width: 350px) {
    img.logo {
        height: 40px;
    }
}

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

.header-left .header-icon {
    margin-left: 50px;
    display: flex;
    align-items: center;
}

.header-left .header-icon a {
    padding: 5px;
    margin: 5px;
    transition: transform 0.2s ease-in-out;
    display: block;
}

.header-left .header-icon a img {
    transition: transform 0.2s ease-in-out;
    width: 30px;
    height: 30px;
}

.header-left .header-icon a:hover img {
    transform: scale(1.2);
}

@keyframes mycart {
    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.15);
    }
}

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

.div-auth {
    display: flex;
    align-items: center;
}

.btn-lr {
    display: block;
    padding: 12px 12px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #fef769, #e1b334);
    line-height: normal;
    background: linear-gradient(#f8e153 0%, #db7c23 100%);
}

#header-login {
    background: none;
    text-decoration: underline;
    margin-right: 4px;
    color: #fff;
}

#header-login:hover {
    background: linear-gradient(to bottom, #888, #666);
    color: #fff;
}

#header-register {
    font-weight: bold;
}

#header-register:hover {
    background: linear-gradient(to bottom, #888, #666);
    color: #fff;
}

@media screen and (min-width: 768px) {
    .header-left .header-icon {
        margin-left: 50px;
    }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
    .header-left {
        padding-left: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .btn-lr {
        font-size: 12px;
        padding: 10px 10px;
    }
}

@media screen and (max-width: 600px) {
    .header-logo {
        margin-right: auto;
    }

    .headertop-wrapper {
    }

    .header-left {
    }

    .header-left .header-icon {
    }

    .header-left .header-icon a {
        margin: 0;
    }

    .header-left .header-icon a img {
        width: 20px;
        height: 20px;
    }

    .header-icon {
        max-width: 300px;
        overflow: hidden;
        margin-left: 0;
    }

    .header-icon.active {
        margin-left: 50px;
    }

    .header-right {
    }

    .div-auth .auth-login,
    .div-auth .auth-register,
    .div-auth .auth-language {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    .header-icon.active {
        max-width: 0px;
    }
}
/*** currency ***/
.auth-currency {
}

.currency {
    display: flex;
    align-items: center;
    margin-right: 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    padding-right: 15px;
    color: #ddd;
    font-size: 14px;
}

.currency img {
    width: 20px;
    filter: brightness(0.8);
}

.currency p {
    margin: 0;
}

@media screen and (max-width: 1023px) {
    .currency {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .currency {
        font-size: 10px;
        border-right: 0;
    }

    .currency img {
        width: 18px;
    }
}
/*** settings ***/
.settingboxwrapper {
    display: flex;
    align-items: center;
    border-radius: 50px;
    margin: 0 5px;
}

#togglesettings.open .settingboxwrapper {
    background-color: rgba(255, 255, 255, 0.1);
}

#togglesettings img {
    width: 20px;
    height: 20px;
    filter: grayscale(1) brightness(2);
    transition: filter 0.2s ease-in-out;
}

#togglesettings .btn-settings:hover img,
#togglesettings .btn-settings.active img,
#togglesettings #btn-settingsbox:hover img {
    filter: grayscale(0) brightness(1);
}

.settingbox.open {
}

.settingbox .settingsbox {
    max-width: 0;
    transition: max-width 0.3s ease-in-out;
}

.settingbox.open .settingsbox {
    max-width: 250px;
}

.settingbox .settingsbox > div {
    margin: 0 10px;
    display: flex;
    overflow: hidden;
}

.settingbox .settingsbox .btn-settings {
    padding: 5px;
    margin: 0 2px;
    position: relative;
}

.i-count {
}

.i-count:after {
    content: attr(data-badge);
    position: absolute;
    top: 0px;
    right: 0px;
    background: #ff0000;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    display: flex;
    justify-content: center; /*align-items: center;*/
    font-style: normal;
    font-weight: bold;
    color: #fff;
    opacity: 0;
}

[data-badge]:not([data-badge=""]):after {
    opacity: 1;
}

#totalCount.i-count {
    display: none;
}

#btn-settingsbox {
    background: transparent;
    padding: 10px;
    border-radius: 50%;
    position: relative;
    background: transparent;
}

#btn-settingsbox:hover {
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2);
}

#btn-settingsbox:active {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}

#btn-settingsbox.btn-setting__open {
    background: rgba(255, 255, 255, 0.1);
}

#btn-settingsbox img {
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
}

#btn-settingsbox.btn-setting__open img {
    transform: rotate(90deg);
}

@media screen and (min-width: 1024px) {
    #togglesettings {
        padding-right: 5px;
        margin-right: 5px;
        position: relative;
    }

    #togglesettings:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        height: 20px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.5);
        margin: auto;
        pointer-events: none;
    }
}

@media screen and (max-width: 600px) {
    .settingbox .settingsbox {
        transition: none;
    }

    .settingbox.open .settingsbox {
        transition: max-width 0.3s ease-in-out;
    }

    .settingbox .settingsbox .btn-settings {
        padding: 2px;
    }

    .modal-settings .modal-dialog {
        padding: 0 !important;
    }
}

.modal-settings .modal-dialog {
}



.div-login,
.register {
    border-radius: 20px;
    background: #faf7f2 !important;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    padding: 10px;
}

.modal .div-login,
.modal .register {
    box-shadow: none;
    margin-top: 0;
    padding: 0;
}
/***************************************************************************** LOGIN */
.modal-login {
}

.modal-login button.close {
    opacity: 1;
}

.modal-login .modal-dialog,
.modal-register .modal-dialog {
    background-color: #fff;
    border-radius: 20px;
    padding: 15px;
}

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

.mlr-top {
    text-align: center;
}

.modal-filter {
    display: flex;
    margin: auto;
    margin-bottom: 30px;
    max-width: 300px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 50px;
    background: #fff;
    text-align: center;
    align-items: center;
    overflow: hidden;
}

.btn-mlr {
    flex: 1;
    text-align: center;
    color: #000;
    padding: 10px 0px;
    background: transparent;
}

.btn-mlr.active {
    background: linear-gradient(to bottom, #fef769, #e1b334);
}

.login-logo {
    width: 120px;
    margin-bottom: 20px;
}

.modal-login .div-login {
    padding: 0;
}

.modal-login .popup-wrapper {
    background-color: transparent;
    padding: 0;
}

.mlr-bottom {
    padding: 15px 10px 20px;
    font-size: 12px;
    text-align: center;
    max-width: 600px;
    margin: auto;
}

#loginModal .mlr-bottom p {
    color: #ddd;
}

#registerModal .mlr-bottom p {
    color: #333;
}

.modal .mlr-bottom {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin: 30px auto 15px;
    max-width: 1000px;
}

.modal .mlr-bottom > * {
    max-width: 600px;
    margin: auto;
}

#loginModal > div.modal-dialog {
    background: linear-gradient(90deg, #b00022, #ff0031);
    border: 2px solid #55586c;
    border-bottom-color: #fe284a;
    box-shadow: 0 8px 10px #000;
    background: linear-gradient(to bottom, #980000, #4c0000);
}

#loginModal > div.modal-dialog .close span {
    color: #fff;
}

#registerModal > div.modal-dialog {
    background: linear-gradient(90deg, #b00022, #ff0031);
    border: 2px solid #55586c;
    border-bottom-color: #fe284a;
    box-shadow: 0 8px 10px #000;
    background: linear-gradient(to bottom, #980000, #4c0000);
}

#registerModal > div.modal-dialog .close span {
    color: #fff;
}

@media screen and (max-width: 550px) {
    #loginModal,
    #registerModal {
        padding-left: 0 !important;
        background: #fff;
    }

    #loginModal .modal-dialog,
    #registerModal .modal-dialog {
        padding: 0;
        border-radius: 0;
        margin: 0;
        height: 100%;
    }

    .modal-login button.close,
    .modal-register button.close {
        padding: 20px;
        position: absolute;
        top: 0;
        right: 0;
    }

    #loginModal .div-login,
    #registerModal .div-login {
        border-radius: 0;
    }

    #loginModal .popup-wrapper,
    #registerModal .popup-wrapper {
        height: 100%;
    }

    .mlr-container {
        height: 100%;
        padding-top: 20px;
    }

    .mlr-container #subcontent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .customform {
        margin-bottom: auto;
    }

    .modal-filter {
        max-width: 200px;
    }

    .btn-mlr {
        font-size: 0.8em;
    }
}

.customform {
    padding: 20px 20px 0;
    max-width: 450px;
    margin: 30px auto 0;
}

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

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

.customform i:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    height: 90%;
    width: 1px;
    background: rgba(0, 0, 0, 0.2);
}

.customform i img {
    width: 22px;
}

.customform input {
    width: 100%;
    text-align: left;
    padding: 10px 15px;
    margin: 5px 0;
    color: #000;
}

#customform_UserName {
}

#customform_Password {
}

#customform_UserName,
#customform_Password {
}

#customform_submit {
    color: #fff;
    font-weight: bold;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    border-radius: 6px;
    text-align: center;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.4);
    margin: 0;
}

#customform_submit:hover {
    background: linear-gradient(to bottom, #fef769, #e1b334);
    color: #000;
}

#customform_submit:active {
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
}

.form-title {
    margin: 5px;
    font-weight: bold;
    color: #fff;
    text-align: left;
}

.login-title {
    text-align: center;
}

.login-bottom {
    padding: 50px 0 50px;
    border-top: 1px solid #888;
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
    color: #888;
}

.login-bottom a {
    border-radius: 6px;
    background-color: #e5ba5d;
    color: #000;
    border: 2px solid #e5ba5d;
    display: inline-block;
    padding: 12px 40px;
    font-weight: bold;
    margin: 20px 0;
}

.login-bottom a:hover {
    background-color: #000;
    color: #e5ba5d;
}

#theme-contain-login,
#theme-contain-registration {
    padding: 0 15px 25px;
    margin-top: 25px;
    background:#eee5d6 !important;
}

.div-login {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    background-color: transparent;
    border-radius: 20px;
    padding: 0;
}

.login-title {
    padding-top: 25px;
}

@media screen and (max-width: 550px) {
    #theme-contain-login,
    #theme-contain-registration {
        background: #fff;
    }


 #theme-contain-login .div-login,
#theme-contain-registration .register {
        background: #faf7f2!important;
        box-shadow: none;
        padding: 0px;
        padding-top: 25px;
        margin-top: 0px;
    }

}

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

.register {
    max-width: 1000px;
    margin: auto;
}

.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: #000;
    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,
#registerform #registerform_DOB {
    width: 100%;
    color: #000;
    font-size: 14px;
    padding: 10px 10px;
    background-color: #fff;
    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;
}

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

#registerform .btnCheckUser,
#registerform_btnSubmit {
    color: #000;
    font-weight: bold;
    padding: 8px 12px;
    font-size: 14px;
    text-transform: uppercase;
    margin: 6px 0;
    background: linear-gradient(to bottom, #fef769, #e1b334);
}

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

#registerform:after {
    font-size: 10px;
    color: #fff;
}

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

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

.small {
    font-size: 12px;
}

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

.divRegister-box {
    background-color: #fff;
}

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

.affiliate-content {
    background-image: linear-gradient(218deg, #ff7134 11.82%, #f73b00 90.79%);
    -webkit-box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.25), 4px -4px 12px rgba(255, 255, 255, 0.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00;
    box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.25), 4px -4px 12px rgba(255, 255, 255, 0.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00;
    padding: 20px;
    margin: 20px 0;
}

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

@media screen and (max-width: 1024px) {
    #registerform {
        padding: 0 25px 25px;
    }
}

@media screen and (min-width: 768px) {
    #groupPassword,
    #groupComfirmPassword,
    #groupMobileNumber,
    #groupCurrency,
    #groupAffiliate,
    #groupReferralCode,
    #groupEmail {
        flex: 1 1 50%;
        max-width: 50%;
    }

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

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

@media screen and (min-width: 767px) {
    .imgRegister-window {
        margin-left: 50%;
        transform: translateX(-50%);
    }

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

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

@media screen and (max-width: 766px) {
    .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;
    }
}

@media screen and (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 screen and (max-width: 766px) {
    #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;
    }
}

/****** modal settings */

.modal-settings {
}

.modal-settings .modal-dialog {
    transform: translate(100%, 0);
    transition: transform 0.3s ease-in-out;
}

.modal-settings.in .modal-dialog {
    transform: translate(0, 0);
}

.modal-settings .modal-dialog {
    margin: 0;
    margin-left: auto;
    height: 100%;
}

.modal-settings .modal-dialog .popup-wrapper {
    background: #333;
    min-height: 100%;
    color: #fff;
}

.modal-settings .close {
    float: none;
}

.settings-head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px;
    position: relative;
}

.settings-head .close {
    font-size: 1.6em;
    margin-right: 5px;
    transform: none !important;
    color: #fff;
}

.settings-head h4 {
    margin: 0;
}

.modal-settings h4 {
    color: #fff;
}

.settings-body {
    padding: 15px;
}

.fav-filter {
    display: flex;
}

.btn-ffav {
    border-radius: 0;
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid rgba(0, 0, 0, 0.4);
    font-size: 0.9em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-ffav:hover {
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2);
}

.btn-ffav:active {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

.btn-ffav.active {
    background: #f3de55;
    border-color: #ffbd42;
    box-shadow: none;
    color: #000;
}

.btn-ffav:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-ffav:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.btn-ffav:not(:first-child) {
    margin-left: 2px;
}

.ffav-count {
    font-style: normal;
    margin-left: 2px;
    font-size: 12px;
}

.modal-settings .dropdown-menu {
    left: 0;
}

.settingsList {
}

.settingsList ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.settingsList ul > li {
    list-style-type: none;
    padding: 5px;
    flex: 1;
    max-width: 50%;
}

.settingsList .dropdown-toggle {
    background: rgba(0, 0, 0, 0.2);
    margin-left: 0 !important;
}

.settingsList .dropdownLanguage p {
    display: block;
    font-size: 10px;
}

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

@media screen and (max-width: 767px) {
    .settingsList ul > li {
        max-width: 100%;
    }

    .settings-head .close:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}

/*** noti ***/
.noti-top {
    display: flex;
    justify-content: space-between;
}

#btn-clearnoti {
    color: #fff;
    background: transparent;
    font-size: 0.8em;
    padding: 10px;
    margin-left: auto;
}

#btn-clearnoti:hover {
    background: rgba(255, 255, 255, 0.1);
}

#noti-list {
    margin: 0;
}

#noti-list > li {
    list-style-type: none;
}

.noti-item {
    display: block;
    border-radius: 6px;
    position: relative;
    padding: 10px 15px;
    margin: 8px 0;
    color: #fff !important;
    font-size: 0.8em;
    cursor: pointer;
}

.noti-item[data-status="unread"] {
    background: rgba(255, 255, 240, 0.2);
}

.noti-item[data-status="unread"]:hover {
    box-shadow: inset 0 0 50px rgba(255, 255, 240, 0.2);
}

.noti-item[data-status="unread"]:active {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.noti-item[data-status="unread"]:after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    border-radius: 50px;
    width: 10px;
    height: 10px;
    background: #ff0000;
}

.noti-item[data-status="read"] {
    background: rgba(0, 0, 0, 0.2);
}

/*** language ***/
.dropdown.language > a {
    padding: 12px 10px;
    display: block;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 5px;
}

.dropdown.language > a:hover,
.dropdown.language > a:active,
.dropdown.language > a:focus {
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.2);
}

.dropdown.language > a img {
    max-height: 18px;
}

.dropdownLanguage p {
    display: none;
}

.dropdown-menu {
    min-width: 250px;
    padding-left: 5px;
    padding-top: 10px;
    z-index: 9999999;
}

.dropdown-menu .country {
    margin-bottom: 15px;
}

.dropdown-menu .country img.flag {
    height: 20px !important;
    max-height: 30px !important;
    margin: 5px 5px 5px 10px;
    border-radius: 50%;
    border: 1px solid #aaa;
}

.dropdown-menu .country a {
    padding: 5px 20px;
    position: relative;
    color: #000;
}

.lang-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lang-main img {
    margin-right: 5px;
}

.lang-main span {
    margin-right: 5px;
}

.lang-main i {
    margin-left: auto;
    margin-right: 0;
}

.dropdown-menu .country a:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: 14px;
    left: 0;
    width: 1px;
    background-color: #aaa;
    margin: auto;
}

.dropdown-menu .country a:first-child:after {
    display: none;
}

.dropdown-menu .country a.active {
    color: #fc0002;
}

.dropdown-menu .country a:hover {
    text-decoration: underline;
}

.dropdown-menu .country .name {
    font-size: 10px;
    color: #aaa;
}

.dropdown-menu .country .lang {
    display: flex;
    padding-left: 20px;
}

/*** theme choose ***/
.themechoosewrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-theme {
    flex: 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
    margin: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.btn-theme img {
    width: 100%;
}

.btn-theme.active img {
    filter: blur(5px);
}

.btn-theme.active:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    background-image: url("/data/2076/uploads/icn-check.png?1");
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.3);
}
/*** btn menu ***/
.btn-menu {
    background-color: transparent;
    border: 0;
    outline: 0;
    padding: 8px;
    position: relative;
    z-index: 2;
}

.text-menu {
    color: #fff;
    text-transform: uppercase;
}

.btn-menu {
    position: relative;
    padding: 12px 6px;
}

.btn-menu span {
    width: 25px;
    height: 3px;
    display: block;
    margin-top: 4px;
    margin-left: 0;
    margin-bottom: 4px;
    margin-right: 0;
    background-color: #f6e5a5;
    border-radius: 4px;
    transition: transform 0.3s linear;
    transition: 0.3s linear, 0.3s linear;
}

.btn-menu span:nth-child(1) {
}

.btn-menu span:nth-child(2) {
    width: 20px;
}

.btn-menu span:nth-child(3) {
    width: 15px;
}

.btn-menu.active span:nth-child(1) {
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}

.btn-menu.active span:nth-child(2) {
    width: 25px;
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.btn-menu.active span:nth-child(3) {
    width: 25px;
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}

/**************************************************************************************************************************** HEADER DOWNLOADS */

.sectiondownload {
    background-color: #000;
    border-bottom: 1px solid #444;
    color: #fff;
}

.close-sd {
    padding: 0;
    background-color: transparent;
    margin-left: 5px;
    border-radius: 5px;
}

.close-sd:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.close-sd:active {
    background-color: rgba(0, 0, 0, 0.5);
}

.close-sd:active span {
    background-color: #fff;
}

.close-sd > div {
    padding: 10px 5px;
}

.close-sd span {
    width: 15px;
    height: 3px;
    border-radius: 5px;
    background: #aaa;
    display: block;
}

.close-sd:hover span {
    background: #fff;
}

.close-sd span:first-child {
    transform: translateX(-1px) rotate(-45deg) translateY(2px);
}

.close-sd span:last-child {
    transform: translateX(-1px) rotate(45deg) translateY(-2px);
}

.sd-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sdm-left {
    font-size: 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sdm-logo {
    height: 50px;
    margin: 0 10px;
}

.sdm-show {
    background: #ffbd42;
    display: flex;
    border-radius: 6px;
    padding: 5px 10px;
    margin-right: 10px;
    font-size: 11px;
    color: #000 !important;
}

.sd-download {
}

.sd-download ul {
    margin: 0;
    display: flex;
}

.btn-sd {
    list-style-type: none;
    padding: 0;
}

.btn-sd a {
    background: #ffbd42;
    display: flex;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: 3px 10px;
    margin: 0 2px;
    text-align: center;
}

.btn-sd a img {
    width: 20px;
    filter: invert(0.8);
}

.btn-sd .btnsf-content {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-left: 5px;
}

.btn-sd p {
    margin: 0;
    font-weight: bold;
    font-size: 13px;
}

.btn-sd span {
    font-size: 8px;
}

.btn-sd a:hover {
    background: #444;
}

.btn-sd a:hover img {
    filter: invert(0);
}

@media screen and (min-width: 768px) {
    .sectiondownload {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }

    .sdm-right {
        display: none;
    }
}

@media screen and (max-width: 1023px) and (max-width: 768px) {
    .sdm-logo {
        height: 35px;
    }

    .btn-sd a img {
        width: 18px;
    }
}

@media screen and (max-width: 767px) {
    .btn-sd {
        flex: 1;
    }

    .sd-download {
        transition: max-height 0.2s ease-in-out;
        max-height: 0;
        overflow: hidden;
    }

    .sd-download.show {
        max-height: 100px;
    }

    .sd-download ul {
        padding: 10px;
    }

    .btn-sd a {
        padding: 8px 0;
    }
}

@media screen and (max-width: 410px) {
    .btn-sd a {
        display: block;
        height: 100%;
    }

    .btn-sd a img {
        margin-bottom: 4px;
    }

    .btn-sd p {
        font-size: 11px;
    }

    .btn-sd a img {
        width: 25px;
    }

    .btn-sd span {
        display: none;
    }
}

/**************************************************************************************************************************** FOOTER */
.float-right {
    position: fixed;
    top: 45%;
    right: 0;
    z-index: 19;
}

.float-right ul {
    margin: 0;
}

.float-right li {
    list-style-type: none;
}

.float-right a {
    display: block;
    padding: 10px;
    background: linear-gradient(to bottom, #fef769, #e1b334);
    border-bottom-left-radius: 7px;
    border-top-left-radius: 7px;
    margin: 5px 0;
    font-size: 11px;
}

.float-right a:hover {
    background: #000;
    color: #fff;
}

.float-right a img {
    display: block;
    margin: auto auto 5px;
    filter: brightness(0);
    height: 26px;
    width: 32px;
}

.float-right a:hover img {
    filter: brightness(1);
}
@media only screen and (max-width: 767px) {
    .pc-only {
        display: none;
    }
}
.divfooter {
    background-color: #303030;
    padding-bottom: 10px;
}

#divFooter-logo {
    padding: 10px 0;
}

#divFooter-logo > div {
    border-top: 1px solid #636363;
    padding-top: 20px;
}

#divFooter-info {
    color: #cccacb;
    font-size: 12px;
    padding: 10px 0 25px;
}

#divFooter-info a {
    color: #cccacb;
}

#divFooter-info .section {
    display: flex;
    border-top: 1px solid #636363;
}

#divFooter-info .section:not(:last-child) {
    padding-bottom: 25px;
}

#divFooter-info .section > div {
    flex: 1;
}

#divFooter-info h3 {
    color: #ffbd42;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footer-link {
}

.footer-link > ul {
    margin: 0;
    flex-direction: column;
    column-count: 2;
}

.footer-link > ul > li {
    list-style-type: none;
    padding: 5px 0;
}

.footer-link > ul > li > a {
    border-left: 1px solid #808490;
    padding: 2px 10px;
}

.footer-link > ul > li > a:hover {
    color: #fff !important;
    border-color: #fff;
}

.footer-contact {
}

.footer-contact > div {
    padding: 5px;
}

.footer-contact img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.footer-contact a {
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-copyright {
    background-color: #1e181d;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block !important;
}

.f-sm {
    width: 33.3333%;
    float: left;
}

.f-sm a {
    margin: 0 2px;
}

.f-sm img {
    border-radius: 50%;
}

.f-pm {
    width: 33.3333%;
    float: left;
}

.f-pm img {
    height: 100px;
    margin: 0 5px;
}

.f-gl {
    width: 33.3333%;
    float: left;
}

@media screen and (max-width: 1023px) {
    #divFooter-info .section {
        display: block;
        padding-left: 20px;
        padding-right: 20px;
    }

    .footer-link > ul {
        column-count: 4;
    }

    .f-sm,
    .f-pm,
    .f-gl {
        text-align: left;
        padding-top: 10px;
    }

    .float-right {
        top: 15%;
    }
}

@media screen and (max-width: 400px) {
    .footer-link > ul {
        column-count: 3;
    }
}

@media screen and (max-width: 600px) {
    #divFooter-info .section {
        display: block;
        padding: 10px;
    }
}

.divfootertcontent-wrapper {
}

.fc-box {
    padding: 10px;
    flex: 1;
}

.fcc-box {
    border-top: 1px solid #ffbd42;
}

.fcontent-ul {
    margin: 0;
}

.fcontent-title {
    color: #ffbd42;
    font-size: 14px;
    margin-bottom: 20px;
}

.fcontent-detail {
    list-style-type: none;
    padding: 5px;
    color: #ddd;
}

.fcontent-mini {
    color: #ffbd42;
    text-align: left;
    font-weight: bold;
    margin-top: 15px;
    font-size: 12px;
}

.fcontent-details {
    font-size: 11px;
    text-align: justify;
}

.fcc-box::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
.logo-paggor {
    width: 158px;
    height: 50px;
}

@media screen and (min-width: 1024px) {
    .divfootertcontent-wrapper {
        display: flex;
    }
}

@media screen and (max-width: 767px) {
    .fcc-box {
        overflow-x: auto;
    }

    .fcontent-ul {
        display: flex;
    }

    .fcontent-detail {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        margin-top: 10px;
        margin-bottom: 0px;
        margin-right: 10px;
        padding: 5px 10px;
    }

    .fcontent-detail p {
        width: 65vw;
    }
}
/**************************************************************************************************************************** BODY */
.flexslider {
    margin: 0;
    border: 0;
}
.divBanner {
    height: 37.2vw !important;
}
.flexslider .slides img {
    height: 37.2vw !important; /*aspect-ratio: 320 / 119;*/
}
.flex-direction-nav {
    height: 0;
}

.divHome-download {
    background: #f6f8fe url(/data/2076/uploads/bg-live-casino.webp) no-repeat top;
    background-size: 100% 100%;
}

#divHome-announce {
    background: linear-gradient(180deg, #222222 0%, #000000 100%);
    padding: 10px 10px;
    color: #fff;
}

#horizontal-scrolling-msg {
}

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

#horizontal-scrolling-msg li {
    list-style-type: none;
}
/*--- home highlight video ---*
.video-container {
    background-color: #000;
}

    .video-container .html5gallery-container-0 {
        width: 100% !important;
        height: 432px !important;
    }

    .video-container .html5gallery-box-0 {
        left: 0 !important;
        top: 0 !important;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100% !important;
        height: 100% !important;
    }

    .video-container .html5gallery-elem-0 {
        background: #000;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .video-container iframe {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    .video-container #html5gallery-elem-video-0 {
        top: 0 !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100% !important;
        height: 100% !important;
    }

@media screen and (max-width:767px) {
    .video-container {
        padding: 10px;
    }
}
*/
/*--- home highlight video ---*/
.home-promo {
    padding-top: 25px;
    padding-bottom: 20px;
}

.video-container {
    background-color: #000;
}
.video-container .html5gallery-container-0,
.video-container .html5gallery-container-1 {
    width: 100% !important;
    height: auto !important;
}
.video-container .html5gallery-elem-0,
.video-container .html5gallery-elem-1 {
    border: 0 !important;
    box-shadow: none !important;
}
.video-container .html5gallery-car-1 {
    display: none !important;
}
.video-container iframe {
    height: 100%;
}

@media screen and (max-width: 767px) {
    .video-container {
        padding: 10px;
    }
}

@media screen and (max-width: 600px) {
    .video-container {
        padding: 0px;
    }
}

@media (max-width: 1023px) {
    .hpromo-right {
        /* display: block !important; */
    }
    .video-container {
        max-width: 480px;
        margin: auto;
        padding-top: 20px;
        max-height: 290px;
        width: 100%;
        height: 100%;
    }
}

@media (min-width: 1024px) {
    .video-container .html5gallery {
        height: auto !important;
    }
    .home-promo {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/******/
.jackpot {
    text-align: center;
}

.jackpothead {
    font-weight: bold;
    color: #444;
    background: #111;
    background: linear-gradient(to bottom, #111 0%, #666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 5rem;
    font-family: Bebas;
    margin-bottom: 5px;
    margin-top: 20px;
}

.count-jackpot {
    text-align: center;
    background-size: 100% 100%;
    padding: 30px 20px 40px;
    color: #fdda96;
    font-weight: bold;
    background-repeat: no-repeat;
}

.count {
    font-size: 2em;
}

.count #foo {
    font-size: 2em;
}

.jackpotfoot {
    background: linear-gradient(to bottom, #545454, #111);
    padding: 10px 40px;
    display: table;
    margin: auto;
    margin-top: -20px;
    border-radius: 10px 10px 30px 30px;
    color: #fdda96;
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.steps {
    margin-top: 20px;
}

.steps ul {
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.steps li {
    list-style-type: none;
    flex: 1;
    text-align: center;
}

.steps li.steps-next img {
    width: 20px;
}

.steps li p {
    font-size: 12px;
    color: #888;
}

.steps li img {
    width: 50px;
}

.steps li h4 {
    margin: 0;
    margin-top: 10px;
    font-size: 16px;
}

@media screen and (min-width: 1024px) {
    .hometops-wrapper {
        display: flex;
        justify-content: center; /* align-items: center; */
    }

    .hometops-wrapper > div:first-child {
        /*margin-right: 10px;*/
    }

    .hometops-wrapper > div:last-child {
        margin-left: 10px;
    }

    .hometops-wrapper > div {
        flex: 1;
        max-width: 95%;
    }
}

@media screen and (max-width: 1023px) {
    .hometops-left {
        padding: 15px;
    }
}

@media screen and (max-width: 767px) {
    .count {
        font-size: 1em;
    }

    .steps li p {
        font-size: 8px;
    }

    .steps li h4 {
        font-size: 10px;
    }

    .jackpotfoot {
        font-size: 0.6em;
    }
}

/*--- HOME TOP Games ---*/
.hometops-games {
}

.topsgames-filter-container {
    position: relative;
    display: flex;
    background: linear-gradient(180deg, #222222 0%, #000000 100%);
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%);
    border-bottom: 1px solid #373d4a;
}

.topsgames-filter {
    flex: 12;
}

.gl-next,
.gl-prev {
    background-size: 12px auto;
    width: 40px;
    position: static;
    margin-top: 15px;
    flex: 1;
}

.gl-next {
}

.gl-next {
}

.btn-gl {
    padding: 15px 20px;
    border-bottom: 1px solid transparent;
    background-color: transparent;
}

.btn-gl:hover {
}

.btn-gl:active {
}

.btn-gl.active {
}

.gl-item .game-title {
    margin-top: 10px;
    margin-bottom: 0;
    font-weight: normal;
    font-size: 0.8em;
    min-height: 25px;
}

.topsgames-wrapper {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (min-width: 1024px) {
    .hometops-games {
        display: flex;
        flex-direction: column;
    }

    .tops-container {
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.2);
        background: #222;
        border-radius: 10px;
        padding: 10px 0 0 0;
        box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
    }

    .topsgames-filter {
    }

    .btn-gl {
        color: #888;
    }

    .btn-gl:hover {
        color: #eee;
    }

    .btn-gl:active {
        color: #aaa;
    }

    .btn-gl.active {
        color: #ffbd42;
        border-color: #ffbd42;
    }

    .topsgames-box {
        overflow-y: auto;
        height: 550px;
        border-top: 2px solid rgba(255, 255, 255, 0.1);
    }

    .gl-item {
        flex: 1 calc(12.5% - 10px);
        max-width: calc(12.5% - 10px);
        margin: 5px;
    }

    .gl-item .game-item {
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
    }

    .gl-item .game-item-hover {
        position: static;
        opacity: 1;
        visibility: visible;
        background: transparent;
    }

    .gl-item .game-item .i-fav {
    }

    .gl-item .btn-pn {
        position: absolute;
        top: 40%;
        margin: auto;
        transform: none !important;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .gl-item:hover .btn-pn {
        opacity: 1;
    }

    .gl-item .game-item img {
        transition: filter 0.2s ease-in-out; /*aspect-ratio: 133 / 191;*/
        height: 13.28vw;
    }

    .gl-item .game-item:hover img {
        opacity: 0.6;
    }
}

@media screen and (max-width: 1023px) {
    .topsgames-box::-webkit-scrollbar {
        width: 0px; /*height: 0px;*/
    }

    .topsgames-filter-container {
        padding: 0 10px;
        border-bottom: 1px solid #aaa;
    }

    .gl-next,
    .gl-prev {
        filter: invert(1);
    }

    .btn-gl {
        padding: 7px 10px;
        background: transparent;
        color: #aaa;
        font-size: 0.8em;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .btn-gl:hover {
        box-shadow: rgba(0, 0, 0, 0.1);
    }

    .btn-gl:active {
        box-shadow: rgba(0, 0, 0, 0.2);
    }

    .btn-gl.active {
        background: #222;
        color: #fff;
    }

    .topsgames-box {
        overflow-x: auto;
    }

    .topsgames-wrapper {
        flex-direction: column;
    }

    .game-item {
    }

    .gl-item {
        margin: 0 5px;
        margin-right: 20px;
        width: 80%;
    }

    .gl-item .game-item {
        padding: 5px;
        border-bottom: 1px dashed #ccc;
    }

    .gl-item .game-item img {
    }

    .gl-item .game-item-hover {
        position: static;
        opacity: 1;
        visibility: visible;
        background: transparent;
    }

    .gl-item .game-item-hover h3 {
        color: #000;
        text-align: left;
    }

    .gl-item .game-item .i-fav {
        opacity: 1;
    }

    .gl-item .btn-pn {
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .gl-item {
        width: 40%;
    }
}

@media (max-width: 480px) {
    .game-item img {
        height: 40.4vw; /*aspect-ratio: 30 / 43;*/
    }
}

/*--- HOME TOP Games ---*/
.homecat-container {
    width: 100%;
}

.homecat-swiper ul {
    margin: 0;
}

.homecat-swiper li {
    list-style-type: none;
    padding: 0;
}

.cat-box {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 20px;
    border: 1px solid #888;
    border-radius: 20px;
    display: block;
}

.catbox-detail {
    width: 60%;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    padding-left: 15px;
}

.catbox-detail h4 {
    color: #fff;
}

.catbox-detail p {
    font-size: 12px;
}

.catbox-img {
    margin-top: -20px;
    text-align: right;
}

.catbox-img img {
    width: 60%;
}

@media screen and (max-width: 1023px) {
    .homecat-container {
        padding-left: 10px;
    }
}

/*--- Home HOT Games ---*/
.games-container .swiper-slide {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color: #fff;
    border-radius: 10px;
}
/*.games-container .swiper-slide img { width: 100%;  }*/
.games-container .swiper-slide:hover img {
}

.games-container .swiper-slide p {
    margin-bottom: 20px;
    color: #000;
    font-size: 14px;
}

.game-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.6);
    text-align: center;
}

.game-item img {
    transition: filter 0.2s ease-in-out;
    width: 100%;
}

.game-item:hover img {
    filter: blur(2px);
}

.game-title {
    color: #fff;
    font-size: 1em;
    text-align: center;
}

.game-item:hover {
}

.game-item-hover {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    transition: 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.game-item:hover .game-item-hover {
    opacity: 1;
    visibility: visible;
}

.i-fav {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    background-image: url("/data/2076/uploads/icn-unstar.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
    z-index: 3;
    opacity: 0;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

.game-item:hover .i-fav {
    opacity: 1;
}

.i-fav:hover {
    transform: scale(1.2);
}

.i-fav:active {
    transform: scale(1);
}

.i-fav.active {
    background-image: url("/data/2076/uploads/icn-starred.png");
    opacity: 1;
}

.btn-pn {
    position: relative;
    display: block;
    margin: 20px auto 0;
    font-size: 0.8em;
    color: #000;
    background: linear-gradient(180deg, #f1b521 0%, #b86e16 100%);
    border-radius: 5px;
    padding: 10px;
    transition: transform 0.2s ease-in-out;
    transform: translateY(-20px);
    z-index: 4;
}

.btn-pn:after {
    content: attr(data-content);
    pointer-events: none;
}

.game-item:hover .game-item-hover .btn-pn {
    transform: translateY(0);
}

#fav-body {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

#fav-body .game-item {
    flex: 1 1 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
    margin: 5px;
}

.titlebox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 10px 0;
}

.titlebox h3 {
    font-size: 16px;
    margin: 0;
}
.titlebox h4 {
    font-size: 16px;
    margin: 0;
}

.titlebox a {
    padding: 6px 10px;
    color: #222;
    display: block;
    border-radius: 6px;
    position: relative;
    z-index: 9;
}

.titlebox a:hover {
    background: #ffbd42;
}

@media screen and (max-width: 1023px) {
    .games-wrapper {
        padding: 0 10px;
    }

    .game-item {
        display: flex;
        border: 0;
        padding: 5px;
        border-radius: 0;
    }

    .home-games .game-item-hover h3 {
        color: #000;
        text-align: left;
    }

    .game-item-hover h3 {
        margin: 0;
    }

    .game-item-hover {
        position: static;
        opacity: 1;
        visibility: visible;
        background: transparent;
        justify-content: space-evenly;
        align-items: initial;
        width: 100%;
    }

    .game-item img {
        width: 40%;
        filter: none !important;
        border-radius: 10px;
        margin-right: 10px;
    }

    .btn-pn {
        margin-left: 0;
    }

    .i-fav {
        left: auto;
        right: 5px;
        top: 5px;
        opacity: 1;
    }

    .games-container .swiper-slide .game-item {
        background: #fff;
        border-radius: 10px;
    }

    #fav-body .game-item {
        flex: auto;
        max-width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0 0 10px;
    }

    #fav-body .game-item img {
        width: 30%;
    }

    #fav-body .game-item-hover h3 {
        text-align: left;
    }

    .btn-pn {
        transform: none;
        width: auto;
    }
}

@media screen and (max-width: 599px) {
    .hpromo-pagination {
        bottom: -10px;
    }

    .games-container .swiper-slide p {
        font-size: 10px;
    }
}

/*--- Home promo ---*/
#faq_modal {
    margin: 0;
}

#faq_modal li {
    list-style-type: none;
}

#faq_modal li .promot img {
    width: 100%;
}

.home-promo {
    margin-bottom: 20px;
}

.home-promo ol#faq_modal {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
}

.hpromo-left #faq_modal li {
    padding: 0px;
    border: 0 !important;
    max-width: 100%;
    flex: none;
}

.hpromo-left .promot {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.hpromo-left .promot > a {
    max-width: 100%;
}

.hpromo-left .promo-i {
    max-width: 100%;
}

.hpromo-left .promo-i div {
    display: none;
}

.hpromo-left .promo-d {
    display: none !important;
}

.hpromo-left .divdate {
    display: none !important;
}

.hpromo-left .filterDiv {
    display: block;
}

.hpromo-right {
    position: relative;
    margin-left: 10px; /*border-radius: 10px; */ /*box-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;*/
}

.hpromo-tag {
    position: absolute;
    top: -9px;
    right: 15px;
}

.hpromo-img {
    display: flex;
    border-radius: 20px;
    background-size: cover;
}

.hpromo-img img {
    margin-top: -25px;
    width: 100%;
}

.hpromo-container {
}

.hpromo-left {
    position: relative;
}

.hpromo-pagination {
    bottom: -5px;
    right: 10px;
    position: absolute;
    z-index: 9;
}

.hpromo-pagination .swiper-pagination-bullet {
    border: 1px solid #b1b1b1;
    margin: 1px;
    background: #b1b1b1;
    opacity: 1;
}

.hpromo-pagination .swiper-pagination-bullet-active {
    background: #000 !important;
    border-color: #000 !important;
}

.hpromo-container #cms5faq_modal_template_list {
    height: 28.9vw;
}
.hpromo-container #faq_modal li .promot img {
    border-radius: 20px;
    border: 1px solid #f0b90b;
    height: 28.9vw; /*aspect-ratio: 452 / 137;*/
    border-radius: 8px;
}

@media screen and (min-width: 1024px) {
    .hpromo-container {
        display: flex;
    }

    .hpromo-left {
        width: 60%;
    }

    .hpromo-right {
        width: 40%;
    }

    .hpromo-container #cms5faq_modal_template_list {
        height: 18.18vw;
    }
    .hpromo-container #faq_modal li .promot img {
        height: 18.18vw; /*aspect-ratio: 431 / 130;*/
    }
}

@media screen and (max-width: 1299px) and (min-width: 1024px) {
    .hpromo-img img {
        margin-top: -15px;
    }
}

@media screen and (max-width: 1023px) {
    .hpromo-container .titlebox {
        padding-top: 20px;
    }

    .hpromo-right {
        /*display: none !important; */
    }

    .hpromo-left {
        padding-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100vw;
        overflow: hidden;
    }

    #faq_modal li .promot img {
        border-radius: 8px;
    }

    .hpromo-pagination {
        bottom: 20px;
    }
    .hpromo-pagination .swiper-pagination-bullet {
        background: #bdbdbd;
        border-color: #bdbdbd;
    }
}

@media (max-width: 600px) {
}

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

#faq_modal li {
    padding: 20px 0;
}

#faq_modal li:not(:first-child) {
    border-top: 1px solid #ccc;
}

.promo-d {
    font-size: 16px;
    padding: 10px 20px;
}

.promo-d h3 {
    display: flex;
    color: #fbbd36;
    white-space: nowrap;
    font-size: 1em;
    text-align: center;
}

.promo-d h3:before,
.promo-d h3:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #fbbd36;
    margin: auto 0;
}

.promo-d h3:before {
    margin-right: 20px;
}

.promo-d h3:after {
    margin-left: 20px;
}

.promo-d h2 {
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    color: #000;
}

.promo-d p {
    text-align: center;
    font-size: 0.9em;
    color: #888;
}
.promo-b {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.promo-d .btn-claim {
    font-size: 1em;
    border-radius: 6px;
    background: #fbbd36;
    padding: 0.7em 2em;
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-right: 5px;
}
.promo-d .btn-claim:hover {
    box-shadow: 0px 0px 15px #ffbd42;
}
.promo-d .btn-claim:active {
    box-shadow: 0px 0px 15px #a8781e;
    background: #a8781e;
}
.promo-d .promo-b .btn-claim {
    margin-top: 0 !important;
}

.promo-d .btn-more {
    font-size: 1em;
    border-radius: 6px;
    background: #970000;
    padding: 0.7em 2em;
    cursor: pointer;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-left: 5px;
}
.promo-d .btn-more:hover {
    box-shadow: 0px 0px 15px #6f0000;
}
.promo-d .btn-more:active {
    box-shadow: 0px 0px 15px #661710;
    background: #6f0000;
}

.dateCountdown {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

.promot.expired .promo-d .btn-claim {
    background: #444;
    color: #fff;
    cursor: no-drop;
}

.promot.expired .promo-d .btn-claim:hover {
    box-shadow: none;
}

.promo-i img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #f0b90b;
}

@media screen and (min-width: 1024px) {
    .promot {
        display: flex;
        align-items: stretch;
    }

    .promot > a {
        flex: 1;
        max-width: 70%;
    }

    .promo-i {
    }

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

    .promo-d {
        flex: 1;
        max-width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

@media screen and (max-width: 1023px) {
    .promo-i {
        padding-left: 10px;
        padding-right: 10px;
    }

    .promo-d {
        font-size: 12px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .promo-d h3 {
        margin-top: 5px;
    }

    .promo-d h2 {
        margin-top: 10px;
    }

    .promo-d .btn-claim {
        margin-top: 2em;
    }
}

.fancybox-inner p.question + h4 {
    display: flex;
}

.fancybox-inner .promot {
    margin-left: auto;
    margin-right: auto;
    box-shadow: none;
}

@media (max-width: 767px) {
    .promo-d h3:before,
    .promo-d h3:after {
        flex-basis: 20%;
    }
    .promo-d h3 {
        white-space: normal;
    }
}

/*** new promotions style */
ol#faq_modal {
    padding: 0 0 20px 0;
}

#faq_modal li {
    padding: 10px 10px;
}

.promot {
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
    background: #fff;
}

#faq_modal li:not(:first-child) {
    border-top: 0;
}

.promo-i {
    padding: 0;
}

@media screen and (min-width: 1024px) {
    ol#faq_modal {
        display: flex;
        flex-wrap: wrap;
    }

    #faq_modal li {
        max-width: 50%;
        flex: 1 50%;
    }

    .promot {
        /* display: block; */
    }

    .promo-d {
        max-width: 100%;
    }

    .promot {
        height: 100%;
        flex-direction: column;
    }

    #faq_modal li:not(:first-child) {
        border: 0;
    }

    .promot > a {
        max-width: 100%;
        margin-bottom: 0;
    }

    .promo-d .btn-claim {
        margin-bottom: 0;
        margin-top: auto;
    }
}

/**************************************************************************************************************************** Download */
.hd-wrapper {
    display: flex;
}

.hd-boxed.hdownload-container {
    flex: 2;
}

.hd-boxed.di-ad {
    flex: 1;
}

.download-title {
    padding: 0 15px;
}

.download-title .titlebox {
    margin: 0;
}

.download-title .app-logo {
}

.download-title .app-logo img {
    max-width: 70px;
    width: 100%;
    margin-left: 10px;
}

.download-main {
    padding-bottom: 30px;
}

.download-main p {
    margin-left: 15px;
    margin-top: 25px;
    color: #666;
}

.download-list {
    margin-top: 20px;
    margin-left: 5px;
}

.download-list ul {
    margin: 0;
    display: flex;
}

.li-app {
    position: relative;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.li-app .img-qr {
    border: 1px solid #666;
    width: 150px;
    height: 150px;
}

.btn-app {
    border-radius: 6px;
    background: #aaa;
    color: #fff;
    display: block;
    padding: 5px 10px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-app:hover {
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
}

.btn-app.app-ios {
    background: linear-gradient(to bottom, #a6a6a6, #666);
}

.btn-app.app-android {
    background: linear-gradient(to bottom, #9dce59, #59b23e);
}

.btn-app img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.btn-download {
    font-size: 12px;
    text-decoration: underline;
}

@media screen and (min-width: 1024px) {
    .hd-boxed.hdownload-container {
        flex: 2;
    }

    .hd-boxed.di-ad {
        flex: 2;
    }

    .dad-left img {
        padding-top: 200px;
        padding-bottom: 20px;
        width: 300px;
        height: 677px; /*aspect-ratio: 250 / 381;*/
    }
}

@media screen and (max-width: 600px) {
    .hd-wrapper {
        flex-direction: column;
    }

    .download-title .titlebox h2 {
        font-size: 1em;
    }

    .download-title .app-logo img {
        max-width: 50px;
    }

    .li-app .img-qr {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .hd-wrapper {
        align-items: center;
    }

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

@media (max-width: 600px) {
    .dad-left {
        max-width: 250px;
        padding-top: 10px;
        padding-bottom: 40px;
    }
    .dad-left img {
        max-height: 381px;
        height: 381px;
    }
}

.dad-wrapper {
    display: flex;
}

.dad-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dad-right ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.dad-right li {
    list-style-type: none;
    padding: 7px;
}

.dad-right li:nth-child(1),
.dad-right li:nth-child(3) {
    transform: translateY(3%);
}

.dad-right li:nth-child(2),
.dad-right li:nth-child(4) {
    transform: translateY(25%);
}

.dad-ad {
    border-radius: 12px;
    overflow: hidden;
    width: 150px;
    height: 215px;
    transition: 0.2s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0);
}

.dad-ad:hover {
    transform: translateY(-10px);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.dad-ad img {
    width: 100%;
    height: 154px;
    width: 150px;
}

.dad-ad h4 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: -25px;
    padding-left: 10px;
    padding-right: 10px;
}

.dad-ad p {
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 25px;
    margin: 0;
}

.modal-instruction {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s ease-in-out;
    transform: translateY(-25px);
}

.modal-instruction.in {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.modal-instruction .modal-dialog {
    background: #fff;
    border-radius: 20px;
}

.modal-instruction button.close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
}

.modal-instruction ul {
    margin: 0;
}

.modal-instruction li {
    padding: 0;
    list-style-type: none;
    padding: 15px;
}

.instruction-head {
    padding-left: 15px;
    max-width: 400px;
}

.instruction-box {
}

.isntruction-img {
}

.instruction-steps {
}

.instruction-steps p {
    margin-top: 10px;
}

.instruction-prev,
.instruction-next {
    background-color: rgba(0, 0, 0, 0.6);
    width: 30px;
    height: 30px;
    background-size: auto 60%;
    border-radius: 50px;
}

.instruction-prev {
}

.instruction-next {
}

.mobileview {
    display: none !important;
}

@media (max-width: 1200px) {
    .dad-right {
        display: none !important;
    }
}

/**************************************************************************************************************************** HIGHLIGHT */

.w1400 {
    max-width: 1400px;
    margin: auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.title-box {
    margin-top: 15px;
}
#titleMain {
    font-size: 32px;
    color: #7b0b07;
    outline: 0;
    border: 0;
    cursor: pointer;
    padding-right: 15px;
    font-weight: bold;
    background-color: #fff;
}
#titleMain option {
    font-size: 13px;
    color: #000;
    cursor: pointer;
}

.news-box {
    display: none;
}
.news-box.active {
    display: block;
}

.close-box {
    position: relative;
    z-index: 2;
}
.closeHighlight {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
button.xclose {
    float: none;
    margin-left: auto;
    margin-right: 0;
    opacity: 0;
    visibility: hidden;
    padding: 10px 10px;
    position: absolute;
    right: 25px;
    top: 25px;
    opacity: 0.5;
}
button.closeHighlight.show:hover {
    opacity: 1;
}
button.closeHighlight.show {
    opacity: 0.5;
    visibility: visible;
    transition: 0.5s;
}

.highlight-container-box.active > div.waist {
    display: block;
}
.waist {
    display: none;
}
.waist {
    min-width: 100px;
}
.wwraper {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.wwraper > div {
    flex: 0 0 auto;
    position: relative;
}
.wwraper > div > div {
    transform: rotate(270deg) translateX(-35%);
    white-space: nowrap;
}
.wwraper > div.wbutton {
    position: static;
}
.wclose {
    padding-bottom: 15px;
}
.wclose:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.wtitle {
    height: 70%;
    opacity: 0;
    transition: 0.5s;
}
.waist .title {
    font-size: 32px;
    letter-spacing: 5px;
    color: #aaa;
    text-transform: uppercase;
}
.wstitle {
    height: 20%;
}
.waist .stitle {
    font-size: 16px;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.highlight-container-box {
    max-width: 1920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.highlight-container-box.active .waist .wtitle {
    opacity: 1;
    transition-delay: 0.5s;
}

.container-box {
    position: relative;
    padding-bottom: 25px;
    padding-top: 25px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.container-box.active {
    max-width: 1920px;
}
.container-box .swiper-button {
}

.swiper-button {
    max-width: calc(1400px - 100px - 15px);
    margin: auto;
    width: 100%;
    padding-right: 15px;
    position: relative;
    margin-top: 60px;
}
.sb-wrapper {
    position: absolute;
    top: -50px;
    right: 0;
}
.swiper-button .swiper-button-prev,
.swiper-button .swiper-button-next {
    position: relative;
    background-image: none;
    width: auto;
    height: auto;
    left: auto;
    right: auto;
    margin: auto;
    top: auto;
    bottom: auto;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 6px;
}
.swiper-button .swiper-button-prev {
}
.swiper-button .swiper-button-next {
}
.swiper-button .swiper-button-prev:hover,
.swiper-button .swiper-button-next:hover {
    background-color: #eee;
}

.highlight-container .highlight-wrapper {
    align-items: flex-end;
}
.highlight-container.active .highlight-wrapper {
    align-items: flex-start;
}

.highlight-container .swiper-slide {
    cursor: pointer;
}
.post {
    display: block;
    position: relative;
}
.post:after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, #efefef, #ddd);
    z-index: -1;
    transition: 0.2s;
    border-radius: 50px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.post .img {
    transform-origin: center bottom;
    transition: 0.2s;
    pointer-events: none;
    transition-timing-function: ease-in-out;
}
.post .img img {
}
.post img {
    width: 100%;
    transition: 0.2s ease-in-out;
}
.post .detail {
    padding-bottom: 15px;
    padding-left: 25px;
    padding-right: 25px;
}
.post .description {
    display: none;
}
.post .description .imgs {
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: 0;
}
.post .description .imgs img {
    margin-right: 10px;
    width: calc(33.33% - 10px);
    float: left;
    margin-bottom: 10px;
    margin-top: 0;
}
.post .description img {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    cursor: pointer;
}

.highlight-container .swiper-slide.swiper-slide-active:last-child:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateX(100%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    pointer-events: none;
}

.highlight-container.active .swiper-slide {
    overflow: hidden;
}
.highlight-container.active .swiper-slide-active {
    height: 100%;
}
.highlight-container.active .swiper-slide-active {
    cursor: auto;
    display: block;
}
.highlight-container.active .swiper-slide-active .post {
}
.highlight-container.active .swiper-slide-active .post:after {
    top: 100px;
}

.highlight-container.active .swiper-slide .post .description {
    display: none;
}
.highlight-container.active .swiper-slide-active .post .description {
    display: block;
}

.highlight-container.active .swiper-slide-active .post .detail {
}
.highlight-container.active .swiper-slide .post {
    margin-right: 0;
    width: 100%;
}
.highlight-container.active .swiper-slide .post:after {
    border-radius: 0;
    transition: border-radius 0.5s;
}
.highlight-container.active .swiper-slide .post .img {
    /*opacity: 0;*/
}
.highlight-container.active .swiper-slide-active .post .img {
    opacity: 1;
    padding-left: 25px;
    padding-top: 25px;
    padding-top: 0;
}
.highlight-container.active .post .img img {
    width: auto;
    max-width: 100%;
}

[data-news] {
    display: none;
}
[data-news].active {
    display: block;
}

@media screen and (min-width: 1024px) {
    .highlight-container.active .highlight-wrapper {
        align-items: stretch;
    }
    .highlight-container .swiper-slide:hover .post .img {
        transform: translateY(-15px);
    }

    .highlight-container .swiper-slide-prev .post .img {
        width: 100%;
        transition-delay: 0.1s;
    }
    .highlight-container .swiper-slide-prev .post:after {
        top: 20%;
    }
    .highlight-container .swiper-slide-next .post .img {
        width: 100%;
        transition-delay: 0.2s;
    }
    .highlight-container .swiper-slide-next .post:after {
        top: 20%;
    }
    .highlight-container .swiper-slide-active .post .img {
        width: 100%;
    }
    .highlight-container .swiper-slide-active .post:after {
        top: 15%;
    }
}

@media screen and (min-width: 768px) {
    .wwraper {
        padding-top: 100px;
    }

    .highlight-container-box.active .sb-wrapper {
        right: 60px;
    }

    .highlight-container-box.active {
        display: flex;
    }
    .highlight-container-box > div {
    }

    .post .img {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .highlight-container.active .highlight-wrapper {
    }

    .container-box.active {
        padding-bottom: 0;
    }
    .container-box.active .swiper-button {
    }

    .highlight-container.active {
        width: calc(100vw - 80px);
    }
    .highlight-container.active .swiper-slide {
        width: calc(100vw - 80px) !important;
    }

    .highlight-container.active .swiper-slide-active {
        height: 100%;
    }
    .highlight-container.active .swiper-slide .post {
        display: flex;
        width: 100%;
    }
    .highlight-container.active .swiper-slide .post:after {
        top: 60px;
    }
    .highlight-container.active .swiper-slide-active .post:after {
        border-top-left-radius: 200px;
        opacity: 1;
    }
    .highlight-container.active .swiper-slide .post .img {
        transform: scale(1);
        max-width: 40%;
    }
    .highlight-container.active .swiper-slide .post .detail {
        margin-top: 50px;
        padding-top: 35px;
        padding-right: 50px;
        max-width: 60%;
    }
}

@media screen and (min-width: 1200px) {
    .waist {
        min-width: 120px;
    }
    .highlight-container.active {
        width: calc(100vw - 120px - 17px);
    }
    .highlight-container.active .swiper-slide {
        width: calc(100vw - 120px - 17px) !important;
    }
}

@media screen and (min-width: 1900px) {
    .highlight-container .highlight-wrapper {
        /*min-height: 480px;*/
    }
}

@media screen and (max-width: 1900px) and (min-width: 1200px) {
    .highlight-container-box {
        min-height: 35vw;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    .waist {
        max-width: 80px;
        min-width: 80px;
    }
    .waist .title {
        font-size: 20px;
    }

    .highlight-container.active {
        width: calc(100vw - 80px);
    }
    .highlight-container.active .swiper-slide .post:after {
        border-top-left-radius: 25px;
    }
    .highlight-container.active .swiper-slide .post {
        display: block;
        min-width: calc(100vw - 80px);
    }
    .highlight-container.active .swiper-slide .post .detail {
        margin-top: 0;
        padding-top: 0;
        max-width: 100%;
        padding-right: 25px;
    }
    .post .img {
        width: 80%;
    }
    .post .description .imgs img {
        height: auto;
        width: calc(33.33% - 10px);
    }
    .post .detail .title h2 {
        font-size: 24px;
    }
    .post .detail .title {
        font-size: 12px;
    }
    .post:after {
        border-radius: 20px;
    }
}

@media screen and (max-width: 1023px) {
    .post {
        padding-top: 15px;
    }
}

@media screen and (max-width: 767px) {
    .highlight-container-box {
        padding-bottom: 50px;
    }
    button.xclose {
        position: absolute;
        right: 0;
        top: -50px;
    }

    .highlight-container-box.active {
        display: flex;
    }
    .wwraper > div > div {
    }
    .waist {
        max-width: 25px;
        min-width: 25px;
    }
    .waist .title {
        font-size: 12px;
        transform: rotate(270deg) translateX(-90%);
        letter-spacing: 2px;
    }
    .waist .stitle {
        font-size: 10px;
    }
    .wclose img {
        width: 20px;
    }

    .news-box {
        position: relative;
    }
    .swiper-button {
        max-width: 100vw;
        position: absolute;
        bottom: -45px;
        left: 0;
    }
    .sb-wrapper {
        position: static;
        float: right;
        margin-right: 15px;
    }

    .container-box {
        padding-top: 15px;
        padding-bottom: 0;
    }
    .post {
        padding-top: 0;
    }
    .highlight-container.active .swiper-slide {
        overflow: visible;
    }
    .highlight-container.active {
        width: calc(100vw - 25px);
    }
    .highlight-container.active .swiper-slide {
        width: calc(100vw - 25px) !important;
    }
    .highlight-container.active .swiper-slide-active .post {
    }
    .highlight-container.active .swiper-slide .post:after {
        border-top-left-radius: 10px;
    }
    .highlight-container.active .swiper-slide-active .post .img {
        padding-right: 20px;
        padding-left: 20px;
    }
    .highlight-container.active .swiper-slide .post .detail {
        margin-top: 0;
        padding-top: 0;
        max-width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
    .post .description .imgs img {
        height: auto;
        width: calc(33.33% - 10px);
    }
    .post .detail .title h2 {
        font-size: 24px;
    }
    .post .detail .title {
        font-size: 12px;
    }
    .post .detail {
        font-size: 12px;
        text-align: justify;
    }
    .post:after {
        border-radius: 20px;
    }
    .post .description .imgs {
        margin-bottom: 5px;
    }
    .post .description .imgs img {
        margin-right: 5px;
        width: calc(33.33% - 5px);
    }
}
/* ----------- YOUTUBE LIST ----------- */

.btn-vf {
    color: #888;
    background-color: #eee;
    border: 0;
    padding: 15px 15px;
    display: block;
    width: 100%;
    margin: 5px 0;
    text-align: left;
    font-weight: bold;
}
.btn-vf.active {
    color: #222;
    background-color: #dbba9c;
}

.vf-list ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.vf-list ul > li {
    list-style-type: none;
    border: 0;
}
.vf-list h3 {
    font-size: 15px;
}
.vf-list iframe {
    width: 100% !important;
    height: 300px !important;
}

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

@media screen and (min-width: 1200px) {
    .vf-list ul {
        padding: 0 5px;
    }
    .vf-list ul > li {
        flex: 1 1 33.33%;
        margin: 10px 0;
        padding: 0 5px;
        max-width: 33.33%;
    }
}

@media screen and (max-width: 1199px) and (min-width: 600px) {
    .vf-list ul {
        padding: 0 5px;
    }
    .vf-list ul > li {
        flex: 1 1 50%;
        margin: 10px 0;
        padding: 0 5px;
        max-width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .vf-wrapper {
        display: flex;
    }
    .vf-tabs {
        flex: 2;
        padding-top: 5px;
    }
    .vf-list {
        flex: 10;
    }
}

@media screen and (max-width: 767px) {
    .vf-tabs {
        background-color: #fff;
        display: flex;
        border-bottom: 1px solid #aaa;
    }
    .btn-vf {
        margin: 0;
        flex: 1;
        text-align: center;
        background: #fff;
        border-bottom: 5px solid #fff;
    }
    .btn-vf.active {
        border-color: #fcd14e;
        background-color: #fff;
    }
    .vf-list ul > li {
        width: 100%;
        padding-bottom: 25px;
    }
}

.css-yandx8 {
    background-image: url(/data/1806/uploads/wechat_20221130175012.jpg) !important;
}

@media (max-width: 600px) {
    .video-container {
        height: 53.6vw;
    }
}
/* ----------- POPUP IMAGE ----------- */
#popup-image {
    display: block;
}
#popup-image.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
}
#popup-image .modal-content {
    max-width: 800px;
    margin: 25px auto;
    display: block;
    width: 85%;
}
#popup-image .close {
    float: none;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 40px;
    color: #fff;
    opacity: 1;
    z-index: 9;
}
#popup-image .close:hover {
    color: #bbb;
}
#popup-image .close:focus,
#popup-image .close:active {
    color: #666;
}

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

@media screen and (min-width: 1024px) {
    .instruction-head {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 2;
    }

    .instruction-box {
        display: flex;
        align-items: center;
        padding-left: 50px;
        padding-right: 50px;
        justify-content: space-between;
    }

    .isntruction-img {
        order: 2;
        padding-top: 50px;
    }
}

@media screen and (max-width: 1023px) {
    .instruction-container {
        padding-bottom: 20px;
    }

    .instruction-head {
        padding-top: 15px;
    }

    .instruction-box {
        text-align: center;
    }

    .isntruction-img img {
        max-width: 350px;
        width: 100%;
        max-height: 430px;
        height: 100vw;
        width: 81.2vw;
    }

    .instruction-steps {
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 767px) {
    .instruction-head {
        font-size: 1.4em;
        padding-right: 50px;
    }
}

.video-container .html5gallery-elem-0 {
    border-radius: 10px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 50%);
    border-bottom: 1px solid #373d4a;
}

@media only screen and (max-width: 479px) {
    .topsgames-filter .swiper-slide {
        width: 33.333% !important;
    }
    .home-promo {
        padding-top: 0;
    }
    .hpromo-right {
        width: 95%;
    }
    .game-item-hover {
        display: none;
    }

    #btn-fav {
        display: none;
    }
    #btn-setting {
        display: none;
    }
    #cssmenu li:nth-child(10) {
        display: block;
    }
    #cssmenu li:nth-child(11) {
        display: block;
    }
    #cssmenu li:nth-child(12) {
        display: block;
    }
    #cssmenu li:nth-child(13) {
        display: block;
    }
    #cssmenu li:nth-child(14) {
        display: block;
    }
    #cssmenu li:nth-child(15) {
        display: block;
    }
    #cssmenu li:nth-child(16) {
        display: block;
    }
    .icnMenu1 {
        background-image: url(/data/2076/uploads/icn-mobile-05.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu2 {
        background-image: url(/data/2076/uploads/icn-mobile-06.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu3 {
        background-image: url(/data/2076/uploads/icn-mobile-07.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu4 {
        background-image: url(/data/2076/uploads/icn-mobile-03.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu5 {
        background-image: url(/data/2076/uploads/icn-mobile-02.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu6 {
        background-image: url(/data/2076/uploads/icn-mobile-01.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu7 {
        background-image: url(/data/2076/uploads/icn-mobile-04.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu8 {
        background-image: url(/data/2076/uploads/icn-mobile-08.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu9 {
        background-image: url(/data/2076/uploads/icn-mobile-11.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu10 {
        background-image: url(/data/2076/uploads/icn-mobile-10.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu11 {
        background-image: url(/data/2076/uploads/icn-mobile-12.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu12 {
        background-image: url(/data/2076/uploads/icn-mobile-13.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu13 {
        background-image: url(/data/2076/uploads/icn-mobile-14.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu14 {
        background-image: url(/data/2076/uploads/icn-mobile-15.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu15 {
        background-image: url(/data/2076/uploads/icn-mobile-16.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu16 {
        background-image: url(/data/2076/uploads/icn-mobile-15.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    .icnMenu17 {
        background-image: url(/data/2076/uploads/icn-mobile-16.png);
        background-size: 35px;
        float: none;
        margin: 0;
        padding: 0;
        background-position: center 0;
        line-height: 9;
        text-align: center;
        height: 54px;
        filter: brightness(1);
    }
    #noti-badgecount {
        display: none !important;
    }
    #fav-badgecount {
        display: none !important;
    }
    #totalCount {
        display: none !important;
    }
    .menulabel {
        position: absolute;
        margin-left: 46px !important;
        margin-top: -12px !important;
        display: block;
    }
    .topsgames-box {
        height: auto;
    }
    .hometops-left {
        padding-top: 0;
    }
    .desktopview {
        display: none;
    }

    .mobileview {
        display: block !important;
    }

    h3.title-page {
        margin-left: 0;
        text-align: center;
    }

    #provider-box > p {
        margin-left: 0;
        text-align: center;
    }

    .btn-menu {
        padding: 0 10px 0 0;
    }

    .download-title {
        text-align: center;
    }

    .download-title .titlebox {
        display: block;
    }

    #btn-settingsbox {
        padding: 5px 5px;
    }

    .download-main p {
        margin: 25px auto 0 auto;
        text-align: center;
    }

    .download-list ul {
        display: block;
    }

    .download-list ul li.li-app {
        display: block;
        flex-direction: unset;
        align-items: center;
        margin: 1%;
        width: 48%;
        float: left;
        text-align: center;
    }

    .widget-visible {
        display: none !important;
    }

    .html5gallery {
        /*height: 218px !important;*/
    }

    .html5gallery a img {
        width: 100%;
    }

    .video-container .html5gallery-container-0 {
        /*height: 210px !important; */
    }

    #cssmenu > ul > li > a {
        text-align: center;
    }

    #cssmenu > ul > li > a img:nth-child(2) {
        margin: 0 auto;
        width: 36px;
        margin-bottom: 0px;
        filter: none;
        opacity: 1;
    }

    #header-login {
        background: linear-gradient(180deg, #222222 0%, #000000 100%);
        text-transform: uppercase;
        text-decoration: none;
    }

    #cssmenu > ul > li.has-sub > a {
        padding-right: 0 !important;
    }

    .tops-container {
        margin: 5px;
        box-shadow: 0 0 16px rgba(132, 168, 243, 0.3);
        border-radius: 8px;
        border: rgba(0, 0, 0, 0.2) 1px solid;
    }

    .divHome-download {
        background: none;
        background-color: #f6f8fe;
    }

    .gl-item {
        margin-right: 0;
    }

    .gl-item .game-item {
        border: 1px dashed #cdcdcd;
    }

    .gl-item .btn-pn {
        box-shadow: 0 0.04rem 0.16rem rgba(121, 129, 164, 0.1);
        border: 1px solid #fff;
    }

    .topsgames-wrapper {
        height: 267px !important;
    }

    .header-logo:after {
        right: -20px;
        bottom: -6px;
    }

    img.logo {
        max-height: 40px;
    }

    .f-sm a {
        margin: 0 15px 0 2px;
    }

    .f-pm img {
        height: auto;
        width: 80%;
    }

    .footer-copyright {
        padding-bottom: 0;
    }

    .jackpothead {
        margin-top: 0px;
        font-size: 20px;
    }
    .count-jackpot {
        padding: 20px 10px 30px;
    }
    .btn-gl {
        padding: 7px 2px;
    }
}

.conhightlight iframe {
    height: 50vw;
    max-height: 620px;
}

@media (max-width: 1023px) {
    .conhightlight iframe {
        height: 65vw;
    }
}

#sys_msg {
    text-align: center;
    color: tomato;
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
    max-width: 450px;
    margin: auto;
}
#sys_msg img {
    display: block;
    margin: auto;
    max-width: 250px;
    width: 100%;
}
#sys_msg p {
    color: #000;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
}
#sys_msg a {
    font-size: 14px;
    color: #000;
    display: table;
    margin: 30px auto 10px;
}