@font-face {
  font-family: ChancePotFont;
  src: url('../fonts/Chance Pot Font.ttf');
}

/*#region Top Nav Bar*/
html {
  scroll-padding-top: 56px;
}

#main-navbar {

  .nav-item .nav-link::after {
    display: none;
  }

  .topbar-expand {
    width: 20px;
    height: 20px;
    background-position: center center;
    background-image: url("../images/sidebar/collapsable down.png");
    display: inline-block;
    background-repeat: no-repeat;
  }

  #navbar-toggler-notification {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
    position: absolute;
    right: 5px;
    top: 5px;
  }

  a.navbar-brand small {
    font-size: 1rem !important;
  }

  .hidden-arrow-lg.dropdown-toggle:after {
    display: none !important;
  }

  .icon-custom-sidebar {
    background-image: url("../images/topbar/sidebar.png");
  }

  .icon-custom-fortune-gift {
    background-image: url("../images/topbar/fortune gift/topbar button.png");
  }

  .topbar-icon {
    width: 20px;
    height: 20px;
    background-position: center center;
    background-size: contain;
    vertical-align: text-bottom;
  }

  .topbar-notification-badge.badge {
    margin-left: -8px;
  }

  #notificationList {
    width: 250px;

    .noti-datetime {
      font-size: 0.8em;
      float: right;
      color: color-mix(in srgb, currentColor 70%, transparent);
    }
  }

  @media (max-width: 991.98px) {

    /* .below-navbar {
      margin-top: 96px;
    } */
    .hidden-arrow-lg.show-arrow.dropdown-toggle:after {
      display: inline-block !important;
    }

    .topbar-notification-badge.badge {
      margin-left: 0;
    }

    #notificationList {
      width: initial;
    }

    /* #main-navbar.navbar a.navbar-brand small{
      font-size: 0.8rem !important;
    } */
  }

  #languageDDL {

    [class|="lang"]::before,
    [class*=" lang"]::before {
      content: '';
      background-position: center center;
      width: 20px;
      /* height: 20px; */
      display: inline-block;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .lang-en::before {
      content: '';
      background-image: url("../images/topbar/lang en.png");
    }

    .lang-zh::before {
      content: '';
      background-image: url("../images/topbar/lang zh.png");
    }

    .lang-id::before {
      background-image: url("../images/topbar/lang id.png");
    }

    .lang-vi::before {
      background-image: url("../images/topbar/lang vi.png");
    }

    .lang-th::before {
      background-image: url("../images/topbar/lang th.png");
    }

    .lang-km::before {
      background-image: url("../images/topbar/lang km.png");
    }

    .lang-ms::before {
      background-image: url("../images/topbar/lang ms.png");
    }

    .lang-fil::before {
      background-image: url("../images/topbar/lang fil.png");
    }
  }
}

.below-navbar {
  margin-top: 56px;
}

.below-navbar-pad {
  padding-top: 56px;
}

.below-navbar-center.position-absolute {
  padding-top: 96px;
}

/*#endregion*/

/*shared*/

/*icon settings*/
[class^="icon-custom-"],
[class*=" icon-custom-"] {
  background-position: center center;
  display: inline-block;
  background-repeat: no-repeat;
}

.icon-custom-categorydown {
  background-image: url("../images/sidebar/collapsable down.png");
}

.icon-custom-placeholder {
  background-image: url("../images/sidebar/icon placeholder.png");
}

/*#region Side Nav Bar*/
@media (min-width: 991.98px) {
  .beside-sidebar {
    margin-left: 260px !important;
  }

  .beside-sidebar-center.position-absolute {
    padding-left: 135px !important;
  }
}

#user-box {
  background: linear-gradient(#FAF6D5, #FFF);
  color: black;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.8rem 0.7rem;
  overflow: auto;

  img.user-profile-flag {
    height: 50%;
    width: auto;
    position: absolute;
    right: 3%;
    top: 0%;
  }

  .user-credit-balance.IDR2 {
    font-size: 0.8em;
  }

  .user-credit-balance-refresh {
    &.loading {
      animation: rotation 1s linear infinite;
    }
  }
}

/* Sidebar */
#sidebarMenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 15px 0 rgb(0 0 0 / 30%), 0 2px 10px 0 rgb(0 0 0 / 30%);
  width: 255px;
  z-index: 1029;
  white-space: nowrap;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .long-link-text {
    font-size: 0.9em;
  }

  [class^="icon-custom-"],
  [class*=" icon-custom-"] {
    background-position: center center;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .sidebar-icon {
    width: 20px;
    height: auto;
    background-position: center center;
  }

  ul.collapse.list-group>li.list-group-item.disabled {
    opacity: 0.5 !important;
  }

  .list-group {
    img.sidebar_icon {
      height: fit-content;
      width: 20px;
    }

    img.collapsed_sidebar_icon {
      padding-right: 0;
      padding-left: 0;
      margin-left: calc(var(--bs-gutter-x) * 0.5);
      padding-top: .25rem;
    }

  }

  #sidebarLinks a {
    color: inherit;
    text-decoration: none;
  }

  /*icon settings*/
  #sidebarLinks {
    .gif-active {
      animation-name: blink-3-pause;
      animation-delay: 2s;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }

    /*shared*/
    .icon-custom-result-history {
      background-image: url("../images/sidebar/result history.png");
    }


    /*user*/
    .icon-custom-user {
      background-image: url("../images/sidebar/user category.png");
    }

    .icon-custom-user-profile {
      background-image: url("../images/sidebar/user profile.png");
    }

    .icon-custom-user-create {
      background-image: url("../images/sidebar/user create user.png");
    }

    .icon-custom-user-list {
      background-image: url("../images/sidebar/user user list.png");
    }


    /*game category*/
    .icon-custom-result-live {
      background-image: url("../images/sidebar/live result.png");

      /* &.gif-active {
        background-image: url("../images/sidebar/live result.gif");
      } */
    }

    .icon-custom-12b {
      background-image: url("../images/sidebar/12b category.png");

      /* &.gif-active {
        background-image: url("../images/sidebar/12b category.gif");
      } */
    }

    .icon-custom-4d {
      background-image: url("../images/sidebar/4d category.png");

      /* &.gif-active {
        background-image: url("../images/sidebar/4d category.gif");
      } */
    }

    .icon-custom-dc {
      background-image: url("../images/sidebar/dc category.png");

      /* &.gif-active {
        background-image: url("../images/sidebar/dc category.gif");
      } */
    }

    .icon-custom-toto {
      background-image: url("../images/sidebar/toto category.png");

      /* &.gif-active {
        background-image: url("../images/sidebar/toto category.gif");
      } */
    }

    .icon-custom-result-4d {
      background-image: url("../images/sidebar/4d category.png");
    }

    .icon-custom-result-toto {
      background-image: url("../images/sidebar/toto category.png");
    }


    /*game shared*/
    .icon-custom-game-addbet {
      background-image: url("../images/sidebar/game add bet.png");
    }

    .icon-custom-game-mobilebet {
      background-image: url("../images/sidebar/game mobile bet.png");
    }

    .icon-custom-game-mobilebet-playnow {
      width: 50px;
      background-image: url("../images/fixed footer/play now.png");

      animation-name: blink-3-pause;
      animation-delay: 2s;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }

    .icon-custom-game-addfixedbet {
      background-image: url("../images/sidebar/game add fixed bet.png");
    }

    .icon-custom-game-existfixedbet {
      background-image: url("../images/sidebar/game exist fixed bet.png");
    }

    .icon-custom-game-pendingbet {
      background-image: url("../images/sidebar/game pending bet.png");
    }

    .icon-custom-game-betsummary {
      background-image: url("../images/sidebar/game bet summary.png");
    }

    .icon-custom-game-currentbets {
      background-image: url("../images/sidebar/game current bets.png");
    }

    .icon-custom-game-control {
      background-image: url("../images/sidebar/game control.png");
    }

    .icon-custom-game-winloss {
      background-image: url("../images/sidebar/game winloss.png");
    }

    .icon-custom-game-strikereport {
      background-image: url("../images/sidebar/game strike report.png");
    }

    .icon-custom-game-howtowin {
      background-image: url("../images/sidebar/game how to win.png");
    }

    .icon-custom-game-remainingbet {
      background-image: url("../images/sidebar/game mobile bet.png");
    }

    /*admin stuff*/
    .icon-custom-admin {
      background-image: url("../images/sidebar/admin add result.png");
    }

    .icon-custom-admin-addresult {
      background-image: url("../images/sidebar/admin category.png");
    }
  }

}

/*#endregion*/

span.page-header {
  font-size: calc(1.3rem + 0.6vw);
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--theme-heading-color);
}

@media (min-width: 1200px) {
  span.page-header {
    font-size: 1.75rem;
  }
}

@keyframes blink-3-pause {

  0%,
  20%,
  40%,
  60% {
    opacity: 100%;
  }

  10%,
  30%,
  50% {
    opacity: 0%;
  }
}

@keyframes shimmer {

  0%,
  70% {
    mask-position: right
  }

  90%,
  100% {
    mask-position: left
  }
}

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

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

@keyframes neon-glow {
  from {
    text-shadow: 0 0 5px var(--neon-color), 0 0 10px #fff, 0 0 15px var(--neon-color);
  }

  to {
    text-shadow: 0 0 10px var(--neon-color), 0 0 20px #fff, 0 0 30px var(--neon-color);
    /* Increased glow */
  }
}

#fixedFooter {
  position: fixed;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  #fixedFooterWrapper {
    width: 100%;
    height: 100%;

    &>div {
      z-index: 1050;
      position: absolute;
      pointer-events: auto;
    }
  }


  #fixedFooter-bottomLeft {
    bottom: 0;
    left: 0;
  }

  #fixedFooter-bottomRight {
    bottom: 0;
    right: 0;
  }

  #fixedFooter-topLeft {
    top: 0;
    left: 0;
  }

  #fixedFooter-topRight {
    top: 0;
    right: 0;
  }

  #fixedFooter-playNow {
    --image-width: 120px;
    --image-url: url("../images/fixed footer/play now.png");

    display: block;
    background: white;
    /* for shimmer effect */
    mask-image: var(--image-url);
    mask-position: center;
    mask-size: var(--image-width) auto;
    mask-repeat: no-repeat;

    animation-name: blink-3-pause;
    animation-delay: 2s;
    animation-duration: 5s;
    animation-iteration-count: infinite;

    img {
      content: var(--image-url);
      width: var(--image-width);
      height: auto;
      mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
      animation-name: shimmer;
      animation-delay: 2s;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
  }

  #fixedFooter-chancePot {
    position: relative;
    display: flex;

    .button-close {
      position: absolute;
      top: 110%;
      left: 50%;
      font-size: 1em;
      color: white;
      background-color: transparent;
      border: 0;
      translate: -50% 0;
    }

    #fixedFooterLink-chancePot {
      --image-aspect-ratio: 414/150;
      --image-width: 120px;
      --image-url: url("../images/fixed footer/chance pot.png");

      /* display: block;
    mask-image: var(--image-url);
    mask-position: center;
    mask-size: var(--image-width) auto;
    mask-repeat: no-repeat; */

      div.img {
        background: var(--image-url) center / 100% 100%;
        width: var(--image-width);
        aspect-ratio: var(--image-aspect-ratio);
        height: auto;
      }

      div.img-borders {
        text-align: center;
        width: 100%;
        height: 100%;
        align-content: center;
        overflow: hidden;
      }

      .text {
        display: block;
        font-size: 1.35em;
        margin-top: 3px;
      }
    }
  }

  /* img#play-now::after{
    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
    animation-name: shimmer;
    animation-delay: 2s;
    animation-duration: 2.5s;
  } */
}

.neon-text {
  color: #fff;

  /* colored glow */
  --neon-color: #008d92;
  -webkit-text-stroke: 0.01em var(--neon-color);

  text-shadow: 0 0 5px var(--neon-color), 0 0 10px #fff, 0 0 15px var(--neon-color);
  animation: neon-glow 1s infinite alternate;
}

.chance-pot-text.neon-text {
  text-decoration: underline;
  text-decoration-color: white;
  --neon-color: #008d92;
  font-family: ChancePotFont, sans-serif;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
}