@import url("./font/font.css");
@viewport {  width: device-width;  zoom: 1;  }

:root {
  /* BACKGROUND COLOR */
  --main-bg-color: #ffffff;
  --primary-bg-color: #a57b79;
  --secondary-bg-color: #550303;
  --tertiary-bg-color: #7b0b07;

  /* TEXT COLOR */
  --primary-txt-color: #000000;
  --secondary-txt-color: #ffffff;
  --tertiary-txt-color: #5a5a5a;
  --quater-txt-color: #f1f1f1;
  --header-txt-color: #b9b9b9;

  /* ACCENT COLOR */
  --main-accent-color: #c0140e;
  --secondary-accent-color: #550303;
  --tertiary-accent-color: #7b0b07;
  --border-btm: #eae0e0;
  --mobile-frame: #fbe6e6;

  /* MISC */
  --sports-background-color: #ffffff;
  --sports-background-image: url(/data/2174/uploads/bg-homesport.jpg);

  /* SIDE SCROLLBAR */
  --scrollbar-width: 8px;
  --scrollbar-bg: #000000;
  --scrollbar-color: #550303;
  --scrollbar-borderwidth: 0px;

  /* VIP TABLE */
  --vip-table-title: #ffab16;

  /* GRADIENT */
  --btn-gradient-red: linear-gradient(to bottom, #bb0001, #550303);
  --btn-gradient-yellow: linear-gradient(to bottom, #ffce4f, #c38518);
  --header-gradient-red: linear-gradient(0deg, #550303, #99100b);

}

::-webkit-scrollbar {  background: var(--scrollbar-color);  width: var(--scrollbar-width);  }
::-webkit-scrollbar-thumb {  background: var(--scrollbar-color);  border: var(--scrollbar-borderwidth) solid var(--scrollbar-bg);  }
::-webkit-scrollbar-track {  background: var(--scrollbar-bg);  border-radius: 0px;  }

html, body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  font-family: 'Poppins-r', sans-serif;
  background: var(--secondary-bg-color);
}

.container {  width: 1300px;  width: 85%;  margin: auto;  }
.clearboth {  clear: both;  }
center {  display: none;  }

a {  color: var(--primary-bg-color);  }
a:hover {  text-decoration: none;  color: var(--primary-bg-color);  }

.slider-desktop{  display: block;  }
.flexslider .slides img {border-radius: 0px;filter: drop-shadow(0px #737373);}
.slider-mobile{  display: none; padding:0px; border-radius:0px; }
.mobile-menu {  display: none;  }

.themetbl {  display: block;  }
.themetblrow {  display: block;  }
.themetblcell {  display: block;  }
.themetblwidth {  width: 100%;  }
.themetblheight {  height: 100%;  }
.theme-container-box {  width: 100%;  height: auto;  }

#theme {  display: block;  height: 100%;  width: 100%;  position: relative;  background-size: cover;  overflow-x: hidden;  max-width: 1920px;  margin: auto;  }
#theme::-webkit-scrollbar {  /*display: none;*/  }
#theme-frame {  height: 100%;  background: var(--main-bg-color);  margin: auto;  width: 100%;  }
#theme-content {  background: var(--main-bg-color);  }
#theme-header-link {  width: 100%;  }
#theme-header-link .container {  display: flex;  align-content: center;  justify-content: center;  align-items: center;  }
#theme-header-link {  background: var(--secondary-bg-color);  }
#theme-menu {  flex-grow: 1;  }

#logo {  width: 160px;  padding: 5px 0;  }
#logo .logo img {  width: 100%;  }

#redirectaddr {  padding: 9px;  text-align: center;  font-size: 15px;  background: var(--primary-txt-color);  border-radius: 15px;  font-weight: bold;  }

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {  text-align: right;  }
#cssmenu>ul>li:hover>a, #cssmenu>ul>li.active>a {  background: transparent;  color: var(--secondary-txt-color);  text-transform: initial;  font-size: 14px;  transition: 0.2s;  font-weight: 100;  letter-spacing: 0px;  font-weight: bolder;  }

#cssmenu>ul>li::before {  content: "";  position: absolute;  background-color: var(--secondary-txt-color);  width: 100%;  height: 2px;  bottom: 0px;  left: 0;  right: 0;  margin: auto;  transition: 0.2s;  opacity: 0;  }
#cssmenu>ul>li.active::before, #cssmenu>ul>li:hover::before {  content: "";  position: absolute;  background-color: var(--secondary-txt-color);  width: 100%;  height: 2px;  bottom: 0px;  left: 0;  right: 0;  margin: auto;  transition: 0.2s;  opacity: 1;  display: none;  }

#cssmenu>ul>li.active a::before {  display: none;  }
#cssmenu>ul>li {  position: relative;  margin: 0 6px;  }
#cssmenu>ul>li>a {  padding: 20px 0;  text-transform: initial;  font-size: 14px;  color: var(--header-txt-color);  font-weight: 100;  letter-spacing: 0px;  font-weight: bolder;  }
#cssmenu>ul>li:nth-child(2), #cssmenu>ul>li:nth-child(3), #cssmenu>ul>li:nth-child(4), #cssmenu>ul>li:nth-child(7), #cssmenu>ul>li:nth-child(8) {  animation: 1s large linear infinite;  }

.m-hot {  margin-top: -15px;  }
.m-king {  margin-top: -15px;  }

@keyframes large {
     0% {  transform: scale(1);  }
     25% {  transform: scale(.95);  }
     50% {  transform: scale(1.1);  }
     75% {  transform: scale(.95);  }
     90% {  transform: scale(1);  }
}


/*===================== Dropdown Button =====================*/
.clock {  color: var(--secondary-txt-color);  font-size: 10px;  opacity: 0.7;  padding-right: 10px;  border-right: 1px solid #ffffff;  }
.dropbtn {  background: unset;  color: var(--secondary-txt-color);  border: none;  }

.dropdown {  position: relative;  display: inline-block;  }
.dropdown-content {  display: none;  position: absolute;  background-color: var(--secondary-bg-color);  min-width: 140px;  box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 20%);  z-index: 999;  border-radius: 5px;  top: 25px;  }
.dropdown-content div {  margin: 3px 10px;  }
.dropdown-content a {  color: var(--secondary-txt-color);  padding: 6px 0;  text-decoration: none;  display: block;  }
.dropdown-content a:hover {  text-decoration: underline;  }
.dropdown:hover .dropdown-content {  display: block;  padding-top: 5px;  padding-left: 3px;  left: 4px;  }
.dropbtn .glyphicon {  top: 0px;  left: 2px;  font-size: 7px;  }
.dropdown-content img, button.dropbtn img {  width: 23px;  margin-right: 6px;  }
.dropdown-content img, .dropdown-content a {  display: inline-block;  }
.dropdown-content span {  color: var(--main-accent-color);  }

#theme-header-top {  background: var(--header-gradient-red);  border-top: 0px solid var(--main-bg-color);  }
.header-link {  display: flex;  flex-direction: row;  flex-wrap: nowrap;  justify-content: space-between;  align-items: stretch;  align-content: stretch;  padding: 10px 0;  }
.header-left, .header-right {  display: flex;  align-items: center;  }

input {  outline: unset;  }
.live-chat {  padding: 0px 10px;  }
.live-chat a {  color: var(--secondary-txt-color);  }

.btn {  display: inline-block;  padding: 5px 15px;  margin-bottom: 0;  font-size: 14px;  font-weight: 400;  line-height: 1.42857143;  text-align: center;  white-space: nowrap;  vertical-align: middle;  -ms-touch-action: manipulation;  touch-action: manipulation;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  background-image: none;  border: 1px solid transparent;  border-radius: 5px;  }

.btn-box {  display: flex;  }
.btn-login {  border: 0px solid var(--secondary-bg-color);  border-radius: 5px;  margin: 0 10px 0 5px;  background: var(--main-bg-color);  }
.btn-login .btn {  color: var(--secondary-bg-color);  font-weight: bold;  font-size: 15px;  transition: 0.2s;  padding: 5px 30px;  text-transform: uppercase;  }
.btn-login .btn:hover {  background: var(--primary-bg-color);  transition: 0.2s;  color: var(--secondary-txt-color);  }

.btn-sign-up {  border: 0px solid var(--secondary-bg-color);  border-radius: 5px;  animation: 1.5s ease 0s infinite normal none move;  /*width: 110px;*/  text-align: center;  }
.btn-sign-up .btn {  color: var(--primary-txt-color);  background: var(--btn-gradient-yellow);  text-transform: uppercase;  font-weight: bold;  font-size: 15px;  transition: 0.2s;  }
.btn-sign-up .btn:hover {  background: var(--secondary-bg-color);  color: var(--secondary-txt-color);   transition: 0.2s;  }

@keyframes move {
0% {  transform: translateX(0) scale(.95); box-shadow: 0 0 0 0 rgba(255, 195, 0, .7);  }
35%, 45%, 55%, 65%, 75%, 85% {  transform: translateX(-2px);  }
50%, 60%, 70%, 80% {  transform: translateX(2px);  }
70% {  transform: scale(1);  box-shadow: 0 0 0 10px rgba(255, 82, 82, 0); }
100% {  transform: translateX(0) scale(.95);  box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);  }
}


/*===================== BANNER =====================*/
.flexslider {  border: 0;  margin: 0;  }
.flex-control-nav {  bottom: 0;  }
.flex-direction-nav .flex-prev {  left: 0;  }
.flex-direction-nav .flex-next {  right: 0;  }
.flex-direction-nav a:before {  font-size: 36px;  }
.flexslider .flex-control-nav li {  margin: 0 13px;  }
.flexslider .flex-control-paging li a {  width: 20px;  height: 5px;  border-radius: 0px;  position: absolute;  margin-top: -0.5%;  z-index: 9 !important;  background: var(--tertiary-accent-color);  }
.flexslider .flex-control-paging li a.flex-active {  background: var(--main-accent-color);  }

.annouc-txt {  display: none;  background: var(--secondary-bg-color);  padding: 5px 0;  color: var(--primary-txt-color);  margin-bottom: -10px;  }
marquee#web_announcement {  margin-bottom: -4px;  }


/*===================== HOME =====================*/
.step {  background: url(./images/step.webp) no-repeat 50%;  background-size: cover;  height: 128px;  display: flex;  margin-bottom: 15px;  }
.step ul {  display: flex;  }
.step ul li {  display: flex;  flex-direction: row;  justify-content: center;  align-items: flex-end;  width: calc(100% / 3);  }
.step ul li img {  width: 50px;  margin-right: 15px;  }

.step ul li div {  display: flex;  flex-direction: column;  }
.step ul li div span:first-child {  font-size: 15px;  color: var(--main-accent-color);  font-weight: bold;  margin-bottom: 5px;  }
.step ul li div span:nth-child(2) {  font-size: 20px;  color: var(--primary-txt-color);  font-weight: bold;  line-height: 1;  }

.sports-section {  background-color: var(--main-bg-color);  /*background-image: var(--sports-background-image);  background-position: top;  background-repeat: no-repeat;  background-size: cover;*/  }
.sports-group {  display: flex;  flex-direction: column;  justify-content: space-evenly;  align-items: flex-start;  overflow: hidden;  }

.item-title {  font-size: 20px;  color: var(--secondary-bg-color);  margin: 30px 0 10px;  font-weight: bold;  width: fit-content;  }
.sports-sec {  width: 100%;  padding: 0;  }
.content-box {  position: relative;  }
span.btn {  background: var(--btn-gradient-yellow);  color: var(--primary-txt-color);  cursor: pointer;  padding: 2px 25px;  white-space: nowrap;  }

.itemcontent {  background: linear-gradient(90deg, #63636300 0%, #ba000150 20%, #550303 50%, #56030350 80%, #63636300 100%);  position: absolute;  right: 0px;  top: 25%;  z-index: 1;  width: 100%;  display: flex;  align-items: center;  justify-content: flex-end;  height: 65%;  }
.item-content {  float: right;  width: 40%;  }
.item-content .icon-box {  width: 20%;  display: block;  margin-bottom: 12px;  position: relative;  }
.item-content .icon-box img {  max-width: 120px;  width: auto;  height: 100%;  }
.item-content p {  color: var(--secondary-txt-color);  font-size: 13px;  line-height: 1.2;  filter: drop-shadow(0px 1px 2px black);  }
.item-content a {  color: var(--primary-txt-color);  }

.carousel-indicators li {  margin: 0;  }

#imageCarousel ol.carousel-indicators {  position: relative;  width: fit-content;  left: 0;  bottom: unset;  top: 20px;  margin: 0;  float: left;  }
#imageCarousel .carousel-indicators li {  display: flex;  flex-direction: column;  margin-bottom: 20px;  position: relative;  width: 220px;  height: 40px;  background: var(--secondary-bg-color);  border: unset;  border-radius: 5px;  z-index: 1;  text-indent: 0;  filter: drop-shadow(0px 2px 2px #00000090);  }
#imageCarousel .carousel-indicators .active {  background: var(--btn-gradient-red);  }

#imageCarousel .carousel-indicators li::before, #imageCarousel .carousel-indicators li::after {  transition: background 0.5s;  content: "";  position: absolute;  }
#imageCarousel .carousel-indicators li::before {  height: 2px;  left: 0;  bottom: 0;  width: 100%;  background: var(--secondary-accent-color);  z-index: 9;  }
#imageCarousel .carousel-indicators li::after {  width: 60%;  height: 3px;  background: var(--secondary-accent-color);  left: 0;  right: 0;  bottom: 2px;  margin-left: 8px;  z-index: 9;  -webkit-transform: perspective(0.5em) rotateX(8deg);  transform: perspective(0.5em) rotateX(8deg);  }

#imageCarousel .carousel-indicators li.active::before, #imageCarousel .carousel-indicators li.active::after,
#imageCarousel .carousel-indicators li:hover::before, #imageCarousel .carousel-indicators li:hover::after {  background: var(--vip-table-title);  }

#imageCarousel {  position: relative;  background-position: right -30px bottom -30px;  background-size: contain;  background-repeat: no-repeat;  }
#imageCarousel .content-img {  position: relative;  width: 100%;  border: 0px solid var(--main-accent-color);  margin: 0 auto;  z-index: 5;  }
#imageCarousel .content-img img {  width: 40%;  position: relative;  left: 20%;  }
#imageCarousel .carousel-inner {  position: absolute;  width: 100%;  height: 300px;  overflow: hidden;  left: 0;  float: right;  }

#imageCarousel img.provider-character {  width: 86px;  position: absolute;  bottom: 0px;  right: -8px;  z-index: 2;  filter: saturate(0);  display: none;  }

#imageCarousel .carousel-indicators li.active img.provider-character, #imageCarousel .carousel-indicators li:nth-child(1):hover img.provider-character, #imageCarousel .carousel-indicators li:nth-child(2):hover img.provider-character, #imageCarousel .carousel-indicators li:nth-child(3):hover img.provider-character, #imageCarousel .carousel-indicators li:nth-child(4):hover img.provider-character {  filter: saturate(1);  transition: background 0.5s;  }

.BR, .CMD, .MAXBET, .ME {  position: absolute;  bottom: 12px;  left: 8px;  z-index: 20;  color: var(--secondary-txt-color);  font-size: 12px;  }
.ME .mobcaslogo {  display: none;  }


#imageCarousel .carousel-indicators li.active span, #imageCarousel .carousel-indicators li:nth-child(1):hover .CMD,
#imageCarousel .carousel-indicators li:nth-child(2):hover .MAXBET, #imageCarousel .carousel-indicators li:nth-child(3):hover .ME,
#imageCarousel .carousel-indicators li:nth-child(4):hover .BR {  color: var(--vip-table-title);  }


/*===================== UPCOMING EVENT =====================*/
.event-sec {  padding: 0 8%;  }

.up-event {  background: url(./images/box.webp) center center no-repeat;  background-size: cover;  width: fit-content;  padding: 10px 20px;  border-radius: 20px;  }
.up-event table img {  width: 80px;  padding: 7px;  background: #edededcc;  border-radius: 15px;  box-shadow: 0 0 2px 7px #aaaaaab8;  }
.up-event table th {  color: #001b42;  font-size: 18px;  text-align: center;  font-family: "Nunito", sans-serif;  font-weight: bold;  }
.up-event table tr td {  text-align: center;  padding: 3px 5px;  color: var(--primary-txt-color);  font-weight: bold;  font-size: 12px;  }
.up-event table tr td a {  background: var(--primary-bg-color);  color: var(--primary-txt-color);  cursor: pointer;  border-radius: 5px;  display: block;  padding: 3px 7px;  margin: 3px;  }

.up-event table tbody tr:first-child td:nth-child(2) {  font-size: 16px;  font-weight: bold;  color: var(--primary-txt-color);  text-align: center;  }
.up-event table tbody tr:nth-child(2) td, .up-event table tbody tr:nth-child(5) td {  text-align: center;  font-size: 16px;  color: #001b42;  font-weight: bold;  }
.up-event table tbody tr:nth-child(5) td span {  font-size: 12px;  font-weight: normal;  }
.up-event table tbody tr:first-child td p {  margin-top: -6px;  margin-bottom: -10px;  }
.up-event table tbody tr:nth-child(5) td p {  margin: 0;  margin-bottom: -11px;  }
.up-event table tbody tr:nth-child(5) td:nth-child(even) {  background: var(--primary-txt-color);  }
.up-event table tbody tr:nth-child(5) td:nth-child(odd) {  background: var(--primary-txt-color);  }

#eventCarousel {  width: fit-content;  margin-top: 25px;  }
#eventCarousel .carousel-control {  bottom: unset;  top: 43%;  vertical-align: middle;  height: 30px;  width: 30px;  background-image: unset !important;  background: #8b8b8b;  border-radius: 15px;  }

#eventCarousel .carousel-control .glyphicon-chevron-left, #eventCarousel .carousel-control .glyphicon-chevron-right,
#eventCarousel .carousel-control .icon-next, #eventCarousel .carousel-control .icon-prev {  background: unset;  border-radius: unset;  font-size: 15px;  height: unset;  margin: unset;  top: 0;  transform: translateY(50%);  left: 0;  right: 0;  width: 100%;  margin: auto;  }

#eventCarousel .carousel-indicators {  bottom: 0;  margin-bottom: -25px;  }
#eventCarousel .carousel-indicators li.active {  background-color: var(--primary-bg-color);  width: 10px;  height: 10px;  margin: 1px;  }
#eventCarousel .carousel-indicators li {  background-color: #9f9f9f;  border: 0px solid var(--primary-txt-color);  margin: 1px;  }
#eventCarousel .carousel-control.left {  left: -15px;  }
#eventCarousel .carousel-control.right {  right: -15px;  }

.contact-box {  position: relative;  }
.contact-box img {  width: 100%;  }

.contact-list {  display: -webkit-flex;  display: flex;  position: absolute;  left: 15%;  top: 0;  transform: translateY(50%);  }
.contact-list svg path {  fill: var(--primary-bg-color) !important;  }

.contact-list li {  display: -webkit-flex;  display: flex;  -webkit-align-items: center;  align-items: center;  margin-right: 10px;  cursor: pointer;  white-space: nowrap;  }
.contact-list li svg {  width: 40px;  }
.contact-list li div {  display: -webkit-flex;  display: flex;  -webkit-flex-direction: column;  flex-direction: column;  }

.contact-list li span, .contact-list a {  transition: color 0.3s;  color: var(--primary-txt-color);  }
.contact-list li span:nth-child(2):hover, .contact-list a:hover {  text-decoration: none;  color: var(--primary-bg-color);  }

.prod-section {  background: var(--main-bg-color);  }
.prod-box {  display: flex;  margin: 30px 0; flex-direction: column;  }

.select-sec ul {  border-bottom: 1px solid var(--border-btm);  }
.select-sec ul li {  padding: 10px 20px;  background: var(--primary-bg-color);  border-radius: 5px 5px 0 0;  font-weight: bold;  cursor: pointer;  margin-right: 10px;  border: 1px solid var(--primary-bg-color);  color: var(--primary-txt-color);  list-style: none;  }
.select-sec ul li.inactive {   color: var(--primary-txt-color);  background: var(--secondary-bg-color);  border: 1px solid var(--primary-txt-color);  }

ul#tabs {  display: flex;  flex-direction: row;  margin: 0;  padding: 0;  }
ul#tabs li img {  width: 100%;  border-right: 5px solid var(--primary-bg-color);  -webkit-filter: grayscale(0);  filter: grayscale(0);  }
ul#tabs li.inactive img {  border-right: 0 solid var(--primary-bg-color);  -webkit-filter: grayscale(1);  filter: grayscale(1);  }



/*===================== SLOT HOME =====================*/
.slot-section {  background: var(--main-bg-color);  }
.slot-section .prod-box {  display: flex;  margin: 30px 0;  flex-direction: row;  }

.jackpot {  position: relative;  width: 30.3%;  }
.jackpot img {  width: 100%;}
.jackpot span {  position: absolute;  top: 2rem;  left: 0;  right: 0;  width: 100%;  text-align: center;  color: var(--primary-txt-color);  font-weight: bold;  font-size: 16px;  }
#jackpot {  position: absolute;  text-align: center;  top: 9rem;  left: 0;  right: 0;  width: 100%;  margin: auto;  }

.games {  width: 100%;  }
.games>ul {  display: flex;  }
.games-content ul {  display: flex;  margin: 0;  padding: 0;  flex-direction: row;  flex-wrap: wrap;  gap: 10px;  }
.games-content ul li {  width: calc(100% / 5.2);  margin: 0;  transition: 0.3s;  border-radius: 5px;  overflow: hidden;  }
.games-content ul>li>img {  width: 100%;  }

ul#tabss {  border-bottom: 1px solid var(--border-btm);  margin-left: 0px;  padding: 0;  }
.games>ul li {  padding: 10px 20px;  background: var(--btn-gradient-red);  border-radius: 5px 5px 0 0;  font-weight: bold;  cursor: pointer;  border: 0px solid var(--tertiary-bg-color);  list-style: none;  width: 22%;  text-align: center;  border-bottom: none;  }

.games>ul li.inactive {  background: var(--border-btm);  border: 0px solid var(--tertiary-bg-color) ;  border-bottom: none;  }
.games>ul li:hover {  background: var(--btn-gradient-yellow);  transition: 0.2s;  }

.games>ul li a {  color: var(--secondary-txt-color);  text-decoration: none;  }
.games>ul li.inactive a {  color: var(--primary-txt-color);  }
.games>ul li:hover a {  color: var(--primary-txt-color);  transition: 0.2s;  }

.more-games {  flex-grow: 3;  text-align: right;  padding: 10px 20px;  font-weight: bold;  }
.more-games a {  color: var(--tertiary-bg-color);  font-size: 13px;  text-decoration: none;  cursor: pointer;  }

.img-box {  position: relative;  }
.img-box img {  width: 100%;  border-radius: 10px 10px 0 0;  }
img.love {  width: 20px !important;  filter: brightness(5);  display: none;  }

.hover-box {  position: absolute;  padding-top: 0;  top: 0;  left: 0;  right: 0;  width: 100%;  height: 100%;  transform: translateY(90%);  opacity: 0;  background: #ffffff90;  transition: 0.3s;  display: flex;  flex-direction: column;  text-align: center;  justify-content: center;  border-radius: 10px 10px 0 0;  }

.games-content ul li a {  text-decoration: none;  }
.games-content ul li:hover {  transform: translateY(-5px);  transition: 0.3s;  }
.games-content ul li:hover .hover-box {  transform: translateY(0);  opacity: 1;  transition: 0.3s;  }

.hover-box span {  width: 70%;  margin: 5px auto;  border-radius: 5px;  padding: 5px;  font-size: 12px;  font-weight: bold;  cursor: pointer;  color: var(--main-bg-color);  }
.hover-box span:last-child {  background: var(--tertiary-txt-color);  }
.hover-box span:first-child {  background: var(--tertiary-bg-color);  color: var(--secondary-txt-color);  }

.txt-box {  position: relative;  margin: 0;  display: flex;  color: var(--secondary-bg-color);  padding: 10px;  justify-content: space-between;  background: var(--border-btm);  border-radius: 0 0 10px 10px;  font-size: 13px;  }
.img-box::before {  content: "";  height: 4px;  left: 0;  bottom: 0;  width: 100%;  background: var(--tertiary-bg-color);  position: absolute;  z-index: 9;  }
.img-box::after {  content: "";  width: 40%;  height: 6px;  background: var(--tertiary-bg-color);  position: absolute;  left: 30%;  right: 30%;  bottom: 2px;  z-index: 9;  -webkit-transform: perspective(0.5em) rotateX(8deg);  transform: perspective(0.5em) rotateX(8deg);  }


.slot-more {  margin: 10px 0;  }
.slot-more ul {  display: flex;  flex-wrap: wrap;  margin: 0;  padding: 0;  align-items: center;  flex-direction: row;  justify-content: space-between;  text-align: center;  }
.slot-more ul li {  width: calc(100% / 8);  padding: 5px;  list-style: none;  }
.slot-more ul li img {  width: 100px;  }
.slot-more h3 {  color: var(--primary-txt-color);  }

/*===================== VIDEO WITHDRAWAL ===================== */
/*
.vid-sec {  position: relative;  overflow: hidden;  width: 50%;  margin: 0 10px;  }
.vid-frame iframe {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  width: 100%;  height: 100%;  }
.select-sec {  height: 30rem;  overflow-y: auto;  padding: 0 10px;  }
ul#tabs li:not(:nth-child(1)) {  padding-top: 20px;  }
*/

.homevideowithdrawal {  width: 100%;  background: var(--main-bg-color);  display: flex;  }
.homevideo {  width: 100%;  display: flex;  flex-direction: row;  }
.homevideoyt {  width: 50%;  }
.ytb {  margin: 0px;  }
.ytb iframe {  border-radius: 10px;  }

.homewithdrawal {  width: 50%;  }
.homewithdrawal-holder {  margin: 0 0 0 20px;  }
.homewithdrawal-holder h3 {  color: var(--secondary-bg-color);  font-weight: bolder;  margin: 10px 0 15px;  }
#v2cashfeed table {  font-size: 16px;  border: 1px solid #ffd8d5;  margin-bottom: 5px;  }
#v2cashfeed .table-condensed>thead>tr>th {  padding: 8px;  border: 0;  text-align: center;  }
#v2cashfeed table thead:first-child {  background: var(--tertiary-bg-color);  color: var(--secondary-txt-color);  }
#v2cashfeed table tr:nth-child(even) {  background: var(--primary-bg-color);  }
#v2cashfeed table tr td {  border-top: 0;  text-align: center;  }
#v2cashfeed table tr th:nth-child(3), #v2cashfeed table tr td:nth-child(3) {  display: none;  }
#v2cashfeed tr:nth-child(n+9) {  display: none;  }


/*===================== PLAYNOW SECTION ===================== */
.playnow-section .item-title {  color: var(--secondary-bg-color);  }
.playnow-section {  padding: 30px 0;  background: var(--main-bg-color);  }
.playnow-section ul {  display: flex;  justify-content: center;  margin: 0;  padding: 0;  gap: 20px;  }
.playnow-section ul li {  margin: 0px;  padding: 15px;  width: 25%;  height: 16.2em;  list-style: none;  display: flex;  flex-direction: column;  align-items: flex-start;  justify-content: center;  position: relative;  border-radius: 10px;  }
.playnow-section span.title {  font-weight: bold;  font-size: 24px;  margin-bottom: 5px;  }
.playnow-section ul li .hoverbox {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 100%;  background-size: 100%;  transform-origin: bottom center;  opacity: 0;  }

.playnow-section ul li .content {  color: var(--secondary-txt-color);  font-size: 13px;  text-align: left;  padding: 0;  }
.playnow-section ul li .content p {  margin: 0;  }

.bottom-box {  position: absolute;  bottom: 0;  left: 0;  right: 0;  z-index: 99;  border-radius: 0 0 9px 9px;  overflow: hidden;  }
.bottom {  position: relative;  width: 100%;  text-align: center;  padding: 10px;  border-radius: 0 0 9px 9px;  height: 45px;  margin-top: 10px;  }
.playnow-section ul li .bottom {  opacity: 1;  transform: translateY(100%);  margin-top: 0;  height: 55px;  }
.bottom::before {  height: 5px;  width: 40%;  content: "";  position: absolute;  top: -3px;  left: 0;  right: 0;  margin: auto;  transform: perspective(10px) rotateX(10deg);  }
.bottom span {  font-size: 15px;  font-weight: bold;  color: var(--main-bg-color);  }

.playnow-section ul li .bottom {  opacity: 1;  margin-top: 20px;  height: 45px;  transform: translateY(90%);  }
.playnow-section ul li:hover .bottom {  transform: translateY(0%);  opacity: 1;  transition: transform 0.2s, opacity 0.2s;  transition-delay: 0.3s;  }
.playnow-section ul li:first-child span.title {  color: #f1c300;  padding: 0;  }
.playnow-section ul li:first-child {  background: url(/data/2174/uploads/1-bg.webp) center center no-repeat;  background-size: cover;  }
.playnow-section ul li:first-child:hover .hoverbox {  background: url(/data/2174/uploads/1h-new.webp) bottom center no-repeat;  background-size: 100% 100%;  width: 100%;  height: 100%;  top: -13%;  opacity: 1;  left: 0;  transition: background-size 0.2s, opacity 0.2s;  }
.playnow-section ul li:first-child:hover .bottom {  margin-top: 20px;  height: 45px;  transform: translateY(0%);  }

.playnow-section ul li:first-child .bottom::before {  background: #f1c300;  }
.playnow-section ul li:first-child .bottom {  background: #f1c300;  }
.playnow-section ul li:nth-child(2) span.title {  color: red;  padding: 0;  }
.playnow-section ul li:nth-child(2) {  background: url(/data/2174/uploads/2-bg.webp) center center no-repeat;  background-size: cover;  }
.playnow-section ul li:nth-child(2):hover .hoverbox {  background: url(/data/2174/uploads/2h-new.webp) bottom center no-repeat;  background-size: 100% 100%;  width: 100%;  height: 100%;  top: -13%;  opacity: 1;  left: 0;  transition: background-size 0.2s, opacity 0.2s;  }

.playnow-section ul li:nth-child(2):hover .bottom {  margin-top: 20px;  height: 45px;  transform: translateY(0%);  }
.playnow-section ul li:nth-child(2) .bottom::before {  background: red;  }
.playnow-section ul li:nth-child(2) .bottom {  background: red;  }
.playnow-section ul li:nth-child(3) span.title {  color: #02c7bd;  padding: 0;  }
.playnow-section ul li:nth-child(3) {  background: url(/data/2174/uploads/03-bg.webp) center center no-repeat;  background-size: cover;  }
.playnow-section ul li:nth-child(3):hover .hoverbox {  background: url(/data/2174/uploads/3h-new.webp) bottom center no-repeat;  background-size: 100% 100%;  width: 100%;  height: 100%;  top: -13%;  opacity: 1;  left: 0;  transition: background-size 0.2s, opacity 0.2s;  }
.playnow-section ul li:nth-child(3):hover .bottom {  margin-top: 20px;  height: 45px;  transform: translateY(0%);  }
.playnow-section ul li:nth-child(3) .bottom::before {  background: #02c7bd;  }
.playnow-section ul li:nth-child(3) .bottom {  background: #02c7bd;  }

.playnow-section ul li:nth-child(4) span.title {  color: #77e201;  padding: 0;  }
.playnow-section ul li:nth-child(4) {  background: url(/data/2174/uploads/5-bgsport.webp) center center no-repeat;  background-size: cover;  }
.playnow-section ul li:nth-child(4):hover .hoverbox {  background: url(/data/2174/uploads/5h-new.webp) bottom center no-repeat;  background-size: 100% 100%;  width: 100%;  height: 100%;  top: -13%;  opacity: 1;  left: 0;  transition: background-size 0.2s, opacity 0.2s, margin-top 0.2s;  }
.playnow-section ul li:nth-child(4):hover .bottom {  margin-top: 20px;  height: 45px;  transform: translateY(0%);  }
.playnow-section ul li:nth-child(4) .bottom::before {  background: #77e201;  }
.playnow-section ul li:nth-child(4) .bottom {  background: #77e201;  }


/*===================== HOME APP ===================== */
.home-download {  margin: 0 auto;  background: var(--main-bg-color);  }
.home-app {  background: url(/data/2174/uploads/download-bg.png) center no-repeat;  background-size: 100%;  height: 330px;  border-radius: 10px;  margin: 0;  display: flex;  align-items: center;  }

.homeapp-detail {  width: 50%;  float: left;  margin-left: 10%;  }
.homeapp-detail h3 {  margin: 0;  color: var(--tertiary-accent-color);  }
.app-content {  display: flex;  align-items: center;  }
.app-logo {  width: auto;  height: 30px;  filter: drop-shadow(0px 2px 2px black);  margin: 0 10px;  }
.downloadtitle {  display: flex;  flex-direction: column;  margin-top: 15px;  }
.app-title1 {  font-size: 22px;  margin: 0;  }
.app-title2 {   font-size: 18px;  margin: 0;  display: flex;  align-items: flex-end;  }

.homeapp-downloadqr {  display: flex;  flex-direction: row;  margin: 30px 0 0;  }
.homeapp-qr {  display: flex;  justify-content: center;  flex-direction: column;  align-items: center;  }
.homeapp-qr img {  width: 120px;  margin: 5px;  }

.homeapp-detailright {  width: 40%;  position: relative;  float: left;  }
.homeapp-detailright img {  width: auto;  max-height: 330px;  }


/*===================== HOME SEO ===================== */
.homeseo {  background: var(--main-bg-color);  padding: 30px 0;  }
#more {  display: none;  }
.footer-mid {  text-align: center;  }
.footer-mid h3 {  color: var(--tertiary-bg-color);  }
.footer-mid h4 {  color: var(--secondary-bg-color);  }
.footer-mid p {  color: var(--tertiary-txt-color);  }
.footer-mid #myBtn {  border: none;  background: transparent;  color: var(--vip-table-title);  }

.hseool {  display: flex;  list-style: none;  padding: 0;  }
.hseool li {  width: 25%;  border: 1px solid var(--primary-bg-color);  margin: 10px;  border-radius: 10px;  padding: 15px;  }



/*===================== FOOTER ===================== */
#theme-footer {  background: var(--secondary-bg-color);  padding: 30px 0;  }
.footer-top {  display: flex;  justify-content: space-between;  align-items: flex-start;  color: var(--main-bg-color);  }
.footer-top p {  text-transform: uppercase;  font-weight: bolder;  }

.ft-1 {  display: flex;  flex-direction: column;  width: 33.33%;  overflow: hidden;  }
.ft-1 ul {  gap: 15px; }
.ft-2, .ft-3 {  display: flex;  flex-direction: column;  width: 33.33%;  overflow: hidden;  margin: 0 30px;  }
.ft-1 ul, .ft-2 ul, .ft-3 ul {  display: flex;  flex-direction: row;  padding: 0;  margin: 0;  }
.ft-1 ul li, .ft-2 ul li, .ft-3 ul li {  padding: 0px 10px 0 0;  margin: 0;  list-style: none;  }
.ft-1 ul li a {  text-decoration: none;  }
.ft-1 img {  width: auto;  height: 35px;  padding: 0;  }
.ft-2 img, .ft-3 img {  width: auto;  height: 35px;  padding: 2px;  }
.followus li {  width: auto !important;  }
.payment ul li {  width: 100% !important;  }
.payment img { width: 100% !important; height: auto !important; padding: 5px; }

.license, .payment, .responsiblegaming {  margin-top: 30px;  }

.link {  display: flex;  justify-content: center;  flex-wrap: wrap;  margin-top: 45px;  }
.link a {  padding: 0 5px;  }
.seperate  {  color: var(--primary-bg-color);  }

.copyright {  display: flex;  flex-direction: row;  align-items: center;  text-align: center;  justify-content: center;  margin: 30px 0 0;  padding: 0 5px;  }
.copyright p {  margin: 0;  color: var(--secondary-txt-color);  }
.copyright img {  margin-left: 15px;  }


/*===================== GAME =====================*/
.prod-page {  background: var(--main-bg-color);  }
.prod-page .games-content img {  width: 100%;  }
.games-content {  position: relative;  }
.games-box {  position: absolute;  top: 50%;  right: 15%;  transform: translateY(-70%);  width: 30%;  text-align: center;  }
.game-logo {  width: 60%;  margin: auto;  }
.game-log img {  width: 100%;  }
.game-desc {  padding: 20px 0 30px;  }
.game-desc span {  font-size: 20px;  color: var(--secondary-txt-color);  }
.game-btn a {  cursor: pointer;  background: var(--btn-gradient-yellow);  padding: 5px 30px;  border-radius: 4px;  color: var(--primary-txt-color);  text-decoration: none;  display: inline-block;  }

#theme-contain-poker ul#game-tabs::after, #theme-contain-lottery ul#game-tabs::after {  flex: unset;  }

ul#game-tabs {  display: flex;  margin: 0;  flex-wrap: wrap;  padding: 30px;  }
ul#game-tabs::after {  content: "";  flex: auto;  }

ul#game-tabs li {  border-radius: 6px;  list-style: none;  width: 18%;  margin: 1%;  position: relative;  overflow: hidden;  text-align: center;  background: var(--tertiary-bg-color);  }
ul#game-tabs li .logoimg {  background: var(--border-btm);  border-radius: 0;  position: relative;  }
ul#game-tabs li .logoname {  color: var(--secondary-txt-color);  margin: 5px 0;  }


ul#game-tabs li img {  width: 100%;  filter: drop-shadow(0px 1px 1px grey);  }
ul#game-tabs li:hover {  transform: translateY(-10%);  transition: 0.3s;  transition-delay: 0.1s;  }
ul#game-tabs li .logoimg::before {  content: "";  height: 3px;  left: 0;  bottom: 0;  width: 100%;  background: var(--vip-table-title);  position: absolute;  z-index: 9;  }
ul#game-tabs li .logoimg::after {  content: "";  width: 60%;  height: 5px;  background: var(--vip-table-title);  position: absolute;  left: 0;  right: 0;  bottom: 2px;  margin: auto;  z-index: 9;  -webkit-transform: perspective(0.5em) rotateX(8deg);  transform: perspective(0.5em) rotateX(8deg);  }

.prod-page .container {  margin-top: 0%;  }


/*===================== SPORT / CASINO / SLOT / HUNTFISH =====================*/
.pgseo {  background: var(--border-btm);  }
.pgseo .footer-mid {  text-align: left;  }




/*===================== SLOT =====================*/
.slot-banner {  background: url(./images/slotbanner.webp) center center no-repeat;  background-size: cover;  position: relative;  }
.slot-banner img {  width: 100%;  }
.slot-jackpot {  position: absolute;  bottom: 108px;  left: 0;  right: 0;  margin: auto;  text-align: center;  width: 22%;  }

.jackpot-title {  color: #9c9c9c;  font-weight: bold;  }
.slot-jackpot .jackpot {  position: unset;  }
.slot-jackpot #jackpot {  position: unset;  color: var(--primary-txt-color);  }
.slot-jackpot .jackpot span {  color: var(--primary-txt-color);  font-size: 35px;  }

.slot-container {  display: flex;  width: 100%;  margin: 60px auto 30px;  }
.slot-side {  height: fit-content;  }
.slot-game {  padding: 0 0 15px 20px;  }
.slot-game .games-content ul {  gap: 0px;  }
.slot-game .games-content ul li {  width: calc(100% / 5.3);  padding: 0 10px 10px;  margin: 5px;  }
.slot-game .more-games {  text-align: left;  padding: 20px 10px;  }

ul#slot-tabs {  display: flex;  padding: 0;  flex-direction: column;  margin: 0;  }
ul#slot-tabs li {  width: 130px;  padding: 10px 0;  list-style: none;  background: var(--border-btm);  text-align: center;  }
ul#slot-tabs li.active {  background: var(--btn-gradient-yellow);  }


ul#slot-tabs li:not(:last-child) {  border-bottom: 1px solid #ffffff;  }
ul#slot-tabs li.inactive {  filter: grayscale(1);  }
ul#slot-tabs li img {  width: auto;  height: 40px;  filter: drop-shadow(0px 1px 1px #7b7b7b);  }

ul#games-subtab {  padding: 10px 0;  margin: 0;  display: flex;  flex-direction: row;  justify-content: flex-start;  }
ul#games-subtab li {  padding: 0px 35px;  list-style: none;  color: var(--tertiary-txt-color);  border-right: 1px solid var(--secondary-txt-color);  cursor: pointer;  font-weight: bold;  }
ul#games-subtab li:not(.inactive) {  color: var(--primary-bg-color);  }


/*===================== VIP =====================*/
.vip-banner {  position: relative;  }
.vip-banner img {  width: 100%;  display: none;  }
.vip-title {  position: absolute;  top: 50%;  transform: translateY(-50%);  right: 0;  width: 25%;  margin-right: 10%;  }
.vip-title h4 {  font-weight: bold;  color: var(--secondary-txt-color);  }
.vip-title p {  color: var(--secondary-txt-color);  }

.vip-box {  margin: auto;  }
.vip-status {  width: 90%;  position: relative;  display: flex;  align-items: center;  justify-content: flex-end;  margin: 30px auto;  }
.vip-status .status-img {  position: absolute;  object-fit: cover;  width: 20%;  left: 0;  top: 0;  }
.vip-status .dummy-col {  }
.vip-status .progress-status {  width: 100%;  }
.vip-status .progress-status .current-status {  width: 100%;  position: relative;  }
.vip-status .progress-status .current-status .status-title {  font-weight: 700;  font-size: 18px;  line-height: 1.8rem; color: var(--secondary-bg-color);  margin-left: 10px;  }
.vip-status .progress-status .current-status .progress-bar {  position: relative;  overflow: hidden;  float: none;  width: auto;  height: 25px;  margin-top: 15px;  border-radius: 20px;  background: repeating-linear-gradient(35deg, #c19393, #a56f6f 15px, #ffffff 0, #eae0e0 25px);  }
.vip-status .progress-status .current-status .progress-bar>span {  position: relative;  display: block;  height: 100%;  }
.vip-status .progress-status .current-status .progress-bar>span:after {  content: "";  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  background: repeating-linear-gradient(35deg, #977c32, #977c32 .15rem, #111 0, #111 .2rem);  }

.vip-status .progress-status .status-level {  display: flex;  width: 100%;  }
.vip-status .progress-status .status-level .all-level {  flex: 1 1 0;  text-align: center;  }
.vip-status .progress-status .status-level .all-level .memberGroupLevelArrowContainer {  width: 25%;  margin: 15px auto;  }
.vip-status .progress-status hr {  height: 16px;  background: var(--header-txt-color);  border: var(--header-txt-color);  }
.vip-status .progress-status .status-level .all-level p {  font-weight: 700;  font-size: 16px;  line-height: 1.6rem;  margin-bottom: 8px;  }

.vip-status .progress-status .status-level .all-level p[data-level=BRONZE] {  color: var(--primary-bg-color);  }
.vip-status .progress-status .status-level .all-level p[data-level=SILVER] {  color: var(--tertiary-txt-color);  }
.vip-status .progress-status .status-level .all-level p[data-level=GOLD] {  color: var(--vip-table-title);  }
.vip-status .progress-status .status-level .all-level p[data-level=PLATINUM] {  color: var(--main-accent-color);  }


.vip-table {  width: 90%;  margin: 15px auto 30px;  }
.vip-table table {  margin: auto;  width: 100%;  }
.vip-table td {  text-align: center;  padding: 10px;  font-size: 12px;  color: var(--tertiary-txt-color);  }
.vip-table tr.table-top, .vip-table table tbody {  /*border-bottom: 1px solid var(--tertiary-bg-color);*/  }
.vip-table thead tr:nth-child(2) {  background: unset;  }

.vip-table tbody tr:nth-child(odd) {  background: var(--border-btm);  }

.vip-table th {  text-align: center;  padding: 0px;  font-size: 12px;   color: var(--scrollbar-color);  }
.vip-table th:first-child {  text-align: left;  color: var(--main-accent-color);  }
.vip-table tr td:first-child {  width: 20%;  text-align: left;  color: var(--primary-txt-color);  font-weight: bold;  }
.vip-table tr.table-top th {  border: unset;  }
.vip-table tr.table-top th:first-child {  vertical-align: bottom;  background: unset;  color: var(--tertiary-bg-color);  font-size: 23px;  font-weight: bold;  }
.vip-table tr th img {  width: auto;  height: 50px;  padding: 0;  }
.vip-table tr td img {  width: 14%;  }
.vip-table>p {  margin-top: 40px;  margin-bottom: 5px;  font-size: 13px;  font-weight: bold;  color: var(--tertiary-bg-color);  }

ul.vip-info {  margin: 0 0 0 45px;  padding: 0;  }
ul.vip-info li {  padding: 5px 0;  color: var(--tertiary-txt-color);  list-style: decimal;  }


/*===================== T&C =====================*/
.sub-box {  padding: 30px;  color: var(--tertiary-txt-color);  }
.sub-box h4 {  color: var(--tertiary-bg-color);  }
.sub-title {  font-size: 30px;  font-weight: bold;  color: var(--tertiary-bg-color);  }
.sub-txt {  padding: 0;  }
hr {  margin-top: 10px;  margin-bottom: 10px;  border-top: 1px solid #7b0b07;  }

.aff-table {  background: var(--quater-txt-color);  text-align: center;  padding: 10px 0 30px 0;  }
.aff-table h3 {  color: var(--tertiary-bg-color);  }
.aff-table table {  width: 70%;  margin: auto;  }

.aff-table table tr:first-child {  background: var(--tertiary-bg-color);  color: var(--secondary-txt-color);  }
.aff-table table tr td { padding: 5px;  border: 1px solid var(--tertiary-bg-color);  }



/*===================== PROMOTION =====================*/
#theme-contain-promotion {  var(--tertiary-bg-color);  background-size: 100%;  }
span.total {  padding-left: 7px;  color: var(--primary-bg-color);  }

ul#promo-tab {  display: flex;  margin: 0;  padding: 0 10px;  }
ul#promo-tab li {  padding: 5px 15px;  color: var(--primary-txt-color);  list-style: none;  font-size: 15px;  border-right: 1px solid #383838;  cursor: pointer;  opacity: 0.7;  transition: 0.2s;  }
ul#promo-tab li:not(.inactive), ul#promo-tab li:hover {  opacity: 1;  transition: 0.2s;  }

ol#faq_modal {  margin: 0;  padding: 0;  }
ol#faq_modal::after {  content: "";  flex: auto;  }
ol#faq_modal li.question {  width: calc(100% / 3);  list-style: none;  padding: 0;  margin: 0;  float: left;  }

.promo a {  text-decoration: none;  }
.promo {  padding: 5px 0;  display: flex;  flex-direction: column;  }
.promo-img {  border-radius: 20px 20px 0 0;  overflow: hidden;  }
.promo-img img {  width: 100%;  }

.promo-txt {  position: relative;  background: var(--main-bg-color);  border-radius: 0 0 20px 20px;  padding: 15px;  filter: drop-shadow(0px 0px 5px #c5c5c5);  min-height: 160px;  }
.promo-txt span {  color: var(--primary-bg-color);  }
.promo-txt::before {  height: 3px;  background: var(--tertiary-bg-color);  position: absolute;  top: 0;  left: 0;  right: 0;  content: "";  }
.promo-txt::after {  height: 3px;  background: var(--tertiary-bg-color);  position: absolute;  top: 3px;  left: 0;  right: 0;  width: 30%;  margin: auto;  transform: perspective(0.5em) rotateX(354deg);  content: "";  }

.promo-txt h3 {  color: var(--primary-txt-color);  font-weight: bold;  margin: 0 0 15px 0;  font-size: 19px;  }
.promo-txt p {  font-size: 13px;  color: var(--secondary-txt-color);  margin-bottom: 20px;  }
.promo-btn {  display: flex;  padding-bottom: 5px;  }
.pbtn-info, .pbtn-apply {  padding: 5px 10px;  background: var(--header-gradient-red);  font-size: 12px;  border-radius: 5px;  margin-right: 10px;  color: var(--secondary-txt-color);  }
.pbtn-apply {  background: var(--btn-gradient-yellow);  }
.promo-btn a, .pbtn-apply a {  color: var(--primary-txt-color);  text-decoration: none;  font-weight: bold;  }

.fancybox-inner .promo {  display: flex;  flex-direction: row;  justify-content: space-around;  padding: 20px;  border-bottom: 1px solid var(--tertiary-accent-color);  }
.fancybox-inner .promo-txt h3 {  font-size: 15px;  }
.fancybox-inner .promo-txt {  color: var(--tertiary-txt-color);  background: var(--main-bg-color);  font-size: 13px;  }
.fancybox-inner .promo-txt::before, .fancybox-inner .promo-txt::after {  display: none;  }
.fancybox-inner>div>h4 {  margin: 0;  }
.fancybox-inner .promo-btn {  padding-bottom: 10px;  }
.fancybox-inner .promo-header {  padding: 10px;  text-align: center;  font-size: 20px;  font-weight: bold;  color: var(--primary-txt-color);  background: var(--primary-bg-color);  border-radius: 20px 20px 0 0;  }
.fancybox-skin {  border-radius: 20px;  }

.fancybox-wrap {  width: 60% !important;  margin: auto !important;  left: 0 !important;  right: 0 !important;  }
.fancybox-close {  top: -11px;  right: -1px;  }

.fancybox-inner {  width: 100% !important;  background-color: var(--main-bg-color);  padding: 15px;  }
.fancybox-inner h4 {  display: none;  }
.fancybox-inner h3 {  color: var(--secondary-bg-color);  }
.fancybox-inner p.red-text {  color: var(--primary-bg-color);  }
.fancybox-inner table {  width: 100%;      margin: 5px 0 10px;  }
.fancybox-inner table th {  border: 1px solid var(--header-txt-color);  padding: 5px;   text-align: center;   background: var(--secondary-bg-color);  color: var(--secondary-txt-color);  }
.fancybox-inner table td {  border: 1px solid var(--header-txt-color);  padding: 5px;   text-align: center;   }
.fancybox-inner .promo-info {  color: var(--tertiary-txt-color);  }
.fancybox-inner .promo-info p {  color: var(--main-accent-color);  }

.fancybox-inner .promo-img, .fancybox-inner .promo-txt {  border-radius: 0;  width: 100%;  }
.fancybox-inner strong {  font-size: 15px;  color: var(--primary-txt-color);  }

.filterDiv {  float: left;  display: none;  margin: 8px;  width: calc(100% - 16px);  }
.show {  display: block !important;  min-height: 420px;  }


/*===================== LOTTERY =====================*/
.lottery-new {  background: var(--main-bg-color);  padding-bottom: 40px;  }
.lotto-info p {  font-size: x-large;  font-weight: bold;  color: #af8842;  }
.lotto-info h5 {  font-size: large;  line-height: 2; }

.lottab table {  background: linear-gradient(180deg, #98825b 0%, #1a202c 100%);  border: 0px solid #102632;  width: 100%;  font-size: 14px;  border-radius: 10px;  }
.lottab table tr, .lottab table th, .lottab table td {  padding: 10px;  color: #fff;  text-align: center;  border: 1px solid white;  }

.lotto-drawresult {  display: flex;  flex-wrap: wrap;  }
.lotto-drawresult .panel.panel-default {  background-color: #2e2e2e;  height: auto;  max-height: fit-content;  margin-bottom: 10px;  }
.lotto-drawresult .panel-default>.panel-heading {  background-color: #f5f5f5;  border-radius: 5px 5px 0 0;  color: #fff;  }

.panel-body2 p a {  color: #00baf6;  }
.panel-body2 p a:hover {  color: #ffd905;  }

div#GDLotto {  display: none;  }
.webpage-lottery .panel-body {  padding: 0px 15px;  }
.webpage-lottery .panel {  padding: 0px 0px;  }
.webpage-lottery .panel-default>.panel-heading {  border-color: transparent;  }
.webpage-lottery .liveresult-template .btn {  margin: 20px;  }

.lottery-new .btn-primary:hover {  color: #fff;  background-color: #7f6d4d;  border-color: #7f6d4d;  }
.lottery-new .btn:hover {  box-shadow: 0px 3px 5px rgb(46 46 46);  transform: translateY(-3px);  }
.lottery-new button {  margin: 17px;  background-color: #caab72;  text-transform: uppercase;  border: 0;  }
.lottery-new .panel-heading {  color: #000;  border: 0px solid red;  }

.panel {  max-height: max-content;  }
.panel-heading {  font-size: 15px;  }
.panel-body label {  color: #fff;  background: #000;  padding: 4px;  width: 100%;  }
.panel-body #TopThree .col-sm-4 {  padding: 1px;  }

.lotto-drawresult .panel-body {  padding: 0 !important;  color: #fff;  font-size: 15px;  min-height: 425px;  background: transparent;  margin: 0;  }
.lotto-drawresult .panel-body .logo {  padding: 10px 0;  margin: 0;  }
.lotto-drawresult .panel-body .logo .col-sm-4 {  margin-left: 9px;  width: 29%;  border: 0px solid red;  }
.lotto-drawresult .panel-body label {  color: #fff;  background: #000;  padding: 4px;  width: 100%;  }
.lotto-drawresult .panel-body #TopThree .col-sm-4 {  padding: 1px;  }


#Perdana-3D, #Perdana-3D .small {  color: #fff !important;  }
#Perdana-3D .panel-default>.panel-heading {  background: #caab72;  }
#Perdana-3D .panel-body .logo {  background: #caab72;  }
#Magnumimg {  background: url(./images/4D_magnum.png) left no-repeat #383838;  height: 50px;  width: 85px;  }
#PMPimg {  background: url(./images/4D_damacai.png) left no-repeat;  height: 50px;  width: 85px;  }
#Totoimg {  background: url(./images/4D_toto.png) left no-repeat;  height: 50px;  width: 85px;  }
#Singaporeimg {  background: url(./images/4D_sgpool.png) left no-repeat;  height: 50px;  width: 85px;  }
#Sabahimg {  background: url(./images/4D_sabah88.png) left no-repeat;  height: 50px;  width: 85px;  }
#Sandakanimg {  background: url(./images/4D_stc.png) left no-repeat;  height: 50px;  width: 85px;  }
#Sarawakimg {  background: url(./images/4D_cashsweep.png) left no-repeat;  height: 50px;  width: 85px;  }
#GDLottoimg {  background: url(./images/4D_gdlotto.png) left no-repeat;  height: 50px;  width: 85px;  }
#Perdanaimg {  background: url(./images/4D_perdana.png) left no-repeat;  height: 50px;  width: 85px;  }
#LuckyHari-Hariimg {  background: url(./images/4D_luckyharihari.png) left no-repeat;  height: 50px;  width: 85px;  }
#GOOD4Dimg {  background: url(./images/4D_good4d.png) left no-repeat;  height: 50px;  width: 85px;  }
#THV88, #GDLotto, #Toto-5D, #Toto-6D {  display: none;  }
#Magnum .panel-heading, #Magnum .logo {  background: #f2bc00;  color: #000 !important;  }
#PMP .panel-heading, #PMP .logo {  background: #148ea4;  }
#Toto .panel-heading, #Toto .logo {  background: #dd0000  }
#Singapore .panel-heading, #Singapore .logo {  background: #12689a;  }
#Sabah .panel-heading, #Sabah .logo {  background: #eee;  color: #000 !important;  }
#Sandakan .panel-heading, #Sandakan .logo {  background: #2f9405;  }
#Sarawak .panel-heading, #Sarawak .logo {  background: #094405;  }
#GDLotto .panel-heading, #GDLotto .logo {  background: #95650a;  }
#Perdana .panel-heading, #Perdana .logo {  background: #777;  }
#LuckyHari-Hari .panel-heading, #LuckyHari-Hari .logo {  background: #00aced;  }
#GOOD4D .panel-heading, #GOOD4D .logo {  background: #ffd45e;  color: #000 !important;  }
#Perdana-3D .panel-heading {  color: #ffffff;  }
#Magnum .panel-default {  border: 3px solid #f2bc00;  border-radius: 10px;  overflow: hidden;  }
#PMP .panel-default {  border: 3px solid #148ea4;  border-radius: 10px;  overflow: hidden;  }
#Toto .panel-default {  border: 3px solid #dd0000;  border-radius: 10px;  overflow: hidden; }
#Singapore .panel-default {  border: 3px solid #12689a;  border-radius: 10px;  overflow: hidden;  }
#Sabah .panel-default {  border: 3px solid #eee;  border-radius: 10px;  overflow: hidden;  }
#Sandakan .panel-default {  border: 3px solid #2f9405;  border-radius: 10px;  overflow: hidden;  }
#Sarawak .panel-default {  border: 3px solid #094405;  border-radius: 10px;  overflow: hidden;  }
#GDLotto .panel-default {  border: 3px solid #95650a;  border-radius: 10px;  overflow: hidden;  }
#Perdana .panel-default {  border: 3px solid #777;  border-radius: 10px;  overflow: hidden;  }
#LuckyHari-Hari .panel-default {  border: 3px solid #00aced;  border-radius: 10px;  overflow: hidden;  }
#GOOD4D .panel-default {  border: 3px solid #ffd45e;  border-radius: 10px;  overflow: hidden;  }
#LuckyHari-Hari .col-sm-9 {  font-size: 14px;  }
#Magnum #datetime label, #GOOD4D #datetime label, #Sabah #datetime label {  color: #000;  }

#datetime {  text-align: right;  }
#datetime label {  background: transparent;  }
#datetime .col-sm-12 {  padding: 0;  }
.popwin {  color: #fff;  }

#TopThree, #Special, #Consolation {  padding: 10px 20px;  }
#TopThree {  padding-top: 20px;  }
#Consolation {  padding-bottom: 20px;  }
a#show3d {  color: #ffffff;  }


/*===================== LOGIN / REGISTER =====================*/
.login .logo {  width: 50%;  margin: auto;  padding: 10px 0;  }
.login .logo img {  width: 100%;  }

#customform #customform_UserName, #customform #customform_Password {  width: 100%;  font-size: 15px;  border-bottom: 1px solid var(--secondary-txt-color);  border-radius: 5px;  padding: 5px 10px;  margin: 0;  color: var(--primary-txt-color);  background: var(--quater-txt-color);  outline: unset;  }

#registerform_btnSubmit, input#customform_submit {  background: var(--btn-gradient-yellow);  color: var(--primary-txt-color);  padding: 10px 30px;  border: none;  border-radius: 5px;  font-size: 14px;  text-transform: uppercase;  font-weight: bold;  margin-top: 5px;  }

.login #customform {  width: 50%;  margin: auto;  padding: 20px 0;  display: flex;  flex-direction: column;  align-content: center;  justify-content: space-evenly;  margin-bottom: 10px;  }
.login #customform dl {  margin: 5px auto;  }
.login-btm {  text-align: center;  padding: 0 30px 10px;  }
.login-btm a {  font-size: 14px;  text-transform: uppercase;  border-radius: 2px;  color: var(--vip-table-title);  }

.modal-content {  background: var(--header-gradient-red);  box-shadow: 0 0 15px rgb(157 0 0 / 50%);  border: none;  }
.modal-body {  color: var(--secondary-txt-color);  }
.modal-header {  padding: 0;  border: unset;  height: 0;  position: absolute;  top: 10px;  right: 10px;  z-index: 999;  }
.modal-header .close {  margin-top: -1px;  padding: 8px 13px;  background: var(--primary-bg-color);  opacity: 1;  border-radius: 50%;  color: var(--primary-txt-color);  text-shadow: none;  }
.modal-dialog {  width: 40%;  margin: 6% auto;  }


/*===================== REGISTER =====================*/
.reg-txt {  width: 70%;  text-align: center;  padding: 10px;  border-radius: 10px 10px 0 0;  background: var(--secondary-bg-color);  color: var(--secondary-txt-color);  font-size: 15px;  font-weight: bold;  margin: 30px auto 0;  }

.register {  display: flex;  background: var(--main-bg-color);  border-radius: 0 0 10px 10px;  justify-content: space-evenly;  width: 70%;  margin: 0 auto 30px;  flex-wrap: wrap;  border: 1px solid var(--secondary-bg-color);  }
.regis-box {  width: 50%;  padding: 15px;  }

.reg p {  font-size: 10px;  color: grey;  margin-top: 20px;  }
.register #registerform {  width: 100%;  border: 0px solid var(--main-accent-color);  overflow: auto;  }
.register #registerform dl {  margin-bottom: 5px;  }
.register #registerform dt {  width: 100%;  color: #927d37;  font-size: 10px;  display: none;  }
.register #registerform dd {  text-align: left;  }

.register #registerform textarea, .register #registerform input[type="text"], .register #registerform input[type="text"], .register #registerform input[type="password"] {  width: 100%;  color: var(--primary-txt-color);  font-size: 13px;  padding: 10px;  background: var(--main-bg-color);  border: 1px solid var(--tertiary-bg-color) !important;  border-radius: 5px;  margin: 5px 0;  }


.register #registerform #registerform_BankName, .register #registerform #registerform_Currency, .register #registerform #registerform_Email {  background: var(--main-bg-color);  border-radius: 0px;  width: 100%;  font-size: 13px;  color: #757575;  border: 1px solid var(--tertiary-bg-color);  padding: 10px;  border-radius: 5px;  outline: unset;  }

.register #registerform #groupSubmit dd {  float: left;  width: 100%;  }

.register #registerform .btnCheckUser, #registerform_btnSubmit {  color: var(--primary-txt-color);  font-weight: bold;  background: var(--vip-table-title);  padding: 10px;  text-transform: uppercase;  border-radius: 5px;  font-size: 11px;  outline: 0;  border: 0;  }

.register dl#groupVerifyCode {  display: flex;  flex-direction: row;  justify-content: space-between;  align-items: center;  }

.register #registerform dl#groupCurrency {  width: 100%;  }
.register input::placeholder {  transform: translateX(0px);  transition: 0.4s;  }
.register input:focus::placeholder {  transform: translateX(200px);  transition: 0.4s;  opacity: 0;  transition-timing-function: ease-in;  }


.regis-dtl {  width: 50%;  padding: 15px;  }
#reg-title1 {  font-size: 32px;  color: var(--primary-txt-color);  font-weight: 900;  }
#reg-title1 span, #reg-desc p {  background: var(--secondary-bg-color);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  }

#reg-desc {  border-left: 3px solid var(--secondary-bg-color);  margin: 10px 0px 0px;  padding: 0;  }
#reg-desc p {  font-weight: 800;  font-size: 18px;  }
#reg-desc ul {  width: 100%;  text-align: justify;  padding-inline-start: 30px;  }
#reg-desc ul li {  padding: 10px;  color: var(--secondary-bg-color);  }

.small, small {  color: #141414 !important;  margin-top: 5px;  }
.small.w3-text-green {  color: green !important;  }
.small.w3-text-red {  color: red !important;  }


/*===================== NEWS ===================== */
.top-title {  color: #7B0B07;  width: fit-content;  padding: 40px 0 10px 0;  margin-left: 10px;  }
.top-title h1, .titleNews h3 {  margin: 0;  }
.top-title a {  display: block;  color: #f00;  margin-top: 10px;  }

#divNewsUpdate, .divLatest {  margin: 25px 0px;  }
.titleNews {  border-bottom: 1px solid #7b1807;  }
.titleNews h3 {  background: #7B0B07;  color: #fff;  width: fit-content;  padding: 10px 25px;  margin: 5px 0 0 0;  display: inline-block;  font-size: 20px;  }
.titleNews a {  color: #000;  float: right;  display: inline-block;  padding: 10px 0;  }

.latest-list.template-list {  display: flex;  flex-wrap: nowrap;  }
.latest-list.template-list a {  display: inline-block;  width: 33.33%;  vertical-align: top;  padding: 10px;  color: #000;  margin: 0;  }
.latest-list.template-list a:hover {  text-decoration: none;  color: var(--primary-txt-color);  background: var(--header-txt-color);  }

#divNewsUpdate .latest-list.template-list {  display: flex;  flex-wrap: wrap;  }
.latest-list.template-list a {  display: inline-block;  width: 33.33%;  vertical-align: top;  padding: 10px;  color: #000;  margin: 0;  }
.page a img, .latest-list.template-list a img {  width: 100%;  }

.postNext {  display: none;  float: right;  }

.divLatest .swiper-pagination-bullets {  display: none;  }

@media (max-width: 768px) {
    .latest-list.template-list a {  width: 45%;  overflow-wrap: break-word;  margin: 0 10px 0 0;  }
    .latest-list.template-list a h3 {  font-size: 14px;  font-weight: 600;  }
}



/*===================== LIVE TV =====================*/
.live-tv {  margin: 15px;  }

.api-leaguefeed-free-wall .brick {  min-height: 217px;  margin: 10px;  position: unset !important;  display: inline-block;  vertical-align: top;  width: 18%;  text-align: center;  }

#api-leaguefeed .brick>ul {  list-style: none;  margin: 0;  padding: 0;  }
#api-leaguefeed {  clear: both;  display: block;  width: 100%;  height: unset !important;  position: unset !important;  text-align: center;  }
#api-leaguefeed .brick>ul>li {  padding: 5px 10px;  }
#api-leaguefeed #versus {  text-align: center;  font-size: 13px;  font-weight: 700;  padding: 20px 0;  }
#api-leaguefeed #livetv a, #api-leaguefeed #livetv a:visited {  display: block;  color: var(--primary-txt-color);  text-decoration: none;  text-align: center;  background: var(--primary-bg-color);  padding: 10px;  border-radius: 10px;  }

.accordion {  background-color: #eee0;  color: #444;  cursor: pointer;  padding: 12px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 20px;  transition: 0.2s;  }
.accordion:hover {  background-color: var(--main-bg-color);  color: var(--primary-txt-color);  }

.panel {  padding: 0 18px;  background-color: var(--primary-txt-color);  max-height: 0;  overflow: hidden;  transition: max-height 0.2s ease-out;  }



/*==============================================================================================*/
/*------------------------------------------------------    MOBILE VIEW  -----------------------------------------------------*/
/*==============================================================================================*/
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

  #theme-frame, .container {  width: 100%;  flex: 100%;  }
  #theme-header {  display: flex;  flex-direction: row;  }
  #theme-header-content {  order: 0;  display: flex;  align-items: center;  background: var(--secondary-bg-color);  }
  #theme-header-top {  background: var(--secondary-bg-color);  }
  #theme-header-link {  display: flex;  }

  #cssmenu #menu-button {  color: var(--secondary-bg-color);  padding: 16px;  }
  #cssmenu #menu-button::before {  border-top: 2px solid var(--primary-txt-color);  border-bottom: 2px solid var(--primary-txt-color);  }
  #cssmenu #menu-button::after {  background: var(--primary-txt-color);  }
  #logo {  width: 100%;  padding: 0 0 0 15px; }
  #logo .logo {  width: 30%;  }

  .header-link {  flex-direction: column;  }
  .header-left, .header-right {  flex-direction: row;  justify-content: space-between;  }
  .btn-box {  align-items: center;  }
  .slider-desktop{  display: none;  }
.flexslider .slides img {border-radius: 10px; filter: drop-shadow(5px 5px 10px #737373);}
  .slider-mobile{  display: block;  padding:12px; border-radius:5px; }
   .mobile-menu {  display: block;  }

.template-list a p {display: none;}
  .live-chat, .header-left, #theme-menu {  display: none;  }

  .annouc.container {  width: 100%;  }
  .item-title {  margin: 40px 0 10px;  }

  .sports-group {  flex-flow: column;  margin: 15px 0 0;  }
  .sports-sec {  width: 100%;  }
  .sports-sec .item-title {  padding: 0;  margin: 15px 0;  }
  .BR, .CMD, .MAXBET, .ME {  position: absolute;  left: 0%;  right: 0%;  bottom: 20%;  }
  #imageCarousel {  display: flex;  }
  #imageCarousel ol.carousel-indicators {  position: unset;  display: flex;  width: 100%;  flex-wrap: wrap;  flex-basis: 0;  justify-content: space-evenly;  align-items: flex-start;  align-content: space-around;  }
  #imageCarousel .carousel-indicators li, #imageCarousel .carousel-indicators .active {  height: 30px;  margin-bottom: 10px;  }
  #imageCarousel .carousel-indicators li::after {  margin: auto;  }
  #imageCarousel .carousel-inner {  height: unset;  left: 0;  }
  #imageCarousel .content-img img {  width: 35%;  left: 30%;  }
  img.provider-character {  display: none;  }

  .itemcontent {  width: 100%;  bottom: 0;  top: unset;  height: 80%;  }
  .item-content {  position: absolute;  left: 65%;  bottom: 5%;  z-index: 9;  width: 30%;  filter: drop-shadow(0 0 23px var(--primary-txt-color));  }
  .item-content .icon-box {  height: 25px;  display: block;  margin-bottom: 3px;  }
  .item-content p {  font-size: 10px;  margin: 0;  }
  .item-content span.btn {  float: right;  padding: 2px 15px;  font-size: 10px;  margin: -5px 5px 0 0;  }

  .slot-section .prod-box {  display: flex;  flex-direction: column;  }
  ul#tabss {   padding: 0;  border-bottom: 1px solid var(--secondary-bg-color);  margin: 10px 0;  }
  .games-content ul {  flex-wrap: nowrap;  overflow-y: scroll;  }
  .games-content ul::-webkit-scrollbar {  display: none;  }
  .games-content ul li {  width: unset;  flex: 1 0 26%;  padding: unset;  }
  .txt-box {  justify-content: space-between;  min-height: 55px;  }

  .game-logo {  width: 35%;  }
  .game-desc {  padding: 20px 0;  }

  .playnow-section ul {  align-items: center;  flex-wrap: nowrap;  flex-direction: row;  overflow-y: hidden;  justify-content: space-between;  }
  .playnow-section ul::-webkit-scrollbar {  display: none;  }
  .playnow-section ul li {  /*margin-bottom: 30px;*/  flex: 1 0 35%;  }

  .home-app {  height: 350px;  background-size: cover;  }

  .ft-1 ul li {  padding: 0 5px 0 0;  }
  .ft-1 .erpartner img {  padding: 3px;  }
  .ft-2 ul li, .ft-3 ul li {  padding: 0 10px 0 0;  }
  .ft-2, .ft-3 {  flex-direction: column;  }
  .followus, .Contactus {  width: 40%;  }

  .modal {  padding: 0;  }
  .modal-dialog {  width: 90%;  margin: 20% auto;  }
  .login #customform {  width: 75%;  padding: 10px 0;  }
  .login-btm {  padding: 0 30px;  }

  .register {  width: 90%;  }
  .regis-box {  width: 80%;  }
  .regis-dtl {  padding: 10px;  }
  #reg-title1 span {  font-size: 20px;  }
  #reg-desc {  margin: 10px 0px 0px;  padding: 0;  }

  .games-box { transform: translateY(-0%);  width: 70%;  margin: 0;  top: 0;  right: 0;  }
  .game-desc span {  color: var(--secondary-txt-color);  text-shadow: 0px 0px 3px black;  }
  ul#game-tabs {  justify-content: flex-start;  padding: 15px 0;  }
  ul#game-tabs li {  width: 29%;  margin: 2%;  }

  .slot-container {  display: flex;  width: auto;  flex-wrap: wrap;  margin: 15px 0 0;  padding: 0 0 0 30px;  }
  .slot-side {  border-radius: 10px;  width: 100%;  }
  .slot-game {  padding: 12px;  }
  .slot-game .games-content ul {  gap: 15px;  justify-content: center;  flex-wrap: wrap;  overflow-y: scroll;  }
  .slot-game .games-content ul li {  width: calc(100% / 5);  margin: 0;  flex: 1 0 18%;  padding: 0;  }
  ul#slot-tabs {  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: center;  }
  .games>ul li {  width: 25%;  display: flex;  padding: 12px;  align-items: center;  justify-content: center;  }
  .more-games {  padding: 5px 10px;  }

  .lottery-new {  width: 100%;  margin: auto;  padding: 15px;  }
  button.btn.btn-primary.btnReload.Timer {  background: var(--secondary-bg-color);  margin: 15px;  }

  .vip-title {  position: unset;  width: 80%;  transform: unset;  margin: auto;  }
  .vip-table {  width: 100%;  margin: auto;  }
  .vip-table th, .vip-table td {  font-size: 10px;  }
  .vip-table tr.table-top th:first-child {  font-size: 10px;  }

  ul#promo-tab {  flex-wrap: wrap;  justify-content: space-between;  }
  ul#promo-tab {  flex-wrap: wrap;  justify-content: flex-start;  display: flex;  }
  ul#promo-tab::after {  content: "";  flex: auto;  }
  ol#faq_modal li.question {  list-style: none;  }
  ol#faq_modal::-webkit-scrollbar {  display: none;  }

  .fancybox-wrap {  width: 90% !important;  }
  .fancybox-inner .promo {  display: flex;  flex-direction: column;  padding: 0;  }
  .pbtn-info, .pbtn-apply {  font-size: inherit;  }

  .aff-table {  background: transparent;  }
  .aff-table table {  width: 100%;  }
  .aff-table table tr td {  font-size: 12px;  }
  .aff-table table tr td {  border: 1px solid var(--primary-bg-color);  } 

  /*-------------------------------------------------------------------------- MENU-SIDE--------------------------------------------------------------------------*/
.openbtn {  font-size: 20px;  cursor: pointer;  background-color: transparent;  color: white;  padding: 0 0 0 12px;  border: none;  }

.sidepanel {  width: 100%;  height: -webkit-fill-available;  position: fixed;  z-index: 999;  top: 0;  right :-100%;  transition: all .5s cubic-bezier(0, 0.17, 0.31, 1.02);  background: #00000050;  overflow-x: auto;  }
.sideclose {  width: 20%;  height: -webkit-fill-available;  position: relative;  float: left;  }
.sidepanel .closebtn {  position: relative;  top: 2%;  left: 25px;  font-size: 50px;  color: var(--main-bg-color);  filter: drop-shadow(0px 0px 3px #000);  }
.sidepanel p {  background: var(--main-bg-color);  text-align: center;  color: var(--tertiary-bg-color);  padding: 10px 0;  }
.sidepanel::-webkit-scrollbar {  display: none;  }

.sidemenu {  width: 80%;  height: fit-content;  position: relative;  float: left;  background: var(--secondary-txt-color);  }
.sidemenu a {  display: block;  }


.mloginreg {  width: 100%;  display: flex;  flex-direction: column;  align-items: center;  }

.mloginreg .mbtn-signup {  width: 40%;  background: var(--btn-gradient-yellow);  text-align: center;  border-radius: 5px;  margin: 0 0 10px 0;  }
.mloginreg .mbtn-signup a {   color: var(--primary-txt-color);  }

.mloginreg .mbtn-login {  width: 100%;  background: var(--mobile-frame);  text-align: center;  border-radius: 5px;  color: var(--scrollbar-color);  }
.mloginreg .mbtn-login a {  color: var(--main-accent-color);  }


  #submenu div {  background: var(--mobile-frame);  border-radius: 5px;  margin: 5px;  position: relative;  padding: 10px 0;  text-align: center;  }
  #submenu img {  width: 100%;  max-width: 30px;  display: block;  margin: auto;  padding-bottom: 8px;  filter: hue-rotate(40deg) brightness(1) saturate(3);  }
  #submenu div span {  color: var(--scrollbar-color);  text-transform: uppercase;  font-size: 12px;  }


  #submenu2 {  padding: 5px;  border-radius: 3px;  margin: 0 5px;  }
  #submenu2 div {  padding: 10px 15px;  color: var(--secondary-txt-color);  border-bottom: 1px solid var(--primary-bg-color);  }
  #submenu2 div a {  color: var(--scrollbar-color);  }
  #submenu2 div a img {  width: 25px;  margin-right: 10px;  filter: hue-rotate(40deg) brightness(1) saturate(3);  }


  .mobile-logo img {  width: 70%;  left: 15%;  position: relative;  /*filter: drop-shadow(0px 1px 2px black);*/  }
  .mobile-language {  padding: 5px;  border-radius: 3px;  margin: 0 5px;  }
  .mobile-language p {  background: var(--mobile-frame);  border-radius: 5px;  display: flex;  align-items: center;  justify-content: center;  }
  .mobile-language p a {  color: var(--tertiary-bg-color);  }
  .mobile-language img {  width: 25px;  margin-right: 10px;  }
  .popular-submenu1 {  display: grid;  justify-content: center;  grid-template-columns: 30% 30% 30%;  margin-top: 25px;  gap: 5px;  }
  .popular-submenu2 {  display: grid;  justify-content: center;  grid-template-columns: 30% 30% 30%;  margin-bottom: 20px !important;  }

}


  /*-------------------------------------------------------------------------- MENU-FOOTER --------------------------------------------------------------------------*/
.nav-btm {  display: none;  background: var(--btn-gradient-red);  position: fixed;  bottom: 0;  left: 0;  width: 100%;  z-index: 10;  background-size: cover;  }
.nav-btm ul {  margin: 0;  padding: 0;  text-align: center;  }
.nav-btm ul li {  width: 17%;  display: inline-block;  }
.nav-btm ul li a {  color: #ffffff;  font-size: 10px;  font-weight: bold;  }
.nav-btm ul li img {  width: 40%;  max-width: fit-content;  padding: 15px 0px 5px;  filter: hue-rotate(40deg) brightness(5) saturate(8);  }
.nav-btm ul li p {  font-size: 10px;  margin-bottom: 10px;  }



/*===============================================================================================*/
/*------------------------------------------------------ MOBILE VIEW PORTRAIR ------------------------------------------------------*/
/*===============================================================================================*/
@media only screen and (min-device-width: 250px) and (max-device-width:660px) and (orientation: portrait)  {

#theme-footer { padding: 30px 0 90px;  }
.nav-btm {  display: block;  }

  #theme-header-link .container {  margin: 0;  padding: 0;  }
  #logo .logo {  width: 100%;  }
 .btn-login .btn {  padding: 5px 10px;  }

  .itemcontent {  z-index: 9;  height: 55%;  }
  .item-content {  width: 70%;  left: 30%;  top: 10%;  }
  .ME span {  display: none;  }
  .ME .mobcaslogo {  display: block;  }

  .homevideo {  flex-direction: column;  }
  .homevideoyt, .homewithdrawal, .homeapp-detail {  width: 100%;  }
  .homewithdrawal-holder {  margin: 0;  }

  #imageCarousel .content-img img {  width: 80%;  left: 20%;  }
  #imageCarousel .carousel-indicators li span {  font-size: 9px;  }
  #imageCarousel .carousel-indicators li, #imageCarousel .carousel-indicators .active {  width: 90px;  height: 30px;  margin-bottom: 10px;  }

  .games>ul li {  width: 50%;  }
  .games>ul li a {  font-size: 9px;  }
  .games-box {  width: 65%;  padding: 10px;  }
  .game-logo {  width: 25%;  }
  .game-desc {  padding: 0;  line-height: 1rem;  }
  .game-desc span {  font-size: 10px;  }
  .game-btn a {  padding: 3px 10px;  font-size: 12px;  }
  ul#game-tabs {  padding: 15px 0;  }
  .games-content ul li {  width: unset;  flex: 1 0 50%;  padding: unset;  }

  .playnow-section ul li {  flex: 1 0 70%;  }

  .homeapp-detail {   margin-left: 3%;  padding: 0 30px;  }
  .homeapp-detailright {  display: none;  }

  .footer-top {  flex-wrap: wrap;  }
  .ft-1 {  width: 100%;  }
  .ft-1 .erpartner img {  padding: 0px;  }
  .ft-2, .ft-3 {  width: 100%;  margin: 30px 0 0;  }
  .hseool {  flex-direction: column;  }
  .hseool li {  width: 100%;  margin: 10px 0;  }

  .slot-container {  padding: 0;  }
  .slot-game .games-content ul li {  width: calc(100% / 3);  flex: 0 0 30%;  }
  ul#slot-tabs li {  width: 33.33%;  text-align: center;  padding: 10px;  }
  ul#slot-tabs li:not(:last-child) {  border-bottom: 0px;  }
  ul#slot-tabs li img {  width: 100%;  }
  ol#faq_modal li.question {  width: 100%;  }

  #Perdana-3D {  width: 100%;  }
  .lotto-drawresult .panel-body #TopThree .col-sm-4 {  display: flex;  }
  .lotto-drawresult .panel-body label.control-label {  width: 50%;  float: left;  }
  #Special div:nth-child(2) {  display: flex;  flex-wrap: wrap;  margin: 0;  }
  #Consolation div:nth-child(2) {  display: flex;  flex-wrap: wrap;  margin: 0;  }

  .show {  height: auto;  }
  .vip-status {  width: 100%;  }

}


/*===============================================================================================*/
/*------------------------------------------------------    MOBILE VIEW LANDSCAPE -----------------------------------------------------*/
/*===============================================================================================*/
@media only screen and (min-device-width: 375px) and (max-device-width: 932px) and (orientation: landscape) {

.sidemenu {  height: initial;  }
.sidemenu .mobile-logo img {  width: 30%;  left: 35%;  }

  #theme-header-content {  background: var(--secondary-bg-color);  }
  .modal-dialog {  width: 60%;  margin: 5% auto;  }
  #logo {  padding: 0;  }

  #imageCarousel .content-img {  width: 100%;  margin: 0;  }
  #imageCarousel .carousel-indicators li, #imageCarousel .carousel-indicators .active {  width: 220px;  }
  .itemcontent {  top: 5%;  }
  .item-content {  top: 30%;  }

  .homeapp-detail {  margin-left: 5%;  }
  .homewithdrawal-holder h3 {  margin: 0 0 25px;  }

  ol#faq_modal li.question { width: 50%;  }
  .show { min-height: 465px;  }

.slot-container {  flex-wrap: nowrap;  }
.slot-side {  width: auto;  }
ul#slot-tabs {  flex-direction: column;  }
ul#slot-tabs li {  width: fit-content;  }

.ft-1 ul {  gap: 0;  }

}


/*================================================================================================*/
/*------------------------------------------------------    IPAD PORTRAIT -----------------------------------------------------*/
/*================================================================================================*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {

  .sidemenu {  height: 100%;  }
  .sidemenu .mobile-logo img {  width: 50%;  left: 25%;  }

  .modal-dialog {  width: 60%;  margin: 5% auto;  }
  .item-content {  top: 10%;  left: 70%;  }
  .item-content .icon-box {  width: 50%;  }
  .item-content .icon-box img {  margin: 0 0 15px;  }
  .item-content span.btn {  float: left;  margin-top: 15px;  }
   #imageCarousel {  justify-content: space-between;  }
   #imageCarousel .content-img img {  width: 40%;  }
  #imageCarousel .carousel-indicators li, #imageCarousel .carousel-indicators .active {  width: 200px;  }

  .homevideo {  flex-direction: column;  }
  .homevideoyt, .homewithdrawal {  width: 100%;  }
  .homewithdrawal-holder { margin: 0;  }
  .homeapp-detail {   margin-left: 3%;  }
  .ft-1 ul li {  padding: 0;  }
  .ft-2, .ft-3 {  margin: 0 10px;  }

  ol#faq_modal li.question { width: 50%;  }
  .show {  min-height: 440px;  }

  .slot-container {  flex-wrap: nowrap;  }
  .slot-side {  width: auto;  }
  ul#slot-tabs {  flex-direction: column;  }
  ul#slot-tabs li {  width: fit-content;  }

}


/*=========================================================================================*/
/*------------------------------------------------------    IPAD LANDSCAPE -----------------------------------------------------*/
/*=========================================================================================*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {

.sidemenu .mobile-logo img {  width: 30%;  left: 35%;  }

#logo .logo {  width: 20%;  }

#imageCarousel {  justify-content: space-between;  }
#imageCarousel .carousel-indicators li, #imageCarousel .carousel-indicators .active {  width: 250px;  }
img.provider-character {  display: block;  }

.item-content {  top: 10%;  }
.item-content .icon-box {  width: 50%;  }
.item-content .icon-box img {  margin: 0 0 15px;  }
.item-content span.btn {  float: left;  margin-top: 15px;  }

.homewithdrawal-holder h3 {  margin: 0 0 25px;  }

.playnow-section ul li {  flex: 0 0 23%;  height: 14em;  }
.playnow-section ul li:hover .hoverbox {  height: 21em !important;  }

.show {  min-height: 430px;  }
.slot-container {  flex-wrap: nowrap;  }
.slot-side {  width: auto;  }
ul#slot-tabs {  flex-direction: column;  }
ul#slot-tabs li {  width: fit-content;  }

ul#game-tabs li {  width: 16%;  }
.ft-1 img {  padding: 3px;  }

}

/*=========================================================================================*/
/*------------------------------------------------------  BIG SCREEN  -----------------------------------------------------*/
/*=========================================================================================*/
@media screen and (max-width:1920px) and (min-width:1800px) {

#imageCarousel .carousel-indicators li {  width: 300px; height: 50px;  }
.games-content ul {  justify-content: space-between;  }

.itemcontent {  top: 25%;  height: 60%;  }
#imageCarousel .content-img img {  width: 35%;  }

.playnow-section {  padding: 40px 0 45px;  }
.playnow-section ul {  gap: 40px;  }
.playnow-section ul li {  height: 21.2rem;  }
.playnow-section ul li:hover .hoverbox {  top: -13% !important;  }

.slot-game .games-content ul li {  width: calc(100% / 5.2);  }
ul#slot-tabs li img {  width: auto;  height: 60px;  }

.show {  min-height: 450px;  width: calc(100% - 16px);  }

}