:root {
    /* Global */
    --pallete-1: #000023; /** Default: #000023. This is base color of body **/
    --pallete-2: #121212;
    --pallete-3: #000023;
    --no-bg: transparent;
    --icon-color: #008000;
    --normal-link: #ffdead; /* Color for link ref transaction */
    --bg-card-promo: transparent; /* Background color for card promo */

    /* Header */
    --text-header-content: #ffffff;
    --text-user-data: #ffffff;
    --text-menu-navigation: #ffffff;
    --text-running-text: #ffffff;
    --text-game-navigation: #ffffff;

    /* Main */
    --text-main: #ffffff;
    --text-widget-depo: #ffffff;
    --text-widget-wd: #ffffff;
    --lottery-result-card:#1F1F1F;
    --lottery-result-1:#ffffff;
    --lottery-result-2:#f0b000;
    --text-game-favorite-title: #ffffff;
    --text-game-favorite-name: #ffffff;
    --text-game-favorite-provider: #ffffff;
    --btn-login-play: #6ec20b;
    --btn-login-play-text: #000000;
    --btn-play-demo: #ff0000;
    --btn-play-demo-text: #000000;
    --game-provider-hover: #0000ff;
    --game-provider-active: #0000ff;
    --game-name: #ffffff;
    --game-provider: #ffffff;
    --information-page-nav-text: #ffffff;
    --information-page-nav-text-active: #000000;
    --information-page-nav-text-hover: #ffffff;
    --information-page-nav-bg: #000000;
    --information-page-nav-bg-active: #ffffff;
    --tag-new-bg: #ff0000;
    --tag-new-text: #ffffff;
    --tag-promo-bg: #ff0000;
    --tag-promo-text: #ffffff;
    --tag-panas-bg: #000000;
    --tag-panas-text: #ff0000;
    --tag-pemeliharaan-bg: #ff0000;
    --tag-pemeliharaan-text: #ffff00;
    --deposit-amount-select-border: #ffffff;
    --deposit-amount-select-bg-hover: #000023;
    --deposit-amount-select-border-hover: #0000ff;
    --deposit-pending-card-bg: #121212;
    --memo-nav-tabs-active: #8700ca;
    --memo-accordion-button: #52007b;
    --memo-accordion-body: #000023;
    --memo-font-created-by: #8700ca;
    --memo-message-card-header: #8700ca;
    --memo-title-background: #52007b;
    --memo-text-message: #000000;
    --text-static-content-title: #ffffff;
    --text-static-content-provider: #ffffff;
    --deposit-hamburg: #6ec20b;
    --withdraw-hamburg: #ff0000;
    --deposit-hamburg-text: #ffffff;
    --withdraw-hamburg-text: #ffffff;

    /* Footer */
    --text-footer-deposit-method-title: #ffffff;
    --text-footer-deposit-method-content: #ffffff;
    --text-footer-contact-us-title: #ffffff;
    --text-footer-contact-us-content: #ffffff;
    --text-footer-provider-title: #ffffff;
    --text-footer-provider-content: #ffffff;
    --text-footer-copyright: #ffffff;
}

@font-face {
    font-family: 'asiasigma';
    src: url('../font/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: 'asiasigma2';
    src: url('../font/icomoon2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face { /* Normal Version */
    font-family: 'frabk';
    src: url('../font/frabk.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face { /* Italic Version */
    font-family: 'frabkit';
    src: url('../font/frabkit.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

body, .offcanvas{
    margin: 0px;
    background: var(--pallete-1);
    color: white;
    /* font-family: 'Poppins', "Segoe UI", sans-serif; */
    font-family: 'frabk';
    line-height: normal;
}

/* Deprecated, use new loader */
.loader{
    position: fixed;
    z-index: 99999;
    background: black;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    text-align: center;

    > .spinner{
        width: 100%;
        margin: auto;
        display: block;

        img{
            width: 40%;
            max-width: 200px;
        }

        > .text-spinner{
            width: 100%;
            margin: auto;
            display: block;
        }
    }
}

/* New Loader */
.new-loader{
    position: fixed;
    z-index: 99999;
    background: black;
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    text-align: center;
    flex-direction: column;
}

.new-spinner {
    position:relative;
    width:300px;
    height:300px;
    border-radius:50%;
    transform: rotateZ(45deg);
    perspective: 1200px;
    color:#00f0ff;
    margin: auto;
}

/* BASE RINGS (::before + ::after) */
.new-spinner::before,
.new-spinner::after,
.new-spinner span {
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    animation: spin 1.2s linear infinite;
    filter: drop-shadow(0 0 12px currentColor);
}

.new-spinner-text{
    top: -150px;
    position: relative;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Ring 1 */
.new-spinner::before{
    transform: rotateX(70deg);
    animation-delay: 0s;
}

/* Ring 2 */
.new-spinner::after{
    color:#7a00ff;
    transform: rotateY(70deg);
    animation-delay: .2s;
}

/* Ring 3 */
.new-spinner span:nth-child(1){
    color:#00ffcc;
    transform: rotateX(70deg) rotateY(70deg);
    animation-delay: .4s;
}

/* Ring 4 */
.new-spinner span:nth-child(2){
    color:#ffffff;
    transform: rotateX(-70deg) rotateY(70deg);
    animation-delay: .6s;
}

/* 16-SLASH ROTATION */
@keyframes spin {
    0%,100% { box-shadow: 1.2em 0 0 .2em currentColor; }
    6%  { box-shadow: 1.1em .5em 0 .2em currentColor; }
    12% { box-shadow: .9em .9em 0 .2em currentColor; }
    18% { box-shadow: .5em 1.1em 0 .2em currentColor; }
    25% { box-shadow: 0 1.2em 0 .2em currentColor; }
    31% { box-shadow: -.5em 1.1em 0 .2em currentColor; }
    37% { box-shadow: -.9em .9em 0 .2em currentColor; }
    43% { box-shadow: -1.1em .5em 0 .2em currentColor; }
    50% { box-shadow: -1.2em 0 0 .2em currentColor; }
    56% { box-shadow: -1.1em -.5em 0 .2em currentColor; }
    62% { box-shadow: -.9em -.9em 0 .2em currentColor; }
    68% { box-shadow: -.5em -1.1em 0 .2em currentColor; }
    75% { box-shadow: 0 -1.2em 0 .2em currentColor; }
    81% { box-shadow: .5em -1.1em 0 .2em currentColor; }
    87% { box-shadow: .9em -.9em 0 .2em currentColor; }
    93% { box-shadow: 1.1em -.5em 0 .2em currentColor; }
}

.hide{
    display: none;
}

#offcanvas {
    background-color: var(--pallete-1);

    .header-collapse{
        background-color: var(--pallete-2);
        cursor: pointer;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .navigation-icon-box-svg {
        width: 24px; /* Adjust the width as needed */
        height: 24px; /* Adjust the height as needed */
        margin-right: 8px; /* Add some spacing between the icon and the text */
        vertical-align: middle; /* Align the icon with the text */
    }

    .slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg{
        fill: var(--icon-color);
    }
}

header {
    background:var(--pallete-1);
    #header-part{
        background-color: var(--no-bg);
        padding-top: 10px;

        #header-logo-part {
            background-color: var(--no-bg);
        }
    
        #header-content-part {
            background-color: var(--no-bg);
            
            #header-content {
                color: var(--text-header-content);
            }
            
            #user-data {
                color: var(--text-user-data);
            }
        }
    }
}

    #menu-navigation {
        background-color: var(--pallete-2);
        color: var(--text-menu-navigation);
    }
    
    #transaction-navigation{
        background-color: var(--no-bg);
    }
    
    #running-text{
        background-color: var(--pallete-2);
        color: var(--text-running-text);
    }
    
    #game-navigation {
        background-color: var(--no-bg);
        color: var(--text-game-navigation);

        display: flex;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        justify-content: center;

        .navigation-item{
            max-width: 90px;
            width: 23vw;
        }
        
        .navigation-item > a{
            width: 100%;
            font-weight: 600;
        }
        
        .navigation-image {
            background: url('../../images/navicon.svg') no-repeat;
            display: inline-block;
            height: 60px;
            width: 60px;
            background-size: cover;
        }
        
        .slot-nav-img{
            background-position: -120px 0px;
        }
        
        .lottery-nav-img{
            background-position: -420px 0px;
        }
        
        .casino-nav-img{
            background-position: -480px 0px;
        }
        
        .arcade-nav-img{
            background-position: 0px 0px;
        }
        
        .fishing-nav-img{
            background-position: -300px 0px;
        }
        
        .cockfight-nav-img{
            background-position: -360px 0px;
        }
        
        .sportbook-nav-img{
            background-position: -60px 0px;
        }
        
        .promo-nav-img{
            background-position: -180px 0px;
        }

        .navigation-icon-box-svg{
            height: 60px;
            width: 60px;
        }

        .slot-svg, .casino-svg, .arcade-svg, .cockfight-svg, .promo-svg, .lottery-svg, .sport-svg, .fishing-svg{
            fill: var(--text-game-navigation);
        }
    }


main {

    .game-image{
        inline-size: 100%;
    }

    #widget-depo {
        background-color: var(--pallete-2);

        > span {
            color: var(--text-widget-depo);
        }
    }

    #widget-wd {
        background-color: var(--pallete-2);

        > span {
            color: var(--text-widget-wd);
        }
    }

    #lottery-result {
        background-color: var(--pallete-1);

        > div {
            background-color: var(--pallete-2);
        }

        .lottery-container {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden; /* Hide content that exceeds */
        }
        
        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            z-index: 10;
        }
        
        .scroll-btn.left {
            left: 10px;
        }
        
        .scroll-btn.right {
            right: 10px;
        }
        
        .lottery-content {
            display: flex;
            overflow-x: auto;
            padding: 10px 40px; /* Horizontal padding for spacing */
            scrollbar-width: none; /* Remove scrollbar for Firefox */
            -ms-overflow-style: none; /* Remove scrollbar for IE/Edge */
        }
        
        .lottery-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            width: 200px;
            max-width: 200px;
            margin: 0px 15px;
            padding: 5px 0;
            background-color: var(--lottery-result-card);
            border-radius: 10px;
            text-align: center;
        }
        
        .lottery-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
            letter-spacing: 2px;
            color: var(--lottery-result-2);
        }
        
        .lottery-number {
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 5px;
            background-color: var(--lottery-result-2);
            color: var(--lottery-result-1);
        }
        
        .lottery-small {
            font-size: 16px;
            font-weight: bold;
            margin-top: 2px;
            letter-spacing: 2px;
            color: var(--lottery-result-2);
        }

        .lottery-date {
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 1px;
            color: var(--lottery-result-2);
            opacity: 0.6;
        }
    
        @media (max-width: 480px) {
            .lottery-title {
                font-size: 16px;
            }

            .lottery-number {
                font-size: 18px;
            }

            .lottery-small {
                font-size: 16px;
            }
        }

        @media (max-width: 340px) {
            .lottery-title {
                font-size: 10px;
            }

            .lottery-number {
                font-size: 12px;
            }

            .lottery-small {
                font-size: 10px;
            }

            .lottery-date {
                font-size: 8px;
            }
        }
        
        .lottery-content::-webkit-scrollbar {
            display: none; /* Hide scrollbar for Chrome, Safari, and Edge */
        }
    }

    #static-content-list{
        > div > div > div{
            background-color: var(--pallete-2);
        }
        .inner-content{
            padding:.75rem;
        }

        .title{
            color: var(--text-static-content-title);
        }

        .provider{
            color: var(--text-static-content-provider);
        }

        .img-fluid {
            width: 100%; 
            height: auto;
            object-fit: cover;
        }

        .provider-logo{
            width: 30px;
            height: 30px;
            @media (max-width: 768px) {
                height: 20px;  /* Adjust as needed */
                width: 20px;  /* Adjust as needed */
            }
        }
        
        .box{
            background-color: var(--pallete-3);
        }
    }

    

    #favorite-games {
        background-color: var(--pallete-2);

        .game-favorite-slot-image{
            inline-size: 100%;
            object-fit: cover;
            aspect-ratio: 4/3;
        }

        > span {
            color: var(--text-game-favorite-title);
        }
        
        > div > div > div{
            background-color: var(--pallete-3);
        }
        
        .game-fav-box > span:first-child { 
            color: var(--text-game-favorite-name);
            font-weight: 500;
        }

        .game-fav-box > span:nth-child(2) {
            color: var(--text-game-favorite-provider);
        }

        .game-card {
            position: relative;
            overflow: hidden;
        }

        .game-hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 2;
        }

        .game-card:hover .game-hover-overlay {
            display: flex;
        }
        
        .game-hover-overlay button {
            opacity: 0;
            transition: opacity 0.3s ease;
            width: 80%;
            max-width: 200px;
            text-align: center;
        }
        
        .game-card:hover .game-hover-overlay button {
            opacity: 1;
        }

        #btnLoginPlay{
            background-color: var(--btn-login-play);
            color: var(--btn-login-play-text);
        }

        #btnLoginPlay:hover {
            filter: brightness(0.8); /* Darkens the color */
        }

        #btnPlayDemo{
            background-color: var(--btn-play-demo);
            color: var(--btn-play-demo-text);
        }

        #btnPlayDemo:hover {
            filter: brightness(0.8); /* Darkens the color */
        }
    }
    
    #slot-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #slot-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            
            .game-provider:hover{
                border: 1px solid var(--game-provider-hover);
            }
            
            .active {
                border: 1px solid var(--game-provider-active); 
            }
        }

        > #slot-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span:first-child {
                color: var(--game-name);
            }

            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }

        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    #lottery-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #lottery-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    
    #casino-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #casino-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            
            .game-provider:hover{
                border: 1px solid var(--game-provider-hover);
            }
            
            .active {
                border: 1px solid var(--game-provider-active); 
            }
        }

        > #casino-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span:first-child {
                color: var(--game-name);
            }

            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }

        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    
    #fishing-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #fishing-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            
            .game-provider:hover{
                border: 1px solid var(--game-provider-hover);
            }
            
            .active {
                border: 1px solid var(--game-provider-active); 
            }
        }

        > #fishing-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span:first-child {
                color: var(--game-name);
            }

            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }

        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
    
    #cockfight-page {
        background-color: var(--no-bg);
    }
    
    #arcade-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #arcade-providers {
            .game-provider{
                background-color: var(--pallete-3);
                border: 1px solid transparent;
                border-radius: 5px;
            }
            
            .game-provider:hover{
                border: 1px solid var(--game-provider-hover);
            }
            
            .active {
                border: 1px solid var(--game-provider-active); 
            }
        }

        > #arcade-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span:first-child {
                color: var(--game-name);
            }

            .game-fav-box > span:last-child {
                color: var(--game-provider) !important;
            }
        }

        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }

    #sport-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #sports-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }

    #esport-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #esports-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }

    #cockfight-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;

        > #cockfight-game > div > div {
            background-color: var(--pallete-3);

            .game-fav-box > span {
                color: var(--game-name);
            }
        }
    }
    
    #transaction-history {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #withdraw-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #deposit-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #information-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
        padding-left: 0 !important;
        padding-right: 0 !important;

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
            color: var(--information-page-nav-text);
            background-color: var(--information-page-nav-bg);
        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {
            border: 1px solid var(--information-page-nav-text-hover);
        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: var(--information-page-nav-text-active);
            background-color: var(--information-page-nav-bg-active);
        }
    }
    
    #promo-history-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #promo-progress-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #promo-take-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #promo-view-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #profile-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #change-password-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #rekening-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }
    
    #register-page {
        background-color: var(--pallete-2);
        color: var(--text-main);
    }

    .deposit-pending-card{
        background-color: var(--deposit-pending-card-bg) !important;
        color: var(--text-main) !important;
    }

    .memo-page {
        background-color: var(--pallete-2) !important;

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: var(--text-main) !important;
            background-color: var(--memo-nav-tabs-active) !important;
        }

        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
            color: var(--text-main) !important;
        }

        .accordion-item {
            background-color: var(--no-bg) !important;
            border: none;
        }

        .accordion-button {
            color: var(--text-main) !important;
            background-color: var(--memo-accordion-button) !important;
        }

        .accordion-body {
            color: var(--text-main) !important;
            background-color: var(--memo-accordion-body) !important;
        }

        .memo-font-created-by {
            color: var(--memo-font-created-by) !important;
        }

        .memo-detail {
            background-color: var(--pallete-2) !important;

            .card-header {
                background-color: var(--memo-message-card-header) !important;

                a i {
                    color: var(--text-main) !important;
                }
            }
    
            .memo-title {
                color: var(--text-main) !important;
                background-color: var(--memo-title-background) !important;
            }
    
            #icon-reply {
                color: var(--text-main) !important;
            }
    
            .memo-text-message {
                color: var(--memo-text-message) !important;
            }
        }
    }
}

#deposit-hamburg{
    background-color: var(--deposit-hamburg) !important;
    color: var(--deposit-hamburg-text) !important;
}

#withdraw-hamburg{
    background-color: var(--withdraw-hamburg) !important;
    color: var(--withdraw-hamburg-text) !important;
}

footer {
    #footer-content {
        background-color: var(--pallete-2);

        #contact-us {
            > div:nth-child(1) {
                color: var(--text-footer-deposit-method-title);
                > div {
                    color: var(--text-footer-deposit-method-content);
                }
            }

            > div:nth-child(2) {
                color: var(--text-footer-contact-us-title);
                > div {
                    color: var(--text-footer-contact-us-content);
                }
            }
        }

        #footer-provider {
            > span {
                color: var(--text-footer-provider-title);
            }

            > div {
                color: var(--text-footer-provider-content)
            }
        }

        #contact-button {
            cursor: pointer;
        }
        
        #contact-button div {
            padding-left: 10px
        }
        
        #contact-button div i {
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        
        #contact-button div i::after {
            content: '\00bb';
            opacity: 0;
            top: 0;
            transition: 0.5s;
        }
        
        #contact-button:hover div i {
            padding-right: 10px;
        }
        
        #contact-button:hover div i::after {
            opacity: 1;
            right: 0;
        }
    }

    #footer-copyright {
        color: var(--text-footer-copyright);
        margin-top: -17px;
        background-color:var(--pallete-1);
    }
}

#footer-mobile {
    background-color: var(--pallete-2);
}

.table{
    color:unset;
}

.fa, [class*="icon-"],[class*="icon2"]{
    color: var(--icon-color);
}

a {
    text-decoration: none;
    color: unset;
}

[class*="icon-"],
[class*=" icon-"]{
    font-family: 'asiasigma' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[class*="icon2-"],
[class*=" icon2-"] {
    font-family: 'asiasigma2' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon2-btg:before {
  content: "\e913";
}
.icon2-dragoonsoft:before {
  content: "\e914";
}
.icon2-fastspin:before {
  content: "\e915";
}
.icon2-play8:before {
  content: "\e917";
}
.icon2-jili:before {
  content: "\e916";
}
.icon2-yellow_bat:before {
  content: "\e918";
}
.icon2-netent:before {
  content: "\e905";
}
.icon2-no_limit_city:before {
  content: "\e919";
}
.icon2-play_star:before {
  content: "\e906";
}
.icon2-g:before {
  content: "\e91a";
}
.icon2-miki_world:before {
  content: "\e909";
}
.icon2-ludobet:before {
  content: "\e901";
}
.icon2-fc:before {
  content: "\e921";
}
.icon2-hotroad:before {
  content: "\e902";
}
.icon2-evolution:before {
  content: "\e920";
}
.icon2-horsebook:before {
  content: "\e904";
}
.icon2-ion:before {
  content: "\e91e";
}
.icon2-thunderfire:before {
  content: "\e90a";
}
.icon2-ws168:before {
  content: "\e908";
}
.icon2-ga28:before {
  content: "\e924";
}
.icon2-pragmatic-pop:before {
    content: "\e929";
}
.icon2-askme:before {
    content: "\e928";
}
.icon2-vgaming:before {
    content: "\e91b";
}


.icon-font{
    font-size: 2.2em;
    text-align: center;
    display: block;
    margin: 0px auto;
}

.icon-asiasigma4d:before {
    content: "\e93e";
}

.icon-pragmatic:before {
    content: "\e948";
}

.icon-habanero:before {
    content: "\e940";
}

.icon-spadegaming:before {
    content: "\e94c";
}

.icon-saba:before {
    content: "\e952";
}

.icon-joker:before {
    content: "\e944";
}

.icon-pg_soft:before {
    content: "\e947";
}

.icon-kingmaker:before {
    content: "\e945";
}

.icon-onegame:before {
    content: "\e946";
}

.icon-redtiger:before {
    content: "\e949";
}

.icon-sexygaming:before {
    content: "\e94b";
}

.icon-sv_cockfighting:before {
    content: "\e94d";
}

.icon-jdb:before {
    content: "\e943";
}

.icon-ion:before {
    content: "\e942";
}

.icon-sbobet:before {
    content: "\e94a";
}

.icon-cq9:before {
    content: "\e93f";
}

.icon-wmcasino:before {
    content: "\e94e";
}

.icon-ks_gaming:before {
    content: "\e951";
}

.icon-afb:before {
    content: "\e950";
}

.icon-user:before {
    content: "\e935";
}

.icon-login:before {
    content: "\e91c";
}

.icon-chat:before {
    content: "\e909";
}

.icon-copyright{
    font-size: unset;
    text-align: center;
    display: inline;
    margin: unset;
}

.icon-copyright:before {
    content: "\e90e";
}

.icon-home:before {
    content: "\e917";
}

.bmw-100{
    min-width: 100px;
}

.btn > .spinner-border {
    vertical-align: -0.27em;
}

.mw-300{
    min-width: 300px;
}

.provider-list-box > div {
    font-size: 0.7em;
}

.fixed-bottom-icon{
    font-size: 1.5em;
    margin: auto;
    display: block;
    padding-bottom: 0.3rem;
}

.flex-basis{
    flex-basis: 0 !important;
}

.logo-lottery {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-lottery img {
    height: 120px;
    width: auto;
}

.btn-play {
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-play button {
    font-size: 24px;
    padding: .5rem 1.25rem
}

.provider-logo{
    width: 50px;
    height: 50px;
    @media (max-width: 768px) {
        height: 35px;  /* Adjust as needed */
        width: 35px;  /* Adjust as needed */
    }
}

.tag-new{
    left: 0%;
    background: var(--tag-new-bg);
    color: var(--tag-new-text);
}

.tag-promo{
    left: 0%;
    bottom: 0%;
    background: var(--tag-promo-bg);
    color: var(--tag-promo-text);
}

.tag-panas{
    right: 0%;
    background: var(--tag-panas-bg);
    color: var(--tag-panas-text);
}

.tag-pemeliharaan{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    background: var(--tag-pemeliharaan-bg);
    color: var(--tag-pemeliharaan-text);
}

.darken {
    filter: brightness(70%); /* Adjust the brightness percentage as needed */
}

.darken::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust the alpha value to control darkness */
}

.hidden {
    display: none;
}

.hamburger-button{
    position: relative;
}

.hamburger-button:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 10px;
}

.img-level{
    width:200px
}

.small-badge{
    width: 30px;
}

.deposit-amount-selection{
    border: 1px solid var(--deposit-amount-select-border);
    cursor: pointer;
}

.deposit-amount-selection:hover{
    background: var(--deposit-amount-select-bg-hover);
    border: 1px solid var(--deposit-amount-select-border-hover);
}

.normal_link{
    text-decoration: underline;
    color: var(--normal-link);
}

.widget-scrollable-container {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 1rem;
}

.widget-content-wrapper {
    display: inline-flex;
    flex-direction: row;
    animation: scroll-loop 20s infinite linear;
}

@keyframes scroll-loop {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.widget-scrollable-container::-webkit-scrollbar {
    height: 8px; /* Height of the scrollbar */
}

.widget-scrollable-container::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px;
}

.widget-scrollable-container::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Hover effect on scrollbar */
}

.widget-card {
    flex: 0 0 calc(100% / 5 - 1rem); /* 20% width to show 5 cards */
    min-width: 150px; /* Ensure a minimum width for smaller screens */
    background-color: var(--pallete-3);
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 2.5rem;
    text-align: center;
    scroll-snap-align: start; /* Optional: snap alignment */
    overflow: hidden;
}

.widget-user-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
} 

.name, .amount {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-text-container {
    display: flex;
    flex-direction: column;
}

.highlight-box {
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.8);
    transition: box-shadow 0.5s ease-in-out;
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    display: flex;
    flex-direction: column;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 80%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

.skeleton-title {
    width: 50%;
    height: 1rem;
    border-radius: 0.25rem;
}

.skeleton-body {
    width: 100%;
    height: 1.5rem;
    border-radius: 0.25rem;
}

.skeleton-footer {
    width: 50%;
    height: 1rem;
    border-radius: 0.25rem;
    margin-left: auto;
}

.empty-slide {
    visibility: hidden; /* This will keep the space but hide the empty slide */
}

.qris-hidden {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 2s ease, transform 2s ease;
}

.qris-show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .logo-lottery img {
        height: 50px;
    }

    .btn-play button {
        font-size: 12px;
        padding: 0.25rem 0.5rem
    }

    .very-small{
        font-size: 0.5em;
    }

    .widget-user-image {
        width: 30px;
        height: 30px;
    } 
}

/* Card skeleton stays as you have it */
#promo-view-page .as-promotion-card{
    display:flex; flex-direction:column; height:100%; width:100%;
    background : var(--bg-card-promo);
}
#promo-view-page .as-promotion-footer{ margin-top:auto; }

/* ----- Title band: align across cards, no truncation ----- */
/* The wrapper around the <h3> (your .as-promo-title-wrap) */
#promo-view-page .as-promo-title-wrap{
    display:flex; align-items:center; justify-content:center;
    /* Desktop/tablet: reserve exactly 3 lines so dates align */
    min-height: calc(5.3 * 1lh);
}
/* The title itself */
#promo-view-page .as-promo-title-wrap h3{
    margin:0;
    line-height:1.2;          /* choose your rhythm; 1.2 is typical */
    text-align:center;
    word-break:break-word;
}

/* On small screens, allow the title area to grow freely (no hard min-height) */
@media (max-width: 575.98px){
    #promo-view-page .as-promo-title-wrap{ min-height: 0; }
}

/* ----- Date row: sits just above the image and aligns horizontally ----- */
#promo-view-page .as-promotion-meta{
    text-align:center;        /* enforce center in case theme overrides */
    line-height:1.2;
    min-height: 1.4em;        /* single-line reserve, keeps rows even */
    margin-top:.25rem;
    margin-bottom:.25rem;
}

/* ----- Image area (unchanged visuals) ----- */
#promo-view-page .as-promotion-imgwrap{
    height:240px; display:flex; align-items:center; justify-content:center;
}
#promo-view-page .as-promotion-imgwrap img{
    max-width:100%; max-height:100%; object-fit:contain; display:block;
}
@media (max-width: 575.98px){
    #promo-view-page .as-promotion-imgwrap{ height:200px; }
}

.ck-content a[href] {
    color: var(--normal-link);
}


/*Carousel Skeleton / Place holder style */
 .skeleton-loader {
        background: linear-gradient(90deg, var(--pallete-1) 25%, var(--pallete-3) 50%, var(--pallete-1) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    @keyframes shimmer {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    /* Base carousel styles */
    .carousel-item {
        position: relative;
        background-color: var(--pallete-1);
    }

    /* Default minimum height while loading - Responsive */
    /* Mobile (Extra Small) */
    .carousel-item:not(.loaded) {
        min-height: 80px;
    }

    /* Small devices (landscape phones, 576px and up) */
    @media (min-width: 576px) {
        .carousel-item:not(.loaded) {
            min-height: 100px;
        }
    }

    /* Medium devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        .carousel-item:not(.loaded) {
            min-height: 120px;
        }
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 992px) {
        .carousel-item:not(.loaded) {
            min-height: 150px;
        }
    }

    /* Extra large devices (1200px and up) */
    @media (min-width: 1200px) {
        .carousel-item:not(.loaded) {
            min-height: 180px;
        }
    }

    /* Image styles */
    .carousel-item img {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        width: 100%;
        height: auto;
        display: block;
    }

    .carousel-item img.loaded {
        opacity: 1;
    }

    .carousel-item .skeleton-loader.hidden {
        display: none;
    }

    /* Remove min-height and background once loaded */
    .carousel-item.loaded {
        min-height: auto !important;
        background-color: transparent;
    }

    /* Skeleton icon - Responsive sizes */
    .skeleton-loader::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bdbdbd' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") no-repeat center center;
        background-size: contain;
        opacity: 0.5;
    }

    /* Mobile icon size */
    .skeleton-loader::before {
        width: 30px;
        height: 30px;
    }

    /* Tablet icon size */
    @media (min-width: 768px) {
        .skeleton-loader::before {
            width: 40px;
            height: 40px;
        }
    }

    /* Desktop icon size */
    @media (min-width: 992px) {
        .skeleton-loader::before {
            width: 50px;
            height: 50px;
        }
    }

    /* ======================= */
    /* Responsive Carousel Controls */
    /* ======================= */

    /* Mobile - Extra Small (< 576px) */
    @media (max-width: 575.98px) {
        .carousel-control-prev,
        .carousel-control-next {
            width: 10%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 1.2rem;
            height: 1.2rem;
        }

        .carousel-indicators {
            margin-bottom: 0.3rem;
        }

        .carousel-indicators button {
            width: 15px;
            height: 2px;
            margin: 0 2px;
        }
    }

    /* Mobile - Small (576px - 767px) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .carousel-control-prev,
        .carousel-control-next {
            width: 12%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 1.5rem;
            height: 1.5rem;
        }

        .carousel-indicators {
            margin-bottom: 0.4rem;
        }

        .carousel-indicators button {
            width: 20px;
            height: 2px;
            margin: 0 3px;
        }
    }

    /* Tablet (768px - 991px) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .carousel-control-prev,
        .carousel-control-next {
            width: 10%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 1.75rem;
            height: 1.75rem;
        }

        .carousel-indicators {
            margin-bottom: 0.5rem;
        }

        .carousel-indicators button {
            width: 25px;
            height: 3px;
            margin: 0 3px;
        }
    }

    /* Desktop (992px and up) */
    @media (min-width: 992px) {
        .carousel-control-prev,
        .carousel-control-next {
            width: 8%;
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            width: 2rem;
            height: 2rem;
        }

        .carousel-indicators {
            margin-bottom: 0.75rem;
        }

        .carousel-indicators button {
            width: 30px;
            height: 3px;
            margin: 0 4px;
        }
    }

    /* ======================= */
    /* Touch-friendly improvements for mobile/tablet */
    /* ======================= */
    @media (max-width: 991.98px) {
        .carousel-control-prev,
        .carousel-control-next {
            opacity: 0.7;
        }

        .carousel-control-prev:hover,
        .carousel-control-next:hover,
        .carousel-control-prev:focus,
        .carousel-control-next:focus {
            opacity: 1;
        }
    }

    /* ======================= */
    /* Loading spinner alternative (optional) */
    /* ======================= */
    .skeleton-loader::after {
        content: '';
        position: absolute;
        top: calc(50% + 25px);
        left: 50%;
        transform: translateX(-50%);
        font-size: 10px;
        color: #bdbdbd;
        white-space: nowrap;
    }

    @media (min-width: 768px) {
        .skeleton-loader::after {
            top: calc(50% + 35px);
            font-size: 12px;
        }
    }

    @media (min-width: 992px) {
        .skeleton-loader::after {
            top: calc(50% + 40px);
            font-size: 14px;
        }
    }
    @media (min-width:768px){
        .static-content-list{
            padding:.2rem;
        }
    }
   @media (max-width:767px){
     .mobile-bg{
        background-color : var(--pallete-2);
     }
     .static-content-list{
        padding:.75rem;
     }
   }

#login-section .input-group {
    position: relative;
}

#login-section .invalid-feedback {
    position: absolute;
    bottom: -20px; /* adjust as needed */
    left: 0;
}