.navbar-toggler,
.navbar-toggler:focus {
   border: none !important;
   text-decoration: none;
   outline: 0;
   box-shadow: none;
}

body::-webkit-scrollbar {
   width: 5px;
}

body::-webkit-scrollbar-track {
   box-shadow: inset 0 0 2px #00ab66;
}

body::-webkit-scrollbar-thumb {
   border-radius: 25px;
   background-color: #00ab66;
   outline: 0.5px solid #00ab66;
}

.login {
   width: 160px;
   text-align: center;
   transition: 0.5s !important;
   background-size: 200% auto !important;
   color: #fff;
   border-radius: 25px;
   display: block !important;
   border: none;
   font-weight: 700;
   box-shadow: inset 2px 2px 10px #00c066;
   background-image: linear-gradient(45deg, #39976d 0%, #00b670 51%, #39976d 100%) !important;
   outline: 0.5px solid #007a33;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   touch-action: manipulation;
   margin-left: 20px;
}

.login:hover {
   background-position: right center !important;
   /* change the direction of the change here */
   color: #fff !important;
   text-decoration: none;
}

.login:active {
   transform: scale(0.95) !important;
}

.backToTopBtn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 15px;
   z-index: 99;
   border: none;
   outline: none;
   background-color: #00a857;
   color: white;
   font-weight: bold;
   cursor: pointer;
   padding: 5px 15px;
   font-size: 18px;
   transition: opacity 0.3s ease;
}

.backToTopBtn:hover {
   background-color: #e7c383;
   /* Add a dark-grey background on hover */
}

.navbar-brand .logo {
   width: 210px;
   height: 50px;
}

.bg-custom {
   background-image: linear-gradient(-45deg, #124531 0%, #008031 51%, #124531 100%);
}

#content {
   margin-top: 30px;
   padding: 20px;
   min-height: 150px;
   color: #fff;
}

.judul_page {
   color: #00ff99;
}

/* Animasi loading */
#loading {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 10px 20px;
   border-radius: 5px;
   z-index: 1000;
}

#loading .text {
   display: block;
   position: relative;
   margin: 50vh auto;
   left: 48%;
}

#bola {
   width: 50px;
   /* Sesuaikan ukuran bola */
   height: 50px;
   position: fixed;
   /* Posisi relatif terhadap viewport */
   top: 0;
   left: 0;
   transition: transform 0.1s linear;
   z-index: 999;
}

.bola {
   position: relative;
   top: 50%;
   left: 48%;
   width: 70px;
   height: 70px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   animation: putar 2s linear infinite;
}

@media (max-width:480px) {
   #loading .text {
      display: block;
      position: relative;
      margin: 50vh auto;
      left: 42%;
   }

   .bola {
      position: relative;
      top: 50%;
      left: 46%;
      width: 40px;
      height: 40px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
      animation: putar 2s linear infinite;
   }
}

@keyframes putar {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

/* Slider */
.slider-div {
   margin-top: 120px;
}

.carousel {
   max-width: 700px;
}


/* marquee */
.marque {
   display: flex;
   justify-content: center;
}

@keyframes marquee {
   0% {
      transform: translateX(150%);
   }

   100% {
      transform: translateX(-150%);
   }
}

.uppercase {
   text-transform: uppercase;
   font-size: 16px;
}

.tabel_size {
   width: 20%;
   text-transform: uppercase;
}

/* Berita */
iframe {
   max-width: 100%;
   height: 1400px;
   min-height: 100vh;
   margin-top: -340px;
}

.mainCenter {
   display: block;
   position: relative;
   margin: 60px auto;
   text-align: center;
   z-index: 1;
}

@media (max-width:320px) {
   #content {
      margin-top: 90px;
   }

   .judul_page {
      font-size: 14px;
   }

   /* Prediksi */
   .card-header {
      font-size: 14px;
   }

   .tabel_size {
      font-size: 8px;
      text-transform: uppercase;
   }

   .t-body {
      font-size: 6px;
   }
}

@media (max-width:360px) {
   .navbar-brand .logo {
      width: 150px;
      height: 30px;
   }

   .judul_page {
      font-size: 18px;
   }

   /* Prediksi */
   .card-header {
      font-size: 12px;
   }

   .tabel_size {
      font-size: 6px;
      text-transform: uppercase;
   }

   .judul_tabel {
      font-size: 10px;
   }

   .t-head {
      font-size: 8px;
   }

   .t-body {
      font-size: 6px;
   }
}

@media (max-width:480px) {
   #bola {
      display: none;
   }
   
   .navbar-brand .logo {
      width: 170px;
      height: 30px;
   }

   .judul_page {
      font-size: 18px;
   }

   .tabel_size {
      font-size: 8px;
      text-transform: uppercase;
   }

   /* Prediksi */
   .card-header {
      font-size: 10px;
   }

   .t-head {
      font-size: 8px;
   }

   .t-body {
      font-size: 8px;
   }
}

@media (max-width: 768px) {
   iframe {
      height: 1400px;
      min-height: 100vh;
   }

   .navbar-brand .logo {
      width: 180px;
      height: 50px;
   }

   .judul_page {
      font-size: 18px;
   }

   .tabel_size {
      font-size: 7px;
      text-transform: uppercase;
   }

   /* Prediksi */
   .card-header {
      font-size: 14px;
   }

   .t-head {
      font-size: 10px;
   }

   .t-body {
      font-size: 8px;
   }
}


/* calculator parley */
.card-parlay {
   background-color: #333333d7;
   margin: 30px auto;
   color: #fff;
   word-wrap: break-word;
   background-clip: border-box;
   border: var(--bs-card-border-width) solid var(--bs-card-border-color);
   border-radius: var(--bs-card-border-radius)
}

.card-parlay-title {
   padding-top: 15px;
}

.card-parlay form {
   margin: 50px;
}



/* footer */
.footer-clean {
   padding: 50px 0;
   background-color: #000000;
   color: #ffffff;
   bottom: 0;
}

.footer-clean h3 {
   margin-top: 0;
   margin-bottom: 12px;
   font-weight: bold;
   font-size: 16px;
   color: #00a857;
}

.footer-clean ul {
   padding: 0;
   list-style: none;
   line-height: 1.6;
   font-size: 14px;
   margin-bottom: 0;
}

.footer-clean ul a {
   color: inherit;
   text-decoration: none;
   opacity: 0.8;
}

.footer-clean ul a:hover {
   opacity: 1;
}

.footer-clean .item.social {
   text-align: right;
}

@media (max-width:767px) {
   .footer-clean .item {
      text-align: center;
      padding-bottom: 20px;
   }

   .footer-clean .item.social>a {
      font-size: 24px;
      width: 30px;
      height: 30px;
      line-height: 30px;
   }
}

@media (max-width: 768px) {
   .footer-clean .item.social {
      text-align: center;
   }
}

.footer-clean .item.social>a {
   font-size: 24px;
   width: 50px;
   height: 50px;
   line-height: 50px;
   background-color: #4d4d4d;
   display: inline-block;
   text-align: center;
   border-radius: 50%;
   margin-left: 10px;
   margin-top: 22px;
   color: inherit;
   opacity: 0.75;
}

.footer-clean .item.social>a:hover {
   opacity: 0.9;
}

@media (max-width:991px) {
   .footer-clean .item.social>a {
      margin-top: 40px;
   }
}

@media (max-width:767px) {
   .footer-clean .item.social>a {
      margin-top: 10px;
   }
}

.footer-clean .copyright {
   margin-top: 14px;
   margin-bottom: 0;
   font-size: 13px;
   opacity: 0.6;
   color: #ffffff;
   text-decoration: none;
}

/* modal CSS */
.modal-custom {
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 1000;
}

.modal-custom .modal-content {
   padding: 20px;
   border-radius: 10px;
   text-align: center;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
   max-width: 900px;
}

#btn-close {
   background: none;
   border: none;
   color: #ff0000;
}


/*Style Telegram*/
.telegram {
   position: fixed;
   bottom: 70px;
   right: 5px;
   width: 65px;
   height: 65px;
   z-index: 9999;
}

.telegram:before {
   content: "";
   background-repeat: no-repeat;
   background-size: 65px 65px;
   background-position: center center;
   width: 65px;
   height: 65px;
   background-image: url("https://cdn.duniabermain.net/RHGroup/Telegram.gif");
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 100%;
   box-shadow: rgb(0 0 0 / 40%) 2px 2px 6px;
   transition: all 0.5s ease 0s;
}

.telegram:after {
   width: 100px;
   padding: 5px 10px;
   position: absolute;
   bottom: 100%;
   margin-bottom: 10px;
   right: -150px;
   text-align: right;
   color: #555;
   border: 1px solid #dedede;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 4px;
   opacity: 0;
   transition: all 0.4s ease-in-out;
   font-size: 90%;
   line-height: 1.1;
}

.telegram:hover:after {
   opacity: 1;
   right: 0;
}