:root {

    --smaller-font: 0.7rem;

    --small-font: 0.87rem;

    --normal-font: 1rem;

    --medium-font: 1.1rem;

    --large-font: 1.7rem;

    --x-large-font: 2rem;

    --bg-color: #131313;

    --text-first: #fafafa;

    --text-second: #0a0a0a;



    --first-color: #0096c4;

    --second-color: #a4fa00;

    --third-color: #028cfd;

    --fourth-color: #014a86;

    --fifth-color: #0271cc;

    --g1: #0096c4;

    --g2: #a4fa00;

 }



.logo img {

    width: 19rem;

    display: block;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1rem;

    margin-bottom: 1rem;

}



.register-button {

    text-align: center;

    padding: 15px 20px;

    text-transform: uppercase;

    color: #ffffff;

    text-decoration: none;



    font-weight: bold;

    transition: all .4s;

    border-radius: 5px;

    margin-bottom: 10px;

    display: block;

    width: 100%;

}

.login-button {

    text-align: center;

    padding: 15px 20px;

    text-transform: uppercase;

    color: #000000;

    text-decoration: none;



    font-weight: bold;

    transition: all .4s;

    border-radius: 5px;

    margin-bottom: 10px;

    display: block;

    width: 100%;

}



.register-button {

    background: linear-gradient(#f90000 49%,#780000 49%);

    animation: blinking .7s infinite;

}



.login-button {

    background: linear-gradient(#efff00 49%, #fab907 49%);

    animation: blinkings .7s infinite;

}



@keyframes blinking{

    0%{border:2px solid #f90000}

    100%{border:2px solid #ffffff}

}

@keyframes blinkings{

    0%{border:2px solid #ffffff}

    100%{border:2px solid #000000}

}



.slot {



  display: block;



}







.slot .slot-sidebar {



  padding-right: 10px;



  padding-left: 0;



  margin-top: 5px;



  float: none !important;



  width: 100% !important;



  flex: none !important;



  max-width: 100% !important;



  padding-right: 0 !important;



}







.btn-provider:hover {

  border: 1px solid #fff;

  background-color: #000000;

}







.slot-sidebar-nav {



  display: -ms-flexbox;



  display: flex;



  -ms-flex-wrap: wrap;



  flex-wrap: nowrap;



  padding-left: 0;



  margin-bottom: 0;



  list-style: none;



}







.slot-sidebar-nav>li {



  border-bottom: 1px solid #03a7ff;



  width: 100%;



  position: relative;



  display: block;



  border-bottom: none;



  padding: 6px;



  background: linear-gradient(to bottom, #f9ff00 0%, #fab907 88%);



  /* WARNA BUTTON PROVIDER 1 */



}



@media (max-width: 767px) {

.slot-sidebar-nav>li {

  padding: 4px 2px;

}

}



.modal-content {

  background-color: #000000;

  color: #fff;

  font-weight: bold;

  border: 1px solid #fff;

}

.slot-sidebar-nav>li>a {



  color: #fff;



  font-size: 13px;



  padding: 7px 10px;



  display: block;



  background-color: black;



}







.btn-provider {



  text-align: center;



  display: block;



}







.enter {



  display: none;



}







.btn-provider span {



  position: unset;



}







.active {

  background: linear-gradient(to bottom, #03a7ff 0%, #02395e 88%);

}



.next-btn {

  background: linear-gradient(to bottom, #ff0000 0%, #5f0000 88%);

  width: 15%;

}







.mySlides {

  display: none;

}







.next-btn {

  background-color: #000000;

  border: none;

  color: #fff;

}



@media (max-width: 992px) {



  .slot-sidebar-nav {



    flex-wrap: nowrap;



  }







  .slot-sidebar {



    float: none !important;



    width: 100% !important;



    flex: none !important;



    max-width: 100% !important;



    padding-right: 0 !important;



  }







  .content {



    float: none !important;



    width: 100% !important;



    flex: none !important;



    max-width: 100% !important;



  }







  .card {



    width: 33.3% !important;



  }







  .hover-btn {



    display: none;



  }







  .hover-btn:hover~.img-zoom {



    transform: scale(1);



    position: relative;



  }







  .btn-provider {



    text-align: center;



    display: block;



  }







  .enter {



    display: block;



  }







  .btn-provider span {



    position: unset;



  }







  .btn-provider i {



    margin: 0;



  }







  .slot-sidebar-nav li {



    border-bottom: none;



  }







  .slot-sidebar-nav li a p {



    font-size: 5px;



  }







  .img-zoom {



    height: auto;



  }







  .slot-sidebar-nav li a img {



    height: 17.5px !important;



  }







  .maintenance p {



    font-size: 5px;



  }



}



.rtp-card {

    background: linear-gradient(0deg, #ffee00 0%, #ffd400 100%);

    padding: 0.7rem;

    text-align: center;

    width: 24rem;

    max-width: 100%;

    height: 100%;

    align-items: center;

    border-radius: 5px;

    margin-bottom: 0.7rem;

    position: relative;

    z-index: 1;

}



.rtp-card-img {

    max-width: 100%;

    width: 29rem;

    display: block;

    margin-left: auto;

    margin-right: auto;

    border-radius: 5px;

}



.place-img-rtp {

    width: 100%;

    padding: 0.5rem;

    position: relative;

    overflow: hidden;

    z-index: 1;

    display: flex;

    justify-items: center;

    border-radius: 5px;

    box-shadow: 1px 0px 4px 2px #131313 inset;

}



.place-img-rtp:hover {

    cursor: pointer;

}



.btn-play {

    position: absolute;

    top: 50%;  /* position the top  edge of the element at the middle of the parent */

    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%);

    z-index: 10;

    border: none;

    border-radius: 5px;

    padding: 0.3rem;

    width: 12rem;

    font-size: 0.6rem;

    font-weight: bold;

    text-transform: capitalize;

    max-width: 70%;

    border: 2px solid #000000;

    background: linear-gradient(0deg, #ffee00 0%, #ffd400 100%);

    color: var(--text-first);

}



.btn-play:hover {

    background: linear-gradient(0deg, #fab907 0%, #000000 100%);

}



.pola-wrapper {

    background: var(--text-second);

    padding: 0.9rem;

    width: 14rem;

    max-width: 100%;

    border-radius: 5px;

    position: relative;

}



.pola-wrapper h4 {

    font-size: 0.9rem;

}



.pola-wrapper h5 {

    font-size: 0.7rem;

}



.pola-wrapper h4 i, .pola-wrapper h5 i {

    color: #000000;

}



.jam-wrapper {

    background: #131313;

    border-radius: 50%;

    padding: 0.6rem;

}



.table-pola {

    max-width: 100%;

    width: 9rem;

}



.table-pola tr td {

    text-align: center;

    font-size: 0.7rem;

}



.top-game, .hot-game {

    background-repeat: no-repeat !important;

    position: absolute;

    width: 3rem;

    top: 0rem;

    height: 2.9rem;

    left: 0.4rem;

    z-index: 2;

}



.top-game {

    background: url('../img/top.gif');

}



.hot-game {

    background: url('../img/hot.gif');

}



.icon-providers {

    position: absolute;

    display: block;

    margin-left: auto;

    margin-right: auto;

    width: 2rem;

    top: 0.5rem;

    right: 0.5rem;

}



.icon-providers img {

    width: 1.7rem;

}



.slider, .swiper {

    width: 100%;

    max-width: 100%;

}



.slider {

    /*padding: 1rem;*/

}



.slider-img {

    width: 100%;

    max-width: 100%;

    display: block;

    margin-left: auto;

    margin-right: auto;

}



.slider-wrapper {

    background: linear-gradient(0deg, var(--text-second) 0%, var(--text-second) 100%);

    height: 100%;

    /*border-bottom: 1px dashed #000000;*/

}



.bg-theme {

    background: var(--bg-color);

    padding: 0.5rem;

}



.running-text {
    background: #fbcf05;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1rem;
    color: #fbcf05;
    padding: .2rem .8rem .5rem;
    border-radius: 5px 5px 0 0;
}



.running-text marquee {

    /*background: #000;*/

    /*border-radius: 3px;*/

    /*padding: 3px 2px;*/

    line-height: 1;

    font-weight: bold;

}



.icon-prov {

    background: linear-gradient(0deg, #ffee00 0%, #ffd400 100%);

    display: flex;

    justify-content: center;

    position: relative;

    overflow: auto !important;

}



.icon-card-bg {

    cursor: pointer;

    padding: 0.1rem !important;

    color: var(--text-first);

}



.icon-card-bg p {

    font-size: 0.73rem;

    font-weight: 700;

    color: var(--text-first);

    text-align: center;

    white-space: nowrap;

    text-transform: uppercase;

}



.img-prov {

display: block;

margin-right: auto;

margin-left: auto;

}



.item-prov {

    padding: 0 0.5rem;

}



.btn-credit {

    background: linear-gradient(to right top, #ffffff, #000000, var(--second-color), var(--fifth-color), #ffffff);

    box-shadow:  0px 0px 0px 1px #000000, inset 0px 2px 0px 0px #000000, inset 0px 0px 0px 2px #000000, 3px 3px 3px 1px rgb(0 0 0 / 20%);

    padding: 0.6rem;

    color: var(--text-first);

    border: none;

    font-weight: bold;

    border-right: 1px solid #000000;

}



.btn-credit:hover {

    background: linear-gradient(0deg, #fab907 0%, #000000 100%);

}



.nav-bottom {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    z-index: 11;

    overflow: hidden;

    width: 100%;

    border-top: 3px solid #fab907;

}



.item-nav-bottom {

    background: linear-gradient(0deg, #000000 0%, #3b3b3b 100%);

    color: var(--text-first);

    font-weight: bold;

    text-align: center;

    font-size: 0.8rem;

    padding: 0.3rem;

}



.item-nav-bottom:hover {

    background: linear-gradient(0deg, #000000 0%, #3b3b3b 100%);

    cursor: pointer;

}



.item-nav-bottom p {

    margin: 0;

    padding: 0;

    margin-bottom: 0;

}



.btn-up {

  display: none;

  position: fixed;

  bottom: 3.8rem;

  right: 0;

  z-index: 99;

  font-size: 0.9rem;

}



/* Percentage */

.percent{

    height: 19px;

    margin-top: 10px !important;

    display: flex;

    overflow: hidden;

    font-size: .75rem;

    background-color: #e9ecef;

    /* border-radius: .25rem; */

    position: relative;

    z-index: 1;

    border-radius: 5px;

    width: 100%;

    margin: 0 auto;

    position: relative;

}



.percent p{

    z-index: 15;    

    position: absolute;

    text-align: center;

    width: 100%;

    font-size: 13px;

    top: -15px;

    font-weight: bold;

    transform: translateY(14px);

    color: black;

}



.percent-bar{

    /* background-color: #ffc107; */

    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);

    background-size: 1rem 1rem;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    -ms-flex-pack: center;

    justify-content: center;

    overflow: hidden;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    /* background-color: #007bff; */

    transition: width .6s ease;

    -webkit-animation: progress-bar-stripes 2s linear infinite;

    animation: progress-bar-stripes 1s linear infinite;

    /* animation: ; */

    z-index: 10;

}



.good{

    background-color: #ffc107;

}



.great{

    background-color: #28a745;

}



.bad{

    background-color: #dc3545;

}



.content-home {

    padding: 1rem;

    margin-bottom: 4rem;

    background: var(--text-first);

    color: var(--text-second);

}



/* Container */

@media (min-width: 1200px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl {

        max-width: 1100px !important;

    }

}