:root {
  --sprite-size: 24px;
  --sprite-columns: 6;
  --sprite-rows: 5;
  --color-menu-dark: #252c45;
  --color-menu-bg: #161d37;
  --color-bg-hover: #6b7280;
  --color-green: rgb(29, 208, 99);
  --color-menu-gradient: radial-gradient(
    circle at 20% center,
    #333d60,
    ##252c45
  );
}

/*sprite icons*/

.sprite-l {
  --sprite-size: 32px;
}

.sprite-xl {
  --sprite-size: 40px;
}

.sprite {
  display: inline-block;
  background-image: url("../uploads/fonts/sprite-icons.webp?v=4");
  background-repeat: no-repeat;
  background-size: cover;
  width: var(--sprite-size);
  height: var(--sprite-size);
  background-size: calc(var(--sprite-size) * var(--sprite-columns))
    calc(var(--sprite-size) * var(--sprite-rows));
}

.sprite-bonus-central {
  background-position: 0 0;
}

.sprite-bonuses {
  background-position: calc(var(--sprite-size) * -1) 0;
}

.sprite-tournaments {
  background-position: calc(var(--sprite-size) * -2) 0;
}

.sprite-cashback {
  background-position: calc(var(--sprite-size) * -3) 0;
}

.sprite-promotions {
  background-position: calc(var(--sprite-size) * -4) 0;
}

.sprite-my-games {
  background-position: calc(var(--sprite-size) * -5) 0;
}

.sprite-rtp {
  background-position: calc(var(--sprite-size) * 0)
    calc(var(--sprite-size) * -1);
}

.sprite-casino {
  background-position: calc(var(--sprite-size) * -1)
    calc(var(--sprite-size) * -1);
}

.sprite-lobby {
  background-position: calc(var(--sprite-size) * -2)
    calc(var(--sprite-size) * -1);
}

.sprite-providers {
  background-position: calc(var(--sprite-size) * -3)
    calc(var(--sprite-size) * -1);
}

.sprite-top-games {
  background-position: calc(var(--sprite-size) * -4)
    calc(var(--sprite-size) * -1);
}

.sprite-slots {
  background-position: calc(var(--sprite-size) * -5)
    calc(var(--sprite-size) * -1);
}

.sprite-new-games {
  background-position: calc(var(--sprite-size) * 0)
    calc(var(--sprite-size) * -2);
}

.sprite-megaways {
  background-position: calc(var(--sprite-size) * -1)
    calc(var(--sprite-size) * -2);
}

.sprite-jackpots {
  background-position: calc(var(--sprite-size) * -2)
    calc(var(--sprite-size) * -2);
}

.sprite-hold-wins {
  background-position: calc(var(--sprite-size) * -3)
    calc(var(--sprite-size) * -2);
}

.sprite-books {
  background-position: calc(var(--sprite-size) * -4)
    calc(var(--sprite-size) * -2);
}

.sprite-live-games {
  background-position: calc(var(--sprite-size) * -5)
    calc(var(--sprite-size) * -2);
}

.sprite-table-games {
  background-position: calc(var(--sprite-size) * 0)
    calc(var(--sprite-size) * -3);
}

.sprite-account-statement {
  background-position: calc(var(--sprite-size) * -1)
    calc(var(--sprite-size) * -3);
}

.sprite-my-account {
  background-position: calc(var(--sprite-size) * -2)
    calc(var(--sprite-size) * -3);
}

.sprite-my-documents {
  background-position: calc(var(--sprite-size) * -3)
    calc(var(--sprite-size) * -3);
}

.sprite-responsible-gaming {
  background-position: calc(var(--sprite-size) * -4)
    calc(var(--sprite-size) * -3);
}

.sprite-my-bonuses {
  background-position: calc(var(--sprite-size) * -5)
    calc(var(--sprite-size) * -3);
}

.sprite-game-history {
  background-position: calc(var(--sprite-size) * 0)
    calc(var(--sprite-size) * -4);
}

.sprite-scratch-cards {
  background-position: calc(var(--sprite-size) * -1)
    calc(var(--sprite-size) * -4);
}

.sprite-bingo {
  background-position: calc(var(--sprite-size) * -2)
    calc(var(--sprite-size) * -4);
}

div.p-fmenu-wrapper.fmenu-one ul.p-fmenu-list {
}
ul.p-fmenu-list li[class^="p-fmenu-item-"] {
}
@media (max-width: 900px) {
  div.p-fmenu-wrapper.fmenu-one ul.p-fmenu-list {
  }
}
div[class$="-searchbtn"] span::before {
  color: white;
  transition: 0.3s ease;
}
div[class$="-searchbtn"]:hover span::before {
  color: var(--color-bg-hover);
}

div[class^="p-xelem-wrapper-"][class$="-uni-searchbtn"] a.p-xelem-link {
  display: flex;
  border: 1px solid var(--bg-color-light);
  line-height: normal;
  border-radius: var(--border-radius);
  padding: 7px 10px 7px 10px;
  transition: 0.3s ease;
}
div[class^="p-xelem-wrapper-"][class$="-uni-searchbtn"] a.p-xelem-link:hover {
  border: 1px solid white;
}
div[class^="p-xelem-wrapper-"][class$="-uni-searchbtn"] div.p-xelem-content-fa {
  display: none;
}
div[class^="p-xelem-wrapper-"][class$="-uni-searchbtn"] a.p-xelem-link {
  border-radius: 50px;
  padding: 7px;
  border: 1px solid transparent !important;
}
header.main-header {
  background: var(--color-menu-bg) !important;
}
div[class^="p-xelem-wrapper-"][class$="-uni-signupbtn"] a.p-xelem-link,
div[class^="p-xelem-wrapper-"][class$="-uni-loginbtn"] a.p-xelem-link,
div[class^="p-xelem-wrapper-"][class$="-uni-searchbtn"] a.p-xelem-link {
  display: flex;
  border: 1px solid gray;
}
div[class^="p-xelem-wrapper-"][class$="-uni-signupbtn"] a span::before,
div[class^="p-xelem-wrapper-"][class$="-uni-loginbtn"] a span::before {
  margin-right: 5px;
}
header.main-header div.navigation-wrap {
  width: -webkit-fill-available;
  padding: 0 5px 0 5px;
}
header.main-header div.navigation-wrap ul.menu li a {
  padding: 10px;
  height: 40px;
  transition: 0.3s ease;
}
header.main-header div.navigation-wrap ul.menu li a span {
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
}
header.main-header div.navigation-wrap ul.menu li a i {
  scale: 0.9;
}
header.main-header div.navigation-wrap ul.menu li {
  border-radius: 5px;
  background-image: radial-gradient(circle at 20% center, #333d60, #252c45);
  transition: 0.3s ease;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-0-bonus_central,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-5-rtp,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-6-casino,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-8-english {
  background-image: unset;
  background-color: var(--color-menu-dark) !important;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-0-bonus_central
  span,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-5-rtp span,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-6-casino span,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-8-english span {
  position: absolute;
  left: 55px;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-1-bonuses,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-2-tournaments,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-3-cashback,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-4-promotions {
  margin-left: 15px !important;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-1-bonuses a,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-2-tournaments a,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-3-cashback a,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-4-promotions a {
  height: 35px;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support {
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-8-english {
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support,
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support a {
  border-radius: 50px;
  background-color: var(--color-green) !important;
  background-image: unset !important;
}
.p-menu-item-7-support i::before {
  color: white !important;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support a {
  height: 35px;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-7-support:hover
  a {
  border-radius: 50px !important;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support a {
  border: 1px solid transparent;
  justify-content: center;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support i {
  color: white;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support span {
  font-size: 18px;
  font-weight: 700;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-7-support:hover
  i::before {
  transition: 0.3s ease;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-7-support:hover
  i::before,
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-7-support:hover
  span {
  color: white;
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-7-support i {
  font-size: 18px;
}
header.main-header div.navigation-wrap ul.menu li:hover a {
  border-radius: 5px;
  border: 1px solid var(--bg-color);
  width: -webkit-fill-available;
}
.menu-p-main-menu-container ul.menu {
  gap: 5px;
}
header.main-header div.navigation-wrap ul.menu li:hover span {
  color: var(--bg-color);
}
header.main-header div.navigation-wrap ul.menu li.p-menu-item-8-english span {
  left: unset !important;
  justify-self: anchor-center;
  font-size: 18px;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-8-english
  span::after {
  margin-left: 5px;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-8-english:hover
  span {
  color: white !important;
}
header.main-header
  div.navigation-wrap
  ul.menu
  li.p-menu-item-6-casino
  a::after {
  content: "\f077";
  font-family: "Font Awesome 6 Free";
  right: 20px;
  position: absolute;
  color: white;
}

div[class^="p-xelem-wrapper-"][class$="-uni-signupbtn"]:hover a,
div[class^="p-xelem-wrapper-"][class$="-uni-loginbtn"]:hover a {
  background-color: var(--color-bg-hover);
}
div[class^="p-xelem-wrapper-"][class$="-uni-signupbtn"] a {
  background-color: var(--color-green);
}

span.p-swiperslide-text {
  color: #ffff00;
  text-shadow: 3px 3px 2px black;
  font-weight: 900;
  font-size: 20px;
  position: relative;
  display: block;
  width: 225px;
  overflow-wrap: break-word;
}
.p-swiperslide-content {
  position: absolute !important;
  top: 25% !important;
  left: 10%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
span.p-swiperslide-button {
  background-color: var(--color-green);
  border: 1px solid var(--color-bg-hover);
  border-radius: var(--border-radius);
  padding: 3px 10px 3px 10px;
  transition: 0.3s ease;
}
span.p-swiperslide-button:hover {
  background-color: var(--color-bg-hover);
  border: 1px solid white;
}
span.swiper-pagination-bullet {
  margin: 0 6px !important;
  width: 20px;
  height: 4px;
  border-radius: 5px;
  background-color: var(--bg-color) !important;
}
.swiper-button-prev,
.swiper-button-next {
  display: none;
}
@media (max-width: 1800px) {
  span.p-swiperslide-text {
    font-size: 16px;
  }
}
@media (max-width: 1600px) {
  span.p-swiperslide-text {
    width: 200px;
  }
}
@media (max-width: 1300px) {
  span.p-swiperslide-text {
    font-size: 14px;
  }
  span.p-swiperslide-button {
    padding: 1px 10px 1px 10px;
  }
}
@media (max-width: 1199px) {
  span.p-swiperslide-text {
    font-size: 30px;
  }
  span.p-swiperslide-text {
    width: 400px;
  }
  span.p-swiperslide-button {
    padding: 3px 10px 3px 10px;
    font-size: 22px;
  }
}
@media (max-width: 768px) {
  span.p-swiperslide-text {
    width: 300px;
  }
  span.p-swiperslide-text {
    font-size: 22px;
  }
  span.p-swiperslide-button {
    padding: 3px 10px 3px 10px;
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  span.p-swiperslide-text {
    width: 200px;
  }
  span.p-swiperslide-text {
    font-size: 16px;
  }
  span.p-swiperslide-button {
    padding: 3px 10px 3px 10px;
    font-size: 12px;
  }
}

.p-titlebar-titleleft-text {
  font-size: 28px;
  font-weight: 700;
}
div[class^="p-titlebar-cat-"] a.p-titlebar-titleleft-btn {
  color: white !important;
  border: 2px solid white !important;
  transition: 0.3s ease;
}
div[class^="p-titlebar-cat-"] a.p-titlebar-titleleft-btn:hover {
  border: 2px solid var(--color-bg-hover) !important;
  color: var(--color-bg-hover) !important;
}
.p-titlebar-titleright {
  display: flex;
  gap: 10px;
}
.p-titlebar-titleright a {
  border: 1px solid transparent;
  background-color: var(--color-menu-dark);
  border-radius: 50px;
  padding: 0px 9px 0 9px;
  transition: 0.3s ease;
}
.p-titlebar-titleright a:hover {
  background-color: var(--border-color-gray);
}

a.p-imagegrid-button {
  background-color: var(--color-green) !important;
  margin-top: 0.5rem !important;
}
a.p-imagegrid-button::before {
  content: "\f04b";
  font-family: "Font Awesome 6 Free";
  margin-right: 5px;
}
span.p-imagegrid-title {
  font-weight: 900;
  color: white;
  font-size: 18px;
  width: 100%;
  text-align: -webkit-center;
}
span.p-imagegrid-provider {
  position: absolute;
  bottom: 0;
  background-color: rgb(0 0 0 / 55%);
  width: -webkit-fill-available;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: white;
}
a.p-imagegrid-button:hover {
  color: var(--color-bg-hover) !important;
  border: 1px solid var(--color-bg-hover) !important;
}

div.p-fmenu-wrapper.fmenu-one ul.p-fmenu-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: unset !important;
  justify-items: center;
}
a.p-fmenu-link {
  font-weight: 300;
  white-space: nowrap;
  font-size: 14px;
}
ul.p-fmenu-list li {
  margin-right: 25px;
}
div.p-fmenu-wrapper a.p-fmenu-link:hover {
  color: white !important;
}

.p-imagegrid-overlay {
  margin-top: -10%;
}
div.p-xelem-wrapper-1-bot-logo img.p-xelem-img {
  margin-top: 25px;
}
/*mobile*/
@media (max-width: 1024px) {
  .p-imagegrid-title,
  .p-imagegrid-provider {
    font-size: 0.6rem !important;
  }

  a.p-imagegrid-button {
    font-size: 0.7rem !important;
    margin-top: 0.3rem !important;
  }

  div.p-fmenu-wrapper.fmenu-one ul.p-fmenu-list {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  ul.p-fmenu-list li {
    margin-right: unset !important;
  }
}
@media (max-width: 500px) {
  .p-titlebar-titleleft-text,
  .p-titlebar-titleleft-btn {
    font-size: 0.9rem;
  }
}

div.basel-close-sidebar-btn img.sidebar-mobile-logo {
  padding: 50px 20px 0px 20px;
}
.mobile-nav .p-xelem-wrapper-logsign-blank {
  margin: 60px 10px 20px !important;
}
div.mobile-nav div.p-xelem-wrapper-9-uni-loginbtn .p-xelem-fa,
div.mobile-nav div.p-xelem-wrapper-10-uni-signupbtn .p-xelem-fa {
  color: white;
  align-self: anchor-center;
}
div.mobile-nav ul.site-mobile-menu:first-child {
  border-top: 1px solid transparent !important;
}
div.menu-p-main-menu-container a.p-menu-link {
  border-radius: 5px;
  background-image: radial-gradient(circle at 20% center, #333d60, #252c45);
  transition: 0.3s ease;
}
div.menu-p-main-menu-container ul.site-mobile-menu {
  display: flex;
  gap: 5px;
  flex-direction: column;
}
div.mobile-nav ul.site-mobile-menu a.p-menu-link {
  display: flex;
  align-items: center;
  margin: 0 10px 0 10px;
  height: 40px;
  overflow: hidden;
}
div.mobile-nav ul.site-mobile-menu a.p-menu-link span.p-menu-text {
  position: absolute;
  margin-left: 15%;
  font-size: 0.9rem;
  text-transform: capitalize;
}
div.mobile-nav li.p-menu-item-7-support span.p-menu-text,
div.mobile-nav li.p-menu-item-8-english span.p-menu-text {
  margin-left: unset !important;
  position: unset !important;
}
div.mobile-nav li.p-menu-item-7-support a.p-menu-link,
div.mobile-nav li.p-menu-item-8-english a.p-menu-link {
  width: -webkit-fill-available;
  justify-content: center;
}
div.mobile-nav li.p-menu-item-7-support a.p-menu-link {
  border-radius: 50px;
  height: 35px;
  background-image: unset;
  background-color: var(--color-green);
}
div.mobile-nav li.p-menu-item-7-support:hover span {
  color: white !important;
}
div.mobile-nav li.p-menu-item-8-english a {
  height: 30px !important;
}
div.mobile-nav li.p-menu-item-7-support {
  margin-top: 10px;
}
div.mobile-nav li.p-menu-item-8-english {
  margin-top: 5px;
}
div.mobile-nav li a {
  transition: 0.3s ease;
}
div.mobile-nav li:hover a {
  background-image: unset !important;
  background-color: var(--color-menu-bg) !important;
}
div.mobile-nav li:hover span.p-menu-text {
  color: white !important;
}

div.mobile-nav li.p-menu-item-8-english span::after {
  margin-left: 5px;
  content: "\f078";
  font-family: "Font Awesome 6 Free";
}

div.mobile-nav li.p-menu-item-6-casino a::after {
  content: "\f077";
  font-family: "Font Awesome 6 Free";
  right: 20px;
  position: absolute;
  color: white;
}

div.basel-toolbar a {
  color: rgb(127 127 127);
  transition: 0.3s ease !important;
}
div.basel-toolbar a:hover {
  color: white;
}

div.mobile-nav div.p-xelem-wrapper-logsign-blank a {
  padding: 7px 10px 7px 10px !important;
}