body {
  background: url(https://cdn.robotaset.com/assets/tpl/5d81d55294/images/background.jpg) no-repeat fixed;
  background-size: cover;
  color: azure;
  margin: 0;
  font-family: Arial, sans-serif;
  background-position: center;
  position: relative;
}

.navbar {
  background-image: url('https://cdn.robotaset.com/assets/tpl/5d81d55294/images/menu.jpg');
    width: 100%; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    background-repeat: round;
}

.game-list-content {
  position: relative;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: #42c95d;
    transition: var(--bs-progress-bar-transition);
}

*,
::after,
::before {
  box-sizing: border-box;
}



#PromotionCategory {
  margin-bottom: 20px;
  background-color: #e3e9ea;
}

#GameCategory a,
#PromotionCategory a {
  border: none;
  border-radius: 0;
  padding: 8px 15px;
  font-weight: bold;
  color: #000;
}

#GameCategory a:hover,
#GameCategory a.active,
#PromotionCategory a:hover,
#PromotionCategory a.active {
  background-color: #f5d34b;
  color: #000;
}

#GameCategory a:hover,
.game-list:hover,
#PromotionCategory a:hover,
.game-list:hover {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.game-list {
  padding: 0 10px;
  position: relative;
/* margin: .8% auto; */
}

.game-list:not(.maintenance):hover {
  background-color: #815e05;
}

.game-list:hover .btn-game {
  display: block;
}

.game-list-content {
  position: relative;
}

.game-list-content>button {
  width: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  border: none;
  line-height: 28px;
  background-color: #f5f5f5;

}

#GameCategory,
#PromotionCategory {
  margin-bottom: 20px;
  background-color: #e3e9ea;
}

.figure-text {
  text-align: center;
}

.figure-text>p {
  position: relative;
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
  margin-bottom: 10px;
}

.game-favorite {
  position: absolute;
  width: 30px;
  height: 30px;
  text-align: center;
  outline: 0;
  left: -10px;
  bottom: 18px;
  font-size: 1rem;
  color: #929294;
  cursor: pointer;
  transition: ease 0.2s;
  z-index: 5;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.game-favorite>i {
  line-height: 28px;
}

.game-list-content {
  position: relative;
}

.game-list-content .game-icon-frame,
.game-list-content .maintenance-game {
  position: absolute;
  left: 0;
  z-index: 1;
}

.game-list-content .game-icon-frame {
  left: 0;
  z-index: 1;
}

.game-list-content .maintenance-game {
  z-index: 6;
  opacity: 0.8;
}

.game-list-content>button {
  width: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  border: none;
  line-height: 28px;
  background-color: #48b5cb;
  z-index: 3;
}

.game-list-content {
  position: relative;
}

.game-list-content>button {
  width: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  border: none;
  line-height: 28px;
  background-color: #e2be44;
}

[class^="col-"] {
  float: left;
}

.container {
 max-width: 1120px;
 }

.snowflake-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 0;
}

button.navbar-toggler {
 border-color: transparent;
 background-color: white;
}

.bottom-nav-bar ul li {
 width: 20%;
 border-right: 1px solid #ffffff;
}

.bottom-nav-bar i {
display: block;
margin: 6px auto 0;
width: 24px;
height: 24px;
font-size: 1.625rem;
}

a.nav-link.active.bg-warning.flex.me-2 {
border-radius: 5px;
margin: 5px;
}

li.nav-item.dropdown.bg-warning.flex.me-2 {
border-radius: 5px;
margin: 5px;
}

.carousel-caption.d-none.d-md-block {
background-color: #000000b3;
}

h5.btn.btn-primary {
font-weight: bold;
}

@media (min-width: 1400px) {
 .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 1120px;
 }
}



/* css navbar Footer */


     #bottom-nav-bar {
         background-color: #000000; /
         width: 100%;
         position: fixed; 
         bottom: 0; 
         left: 0; 
         box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); 
         z-index: 1000; 
         height: 62px;
     }

     #bottom-nav-bar ul {
         display: flex; 
         justify-content: space-between; 
         padding: 0; 
         margin: 0; 
         list-style-type: none; 
     }

     #bottom-nav-bar li {
         flex: 1; 
         text-align: center; 
     }

     #bottom-nav-bar a {
 display: block;
 padding: 10px;
 text-decoration: none;
 color: #ffffff;
}

     /* Media Query untuk tampilan mobile */
     @media (max-width: 768px) {
         #bottom-nav-bar ul {
             flex-direction: row; 
         }
     }
         /* AND */
         
         .bottom-nav-bar {
 width: 100%;
 height: 48px;
 position: fixed;
 bottom: 0;
 z-index: 60;
 background-color: #171717;
 text-align: center;
 min-width: 320px;
}

.bottom-nav-bar a {
 display: block;
 height: 48px;
 color: #ececec;
 font-size: 0.8125rem;
}

.bottom-nav-bar ul li {
 border-right-color: rgba(255, 255, 255, .2);
}
.bottom-nav-bar ul li {
 width: 20%;
 border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.navbar-fixed ul li, .user-view ol li, .user-view .member-btn li, .bottom-nav-bar ul li, .amount-button ul li, .button-group li, .game-list ul li, .promotions-category li, .buttons-option-wrap li, .account-menu li, .providerGroup li, .game-item-list ul li, .contact-item li {
 /* display: block; */
 float: left;
}
ul>li {
 list-style-type: none;
}

.bottom-nav-bar a {
 color: #ececec;
}
.bottom-nav-bar a {
 display: block;
 height: 48px;
 color: #ececec;
 font-size: 0.8125rem;
}

.bottom-nav-bar i {
 display: block;
 margin: -3px auto 0;
 width: 24px;
 height: 31px;
 font-size: 1.625rem;
}
.fa, .fab, .fad, .fal, .far, .fas {
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 display: inline-block;
 font-style: normal;
 font-variant: normal;
 text-rendering: auto;
 line-height: 1;
}
.fa, .fas {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

[class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 font-size: 22px;
 display: block;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
/* Secara default, sembunyikan footer */
#bottom-nav-bar {
     display: none;
 }

 img.me-2 {
  margin: 0px 5px 22px 0px;
}

.figure-text {
  text-align: center;
  color: white;
  font-weight: bold;
}

 /* Tampilkan footer pada tampilan tablet dan mobile */
 @media (max-width: 1024px) {
     #bottom-nav-bar {
         display: block;
     }
 }

 @media (max-width: 1024px) {
 #GameCategory,
#PromotionCategory {
  margin-bottom: 20px;
  background-color: #e3e9ea;
  flex-direction: column;
}
}