:root {
    /* Global */
    --pallete-1: #000000; /** Default: #000023. This is base color of body **/
    --pallete-2: #1F1F1F;
    --pallete-3: #ff0000;
    --no-bg: transparent;
    --icon-color: #ffffff;
    --normal-link: #ffdead; /* Color for link ref transaction */

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

    /* Main */
    --text-main: #ffffff;
    --text-widget-depo: #ffffff;
    --widget-card:#1F1F1F;
    --text-widget-wd: #ffffff;
    --lottery-result-card:#1F1F1F;
    --lottery-result-1:#ffffff;
    --lottery-result-2:#f0b000;
    --text-game-favorite-title: #000000;
    --text-game-favorite-name: #ffffff;
    --text-game-favorite-provider: #FFBA00;
    --btn-login-play: #6ec20b;
    --btn-login-play-text: #000000;
    --btn-play-demo: #ff0000;
    --btn-play-demo-text: #000000;
    --text-static-content-sports: #000000;
    --text-static-content-casino: #000000;
    --text-static-content-arcade: #000000;
    --static-content-sports: #2d83dc;
    --static-content-casino: #31a4a5;
    --static-content-arcade: #eb3131;
    --game-favorite-box: #ffffff;
    --game-provider-hover: #ffffff;
    --game-provider-active: #ffffff;
    --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;
    --deposit-hamburg: #6ec20b;
    --withdraw-hamburg: #ff0000;
    --deposit-hamburg-text: #ffffff;
    --withdraw-hamburg-text: #ffffff;

    /* Game Section */
    --box-game-item: #ffffff;

    /* Footer */
    --text-footer-deposit-method-title: #ffffff;
    --text-footer-deposit-method-content: #ffffff;
    --footer-deposit-method: #7da34b;
    --text-footer-contact-us-title: #ffffff;
    --text-footer-contact-us-content: #ffffff;
    --footer-contact-us: #a4f4fb;
    --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 { /* 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: 'frabk';
    line-height: normal;
}

.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: 10%;
        }

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

.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(--text-main);
    }
    
}

#header-content {
    background-color: var(--pallete-3);
    color: var(--text-header-content);
}

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

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

            > div > * > .user-data-icon{
                width: 20px;
                vertical-align: -5px;
            }
        }
    }

    #menu-navigation {
        > div {
            background-color: var(--pallete-2);
        }
        color: var(--text-menu-navigation);
    }

    #menu-navigation-home.active{
        text-decoration: underline;
    }

    #menu-navigation-rekening.active{
        text-decoration: underline;
    }

    #menu-navigation-riwayat-promosi.active{
        text-decoration: underline;
    }
    
    #transaction-navigation{
        background-color: var(--no-bg);

        > div > div > div{
            text-align: center;
        }

        > div > div > div > img:hover{
            box-shadow: 0px 0px 20px 2px #a38989;
        }
    }
    
    #running-text{
        background-color: var(--pallete-1);
        
        .running-info{
            background-color: var(--running-text-info);
            color: var(--text-running-text-info);
        }

        .running-content{
            background-color: var(--running-text-content);
            color: var(--text-running-text-content);
        }
    }
    
    #game-navigation {
        background-color: var(--no-bg);
        color: var(--text-game-navigation);
        
        .content{
            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-item > div{
            width: 100%;
            font-weight: 600;
        }

        .navigation-item:hover{
            a{
                color: var(--text-game-navigation-hover);
            }

            div{
                color: var(--text-game-navigation-hover);
            }

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

        .navigation-item.active {
            color: var(--text-game-navigation-hover);
        }
        
        .navigation-item.active .slot-svg,
        .navigation-item.active .casino-svg,
        .navigation-item.active .arcade-svg,
        .navigation-item.active .cockfight-svg,
        .navigation-item.active .promo-svg,
        .navigation-item.active .lottery-svg,
        .navigation-item.active .sport-svg,
        .navigation-item.active .fishing-svg {
            fill: var(--text-game-navigation-hover);
        }
        
        .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);
        }
    }

    #select-provider{
        background-color: rgba(0, 0, 0, 0.5);
        margin-top: -10px;
        padding-top: 10px;
        z-index: 1000;
        position: absolute;

        #select-provider .row {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping */
        }

        #select-provider .col {
            display: flex; /* Center align items */
            flex-direction: column; /* Stack elements vertically */
            align-items: center; /* Center content */
            margin: 10px; /* Space between columns */
        }

        .provider-image {
            width: 100%; /* Set a fixed width */
            object-fit: contain; /* Ensures images maintain aspect ratio */
        }
    }
}

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

    #widget-section{
        background-color: var(--pallete-3)
    }
    
    #widget-depo {
        background-color: var(--widget-card);

        .title {
            color: var(--text-widget-depo);
        }

        .widget-content{
            background-color: var(--pallete-2);
            border: 1px solid #6ec20b;

            span:last-child{
                line-height: 1.7;
            }

            .depo-text{
                background-color: #6ec20b;
            }
        }
    }

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

        .title {
            color: var(--text-widget-wd);
        }
        
        .widget-content{
            background-color: var(--pallete-2);
            border: 1px solid #5d9ad3;

            span:last-child{
                line-height: 1.7;
            }

            .wd-text{
                background-color: #5d9ad3;
            }
        }
    }

    #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 */
        }
    }

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

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

        > div > div{
            border: 1px solid var(--text-game-favorite-provider)
        }

        .title-card{
            border-top-left-radius: 6px;
            border-top-right-radius: 23px;
            color: var(--text-game-favorite-title);
            border-bottom: 30px solid var(--text-game-favorite-provider);
            border-right: 0px solid transparent;
            height: 0px;
            display: inline-block;
            width: 230px;
            line-height: 30px;
                
            svg{
                float: right;
                margin-top: 4px;
            }
        }

        .title-card-trapezoid{
            vertical-align: bottom;
            height: 0px;
            display: inline-block;
            width: 20px;
            margin-left: -33px;
            border-bottom: 20px solid var(--text-game-favorite-provider);
            border-left: 25px solid transparent;
            border-right: 13px solid transparent;
        }
        
        > div > div > div > div{
            background-color: var(--game-favorite-box);
        }
        
        .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);
        }

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

        .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 */
        }
    }

    #static-content-list{

        .col {
            position: relative; /* This is necessary to position the inner elements absolutely */
        }
        
        .box {
            display: flex;
            align-items: center;
            justify-content: right;
            position: absolute;
            bottom: 10px; /* Adjusts the distance from the bottom */
            right: 10px;  /* Adjusts the distance from the right */
            background-color: rgba(0, 0, 0, 0.7); /* Optional: Adds a dark background for better readability */
            padding: 5px 10px;
            border-radius: 8px; /* Optional: Rounded corners for the box */
        }
        
        .provider-logo {
            width: 24px;
            height: 24px;
        }
        
        .provider {
            color: #fff; /* Adjust text color as needed */
            font-size: 14px; /* Control text size */
        }

        #sportsbook{
            /* .title-card{
                background-color: var(--static-content-sports);
                border-top-left-radius: 10px;
                border-top-right-radius: 27px;
                color: var(--text-static-content-sports);
                padding-bottom: 4px;
                line-height: 1.5;
            } */

            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-sports);
                border-bottom: 30px solid var(--static-content-sports);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;
                
                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
    
            .title-card-trapezoid{
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-sports);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }
            
            .content {
                border: 1px solid var(--static-content-sports);
            }
        }

        #casino{
            /* .title-card{
                background-color: var(--static-content-casino);
                border-top-left-radius: 10px;
                border-top-right-radius: 27px;
                color: var(--text-static-content-casino);
                padding-bottom: 4px;
                line-height: 1.5;
            } */

            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-casino);
                border-bottom: 30px solid var(--static-content-casino);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;

                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
    
            .title-card-trapezoid{
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-casino);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }

            .content {
                border: 1px solid var(--static-content-casino);
            }
        }

        #arcade{
            /* .title-card{
                background-color: var(--static-content-arcade);
                border-top-left-radius: 10px;
                border-top-right-radius: 27px;
                color: var(--text-static-content-arcade);
                padding-bottom: 4px;
                line-height: 1.5;
            } */

            .title-card{
                border-top-left-radius: 6px;
                border-top-right-radius: 23px;
                color: var(--text-static-content-arcade);
                border-bottom: 30px solid var(--static-content-arcade);
                border-right: 0px solid transparent;
                height: 0px;
                display: inline-block;
                width: 190px;
                line-height: 30px;

                svg{
                    float: right;
                    margin-top: 4px;
                }
            }
    
            .title-card-trapezoid{
                vertical-align: bottom;
                height: 0px;
                display: inline-block;
                width: 20px;
                margin-left: -15px;
                border-bottom: 20px solid var(--static-content-arcade);
                border-left: 5px solid transparent;
                border-right: 13px solid transparent;
            }

            > div {
                border: 1px solid var(--static-content-arcade)
            }
        }

        .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: -1px !important;
        }
    }
    
    #slot-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);

        > #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(--box-game-item);

            .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;
        color: var(--text-main);

        > #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(--box-game-item);

            .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;
        color: var(--text-main);

        > #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(--box-game-item);

            .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);
        color: var(--text-main);
    }
    
    #arcade-page {
        background-color: var(--pallete-2);
        padding-left: 0 !important;
        padding-right: 0 !important;
        color: var(--text-main);

        > #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(--box-game-item);

            .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;
        color: var(--text-main);

        > #sports-game > div > div {
            background-color: var(--box-game-item);

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

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

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

                .content{
                    border: 2px solid var(--footer-deposit-method)
                }
            }

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

                .content{
                    border: 2px solid var(--footer-contact-us)
                }
            }
        }

        #contact-button {
            cursor: pointer;
        }
    }

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

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

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

        .provider-box {
            border: 2px solid #6c757d;
            padding: 10px;
            position: relative;
        }
        
        .provider-title {
            position: absolute;
            top: -14px;
            left: 20px; /* Centering horizontally */
            background-color: var(--pallete-2); /* Background color to "cut" the border */
            padding: 0 10px; /* Allows the title to expand based on the content */
            white-space: nowrap;
        }

        .provider-card{
            background-color: var(--pallete-3)
        }
    }

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

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

.table{
    color:unset;
}

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

.fa.exclude, [class*="icon-"].exclude {
    color: initial; /* Resets to the default color */
}

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

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

.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: 100%;
    max-width: 133px;
    height: 50px;
    object-fit: contain;
}

.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-content-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 210px;
}

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

@keyframes scroll-loop {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(-100% / 2));
    }
}

.widget-content-container::-webkit-scrollbar {
    width: 6px; /* Set the scrollbar width */
    height: 6px; /* Set the scrollbar height for horizontal scroll (if needed) */
}

.widget-content-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5); /* Dark thumb */
    border-radius: 10px; /* Rounded corners */
}

.widget-content-container::-webkit-scrollbar-track {
    background: transparent; /* Transparent track */
}

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

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

.forget-password-text{
    top: 30px;
}

.btn-login{
    background-color: #ffea00;
}

.btn-register{
    background-color: #e6011c;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.blinking-dot {
    animation: blink 1s infinite; /* Blinks every 1 second */
}

.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-content-container{
        mas-height: 200px;
    }

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

/* Card skeleton stays as you have it */
#promo-view-page .as-promotion-card{
    display:flex; flex-direction:column; height:100%; width:100%;
}
#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; }
}