@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+Devanagari&family=Noto+Sans+JP&family=Noto+Sans+KR&family=Noto+Sans+Khmer&family=Noto+Sans+Lao&family=Noto+Sans+Myanmar&family=Noto+Sans+SC&family=Noto+Sans+Thai&display=swap');
@import url('lib/bootstrap.min.css');
* { font-family: 'Noto Sans', sans-serif; }
body { background-color: #181e25; color: #fff; }
.text-gold { color: #ca8d1b !important; }
.bg-gold { background-color: #ca8d1b !important; }
.text-yellow { color: #fcd535 !important; }
.bg-yellow { background-color: #fcd535 !important; }

.text-lightgold { color: #d7c54e !important; }
.bg-lightgold { background-color: #d7c54e !important; }
.golden_gradient { background:linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); }
.svg-white { filter: invert(100%) brightness(100%); }

#headerTop { background-image: linear-gradient(-180deg, #0C1117 0%, #162C3F 100%); }

nav {
  /* height: 85px; */
  background: url(../images/nav-bg02.png), linear-gradient(-180deg, #2D465F 16%, #142531 48%, #0B1720 49%, #132A3C 85%, #162F42 91%, #1E3F59 92%, #0C171F 100%);
  background-position: right;
  background-repeat: no-repeat;
  background-blend-mode: lighten, normal;
  display: flex;
  padding: 0; margin: 0;
}
nav a {
  padding: 6px 2px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  min-width: 80px;
  max-width: 120px;
  flex: 1 1 0; /* Prevents growing/shrinking */
}
nav a:hover { color: #f00 !important; }
nav a:hover .svg-white { filter: brightness(50%) sepia(100%) saturate(10000%) hue-rotate(0deg); }
nav span.icon {
  display: block;
  min-height: 40px;
  background-position: center !important;
  background-size: 32px !important;
}
nav span.icon_label { font-size: 0.8rem; display: flex; padding: 4px; text-align: center; align-items: center; justify-content: center; }
#navSoccer { background: url(../images/icon_football3.png) no-repeat; }
#navLive { background: url(../images/icon-live.svg) no-repeat; }
#navFishing { background: url(../images/icon-hall.svg) no-repeat; }
#navSlot { background: url(../images/icon-slot.svg) no-repeat; }
#navHot { background: url(../images/crown4.png) no-repeat; }
span#homeIcon  { width: 117px; height: 40px; background: url(../images/home_bg.png) no-repeat; background-size: contain; display: inline-block; }


body {
  position: relative;
  min-height: 100vh;
  padding-bottom: 50px; /* Match footer height */
}
footer {
  position: absolute;
  display: flex;
  padding: 0; margin: 0;
  bottom: 0;
  width: 100%;
  height: 50px; /* Fixed height */
  background: linear-gradient(0deg, #2D465F 16%, #142531 48%, #0B1720 49%, #132A3C 85%, #162F42 91%, #1E3F59 92%, #0C171F 100%);
}
footer a {
  padding: 2px;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  min-width: 60px;
  max-width: 100px;
  flex: 1 1 0; /* Prevents growing/shrinking */
}
footer a:hover { color: #f00 !important; }
footer a:hover .svg-white { filter: brightness(50%) sepia(100%) saturate(10000%) hue-rotate(0deg); }
footer span.icon, footer span.icon_nolabel {
  display: block;
  min-height: 30px;
  background-position: center !important;
}
footer span.icon { background-size: 24px !important; }
footer span.icon_nolabel { background-size: 36px !important; }
footer span.icon_label { font-size: 0.7rem; display: flex; text-align: center; align-items: center; justify-content: center; }
#footerMenu { background: url(../images/menu.svg) no-repeat; }
#footerHot { background: url(../images/hot3.svg) no-repeat; }
#footerBrand { background: url(../images/brand3.svg) no-repeat; }
#footerChat { background: url(../images/chatbox2.svg) no-repeat; }
#footerWallet { background: url(../images/cash.svg) no-repeat; }

.fsz_rem01, .fsz-rem01 { font-size: 0.1rem !important; }
.fsz_rem02, .fsz-rem02 { font-size: 0.2rem !important; }
.fsz_rem03, .fsz-rem03 { font-size: 0.3rem !important; }
.fsz_rem04, .fsz-rem04 { font-size: 0.4rem !important; }
.fsz_rem05, .fsz-rem05 { font-size: 0.5rem !important; }
.fsz_rem06, .fsz-rem06 { font-size: 0.6rem !important; }
.fsz_rem07, .fsz-rem07 { font-size: 0.7rem !important; }
.fsz_rem08, .fsz-rem08 { font-size: 0.8rem !important; }
.fsz_rem09, .fsz-rem09 { font-size: 0.9rem !important; }
.fsz_rem10, .fsz-rem10 { font-size: 1.0rem !important; }
.fsz_rem11, .fsz-rem11 { font-size: 1.1rem !important; }
.fsz_rem12, .fsz-rem12 { font-size: 1.2rem !important; }
.fsz_rem13, .fsz-rem13 { font-size: 1.3rem !important; }
.fsz_rem14, .fsz-rem14 { font-size: 1.4rem !important; }
.fsz_rem15, .fsz-rem15 { font-size: 1.5rem !important; }
.fsz_rem16, .fsz-rem16 { font-size: 1.6rem !important; }
.fsz_rem17, .fsz-rem17 { font-size: 1.7rem !important; }
.fsz_rem18, .fsz-rem18 { font-size: 1.8rem !important; }
.fsz_rem19, .fsz-rem19 { font-size: 1.9rem !important; }
.fsz_rem20, .fsz-rem20 { font-size: 2.0rem !important; }
.fsz_rem21, .fsz-rem21 { font-size: 2.1rem !important; }
.fsz_rem22, .fsz-rem22 { font-size: 2.2rem !important; }
.fsz_rem23, .fsz-rem23 { font-size: 2.3rem !important; }
.fsz_rem24, .fsz-rem24 { font-size: 2.4rem !important; }
.fsz_rem25, .fsz-rem25 { font-size: 2.5rem !important; }
.fsz_rem26, .fsz-rem26 { font-size: 2.6rem !important; }
.fsz_rem27, .fsz-rem27 { font-size: 2.7rem !important; }
.fsz_rem28, .fsz-rem28 { font-size: 2.8rem !important; }
.fsz_rem29, .fsz-rem29 { font-size: 2.9rem !important; }
.fsz_rem30, .fsz-rem30 { font-size: 3.0rem !important; }


.pageTitle {
  padding: 2px 0 2px 0; margin: 8px 0 16px 0;
  text-align: left;
  /* background-color: rgba(255, 255, 255, 0.1); */
  border-bottom: 1px solid rgba(252, 213, 53, 0.3) !important;
  color: #cfaf30 !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
}
.pageSubtitle {
  text-align: left;
  color: #fff !important;
  font-weight: bold;
  font-size: 1.6rem !important;
}

input, textarea, select {
  background-color: #181e25 !important;
  color: #fff !important;
  border: 1px solid #495057 !important;
}

input[type="checkbox"] {
  background-color: #181e25 !important;
}

input:focus, textarea:focus, select:focus {
  background-color: #1c2329 !important;
  color: #cfaf30 !important;
  border: 1px solid #cfaf30 !important;
}

input::placeholder, textarea::placeholder, select::placeholder {
  color: #707a8a !important;
}


label.required::after {
  content: " *";
  color: #ffc107; /* Bootstrap's yellow color */
  /* Or use any yellow you prefer: */
  /* color: yellow; */
  /* color: #ffff00; */
  /* color: #ffeb3b; */
}


/* Side Menu Styles */
.sidemenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  background: #1c1c1c;
  color: #fff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  will-change: transform;
  box-shadow: 2px 0 5px rgba(0,0,0,0.5);
}
.sidemenu.show {
  transform: translateX(0);
}

.sidemenu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1040;
}
.sidemenu-overlay.show {
  opacity: 1;
  visibility: visible;
}

.or-separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #181e25; /* Bootstrap's secondary/gray color */
  margin: 20px 0;
}

.or-separator::before,
.or-separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #47515f; /* Bootstrap's light gray */
}

.or-separator span {
  padding: 0 10px;
  color: white; /* White text for "OR" */
  background-color: #181e25; /* Match the gray of the lines */
  border-radius: 20px;
  font-weight: bold;
}

@media (min-width: 576px) {
  .border-or-separator { border: 1px solid #47515f !important; }
}



.swal2-container.swal2-bottom {
  top: auto;
  bottom: 0;
}