/*#region Product Card*/
.product-area {
    position: relative;
    padding: 15px 0;
}

    .product-area:first-child {
        padding: 0;
        padding-top: 35px;
    }

    .product-area:nth-child(2n) {
        background-color: #f6f6f7;
    }

.product-anchor {
    position: absolute;
    bottom: 100%;
    margin-bottom: 70px;
}

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

.product-text {
    font-size: 32px;
    font-family: Varela;
    text-align: left;
    font-weight: bold;
}

.product-logo {
    min-height: 42px;
    width: 100px;
}

.product-logo-keno {
    width: 70px;
    background: url(../image/logo/logo_keno.png) no-repeat center;
    background-size: contain;
}

.product-logo-lottery {
    width: 120px;
    background: url(../image/logo/logo_lottery.png) no-repeat center;
    background-size: contain;
}

.product-logo-tablegame {
    width: 80px;
    background: url(../image/logo/logo_tablegame.png) no-repeat center;
    background-size: contain;
}

.product-logo-maxgame {
    width: 190px;
    background: url(../image/logo/logo_maxgame.png) no-repeat center;
    background-size: contain;
}

.product-glc-logo {
    height: 22px;
    width: 60px;
    background: url(../image/logo/logo-glc.png) no-repeat center;
    background-size: contain;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: 2px;
    cursor: pointer;
}

.productCard-all {
    position: relative;
    height: 550px;
    overflow: hidden;
}

.productCard-scroll-btn {
    position: absolute;
    width: 0;
    height: 80px;
    font-size: 80px;
    color: white;
    top: 0;
    bottom: 0;
    margin: auto;
    padding-bottom: 8px;
    background: black;
    cursor: pointer;
    opacity: 0.3;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: opacity, width;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.loaded .productCard-scroll-btn {
    width: 40px;
}

.productCard-scroll-btn-left {
    left: 0;
}

.productCard-scroll-btn-right {
    right: 0;
}

.productCard-scroller {
    position: absolute;
    margin-bottom: -20px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 10px;
}

.productCard-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: -6px -4px;
}

.productCard-area {
    position: relative;
    height: calc(50% - 15px);
    width: calc(100% / 3 - 8px);
    min-width: 280px;
    margin: 6px 4px;
    cursor: default;
}

#MaxGameWrapper > .productCard-area {
    width: calc(100% / 4 - 8px);
}

.productCard-flipper {
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.productCard-surface {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}

.productCard-front {
    background-color: black;
    color: white;
    /*text-shadow: -1px -1px 8px #000, 1px 1px 8px #000, 1px -1px 8px #000, -1px 1px 8px #000;*/
    z-index: 2;
    transform: rotateY(0deg);
    transition-property: opacity;
    transition-duration: 0s;
    transition-delay: 0.15s;
    transition-timing-function: ease;
    background-size: cover !important;
}

    .productCard-front:before {
        content: "";
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    .productCard-front ul {
        list-style: none;
    }

    .productCard-front li:before {
        content: '\2022';
        margin-right: 5px;
        text-shadow: -1px -1px 8px #000, 1px 1px 8px #000;
    }

.productCard-front-header {
    width: 75%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 2;
    letter-spacing: 0.5px;
}

.productCard-front-header-text {
    font-family: Varela;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}

.productCard-front-header-since {
    font-family: Varela;
    font-size: 13px;
}

.productCard-front-description {
    text-align: left;
    margin-top: 5%;
}

.productCard-front-description-text {
    font-size: 14px;
}

.productCard-back {
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.8);
    color: white;
    z-index: 1;
    justify-content: flex-start;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0s;
    transition-delay: 0.15s;
    transition-timing-function: ease;
    background-size: cover !important;
    z-index: 2;
}

    .productCard-back:before {
        content: "";
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

.productCard-surface-maxgame-200:before, .productCard-surface-maxgame-201:before, .productCard-surface-maxgame-202:before, .productCard-surface-maxgame-204:before, .productCard-surface-maxgame-205:before,
.productCard-surface-maxgame-21:before, .productCard-surface-maxgame-24:before, .productCard-surface-maxgame-7:before, .productCard-surface-maxgame-151:before, .productCard-surface-maxgame-152:before,
.productCard-surface-maxgame-153:before, .productCard-surface-maxgame-206:before, .productCard-surface-maxgame-207:before, .productCard-surface-maxgame-15:before, .productCard-surface-maxgame-26:before,
.productCard-surface-maxgame-210:before, .productCard-surface-maxgame-20:before, .productCard-surface-maxgame-27:before, .productCard-surface-maxgame-213:before {
    background: rgba(0, 0, 0, 0.6);
}

.productCard-back-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    transform: rotateY(-180deg);
    letter-spacing: 0.5px;
}

.productCard-back-header {
    position: relative;
    width: 100%;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.productCard-back-header-text {
    font-family: Varela;
    font-size: 26px;
    font-weight: 600;
    text-align: center;
}

.productCard-back-description-text {
    font-family: Varela;
}

.productCard-area-onHoverJS .productCard-flipper {
    transform: translateY(-9px) rotateY(180deg);
}

.productCard-area-onHoverJS .productCard-front {
    opacity: 0;
}

.productCard-area-onHoverJS .productCard-back {
    opacity: 10;
}

@media (hover: hover) {
    .productCard-area:hover .productCard-flipper {
        transform: translateY(-9px) rotateY(180deg);
    }

    .productCard-area:hover .productCard-front {
        opacity: 0;
    }

    .productCard-area:hover .productCard-back {
        opacity: 1;
    }

    .content:hover .productCard-scroll-btn {
        opacity: 0.7;
    }
}

.productCard-scroll-btn-hidden {
    opacity: 0 !important;
    cursor: default;
}

.productCard-back-description {
    width: 100%;
    padding: 0 40px;
    font-size: calc(11px + 0.1vw);
}

#MaxGameWrapper .productCard-back-description {
    padding: 0 20px;
}

.productCard-rtp-btn {
    position: absolute;
    width: 90px;
    height: 28px;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 5px;
    padding: 4px;
    font-size: 14px;
    color: white;
    background: rgba(136, 136, 136, 0.4);
    cursor: pointer;
}

@media screen and (min-width: 1920px) {
    .productCard-back-description {
        font-size: 13px;
    }
}

@media screen and (max-width: 1200px) {
    .productCard-area {
        width: calc(50% - 8px);
    }

    .productCard-back-description {
        font-size: calc(11px + 0.17vw);
    }
}

@media screen and (max-width: 768px) {
    .productCard-area,
    #MaxGameWrapper > .productCard-area {
        width: calc(100% - 8px);
    }

    .productCard-back-description {
        font-size: calc(11px + 0.2vw);
    }
}

@media screen and (max-width: 367px) {
    .productCard-back-description {
        font-size: calc(10px + 0.3vw);
    }
}
/*#endregion Product Card*/

/* #region Product Card Image */
.productCard-surface-keno-101 {
    background: url(../image/product/maxkeno2.jpg) no-repeat center;
}

.productCard-surface-keno-102 {
    background: url(../image/product/minikeno.jpg) no-repeat center;
}

.productCard-surface-keno-103 {
    background: url(../image/product/kenowar.jpg) no-repeat center;
}

.productCard-surface-keno-104 {
    background: url(../image/product/lucky28.jpg) no-repeat center;
}

.productCard-surface-keno-105 {
    background: url(../image/product/keno21.jpg) no-repeat center;
}

.productCard-surface-lottery-1 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-2 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-3 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-4 {
    background: url(../image/product/dice.jpg) no-repeat center;
}

.productCard-surface-lottery-5 {
    background: url(../image/product/racing.jpg) no-repeat center;
}

.productCard-surface-lottery-6 {
    background: url(../image/product/penalty.jpg) no-repeat center;
}

.productCard-surface-lottery-7 {
    background: url(../image/product/sedie.jpg) no-repeat center;
}

.productCard-surface-lottery-9 {
    background: url(../image/product/sedie.jpg) no-repeat center;
}

.productCard-surface-lottery-8 {
    background: url(../image/product/bull.jpg) no-repeat center;
}

.productCard-surface-lottery-25 {
    background: url(../image/product/max6.jpg) no-repeat center;
}

.productCard-surface-lottery-27 {
    background: url(../image/product/jhandimunda.png) no-repeat center;
}

.productCard-surface-lottery-28 {
    background: url(../image/product/ladder.jpg) no-repeat center;
}

.productCard-surface-lottery-204 {
    background: url(../image/product/fireball10.png) no-repeat center;
}

.productCard-surface-tgame-10 {
    background: url(../image/product/poker.jpg) no-repeat center;
}

.productCard-surface-tgame-11 {
    background: url(../image/product/w3c.jpg) no-repeat center;
}

.productCard-surface-tgame-12 {
    background: url(../image/product/dragontiger.jpg) no-repeat center;
}

.productCard-surface-tgame-13 {
    background: url(../image/product/tbull.jpg) no-repeat center;
}

.productCard-surface-tgame-14 {
    background: url(../image/product/blackjack.jpg) no-repeat center;
}

.productCard-surface-tgame-15 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-17 {
    background: url(../image/product/threepicture.jpg) no-repeat center;
}

.productCard-surface-tgame-18 {
    background: url(../image/product/TeenPatti.jpg) no-repeat center;
}

.productCard-surface-tgame-20 {
    background: url(../image/product/AndarBahar.jpg) no-repeat center;
}

.productCard-surface-tgame-22 {
    background: url(../image/product/28bar.jpg) no-repeat center;
}

.productCard-surface-maxgame-200 {
    background: url(../image/product/MG-DiceWar.jpg) no-repeat center;
}

.productCard-surface-maxgame-201 {
    background: url(../image/product/MG-1D.jpg) no-repeat center;
}

.productCard-surface-maxgame-202 {
    background: url(../image/product/MG-2D.jpg) no-repeat center;
}

.productCard-surface-maxgame-204 {
    background: url(../image/product/MG-Fireball10.jpg) no-repeat center;
}

.productCard-surface-maxgame-205 {
    background: url(../image/product/MG-Fireball30.jpg) no-repeat center;
}

.productCard-surface-maxgame-21 {
    background: url(../image/product/MG-FPC.jpg) no-repeat center;
}

.productCard-surface-maxgame-24 {
    background: url(../image/product/MG-HiLo.jpg) no-repeat center;
}

.productCard-surface-maxgame-7 {
    background: url(../image/product/MG-SeDie.jpg) no-repeat center;
}

.productCard-surface-maxgame-151, .productCard-surface-maxgame-152, .productCard-surface-maxgame-153 {
    background: url(../image/product/MG-DragonTiger.jpg) no-repeat center;
}

.productCard-surface-maxgame-206 {
    background: url(../image/product/MG-InBetween.jpg) no-repeat center;
}

.productCard-surface-maxgame-207 {
    background: url(../image/product/MG-TitanWheel.jpg) no-repeat center;
}

.productCard-surface-maxgame-15 {
    background: url(../image/product/MG-Baccarat.jpg) no-repeat center;
}

.productCard-surface-maxgame-26 {
    background: url(../image/product/MG-BaccaratNC.jpg) no-repeat center;
}

.productCard-surface-maxgame-210 {
    background: url(../image/product/MG-SabongDice.jpg) no-repeat center;
}

.productCard-surface-maxgame-20 {
    background: url(../image/product/MG-AndarBahar.jpg) no-repeat center;
}

.productCard-surface-maxgame-27 {
    background: url(../image/product/MG-JhandiMunda.jpg) no-repeat center;
}

.productCard-surface-maxgame-213 {
    background: url(../image/product/MG-TPWar.jpg) no-repeat center;
}

/* #region unused css  */
/* product page has changed to show cards by product-type instead of product,
   these css should be removed together with those images after confirmed will not using product card anymore


.productCard-surface-keno-116 {
    background: url(../image/product/maxkeno2.jpg) no-repeat center;
}

.productCard-surface-keno-119 {
    background: url(../image/product/spring.jpg) no-repeat center;
}

.productCard-surface-keno-120 {
    background: url(../image/product/summer.jpg) no-repeat center;
}

.productCard-surface-keno-121 {
    background: url(../image/product/autumn.jpg) no-repeat center;
}

.productCard-surface-keno-122 {
    background: url(../image/product/winter.jpg) no-repeat center;
}

.productCard-surface-keno-124 {
    background: url(../image/product/minikeno.jpg) no-repeat center;
}

.productCard-surface-keno-126 {
    background: url(../image/product/kenowar.jpg) no-repeat center;
}

.productCard-surface-keno-129 {
    background: url(../image/product/keno21.jpg) no-repeat center;
}

.productCard-surface-lottery-8 {
    background: url(../image/product/dice.jpg) no-repeat center;
}

.productCard-surface-lottery-2 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-4 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-6 {
    background: url(../image/product/lottery.jpg) no-repeat center;
}

.productCard-surface-lottery-10 {
    background: url(../image/product/racing.jpg) no-repeat center;
}

.productCard-surface-lottery-18 {
    background: url(../image/product/sedie.jpg) no-repeat center;
}

.productCard-surface-lottery-12 {
    background: url(../image/product/penalty.jpg) no-repeat center;
}

.productCard-surface-lottery-14 {
    background: url(../image/product/sedie.jpg) no-repeat center;
}

.productCard-surface-lottery-16 {
    background: url(../image/product/bull.jpg) no-repeat center;
}

.productCard-surface-lottery-16 {
    background: url(../image/product/bull.jpg) no-repeat center;
}

.productCard-surface-lottery-35 {
    background: url(../image/product/max6.jpg) no-repeat center;
}

.productCard-surface-lottery-16 {
    background: url(../image/product/bull.jpg) no-repeat center;
}

.productCard-surface-tgame-23 {
    background: url(../image/product/w3c.jpg) no-repeat center;
}

.productCard-surface-tgame-28 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-32 {
    background: url(../image/product/fpcdice.jpg) no-repeat center;
}

.productCard-surface-tgame-34 {
    background: url(../image/product/hilo.jpg) no-repeat center;
}

.productCard-surface-tgame-36 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-37 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-38 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-39 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}

.productCard-surface-tgame-40 {
    background: url(../image/product/baccarat.jpg) no-repeat center;
}
*/
/* #endregion unused css */

/* #endregion Product Card Image */

/*#region Product Cert*/
.product-cert-area {
    padding: 15px 0;
}

.product-cert {
    width: 100%;
    background: #cae1ff;
    padding: 10px 15px;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 13px;
    border-radius: 5px;
}

.product-cert-link {
    color: #0000EE;
    text-decoration: underline;
    cursor: pointer;
}

    .product-cert-link.visited {
        color: #551A8B;
    }
/*#endregion Product Cert*/

/*#region Product Toggle*/
.product-header-toggle-area {
    margin-left: 15px;
    margin-top: 3px;
}

.product-header-toggle-option {
    width: 70px;
    padding: 4px 0;
    border: 1px solid #bbbbbb;
    font-size: 13px;
    color: #474747;
    cursor: pointer;
}

    .product-header-toggle-option:first-child {
        border-right-width: 0;
        border-radius: 5px 0 0 5px;
    }

    .product-header-toggle-option:nth-child(2) {
        border-left-width: 0;
        border-radius: 0 5px 5px 0;
    }

    .product-header-toggle-option.selected {
        background: #f2f8fc;
        color: #0880e8;
        border-color: #0880e8;
        font-weight: bold;
    }

        .product-header-toggle-option.selected:first-child {
            border-right-width: 1px;
        }

        .product-header-toggle-option.selected:nth-child(2) {
            border-left-width: 1px;
        }

.product-try-btn {
    width: 65px;
    height: 24px;
    font-size: 12px;
    border-radius: 5px;
    padding: 4px;
    margin-left: 5px;
    margin-top: 4px;
    margin-bottom: 1px;
    color: white;
    background: #0880e8;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .product-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 5px;
    }

    .product-header-toggle-area {
        margin-left: 0;
    }
}

/*#endregion Product Toggle*/

/*#region Popup */
.product-popup-area {
    width: 100%;
    max-height: calc(100vh - 150px);
    display: flex;
    border-radius: 5px;
}
/*#endregion Popup */

/*#region jquery.modal.min.css*/
.blocker {
    z-index: 200;
    padding: 10px;
}

.modal {
    max-width: 600px;
    min-width: 0;
    margin-top: 70px;
    padding: 0;
}

.rtp-modal {
    max-width: 500px;
    width: 100%;
}
/*#endregion jquery.modal.min.css*/