/* Hamburger Menu Popup */
    @import url("https://fonts.googleapis.com/css?family=Roboto:900&display=swap");

    a {
        color: #ff2c00;
    }

    .header {
        background: linear-gradient(#ff0000 50%, #ffffff 50%) !important;
    }

    .game-title {
        color: #212121;
        display: block;
        color: #000000 !important;
        background: #ff2c00;
    }

    .hamburger.is-closed .hamb-top,
    .hamburger.is-closed .hamb-middle,
    .hamburger.is-closed .hamb-bottom {
        background-color: #000000 !important;
    }

    .hamburger.is-open .hamb-top,
    .hamburger.is-open .hamb-middle,
    .hamburger.is-open .hamb-bottom {
        background-color: #000000 !important;
    }

    .btn-success:hover {
        color: #000000;
    }

    .game-box {
        background: #000000 !important;
    }

    .footer {
        border-top: 1px solid #000000;
    }

    .game-title-slots {
        background: #ff2c00;
        color: #000;
    }

    .exclusive-promo-purple:after {
        border-top: 12px solid #ff2c00;

    }

    .exclusive-promo-purple:before {
        border-top: 12px solid #ff2c00;

    }

    .casino-lobby-nav-item.active {
        border-left: 5px solid #ff2c00;
        color: #ff2c00;
    }

    .slot-sidebar-nav>li>a.active,
    .slot-sidebar-nav>li>a:focus,
    .slot-sidebar-nav>li>a:hover {
        background: #ff2c00;
    }

    #slots .game-box-slots {
        background: #ff2c00;
    }

    .game-box-slots a {
        color: #000;
    }

    .exclusive-promo-purple:after {
        border-top: 18px solid #ff2c00;
    }

    .slot-play-button {
        background: #ff2c00;
    }

    .exclusive-promo-purple {
        background-color: #ff2c00;
    }

    .game-box-glow-in-purple {
        border: solid 3px #ff2c00;
        box-shadow: inset 0 0 5px #ff2c00;

    }

    #slots .game-box-slots:hover {
        background: #ff2c00;
    }

    /* Banner Arcade */
    .slots-bg-container-popular {
        display: none !important;
    }

    /* Warna Table */
    .forms .table {
        color: #fff !important;
    }

    /* Button Close */
    .close {
        color: #fff !important;
    }

    /* Baground Home Desktop */
    .main {
        background: #000000 url(https://cdn.picpuk.com/Banner/Backround.webp) top center no-repeat;
    }

    .close:not(:disabled):not(.disabled):focus,
    .close:not(:disabled):not(.disabled):hover {
        color: #ffffff !important;
    }

    /* Popup Login - Modal */
    .modal-content {
        background-color: #000000 !important;
        border: 2px solid #ff2c00 !important;
    }

    .modal-body a {
        color: #fdfdfd !important;
    }

    /* Navbar Bawah Mobile */
    .tabs .nav-tabs,
    .nav-tabs {
        background: #000 !important;
        border-bottom: 1px solid #ff2c00 !important;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        background-color: #ff2c00 !important;
    }

    /* Text Berjalan */
    .msg .marquee-wrapper {
        background: #000000 !important;
        color: #ff2c00 !important;
    }

    .msg-wrapper {
        background: #000000 !important;
    }

    .quick-footer-navbar a.active {
        background-color: #f00000 !important;
    }

    /* Button Masuk Mobile */
    .btn-primary {
        background-color: #ff2c00 !important;
    }

    /* Button Daftar Mobile */
    .btn-success {
        background-color: #fff !important;
    }

    .collapse {
        color: #e3e3e3 !important;
    }

    .panel {
        background-color: #000 !important;
    }

    .game-box-slots {
        color: #fff !important;
    }

    .collapse span {
        color: #fff !important;
    }

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

        html,
        body {
            background-color: #000000 !important;
            color: #ffffff !important;
        }

        .forms {
            margin: 10px 0 4em !important;
            color: #ffffff !important;
        }

        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: #ffffff !important;
        }

        .help-block {
            color: #ffffff !important;
        }
    }

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-family: 'Montserrat', Tahoma, "Microsoft Yahei", Arial, Helvetica;
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    :root {
        --accent-color: #181717;
        --base-color: #F0C800;
    }

    .hamburg {
        position: absolute;
        width: 40px;
        height: auto;
        padding: .6rem;
        background-color: var(--base-color);
        border-radius: 10px;
        z-index: 80;
        box-shadow: 0px 0px 10px 1px rgba(218, 178, 0, 0.7);
    }

    .ard-sosmed {
        display: block;
        cursor: pointer;
        position: fixed;
        bottom: 15%;
        left: 10px;
        font-family: "Roboto", fantasy;
        z-index: 79;
    }

    .ard-sosmed ul {
        margin: 0;
        padding: 0;
    }

    .ard-sosmed ul li {
        position: absolute;
        text-decoration: none;
        list-style: none;
        transform: translate(0, 0) rotate(360deg);
        transition: all .5s ease;
        opacity: 0;
    }

    .ard-sosmed.open ul li:nth-child(1) {
        transform: translateY(-185px);
        transition-delay: .20s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(2) {
        transform: translate(0px, -125px);
        transition-delay: .16s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(3) {
        transform: translate(0px, -65px);
        transition-delay: .12s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(5) {
        transform: translate(175px, -52px);
        transition-delay: .04s;
        opacity: 1;
    }

    .ard-sosmed.open ul li:nth-child(6) {
        transform: translateX(200px);
        transition-delay: 0s;
        opacity: 1;
    }

    .ard-sosmed ul li a img {
        width: 90%;
        height: auto;
    }

    .ard-sosmed ul li a {
        display: flex;
        width: 55px;
        height: 55px;
        border: solid 2px var(--accent-color);
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        background-color: #F0C800;
    }

    .bar1,
    .bar2,
    .bar3 {
        width: 80%;
        height: 5px;
        background-color: var(--accent-color);
        margin: 6px auto;
        transition: .4s;
        position: relative;
        transform: translateY(-1px);
    }

    .open .bar1 {
        transform: translate(0, 10px) rotate(-225deg);
    }

    .open .bar2 {
        opacity: 0;
        transform: translate(0, -6px) rotate(-225deg);
    }

    .open .bar3 {
        transform: translate(0, -12px) rotate(-315deg);
    }

    .ard-sosmed ul li div {
        position: absolute;
        transition: all .3s ease;
        opacity: 0;
        scale: .1;
        font-family: "Roboto", fantasy;
        font-size: large;
        background: rgba(218, 178, 0, 0.7);
        color: var(--accent-color);
        text-align: center;
        text-wrap: nowrap;
    }

    .ard-sosmed ul li:hover div {
        opacity: 1;
        scale: 1;
    }

    .ard-sosmed ul li:nth-child(1) div {
        transform: translateY(-240px);
    }

    .ard-sosmed ul li:nth-child(1):hover div {
        transform: translateY(-95px);
    }

    .ard-sosmed ul li:nth-child(2) div {
        transform: translateY(-175px);
    }

    .ard-sosmed ul li:nth-child(2):hover div {
        transform: translate(30px, -95px);
    }

    .ard-sosmed ul li:nth-child(3) div {
        transform: translateY(-150px);
    }

    .ard-sosmed ul li:nth-child(3):hover div {
        transform: translate(50px, -90px);
    }

    .ard-sosmed ul li:nth-child(4) div {
        transform: translateX(160px);
    }

    .ard-sosmed ul li:nth-child(4):hover div {
        transform: translate(50px, -90px);
    }

    .ard-sosmed ul li:nth-child(5) div {
        transform: translate(110px, 70px);
    }

    .ard-sosmed ul li:nth-child(5):hover div {
        transform: translate(62px, -80px);
    }

    .ard-sosmed ul li:nth-child(6) div {
        transform: translate(55px, 135px);
    }

    .ard-sosmed ul li:nth-child(6):hover div {
        transform: translate(65px, -65px);
    }

    .attention {
        position: relative;
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0% 75%);
        width: 80px;
        text-wrap: nowrap;
        height: 30px;
        margin-bottom: 5px;
        left: 15px;
        background-color: var(--base-color);
        cursor: default;
        color: var(--accent-color);
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        opacity: 0;
    }

    .whore {
        animation: flicker .6s infinite;

        &:hover {
            animation-duration: 10s;
        }
    }

    @keyframes flicker {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @media screen and (max-width: 600px) {
        .ard-sosmed {
            bottom: 15%;
            /* Tetap di bagian bawah */
            left: 10px;
            /* Tetap di sebelah kiri */
            right: auto;
            /* Hapus properti right */
            transform: translateX(0);
            /* Reset transform */
        }
    }

    .history-title {
        color: gray !important;
        font-weight: bolder;
        letter-spacing: 2px;
        margin: 10px 0;
        text-align: center;
    }

    .history-text {
        margin: 10px 0;
        color: darkgray;
        font-weight: lighter !important;
        text-align: justify !important;
        line-height: 1.6;
        /* Spasi antar baris agar lebih nyaman dibaca */
    }