/*!
 * Extracted from legacy SCTUPGRADE/SCTNT1-NEX/index.php
 * Source range: L327–L1052
 * Description: Form, modal, transaksi, referral, umum
 * DO NOT edit manually — regenerate via SCTV1/extract_css.php
 */

  /* Pastikan pembungkus menjadi patokan posisi */
.input-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Kotak Input */
.input-password-wrapper input {
  padding-right: 45px; /* Beri ruang di kanan agar teks tidak tertabrak ikon */
  width: 100%;
}

.p-marquee {
    padding: 5px;
    font-size: 1.1em;
}
/* Posisi Ikon Mata */
.password-toggle-icon {
  position: absolute;
  right: 15px; /* Jarak dari tepi kanan input */
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* Pastikan ikon berada di atas input */
}

/* Opsional: Ukuran ikon jika perlu disesuaikan */
.password-toggle-icon i {
  font-size: 1.2rem;
}
  .text-white {
      color: #ffffff !important;
  }
  .fw-normal {
      font-weight: 600!important;
      color: #fefb00 !important;
  }

  .offcanvas-body img {
      /*filter: grayscale(100%) brightness(0);*/
  }
  .bg-black {
      background: black;
  }
    @font-face {
      font-family: "Barlow", sans-serif;
      font-weight: 400;
      font-style: normal;
      /*font-family: digital_sans_ef_medium;*/
      /*src: url(/assets/fonts/digital_sans_ef_medium.woff2);*/
    }
    @font-face {
      font-family: advanced_dot_digital7;
      src: url(/assets/fonts/advanced_dot_digital7.woff2);
    }
    body {
      background: #000000;
      color: #FFFFFF;
      font-family: "Barlow", sans-serif;
      font-weight: 400;
      font-size: 12px;
    }
    .text-muted {
       color: #ffffff !important;
    }
    .card {
        --bs-card-bg: #ffffff00!important;
    }
    .rounded {
        /*margin: 0.5rem!important;*/
    }
    .input-group-text {
        font-weight: 600 !important;
    }
    .text-center {
        width: 95%!important;
    }
    .m-3 {
        margin: 1em!important;
    }
    .p-2 {
        padding: .2rem!important;
    }
    .p-3 {
        padding: 0.5rem!important;
    }
             .buttonjoin {
         width: 100%;
         cursor: pointer;
         transition: all 5s ease;
         animation: borderPulse 1.5s infinite ease-out;
         }
    /*box3*/
           .container-3box {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1200px;
            padding: 10px;
            width: 100%;
        }

        .box3 {
            margin-top: 30px;
            background-color: #090909;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-radius: 12px;
            padding: 40px 20px 20px;
            position: relative;
            overflow: visible;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            font-size: 1.4em;
        }

        /* Icon Wrapper */
        .icon-wrapper3 {
            width: 80px; /* Set icon size here */
            height: 80px;
            margin-bottom: -40px;
            position: absolute;
            top: -40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
        }

        /* Glow Effects for Each Icon */
        .icon-blue {
            animation: glowBlue 2s infinite alternate;
        }

        .icon-yellow {
            animation: glowYellow 2s infinite alternate;
        }

        .icon-red {
            animation: glowRed 2s infinite alternate;
        }

        @keyframes glowBlue {
            from {
                filter: drop-shadow(0 0 10px rgba(0, 123, 255, 0.8));
            }
            to {
                filter: drop-shadow(0 0 20px rgba(0, 123, 255, 1));
            }
        }

        @keyframes glowYellow {
            from {
                filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.8));
            }
            to {
                filter: drop-shadow(0 0 20px rgba(255, 193, 7, 1));
            }
        }

        @keyframes glowRed {
            from {
                filter: drop-shadow(0 0 10px rgba(220, 53, 69, 0.8));
            }
            to {
                filter: drop-shadow(0 0 20px rgba(220, 53, 69, 1));
            }
        }

        /* Text Styling */
        .box3 h3 {
            font-size: 1.5em;
            margin: 10px 0;
        }

        .box3 p {
            font-size: 1em;
            margin-top: 10px;
        }

        /* Responsive Grid */
        @media (max-width: 768px) {
            .container-3box {
                grid-template-columns: 1fr;
            }

            .icon-wrapper3 {
                width: 60px;
                height: 60px;
                top: -30px;
            }

            .box3 h3 {
                font-size: 1.3em;
            }

            .box3 p {
                font-size: 0.9em;
            }
        }
    /*box3*/

    a {
      color: #ffffff;
      text-decoration: none;
    }
    
    a:hover {
      color: #00e5ff!important;
    }
    .row {
        justify-content: center;
    }
    .row2 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: calc(-1* var(--bs-gutter-y));
        margin-right: calc(-.5* var(--bs-gutter-x));
        margin-left: calc(-.5* var(--bs-gutter-x));
    }
    .col-7 {
        width: auto;
    }
    .modal {
        width: ;
    }
    .modal-body {
        display: flex;
        justify-content: center;
    }
    .text-center2 {
        justify-content: center;
    }
    .modal-dialog{
        top: 7rem;
    }
    .modal-header{
        display: none!important;
    }
    .btn-utama {
      background: rgb(254, 216, 4);
      color: #000000;
      text-align: center;
    }
    .bg-utama {
      background-color: rgb(254, 216, 4);
    }
    .text-utama {
      color: rgb(254, 216, 4);
    }
    /* Counter USD Jackpot */
    .container-usd-jackpot-counter {
      background: center no-repeat;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 125px;
      padding-top: 15px;
    }
    .usd-jackpot-counter {
      color: #FFFFFF;
      font-size: 2.2em;
      font-weight: 600;
      /*font-family: 'advanced_dot_digital7';*/
      padding-top: 15px;
    }
    /* Owl Carousel */
    .owl-dots {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%)!important;
    }
    .owl-theme .owl-dots .owl-dot span {
      margin: 1px!important;
      background: none!important;
      border: 1px solid #FFFFFF!important;
    }
    .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      background: #FFFFFF!important;
    }
    .container-title {
      display: flex;
      justify-content: flex-start;
    }
    .container-title h1 {
        display: none;
      color: #fff;
      background-color: #0022e6;
      position: relative; /* Ensure ::after is positioned relative to this element */
      margin: 0;
      padding-right: 30px; /* Space for the skewed effect */
      padding-left: 10px;
    }
    .container-title h1::after {
      background-color: #0022e6;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 100%;
      transform-origin: 100% 0;
      transform: skew(25deg);
    }
    .container-populer {
      border: 1px solid <?php echo $isi1_theme_color ?>;
      border: 0px solid #0022e6 !important;
      max-width: 820px;
      margin: 0 auto;
      
    }
    .icon-container {
      width: 4em;
      height: 4em;
      border-radius: 50px;
      background: linear-gradient(180deg,#818181,#000);
      display: flex;
      place-content: center;
      place-items: center;
      font-size: 20px;
      margin-left: auto;
      margin-right: auto;
    }
    .icon-content {
      background-color: #212529;
      width: 95%;
      height: 95%;
      border-radius: 50px;
      display: flex;
      place-content: center;
      place-items: center;
    }
    .container-masuk-daftar {
      /*display: flex;*/
      margin: 8px;
         cursor: pointer;
         transition: all 5s ease;
         animation: borderPulse 1.5s infinite ease-out;
    }
             .container-masuk-daftar.button-blue {
         padding: 10px 26px;
         display: block;
         line-height: 22px;
         box-shadow: inset 0 -2px 0 rgb(211, 172, 0);
         background-image: linear-gradient(195deg, rgb(2, 40, 255) 11%,rgb(2, 40, 255) 21%, rgb(2, 40, 255) 33%,rgb(2, 40, 255) 30%,rgb(2, 40, 255) 60%, rgb(58, 242, 255) 73%, rgb(2, 40, 255) 85%, rgb(2, 40, 255) 100%);
         border: 1px solid #d5d000 !important;
         animation: background-gold 3s infinite;
         background-size: 300% 300%;
         color: #fff;
         border-width: 0;
         border-radius: 10px;
         font-weight: 700;
         font-size: 18px;
         text-align: center;
         text-shadow: 2px 1px 9px rgb(0 0 0 / 70%);
         margin-bottom: 12px;
         margin-top: 15px;
         }
                  @keyframes background-gold {
         0% {
         background-position: 0% 82%;
         }
         50% {
         background-position: 100% 0%;
         }
         100% {
         background-position: 0% 82%;
         }
         }
    .container-masuk-daftar a {
      flex-basis: 50%;
      padding: 6px 12px;
      text-align: center;
      line-height: 21px;
      text-decoration: none;
      text-transform: uppercase;
      font-family: 'Arial';
      font-size: 14px;
      color: #fff!important;
      padding: 8px;
    }
    .container-masuk-daftar a.masuk {
      /*border-radius: 5px 0 0 5px;*/
    }
    .container-masuk-daftar a.daftar {
      /*border-radius: 0 5px 5px 0;*/
    }
    .img-pembayaran {
      position: relative;
    }
    .img-pembayaran:before {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      bottom: 0;
      width: 5px;
      border-radius: 2px;
      background-color: #00FF00;
    }
    .hub-kami {
      margin-bottom: 25px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .hub-kami>a {
      color: #FFFFFF;
      width: 100%;
      background-size: cover;
      margin-bottom: 15px;
      min-height: 160px;
      padding: 20px 15px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-decoration: none;
      border-radius: 20px;
      border: 1px solid #4A0A0A;
    }
    .hub-kami>a>h3 {
      font-size: 16px;
      font-weight: 500;
      margin: 0 0 10px;
      text-transform: uppercase;
    }
    .hub-kami>a>h6 {
      font-size: 12px;
      margin: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
    }
    .hub-kami>a>h6>i {
      font-size: 18px;
      font-weight: 800;
    }
    .user-menu {
      background-color: #4A0A0A;
      background-image: linear-gradient(180deg, #fed569, #b97d00);
      display: flex;
      justify-content: space-around;
      font-size: 10px;
      overflow: hidden;
    }
    .user-menu .user-menu-item {
      flex-basis: initial;
      flex: 1;
      margin: 10px 0;
      padding: 0 10px;
      flex-basis: 22%;
    }
    .user-menu .user-menu-item>a {
      color: #FFFFFF;
      text-decoration: none;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      height: 100%;
      white-space: nowrap;
    }
    .user-menu .user-menu-item>a>img {
      width: 20px;
      height: 20px;
      margin-bottom: 5px;
      vertical-align: middle;
      border: 0;
    }
    .deposit-note {
      color: #999999;
      display: flex;
      align-items: stretch;
      line-height: 19px;
      margin-bottom: 15px;
    }
    .deposit-note-icon {
      flex-basis: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      padding: 10px;
      background: linear-gradient(to bottom,#787880,#42424f);
    }
    .deposit-note-icon img {
      width: 35px;
    }
    .deposit-note-content {
      flex-basis: 80%;
      background-color: #CBCBCB;
      color: #363565;
      padding: 10px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    .kotak-pembayaran {
      background-color: #CBCBCB;
      color: #000000;
      cursor: pointer;
    }
    .kotak-pembayaran-aktif {
      background-color: #fed569;
      background-image: linear-gradient(180deg, #fed569, #b97d00);
      cursor: pointer;
    }
    .kotak-pembayaran-aktif img {
      filter: brightness(0) invert(1);
    }
    .bank-info {
      background-color: #919197;
      background-image: linear-gradient(to bottom,#919197 0%,#444352 100%);
    }
    .bank-info hr {
      border-top: 1px solid #000000;
      border-bottom: 1px solid #393939;
      margin: 10px 0;
      width: 100%;
    }
    .floating-whatsapp {
      text-decoration: none;
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 50px;
      height: 50px;
      z-index: 9999;
    }
    .floating-whatsapp:before {
      content: "";
      background-repeat: no-repeat;
      background-size: 34px 34px;
      background-position: center center;
      width: 50px;
      height: 50px;
      background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,14 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
      background-color: #00C853;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 100%;
      box-shadow: 0 1px 1.5px 0 rgb(0 0 0 / 12%), 0 1px 1px 0 rgb(0 0 0 / 24%);
    }
    .animation-1 {
      -webkit-animation: rubberBand 1s linear 1s infinite normal;
      animation: rubberBand 1s linear 1s infinite normal;
    }
    @keyframes rubberBand {
      10% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
      }
      30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
      }
      40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
      }
      50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
      }
      65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
      }
      75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
      }
    }
    @-webkit-keyframes rubberBand {
      0%,
      100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
      }
      30% {
        -webkit-transform: scale3d(1.25,.75,1);
        transform: scale3d(1.25,.75,1)
      }
      40% {
        -webkit-transform: scale3d(.75,1.25,1);
        transform: scale3d(.75,1.25,1)
      }
      50% {
        -webkit-transform: scale3d(1.15,.85,1);
        transform: scale3d(1.15,.85,1)
      }
      65% {
        -webkit-transform: scale3d(.95,1.05,1);
        transform: scale3d(.95,1.05,1)
      }
      75% {
        -webkit-transform: scale3d(1.05,.95,1);
        transform: scale3d(1.05,.95,1)
      }
    }
    .floating-lainnya {
      position: fixed;
      bottom: 150px;
      left: 5px;
      z-index: 10;
    }

    .my-navbar {
        height: 52px;
        padding: 0px;
        width: 100%;
        background: rgb(254, 216, 4);
        position: fixed;
        bottom: 0;
        color: white;
        z-index: 1100;
        display: flex;
        box-shadow: 0px -4px 3px rgba(0, 0, 0, 0.75);
    }
    .my-navbar a {
        color: black;
        font-weight: 500;
    }

    .navbar-item {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .navbar-item-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -16px;
    }

    .navbar-item-content>img {
        height: 36px;
        width: 36px;
    }

    .licenses-item {
        /*margin-top: 20px;*/
      width: 100%;
      max-width: 840px;
    }
        /* CSS untuk kontainer grid */
    .image-grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* Membuat 4 kolom */
      grid-gap: 5px; /* Jarak antar gambar */
      width: 100%; /* Lebar 100% dari kontainer */
      max-width: 1200px; /* Kontainer maksimal 1200px */
      margin: 0 auto; /* Agar kontainer berada di tengah */
    }
    
    /* CSS untuk setiap item gambar */
    .image-item {
      position: relative;
      width: 100%;
      padding-bottom: 100%; /* Membuat kotak 1:1 */
      overflow: hidden; /* Menjaga agar gambar tidak melebihi kontainer */
      border-radius: 10px; /* Opsional: sudut bundar untuk setiap kotak */
    }
    
    .image-item img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Memastikan gambar tetap menutupi seluruh kotak 1:1 tanpa distorsi */
      object-position: center; /* Memusatkan gambar jika ada yang dipotong */
    }
    

    @media only screen and (max-width: 768px) {
      .licenses-item {
        width: 100%;
      }
      .text-center {
          width: ;
      }
      .image-grid-container {
        grid-template-columns: repeat(4, 1fr); /* 2 kolom untuk layar lebih kecil */
      }
      .usd-jackpot-counter {
          font-size: 1.8em;
          padding-top: 6px;
      }
    }
    @media screen and (min-width: 768px) {
      .text-center {
        width: 65%;
        margin: auto!important;
        padding-bottom: 3rem;
          }
      .pb-2 {
        max-width: 70%;
        margin: auto!important;
        padding-top: 0.5rem!important;
        }
      .px-4 {
          padding-right: 10rem !important;
          padding-left: 10rem !important;
      }
    }