html,
body {
  font-family: "Prompt", sans-serif !important;
  font-weight: 400;
  padding-top: 5px;
  background: url(../img/home/background.jpg) repeat 100% 100% fixed;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
li,
button,
p,
label,
span {
  font-family: "Prompt", sans-serif;
}

nav#navbar-header {
  padding: 4px 0;
  background: #000;
  border-bottom: 2px solid #fbc672;
}

.text-primary {
  color: #fff !important;
}

.btn-primary {
  background-image: linear-gradient(#ca9541, #f8d88b, #ca9541);
  border-radius: 10px !important;
  border: none !important;
  color: #000000 !important;
}

a,
button,
.pointer {
  cursor: pointer;
  text-decoration: none !important;
}

.bg-secondary {
  background: #0000009e !important;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 2px solid #fbc672;
  box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 40%);
}

.page-header {
  margin: 0 auto;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 4px solid #ecbd7b;
}

.page-header h4 {
  font-family: "Prompt", sans-serif;
  background: -webkit-linear-gradient( #cb9b51 22%, #f6e27a 45%, #f6f2c0 50%, #f6e27a 55%, #c49023 78%, #462523 100% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 20px;
  margin-bottom: -10px;
  font-size: 22px;
  font-weight: 600;
}

.page-header h4 span {
  font-family: "Prompt", sans-serif;
  background: -webkit-linear-gradient( #dfdeee 22%, #dfdeee 45%, #dfdeee 50%, #dfdeee 55%, #dfdeee 78%, #dfdeee 100% );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300 !important;
  font-size: 20px;
}

.page-header > i {
  margin-right: 10px;
}

.border-form {
  color: #01e9a8;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #262930;
}

.card-login {
  margin: 0 auto;
  max-width: 400px;
  background: #0000009e !important;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 2px solid #fbc672;
  padding-bottom: 0rem !important;
  display: -webkit-flex;
  flex-direction: column;
}

.border-login {
  border-bottom: 4px solid #01e9a8;
  margin-top: 15px;
  margin-bottom: 20px;
}

.toggle-sidebar-btn {
  position: absolute;
  right: 15px;
  top: 20;
  width: 70px;
  background-color: transparent;
  z-index: 1050;
}

.sidebar-menu {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1051;
  top: 0;
  right: 0;
  background-image: linear-gradient(180deg, #3a3a3a, #101010),
    linear-gradient(180deg, #f8d88b, #151515);
  overflow: hidden;
  transition: 0.3s;
  white-space: nowrap;
  -webkit-box-shadow: 0 0 20px 0 rgb(0 0 0/50%);
  -moz-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px 0 rgb(0 0 0/50%);
}

.sidebar-menu > .sidebar-header {
  
  
  /*แก้ตรงนี้*/
  
background-image: linear-gradient(#ca9541, #f8d88b, #ca9541);
  
padding: 10px 15px;
  
color: #000;
  
font-size: 26px;
  
font-weight: bold;
  
text-align: center;
}

.sidebar-menu > .sidebar-header > a {
  color: #000;
  float: left;
  margin-top: 8px;
}

.sidebar-menu > .menu-list {
  padding-left: 2rem;
  padding-right: 2rem;
}

.sidebar-menu > .menu-list > .menu:not(:last-child) {
  border-bottom: 1px solid #bbbcbd;
}

.sidebar-menu > .menu-list > .menu.col-6:nth-child(odd) > a {
  border-right: 1px solid #bbbcbd;
}

.sidebar-menu > .menu-list > .menu.col-6 > a {
  margin-left: -15px;
  margin-right: -15px;
  padding: 8px 0;
}

.sidebar-menu > div:not(.sidebar-header) a {
  color: #bbbcbd;
  display: block;
}

.sidebar-menu > .menu-list > .menu.col-6 > a > i.fa {
  margin-bottom: 10px;
}

.sidebar-menu .menu.col-6 i.fa {
  font-size: 24px;
}

.to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 80px;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid #aaa;
  border-radius: 5px;
}

.new-news {
  font-size: 12px;
  border-radius: 50%;
  padding: 3px 7px;
  position: absolute;
  top: 15px;
  right: calc(50% - 30px);
}

.sidebar-menu .new-news {
  padding: 2px 5px;
  top: 11px;
  left: 33px;
  font-size: 12px;
  right: unset;
}

.top-section h2 {
  font-size: 32px;
  font-weight: 700;
}

.top-section h1 {
  font-size: 76px;
  font-weight: 700;
}

.menu-btn .btn {
  width: 48%;
  font-size: 22px;
  font-weight: 700;
  padding-top: 12px;
}

.menu-btn .btn > i.fa {
  margin-right: 3px;
}

.menu-btn .btn-group {
  width: 100%;
  display: block;
}

.menu-btn .btn-group > .btn:first-child {
  margin-right: 1px;
}

.bottom-section a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 15px;
}

.bottom-section a:hover {
  text-decoration: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.bottom-section a i {
  display: block;
  font-size: 34px;
  margin-bottom: 10px;
}

.credit-btn {
  font-size: 12px;
  padding: 5px;
  font-weight: 700;
}

.credit-btn > i.fa {
  font-size: 18px;
}

.fix-lg-width {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 992px !important;
  padding: 1rem 15px;
}

#refresh-credit {
  padding: 1px 4px;
  font-size: 10px;
  background-color: #bbbcbd;
  border-radius: 10px;
  position: relative;
  top: -1px;
  margin-left: 5px;
  display: inline-block;
}

#refresh-credit > i {
  color: #000;
  margin-top: 3px;
}

nav#menu-bottom {
  padding: 10px 0;
  text-align: center;
  background-image: linear-gradient(#ca9541, #f8d88b, #ca9541);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 980px;
  position: fixed;
  bottom: 0;
  backdrop-filter: blur(10px) brightness(0.5);
  border-radius: 20px 20px 0 0;
  padding: 0.6em;
  box-shadow: rgb(0 0 0/54%) 0 0 6px 2px;
  display: flex;
  justify-content: space-around;
  height: var(--footer-height);
  z-index: 10;
}

nav#menu-bottom .navbar-nav {
  width: 100%;
  flex-direction: row !important;
}

nav#menu-bottom .navbar-nav a.nav-link {
  font-size: 12px;
  padding-top: 0;
  padding-bottom: 0;
  color: #000;
  font-weight: 700;
}

nav#menu-bottom .navbar-nav a.nav-link i.fa {
  display: block;
  font-size: 26px;
  margin-bottom: 4px;
}

nav#menu-bottom .navbar-nav > li:not(:first-child) > a.nav-link {
  border-left: 1px solid #000;
}

@media (max-width: 576px) {
  .toggle-sidebar-btn {
    width: 45px;
  }
}

@media (max-width: 768px) {
  .sidebar-menu .new-news {
    left: 28px;
  }

  #page-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 375px) {
  .sidebar-menu .new-news {
    left: 21px;
  }
}

@media (max-width: 576px) {
  .top-section h2 {
    font-size: 24px;
    font-weight: 700;
  }

  .top-section h1 {
    font-size: 52px;
  }

  .menu-btn .btn {
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

.top-menu {
  margin-top: -1rem;
  margin-bottom: 1rem;
}

.top-menu .nav {
  flex-wrap: nowrap;
}

.top-menu .nav-item.active {
  background-color: #646464;
}

.top-menu .nav-item {
  background-color: #262930;
}

.nav-fill .nav-item {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.top-menu .nav-item.active > .nav-link {
  color: #fff;
}

.top-menu .nav-link {
  color: #bbbcbd;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  font-size: 14px;
  padding: 1rem 5px;
}

.top-menu .nav-link > .fa {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 16px;
}

.casino-game {
  margin: 0;
  width: 100%;
  max-width: 300px;
  cursor: pointer;
  background-color: #000;
  border-radius: 10px 10px 0 0;
  -webkit-box-shadow: inset 0 5px 5px 0 rgb(255 255 255/70%);
  -moz-box-shadow: inset 0 5px 5px 0 rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 5px 5px 0 rgb(255 255 255/70%);
}

.game-name {
  width: 230px;
}

.game-name-box {
  background: radial-gradient(
    100% 100% at 50% 0,
    #5a5a5a 0,
    #353535 44%,
    #2a2a2a 100%
  );
  display: flex;
  max-width: 300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 15px;
}

.game-name-box > .game-name {
  padding: 7px 10px;
  -webkit-border-radius: 0 0 0 10px;
  -moz-border-radius: 0 0 0 10px;
  border-radius: 0 0 0 10px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game > a:hover {
  text-decoration: none !important;
}

.game-name-box > .game-icon {
  display: table-cell;
  width: 70px;
  background: #ca9541 !important;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  -webkit-border-radius: 0 0 9px 0;
  -moz-border-radius: 0 0 9px 0;
  border-radius: 0 0 9px 0;
  padding: 5px;
}

.label-casino-online {
  margin-left: 5px;
  color: #fff;
  font-size: 14px;
}

.label-casino-online-green {
  background: #2fbd00;
}

.label-casino-online-purple {
  background: #ff00f7;
}

.input-custom {
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  margin-bottom: 3px;
}

.form-control {
  color: red !i;
  background-color: #fff;
  background-image: none;
  border: 1px solid #e5e6e7;
  border-radius: 1px;
  color: inherit;
  display: block;
  padding: 6px 12px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  font-size: 14px;
}

.btn-default {
  color: inherit;
  background: #fff;
  border: 1px solid #e7eaec;
}

.btn {
  border-radius: 3px;
}

.table-bordered {
  border: 1px solid #ebebeb;
}

.table > thead > tr > th {
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #ddd;
  line-height: 1.5;
  padding: 8px;
  vertical-align: top;
}

.table-bordered > thead > tr > th {
  background-color: #f5f5f6;
  border: 1px solid #e7e7e7;
  border-bottom-width: 1px;
}

.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.5;
  padding: 8px;
  vertical-align: top;
}

.table-bordered > tbody > tr > td {
  border: 1px solid #e7e7e7;
}

.text-primary-new {
  color: #b42121;
}

@media screen and (min-width: 480px) {
  .table-responsive {
    overflow-x: auto !important;
  }
}

.sideline {
  overflow: hidden;
  background: #ffcb00;
  background: radial-gradient(
      ellipse farthest-corner at right bottom,
      #89734c 0%,
      #89734c 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffac 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );
  position: fixed;
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  top: 50%;
  right: 0;
  text-align: center;
  font-size: 12px;
  padding: 8px;
  color: #fff;
  z-index: 1001;
  -webkit-box-shadow: 0 0 5px 0 #000;
  -moz-box-shadow: 0 0 5px 0 #000;
  box-shadow: 0 0 5px 0 #000;
  cursor: pointer;
}

.sideline i {
  font-size: 50px;
}

@media (max-width: 817px) {
  .sideline {
    top: 57%;
  }
}

@media (max-height: 830px) {
  .sideline {
    top: 45%;
  }
}

@media (max-height: 730px) {
  .sideline {
    top: 42%;
  }
}

@media (max-height: 650px) {
  .sideline {
    top: 40%;
  }
}

@media (max-width: 450px) {
  .sideline {
    font-size: 11px;
    padding: 10px 4px;
  }

  .sideline i {
    font-size: 37px;
  }
}

.card-blur {
  background: #0000009e !important;
  border-radius: 20px;
  border: 2px solid #fbc672;
}

.btn-success {
  border-radius: 10px !important;
}

@media (max-width: 425px) {
  .inlistgame .ininlistgame .text-center .bg-warning {
    font-size: 70% !important;
  }
}

.navbar-brand {
  margin: 0 auto;
}

@media only screen and (min-width: 0px) and (max-width: 374px) {
  .fix-btn {
    width: 120px;
    font-size: 10px;
  }
}

@media only screen and (min-width: 375px) and (max-width: 499px) {
  .fix-btn {
    font-size: 15px;
  }
}

@keyframes animatelight {
    0.0% {
        -webkit-filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
    }

    20.1% {
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
    }

    54.1% {
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
    }

    55.1% {
        -webkit-filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
    }

    56.1% {
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
    }

    57.1% {
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
    }

    58.1% {
        -webkit-filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
    }

    59.1% {
        -webkit-filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 15px rgba(255, 200 ,0, .5));
    }

    100% {
        -webkit-filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
        filter: drop-shadow(0px 0px 2px rgba(255, 200 ,0, .5));
    }
}

.text-white {
    color: #fff !important;
}