:root {
    --bg-main: #030303;
    --bg-header: #050505;
    --bg-panel: #0b0b0c;
    --bg-panel-soft: #111112;

    --border-soft: rgba(255, 255, 255, 0.08);
    --border-orange: rgba(255, 102, 24, 0.45);
    --border-color-dim: #303030;

    --orange: #ff6418;
    --orange-light: #ff8a24;
    --orange-dark: #c63a08;
    --gold: #ffbf3c;

    --text-main: #f0f0f0;
    --text-muted: #b7b7b7;
    --text-dim: #777777;

    --btn-primary-bg: linear-gradient(180deg, #ff8a24 0%, #ff4b0b 100%);
    --btn-primary-bg-hover: linear-gradient(180deg, #ff9b35 0%, #ff5a12 100%);
    --btn-primary-color: #ffffff;
    --btn-primary-border: #ff7a1a;

    --btn-outline-bg: rgba(5, 5, 5, 0.72);
    --btn-outline-bg-hover: rgba(255, 100, 24, 0.14);
    --btn-outline-color: #ffffff;
    --btn-outline-border: rgba(255, 100, 24, 0.8);

    --btn-dark-bg: #0b0b0c;
    --btn-dark-bg-hover: #151515;
    --btn-dark-color: #ffffff;
    --btn-dark-border: rgba(255, 255, 255, 0.12);

    --border-color: var(--orange);
    --menu-color: var(--orange);
    --menu-color-soft: var(--orange-light);
    --border-color-soft: var(--orange-light);

    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 12px;
    --space-xl: 20px;

    --text-orange: var(--orange-light);
    --text-green: green;

    --page-bg-image: url(../img/background.webp);
    --page-bg-position: top center;
    --page-bg-size: cover;
}

html,
body {
    background:
        radial-gradient(
            circle at 70% 8%,
            rgba(255, 100, 24, 0.18),
            transparent 34%
        ),
        linear-gradient(rgba(3, 3, 3, 0.38), rgba(3, 3, 3, 0.72)),
        var(--page-bg-image) var(--page-bg-position) / var(--page-bg-size)
            no-repeat,
        var(--bg-main) !important;
    background-attachment: fixed, fixed, fixed, fixed !important;
    color: var(--text-main);
}

@media screen and (min-width: 780px) {
    body.page-home {
        --page-bg-image: url(../img/bg-beranda.webp);
    }

    body.page-sports {
        --page-bg-image: url(../img/bg-sports.webp);
    }

    body.page-casino {
        --page-bg-image: url(../img/bg-live-casino.webp);
    }

    body.page-idnpoker {
        --page-bg-image: url(../img/bg-idnpoker.webp);
    }

    body.page-slots {
        --page-bg-image: url(../img/bg-slots.webp);

        .slots-bg-container-popular {
            display: none;
        }
    }

    body.page-streamnspin {
        --page-bg-image: url(../img/bg-stream-n-spin.webp);
    }

    body.page-idnlive {
        --page-bg-image: url(../img/bg-idnlive.webp);
    }

    body.page-arcade {
        --page-bg-image: url(../img/bg-arcade.webp);

        .slots-bg-container-popular {
            display: none;
        }
    }

    body.page-referral {
        --page-bg-image: url(../img/bg-referral.webp);
    }

    body.page-idnraffle {
        --page-bg-image: url(../img/bg-idnraffle.webp);
    }

    body.page-lottery {
        --page-bg-image: url(../img/bg-lottery.webp);
    }

    body.page-table {
        --page-bg-image: url(../img/bg-table.webp);
    }

    body.page-contactus {
        --page-bg-image: url(../img/bg-contact-us.webp);
    }

    body.page-promosi {
        --page-bg-image: url(../img/bg-promosi.webp);

        .tab .tab-content img {
            margin: 0;
        }
    }

    .text-green {
        color: var(--text-green) !important;
    }

    .text-orange {
        color: var(--text-orange) !important;
    }

    .fixed-top {
        position: sticky !important;
        top: 0 !important;
    }

    .content-all {
        background: none !important;
    }

    .fixed-top,
    .header,
    .navbar {
        left: 0 !important;
        right: 0 !important;
        width: 100vw;
        max-width: none;
        background: var(--bg-main) !important;

        & .new-ribbon-navbar,
        .promo-ribbon-navbar {
            z-index: 0;
            display: none;
        }
    }

    .header > .container,
    .navbar > .container {
        width: 100vw;
        max-width: none !important;
        padding-left: 32px;
        padding-right: 32px;
        margin: 0;
        display: block !important;

        .header-cover {
            background: none;
            background-size: 200px 40px;
            background-position: left bottom;
        }
    }

    .header .row,
    .navbar .row {
        margin-left: 0;
        margin-right: 0;
    }

    .header .col-sm-12,
    .navbar .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .login-dialog {
        .input-login,
        .verify-login,
        .form-control {
            width: 100% !important;
        }
    }

    .login-panel,
    .login-panel-ins {
        height: auto !important;
        margin: 0 !important;
    }

    .navbar .nav > li:hover,
    .navbar .nav li.active,
    .navbar .nav li .current,
    .navbar .nav li .hover,
    .navbar .nav > li > a:hover,
    .navbar .nav > li:focus,
    .navbar .nav > li > a:focus {
        background: none;
    }

    .navbar {
        & .nav {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            justify-content: center;

            & > li {
                height: auto !important;

                & > a {
                    color: var(--text-main) !important;
                    border-bottom: 3px solid transparent;
                    height: auto !important;
                    padding: var(--space-md) !important;
                    display: flex !important;
                    align-items: center;
                    gap: var(--space-sm);

                    &.current,
                    &:hover {
                        background: none;
                        color: var(--menu-color-soft);
                        border-color: var(--border-color-soft);
                    }
                }

                &.nav-logo {
                    & > a {
                        padding: 0;

                        &:hover {
                            border-bottom: 0;
                        }

                        & > img {
                            height: 48px;
                        }
                    }
                }
            }
        }
    }
    .hdcontent {
        display: flex !important;
        gap: var(--space-md);
        height: auto !important;
        align-items: center;
    }

    .flex-fill {
        flex: 1 1 0;
        -ms-flex: 1 1 0;
        -webkit-flex: 1 1 0;
    }

    .header {
        height: auto !important;
        border-bottom: 0.5px solid var(--border-color-dim);

        & .topmenu {
            height: auto;
            & > ul {
                display: flex;
                justify-content: flex-start;
                gap: 0;
                float: none !important;
                background: none;
                align-items: center;

                & > li {
                    border-right: 0;
                    padding: 0;

                    & > a {
                        padding: var(--space-sm) var(--space-md);
                        color: var(--text-main);
                        display: flex;
                        gap: var(--space-sm);
                        align-items: center;

                        &:hover,
                        &:active {
                            color: var(--menu-color-soft) !important;
                        }
                    }
                }
            }
        }
    }

    div.content-body img {
        background-color: var(--bg-main);
    }

    .title-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
        justify-content: center;
        margin: var(--space-xl) 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6 {
        color: var(--text-orange) !important;
    }

    a[href] {
        --color: var(--text-main) !important;
    }

    .footer {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        margin: var(--space-md);

        & .license-footer {
            color: var(--text-dim);
            align-items: center !important;
        }

        & .statement-text {
            text-align: center;
        }

        & > .footer-section {
            display: flex;
            gap: var(--space-xl);
            justify-content: center;
            align-items: flex-start;

            &.footer-nav {
                gap: 30px;
            }

            & .footer-logo {
                & img {
                    height: 48px;
                }
            }

            & .footer-description {
                max-width: 200px;
                color: var(--text-muted);
            }

            ul {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
                margin: 0;
                padding: 0;

                li {
                    margin: 0;
                    padding: 0;
                    color: var(--text-muted);

                    &.caption {
                        color: var(--text-main);
                        font-weight: bold;
                        font-size: 14px;
                    }

                    & .bank-list {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: var(--space-md);

                        .bank-item {
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .bank {
        background-image: url(https://media.fastchecker.us/idnsmedia/is/assets/themes/aaphac/img/icon/ftr-ico.png);
        width: 80px;
        height: 30px;

        &.bank-bca {
            background-position: -405px -35px;
        }

        &.bank-cimb {
            background-position: 247px -35px;
            width: 120px;
        }

        &.bank-danamon {
            background-position: -789px -35px;
        }

        &.bank-mandiri {
            background-position: -490px -35px;
        }

        &.bank-bni {
            background-position: -583px -35px;
        }

        &.bank-bri {
            background-position: -672px -35px;
            width: 105px;
        }
    }

    .license {
        background-image: url(https://media.fastchecker.us/idnsmedia/is/assets/themes/aaphac/img/icon/ftr-ico.png);
        width: 80px;
        height: 30px;
        display: inline-flex;

        &.license-idnplay {
            background-position: -892px -35px;
            width: 100px;
        }

        &.license-cagayan {
            background-position: 0 -35px;
            width: 100px;
        }

        &.license-pacgor {
            background-position: 120px -35px;
            width: 120px;
        }

        &.license-opus {
            background-position: 380px -35px;
            width: 100px;
        }

        &.license-bmm {
            background-position: -108px -35px;
            width: 100px;
        }

        &.license-18 {
            background-position: -210px 0px;
            width: 190px;
            height: 30px;
        }
    }

    .msg-wrapper {
        margin-top: 0 !important;
    }

    .bonus-section {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
        justify-content: center;

        .bonus-sportsbook {
            --border-radius: var(--space-md);
            border: 1px solid var(--orange-light);
            background: url(../img/bonus-sportsbook.webp) center center
                no-repeat;
            height: 260px;
            background-size: contain;
        }

        .bonus-harian {
            --border-radius: var(--space-md);
            border: 1px solid var(--orange-light);
            background: url(../img/bonus-harian.webp) center center no-repeat;
            height: 260px;
            background-size: contain;
        }

        .bonus-mingguan {
            --border-radius: var(--space-md);
            border: 1px solid var(--orange-light);
            background: url(../img/bonus-mingguan.webp) center center no-repeat;
            height: 260px;
            background-size: contain;
        }

        .contact-us {
            --border-radius: var(--space-md);
            border: 1px solid var(--orange-light);
            background: url(../img/contact-us.webp) top left no-repeat;
            background-size: contain;
            width: 380px;
            height: 290px;
        }
    }

    .main {
        background: transparent !important;

        > .container {
            padding: 5px 15px 0px !important;
        }
    }

    .info_content {
        background: var(--bg-main) url(../img/contact-us-page.webp) top left
            no-repeat !important;
        background-size: contain;
        height: 600px;
        border-radius: var(--space-md);
        border: 1px solid var(--border-color);
        overflow: hidden;
    }

    .info_nav,
    .footer_nav {
        background: var(--orange-dark);
    }

    .slide-wrapper {
        width: 100% !important;
        height: 525px !important;
        border: 1px solid var(--border-color-soft);
    }

    .banner-slider {
        overflow: hidden;
        height: auto;
        position: relative;
        background: var(--bg-main);

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 18%;
            z-index: 2;
            pointer-events: none;
        }

        &::before {
            left: 0;
            --background: linear-gradient(
                90deg,
                var(--bg-main) 0%,
                rgba(3, 3, 3, 0.9) 15%,
                rgba(3, 3, 3, 0.38) 68%,
                rgba(3, 3, 3, 0) 100%
            );
        }

        &::after {
            right: 0;
            --background: linear-gradient(
                270deg,
                var(--bg-main) 0%,
                rgba(3, 3, 3, 0.9) 15%,
                rgba(3, 3, 3, 0.38) 68%,
                rgba(3, 3, 3, 0) 100%
            );
        }

        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    #main-slide {
        height: 525px !important;
        border-radius: var(--space-md);

        .slide-wrapper .owl-carousel,
        .big-slide-wrapper .owl-carousel {
            height: 525px !important;
        }

        .btn-slider-wrap {
            bottom: 15px;
            right: 15px;
            top: unset;
        }
    }

    .contact-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);

        .contact-us-item {
            --border-radius: var(--space-md);
            border: 1px solid var(--border-color);
            background: var(--bg-panel-soft) url(../img/contact-us.webp) center
                center no-repeat;
            height: 200px;
            background-size: cover;
            position: relative;

            .contact-us-item-whatsapp {
                color: white;
                position: absolute;
                bottom: 52px;
                left: 275px;
                background: black;
                font-size: 13px;
                width: 102px;
                line-height: 1;
            }

            .contact-us-item-line {
                color: white;
                position: absolute;
                bottom: 53px;
                left: 415px;
                background: black;
                font-size: 13px;
                width: 71px;
                line-height: 1;
            }
        }

        .download-app-item {
            --border-radius: var(--space-md);
            border: 1px solid var(--border-color);
            background: var(--bg-panel-soft) url(../img/download-apk.webp)
                center center no-repeat;
            height: 200px;
            background-size: cover;
        }
    }

    .download-apk {
        width: 250px;
        height: 250px;
        --border-radius: var(--space-md);
        border: 1px solid var(--border-color);
        background: var(--bg-panel-soft) url(../img/download-apk.webp) center
            center no-repeat;
        position: absolute;
        top: 125px;
        right: 5px;
        z-index: 29;
        background-size: contain;
    }

    .contact-us-float {
        width: 250px;
        height: 250px;
        --border-radius: var(--space-md);
        border: 1px solid var(--border-color);
        background: var(--bg-panel-soft) url(../img/contact-us.webp) center
            center no-repeat;
        position: absolute;
        top: 125px;
        left: 5px;
        z-index: 29;
        background-size: contain;
    }

    .d-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .page-sports {
        .content-sports {
            a[data-slug],
            a[data-href*="saba/sports"],
            a[data-href*="sbo_sportsbook"],
            a[data-href*="sbo_virtualsports"],
            a[data-href*="cmd"],
            a[data-href*="goldenrace"],
            a[data-href*="tfgaming"],
            a[data-href*="saba/esports"],
            a[data-href*="ultraplay"] {
                display: block;
                transition: all 0.2s linear;
                height: 100%;
                background-size: cover !important;

                &:hover {
                    transform: scale(1.1);
                }
            }

            .play-box {
                display: none;
            }

            a[data-slug="nsoft"] {
                background: url(../img/nsoft88.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-slug="ubo"] {
                background: url(../img/ubobet.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="saba/sports"] {
                background: url(../img/saba.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="sbo_sportsbook"] {
                background: url(../img/sbobet.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="cmd"] {
                background: url(../img/cmd368.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-slug="ibl"] {
                background: url(../img/sportgg.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="goldenrace"] {
                background: url(../img/goldenrace.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="sbo_virtualsports"] {
                background: url(../img/sbovirtual.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="tfgaming"] {
                background: url(../img/tfgaming.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="saba/esports"] {
                background: url(../img/sabaesports.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }

            a[data-href*="ultraplay"] {
                background: url(../img/ultraplay.webp) top left no-repeat;

                img {
                    display: none !important;
                }
            }
        }
    }

    .page-referral {
        .home-content {
            background: var(--bg-panel);
            border-radius: var(--space-md);
            border: 1px solid var(--border-color-soft);
            overflow: hidden;
            padding: var(--space-sm) !important;
        }
    }

    .page-promosi {
        .tab-content {
            .panel.panel-default {
                border: 1px solid var(--border-color-soft);
                overflow: hidden;

                & + .panel.panel-default {
                    margin-top: var(--space-md);
                }

                .panel-heading {
                    padding: 0;
                }
            }
        }

        .tab .nav-tabs {
            background: var(--orange);
        }
    }

    .category-title + .row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@media screen and (max-width: 780px) {
    #submit-login {
        .form-control {
            width: 100% !important;
        }
    }

    .game-box {
        background: var(--border-color);
        border: 1px solid var(--border-color-soft);
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8) !important;
    }
}

.content-sport {
    &.game-box-slots {
        background: var(--orange) !important;
        border: 1px solid var(--border-color-soft);
        position: relative;

        &:hover {
            border: 1px solid var(--border-color-soft);
        }

        img {
            width: 100% !important;
        }

        .play-box {
            border: 0 !important;
        }
    }
}

.sports-arena {
    margin-bottom: 0;

    .content-sports {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);

        .sport-box {
            border: 1px solid var(--orange-light) !important;
            background: var(--bg-panel-soft) !important;
            padding: 0px !important;
            overflow: hidden !important;

            .game-box-slots {
                margin: 0;
                border-radius: var(--space-md) !important;
                border: 0;
                height: 200px;

                &:hover {
                    background: none;
                    border: none;
                }
            }

            .play-box {
                background: var(--orange-dark) !important;
                text-align: center !important;
            }
        }
    }
}

#slots .game-box-slots {
    background: var(--orange) !important;
    border: 1px solid var(--border-color-soft) !important;
}

.idn-btn,
.btn-login,
.btn-slider,
#btn-submit-register {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 24px !important;
    border-radius: var(--space-lg) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 180ms ease !important;
}

.idn-btn:hover,
.btn-login:hover,
.btn-slider:hover,
#btn-submit-register:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.idn-btn--primary,
.btn-success,
#btn-register,
#btn-submit-register {
    background: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-border) !important;
    color: var(--btn-primary-color) !important;
    box-shadow: 0 8px 22px rgba(255, 88, 12, 0.35) !important;
}

.idn-btn--primary:hover,
.btn-success:hover,
#btn-register:hover,
#btn-submit-register:hover {
    background: var(--btn-primary-bg-hover) !important;
    border-color: var(--orange-light) !important;
    color: var(--btn-primary-color) !important;
}

.idn-btn--outline,
.btn-primary,
#btnLogin {
    background: var(--btn-outline-bg) !important;
    border: 1px solid var(--btn-outline-border) !important;
    color: var(--btn-outline-color) !important;
}

.idn-btn--outline:hover,
.btn-primary:hover,
#btnLogin:hover {
    background: var(--btn-outline-bg-hover);
    border-color: var(--orange-light);
    color: var(--btn-outline-color);
}

.idn-btn--dark {
    background: var(--btn-dark-bg);
    border: 1px solid var(--btn-dark-border);
    color: var(--btn-dark-color);
}

.idn-btn--dark:hover {
    background: var(--btn-dark-bg-hover);
    color: var(--btn-dark-color);
}

.modal-content {
    border-radius: 0 !important;
    border-color: var(--border-color) !important;
    background: var(--bg-panel) !important;

    .modal-title {
        color: var(--orange) !important;
    }

    .modal-header .close {
        color: var(--border-color);
        opacity: 1;
        z-index: 1;
        right: 10px;

        &:hover {
            color: var(--border-color);
            outline: none;
        }
    }
}

.input-login,
.verify-login,
.form-control {
    min-height: 32px;
    border-radius: var(--space-md) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: auto !important;
    background: var(--bg-panel-soft) !important;
    color: #f0f0f0 !important;
}

#formLoginPopup,
#submit-login {
    .form-control {
        width: 100% !important;
        padding-left: 34px !important;
    }
}

.text-sport-header {
    color: var(--orange) !important;
}

.game-title-slots {
    color: var(--text-main) !important;
}
.game-box {
    background: var(--bg-main) !important;
}
.panel-group {
    color: var(--text-main) !important;
}